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

Spark (Leboncoin design system) components.

import {
  Collapsible
} from "../chunk-3LEFXZNI.mjs";
import {
  Icon
} from "../chunk-UMUMFMFB.mjs";
import "../chunk-KEGAAGJW.mjs";
import {
  Slot
} from "../chunk-6QCEPQ3U.mjs";

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

// src/accordion/AccordionItem.tsx
import { mergeProps as mergeProps2 } from "@zag-js/react";
import { cx as cx2 } from "class-variance-authority";

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

// src/accordion/AccordionItem.tsx
import { jsx as jsx3 } from "react/jsx-runtime";
var Item = ({
  asChild = false,
  className,
  children,
  disabled = false,
  value,
  ref,
  ...props
}) => {
  const accordion2 = useAccordionContext();
  const localProps = {
    className: cx2(
      "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 = mergeProps2(itemProps, localProps);
  const item = accordion2.getItemState({ value });
  const itemContentProps = accordion2.getItemContentProps({ value });
  return /* @__PURE__ */ jsx3(AccordionItemProvider, { value, disabled, children: /* @__PURE__ */ jsx3(
    Collapsible,
    {
      ref,
      open: item.expanded,
      "data-spark-component": "accordion-item",
      ids: { content: itemContentProps.id },
      ...mergedProps,
      children
    }
  ) });
};
Item.displayName = "Accordion.Item";

// src/accordion/AccordionItemContent.tsx
import { createSplitProps } from "@spark-ui/internal-utils";
import { mergeProps as mergeProps3 } from "@zag-js/react";
import { cx as cx3 } from "class-variance-authority";
import { jsx as jsx4 } from "react/jsx-runtime";
var splitVisibilityProps = createSplitProps();
var ItemContent = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const accordion2 = useAccordionContext();
  const accordionItem = useAccordionItemContext();
  const localProps = {
    className: cx3("[&>: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 = mergeProps3(itemContentProps, localProps);
  return /* @__PURE__ */ jsx4(Collapsible.Content, { ref, "data-spark-component": "accordion-item-content", ...mergedProps, children });
};
ItemContent.displayName = "Accordion.ItemContent";

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

// src/accordion/AccordionItemTrigger.tsx
import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
import { mergeProps as mergeProps4 } from "@zag-js/react";
import { cx as cx5 } from "class-variance-authority";
import { jsx as jsx6, jsxs } from "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: cx5(
      "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 = mergeProps4(
    getItemTriggerProps({ value, ...disabled && { disabled } }),
    localProps
  );
  const isOpen = !!mergedProps["aria-expanded"];
  return /* @__PURE__ */ jsxs(Component, { ref, "data-spark-component": "accordion-item-trigger", ...mergedProps, children: [
    /* @__PURE__ */ jsx6("div", { className: "gap-lg flex grow items-center", children }),
    /* @__PURE__ */ jsx6(
      Icon,
      {
        intent: "neutral",
        className: cx5("shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none", {
          "rotate-180": isOpen
        }),
        size: "sm",
        children: /* @__PURE__ */ jsx6(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";
export {
  Accordion2 as Accordion
};
//# sourceMappingURL=index.mjs.map