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

Spark (Leboncoin design system) components.

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

// src/accordion/Accordion.tsx
import { Accordion as BaseAccordion } from "@base-ui-components/react/accordion";
import { cx } from "class-variance-authority";
import { createContext, useContext } from "react";

// src/accordion/useRenderSlot.tsx
import { jsx } from "react/jsx-runtime";
function useRenderSlot(asChild, defaultTag) {
  const Component = asChild ? Slot : defaultTag;
  return asChild ? ({ ...props }) => /* @__PURE__ */ jsx(Component, { ...props }) : void 0;
}

// src/accordion/Accordion.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var AccordionContext = createContext(null);
var Accordion = ({
  asChild = false,
  children,
  design = "outlined",
  hiddenUntilFound = true,
  multiple = false,
  className,
  ref,
  ...props
}) => {
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ jsx2(AccordionContext.Provider, { value: { design }, children: /* @__PURE__ */ jsx2(
    BaseAccordion.Root,
    {
      "data-spark-component": "accordion",
      ref,
      openMultiple: multiple,
      hiddenUntilFound,
      className: cx("bg-surface h-fit rounded-lg", className),
      render: renderSlot,
      ...props,
      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 { Accordion as BaseAccordion2 } from "@base-ui-components/react/accordion";
import { cx as cx2 } from "class-variance-authority";
import { jsx as jsx3 } from "react/jsx-runtime";
var Item = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const accordion = useAccordionContext();
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ jsx3(
    BaseAccordion2.Item,
    {
      ref,
      "data-spark-component": "accordion-item",
      render: renderSlot,
      className: cx2(
        "relative first:rounded-t-lg last:rounded-b-lg",
        "not-last:border-b-0",
        { "border-sm border-outline": accordion.design === "outlined" },
        className
      ),
      ...props,
      children
    }
  );
};
Item.displayName = "Accordion.Item";

// src/accordion/AccordionItemContent.tsx
import { Accordion as BaseAccordion3 } from "@base-ui-components/react/accordion";
import { cx as cx3 } from "class-variance-authority";
import { jsx as jsx4 } from "react/jsx-runtime";
var ItemContent = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ jsx4(
    BaseAccordion3.Panel,
    {
      ref,
      "data-spark-component": "accordion-item-content",
      className: cx3(
        "[&>:first-child]:p-lg overflow-hidden",
        "h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0",
        "text-body-1 text-on-surface",
        className
      ),
      render: renderSlot,
      ...props,
      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 { Accordion as BaseAccordion4 } from "@base-ui-components/react/accordion";
import { ArrowHorizontalDown } from "@spark-ui/icons/ArrowHorizontalDown";
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 renderSlot = useRenderSlot(asChild, "button");
  return /* @__PURE__ */ jsxs(
    BaseAccordion4.Trigger,
    {
      ref,
      "data-spark-component": "accordion-item-trigger",
      render: renderSlot,
      className: cx5(
        "group",
        "gap-lg min-h-sz-48 relative flex items-center justify-between",
        "px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left",
        "hover:enabled:bg-surface-hovered focus:bg-surface-hovered",
        "focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden",
        "disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed",
        className
      ),
      ...props,
      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",
              "group-data-[panel-open]:rotate-180"
            ),
            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