asterui 0.12.32 → 0.12.35

package/dist/components/ResponsiveDrawer.js

@@ -0,0 +1,75 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import R, { forwardRef as k } from "react";
+const I = k(
+  ({
+    children: n,
+    sidebar: i,
+    open: s = !1,
+    onOpenChange: c,
+    end: r = !1,
+    width: a = 320,
+    responsive: l,
+    className: m = "",
+    sidebarClassName: w = "",
+    contentClassName: p = "",
+    overlayClassName: g = "",
+    id: f,
+    "data-testid": h,
+    ...b
+  }, v) => {
+    const x = R.useId(), o = f || x, y = (B) => {
+      c?.(B.target.checked);
+    }, C = [
+      "drawer",
+      r && "drawer-end",
+      l && {
+        sm: "sm:drawer-open",
+        md: "md:drawer-open",
+        lg: "lg:drawer-open",
+        xl: "xl:drawer-open",
+        "2xl": "2xl:drawer-open"
+      }[l],
+      m
+    ].filter(Boolean).join(" "), N = ["bg-base-200 min-h-full p-4", w].filter(Boolean).join(" "), j = ["drawer-content", p].filter(Boolean).join(" "), u = ["drawer-overlay", g].filter(Boolean).join(" "), t = typeof a == "number" ? `${a}px` : a;
+    return /* @__PURE__ */ d(
+      "div",
+      {
+        ref: v,
+        className: C,
+        "data-state": s ? "open" : "closed",
+        "data-testid": h,
+        ...b,
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              id: o,
+              type: "checkbox",
+              className: "drawer-toggle",
+              checked: s,
+              onChange: y,
+              "aria-label": r ? "Toggle right sidebar" : "Toggle sidebar"
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: j, children: n }),
+          /* @__PURE__ */ d("div", { className: "drawer-side", style: { "--drawer-width": t }, children: [
+            /* @__PURE__ */ e(
+              "label",
+              {
+                htmlFor: o,
+                "aria-label": "Close sidebar",
+                className: u
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: N, style: { width: t }, children: i })
+          ] })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "ResponsiveDrawer";
+export {
+  I as ResponsiveDrawer
+};
+//# sourceMappingURL=ResponsiveDrawer.js.map

package/dist/components/ResponsiveDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveDrawer.js","sources":["../../src/components/ResponsiveDrawer.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nexport type ResponsiveDrawerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface ResponsiveDrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Main content area */\n  children: React.ReactNode\n  /** Sidebar content */\n  sidebar: React.ReactNode\n  /** Controlled open state */\n  open?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n  /** Position sidebar on the right side */\n  end?: boolean\n  /** Width of the sidebar */\n  width?: number | string\n  /** Breakpoint at which sidebar becomes always visible (e.g., 'lg' for lg:drawer-open) */\n  responsive?: ResponsiveDrawerBreakpoint\n  /** Additional classes for sidebar container */\n  sidebarClassName?: string\n  /** Additional classes for content area */\n  contentClassName?: string\n  /** Additional classes for the overlay */\n  overlayClassName?: string\n  /** Unique ID for the drawer (auto-generated if not provided) */\n  id?: string\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\n/**\n * ResponsiveDrawer - A responsive sidebar layout using DaisyUI's drawer.\n * Use for navigation sidebars that toggle on mobile but can be always visible on larger screens.\n * For overlay panel drawers (forms, details), use the Drawer component instead.\n */\nexport const ResponsiveDrawer = forwardRef<HTMLDivElement, ResponsiveDrawerProps>(\n  (\n    {\n      children,\n      sidebar,\n      open = false,\n      onOpenChange,\n      end = false,\n      width = 320,\n      responsive,\n      className = '',\n      sidebarClassName = '',\n      contentClassName = '',\n      overlayClassName = '',\n      id,\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const autoId = React.useId()\n    const drawerId = id || autoId\n\n    const handleToggle = (e: React.ChangeEvent<HTMLInputElement>) => {\n      onOpenChange?.(e.target.checked)\n    }\n\n    // Build responsive class if specified\n    const responsiveClasses: Record<ResponsiveDrawerBreakpoint, string> = {\n      sm: 'sm:drawer-open',\n      md: 'md:drawer-open',\n      lg: 'lg:drawer-open',\n      xl: 'xl:drawer-open',\n      '2xl': '2xl:drawer-open',\n    }\n\n    const drawerClasses = [\n      'drawer',\n      end && 'drawer-end',\n      responsive && responsiveClasses[responsive],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    const sidebarClasses = ['bg-base-200 min-h-full p-4', sidebarClassName]\n      .filter(Boolean)\n      .join(' ')\n\n    const contentClasses = ['drawer-content', contentClassName]\n      .filter(Boolean)\n      .join(' ')\n\n    const overlayClasses = ['drawer-overlay', overlayClassName]\n      .filter(Boolean)\n      .join(' ')\n\n    // Calculate width style\n    const widthStyle = typeof width === 'number' ? `${width}px` : width\n\n    return (\n      <div\n        ref={ref}\n        className={drawerClasses}\n        data-state={open ? 'open' : 'closed'}\n        data-testid={testId}\n        {...rest}\n      >\n        <input\n          id={drawerId}\n          type=\"checkbox\"\n          className=\"drawer-toggle\"\n          checked={open}\n          onChange={handleToggle}\n          aria-label={end ? 'Toggle right sidebar' : 'Toggle sidebar'}\n        />\n        <div className={contentClasses}>{children}</div>\n        <div className=\"drawer-side\" style={{ '--drawer-width': widthStyle } as React.CSSProperties}>\n          <label\n            htmlFor={drawerId}\n            aria-label=\"Close sidebar\"\n            className={overlayClasses}\n          />\n          <div className={sidebarClasses} style={{ width: widthStyle }}>\n            {sidebar}\n          </div>\n        </div>\n      </div>\n    )\n  }\n)\n\nResponsiveDrawer.displayName = 'ResponsiveDrawer'\n"],"names":["ResponsiveDrawer","forwardRef","children","sidebar","open","onOpenChange","end","width","responsive","className","sidebarClassName","contentClassName","overlayClassName","id","testId","rest","ref","autoId","React","drawerId","handleToggle","e","drawerClasses","sidebarClasses","contentClasses","overlayClasses","widthStyle","jsxs","jsx"],"mappings":";;AAoCO,MAAMA,IAAmBC;AAAA,EAC9B,CACE;AAAA,IACE,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,cAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,YAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,kBAAAC,IAAmB;AAAA,IACnB,IAAAC;AAAA,IACA,eAAeC;AAAA,IACf,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAASC,EAAM,MAAA,GACfC,IAAWN,KAAMI,GAEjBG,IAAe,CAACC,MAA2C;AAC/D,MAAAhB,IAAegB,EAAE,OAAO,OAAO;AAAA,IACjC,GAWMC,IAAgB;AAAA,MACpB;AAAA,MACAhB,KAAO;AAAA,MACPE,KAXoE;AAAA,QACpE,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,MAAA,EAMyBA,CAAU;AAAA,MAC1CC;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAELc,IAAiB,CAAC,8BAA8Bb,CAAgB,EACnE,OAAO,OAAO,EACd,KAAK,GAAG,GAELc,IAAiB,CAAC,kBAAkBb,CAAgB,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,GAELc,IAAiB,CAAC,kBAAkBb,CAAgB,EACvD,OAAO,OAAO,EACd,KAAK,GAAG,GAGLc,IAAa,OAAOnB,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAE9D,WACE,gBAAAoB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAX;AAAA,QACA,WAAWM;AAAA,QACX,cAAYlB,IAAO,SAAS;AAAA,QAC5B,eAAaU;AAAA,QACZ,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIT;AAAA,cACJ,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAASf;AAAA,cACT,UAAUgB;AAAA,cACV,cAAYd,IAAM,yBAAyB;AAAA,YAAA;AAAA,UAAA;AAAA,UAE7C,gBAAAsB,EAAC,OAAA,EAAI,WAAWJ,GAAiB,UAAAtB,EAAA,CAAS;AAAA,UAC1C,gBAAAyB,EAAC,SAAI,WAAU,eAAc,OAAO,EAAE,kBAAkBD,KACtD,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAST;AAAA,gBACT,cAAW;AAAA,gBACX,WAAWM;AAAA,cAAA;AAAA,YAAA;AAAA,YAEb,gBAAAG,EAAC,SAAI,WAAWL,GAAgB,OAAO,EAAE,OAAOG,EAAA,GAC7C,UAAAvB,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEAH,EAAiB,cAAc;"}

package/dist/components/Space.js

@@ -21,13 +21,13 @@ const w = {
   evenly: "justify-evenly"
 }, E = ({
   direction: r = "horizontal",
-  size: s = "md",
+  size: s = "sm",
   align: p,
   justify: a,
   wrap: u = !1,
   split: l,
-  className: d = "",
-  style: m,
+  className: m = "",
+  style: d,
   children: e,
   ...g
 }) => {
@@ -38,9 +38,9 @@ const w = {
     y,
     C,
     u ? "flex-wrap" : "",
-    d
+    m
   ].filter(Boolean).join(" "), x = {
-    ...m,
+    ...d,
     ...o ? { gap: `${s}px` } : {}
   };
   return /* @__PURE__ */ f("div", { className: j, style: x, ...g, children: (() => {

package/dist/components/Space.js.map

@@ -1 +1 @@
-{"version":3,"file":"Space.js","sources":["../../src/components/Space.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'horizontal' | 'vertical'\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  split?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst gapClasses = {\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8',\n} as const\n\nconst alignClasses = {\n  start: 'items-start',\n  end: 'items-end',\n  center: 'items-center',\n  baseline: 'items-baseline',\n  stretch: 'items-stretch',\n} as const\n\nconst justifyClasses = {\n  start: 'justify-start',\n  end: 'justify-end',\n  center: 'justify-center',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nexport const Space: React.FC<SpaceProps> = ({\n  direction = 'horizontal',\n  size = 'md',\n  align,\n  justify,\n  wrap = false,\n  split,\n  className = '',\n  style,\n  children,\n  ...rest\n}) => {\n  const isNumericSize = typeof size === 'number'\n  const gapClass = isNumericSize ? '' : gapClasses[size]\n  const effectiveAlign = align ?? (direction === 'vertical' ? 'start' : undefined)\n  const alignClass = effectiveAlign ? alignClasses[effectiveAlign] : ''\n  const justifyClass = justify ? justifyClasses[justify] : ''\n  const wrapClass = wrap ? 'flex-wrap' : ''\n  const directionClass = direction === 'horizontal' ? 'flex-row' : 'flex-col'\n\n  const classes = [\n    'flex',\n    directionClass,\n    gapClass,\n    alignClass,\n    justifyClass,\n    wrapClass,\n    className\n  ].filter(Boolean).join(' ')\n\n  const combinedStyle: React.CSSProperties = {\n    ...style,\n    ...(isNumericSize ? { gap: `${size}px` } : {}),\n  }\n\n  // If split is provided, interleave separator between children\n  const renderChildren = () => {\n    if (!split) return children\n\n    const childArray = React.Children.toArray(children).filter(Boolean)\n    if (childArray.length <= 1) return children\n\n    const result: React.ReactNode[] = []\n    childArray.forEach((child, index) => {\n      result.push(child)\n      if (index < childArray.length - 1) {\n        result.push(\n          <span key={`split-${index}`} className=\"flex-shrink-0\">\n            {split}\n          </span>\n        )\n      }\n    })\n    return result\n  }\n\n  return <div className={classes} style={combinedStyle} {...rest}>{renderChildren()}</div>\n}\n"],"names":["gapClasses","alignClasses","justifyClasses","Space","direction","size","align","justify","wrap","split","className","style","children","rest","isNumericSize","gapClass","effectiveAlign","alignClass","justifyClass","classes","combinedStyle","jsx","childArray","React","result","child","index"],"mappings":";;AAYA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAEMC,IAAiB;AAAA,EACrB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAA8B,CAAC;AAAA,EAC1C,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgB,OAAOT,KAAS,UAChCU,IAAWD,IAAgB,KAAKd,EAAWK,CAAI,GAC/CW,IAAiBV,MAAUF,MAAc,aAAa,UAAU,SAChEa,IAAaD,IAAiBf,EAAae,CAAc,IAAI,IAC7DE,IAAeX,IAAUL,EAAeK,CAAO,IAAI,IAInDY,IAAU;AAAA,IACd;AAAA,IAHqBf,MAAc,eAAe,aAAa;AAAA,IAK/DW;AAAA,IACAE;AAAA,IACAC;AAAA,IARgBV,IAAO,cAAc;AAAA,IAUrCE;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG,GAEpBU,IAAqC;AAAA,IACzC,GAAGT;AAAA,IACH,GAAIG,IAAgB,EAAE,KAAK,GAAGT,CAAI,SAAS,CAAA;AAAA,EAAC;AAwB9C,SAAO,gBAAAgB,EAAC,SAAI,WAAWF,GAAS,OAAOC,GAAgB,GAAGP,GAAO,WApB1C,MAAM;AAC3B,QAAI,CAACJ,EAAO,QAAOG;AAEnB,UAAMU,IAAaC,EAAM,SAAS,QAAQX,CAAQ,EAAE,OAAO,OAAO;AAClE,QAAIU,EAAW,UAAU,EAAG,QAAOV;AAEnC,UAAMY,IAA4B,CAAA;AAClC,WAAAF,EAAW,QAAQ,CAACG,GAAOC,MAAU;AACnC,MAAAF,EAAO,KAAKC,CAAK,GACbC,IAAQJ,EAAW,SAAS,KAC9BE,EAAO;AAAA,0BACJ,QAAA,EAA4B,WAAU,iBACpC,UAAAf,KADQ,SAASiB,CAAK,EAEzB;AAAA,MAAA;AAAA,IAGN,CAAC,GACMF;AAAA,EACT,GAEiE,EAAe,CAAE;AACpF;"}
+{"version":3,"file":"Space.js","sources":["../../src/components/Space.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface SpaceProps extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'horizontal' | 'vertical'\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'\n  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  split?: React.ReactNode\n  children: React.ReactNode\n}\n\nconst gapClasses = {\n  xs: 'gap-1',\n  sm: 'gap-2',\n  md: 'gap-4',\n  lg: 'gap-6',\n  xl: 'gap-8',\n} as const\n\nconst alignClasses = {\n  start: 'items-start',\n  end: 'items-end',\n  center: 'items-center',\n  baseline: 'items-baseline',\n  stretch: 'items-stretch',\n} as const\n\nconst justifyClasses = {\n  start: 'justify-start',\n  end: 'justify-end',\n  center: 'justify-center',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nexport const Space: React.FC<SpaceProps> = ({\n  direction = 'horizontal',\n  size = 'sm',\n  align,\n  justify,\n  wrap = false,\n  split,\n  className = '',\n  style,\n  children,\n  ...rest\n}) => {\n  const isNumericSize = typeof size === 'number'\n  const gapClass = isNumericSize ? '' : gapClasses[size]\n  const effectiveAlign = align ?? (direction === 'vertical' ? 'start' : undefined)\n  const alignClass = effectiveAlign ? alignClasses[effectiveAlign] : ''\n  const justifyClass = justify ? justifyClasses[justify] : ''\n  const wrapClass = wrap ? 'flex-wrap' : ''\n  const directionClass = direction === 'horizontal' ? 'flex-row' : 'flex-col'\n\n  const classes = [\n    'flex',\n    directionClass,\n    gapClass,\n    alignClass,\n    justifyClass,\n    wrapClass,\n    className\n  ].filter(Boolean).join(' ')\n\n  const combinedStyle: React.CSSProperties = {\n    ...style,\n    ...(isNumericSize ? { gap: `${size}px` } : {}),\n  }\n\n  // If split is provided, interleave separator between children\n  const renderChildren = () => {\n    if (!split) return children\n\n    const childArray = React.Children.toArray(children).filter(Boolean)\n    if (childArray.length <= 1) return children\n\n    const result: React.ReactNode[] = []\n    childArray.forEach((child, index) => {\n      result.push(child)\n      if (index < childArray.length - 1) {\n        result.push(\n          <span key={`split-${index}`} className=\"flex-shrink-0\">\n            {split}\n          </span>\n        )\n      }\n    })\n    return result\n  }\n\n  return <div className={classes} style={combinedStyle} {...rest}>{renderChildren()}</div>\n}\n"],"names":["gapClasses","alignClasses","justifyClasses","Space","direction","size","align","justify","wrap","split","className","style","children","rest","isNumericSize","gapClass","effectiveAlign","alignClass","justifyClass","classes","combinedStyle","jsx","childArray","React","result","child","index"],"mappings":";;AAYA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAe;AAAA,EACnB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX,GAEMC,IAAiB;AAAA,EACrB,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV,GAEaC,IAA8B,CAAC;AAAA,EAC1C,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgB,OAAOT,KAAS,UAChCU,IAAWD,IAAgB,KAAKd,EAAWK,CAAI,GAC/CW,IAAiBV,MAAUF,MAAc,aAAa,UAAU,SAChEa,IAAaD,IAAiBf,EAAae,CAAc,IAAI,IAC7DE,IAAeX,IAAUL,EAAeK,CAAO,IAAI,IAInDY,IAAU;AAAA,IACd;AAAA,IAHqBf,MAAc,eAAe,aAAa;AAAA,IAK/DW;AAAA,IACAE;AAAA,IACAC;AAAA,IARgBV,IAAO,cAAc;AAAA,IAUrCE;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG,GAEpBU,IAAqC;AAAA,IACzC,GAAGT;AAAA,IACH,GAAIG,IAAgB,EAAE,KAAK,GAAGT,CAAI,SAAS,CAAA;AAAA,EAAC;AAwB9C,SAAO,gBAAAgB,EAAC,SAAI,WAAWF,GAAS,OAAOC,GAAgB,GAAGP,GAAO,WApB1C,MAAM;AAC3B,QAAI,CAACJ,EAAO,QAAOG;AAEnB,UAAMU,IAAaC,EAAM,SAAS,QAAQX,CAAQ,EAAE,OAAO,OAAO;AAClE,QAAIU,EAAW,UAAU,EAAG,QAAOV;AAEnC,UAAMY,IAA4B,CAAA;AAClC,WAAAF,EAAW,QAAQ,CAACG,GAAOC,MAAU;AACnC,MAAAF,EAAO,KAAKC,CAAK,GACbC,IAAQJ,EAAW,SAAS,KAC9BE,EAAO;AAAA,0BACJ,QAAA,EAA4B,WAAU,iBACpC,UAAAf,KADQ,SAASiB,CAAK,EAEzB;AAAA,MAAA;AAAA,IAGN,CAAC,GACMF;AAAA,EACT,GAEiE,EAAe,CAAE;AACpF;"}

package/dist/index.d.ts

@@ -47,9 +47,9 @@ export type { DockProps, DockItemProps, DockItemConfig } from './components/Dock
 export { Divider } from './components/Divider';
 export type { DividerProps } from './components/Divider';
 export { Drawer } from './components/Drawer';
-export type { DrawerProps, DrawerPlacement, DrawerSize } from './components/Drawer';
-export { SidebarDrawer } from './components/SidebarDrawer';
-export type { SidebarDrawerProps } from './components/SidebarDrawer';
+export type { DrawerProps, DrawerRef, DrawerPlacement, DrawerSize, DrawerPushConfig } from './components/Drawer';
+export { ResponsiveDrawer } from './components/ResponsiveDrawer';
+export type { ResponsiveDrawerProps, ResponsiveDrawerBreakpoint } from './components/ResponsiveDrawer';
 export { Fieldset } from './components/Fieldset';
 export type { FieldsetProps, FieldsetLegendProps } from './components/Fieldset';
 export { FileInput } from './components/FileInput';
@@ -85,7 +85,7 @@ export type { JoinProps } from './components/Join';
 export { Kbd } from './components/Kbd';
 export type { KbdProps } from './components/Kbd';
 export { Layout, useSiderContext } from './components/Layout';
-export type { LayoutProps, LayoutHeaderProps, LayoutFooterProps, LayoutContentProps, LayoutSiderProps } from './components/Layout';
+export type { LayoutProps, LayoutHeaderProps, LayoutFooterProps, LayoutContentProps, LayoutSiderProps, SiderTheme, SiderCollapsedType } from './components/Layout';
 export { List } from './components/List';
 export type { ListProps, ListRowProps, ListItemProps, ListItemMetaProps, ListPaginationConfig, ListGridConfig } from './components/List';
 export { Loading } from './components/Loading';
@@ -116,8 +116,6 @@ export { OTPInput } from './components/OTPInput';
 export type { OTPInputProps, OTPInputRef } from './components/OTPInput';
 export { Pagination } from './components/Pagination';
 export type { PaginationProps } from './components/Pagination';
-export { PageLayout } from './components/PageLayout';
-export type { PageLayoutProps } from './components/PageLayout';
 export { Popconfirm } from './components/Popconfirm';
 export type { PopconfirmProps } from './components/Popconfirm';
 export { Popover } from './components/Popover';

package/dist/index.js

@@ -3,17 +3,17 @@ import { Anchor as p } from "./components/Anchor.js";
 import { Alert as f } from "./components/Alert.js";
 import { Autocomplete as a } from "./components/Autocomplete.js";
 import { Avatar as n, AvatarGroup as s } from "./components/Avatar.js";
-import { Badge as l } from "./components/Badge.js";
-import { Breadcrumb as c } from "./components/Breadcrumb.js";
+import { Badge as u } from "./components/Badge.js";
+import { Breadcrumb as d } from "./components/Breadcrumb.js";
 import { Button as T } from "./components/Button.js";
 import { CopyButton as S } from "./components/CopyButton.js";
-import { Checkbox as b } from "./components/Checkbox.js";
-import { Chat as y } from "./components/Chat.js";
-import { ColorPicker as v } from "./components/ColorPicker.js";
-import { Card as h } from "./components/Card.js";
-import { Cascader as R } from "./components/Cascader.js";
+import { Checkbox as k } from "./components/Checkbox.js";
+import { Chat as v } from "./components/Chat.js";
+import { ColorPicker as w } from "./components/ColorPicker.js";
+import { Card as R } from "./components/Card.js";
+import { Cascader as F } from "./components/Cascader.js";
 import { Carousel as A } from "./components/Carousel.js";
-import { Collapse as L } from "./components/Collapse.js";
+import { Collapse as M } from "./components/Collapse.js";
 import { Container as H } from "./components/Container.js";
 import { ContextMenu as K } from "./components/ContextMenu.js";
 import { Countdown as N } from "./components/Countdown.js";
@@ -23,22 +23,22 @@ import { Diff as j } from "./components/Diff.js";
 import { Dock as Q } from "./components/Dock.js";
 import { Divider as X } from "./components/Divider.js";
 import { Drawer as Z } from "./components/Drawer.js";
-import { SidebarDrawer as $ } from "./components/SidebarDrawer.js";
+import { ResponsiveDrawer as $ } from "./components/ResponsiveDrawer.js";
 import { Fieldset as ro } from "./components/Fieldset.js";
 import { FileInput as to } from "./components/FileInput.js";
 import { Filter as mo } from "./components/Filter.js";
 import { Flex as xo } from "./components/Flex.js";
 import { FloatButton as io } from "./components/FloatButton.js";
 import { Footer as so } from "./components/Footer.js";
-import { Form as lo, useFormInstance as co } from "./components/Form.js";
+import { Form as uo, useFormInstance as co } from "./components/Form.js";
 import { Col as To, Grid as go, Row as So } from "./components/Grid.js";
-import { Hero as bo } from "./components/Hero.js";
-import { HoverGallery as yo } from "./components/HoverGallery.js";
-import { Image as vo } from "./components/Image.js";
-import { Dropdown as ho } from "./components/Dropdown.js";
-import { Empty as Ro } from "./components/Empty.js";
+import { Hero as ko } from "./components/Hero.js";
+import { HoverGallery as vo } from "./components/HoverGallery.js";
+import { Image as wo } from "./components/Image.js";
+import { Dropdown as Ro } from "./components/Dropdown.js";
+import { Empty as Fo } from "./components/Empty.js";
 import { Input as Ao } from "./components/Input.js";
-import { InputNumber as Lo } from "./components/InputNumber.js";
+import { InputNumber as Mo } from "./components/InputNumber.js";
 import { Join as Ho } from "./components/Join.js";
 import { Kbd as Ko } from "./components/Kbd.js";
 import { Layout as No, useSiderContext as Oo } from "./components/Layout.js";
@@ -54,54 +54,53 @@ import { Phone as pr } from "./components/Phone.js";
 import { Window as fr } from "./components/Window.js";
 import { Modal as ar } from "./components/Modal.js";
 import { Navbar as nr } from "./components/Navbar.js";
-import { notification as ur } from "./components/Notification.js";
-import { OTPInput as dr } from "./components/OTPInput.js";
+import { notification as lr } from "./components/Notification.js";
+import { OTPInput as cr } from "./components/OTPInput.js";
 import { Pagination as Cr } from "./components/Pagination.js";
-import { PageLayout as gr } from "./components/PageLayout.js";
-import { Popconfirm as Pr } from "./components/Popconfirm.js";
-import { Popover as kr } from "./components/Popover.js";
-import { Progress as Dr } from "./components/Progress.js";
-import { Radio as wr } from "./components/Radio.js";
-import { RadialProgress as Fr } from "./components/RadialProgress.js";
-import { Range as Br } from "./components/Range.js";
-import { Rating as Ir } from "./components/Rating.js";
-import { Result as Mr } from "./components/Result.js";
-import { Select as Gr } from "./components/Select.js";
-import { Segmented as Wr } from "./components/Segmented.js";
-import { Skeleton as Or } from "./components/Skeleton.js";
-import { Space as Er } from "./components/Space.js";
-import { Splitter as Ur } from "./components/Splitter.js";
-import { Stats as qr } from "./components/Stat.js";
-import { Status as Vr } from "./components/Status.js";
-import { Steps as Yr } from "./components/Steps.js";
-import { Table as _r } from "./components/Table.js";
-import { Tabs as oe } from "./components/Tabs.js";
-import { Textarea as ee } from "./components/Textarea.js";
-import { TextRotate as pe } from "./components/TextRotate.js";
-import { CheckableTag as fe, Tag as xe, TagLiveRegion as ae } from "./components/Tag.js";
-import { ThemeController as ne } from "./components/ThemeController.js";
-import { TimePicker as ue } from "./components/TimePicker.js";
-import { Timeline as de } from "./components/Timeline.js";
-import { Toggle as Ce } from "./components/Toggle.js";
-import { Tour as ge } from "./components/Tour.js";
-import { Tooltip as Pe } from "./components/Tooltip.js";
-import { Transfer as ke } from "./components/Transfer.js";
-import { Tree as De } from "./components/Tree.js";
-import { TreeSelect as we, TreeSelectComponent as he } from "./components/TreeSelect.js";
+import { Popconfirm as gr } from "./components/Popconfirm.js";
+import { Popover as Pr } from "./components/Popover.js";
+import { Progress as br } from "./components/Progress.js";
+import { Radio as Dr } from "./components/Radio.js";
+import { RadialProgress as yr } from "./components/RadialProgress.js";
+import { Range as hr } from "./components/Range.js";
+import { Rating as Br } from "./components/Rating.js";
+import { Result as Ir } from "./components/Result.js";
+import { Select as Lr } from "./components/Select.js";
+import { Segmented as Gr } from "./components/Segmented.js";
+import { Skeleton as Wr } from "./components/Skeleton.js";
+import { Space as Or } from "./components/Space.js";
+import { Splitter as Er } from "./components/Splitter.js";
+import { Stats as Ur } from "./components/Stat.js";
+import { Status as qr } from "./components/Status.js";
+import { Steps as Vr } from "./components/Steps.js";
+import { Table as Yr } from "./components/Table.js";
+import { Tabs as _r } from "./components/Tabs.js";
+import { Textarea as oe } from "./components/Textarea.js";
+import { TextRotate as ee } from "./components/TextRotate.js";
+import { CheckableTag as pe, Tag as me, TagLiveRegion as fe } from "./components/Tag.js";
+import { ThemeController as ae } from "./components/ThemeController.js";
+import { TimePicker as ne } from "./components/TimePicker.js";
+import { Timeline as le } from "./components/Timeline.js";
+import { Toggle as ce } from "./components/Toggle.js";
+import { Tour as Ce } from "./components/Tour.js";
+import { Tooltip as ge } from "./components/Tooltip.js";
+import { Transfer as Pe } from "./components/Transfer.js";
+import { Tree as be } from "./components/Tree.js";
+import { TreeSelect as De, TreeSelectComponent as we } from "./components/TreeSelect.js";
 import { Typography as Re } from "./components/Typography.js";
-import { Upload as Ae } from "./components/Upload.js";
-import { Watermark as Le } from "./components/Watermark.js";
-import { Hide as He, Show as Ge } from "./components/Responsive.js";
-import { useBreakpoint as We } from "./hooks/useBreakpoint.js";
-import { useDisclosure as Oe } from "./hooks/useDisclosure.js";
-import { useClipboard as Ee } from "./hooks/useClipboard.js";
-import { useLocalStorage as Ue } from "./hooks/useLocalStorage.js";
-import { useDebounce as qe } from "./hooks/useDebounce.js";
-import { useClickOutside as Ve } from "./hooks/useClickOutside.js";
-import { usePrevious as Ye } from "./hooks/usePrevious.js";
-import { useHover as _e } from "./hooks/useHover.js";
-import { useKeyPress as ot, useKeyPressCallback as rt } from "./hooks/useKeyPress.js";
-import { useWindowSize as tt } from "./hooks/useWindowSize.js";
+import { Upload as Fe } from "./components/Upload.js";
+import { Watermark as Ae } from "./components/Watermark.js";
+import { Hide as Me, Show as Le } from "./components/Responsive.js";
+import { useBreakpoint as Ge } from "./hooks/useBreakpoint.js";
+import { useDisclosure as We } from "./hooks/useDisclosure.js";
+import { useClipboard as Oe } from "./hooks/useClipboard.js";
+import { useLocalStorage as Ee } from "./hooks/useLocalStorage.js";
+import { useDebounce as Ue } from "./hooks/useDebounce.js";
+import { useClickOutside as qe } from "./hooks/useClickOutside.js";
+import { usePrevious as Ve } from "./hooks/usePrevious.js";
+import { useHover as Ye } from "./hooks/useHover.js";
+import { useKeyPress as _e, useKeyPressCallback as $e } from "./hooks/useKeyPress.js";
+import { useWindowSize as rt } from "./hooks/useWindowSize.js";
 export {
   e as Affix,
   f as Alert,
@@ -109,20 +108,20 @@ export {
   a as Autocomplete,
   n as Avatar,
   s as AvatarGroup,
-  l as Badge,
-  c as Breadcrumb,
+  u as Badge,
+  d as Breadcrumb,
   or as Browser,
   T as Button,
-  h as Card,
+  R as Card,
   A as Carousel,
-  R as Cascader,
-  y as Chat,
-  fe as CheckableTag,
-  b as Checkbox,
+  F as Cascader,
+  v as Chat,
+  pe as CheckableTag,
+  k as Checkbox,
   er as Code,
   To as Col,
-  L as Collapse,
-  v as ColorPicker,
+  M as Collapse,
+  w as ColorPicker,
   H as Container,
   K as ContextMenu,
   S as CopyButton,
@@ -133,22 +132,22 @@ export {
   X as Divider,
   Q as Dock,
   Z as Drawer,
-  ho as Dropdown,
-  Ro as Empty,
+  Ro as Dropdown,
+  Fo as Empty,
   ro as Fieldset,
   to as FileInput,
   mo as Filter,
   xo as Flex,
   io as FloatButton,
   so as Footer,
-  lo as Form,
+  uo as Form,
   go as Grid,
-  bo as Hero,
-  He as Hide,
-  yo as HoverGallery,
-  vo as Image,
+  ko as Hero,
+  Me as Hide,
+  vo as HoverGallery,
+  wo as Image,
   Ao as Input,
-  Lo as InputNumber,
+  Mo as InputNumber,
   Ho as Join,
   Ko as Kbd,
   No as Layout,
@@ -160,62 +159,61 @@ export {
   _o as Menu,
   ar as Modal,
   nr as Navbar,
-  dr as OTPInput,
-  gr as PageLayout,
+  cr as OTPInput,
   Cr as Pagination,
   pr as Phone,
-  Pr as Popconfirm,
-  kr as Popover,
-  Dr as Progress,
-  Fr as RadialProgress,
-  wr as Radio,
-  Br as Range,
-  Ir as Rating,
-  Mr as Result,
+  gr as Popconfirm,
+  Pr as Popover,
+  br as Progress,
+  yr as RadialProgress,
+  Dr as Radio,
+  hr as Range,
+  Br as Rating,
+  $ as ResponsiveDrawer,
+  Ir as Result,
   So as Row,
-  Wr as Segmented,
-  Gr as Select,
-  Ge as Show,
-  $ as SidebarDrawer,
-  Or as Skeleton,
-  Er as Space,
-  Ur as Splitter,
-  qr as Stats,
-  Vr as Status,
-  Yr as Steps,
-  _r as Table,
-  oe as Tabs,
-  xe as Tag,
-  ae as TagLiveRegion,
-  pe as TextRotate,
-  ee as Textarea,
-  ne as ThemeController,
-  ue as TimePicker,
-  de as Timeline,
-  Ce as Toggle,
-  Pe as Tooltip,
-  ge as Tour,
-  ke as Transfer,
-  De as Tree,
-  we as TreeSelect,
-  he as TreeSelectComponent,
+  Gr as Segmented,
+  Lr as Select,
+  Le as Show,
+  Wr as Skeleton,
+  Or as Space,
+  Er as Splitter,
+  Ur as Stats,
+  qr as Status,
+  Vr as Steps,
+  Yr as Table,
+  _r as Tabs,
+  me as Tag,
+  fe as TagLiveRegion,
+  ee as TextRotate,
+  oe as Textarea,
+  ae as ThemeController,
+  ne as TimePicker,
+  le as Timeline,
+  ce as Toggle,
+  ge as Tooltip,
+  Ce as Tour,
+  Pe as Transfer,
+  be as Tree,
+  De as TreeSelect,
+  we as TreeSelectComponent,
   Re as Typography,
-  Ae as Upload,
-  Le as Watermark,
+  Fe as Upload,
+  Ae as Watermark,
   fr as Window,
-  ur as notification,
-  We as useBreakpoint,
-  Ve as useClickOutside,
-  Ee as useClipboard,
-  qe as useDebounce,
-  Oe as useDisclosure,
+  lr as notification,
+  Ge as useBreakpoint,
+  qe as useClickOutside,
+  Oe as useClipboard,
+  Ue as useDebounce,
+  We as useDisclosure,
   co as useFormInstance,
-  _e as useHover,
-  ot as useKeyPress,
-  rt as useKeyPressCallback,
-  Ue as useLocalStorage,
-  Ye as usePrevious,
+  Ye as useHover,
+  _e as useKeyPress,
+  $e as useKeyPressCallback,
+  Ee as useLocalStorage,
+  Ve as usePrevious,
   Oo as useSiderContext,
-  tt as useWindowSize
+  rt as useWindowSize
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.32",
+  "version": "0.12.35",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {

package/dist/components/PageLayout.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-export interface PageLayoutProps {
-    children: React.ReactNode;
-    background?: 'base-100' | 'base-200' | 'base-300' | 'neutral';
-    padding?: 'none' | 'sm' | 'md' | 'lg';
-    minHeight?: 'screen' | 'full' | 'auto';
-    className?: string;
-}
-export declare const PageLayout: React.FC<PageLayoutProps>;

package/dist/components/PageLayout.js

@@ -1,35 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-const i = ({
-  children: s,
-  background: e = "base-200",
-  padding: a = "md",
-  minHeight: n = "screen",
-  className: t = ""
-}) => {
-  const o = {
-    "base-100": "bg-base-100",
-    "base-200": "bg-base-200",
-    "base-300": "bg-base-300",
-    neutral: "bg-neutral"
-  }, l = {
-    none: "",
-    sm: "p-4",
-    md: "p-8",
-    lg: "p-12"
-  }, b = {
-    screen: "min-h-screen",
-    full: "min-h-full",
-    auto: ""
-  }, c = [
-    o[e],
-    l[a],
-    b[n],
-    "text-base-content",
-    t
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", { className: c, children: s });
-};
-export {
-  i as PageLayout
-};
-//# sourceMappingURL=PageLayout.js.map

package/dist/components/PageLayout.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageLayout.js","sources":["../../src/components/PageLayout.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface PageLayoutProps {\n  children: React.ReactNode\n  background?: 'base-100' | 'base-200' | 'base-300' | 'neutral'\n  padding?: 'none' | 'sm' | 'md' | 'lg'\n  minHeight?: 'screen' | 'full' | 'auto'\n  className?: string\n}\n\nexport const PageLayout: React.FC<PageLayoutProps> = ({\n  children,\n  background = 'base-200',\n  padding = 'md',\n  minHeight = 'screen',\n  className = '',\n}) => {\n  const backgroundClasses = {\n    'base-100': 'bg-base-100',\n    'base-200': 'bg-base-200',\n    'base-300': 'bg-base-300',\n    neutral: 'bg-neutral',\n  }\n\n  const paddingClasses = {\n    none: '',\n    sm: 'p-4',\n    md: 'p-8',\n    lg: 'p-12',\n  }\n\n  const minHeightClasses = {\n    screen: 'min-h-screen',\n    full: 'min-h-full',\n    auto: '',\n  }\n\n  const classes = [\n    backgroundClasses[background],\n    paddingClasses[padding],\n    minHeightClasses[minHeight],\n    'text-base-content',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return <div className={classes}>{children}</div>\n}\n"],"names":["PageLayout","children","background","padding","minHeight","className","backgroundClasses","paddingClasses","minHeightClasses","classes","jsx"],"mappings":";AAUO,MAAMA,IAAwC,CAAC;AAAA,EACpD,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAoB;AAAA,IACxB,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,SAAS;AAAA,EAAA,GAGLC,IAAiB;AAAA,IACrB,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA,GAGAC,IAAmB;AAAA,IACvB,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,EAAA,GAGFC,IAAU;AAAA,IACdH,EAAkBJ,CAAU;AAAA,IAC5BK,EAAeJ,CAAO;AAAA,IACtBK,EAAiBJ,CAAS;AAAA,IAC1B;AAAA,IACAC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAO,gBAAAK,EAAC,OAAA,EAAI,WAAWD,GAAU,UAAAR,EAAA,CAAS;AAC5C;"}

package/dist/components/SidebarDrawer.d.ts

@@ -1,21 +0,0 @@
-import { default as React } from 'react';
-export interface SidebarDrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-    /** Main content area */
-    children: React.ReactNode;
-    /** Sidebar content */
-    sidebar: React.ReactNode;
-    /** Controlled open state */
-    open?: boolean;
-    /** Callback when open state changes */
-    onOpenChange?: (open: boolean) => void;
-    /** Position sidebar on the right side */
-    end?: boolean;
-    /** Additional classes for sidebar container */
-    sidebarClassName?: string;
-}
-/**
- * SidebarDrawer - A responsive sidebar layout component using DaisyUI's drawer.
- * Use for navigation sidebars that toggle on mobile.
- * For overlay panel drawers (forms, details), use the Drawer component instead.
- */
-export declare const SidebarDrawer: React.FC<SidebarDrawerProps>;

package/dist/components/SidebarDrawer.js

@@ -1,44 +0,0 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import f from "react";
-const N = ({
-  children: l,
-  sidebar: d,
-  open: a = !1,
-  onOpenChange: o,
-  end: c = !1,
-  className: t = "",
-  sidebarClassName: n = "",
-  ...i
-}) => {
-  const r = f.useId(), m = (b) => {
-    o?.(b.target.checked);
-  }, h = ["drawer", c && "drawer-end", t].filter(Boolean).join(" "), w = ["menu bg-base-200 min-h-full w-80 p-4", n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ s("div", { className: h, "data-state": a ? "open" : "closed", ...i, children: [
-    /* @__PURE__ */ e(
-      "input",
-      {
-        id: r,
-        type: "checkbox",
-        className: "drawer-toggle",
-        checked: a,
-        onChange: m
-      }
-    ),
-    /* @__PURE__ */ e("div", { className: "drawer-content", children: l }),
-    /* @__PURE__ */ s("div", { className: "drawer-side", children: [
-      /* @__PURE__ */ e(
-        "label",
-        {
-          htmlFor: r,
-          "aria-label": "close sidebar",
-          className: "drawer-overlay"
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: w, children: d })
-    ] })
-  ] });
-};
-export {
-  N as SidebarDrawer
-};
-//# sourceMappingURL=SidebarDrawer.js.map