@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/colorpicker.cjs

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const popover = require("@base-ui/react/popover");
+const field = require("@base-ui/react/field");
+const index = require("./components/Input/index.cjs");
+const ColorPicker_module = require("./components/ColorPicker/ColorPicker.module.scss.cjs");
+;/* empty css                      */
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+let _HexColorPicker = null;
+let _colorfulLoaded = false;
+function loadColorfulDeps() {
+  if (_colorfulLoaded) return;
+  _colorfulLoaded = true;
+  try {
+    const rc = require("react-colorful");
+    _HexColorPicker = rc.HexColorPicker;
+  } catch {
+  }
+}
+const ColorPickerRoot = React__namespace.forwardRef(
+  function ColorPicker2({
+    label,
+    value,
+    defaultValue = "#000000",
+    onChange,
+    description,
+    disabled = false,
+    size = "md",
+    showInput = true,
+    className,
+    ...htmlProps
+  }, ref) {
+    loadColorfulDeps();
+    const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
+    const [inputValue, setInputValue] = React__namespace.useState(value ?? defaultValue);
+    const displayValue = value !== void 0 ? value : internalValue;
+    React__namespace.useEffect(() => {
+      if (value !== void 0) {
+        setInputValue(value);
+      }
+    }, [value]);
+    const handleChange = (color) => {
+      setInternalValue(color);
+      setInputValue(color);
+      onChange == null ? void 0 : onChange(color);
+    };
+    const handleInputChange = (newValue) => {
+      setInputValue(newValue);
+      if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {
+        setInternalValue(newValue);
+        onChange == null ? void 0 : onChange(newValue);
+      }
+    };
+    const handleInputBlur = () => {
+      if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {
+        setInputValue(displayValue);
+      }
+    };
+    const wrapperClasses = [
+      ColorPicker_module.default.wrapper,
+      ColorPicker_module.default[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      field.Field.Root,
+      {
+        ref,
+        ...htmlProps,
+        disabled,
+        className: wrapperClasses,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { className: ColorPicker_module.default.label, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ColorPicker_module.default.inputWrapper, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(popover.Popover.Root, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                popover.Popover.Trigger,
+                {
+                  className: ColorPicker_module.default.swatch,
+                  style: { backgroundColor: displayValue },
+                  disabled,
+                  "aria-label": label ? `Edit ${label} color` : "Edit color"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: ColorPicker_module.default.positioner, children: /* @__PURE__ */ jsxRuntime.jsx(
+                popover.Popover.Popup,
+                {
+                  className: ColorPicker_module.default.popup,
+                  "aria-label": label ? `${label} color picker` : "Color picker",
+                  children: _HexColorPicker && /* @__PURE__ */ jsxRuntime.jsx(_HexColorPicker, { color: displayValue, onChange: handleChange })
+                }
+              ) }) })
+            ] }),
+            showInput && /* @__PURE__ */ jsxRuntime.jsx(
+              index.Input,
+              {
+                value: inputValue,
+                onChange: handleInputChange,
+                onBlur: handleInputBlur,
+                disabled,
+                size,
+                className: ColorPicker_module.default.hexInput,
+                inputClassName: ColorPicker_module.default.hexInputField,
+                "aria-label": label ? `${label} hex value` : "Hex value"
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Description, { className: ColorPicker_module.default.description, children: description })
+        ]
+      }
+    );
+  }
+);
+const ColorPicker = Object.assign(ColorPickerRoot, {
+  Root: ColorPickerRoot
+});
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=colorpicker.cjs.map

