@kopexa/sight
Version:
Kopexa Sight Design System — React component library for GRC applications
181 lines (179 loc) • 6.24 kB
JavaScript
"use client";
"use strict";
"use client";
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/components/accordion/accordion.tsx
var accordion_exports = {};
__export(accordion_exports, {
AccordionContent: () => AccordionContent,
AccordionItem: () => AccordionItem,
AccordionRoot: () => AccordionRoot,
AccordionTrigger: () => AccordionTrigger
});
module.exports = __toCommonJS(accordion_exports);
var import_icons = require("@kopexa/icons");
var import_react_utils = require("@kopexa/react-utils");
var import_shared_utils = require("@kopexa/shared-utils");
var import_theme = require("@kopexa/theme");
var import_react = require("react");
var import_react_aria_components = require("react-aria-components");
var import_jsx_runtime = require("react/jsx-runtime");
var [Provider, useProvider] = (0, import_react_utils.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 = (0, import_theme.accordion)({ color, radius, spacing, border, triggerSpacing });
const isMultiple = type === "multiple";
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.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__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.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 = (0, import_react.useContext)(import_react_aria_components.DisclosureStateContext);
const dataState = (state == null ? void 0 : state.isExpanded) ? "open" : "closed";
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_aria_components.Heading, { className: "flex items-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_react_aria_components.Button,
{
slot: "trigger",
id,
isDisabled: disabled,
"data-slot": "accordion-trigger",
"data-state": dataState,
className: styles.trigger({
className: action ? (0, import_shared_utils.cn)(className, "pr-0") : className
}),
children: [
children,
!action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronDownIcon, { className: styles.triggerIcon() })
]
}
),
action && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "accordion-action",
className: "flex shrink-0 items-center gap-1.5 px-2",
children: action
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.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__ */ (0, import_jsx_runtime.jsx)(import_icons.ChevronDownIcon, { className: styles.triggerIcon() })
}
)
] })
] });
}
function AccordionContent({
className,
children
}) {
const { styles } = useProvider();
const state = (0, import_react.useContext)(import_react_aria_components.DisclosureStateContext);
const expanded = state == null ? void 0 : state.isExpanded;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components.DisclosurePanel,
{
"data-slot": "accordion-content",
"data-state": expanded ? "open" : "closed",
className: styles.contentContainer({
state: expanded ? "open" : "closed"
}),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ className }), children }) })
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
AccordionContent,
AccordionItem,
AccordionRoot,
AccordionTrigger
});