@spark-ui/components/dist/accordion/index.js

Spark (Leboncoin design system) components.

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/accordion/index.ts
var accordion_exports = {};
__export(accordion_exports, {
  Accordion: () => Accordion2
});
module.exports = __toCommonJS(accordion_exports);

// src/accordion/Accordion.tsx
var accordion = __toESM(require("@zag-js/accordion"));
var import_react2 = require("@zag-js/react");
var import_class_variance_authority = require("class-variance-authority");
var import_react3 = require("react");

// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};

// src/accordion/Accordion.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var AccordionContext = (0, import_react3.createContext)(null);
var Accordion = ({
  asChild = false,
  children,
  collapsible: collapsible2 = true,
  className,
  defaultValue,
  design = "outlined",
  disabled = false,
  multiple = false,
  value,
  onValueChange,
  ref,
  ...props
}) => {
  const [machineProps, localProps] = accordion.splitProps({
    children,
    multiple,
    collapsible: collapsible2,
    value,
    disabled,
    className: (0, import_class_variance_authority.cx)("bg-surface rounded-lg h-fit", className),
    ...props
  });
  const service = (0, import_react2.useMachine)(accordion.machine, {
    ...machineProps,
    defaultValue,
    value,
    id: (0, import_react3.useId)(),
    onValueChange(details) {
      onValueChange?.(details.value);
    }
  });
  const Component = asChild ? Slot : "div";
  const api = accordion.connect(service, import_react2.normalizeProps);
  const mergedProps = (0, import_react2.mergeProps)(api.getRootProps(), localProps);
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionContext.Provider, { value: { ...api, design }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { "data-spark-component": "accordion", ref, ...mergedProps, children }) });
};
Accordion.displayName = "Accordion";
var useAccordionContext = () => {
  const context = (0, import_react3.useContext)(AccordionContext);
  if (!context) {
    throw Error("useAccordionContext must be used within a Accordion provider");
  }
  return context;
};

// src/accordion/AccordionItem.tsx
var import_react9 = require("@zag-js/react");
var import_class_variance_authority3 = require("class-variance-authority");

// src/collapsible/Collapsible.tsx
var collapsible = __toESM(require("@zag-js/collapsible"));
var import_react4 = require("@zag-js/react");
var import_react5 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var CollapsibleContext = (0, import_react5.createContext)(null);
var Collapsible = ({
  asChild = false,
  children,
  defaultOpen = false,
  disabled = false,
  onOpenChange,
  open,
  ids,
  ref,
  ...props
}) => {
  const service = (0, import_react4.useMachine)(collapsible.machine, {
    open,
    defaultOpen,
    disabled,
    id: (0, import_react5.useId)(),
    ids,
    onOpenChange(details) {
      onOpenChange?.(details.open);
    }
  });
  const api = collapsible.connect(service, import_react4.normalizeProps);
  const Component = asChild ? Slot : "div";
  const mergedProps = (0, import_react4.mergeProps)(api.getRootProps(), props);
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapsibleContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { "data-spark-component": "collapsible", ref, ...mergedProps, children }) });
};
Collapsible.displayName = "Collapsible";
var useCollapsibleContext = () => {
  const context = (0, import_react5.useContext)(CollapsibleContext);
  if (!context) {
    throw Error("useCollapsibleContext must be used within a Collapsible provider");
  }
  return context;
};

// src/collapsible/CollapsibleContent.tsx
var import_react6 = require("@zag-js/react");
var import_class_variance_authority2 = require("class-variance-authority");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Content = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const { getContentProps } = useCollapsibleContext();
  const Component = asChild ? Slot : "div";
  const contentProps = getContentProps();
  const mergedProps = (0, import_react6.mergeProps)(contentProps, {
    className: (0, import_class_variance_authority2.cx)(
      "overflow-hidden",
      "motion-reduce:animate-none!",
      "[&[hidden]]:hidden",
      "data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out",
      className
    ),
    ...props
  });
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-spark-component": "collapsible-content", ...mergedProps, children });
};
Content.displayName = "Collapsible.Content";

