@ifhover/leaf-ui 0.0.0-stage → 0.5.0

package/dist/esm/checkbox/group.d.ts

@@ -0,0 +1,25 @@
+import { type FieldsetHTMLAttributes, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface CheckboxOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'defaultValue'> {
+    options: readonly (CheckboxOption | string)[];
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onChange?: (values: string[]) => void;
+    legend?: ReactNode;
+    size?: ControlSize;
+    variant?: 'plain' | 'card' | 'list';
+    minCount?: number;
+    maxCount?: number;
+    required?: boolean;
+    direction?: 'horizontal' | 'vertical';
+}
+export declare function CheckboxGroup({ options, value, defaultValue, onChange, legend, size, variant, minCount, maxCount, direction, name, form, required, disabled: disabledProp, className, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+//# sourceMappingURL=group.d.ts.map

package/dist/esm/checkbox/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","sourceRoot":"","sources":["../../../src/checkbox/group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,sBAAsB,EAAE,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAInF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACtF,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9C,KAAK,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACvC;AACD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,OAAiB,EACjB,QAAY,EACZ,QAAmB,EACnB,SAAwB,EACxB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EAAE,YAAY,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA0EpB"}

package/dist/esm/checkbox/group.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
+import { FieldScope, useFormField } from "../form/form.js";
+import { classes } from "../shared/classes.js";
+import { FormValue, useFieldValue } from "../shared/field.js";
+import { Checkbox } from "./checkbox.js";
+function CheckboxGroup({ options, value, defaultValue = [], onChange, legend, size, variant = 'plain', minCount = 0, maxCount = 1 / 0, direction = 'horizontal', name, form, required, disabled: disabledProp, className, ...props }) {
+    const field = useFormField();
+    const id = useId();
+    const disabled = disabledProp || field?.disabled;
+    const trigger = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    const items = options.map((option)=>'string' == typeof option ? {
+            value: option,
+            label: option
+        } : option);
+    return /*#__PURE__*/ jsxs("fieldset", {
+        ...props,
+        disabled: disabled,
+        className: classes('leaf-checkbox-group', `leaf-checkbox-group--${direction}`, `leaf-checkbox-group--${variant}`, className),
+        "aria-describedby": [
+            props['aria-describedby'],
+            field?.descriptionId
+        ].filter(Boolean).join(' ') || void 0,
+        children: [
+            legend && /*#__PURE__*/ jsx("legend", {
+                children: legend
+            }),
+            /*#__PURE__*/ jsx(FieldScope, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "leaf-checkbox-group__options",
+                    children: items.map((item, index)=>{
+                        const checked = current.includes(item.value);
+                        const limited = checked ? current.length <= Math.max(0, minCount) : current.length >= Math.max(0, maxCount);
+                        return /*#__PURE__*/ jsx(Checkbox, {
+                            id: 0 === index ? field?.id ?? `${id}-${index}` : `${id}-${index}`,
+                            ref: 0 === index ? trigger : void 0,
+                            size: size,
+                            variant: 'card' === variant ? 'card' : 'plain',
+                            description: item.description,
+                            icon: item.icon,
+                            extra: item.extra,
+                            name: name,
+                            form: form,
+                            value: item.value,
+                            checked: checked,
+                            disabled: disabled || item.disabled,
+                            "aria-disabled": limited || void 0,
+                            onChange: (event)=>{
+                                if (limited) {
+                                    event.currentTarget.checked = checked;
+                                    return;
+                                }
+                                const next = event.target.checked ? [
+                                    ...current,
+                                    item.value
+                                ] : current.filter((key)=>key !== item.value);
+                                setCurrent(next);
+                                onChange?.(next);
+                            },
+                            children: item.label
+                        }, item.value);
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(FormValue, {
+                value: current.length >= Math.max(1, minCount) ? 'selected' : '',
+                required: required ?? field?.required,
+                form: form,
+                disabled: disabled,
+                triggerRef: trigger
+            })
+        ]
+    });
+}
+export { CheckboxGroup };
+
+//# sourceMappingURL=group.js.map

package/dist/esm/checkbox/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox/group.js","sources":["../../../src/checkbox/group.tsx"],"sourcesContent":["import { type FieldsetHTMLAttributes, type ReactNode, useId, useRef } from 'react';\nimport { FieldScope, useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport type { ControlSize } from '../shared/types';\nimport { Checkbox } from './checkbox';\nexport interface CheckboxOption {\n  value: string;\n  label: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  extra?: ReactNode;\n  disabled?: boolean;\n}\nexport interface CheckboxGroupProps\n  extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'defaultValue'> {\n  options: readonly (CheckboxOption | string)[];\n  value?: readonly string[];\n  defaultValue?: readonly string[];\n  onChange?: (values: string[]) => void;\n  legend?: ReactNode;\n  size?: ControlSize;\n  variant?: 'plain' | 'card' | 'list';\n  minCount?: number;\n  maxCount?: number;\n  required?: boolean;\n  direction?: 'horizontal' | 'vertical';\n}\nexport function CheckboxGroup({\n  options,\n  value,\n  defaultValue = [],\n  onChange,\n  legend,\n  size,\n  variant = 'plain',\n  minCount = 0,\n  maxCount = Infinity,\n  direction = 'horizontal',\n  name,\n  form,\n  required,\n  disabled: disabledProp,\n  className,\n  ...props\n}: CheckboxGroupProps) {\n  const field = useFormField();\n  const id = useId();\n  const disabled = disabledProp || field?.disabled;\n  const trigger = useRef<HTMLInputElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const items: CheckboxOption[] = options.map((option) =>\n    typeof option === 'string' ? { value: option, label: option } : option,\n  );\n  return (\n    <fieldset\n      {...props}\n      disabled={disabled}\n      className={classes(\n        'leaf-checkbox-group',\n        `leaf-checkbox-group--${direction}`,\n        `leaf-checkbox-group--${variant}`,\n        className,\n      )}\n      aria-describedby={\n        [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n      }\n    >\n      {legend && <legend>{legend}</legend>}\n      <FieldScope>\n        <div className=\"leaf-checkbox-group__options\">\n          {items.map((item, index) => {\n            const checked = current.includes(item.value);\n            const limited = checked\n              ? current.length <= Math.max(0, minCount)\n              : current.length >= Math.max(0, maxCount);\n            return (\n              <Checkbox\n                key={item.value}\n                id={index === 0 ? (field?.id ?? `${id}-${index}`) : `${id}-${index}`}\n                ref={index === 0 ? trigger : undefined}\n                size={size}\n                variant={variant === 'card' ? 'card' : 'plain'}\n                description={item.description}\n                icon={item.icon}\n                extra={item.extra}\n                name={name}\n                form={form}\n                value={item.value}\n                checked={checked}\n                disabled={disabled || item.disabled}\n                aria-disabled={limited || undefined}\n                onChange={(event) => {\n                  if (limited) {\n                    event.currentTarget.checked = checked;\n                    return;\n                  }\n                  const next = event.target.checked\n                    ? [...current, item.value]\n                    : current.filter((key) => key !== item.value);\n                  setCurrent(next);\n                  onChange?.(next);\n                }}\n              >\n                {item.label}\n              </Checkbox>\n            );\n          })}\n        </div>\n      </FieldScope>\n      <FormValue\n        value={current.length >= Math.max(1, minCount) ? 'selected' : ''}\n        required={required ?? field?.required}\n        form={form}\n        disabled={disabled}\n        triggerRef={trigger}\n      />\n    </fieldset>\n  );\n}\n"],"names":["CheckboxGroup","options","value","defaultValue","onChange","legend","size","variant","minCount","maxCount","Infinity","direction","name","form","required","disabledProp","className","props","field","useFormField","id","useId","disabled","trigger","useRef","current","setCurrent","useFieldValue","items","option","classes","Boolean","undefined","FieldScope","item","index","checked","limited","Math","Checkbox","event","next","key","FormValue"],"mappings":";;;;;;;AA4BO,SAASA,cAAc,EAC5BC,OAAO,EACPC,KAAK,EACLC,eAAe,EAAE,EACjBC,QAAQ,EACRC,MAAM,EACNC,IAAI,EACJC,UAAU,OAAO,EACjBC,WAAW,CAAC,EACZC,WAAWC,KAAQ,EACnBC,YAAY,YAAY,EACxBC,IAAI,EACJC,IAAI,EACJC,QAAQ,EACR,UAAUC,YAAY,EACtBC,SAAS,EACT,GAAGC,OACgB;IACnB,MAAMC,QAAQC;IACd,MAAMC,KAAKC;IACX,MAAMC,WAAWP,gBAAgBG,OAAO;IACxC,MAAMK,UAAUC,OAAyB;IACzC,MAAM,CAACC,SAASC,WAAW,GAAGC,cAAczB,OAAOC,cAAcoB,SAASV;IAC1E,MAAMe,QAA0B3B,QAAQ,GAAG,CAAC,CAAC4B,SAC3C,AAAkB,YAAlB,OAAOA,SAAsB;YAAE,OAAOA;YAAQ,OAAOA;QAAO,IAAIA;IAElE,OAAO,WAAP,GACE,KAAC;QACE,GAAGZ,KAAK;QACT,UAAUK;QACV,WAAWQ,QACT,uBACA,CAAC,qBAAqB,EAAEnB,WAAW,EACnC,CAAC,qBAAqB,EAAEJ,SAAS,EACjCS;QAEF,oBACE;YAACC,KAAK,CAAC,mBAAmB;YAAEC,OAAO;SAAc,CAAC,MAAM,CAACa,SAAS,IAAI,CAAC,QAAQC;;YAGhF3B,UAAU,WAAVA,GAAU,IAAC;0BAAQA;;0BACpB,IAAC4B,YAAUA;0BACT,kBAAC;oBAAI,WAAU;8BACZL,MAAM,GAAG,CAAC,CAACM,MAAMC;wBAChB,MAAMC,UAAUX,QAAQ,QAAQ,CAACS,KAAK,KAAK;wBAC3C,MAAMG,UAAUD,UACZX,QAAQ,MAAM,IAAIa,KAAK,GAAG,CAAC,GAAG9B,YAC9BiB,QAAQ,MAAM,IAAIa,KAAK,GAAG,CAAC,GAAG7B;wBAClC,OAAO,WAAP,GACE,IAAC8B,UAAQA;4BAEP,IAAIJ,AAAU,MAAVA,QAAejB,OAAO,MAAM,GAAGE,GAAG,CAAC,EAAEe,OAAO,GAAI,GAAGf,GAAG,CAAC,EAAEe,OAAO;4BACpE,KAAKA,AAAU,MAAVA,QAAcZ,UAAUS;4BAC7B,MAAM1B;4BACN,SAASC,AAAY,WAAZA,UAAqB,SAAS;4BACvC,aAAa2B,KAAK,WAAW;4BAC7B,MAAMA,KAAK,IAAI;4BACf,OAAOA,KAAK,KAAK;4BACjB,MAAMtB;4BACN,MAAMC;4BACN,OAAOqB,KAAK,KAAK;4BACjB,SAASE;4BACT,UAAUd,YAAYY,KAAK,QAAQ;4BACnC,iBAAeG,WAAWL;4BAC1B,UAAU,CAACQ;gCACT,IAAIH,SAAS;oCACXG,MAAM,aAAa,CAAC,OAAO,GAAGJ;oCAC9B;gCACF;gCACA,MAAMK,OAAOD,MAAM,MAAM,CAAC,OAAO,GAC7B;uCAAIf;oCAASS,KAAK,KAAK;iCAAC,GACxBT,QAAQ,MAAM,CAAC,CAACiB,MAAQA,QAAQR,KAAK,KAAK;gCAC9CR,WAAWe;gCACXrC,WAAWqC;4BACb;sCAECP,KAAK,KAAK;2BA1BNA,KAAK,KAAK;oBA6BrB;;;0BAGJ,IAACS,WAASA;gBACR,OAAOlB,QAAQ,MAAM,IAAIa,KAAK,GAAG,CAAC,GAAG9B,YAAY,aAAa;gBAC9D,UAAUM,YAAYI,OAAO;gBAC7B,MAAML;gBACN,UAAUS;gBACV,YAAYC;;;;AAIpB"}

package/dist/esm/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+export * from './checkbox.js';
+export type { CheckboxGroupProps, CheckboxOption } from './group.js';
+export { CheckboxGroup } from './group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/checkbox/index.js

@@ -0,0 +1,3 @@
+"use client";
+export * from "./checkbox.js";
+export { CheckboxGroup } from "./group.js";

package/dist/esm/collapse/collapse.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ControlSize } from '../shared/types.js';
+export interface CollapseItem {
+    key: string;
+    label: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+    extra?: ReactNode;
+}
+export interface CollapseProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'> {
+    items: readonly CollapseItem[];
+    activeKey?: string | readonly string[];
+    defaultActiveKey?: string | readonly string[];
+    onChange?: (keys: string[]) => void;
+    accordion?: boolean;
+    bordered?: boolean;
+    size?: ControlSize;
+    destroyInactive?: boolean;
+}
+export declare function Collapse({ items, activeKey, defaultActiveKey, onChange, accordion, bordered, size, destroyInactive, className, 'aria-label': label, ...props }: CollapseProps): import("react").JSX.Element;
+//# sourceMappingURL=collapse.d.ts.map

package/dist/esm/collapse/collapse.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../../src/collapse/collapse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAKrF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AACD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC;IACtE,KAAK,EAAE,SAAS,YAAY,EAAE,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IACvC,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,gBAAqB,EACrB,QAAQ,EACR,SAAiB,EACjB,QAAe,EACf,IAAW,EACX,eAAuB,EACvB,SAAS,EACT,YAAY,EAAE,KAAK,EACnB,GAAG,KAAK,EACT,EAAE,aAAa,+BAmFf"}

package/dist/esm/collapse/collapse.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import { useLeafConfig } from "../config-provider/context.js";
+import { classes } from "../shared/classes.js";
+import { inertProps } from "../shared/inert.js";
+import { usePresence } from "../shared/presence.js";
+const keys = (value)=>'string' == typeof value ? [
+        value
+    ] : value;
+function Collapse({ items, activeKey, defaultActiveKey = [], onChange, accordion = false, bordered = true, size = 'md', destroyInactive = false, className, 'aria-label': label, ...props }) {
+    const { messages } = useLeafConfig();
+    const [internal, setInternal] = useState(()=>keys(defaultActiveKey));
+    const requested = keys(activeKey ?? internal);
+    const current = accordion ? requested.slice(0, 1) : requested;
+    const [visited, setVisited] = useState(current);
+    const newlyOpened = current.filter((key)=>!visited.includes(key));
+    if (newlyOpened.length) setVisited([
+        ...visited,
+        ...newlyOpened
+    ]);
+    const id = useId();
+    const root = useRef(null);
+    const toggle = (item)=>{
+        if (item.disabled) return;
+        const next = current.includes(item.key) ? current.filter((key)=>key !== item.key) : accordion ? [
+            item.key
+        ] : [
+            ...current,
+            item.key
+        ];
+        if (void 0 === activeKey) setInternal(next);
+        onChange?.([
+            ...next
+        ]);
+    };
+    return /*#__PURE__*/ jsx("section", {
+        ...props,
+        ref: root,
+        "aria-label": label ?? messages.collapse,
+        className: classes('leaf-collapse', `leaf-collapse--${size}`, bordered && 'leaf-collapse--bordered', className),
+        children: items.map((item, index)=>{
+            const open = current.includes(item.key);
+            return /*#__PURE__*/ jsxs("div", {
+                className: "leaf-collapse__item",
+                "data-open": open || void 0,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-collapse__header",
+                        children: [
+                            /*#__PURE__*/ jsxs("button", {
+                                id: `${id}-trigger-${index}`,
+                                type: "button",
+                                className: "leaf-collapse__trigger",
+                                "aria-expanded": open,
+                                "aria-controls": `${id}-panel-${index}`,
+                                disabled: item.disabled,
+                                onClick: ()=>toggle(item),
+                                onKeyDown: (event)=>{
+                                    if (![
+                                        'ArrowDown',
+                                        'ArrowUp',
+                                        'Home',
+                                        'End'
+                                    ].includes(event.key)) return;
+                                    event.preventDefault();
+                                    const buttons = [
+                                        ...root.current?.querySelectorAll('.leaf-collapse__trigger:not(:disabled)') ?? []
+                                    ];
+                                    const position = buttons.indexOf(event.currentTarget);
+                                    const next = 'Home' === event.key ? 0 : 'End' === event.key ? buttons.length - 1 : (position + ('ArrowDown' === event.key ? 1 : -1) + buttons.length) % buttons.length;
+                                    buttons[next]?.focus();
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(ChevronRight, {
+                                        size: 16,
+                                        "aria-hidden": "true"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: item.label
+                                    })
+                                ]
+                            }),
+                            null != item.extra && /*#__PURE__*/ jsx("div", {
+                                className: "leaf-collapse__extra",
+                                children: item.extra
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(CollapsePanel, {
+                        id: `${id}-panel-${index}`,
+                        labelledBy: `${id}-trigger-${index}`,
+                        open: open,
+                        destroyInactive: destroyInactive,
+                        visited: visited.includes(item.key),
+                        children: item.children
+                    })
+                ]
+            }, item.key);
+        })
+    });
+}
+function CollapsePanel({ id, labelledBy, open, destroyInactive, visited, children }) {
+    const panel = useRef(null);
+    const present = usePresence(open, panel);
+    return /*#__PURE__*/ jsx("section", {
+        ref: panel,
+        id: id,
+        "aria-labelledby": labelledBy,
+        "aria-hidden": !open || void 0,
+        ...inertProps(!open),
+        className: "leaf-collapse__panel",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "leaf-collapse__inner",
+            children: /*#__PURE__*/ jsx("div", {
+                className: "leaf-collapse__body",
+                children: (open || (destroyInactive ? present : visited)) && children
+            })
+        })
+    });
+}
+export { Collapse };
+
+//# sourceMappingURL=collapse.js.map

package/dist/esm/collapse/collapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapse/collapse.js","sources":["../../../src/collapse/collapse.tsx"],"sourcesContent":["import { ChevronRight } from 'lucide-react';\nimport { type HTMLAttributes, type ReactNode, useId, useRef, useState } from 'react';\nimport { useLeafConfig } from '../config-provider/context';\nimport { classes } from '../shared/classes';\nimport { inertProps } from '../shared/inert';\nimport { usePresence } from '../shared/presence';\nimport type { ControlSize } from '../shared/types';\n\nexport interface CollapseItem {\n  key: string;\n  label: ReactNode;\n  children: ReactNode;\n  disabled?: boolean;\n  extra?: ReactNode;\n}\nexport interface CollapseProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'onChange' | 'defaultValue'> {\n  items: readonly CollapseItem[];\n  activeKey?: string | readonly string[];\n  defaultActiveKey?: string | readonly string[];\n  onChange?: (keys: string[]) => void;\n  accordion?: boolean;\n  bordered?: boolean;\n  size?: ControlSize;\n  destroyInactive?: boolean;\n}\nconst keys = (value: string | readonly string[]) => (typeof value === 'string' ? [value] : value);\nexport function Collapse({\n  items,\n  activeKey,\n  defaultActiveKey = [],\n  onChange,\n  accordion = false,\n  bordered = true,\n  size = 'md',\n  destroyInactive = false,\n  className,\n  'aria-label': label,\n  ...props\n}: CollapseProps) {\n  const { messages } = useLeafConfig();\n  const [internal, setInternal] = useState(() => keys(defaultActiveKey));\n  const requested = keys(activeKey ?? internal);\n  const current = accordion ? requested.slice(0, 1) : requested;\n  const [visited, setVisited] = useState<readonly string[]>(current);\n  const newlyOpened = current.filter((key) => !visited.includes(key));\n  if (newlyOpened.length) setVisited([...visited, ...newlyOpened]);\n  const id = useId();\n  const root = useRef<HTMLElement>(null);\n  const toggle = (item: CollapseItem) => {\n    if (item.disabled) return;\n    const next = current.includes(item.key)\n      ? current.filter((key) => key !== item.key)\n      : accordion\n        ? [item.key]\n        : [...current, item.key];\n    if (activeKey === undefined) setInternal(next);\n    onChange?.([...next]);\n  };\n  return (\n    <section\n      {...props}\n      ref={root}\n      aria-label={label ?? messages.collapse}\n      className={classes(\n        'leaf-collapse',\n        `leaf-collapse--${size}`,\n        bordered && 'leaf-collapse--bordered',\n        className,\n      )}\n    >\n      {items.map((item, index) => {\n        const open = current.includes(item.key);\n        return (\n          <div className=\"leaf-collapse__item\" key={item.key} data-open={open || undefined}>\n            <div className=\"leaf-collapse__header\">\n              <button\n                id={`${id}-trigger-${index}`}\n                type=\"button\"\n                className=\"leaf-collapse__trigger\"\n                aria-expanded={open}\n                aria-controls={`${id}-panel-${index}`}\n                disabled={item.disabled}\n                onClick={() => toggle(item)}\n                onKeyDown={(event) => {\n                  if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;\n                  event.preventDefault();\n                  const buttons = [\n                    ...(root.current?.querySelectorAll<HTMLButtonElement>(\n                      '.leaf-collapse__trigger:not(:disabled)',\n                    ) ?? []),\n                  ];\n                  const position = buttons.indexOf(event.currentTarget);\n                  const next =\n                    event.key === 'Home'\n                      ? 0\n                      : event.key === 'End'\n                        ? buttons.length - 1\n                        : (position + (event.key === 'ArrowDown' ? 1 : -1) + buttons.length) %\n                          buttons.length;\n                  buttons[next]?.focus();\n                }}\n              >\n                <ChevronRight size={16} aria-hidden=\"true\" />\n                <span>{item.label}</span>\n              </button>\n              {item.extra != null && <div className=\"leaf-collapse__extra\">{item.extra}</div>}\n            </div>\n            <CollapsePanel\n              id={`${id}-panel-${index}`}\n              labelledBy={`${id}-trigger-${index}`}\n              open={open}\n              destroyInactive={destroyInactive}\n              visited={visited.includes(item.key)}\n            >\n              {item.children}\n            </CollapsePanel>\n          </div>\n        );\n      })}\n    </section>\n  );\n}\n\nfunction CollapsePanel({\n  id,\n  labelledBy,\n  open,\n  destroyInactive,\n  visited,\n  children,\n}: {\n  id: string;\n  labelledBy: string;\n  open: boolean;\n  destroyInactive: boolean;\n  visited: boolean;\n  children: ReactNode;\n}) {\n  const panel = useRef<HTMLElement>(null);\n  const present = usePresence(open, panel);\n  return (\n    <section\n      ref={panel}\n      id={id}\n      aria-labelledby={labelledBy}\n      aria-hidden={!open || undefined}\n      {...inertProps(!open)}\n      className=\"leaf-collapse__panel\"\n    >\n      <div className=\"leaf-collapse__inner\">\n        <div className=\"leaf-collapse__body\">\n          {(open || (destroyInactive ? present : visited)) && children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"names":["keys","value","Collapse","items","activeKey","defaultActiveKey","onChange","accordion","bordered","size","destroyInactive","className","label","props","messages","useLeafConfig","internal","setInternal","useState","requested","current","visited","setVisited","newlyOpened","key","id","useId","root","useRef","toggle","item","next","undefined","classes","index","open","event","buttons","position","ChevronRight","CollapsePanel","labelledBy","children","panel","present","usePresence","inertProps"],"mappings":"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"}

package/dist/esm/collapse/index.d.ts

@@ -0,0 +1,3 @@
+export type { CollapseItem, CollapseProps } from './collapse.js';
+export { Collapse } from './collapse.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/collapse/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collapse/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/collapse/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { Collapse } from "./collapse.js";

package/dist/esm/color-recipes.d.ts

@@ -0,0 +1,2 @@
+export declare const colorRecipes: Record<string, readonly [string, string, number]>;
+//# sourceMappingURL=color-recipes.d.ts.map

package/dist/esm/color-recipes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-recipes.d.ts","sourceRoot":"","sources":["../../src/color-recipes.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAsH1E,CAAC"}