package/dist/colorpicker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker.cjs","sources":["../src/components/ColorPicker/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\n\n// ============================================\n// Lazy-loaded dependency (react-colorful)\n// ============================================\n\nlet _HexColorPicker: any = null;\nlet _colorfulLoaded = false;\nlet _colorfulFailed = false;\n\nfunction loadColorfulDeps() {\n  if (_colorfulLoaded) return;\n  _colorfulLoaded = true;\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const rc = require('react-colorful');\n    _HexColorPicker = rc.HexColorPicker;\n  } catch {\n    _colorfulFailed = true;\n  }\n}\nimport { Field } from '@base-ui/react/field';\nimport { Input } from '../Input';\nimport styles from './ColorPicker.module.scss';\nimport '../../styles/globals.scss';\n\nexport interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Label text above the picker */\n  label?: string;\n  /** Controlled color value in hex format (#RRGGBB) */\n  value?: string;\n  /** Default color for uncontrolled usage */\n  defaultValue?: string;\n  /** Called with new color value when changed */\n  onChange?: (color: string) => void;\n  /** Helper text below the picker */\n  description?: string;\n  /** Disable the color picker */\n  disabled?: boolean;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show the hex input field */\n  showInput?: boolean;\n}\n\nconst ColorPickerRoot = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      label,\n      value,\n      defaultValue = '#000000',\n      onChange,\n      description,\n      disabled = false,\n      size = 'md',\n      showInput = true,\n      className,\n      ...htmlProps\n    },\n    ref\n  ) {\n    loadColorfulDeps();\n    const [internalValue, setInternalValue] = React.useState(defaultValue);\n    const [inputValue, setInputValue] = React.useState(value ?? defaultValue);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    // Sync input value when controlled value changes\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInputValue(value);\n      }\n    }, [value]);\n\n    const handleChange = (color: string) => {\n      setInternalValue(color);\n      setInputValue(color);\n      onChange?.(color);\n    };\n\n    const handleInputChange = (newValue: string) => {\n      setInputValue(newValue);\n\n      // Only update if it's a valid hex color\n      if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    const handleInputBlur = () => {\n      // Reset to valid value on blur if invalid\n      if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {\n        setInputValue(displayValue);\n      }\n    };\n\n    const wrapperClasses = [\n      styles.wrapper,\n      styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],\n      className,\n    ].filter(Boolean).join(' ');\n\n    return (\n      <Field.Root\n        ref={ref}\n        {...htmlProps}\n        disabled={disabled}\n        className={wrapperClasses}\n      >\n        {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n        <div className={styles.inputWrapper}>\n          <BasePopover.Root>\n            <BasePopover.Trigger\n              className={styles.swatch}\n              style={{ backgroundColor: displayValue }}\n              disabled={disabled}\n              aria-label={label ? `Edit ${label} color` : 'Edit color'}\n            />\n            <BasePopover.Portal>\n              <BasePopover.Positioner side=\"bottom\" align=\"start\" sideOffset={4} className={styles.positioner}>\n                <BasePopover.Popup\n                  className={styles.popup}\n                  aria-label={label ? `${label} color picker` : 'Color picker'}\n                >\n                  {_HexColorPicker && (\n                    <_HexColorPicker color={displayValue} onChange={handleChange} />\n                  )}\n                </BasePopover.Popup>\n              </BasePopover.Positioner>\n            </BasePopover.Portal>\n          </BasePopover.Root>\n          {showInput && (\n            <Input\n              value={inputValue}\n              onChange={handleInputChange}\n              onBlur={handleInputBlur}\n              disabled={disabled}\n              size={size}\n              className={styles.hexInput}\n              inputClassName={styles.hexInputField}\n              aria-label={label ? `${label} hex value` : 'Hex value'}\n            />\n          )}\n        </div>\n        {description && (\n          <Field.Description className={styles.description}>\n            {description}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const ColorPicker = Object.assign(ColorPickerRoot, {\n  Root: ColorPickerRoot,\n});\n"],"names":["React","ColorPicker","styles","jsxs","Field","BasePopover","jsx","Input"],"mappings":"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"}

package/dist/colorpicker.js