// src/collapsible/CollapsibleTrigger.tsx
var import_react7 = require("@zag-js/react");
var import_jsx_runtime5 = require("react/jsx-runtime");
var Trigger = ({ asChild = false, children, ref, ...props }) => {
  const collapsibleContext = useCollapsibleContext();
  const Component = asChild ? Slot : "button";
  const mergedProps = (0, import_react7.mergeProps)(collapsibleContext.getTriggerProps(), props);
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ref, "data-spark-component": "collapsible-trigger", ...mergedProps, children });
};
Trigger.displayName = "Collapsible.Trigger";

// src/collapsible/index.ts
var Collapsible2 = Object.assign(Collapsible, {
  Trigger,
  Content
});
Collapsible2.displayName = "Collapsible";
Trigger.displayName = "Collapsible.Trigger";
Content.displayName = "Collapsible.Content";

// src/accordion/AccordionItemContext.tsx
var import_react8 = require("react");
var import_jsx_runtime6 = require("react/jsx-runtime");
var AccordionItemContext = (0, import_react8.createContext)(null);
var AccordionItemProvider = ({
  value: valueProp,
  disabled: disabledProp = false,
  children
}) => {
  const [value, setValue] = (0, import_react8.useState)(valueProp);
  const [disabled, setDisabled] = (0, import_react8.useState)(disabledProp);
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionItemContext.Provider, { value: { value, setValue, disabled, setDisabled }, children });
};
var useAccordionItemContext = () => {
  const context = (0, import_react8.useContext)(AccordionItemContext);
  if (!context) {
    throw Error("useAccordionItemContext must be used within a AccordionItem provider");
  }
  return context;
};

// src/accordion/AccordionItem.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var Item = ({
  asChild = false,
  className,
  children,
  disabled = false,
  value,
  ref,
  ...props
}) => {
  const accordion2 = useAccordionContext();
  const localProps = {
    className: (0, import_class_variance_authority3.cx)(
      "relative first:rounded-t-lg last:rounded-b-lg",
      "not-last:border-b-0",
      { "border-sm border-outline": accordion2.design === "outlined" },
      className
    ),
    asChild,
    ...props
  };
  const itemProps = accordion2.getItemProps({ value, ...disabled && { disabled } });
  const mergedProps = (0, import_react9.mergeProps)(itemProps, localProps);
  const item = accordion2.getItemState({ value });
  const itemContentProps = accordion2.getItemContentProps({ value });
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccordionItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
    Collapsible2,
    {
      ref,
      open: item.expanded,
      "data-spark-component": "accordion-item",
      ids: { content: itemContentProps.id },
      ...mergedProps,
      children
    }
  ) });
};
Item.displayName = "Accordion.Item";

// src/accordion/AccordionItemContent.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_react10 = require("@zag-js/react");
var import_class_variance_authority4 = require("class-variance-authority");
var import_jsx_runtime8 = require("react/jsx-runtime");
var splitVisibilityProps = (0, import_internal_utils.createSplitProps)();
var ItemContent = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const accordion2 = useAccordionContext();
  const accordionItem = useAccordionItemContext();
  const localProps = {
    className: (0, import_class_variance_authority4.cx)("[&>:first-child]:p-lg", "text-body-1 text-on-surface", className),
    asChild,
    ...props
  };
  const contentProps = accordion2.getItemContentProps({
    value: accordionItem.value,
    ...accordionItem.disabled && { disabled: accordionItem.disabled }
  });
  const [, itemContentProps] = splitVisibilityProps(contentProps, ["hidden", "data-state"]);
  const mergedProps = (0, import_react10.mergeProps)(itemContentProps, localProps);
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Collapsible2.Content, { ref, "data-spark-component": "accordion-item-content", ...mergedProps, children });
};
ItemContent.displayName = "Accordion.ItemContent";

// src/accordion/AccordionItemHeader.tsx
var import_class_variance_authority5 = require("class-variance-authority");
var import_jsx_runtime9 = require("react/jsx-runtime");
var ItemHeader = ({
  asChild = false,
  children,
  className,
  ref
}) => {
  const Component = asChild ? Slot : "h3";
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
    Component,
    {
      ref,
      "data-spark-component": "accordion-item-header",
      className: (0, import_class_variance_authority5.cx)("rounded-[inherit]", className),
      children
    }
  );
};
ItemHeader.displayName = "Accordion.ItemHeader";

