asterui 0.12.63 → 0.12.64

package/dist/components/Collapse.js

@@ -1,106 +1,108 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as h, useState as P } from "react";
-const T = "collapse", $ = "collapse-arrow", z = "collapse-plus", B = "collapse-open", E = "collapse-close", k = "collapse-arrow-end", R = "collapse-title", S = "collapse-content", q = {
+import { jsx as d, jsxs as A } from "react/jsx-runtime";
+import { forwardRef as g, useState as I, useId as D } from "react";
+const P = "collapse", T = "collapse-arrow", z = "collapse-plus", B = "collapse-open", E = "collapse-close", k = "collapse-arrow-end", R = "collapse-title", S = "collapse-content", q = {
   sm: "text-sm",
   md: "text-base",
   lg: "text-lg"
-}, A = h(({ item: l, isOpen: s, onToggle: C, icon: c, expandIconPlacement: d, bordered: i, ghost: p, size: b, testId: f }, v) => {
-  const o = l.collapsible === "disabled", m = [
-    T,
+}, N = g(({ item: l, isOpen: s, onToggle: w, icon: c, expandIconPlacement: i, bordered: p, ghost: f, size: m, testId: u }, x) => {
+  const o = l.collapsible === "disabled", h = [
+    P,
     {
-      arrow: $,
+      arrow: T,
       plus: z,
       none: ""
     }[c],
     s ? B : E,
-    !p && "bg-base-200",
-    p && "bg-transparent",
-    i && "border border-base-300",
-    d === "end" && c !== "none" && k,
-    q[b],
+    !f && "bg-base-200",
+    f && "bg-transparent",
+    p && "border border-base-300",
+    i === "end" && c !== "none" && k,
+    q[m],
     o && "opacity-50 cursor-not-allowed",
     l.className
-  ].filter(Boolean).join(" "), u = () => {
-    o || C();
-  };
-  return /* @__PURE__ */ y(
+  ].filter(Boolean).join(" "), C = () => {
+    o || w();
+  }, n = D(), b = `${n}-header`, v = `${n}-content`;
+  return /* @__PURE__ */ A(
     "div",
     {
-      ref: v,
-      className: m,
-      "data-testid": f ? `${f}-panel-${l.key}` : void 0,
+      ref: x,
+      className: h,
+      "data-testid": u ? `${u}-panel-${l.key}` : void 0,
       "data-state": s ? "open" : "closed",
       children: [
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ A(
           "div",
           {
+            id: b,
             className: `${R} font-medium flex items-center justify-between cursor-pointer`,
-            onClick: u,
+            onClick: C,
             role: "button",
             tabIndex: o ? -1 : 0,
             onKeyDown: (a) => {
-              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), u());
+              (a.key === "Enter" || a.key === " ") && (a.preventDefault(), C());
             },
             "aria-expanded": s,
             "aria-disabled": o,
+            "aria-controls": v,
             children: [
-              /* @__PURE__ */ t("span", { children: l.label }),
-              l.extra && /* @__PURE__ */ t("span", { className: "ml-auto mr-6", children: l.extra })
+              /* @__PURE__ */ d("span", { children: l.label }),
+              l.extra && /* @__PURE__ */ d("span", { className: "ml-auto mr-6", children: l.extra })
             ]
           }
         ),
-        /* @__PURE__ */ t("div", { className: S, children: l.children })
+        /* @__PURE__ */ d("div", { id: v, className: S, role: "region", "aria-labelledby": b, children: l.children })
       ]
     }
   );
 });
-A.displayName = "CollapsePanel";
-const F = h(
+N.displayName = "CollapsePanel";
+const F = g(
   ({
     items: l = [],
     activeKey: s,
-    defaultActiveKey: C,
+    defaultActiveKey: w,
     accordion: c = !1,
-    bordered: d = !0,
-    ghost: i = !1,
-    size: p = "md",
-    icon: b = "arrow",
-    expandIconPlacement: f = "start",
-    onChange: v,
+    bordered: i = !0,
+    ghost: p = !1,
+    size: f = "md",
+    icon: m = "arrow",
+    expandIconPlacement: u = "start",
+    onChange: x,
     className: o = "",
-    "data-testid": w = "collapse",
-    ...m
-  }, u) => {
-    const a = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [N, g] = P(
-      () => a(C)
-    ), x = s !== void 0, n = x ? a(s) : N, j = (e) => {
-      let r;
-      c ? r = n.includes(e) ? [] : [e] : n.includes(e) ? r = n.filter((D) => D !== e) : r = [...n, e], x || g(r), v?.(r);
+    "data-testid": y = "collapse",
+    ...h
+  }, C) => {
+    const n = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [b, v] = I(
+      () => n(w)
+    ), a = s !== void 0, r = a ? n(s) : b, j = (e) => {
+      let t;
+      c ? t = r.includes(e) ? [] : [e] : r.includes(e) ? t = r.filter(($) => $ !== e) : t = [...r, e], a || v(t), x?.(t);
     }, K = [
       "flex flex-col",
-      d && !i && "divide-y divide-base-300",
-      d && "border border-base-300 rounded-lg overflow-hidden",
+      i && !p && "divide-y divide-base-300",
+      i && "border border-base-300 rounded-lg overflow-hidden",
       o
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ t(
+    return /* @__PURE__ */ d(
       "div",
       {
-        ref: u,
+        ref: C,
         className: K,
-        "data-testid": w,
-        ...m,
-        children: l.map((e) => /* @__PURE__ */ t(
-          A,
+        "data-testid": y,
+        ...h,
+        children: l.map((e) => /* @__PURE__ */ d(
+          N,
           {
             item: e,
-            isOpen: n.includes(e.key),
+            isOpen: r.includes(e.key),
             onToggle: () => j(e.key),
-            icon: e.showArrow === !1 ? "none" : b,
-            expandIconPlacement: f,
+            icon: e.showArrow === !1 ? "none" : m,
+            expandIconPlacement: u,
             bordered: !1,
-            ghost: i,
-            size: p,
-            testId: w
+            ghost: p,
+            size: f,
+            testId: y
           },
           e.key
         ))

package/dist/components/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.js","sources":["../../src/components/Collapse.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react'\n\n// DaisyUI classes\nconst dCollapse = 'collapse'\nconst dCollapseArrow = 'collapse-arrow'\nconst dCollapsePlus = 'collapse-plus'\nconst dCollapseOpen = 'collapse-open'\nconst dCollapseClose = 'collapse-close'\nconst dCollapseArrowEnd = 'collapse-arrow-end'\nconst dCollapseTitle = 'collapse-title'\nconst dCollapseContent = 'collapse-content'\n\nexport type CollapseSize = 'sm' | 'md' | 'lg'\nexport type CollapseIconPosition = 'start' | 'end'\nexport type CollapseCollapsible = 'header' | 'icon' | 'disabled'\n\nexport interface CollapseItemType {\n  /** Unique key for the panel */\n  key: string | number\n  /** Panel header/label */\n  label: React.ReactNode\n  /** Panel content */\n  children: React.ReactNode\n  /** Extra element in the corner */\n  extra?: React.ReactNode\n  /** Whether to show the arrow icon */\n  showArrow?: boolean\n  /** Collapsible mode for this panel */\n  collapsible?: CollapseCollapsible\n  /** Custom class name for this panel */\n  className?: string\n}\n\nexport interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Collapse items */\n  items?: CollapseItemType[]\n  /** Currently active panel keys (controlled) */\n  activeKey?: string | number | (string | number)[]\n  /** Default active panel keys (uncontrolled) */\n  defaultActiveKey?: string | number | (string | number)[]\n  /** Accordion mode - only one panel open at a time */\n  accordion?: boolean\n  /** Show border around panels */\n  bordered?: boolean\n  /** Ghost mode - transparent background */\n  ghost?: boolean\n  /** Size variant */\n  size?: CollapseSize\n  /** Icon type */\n  icon?: 'arrow' | 'plus' | 'none'\n  /** Icon placement */\n  expandIconPlacement?: CollapseIconPosition\n  /** Callback when panels change */\n  onChange?: (activeKey: (string | number)[]) => void\n  /** Test ID */\n  'data-testid'?: string\n}\n\nconst sizeClasses: Record<CollapseSize, string> = {\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n}\n\nconst CollapsePanel = forwardRef<\n  HTMLDivElement,\n  {\n    item: CollapseItemType\n    isOpen: boolean\n    onToggle: () => void\n    icon: 'arrow' | 'plus' | 'none'\n    expandIconPlacement: CollapseIconPosition\n    bordered: boolean\n    ghost: boolean\n    size: CollapseSize\n    testId?: string\n  }\n>(({ item, isOpen, onToggle, icon, expandIconPlacement, bordered, ghost, size, testId }, ref) => {\n  const isDisabled = item.collapsible === 'disabled'\n\n  const iconClasses = {\n    arrow: dCollapseArrow,\n    plus: dCollapsePlus,\n    none: '',\n  }\n\n  const panelClasses = [\n    dCollapse,\n    iconClasses[icon],\n    isOpen ? dCollapseOpen : dCollapseClose,\n    !ghost && 'bg-base-200',\n    ghost && 'bg-transparent',\n    bordered && 'border border-base-300',\n    expandIconPlacement === 'end' && icon !== 'none' && dCollapseArrowEnd,\n    sizeClasses[size],\n    isDisabled && 'opacity-50 cursor-not-allowed',\n    item.className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    if (!isDisabled) {\n      onToggle()\n    }\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={panelClasses}\n      data-testid={testId ? `${testId}-panel-${item.key}` : undefined}\n      data-state={isOpen ? 'open' : 'closed'}\n    >\n      <div\n        className={`${dCollapseTitle} font-medium flex items-center justify-between cursor-pointer`}\n        onClick={handleClick}\n        role=\"button\"\n        tabIndex={isDisabled ? -1 : 0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            handleClick()\n          }\n        }}\n        aria-expanded={isOpen}\n        aria-disabled={isDisabled}\n      >\n        <span>{item.label}</span>\n        {item.extra && <span className=\"ml-auto mr-6\">{item.extra}</span>}\n      </div>\n      <div className={dCollapseContent}>\n        {item.children}\n      </div>\n    </div>\n  )\n})\n\nCollapsePanel.displayName = 'CollapsePanel'\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(\n  (\n    {\n      items = [],\n      activeKey,\n      defaultActiveKey,\n      accordion = false,\n      bordered = true,\n      ghost = false,\n      size = 'md',\n      icon = 'arrow',\n      expandIconPlacement = 'start',\n      onChange,\n      className = '',\n      'data-testid': testId = 'collapse',\n      ...rest\n    },\n    ref\n  ) => {\n    // Normalize keys to array\n    const normalizeKeys = (keys: string | number | (string | number)[] | undefined): (string | number)[] => {\n      if (keys === undefined) return []\n      if (Array.isArray(keys)) return keys\n      return [keys]\n    }\n\n    const [internalActiveKeys, setInternalActiveKeys] = useState<(string | number)[]>(\n      () => normalizeKeys(defaultActiveKey)\n    )\n\n    const isControlled = activeKey !== undefined\n    const currentActiveKeys = isControlled ? normalizeKeys(activeKey) : internalActiveKeys\n\n    const handleToggle = (key: string | number) => {\n      let newActiveKeys: (string | number)[]\n\n      if (accordion) {\n        // In accordion mode, only one can be open\n        newActiveKeys = currentActiveKeys.includes(key) ? [] : [key]\n      } else {\n        // Toggle the key\n        if (currentActiveKeys.includes(key)) {\n          newActiveKeys = currentActiveKeys.filter((k) => k !== key)\n        } else {\n          newActiveKeys = [...currentActiveKeys, key]\n        }\n      }\n\n      if (!isControlled) {\n        setInternalActiveKeys(newActiveKeys)\n      }\n      onChange?.(newActiveKeys)\n    }\n\n    const containerClasses = [\n      'flex flex-col',\n      bordered && !ghost && 'divide-y divide-base-300',\n      bordered && 'border border-base-300 rounded-lg overflow-hidden',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div\n        ref={ref}\n        className={containerClasses}\n        data-testid={testId}\n        {...rest}\n      >\n        {items.map((item) => (\n          <CollapsePanel\n            key={item.key}\n            item={item}\n            isOpen={currentActiveKeys.includes(item.key)}\n            onToggle={() => handleToggle(item.key)}\n            icon={item.showArrow === false ? 'none' : icon}\n            expandIconPlacement={expandIconPlacement}\n            bordered={false}\n            ghost={ghost}\n            size={size}\n            testId={testId}\n          />\n        ))}\n      </div>\n    )\n  }\n)\n\nCollapse.displayName = 'Collapse'\n"],"names":["dCollapse","dCollapseArrow","dCollapsePlus","dCollapseOpen","dCollapseClose","dCollapseArrowEnd","dCollapseTitle","dCollapseContent","sizeClasses","CollapsePanel","forwardRef","item","isOpen","onToggle","icon","expandIconPlacement","bordered","ghost","size","testId","ref","isDisabled","panelClasses","handleClick","jsxs","e","jsx","Collapse","items","activeKey","defaultActiveKey","accordion","onChange","className","rest","normalizeKeys","keys","internalActiveKeys","setInternalActiveKeys","useState","isControlled","currentActiveKeys","handleToggle","key","newActiveKeys","k","containerClasses"],"mappings":"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"}
+{"version":3,"file":"Collapse.js","sources":["../../src/components/Collapse.tsx"],"sourcesContent":["import React, { forwardRef, useState, useId } from 'react'\n\n// DaisyUI classes\nconst dCollapse = 'collapse'\nconst dCollapseArrow = 'collapse-arrow'\nconst dCollapsePlus = 'collapse-plus'\nconst dCollapseOpen = 'collapse-open'\nconst dCollapseClose = 'collapse-close'\nconst dCollapseArrowEnd = 'collapse-arrow-end'\nconst dCollapseTitle = 'collapse-title'\nconst dCollapseContent = 'collapse-content'\n\nexport type CollapseSize = 'sm' | 'md' | 'lg'\nexport type CollapseIconPosition = 'start' | 'end'\nexport type CollapseCollapsible = 'header' | 'icon' | 'disabled'\n\nexport interface CollapseItemType {\n  /** Unique key for the panel */\n  key: string | number\n  /** Panel header/label */\n  label: React.ReactNode\n  /** Panel content */\n  children: React.ReactNode\n  /** Extra element in the corner */\n  extra?: React.ReactNode\n  /** Whether to show the arrow icon */\n  showArrow?: boolean\n  /** Collapsible mode for this panel */\n  collapsible?: CollapseCollapsible\n  /** Custom class name for this panel */\n  className?: string\n}\n\nexport interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Collapse items */\n  items?: CollapseItemType[]\n  /** Currently active panel keys (controlled) */\n  activeKey?: string | number | (string | number)[]\n  /** Default active panel keys (uncontrolled) */\n  defaultActiveKey?: string | number | (string | number)[]\n  /** Accordion mode - only one panel open at a time */\n  accordion?: boolean\n  /** Show border around panels */\n  bordered?: boolean\n  /** Ghost mode - transparent background */\n  ghost?: boolean\n  /** Size variant */\n  size?: CollapseSize\n  /** Icon type */\n  icon?: 'arrow' | 'plus' | 'none'\n  /** Icon placement */\n  expandIconPlacement?: CollapseIconPosition\n  /** Callback when panels change */\n  onChange?: (activeKey: (string | number)[]) => void\n  /** Test ID */\n  'data-testid'?: string\n}\n\nconst sizeClasses: Record<CollapseSize, string> = {\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n}\n\nconst CollapsePanel = forwardRef<\n  HTMLDivElement,\n  {\n    item: CollapseItemType\n    isOpen: boolean\n    onToggle: () => void\n    icon: 'arrow' | 'plus' | 'none'\n    expandIconPlacement: CollapseIconPosition\n    bordered: boolean\n    ghost: boolean\n    size: CollapseSize\n    testId?: string\n  }\n>(({ item, isOpen, onToggle, icon, expandIconPlacement, bordered, ghost, size, testId }, ref) => {\n  const isDisabled = item.collapsible === 'disabled'\n\n  const iconClasses = {\n    arrow: dCollapseArrow,\n    plus: dCollapsePlus,\n    none: '',\n  }\n\n  const panelClasses = [\n    dCollapse,\n    iconClasses[icon],\n    isOpen ? dCollapseOpen : dCollapseClose,\n    !ghost && 'bg-base-200',\n    ghost && 'bg-transparent',\n    bordered && 'border border-base-300',\n    expandIconPlacement === 'end' && icon !== 'none' && dCollapseArrowEnd,\n    sizeClasses[size],\n    isDisabled && 'opacity-50 cursor-not-allowed',\n    item.className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    if (!isDisabled) {\n      onToggle()\n    }\n  }\n\n  const panelId = useId()\n  const headerId = `${panelId}-header`\n  const contentId = `${panelId}-content`\n\n  return (\n    <div\n      ref={ref}\n      className={panelClasses}\n      data-testid={testId ? `${testId}-panel-${item.key}` : undefined}\n      data-state={isOpen ? 'open' : 'closed'}\n    >\n      <div\n        id={headerId}\n        className={`${dCollapseTitle} font-medium flex items-center justify-between cursor-pointer`}\n        onClick={handleClick}\n        role=\"button\"\n        tabIndex={isDisabled ? -1 : 0}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            handleClick()\n          }\n        }}\n        aria-expanded={isOpen}\n        aria-disabled={isDisabled}\n        aria-controls={contentId}\n      >\n        <span>{item.label}</span>\n        {item.extra && <span className=\"ml-auto mr-6\">{item.extra}</span>}\n      </div>\n      <div id={contentId} className={dCollapseContent} role=\"region\" aria-labelledby={headerId}>\n        {item.children}\n      </div>\n    </div>\n  )\n})\n\nCollapsePanel.displayName = 'CollapsePanel'\n\nexport const Collapse = forwardRef<HTMLDivElement, CollapseProps>(\n  (\n    {\n      items = [],\n      activeKey,\n      defaultActiveKey,\n      accordion = false,\n      bordered = true,\n      ghost = false,\n      size = 'md',\n      icon = 'arrow',\n      expandIconPlacement = 'start',\n      onChange,\n      className = '',\n      'data-testid': testId = 'collapse',\n      ...rest\n    },\n    ref\n  ) => {\n    // Normalize keys to array\n    const normalizeKeys = (keys: string | number | (string | number)[] | undefined): (string | number)[] => {\n      if (keys === undefined) return []\n      if (Array.isArray(keys)) return keys\n      return [keys]\n    }\n\n    const [internalActiveKeys, setInternalActiveKeys] = useState<(string | number)[]>(\n      () => normalizeKeys(defaultActiveKey)\n    )\n\n    const isControlled = activeKey !== undefined\n    const currentActiveKeys = isControlled ? normalizeKeys(activeKey) : internalActiveKeys\n\n    const handleToggle = (key: string | number) => {\n      let newActiveKeys: (string | number)[]\n\n      if (accordion) {\n        // In accordion mode, only one can be open\n        newActiveKeys = currentActiveKeys.includes(key) ? [] : [key]\n      } else {\n        // Toggle the key\n        if (currentActiveKeys.includes(key)) {\n          newActiveKeys = currentActiveKeys.filter((k) => k !== key)\n        } else {\n          newActiveKeys = [...currentActiveKeys, key]\n        }\n      }\n\n      if (!isControlled) {\n        setInternalActiveKeys(newActiveKeys)\n      }\n      onChange?.(newActiveKeys)\n    }\n\n    const containerClasses = [\n      'flex flex-col',\n      bordered && !ghost && 'divide-y divide-base-300',\n      bordered && 'border border-base-300 rounded-lg overflow-hidden',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div\n        ref={ref}\n        className={containerClasses}\n        data-testid={testId}\n        {...rest}\n      >\n        {items.map((item) => (\n          <CollapsePanel\n            key={item.key}\n            item={item}\n            isOpen={currentActiveKeys.includes(item.key)}\n            onToggle={() => handleToggle(item.key)}\n            icon={item.showArrow === false ? 'none' : icon}\n            expandIconPlacement={expandIconPlacement}\n            bordered={false}\n            ghost={ghost}\n            size={size}\n            testId={testId}\n          />\n        ))}\n      </div>\n    )\n  }\n)\n\nCollapse.displayName = 'Collapse'\n"],"names":["dCollapse","dCollapseArrow","dCollapsePlus","dCollapseOpen","dCollapseClose","dCollapseArrowEnd","dCollapseTitle","dCollapseContent","sizeClasses","CollapsePanel","forwardRef","item","isOpen","onToggle","icon","expandIconPlacement","bordered","ghost","size","testId","ref","isDisabled","panelClasses","handleClick","panelId","useId","headerId","contentId","jsxs","e","jsx","Collapse","items","activeKey","defaultActiveKey","accordion","onChange","className","rest","normalizeKeys","keys","internalActiveKeys","setInternalActiveKeys","useState","isControlled","currentActiveKeys","handleToggle","key","newActiveKeys","k","containerClasses"],"mappings":"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"}

package/dist/components/DatePicker.d.ts

@@ -10,4 +10,22 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** Test ID prefix for child elements */
     'data-testid'?: string;
 }
-export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export type DateRangeValue = [Date | null, Date | null];
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    value?: DateRangeValue;
+    defaultValue?: DateRangeValue;
+    onChange?: (range: DateRangeValue) => void;
+    format?: string;
+    placeholder?: [string, string] | string;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Test ID prefix for child elements */
+    'data-testid'?: string;
+}
+declare const DatePickerComponent: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+type DatePickerType = typeof DatePickerComponent & {
+    Range: typeof DateRangePicker;
+};
+export declare const DatePicker: DatePickerType;
+export {};