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

Spark (Leboncoin design system) components.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __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 import_accordion = require("@base-ui-components/react/accordion");
var import_class_variance_authority = require("class-variance-authority");
var import_react2 = 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/useRenderSlot.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function useRenderSlot(asChild, defaultTag) {
  const Component = asChild ? Slot : defaultTag;
  return asChild ? ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }) : void 0;
}

// src/accordion/Accordion.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var AccordionContext = (0, import_react2.createContext)(null);
var Accordion = ({
  asChild = false,
  children,
  design = "outlined",
  hiddenUntilFound = true,
  multiple = false,
  className,
  ref,
  ...props
}) => {
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccordionContext.Provider, { value: { design }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    import_accordion.Accordion.Root,
    {
      "data-spark-component": "accordion",
      ref,
      openMultiple: multiple,
      hiddenUntilFound,
      className: (0, import_class_variance_authority.cx)("bg-surface h-fit rounded-lg", className),
      render: renderSlot,
      ...props,
      children
    }
  ) });
};
Accordion.displayName = "Accordion";
var useAccordionContext = () => {
  const context = (0, import_react2.useContext)(AccordionContext);
  if (!context) {
    throw Error("useAccordionContext must be used within a Accordion provider");
  }
  return context;
};

// src/accordion/AccordionItem.tsx
var import_accordion2 = require("@base-ui-components/react/accordion");
var import_class_variance_authority2 = require("class-variance-authority");
var import_jsx_runtime4 = require("react/jsx-runtime");
var Item = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const accordion = useAccordionContext();
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    import_accordion2.Accordion.Item,
    {
      ref,
      "data-spark-component": "accordion-item",
      render: renderSlot,
      className: (0, import_class_variance_authority2.cx)(
        "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
var import_accordion3 = require("@base-ui-components/react/accordion");
var import_class_variance_authority3 = require("class-variance-authority");
var import_jsx_runtime5 = require("react/jsx-runtime");
var ItemContent = ({
  asChild = false,
  className,
  children,
  ref,
  ...props
}) => {
  const renderSlot = useRenderSlot(asChild, "div");
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    import_accordion3.Accordion.Panel,
    {
      ref,
      "data-spark-component": "accordion-item-content",
      className: (0, import_class_variance_authority3.cx)(
        "[&>: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
var import_class_variance_authority4 = require("class-variance-authority");
var import_jsx_runtime6 = require("react/jsx-runtime");
var ItemHeader = ({
  asChild = false,
  children,
  className,
  ref
}) => {
  const Component = asChild ? Slot : "h3";
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
    Component,
    {
      ref,
      "data-spark-component": "accordion-item-header",
      className: (0, import_class_variance_authority4.cx)("rounded-[inherit]", className),
      children
    }
  );
};
ItemHeader.displayName = "Accordion.ItemHeader";

// src/accordion/AccordionItemTrigger.tsx
var import_accordion4 = require("@base-ui-components/react/accordion");
var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
var import_class_variance_authority6 = require("class-variance-authority");

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

// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
  const Component = asChild ? Slot : "span";
  return /* @__PURE__ */ (0, import_jsx_runtime7.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_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority5 = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority5.cva)(["fill-current shrink-0"], {
  variants: {
    /**
     * Color scheme of the icon.
     */
    intent: (0, import_internal_utils.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_utils.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_runtime8 = require("react/jsx-runtime");
var Icon = ({
  label,
  className,
  size = "current",
  intent = "current",
  children,
  ...others
}) => {
  const child = import_react3.Children.only(children);
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
    (0, import_react3.cloneElement)(child, {
      className: iconStyles({ className, size, intent }),
      "data-spark-component": "icon",
      "aria-hidden": "true",
      focusable: "false",
      ...others
    }),
    label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
  ] });
};
Icon.displayName = "Icon";

// src/accordion/AccordionItemTrigger.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var ItemTrigger = ({
  asChild = false,
  children,
  className,
  ref,
  ...props
}) => {
  const renderSlot = useRenderSlot(asChild, "button");
  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
    import_accordion4.Accordion.Trigger,
    {
      ref,
      "data-spark-component": "accordion-item-trigger",
      render: renderSlot,
      className: (0, import_class_variance_authority6.cx)(
        "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__ */ (0, import_jsx_runtime9.jsx)("div", { className: "gap-lg flex grow items-center", children }),
        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
          Icon,
          {
            intent: "neutral",
            className: (0, import_class_variance_authority6.cx)(
              "shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none",
              "group-data-[panel-open]:rotate-180"
            ),
            size: "sm",
            children: /* @__PURE__ */ (0, import_jsx_runtime9.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