@@ -0,0 +1,118 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Popover } from "@base-ui/react/popover";
+import { Field } from "@base-ui/react/field";
+import { Input } from "./components/Input/index.js";
+import styles from "./components/ColorPicker/ColorPicker.module.scss.js";
+/* empty css                    */
+let _HexColorPicker = null;
+let _colorfulLoaded = false;
+function loadColorfulDeps() {
+  if (_colorfulLoaded) return;
+  _colorfulLoaded = true;
+  try {
+    const rc = require("react-colorful");
+    _HexColorPicker = rc.HexColorPicker;
+  } catch {
+  }
+}
+const ColorPickerRoot = React.forwardRef(
+  function ColorPicker2({
+    label,
+    value,
+    defaultValue = "#000000",
+    onChange,
+    description,
+    disabled = false,
+    size = "md",
+    showInput = true,
+    className,
+    ...htmlProps
+  }, ref) {
+    loadColorfulDeps();
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [inputValue, setInputValue] = React.useState(value ?? defaultValue);
+    const displayValue = value !== void 0 ? value : internalValue;
+    React.useEffect(() => {
+      if (value !== void 0) {
+        setInputValue(value);
+      }
+    }, [value]);
+    const handleChange = (color) => {
+      setInternalValue(color);
+      setInputValue(color);
+      onChange == null ? void 0 : onChange(color);
+    };
+    const handleInputChange = (newValue) => {
+      setInputValue(newValue);
+      if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {
+        setInternalValue(newValue);
+        onChange == null ? void 0 : onChange(newValue);
+      }
+    };
+    const handleInputBlur = () => {
+      if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {
+        setInputValue(displayValue);
+      }
+    };
+    const wrapperClasses = [
+      styles.wrapper,
+      styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs(
+      Field.Root,
+      {
+        ref,
+        ...htmlProps,
+        disabled,
+        className: wrapperClasses,
+        children: [
+          label && /* @__PURE__ */ jsx(Field.Label, { className: styles.label, children: label }),
+          /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
+            /* @__PURE__ */ jsxs(Popover.Root, { children: [
+              /* @__PURE__ */ jsx(
+                Popover.Trigger,
+                {
+                  className: styles.swatch,
+                  style: { backgroundColor: displayValue },
+                  disabled,
+                  "aria-label": label ? `Edit ${label} color` : "Edit color"
+                }
+              ),
+              /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { side: "bottom", align: "start", sideOffset: 4, className: styles.positioner, children: /* @__PURE__ */ jsx(
+                Popover.Popup,
+                {
+                  className: styles.popup,
+                  "aria-label": label ? `${label} color picker` : "Color picker",
+                  children: _HexColorPicker && /* @__PURE__ */ jsx(_HexColorPicker, { color: displayValue, onChange: handleChange })
+                }
+              ) }) })
+            ] }),
+            showInput && /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: inputValue,
+                onChange: handleInputChange,
+                onBlur: handleInputBlur,
+                disabled,
+                size,
+                className: styles.hexInput,
+                inputClassName: styles.hexInputField,
+                "aria-label": label ? `${label} hex value` : "Hex value"
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(Field.Description, { className: styles.description, children: description })
+        ]
+      }
+    );
+  }
+);
+const ColorPicker = Object.assign(ColorPickerRoot, {
+  Root: ColorPickerRoot
+});
+export {
+  ColorPicker
+};
+//# sourceMappingURL=colorpicker.js.map