// src/accordion/AccordionItemTrigger.tsx
var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
var import_react12 = require("@zag-js/react");
var import_class_variance_authority7 = require("class-variance-authority");

// src/icon/Icon.tsx
var import_react11 = require("react");

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
    Component,
    {
      ...props,
      ref,
      style: {
        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
        position: "absolute",
        border: 0,
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: "hidden",
        clip: "rect(0, 0, 0, 0)",
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...props.style
      }
    }
  );
};
VisuallyHidden.displayName = "VisuallyHidden";

// src/icon/Icon.styles.tsx
var import_internal_utils2 = require("@spark-ui/internal-utils");
var import_class_variance_authority6 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink-0"], {
  variants: {
    /**
     * Color scheme of the icon.
     */
    intent: (0, import_internal_utils2.makeVariants)({
      current: ["text-current"],
      main: ["text-main"],
      support: ["text-support"],
      accent: ["text-accent"],
      basic: ["text-basic"],
      success: ["text-success"],
      alert: ["text-alert"],
      error: ["text-error"],
      info: ["text-info"],
      neutral: ["text-neutral"]
    }),
    /**
     * Sets the size of the icon.
     */
    size: (0, import_internal_utils2.makeVariants)({
      current: ["u-current-font-size"],
      sm: ["w-sz-16", "h-sz-16"],
      md: ["w-sz-24", "h-sz-24"],
      lg: ["w-sz-32", "h-sz-32"],
      xl: ["w-sz-40", "h-sz-40"]
    })
  }
});

// src/icon/Icon.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
var Icon = ({
  label,
  className,
  size = "current",
  intent = "current",
  children,
  ...others
}) => {
  const child = import_react11.Children.only(children);
  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
    (0, import_react11.cloneElement)(child, {
      className: iconStyles({ className, size, intent }),
      "data-spark-component": "icon",
      "aria-hidden": "true",
      focusable: "false",
      ...others
    }),
    label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(VisuallyHidden, { children: label })
  ] });
};
Icon.displayName = "Icon";

// src/accordion/AccordionItemTrigger.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var ItemTrigger = ({
  asChild = false,
  children,
  className,
  ref,
  ...props
}) => {
  const { getItemTriggerProps } = useAccordionContext();
  const { value, disabled } = useAccordionItemContext();
  const Component = asChild ? Slot : "button";
  const localProps = {
    ...props,
    className: (0, import_class_variance_authority7.cx)(
      "relative flex gap-lg justify-between items-center min-h-sz-48",
      "w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-0",
      "hover:enabled:bg-surface-hovered focus:bg-surface-hovered",
      "focus-visible:u-outline focus-visible:outline-hidden focus-visible:z-raised",
      "disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed",
      className
    )
  };
  const mergedProps = (0, import_react12.mergeProps)(
    getItemTriggerProps({ value, ...disabled && { disabled } }),
    localProps
  );
  const isOpen = !!mergedProps["aria-expanded"];
  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Component, { ref, "data-spark-component": "accordion-item-trigger", ...mergedProps, children: [
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "gap-lg flex grow items-center", children }),
    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
      Icon,
      {
        intent: "neutral",
        className: (0, import_class_variance_authority7.cx)("shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none", {
          "rotate-180": isOpen
        }),
        size: "sm",
        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
      }
    )
  ] });
};
ItemTrigger.displayName = "Accordion.ItemTrigger";

// src/accordion/index.ts
var Accordion2 = Object.assign(Accordion, {
  Item,
  ItemHeader,
  ItemTrigger,
  ItemContent
});
Accordion2.displayName = "Accordion";
Item.displayName = "Item";
ItemHeader.displayName = "ItemHeader";
ItemTrigger.displayName = "Accordion.Trigger";
ItemContent.displayName = "Accordion.Content";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Accordion
});
//# sourceMappingURL=index.js.map