@kopexa/sight/dist/chunk-AB7DNOH4.mjs

Kopexa Sight Design System — React component library for GRC applications

"use client";

// src/components/accordion/accordion.tsx
import { ChevronDownIcon } from "@kopexa/icons";
import { createContext } from "@kopexa/react-utils";
import { cn } from "@kopexa/shared-utils";
import { accordion } from "@kopexa/theme";
import { useContext } from "react";
import {
  Button,
  Disclosure,
  DisclosureGroup,
  DisclosurePanel,
  DisclosureStateContext,
  Heading
} from "react-aria-components";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var [Provider, useProvider] = createContext();
function toKeySet(value) {
  if (value === void 0) return void 0;
  if (Array.isArray(value)) return new Set(value);
  return new Set(value ? [value] : []);
}
function AccordionRoot({
  type = "single",
  value,
  defaultValue,
  onValueChange,
  // `collapsible` is accepted for compatibility but not forwarded — react-aria's
  // single mode is already collapsible.
  collapsible: _collapsible,
  disabled,
  className,
  color,
  radius,
  spacing,
  border,
  triggerSpacing,
  children,
  id
}) {
  const styles = accordion({ color, radius, spacing, border, triggerSpacing });
  const isMultiple = type === "multiple";
  return /* @__PURE__ */ jsx(Provider, { value: { styles }, children: /* @__PURE__ */ jsx(
    DisclosureGroup,
    {
      id,
      "data-slot": "accordion",
      allowsMultipleExpanded: isMultiple,
      expandedKeys: value !== void 0 ? toKeySet(value) : void 0,
      defaultExpandedKeys: defaultValue !== void 0 ? toKeySet(defaultValue) : void 0,
      onExpandedChange: onValueChange ? (keys) => {
        var _a;
        const list = [...keys];
        onValueChange(
          isMultiple ? list : (_a = list[0]) != null ? _a : ""
        );
      } : void 0,
      isDisabled: disabled,
      className: styles.root({ className }),
      children
    }
  ) });
}
function AccordionItem({
  value,
  disabled,
  className,
  children
}) {
  const { styles } = useProvider();
  return /* @__PURE__ */ jsx(
    Disclosure,
    {
      id: value,
      isDisabled: disabled,
      "data-slot": "accordion-item",
      className: styles.item({ className }),
      children
    }
  );
}
function AccordionTrigger({
  className,
  children,
  action,
  id,
  disabled
}) {
  const { styles } = useProvider();
  const state = useContext(DisclosureStateContext);
  const dataState = (state == null ? void 0 : state.isExpanded) ? "open" : "closed";
  return /* @__PURE__ */ jsxs(Heading, { className: "flex items-center", children: [
    /* @__PURE__ */ jsxs(
      Button,
      {
        slot: "trigger",
        id,
        isDisabled: disabled,
        "data-slot": "accordion-trigger",
        "data-state": dataState,
        className: styles.trigger({
          className: action ? cn(className, "pr-0") : className
        }),
        children: [
          children,
          !action && /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.triggerIcon() })
        ]
      }
    ),
    action && /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        "div",
        {
          "data-slot": "accordion-action",
          className: "flex shrink-0 items-center gap-1.5 px-2",
          children: action
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          "aria-label": "Toggle",
          excludeFromTabOrder: true,
          onPress: () => state == null ? void 0 : state.setExpanded(!state.isExpanded),
          "data-slot": "accordion-chevron",
          "data-state": dataState,
          className: styles.trigger({ className: "w-auto flex-none pl-0" }),
          children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: styles.triggerIcon() })
        }
      )
    ] })
  ] });
}
function AccordionContent({
  className,
  children
}) {
  const { styles } = useProvider();
  const state = useContext(DisclosureStateContext);
  const expanded = state == null ? void 0 : state.isExpanded;
  return /* @__PURE__ */ jsx(
    DisclosurePanel,
    {
      "data-slot": "accordion-content",
      "data-state": expanded ? "open" : "closed",
      className: styles.contentContainer({
        state: expanded ? "open" : "closed"
      }),
      children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: styles.content({ className }), children }) })
    }
  );
}

export {
  AccordionRoot,
  AccordionItem,
  AccordionTrigger,
  AccordionContent
};