package/dist/colorpicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker.js","sources":["../src/components/ColorPicker/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\n\n// ============================================\n// Lazy-loaded dependency (react-colorful)\n// ============================================\n\nlet _HexColorPicker: any = null;\nlet _colorfulLoaded = false;\nlet _colorfulFailed = false;\n\nfunction loadColorfulDeps() {\n  if (_colorfulLoaded) return;\n  _colorfulLoaded = true;\n  try {\n    // eslint-disable-next-line @typescript-eslint/no-require-imports\n    const rc = require('react-colorful');\n    _HexColorPicker = rc.HexColorPicker;\n  } catch {\n    _colorfulFailed = true;\n  }\n}\nimport { Field } from '@base-ui/react/field';\nimport { Input } from '../Input';\nimport styles from './ColorPicker.module.scss';\nimport '../../styles/globals.scss';\n\nexport interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  /** Label text above the picker */\n  label?: string;\n  /** Controlled color value in hex format (#RRGGBB) */\n  value?: string;\n  /** Default color for uncontrolled usage */\n  defaultValue?: string;\n  /** Called with new color value when changed */\n  onChange?: (color: string) => void;\n  /** Helper text below the picker */\n  description?: string;\n  /** Disable the color picker */\n  disabled?: boolean;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n  /** Show the hex input field */\n  showInput?: boolean;\n}\n\nconst ColorPickerRoot = React.forwardRef<HTMLDivElement, ColorPickerProps>(\n  function ColorPicker(\n    {\n      label,\n      value,\n      defaultValue = '#000000',\n      onChange,\n      description,\n      disabled = false,\n      size = 'md',\n      showInput = true,\n      className,\n      ...htmlProps\n    },\n    ref\n  ) {\n    loadColorfulDeps();\n    const [internalValue, setInternalValue] = React.useState(defaultValue);\n    const [inputValue, setInputValue] = React.useState(value ?? defaultValue);\n    const displayValue = value !== undefined ? value : internalValue;\n\n    // Sync input value when controlled value changes\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setInputValue(value);\n      }\n    }, [value]);\n\n    const handleChange = (color: string) => {\n      setInternalValue(color);\n      setInputValue(color);\n      onChange?.(color);\n    };\n\n    const handleInputChange = (newValue: string) => {\n      setInputValue(newValue);\n\n      // Only update if it's a valid hex color\n      if (/^#[0-9A-Fa-f]{6}$/.test(newValue)) {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    const handleInputBlur = () => {\n      // Reset to valid value on blur if invalid\n      if (!/^#[0-9A-Fa-f]{6}$/.test(inputValue)) {\n        setInputValue(displayValue);\n      }\n    };\n\n    const wrapperClasses = [\n      styles.wrapper,\n      styles[`size${size.charAt(0).toUpperCase() + size.slice(1)}`],\n      className,\n    ].filter(Boolean).join(' ');\n\n    return (\n      <Field.Root\n        ref={ref}\n        {...htmlProps}\n        disabled={disabled}\n        className={wrapperClasses}\n      >\n        {label && <Field.Label className={styles.label}>{label}</Field.Label>}\n        <div className={styles.inputWrapper}>\n          <BasePopover.Root>\n            <BasePopover.Trigger\n              className={styles.swatch}\n              style={{ backgroundColor: displayValue }}\n              disabled={disabled}\n              aria-label={label ? `Edit ${label} color` : 'Edit color'}\n            />\n            <BasePopover.Portal>\n              <BasePopover.Positioner side=\"bottom\" align=\"start\" sideOffset={4} className={styles.positioner}>\n                <BasePopover.Popup\n                  className={styles.popup}\n                  aria-label={label ? `${label} color picker` : 'Color picker'}\n                >\n                  {_HexColorPicker && (\n                    <_HexColorPicker color={displayValue} onChange={handleChange} />\n                  )}\n                </BasePopover.Popup>\n              </BasePopover.Positioner>\n            </BasePopover.Portal>\n          </BasePopover.Root>\n          {showInput && (\n            <Input\n              value={inputValue}\n              onChange={handleInputChange}\n              onBlur={handleInputBlur}\n              disabled={disabled}\n              size={size}\n              className={styles.hexInput}\n              inputClassName={styles.hexInputField}\n              aria-label={label ? `${label} hex value` : 'Hex value'}\n            />\n          )}\n        </div>\n        {description && (\n          <Field.Description className={styles.description}>\n            {description}\n          </Field.Description>\n        )}\n      </Field.Root>\n    );\n  }\n);\n\nexport const ColorPicker = Object.assign(ColorPickerRoot, {\n  Root: ColorPickerRoot,\n});\n"],"names":["ColorPicker","BasePopover"],"mappings":"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"}

package/dist/components/Accordion/Accordion.module.scss.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const accordion = "_accordion_1p05d_1";
+const item = "_item_1p05d_12";
+const heading = "_heading_1p05d_17";
+const trigger = "_trigger_1p05d_23";
+const triggerContent = "_triggerContent_1p05d_67";
+const chevron = "_chevron_1p05d_71";
+const content = "_content_1p05d_80";
+const contentInner = "_contentInner_1p05d_93";
+const styles = {
+  accordion,
+  item,
+  heading,
+  trigger,
+  triggerContent,
+  chevron,
+  content,
+  contentInner
+};
+exports.accordion = accordion;
+exports.chevron = chevron;
+exports.content = content;
+exports.contentInner = contentInner;
+exports.default = styles;
+exports.heading = heading;
+exports.item = item;
+exports.trigger = trigger;
+exports.triggerContent = triggerContent;
+//# sourceMappingURL=Accordion.module.scss.cjs.map

package/dist/components/Accordion/Accordion.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Accordion/Accordion.module.scss.js

@@ -0,0 +1,30 @@
+const accordion = "_accordion_1p05d_1";
+const item = "_item_1p05d_12";
+const heading = "_heading_1p05d_17";
+const trigger = "_trigger_1p05d_23";
+const triggerContent = "_triggerContent_1p05d_67";
+const chevron = "_chevron_1p05d_71";
+const content = "_content_1p05d_80";
+const contentInner = "_contentInner_1p05d_93";
+const styles = {
+  accordion,
+  item,
+  heading,
+  trigger,
+  triggerContent,
+  chevron,
+  content,
+  contentInner
+};
+export {
+  accordion,
+  chevron,
+  content,
+  contentInner,
+  styles as default,
+  heading,
+  item,
+  trigger,
+  triggerContent
+};
+//# sourceMappingURL=Accordion.module.scss.js.map

package/dist/components/Accordion/Accordion.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/Accordion/index.cjs

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const collapsible = require("@base-ui/react/collapsible");
+const Accordion_module = require("./Accordion.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AccordionContext = React__namespace.createContext(null);
+const AccordionItemContext = React__namespace.createContext(null);
+function useAccordionContext() {
+  const context = React__namespace.useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
+function useAccordionItemContext() {
+  const context = React__namespace.useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error("Accordion.Trigger/Content must be used within an Accordion.Item");
+  }
+  return context;
+}
+function AccordionRoot({
+  children,
+  type = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  collapsible: collapsible2 = false,
+  headingLevel = 3,
+  className,
+  ...htmlProps
+}) {
+  const normalizeValue = (val) => {
+    if (val === void 0) return [];
+    return Array.isArray(val) ? val : [val];
+  };
+  const [openItems, setOpenItems] = React__namespace.useState(
+    () => normalizeValue(defaultValue)
+  );
+  const controlledOpenItems = value !== void 0 ? normalizeValue(value) : void 0;
+  const currentOpenItems = controlledOpenItems ?? openItems;
+  const toggle = React__namespace.useCallback((itemValue) => {
+    const newItems = (() => {
+      if (type === "single") {
+        if (currentOpenItems.includes(itemValue)) {
+          return collapsible2 ? [] : currentOpenItems;
+        }
+        return [itemValue];
+      } else {
+        if (currentOpenItems.includes(itemValue)) {
+          return currentOpenItems.filter((v) => v !== itemValue);
+        }
+        return [...currentOpenItems, itemValue];
+      }
+    })();
+    if (controlledOpenItems === void 0) {
+      setOpenItems(newItems);
+    }
+    if (onValueChange) {
+      onValueChange(type === "single" ? newItems[0] ?? "" : newItems);
+    }
+  }, [type, currentOpenItems, collapsible2, controlledOpenItems, onValueChange]);
+  const classes = [Accordion_module.default.accordion, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: { type, openItems: currentOpenItems, toggle, collapsible: collapsible2, headingLevel }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, "data-orientation": "vertical", role: "region", children }) });
+}
+function AccordionItem({
+  children,
+  value,
+  disabled = false,
+  className,
+  ...htmlProps
+}) {
+  const { openItems } = useAccordionContext();
+  const isOpen = openItems.includes(value);
+  const baseId = React__namespace.useId();
+  const triggerId = `accordion-trigger-${baseId}`;
+  const contentId = `accordion-content-${baseId}`;
+  const classes = [
+    Accordion_module.default.item,
+    isOpen && Accordion_module.default.itemOpen,
+    disabled && Accordion_module.default.itemDisabled,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: { value, isOpen, disabled, triggerId, contentId }, children: /* @__PURE__ */ jsxRuntime.jsx(collapsible.Collapsible.Root, { open: isOpen, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, "data-state": isOpen ? "open" : "closed", "data-disabled": disabled || void 0, children }) }) });
+}
+function AccordionTrigger({
+  children,
+  className
+}) {
+  const { toggle, headingLevel } = useAccordionContext();
+  const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();
+  const handleClick = () => {
+    if (!disabled) {
+      toggle(value);
+    }
+  };
+  const classes = [Accordion_module.default.trigger, className].filter(Boolean).join(" ");
+  const HeadingTag = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(HeadingTag, { className: Accordion_module.default.heading, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    collapsible.Collapsible.Trigger,
+    {
+      id: triggerId,
+      className: classes,
+      onClick: handleClick,
+      "aria-expanded": isOpen,
+      "aria-controls": contentId,
+      "data-state": isOpen ? "open" : "closed",
+      disabled,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Accordion_module.default.triggerContent, children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: Accordion_module.default.chevron,
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                d: "M4 6L8 10L12 6",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  children,
+  className
+}) {
+  const { isOpen, triggerId, contentId } = useAccordionItemContext();
+  const classes = [Accordion_module.default.content, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    collapsible.Collapsible.Panel,
+    {
+      id: contentId,
+      className: classes,
+      "data-state": isOpen ? "open" : "closed",
+      role: "region",
+      "aria-labelledby": triggerId,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Accordion_module.default.contentInner, children })
+    }
+  );
+}
+const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionRoot = AccordionRoot;
+exports.AccordionTrigger = AccordionTrigger;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Accordion/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Accordion/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';\nimport styles from './Accordion.module.scss';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AccordionValue = string | string[];\n\nexport interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {\n  children: React.ReactNode;\n  /** Allow multiple items to be open at once */\n  type?: 'single' | 'multiple';\n  /** Controlled value - string for single, string[] for multiple */\n  value?: AccordionValue;\n  /** Default value for uncontrolled usage */\n  defaultValue?: AccordionValue;\n  /** Callback when value changes */\n  onValueChange?: (value: AccordionValue) => void;\n  /** Whether items can be fully collapsed (only for type=\"single\") */\n  collapsible?: boolean;\n  /**\n   * Heading level for accordion triggers (for semantic HTML).\n   * The trigger will be wrapped in an <h{level}> element.\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Unique value for this item */\n  value: string;\n  /** Disable this item */\n  disabled?: boolean;\n}\n\nexport interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  children: React.ReactNode;\n}\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AccordionContextValue {\n  type: 'single' | 'multiple';\n  openItems: string[];\n  toggle: (value: string) => void;\n  collapsible: boolean;\n  headingLevel: 2 | 3 | 4 | 5 | 6;\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | null>(null);\n\ninterface AccordionItemContextValue {\n  value: string;\n  isOpen: boolean;\n  disabled: boolean;\n  triggerId: string;\n  contentId: string;\n}\n\nconst AccordionItemContext = React.createContext<AccordionItemContextValue | null>(null);\n\nfunction useAccordionContext() {\n  const context = React.useContext(AccordionContext);\n  if (!context) {\n    throw new Error('Accordion components must be used within an Accordion');\n  }\n  return context;\n}\n\nfunction useAccordionItemContext() {\n  const context = React.useContext(AccordionItemContext);\n  if (!context) {\n    throw new Error('Accordion.Trigger/Content must be used within an Accordion.Item');\n  }\n  return context;\n}\n\n// ============================================\n// Components\n// ============================================\n\nfunction AccordionRoot({\n  children,\n  type = 'single',\n  value,\n  defaultValue,\n  onValueChange,\n  collapsible = false,\n  headingLevel = 3,\n  className,\n  ...htmlProps\n}: AccordionProps) {\n  // Normalize value to array for internal handling\n  const normalizeValue = (val: AccordionValue | undefined): string[] => {\n    if (val === undefined) return [];\n    return Array.isArray(val) ? val : [val];\n  };\n\n  const [openItems, setOpenItems] = React.useState<string[]>(() =>\n    normalizeValue(defaultValue)\n  );\n\n  // Use controlled value if provided\n  const controlledOpenItems = value !== undefined ? normalizeValue(value) : undefined;\n  const currentOpenItems = controlledOpenItems ?? openItems;\n\n  const toggle = React.useCallback((itemValue: string) => {\n    const newItems = (() => {\n      if (type === 'single') {\n        // For single, toggle or set new item\n        if (currentOpenItems.includes(itemValue)) {\n          return collapsible ? [] : currentOpenItems;\n        }\n        return [itemValue];\n      } else {\n        // For multiple, toggle item in array\n        if (currentOpenItems.includes(itemValue)) {\n          return currentOpenItems.filter(v => v !== itemValue);\n        }\n        return [...currentOpenItems, itemValue];\n      }\n    })();\n\n    if (controlledOpenItems === undefined) {\n      setOpenItems(newItems);\n    }\n\n    if (onValueChange) {\n      onValueChange(type === 'single' ? (newItems[0] ?? '') : newItems);\n    }\n  }, [type, currentOpenItems, collapsible, controlledOpenItems, onValueChange]);\n\n  const classes = [styles.accordion, className].filter(Boolean).join(' ');\n\n  return (\n    <AccordionContext.Provider value={{ type, openItems: currentOpenItems, toggle, collapsible, headingLevel }}>\n      <div {...htmlProps} className={classes} data-orientation=\"vertical\" role=\"region\">\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nfunction AccordionItem({\n  children,\n  value,\n  disabled = false,\n  className,\n  ...htmlProps\n}: AccordionItemProps) {\n  const { openItems } = useAccordionContext();\n  const isOpen = openItems.includes(value);\n  const baseId = React.useId();\n  const triggerId = `accordion-trigger-${baseId}`;\n  const contentId = `accordion-content-${baseId}`;\n\n  const classes = [\n    styles.item,\n    isOpen && styles.itemOpen,\n    disabled && styles.itemDisabled,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <AccordionItemContext.Provider value={{ value, isOpen, disabled, triggerId, contentId }}>\n      <BaseCollapsible.Root open={isOpen} disabled={disabled}>\n        <div {...htmlProps} className={classes} data-state={isOpen ? 'open' : 'closed'} data-disabled={disabled || undefined}>\n          {children}\n        </div>\n      </BaseCollapsible.Root>\n    </AccordionItemContext.Provider>\n  );\n}\n\nfunction AccordionTrigger({\n  children,\n  className,\n}: AccordionTriggerProps) {\n  const { toggle, headingLevel } = useAccordionContext();\n  const { value, isOpen, disabled, triggerId, contentId } = useAccordionItemContext();\n\n  const handleClick = () => {\n    if (!disabled) {\n      toggle(value);\n    }\n  };\n\n  const classes = [styles.trigger, className].filter(Boolean).join(' ');\n\n  // Create the heading element dynamically based on headingLevel\n  const HeadingTag = `h${headingLevel}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  return (\n    <HeadingTag className={styles.heading}>\n      <BaseCollapsible.Trigger\n        id={triggerId}\n        className={classes}\n        onClick={handleClick}\n        aria-expanded={isOpen}\n        aria-controls={contentId}\n        data-state={isOpen ? 'open' : 'closed'}\n        disabled={disabled}\n      >\n        <span className={styles.triggerContent}>{children}</span>\n        <svg\n          className={styles.chevron}\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M4 6L8 10L12 6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.5\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </BaseCollapsible.Trigger>\n    </HeadingTag>\n  );\n}\n\nfunction AccordionContent({\n  children,\n  className,\n}: AccordionContentProps) {\n  const { isOpen, triggerId, contentId } = useAccordionItemContext();\n\n  const classes = [styles.content, className].filter(Boolean).join(' ');\n\n  return (\n    <BaseCollapsible.Panel\n      id={contentId}\n      className={classes}\n      data-state={isOpen ? 'open' : 'closed'}\n      role=\"region\"\n      aria-labelledby={triggerId}\n    >\n      <div className={styles.contentInner}>\n        {children}\n      </div>\n    </BaseCollapsible.Panel>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n});\n\nexport { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent };\n"],"names":["React","collapsible","styles","jsx","BaseCollapsible","jsxs"],"mappings":"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"}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+export type AccordionValue = string | string[];
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
+    children: React.ReactNode;
+    /** Allow multiple items to be open at once */
+    type?: 'single' | 'multiple';
+    /** Controlled value - string for single, string[] for multiple */
+    value?: AccordionValue;
+    /** Default value for uncontrolled usage */
+    defaultValue?: AccordionValue;
+    /** Callback when value changes */
+    onValueChange?: (value: AccordionValue) => void;
+    /** Whether items can be fully collapsed (only for type="single") */
+    collapsible?: boolean;
+    /**
+     * Heading level for accordion triggers (for semantic HTML).
+     * The trigger will be wrapped in an <h{level}> element.
+     * @default 3
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+}
+export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Unique value for this item */
+    value: string;
+    /** Disable this item */
+    disabled?: boolean;
+}
+export interface AccordionTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+declare function AccordionRoot({ children, type, value, defaultValue, onValueChange, collapsible, headingLevel, className, ...htmlProps }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ children, value, disabled, className, ...htmlProps }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ children, className, }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ children, className, }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export { AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAE/C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChG,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,kEAAkE;IAClE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,oEAAoE;IACpE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AA8CD,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,IAAe,EACf,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAAmB,EACnB,YAAgB,EAChB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,cAAc,2CAkDhB;AAED,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,EACT,GAAG,SAAS,EACb,EAAE,kBAAkB,2CAuBpB;AAED,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CA8CvB;AAED,iBAAS,gBAAgB,CAAC,EACxB,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CAkBvB;AAMD,eAAO,MAAM,SAAS;;;;CAIpB,CAAC;AAEH,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}