asterui 0.12.32 → 0.12.33

package/dist/components/Layout.d.ts

@@ -1,37 +1,56 @@
 import { default as React } from 'react';
-export interface LayoutProps {
+export type SiderTheme = 'light' | 'dark';
+export type SiderCollapsedType = 'clickTrigger' | 'responsive';
+export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+    /** Whether contains Sider (auto-detected if not specified) */
+    hasSider?: boolean;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
-export interface LayoutHeaderProps {
+export interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
-export interface LayoutFooterProps {
+export interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
-export interface LayoutContentProps {
+export interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
-export interface LayoutSiderProps {
+export interface LayoutSiderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
     children: React.ReactNode;
+    /** Width of the sider */
     width?: number | string;
+    /** Width when collapsed */
     collapsedWidth?: number | string;
+    /** Controlled collapsed state */
     collapsed?: boolean;
+    /** Initial collapsed state (uncontrolled) */
     defaultCollapsed?: boolean;
+    /** Whether can be collapsed */
     collapsible?: boolean;
-    onCollapse?: (collapsed: boolean) => void;
+    /** Callback when collapse state changes */
+    onCollapse?: (collapsed: boolean, type: SiderCollapsedType) => void;
+    /** Custom trigger element (null to hide) */
     trigger?: React.ReactNode | null;
+    /** Responsive breakpoint for auto-collapse */
     breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Callback when breakpoint is crossed */
     onBreakpoint?: (broken: boolean) => void;
-    className?: string;
-    style?: React.CSSProperties;
+    /** Reverse direction of arrow (for right-side sider) */
+    reverseArrow?: boolean;
+    /** Color theme of the sider */
+    theme?: SiderTheme;
+    /** Style for zero-width trigger */
+    zeroWidthTriggerStyle?: React.CSSProperties;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
 interface SiderContextValue {
     collapsed: boolean;
@@ -39,21 +58,10 @@ interface SiderContextValue {
     width: number | string;
 }
 export declare function useSiderContext(): SiderContextValue | null;
-declare function LayoutRoot({ children, className, style }: LayoutProps): import("react/jsx-runtime").JSX.Element;
-declare namespace LayoutRoot {
-    var displayName: string;
-}
-declare function LayoutHeader({ children, className, style }: LayoutHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function LayoutFooter({ children, className, style }: LayoutFooterProps): import("react/jsx-runtime").JSX.Element;
-declare function LayoutContent({ children, className, style }: LayoutContentProps): import("react/jsx-runtime").JSX.Element;
-declare function LayoutSider({ children, width, collapsedWidth, collapsed: controlledCollapsed, defaultCollapsed, collapsible, onCollapse, trigger, breakpoint, onBreakpoint, className, style, }: LayoutSiderProps): import("react/jsx-runtime").JSX.Element;
-declare namespace LayoutSider {
-    var displayName: string;
-}
-export declare const Layout: typeof LayoutRoot & {
-    Header: typeof LayoutHeader;
-    Footer: typeof LayoutFooter;
-    Content: typeof LayoutContent;
-    Sider: typeof LayoutSider;
+export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.ForwardRefExoticComponent<LayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+    Footer: React.ForwardRefExoticComponent<LayoutFooterProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<LayoutContentProps & React.RefAttributes<HTMLElement>>;
+    Sider: React.ForwardRefExoticComponent<LayoutSiderProps & React.RefAttributes<HTMLElement>>;
 };
 export {};

package/dist/components/Layout.js

@@ -1,140 +1,188 @@
-import { jsx as o, jsxs as A } from "react/jsx-runtime";
-import d, { useContext as M, createContext as P, useState as C, useEffect as $, useCallback as F } from "react";
-const L = P(null);
-function Q() {
-  return M(L);
+import { jsx as a, jsxs as Q } from "react/jsx-runtime";
+import N, { forwardRef as y, useContext as Z, createContext as _, useState as S, useEffect as q, useCallback as G } from "react";
+const B = _(null);
+function I() {
+  return Z(B);
 }
-function h({ children: n, className: s = "", style: a }) {
-  const e = d.Children.toArray(n), f = e.some(
-    (t) => d.isValidElement(t) && t.type.displayName === "LayoutSider"
-  ), m = [
-    "flex",
-    "min-h-0",
-    f ? "flex-row" : "flex-col",
-    s
-  ].filter(Boolean).join(" "), r = f ? e.map((t) => {
-    if (d.isValidElement(t) && (t.type === h || t.type.displayName === "LayoutRoot") && t.type.displayName !== "LayoutSider") {
-      const i = t.props.className || "";
-      if (!i.includes("flex-1"))
-        return d.cloneElement(t, {
-          className: `flex-1 ${i}`.trim()
-        });
-    }
-    return t;
-  }) : n;
-  return /* @__PURE__ */ o("div", { className: m, style: a, children: r });
-}
-h.displayName = "LayoutRoot";
-function H({ children: n, className: s = "", style: a }) {
-  const e = [
-    "flex",
-    "items-center",
-    "px-6",
-    "h-16",
-    "bg-base-300",
-    "flex-shrink-0",
-    s
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o("header", { className: e, style: a, children: n });
-}
-function I({ children: n, className: s = "", style: a }) {
-  const e = [
-    "px-6",
-    "py-4",
-    "text-center",
-    "bg-base-300",
-    "flex-shrink-0",
-    s
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o("footer", { className: e, style: a, children: n });
-}
-function O({ children: n, className: s = "", style: a }) {
-  const e = ["flex-1", "min-h-0", "overflow-auto", s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ o("main", { className: e, style: a, children: n });
-}
-const T = {
+const v = y(
+  ({ children: s, hasSider: o, className: n = "", "data-testid": e, ...l }, r) => {
+    const d = N.Children.toArray(s), f = d.some(
+      (t) => N.isValidElement(t) && t.type.displayName === "LayoutSider"
+    ), c = o ?? f, p = [
+      "flex",
+      "min-h-0",
+      c ? "flex-row" : "flex-col",
+      n
+    ].filter(Boolean).join(" "), b = c ? d.map((t) => {
+      if (N.isValidElement(t) && (t.type === v || t.type.displayName === "LayoutRoot") && t.type.displayName !== "LayoutSider") {
+        const g = t.props.className || "";
+        if (!g.includes("flex-1"))
+          return N.cloneElement(t, {
+            className: `flex-1 ${g}`.trim()
+          });
+      }
+      return t;
+    }) : s;
+    return /* @__PURE__ */ a("div", { ref: r, className: p, "data-testid": e, ...l, children: b });
+  }
+);
+v.displayName = "LayoutRoot";
+const E = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = [
+      "flex",
+      "items-center",
+      "px-6",
+      "h-16",
+      "bg-base-300",
+      "flex-shrink-0",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("header", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+E.displayName = "LayoutHeader";
+const R = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = [
+      "px-6",
+      "py-4",
+      "text-center",
+      "bg-base-300",
+      "flex-shrink-0",
+      o
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("footer", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+R.displayName = "LayoutFooter";
+const $ = y(
+  ({ children: s, className: o = "", "data-testid": n, ...e }, l) => {
+    const r = ["flex-1", "min-h-0", "overflow-auto", o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ a("main", { ref: l, className: r, "data-testid": n, ...e, children: s });
+  }
+);
+$.displayName = "LayoutContent";
+const J = {
   sm: "(max-width: 639px)",
   md: "(max-width: 767px)",
   lg: "(max-width: 1023px)",
   xl: "(max-width: 1279px)",
   "2xl": "(max-width: 1535px)"
-};
-function v({
-  children: n,
-  width: s = 200,
-  collapsedWidth: a = 80,
-  collapsed: e,
-  defaultCollapsed: f = !1,
-  collapsible: m = !1,
-  onCollapse: r,
-  trigger: t,
-  breakpoint: i,
-  onBreakpoint: p,
-  className: w = "",
-  style: g
-}) {
-  const [j, N] = C(f), [b, k] = C(!1), l = e ?? j;
-  $(() => {
-    if (!i) return;
-    const c = window.matchMedia(T[i]), y = (R) => {
-      const u = R.matches;
-      k(u), p?.(u), e === void 0 && N(u), u !== b && r?.(u);
-    };
-    return y(c), c.addEventListener("change", y), () => c.removeEventListener("change", y);
-  }, [i, p, e, r, b]);
-  const S = F(() => {
-    const c = !l;
-    e === void 0 && N(c), r?.(c);
-  }, [l, e, r]), x = l ? a : s, B = [
-    "flex",
-    "flex-col",
-    "bg-base-200",
-    "flex-shrink-0",
-    "transition-all",
-    "duration-200",
-    w
-  ].filter(Boolean).join(" "), E = m && t !== null && /* @__PURE__ */ o(
-    "button",
-    {
-      onClick: S,
-      className: "flex items-center justify-center h-10 w-full bg-base-300 hover:bg-base-content/10 transition-colors",
-      "aria-label": l ? "Expand sidebar" : "Collapse sidebar",
-      children: /* @__PURE__ */ o(
-        "svg",
-        {
-          className: `w-4 h-4 transition-transform ${l ? "rotate-180" : ""}`,
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ o(L.Provider, { value: { collapsed: l, collapsedWidth: a, width: s }, children: /* @__PURE__ */ A(
-    "aside",
-    {
-      className: B,
-      style: {
-        width: typeof x == "number" ? `${x}px` : x,
-        ...g
-      },
-      children: [
-        /* @__PURE__ */ o("div", { className: "flex-1 overflow-auto", children: n }),
-        t !== null && (t ?? E)
-      ]
-    }
-  ) });
-}
-v.displayName = "LayoutSider";
-const W = Object.assign(h, {
-  Header: H,
-  Footer: I,
-  Content: O,
-  Sider: v
+}, A = y(
+  ({
+    children: s,
+    width: o = 200,
+    collapsedWidth: n = 80,
+    collapsed: e,
+    defaultCollapsed: l = !1,
+    collapsible: r = !1,
+    onCollapse: d,
+    trigger: f,
+    breakpoint: c,
+    onBreakpoint: p,
+    reverseArrow: b = !1,
+    theme: t = "dark",
+    zeroWidthTriggerStyle: g,
+    className: M = "",
+    style: T,
+    "data-testid": x,
+    ...W
+  }, z) => {
+    const [F, L] = S(l), [w, H] = S(!1), i = e ?? F;
+    q(() => {
+      if (!c) return;
+      const m = window.matchMedia(J[c]), C = (K) => {
+        const h = K.matches;
+        H(h), p?.(h), e === void 0 && L(h), h !== w && d?.(h, "responsive");
+      };
+      return C(m), m.addEventListener("change", C), () => m.removeEventListener("change", C);
+    }, [c, p, e, d, w]);
+    const k = G(() => {
+      const m = !i;
+      e === void 0 && L(m), d?.(m, "clickTrigger");
+    }, [i, e, d]), u = i ? n : o, j = u === 0 || u === "0" || u === "0px", P = [
+      "flex",
+      "flex-col",
+      {
+        light: "bg-base-100",
+        dark: "bg-base-200"
+      }[t],
+      "flex-shrink-0",
+      "transition-all",
+      "duration-200",
+      "relative",
+      M
+    ].filter(Boolean).join(" "), O = () => b ? i ? "" : "rotate-180" : i ? "rotate-180" : "", V = r && f !== null && /* @__PURE__ */ a(
+      "button",
+      {
+        onClick: k,
+        className: "flex items-center justify-center h-10 w-full bg-base-300 hover:bg-base-content/10 transition-colors",
+        "aria-label": i ? "Expand sidebar" : "Collapse sidebar",
+        "data-testid": x ? `${x}-trigger` : void 0,
+        children: /* @__PURE__ */ a(
+          "svg",
+          {
+            className: `w-4 h-4 transition-transform ${O()}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
+          }
+        )
+      }
+    ), D = r && j && i && /* @__PURE__ */ a(
+      "button",
+      {
+        onClick: k,
+        className: "absolute top-1/2 -translate-y-1/2 right-0 translate-x-full w-6 h-12 flex items-center justify-center bg-base-300 hover:bg-base-content/10 transition-colors rounded-r z-10",
+        "aria-label": "Expand sidebar",
+        style: g,
+        "data-testid": x ? `${x}-zero-trigger` : void 0,
+        children: /* @__PURE__ */ a(
+          "svg",
+          {
+            className: `w-3 h-3 ${b ? "rotate-180" : ""}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+          }
+        )
+      }
+    );
+    return /* @__PURE__ */ a(B.Provider, { value: { collapsed: i, collapsedWidth: n, width: o }, children: /* @__PURE__ */ Q(
+      "aside",
+      {
+        ref: z,
+        className: P,
+        style: {
+          width: typeof u == "number" ? `${u}px` : u,
+          ...T
+        },
+        "data-collapsed": i,
+        "data-theme": t,
+        "data-testid": x,
+        "aria-expanded": !i,
+        ...W,
+        children: [
+          /* @__PURE__ */ a("div", { className: "flex-1 overflow-auto", children: s }),
+          !j && f !== null && (f ?? V),
+          D
+        ]
+      }
+    ) });
+  }
+);
+A.displayName = "LayoutSider";
+const ee = Object.assign(v, {
+  Header: E,
+  Footer: R,
+  Content: $,
+  Sider: A
 });
 export {
-  W as Layout,
-  Q as useSiderContext
+  ee as Layout,
+  I as useSiderContext
 };
 //# sourceMappingURL=Layout.js.map

package/dist/components/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","sources":["../../src/components/Layout.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'\n\nexport interface LayoutProps {\n  children: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport interface LayoutHeaderProps {\n  children: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport interface LayoutFooterProps {\n  children: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport interface LayoutContentProps {\n  children: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n}\n\nexport interface LayoutSiderProps {\n  children: React.ReactNode\n  width?: number | string\n  collapsedWidth?: number | string\n  collapsed?: boolean\n  defaultCollapsed?: boolean\n  collapsible?: boolean\n  onCollapse?: (collapsed: boolean) => void\n  trigger?: React.ReactNode | null\n  breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  onBreakpoint?: (broken: boolean) => void\n  className?: string\n  style?: React.CSSProperties\n}\n\ninterface SiderContextValue {\n  collapsed: boolean\n  collapsedWidth: number | string\n  width: number | string\n}\n\nconst SiderContext = createContext<SiderContextValue | null>(null)\n\nexport function useSiderContext() {\n  return useContext(SiderContext)\n}\n\nfunction LayoutRoot({ children, className = '', style }: LayoutProps) {\n  // Check if any child is a Sider to determine flex direction\n  const childArray = React.Children.toArray(children)\n  const hasSider = childArray.some(\n    (child) => React.isValidElement(child) && (child.type as any).displayName === 'LayoutSider'\n  )\n\n  const layoutClasses = [\n    'flex',\n    'min-h-0',\n    hasSider ? 'flex-row' : 'flex-col',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // If we have a Sider, auto-add flex-1 to non-Sider Layout children\n  const processedChildren = hasSider\n    ? childArray.map((child) => {\n        if (\n          React.isValidElement(child) &&\n          (child.type === LayoutRoot || (child.type as any).displayName === 'LayoutRoot') &&\n          (child.type as any).displayName !== 'LayoutSider'\n        ) {\n          // Clone the Layout child and add flex-1 if not already present\n          const existingClassName = (child.props as any).className || ''\n          if (!existingClassName.includes('flex-1')) {\n            return React.cloneElement(child as React.ReactElement<any>, {\n              className: `flex-1 ${existingClassName}`.trim(),\n            })\n          }\n        }\n        return child\n      })\n    : children\n\n  return (\n    <div className={layoutClasses} style={style}>\n      {processedChildren}\n    </div>\n  )\n}\n\nLayoutRoot.displayName = 'LayoutRoot'\n\nfunction LayoutHeader({ children, className = '', style }: LayoutHeaderProps) {\n  const headerClasses = [\n    'flex',\n    'items-center',\n    'px-6',\n    'h-16',\n    'bg-base-300',\n    'flex-shrink-0',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <header className={headerClasses} style={style}>\n      {children}\n    </header>\n  )\n}\n\nfunction LayoutFooter({ children, className = '', style }: LayoutFooterProps) {\n  const footerClasses = [\n    'px-6',\n    'py-4',\n    'text-center',\n    'bg-base-300',\n    'flex-shrink-0',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <footer className={footerClasses} style={style}>\n      {children}\n    </footer>\n  )\n}\n\nfunction LayoutContent({ children, className = '', style }: LayoutContentProps) {\n  // flex-1 by default so Content fills available space\n  const contentClasses = ['flex-1', 'min-h-0', 'overflow-auto', className].filter(Boolean).join(' ')\n\n  return (\n    <main className={contentClasses} style={style}>\n      {children}\n    </main>\n  )\n}\n\nconst BREAKPOINT_MAP: Record<string, string> = {\n  sm: '(max-width: 639px)',\n  md: '(max-width: 767px)',\n  lg: '(max-width: 1023px)',\n  xl: '(max-width: 1279px)',\n  '2xl': '(max-width: 1535px)',\n}\n\nfunction LayoutSider({\n  children,\n  width = 200,\n  collapsedWidth = 80,\n  collapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  collapsible = false,\n  onCollapse,\n  trigger,\n  breakpoint,\n  onBreakpoint,\n  className = '',\n  style,\n}: LayoutSiderProps) {\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)\n  const [broken, setBroken] = useState(false)\n\n  const collapsed = controlledCollapsed ?? internalCollapsed\n\n  // Handle responsive breakpoint\n  useEffect(() => {\n    if (!breakpoint) return\n\n    const mediaQuery = window.matchMedia(BREAKPOINT_MAP[breakpoint])\n\n    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {\n      const isBroken = e.matches\n      setBroken(isBroken)\n      onBreakpoint?.(isBroken)\n\n      // Auto-collapse when breakpoint is crossed\n      if (controlledCollapsed === undefined) {\n        setInternalCollapsed(isBroken)\n      }\n      if (isBroken !== broken) {\n        onCollapse?.(isBroken)\n      }\n    }\n\n    // Check initial state\n    handleChange(mediaQuery)\n\n    // Listen for changes\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [breakpoint, onBreakpoint, controlledCollapsed, onCollapse, broken])\n\n  const handleCollapse = useCallback(() => {\n    const newCollapsed = !collapsed\n    if (controlledCollapsed === undefined) {\n      setInternalCollapsed(newCollapsed)\n    }\n    onCollapse?.(newCollapsed)\n  }, [collapsed, controlledCollapsed, onCollapse])\n\n  const currentWidth = collapsed ? collapsedWidth : width\n\n  const siderClasses = [\n    'flex',\n    'flex-col',\n    'bg-base-200',\n    'flex-shrink-0',\n    'transition-all',\n    'duration-200',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const defaultTrigger = collapsible && trigger !== null && (\n    <button\n      onClick={handleCollapse}\n      className=\"flex items-center justify-center h-10 w-full bg-base-300 hover:bg-base-content/10 transition-colors\"\n      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n    >\n      <svg\n        className={`w-4 h-4 transition-transform ${collapsed ? 'rotate-180' : ''}`}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n      </svg>\n    </button>\n  )\n\n  return (\n    <SiderContext.Provider value={{ collapsed, collapsedWidth, width }}>\n      <aside\n        className={siderClasses}\n        style={{\n          width: typeof currentWidth === 'number' ? `${currentWidth}px` : currentWidth,\n          ...style,\n        }}\n      >\n        <div className=\"flex-1 overflow-auto\">{children}</div>\n        {trigger !== null && (trigger ?? defaultTrigger)}\n      </aside>\n    </SiderContext.Provider>\n  )\n}\n\nLayoutSider.displayName = 'LayoutSider'\n\nexport const Layout = Object.assign(LayoutRoot, {\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Sider: LayoutSider,\n})\n"],"names":["SiderContext","createContext","useSiderContext","useContext","LayoutRoot","children","className","style","childArray","React","hasSider","child","layoutClasses","processedChildren","existingClassName","jsx","LayoutHeader","headerClasses","LayoutFooter","footerClasses","LayoutContent","contentClasses","BREAKPOINT_MAP","LayoutSider","width","collapsedWidth","controlledCollapsed","defaultCollapsed","collapsible","onCollapse","trigger","breakpoint","onBreakpoint","internalCollapsed","setInternalCollapsed","useState","broken","setBroken","collapsed","useEffect","mediaQuery","handleChange","e","isBroken","handleCollapse","useCallback","newCollapsed","currentWidth","siderClasses","defaultTrigger","jsxs","Layout"],"mappings":"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"}
+{"version":3,"file":"Layout.js","sources":["../../src/components/Layout.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useCallback, useEffect, forwardRef } from 'react'\n\nexport type SiderTheme = 'light' | 'dark'\nexport type SiderCollapsedType = 'clickTrigger' | 'responsive'\n\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  /** Whether contains Sider (auto-detected if not specified) */\n  hasSider?: boolean\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutFooterProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutContentProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport interface LayoutSiderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {\n  children: React.ReactNode\n  /** Width of the sider */\n  width?: number | string\n  /** Width when collapsed */\n  collapsedWidth?: number | string\n  /** Controlled collapsed state */\n  collapsed?: boolean\n  /** Initial collapsed state (uncontrolled) */\n  defaultCollapsed?: boolean\n  /** Whether can be collapsed */\n  collapsible?: boolean\n  /** Callback when collapse state changes */\n  onCollapse?: (collapsed: boolean, type: SiderCollapsedType) => void\n  /** Custom trigger element (null to hide) */\n  trigger?: React.ReactNode | null\n  /** Responsive breakpoint for auto-collapse */\n  breakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n  /** Callback when breakpoint is crossed */\n  onBreakpoint?: (broken: boolean) => void\n  /** Reverse direction of arrow (for right-side sider) */\n  reverseArrow?: boolean\n  /** Color theme of the sider */\n  theme?: SiderTheme\n  /** Style for zero-width trigger */\n  zeroWidthTriggerStyle?: React.CSSProperties\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\ninterface SiderContextValue {\n  collapsed: boolean\n  collapsedWidth: number | string\n  width: number | string\n}\n\nconst SiderContext = createContext<SiderContextValue | null>(null)\n\nexport function useSiderContext() {\n  return useContext(SiderContext)\n}\n\nconst LayoutRoot = forwardRef<HTMLDivElement, LayoutProps>(\n  ({ children, hasSider: hasSiderProp, className = '', 'data-testid': testId, ...rest }, ref) => {\n    // Check if any child is a Sider to determine flex direction\n    const childArray = React.Children.toArray(children)\n    const hasSiderDetected = childArray.some(\n      (child) => React.isValidElement(child) && (child.type as any).displayName === 'LayoutSider'\n    )\n    const hasSider = hasSiderProp ?? hasSiderDetected\n\n    const layoutClasses = [\n      'flex',\n      'min-h-0',\n      hasSider ? 'flex-row' : 'flex-col',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    // If we have a Sider, auto-add flex-1 to non-Sider Layout children\n    const processedChildren = hasSider\n      ? childArray.map((child) => {\n          if (\n            React.isValidElement(child) &&\n            (child.type === LayoutRoot || (child.type as any).displayName === 'LayoutRoot') &&\n            (child.type as any).displayName !== 'LayoutSider'\n          ) {\n            // Clone the Layout child and add flex-1 if not already present\n            const existingClassName = (child.props as any).className || ''\n            if (!existingClassName.includes('flex-1')) {\n              return React.cloneElement(child as React.ReactElement<any>, {\n                className: `flex-1 ${existingClassName}`.trim(),\n              })\n            }\n          }\n          return child\n        })\n      : children\n\n    return (\n      <div ref={ref} className={layoutClasses} data-testid={testId} {...rest}>\n        {processedChildren}\n      </div>\n    )\n  }\n)\n\nLayoutRoot.displayName = 'LayoutRoot'\n\nconst LayoutHeader = forwardRef<HTMLElement, LayoutHeaderProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    const headerClasses = [\n      'flex',\n      'items-center',\n      'px-6',\n      'h-16',\n      'bg-base-300',\n      'flex-shrink-0',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <header ref={ref} className={headerClasses} data-testid={testId} {...rest}>\n        {children}\n      </header>\n    )\n  }\n)\n\nLayoutHeader.displayName = 'LayoutHeader'\n\nconst LayoutFooter = forwardRef<HTMLElement, LayoutFooterProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    const footerClasses = [\n      'px-6',\n      'py-4',\n      'text-center',\n      'bg-base-300',\n      'flex-shrink-0',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <footer ref={ref} className={footerClasses} data-testid={testId} {...rest}>\n        {children}\n      </footer>\n    )\n  }\n)\n\nLayoutFooter.displayName = 'LayoutFooter'\n\nconst LayoutContent = forwardRef<HTMLElement, LayoutContentProps>(\n  ({ children, className = '', 'data-testid': testId, ...rest }, ref) => {\n    // flex-1 by default so Content fills available space\n    const contentClasses = ['flex-1', 'min-h-0', 'overflow-auto', className].filter(Boolean).join(' ')\n\n    return (\n      <main ref={ref} className={contentClasses} data-testid={testId} {...rest}>\n        {children}\n      </main>\n    )\n  }\n)\n\nLayoutContent.displayName = 'LayoutContent'\n\nconst BREAKPOINT_MAP: Record<string, string> = {\n  sm: '(max-width: 639px)',\n  md: '(max-width: 767px)',\n  lg: '(max-width: 1023px)',\n  xl: '(max-width: 1279px)',\n  '2xl': '(max-width: 1535px)',\n}\n\nconst LayoutSider = forwardRef<HTMLElement, LayoutSiderProps>(\n  (\n    {\n      children,\n      width = 200,\n      collapsedWidth = 80,\n      collapsed: controlledCollapsed,\n      defaultCollapsed = false,\n      collapsible = false,\n      onCollapse,\n      trigger,\n      breakpoint,\n      onBreakpoint,\n      reverseArrow = false,\n      theme = 'dark',\n      zeroWidthTriggerStyle,\n      className = '',\n      style,\n      'data-testid': testId,\n      ...rest\n    },\n    ref\n  ) => {\n    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)\n    const [broken, setBroken] = useState(false)\n\n    const collapsed = controlledCollapsed ?? internalCollapsed\n\n    // Handle responsive breakpoint\n    useEffect(() => {\n      if (!breakpoint) return\n\n      const mediaQuery = window.matchMedia(BREAKPOINT_MAP[breakpoint])\n\n      const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {\n        const isBroken = e.matches\n        setBroken(isBroken)\n        onBreakpoint?.(isBroken)\n\n        // Auto-collapse when breakpoint is crossed\n        if (controlledCollapsed === undefined) {\n          setInternalCollapsed(isBroken)\n        }\n        if (isBroken !== broken) {\n          onCollapse?.(isBroken, 'responsive')\n        }\n      }\n\n      // Check initial state\n      handleChange(mediaQuery)\n\n      // Listen for changes\n      mediaQuery.addEventListener('change', handleChange)\n      return () => mediaQuery.removeEventListener('change', handleChange)\n    }, [breakpoint, onBreakpoint, controlledCollapsed, onCollapse, broken])\n\n    const handleCollapse = useCallback(() => {\n      const newCollapsed = !collapsed\n      if (controlledCollapsed === undefined) {\n        setInternalCollapsed(newCollapsed)\n      }\n      onCollapse?.(newCollapsed, 'clickTrigger')\n    }, [collapsed, controlledCollapsed, onCollapse])\n\n    const currentWidth = collapsed ? collapsedWidth : width\n    const isZeroWidth = currentWidth === 0 || currentWidth === '0' || currentWidth === '0px'\n\n    const themeClasses: Record<SiderTheme, string> = {\n      light: 'bg-base-100',\n      dark: 'bg-base-200',\n    }\n\n    const siderClasses = [\n      'flex',\n      'flex-col',\n      themeClasses[theme],\n      'flex-shrink-0',\n      'transition-all',\n      'duration-200',\n      'relative',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    // Determine arrow rotation based on collapsed state and reverseArrow prop\n    const getArrowRotation = () => {\n      if (reverseArrow) {\n        return collapsed ? '' : 'rotate-180'\n      }\n      return collapsed ? 'rotate-180' : ''\n    }\n\n    const defaultTrigger = collapsible && trigger !== null && (\n      <button\n        onClick={handleCollapse}\n        className=\"flex items-center justify-center h-10 w-full bg-base-300 hover:bg-base-content/10 transition-colors\"\n        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        data-testid={testId ? `${testId}-trigger` : undefined}\n      >\n        <svg\n          className={`w-4 h-4 transition-transform ${getArrowRotation()}`}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M15 19l-7-7 7-7\" />\n        </svg>\n      </button>\n    )\n\n    // Zero-width trigger (floating button when sider is collapsed to 0)\n    const zeroWidthTrigger = collapsible && isZeroWidth && collapsed && (\n      <button\n        onClick={handleCollapse}\n        className=\"absolute top-1/2 -translate-y-1/2 right-0 translate-x-full w-6 h-12 flex items-center justify-center bg-base-300 hover:bg-base-content/10 transition-colors rounded-r z-10\"\n        aria-label=\"Expand sidebar\"\n        style={zeroWidthTriggerStyle}\n        data-testid={testId ? `${testId}-zero-trigger` : undefined}\n      >\n        <svg\n          className={`w-3 h-3 ${reverseArrow ? 'rotate-180' : ''}`}\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n        >\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    )\n\n    return (\n      <SiderContext.Provider value={{ collapsed, collapsedWidth, width }}>\n        <aside\n          ref={ref}\n          className={siderClasses}\n          style={{\n            width: typeof currentWidth === 'number' ? `${currentWidth}px` : currentWidth,\n            ...style,\n          }}\n          data-collapsed={collapsed}\n          data-theme={theme}\n          data-testid={testId}\n          aria-expanded={!collapsed}\n          {...rest}\n        >\n          <div className=\"flex-1 overflow-auto\">{children}</div>\n          {!isZeroWidth && trigger !== null && (trigger ?? defaultTrigger)}\n          {zeroWidthTrigger}\n        </aside>\n      </SiderContext.Provider>\n    )\n  }\n)\n\nLayoutSider.displayName = 'LayoutSider'\n\nexport const Layout = Object.assign(LayoutRoot, {\n  Header: LayoutHeader,\n  Footer: LayoutFooter,\n  Content: LayoutContent,\n  Sider: LayoutSider,\n})\n"],"names":["SiderContext","createContext","useSiderContext","useContext","LayoutRoot","forwardRef","children","hasSiderProp","className","testId","rest","ref","childArray","React","hasSiderDetected","child","hasSider","layoutClasses","processedChildren","existingClassName","jsx","LayoutHeader","headerClasses","LayoutFooter","footerClasses","LayoutContent","contentClasses","BREAKPOINT_MAP","LayoutSider","width","collapsedWidth","controlledCollapsed","defaultCollapsed","collapsible","onCollapse","trigger","breakpoint","onBreakpoint","reverseArrow","theme","zeroWidthTriggerStyle","style","internalCollapsed","setInternalCollapsed","useState","broken","setBroken","collapsed","useEffect","mediaQuery","handleChange","e","isBroken","handleCollapse","useCallback","newCollapsed","currentWidth","isZeroWidth","siderClasses","getArrowRotation","defaultTrigger","zeroWidthTrigger","jsxs","Layout"],"mappings":";;AAmEA,MAAMA,IAAeC,EAAwC,IAAI;AAE1D,SAASC,IAAkB;AAChC,SAAOC,EAAWH,CAAY;AAChC;AAEA,MAAMI,IAAaC;AAAA,EACjB,CAAC,EAAE,UAAAC,GAAU,UAAUC,GAAc,WAAAC,IAAY,IAAI,eAAeC,GAAQ,GAAGC,EAAA,GAAQC,MAAQ;AAE7F,UAAMC,IAAaC,EAAM,SAAS,QAAQP,CAAQ,GAC5CQ,IAAmBF,EAAW;AAAA,MAClC,CAACG,MAAUF,EAAM,eAAeE,CAAK,KAAMA,EAAM,KAAa,gBAAgB;AAAA,IAAA,GAE1EC,IAAWT,KAAgBO,GAE3BG,IAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACAD,IAAW,aAAa;AAAA,MACxBR;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAGLU,IAAoBF,IACtBJ,EAAW,IAAI,CAACG,MAAU;AACxB,UACEF,EAAM,eAAeE,CAAK,MACzBA,EAAM,SAASX,KAAeW,EAAM,KAAa,gBAAgB,iBACjEA,EAAM,KAAa,gBAAgB,eACpC;AAEA,cAAMI,IAAqBJ,EAAM,MAAc,aAAa;AAC5D,YAAI,CAACI,EAAkB,SAAS,QAAQ;AACtC,iBAAON,EAAM,aAAaE,GAAkC;AAAA,YAC1D,WAAW,UAAUI,CAAiB,GAAG,KAAA;AAAA,UAAK,CAC/C;AAAA,MAEL;AACA,aAAOJ;AAAA,IACT,CAAC,IACDT;AAEJ,WACE,gBAAAc,EAAC,SAAI,KAAAT,GAAU,WAAWM,GAAe,eAAaR,GAAS,GAAGC,GAC/D,UAAAQ,EAAA,CACH;AAAA,EAEJ;AACF;AAEAd,EAAW,cAAc;AAEzB,MAAMiB,IAAehB;AAAA,EACnB,CAAC,EAAE,UAAAC,GAAU,WAAAE,IAAY,IAAI,eAAeC,GAAQ,GAAGC,EAAA,GAAQC,MAAQ;AACrE,UAAMW,IAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAd;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAY,EAAC,YAAO,KAAAT,GAAU,WAAWW,GAAe,eAAab,GAAS,GAAGC,GAClE,UAAAJ,EAAA,CACH;AAAA,EAEJ;AACF;AAEAe,EAAa,cAAc;AAE3B,MAAME,IAAelB;AAAA,EACnB,CAAC,EAAE,UAAAC,GAAU,WAAAE,IAAY,IAAI,eAAeC,GAAQ,GAAGC,EAAA,GAAQC,MAAQ;AACrE,UAAMa,IAAgB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAhB;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,gBAAAY,EAAC,YAAO,KAAAT,GAAU,WAAWa,GAAe,eAAaf,GAAS,GAAGC,GAClE,UAAAJ,EAAA,CACH;AAAA,EAEJ;AACF;AAEAiB,EAAa,cAAc;AAE3B,MAAME,IAAgBpB;AAAA,EACpB,CAAC,EAAE,UAAAC,GAAU,WAAAE,IAAY,IAAI,eAAeC,GAAQ,GAAGC,EAAA,GAAQC,MAAQ;AAErE,UAAMe,IAAiB,CAAC,UAAU,WAAW,iBAAiBlB,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAEjG,WACE,gBAAAY,EAAC,UAAK,KAAAT,GAAU,WAAWe,GAAgB,eAAajB,GAAS,GAAGC,GACjE,UAAAJ,EAAA,CACH;AAAA,EAEJ;AACF;AAEAmB,EAAc,cAAc;AAE5B,MAAME,IAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AACT,GAEMC,IAAcvB;AAAA,EAClB,CACE;AAAA,IACE,UAAAC;AAAA,IACA,OAAAuB,IAAQ;AAAA,IACR,gBAAAC,IAAiB;AAAA,IACjB,WAAWC;AAAA,IACX,kBAAAC,IAAmB;AAAA,IACnB,aAAAC,IAAc;AAAA,IACd,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,uBAAAC;AAAA,IACA,WAAAhC,IAAY;AAAA,IACZ,OAAAiC;AAAA,IACA,eAAehC;AAAA,IACf,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAAC+B,GAAmBC,CAAoB,IAAIC,EAASZ,CAAgB,GACrE,CAACa,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAAYhB,KAAuBW;AAGzC,IAAAM,EAAU,MAAM;AACd,UAAI,CAACZ,EAAY;AAEjB,YAAMa,IAAa,OAAO,WAAWtB,EAAeS,CAAU,CAAC,GAEzDc,IAAe,CAACC,MAA4C;AAChE,cAAMC,IAAWD,EAAE;AACnB,QAAAL,EAAUM,CAAQ,GAClBf,IAAee,CAAQ,GAGnBrB,MAAwB,UAC1BY,EAAqBS,CAAQ,GAE3BA,MAAaP,KACfX,IAAakB,GAAU,YAAY;AAAA,MAEvC;AAGA,aAAAF,EAAaD,CAAU,GAGvBA,EAAW,iBAAiB,UAAUC,CAAY,GAC3C,MAAMD,EAAW,oBAAoB,UAAUC,CAAY;AAAA,IACpE,GAAG,CAACd,GAAYC,GAAcN,GAAqBG,GAAYW,CAAM,CAAC;AAEtE,UAAMQ,IAAiBC,EAAY,MAAM;AACvC,YAAMC,IAAe,CAACR;AACtB,MAAIhB,MAAwB,UAC1BY,EAAqBY,CAAY,GAEnCrB,IAAaqB,GAAc,cAAc;AAAA,IAC3C,GAAG,CAACR,GAAWhB,GAAqBG,CAAU,CAAC,GAEzCsB,IAAeT,IAAYjB,IAAiBD,GAC5C4B,IAAcD,MAAiB,KAAKA,MAAiB,OAAOA,MAAiB,OAO7EE,IAAe;AAAA,MACnB;AAAA,MACA;AAAA,MAP+C;AAAA,QAC/C,OAAO;AAAA,QACP,MAAM;AAAA,MAAA,EAMOnB,CAAK;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA/B;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAGLmD,IAAmB,MACnBrB,IACKS,IAAY,KAAK,eAEnBA,IAAY,eAAe,IAG9Ba,IAAiB3B,KAAeE,MAAY,QAChD,gBAAAf;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASiC;AAAA,QACT,WAAU;AAAA,QACV,cAAYN,IAAY,mBAAmB;AAAA,QAC3C,eAAatC,IAAS,GAAGA,CAAM,aAAa;AAAA,QAE5C,UAAA,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,gCAAgCuC,EAAA,CAAkB;AAAA,YAC7D,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAO;AAAA,YAEP,UAAA,gBAAAvC,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,kBAAA,CAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,MACzF;AAAA,IAAA,GAKEyC,IAAmB5B,KAAewB,KAAeV,KACrD,gBAAA3B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASiC;AAAA,QACT,WAAU;AAAA,QACV,cAAW;AAAA,QACX,OAAOb;AAAA,QACP,eAAa/B,IAAS,GAAGA,CAAM,kBAAkB;AAAA,QAEjD,UAAA,gBAAAW;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,WAAWkB,IAAe,eAAe,EAAE;AAAA,YACtD,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,QAAO;AAAA,YAEP,UAAA,gBAAAlB,EAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,eAAA,CAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MACtF;AAAA,IAAA;AAIJ,WACE,gBAAAA,EAACpB,EAAa,UAAb,EAAsB,OAAO,EAAE,WAAA+C,GAAW,gBAAAjB,GAAgB,OAAAD,KACzD,UAAA,gBAAAiC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAnD;AAAA,QACA,WAAW+C;AAAA,QACX,OAAO;AAAA,UACL,OAAO,OAAOF,KAAiB,WAAW,GAAGA,CAAY,OAAOA;AAAA,UAChE,GAAGf;AAAA,QAAA;AAAA,QAEL,kBAAgBM;AAAA,QAChB,cAAYR;AAAA,QACZ,eAAa9B;AAAA,QACb,iBAAe,CAACsC;AAAA,QACf,GAAGrC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAU,wBAAwB,UAAAd,EAAA,CAAS;AAAA,UAC/C,CAACmD,KAAetB,MAAY,SAASA,KAAWyB;AAAA,UAChDC;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAEAjC,EAAY,cAAc;AAEnB,MAAMmC,KAAS,OAAO,OAAO3D,GAAY;AAAA,EAC9C,QAAQiB;AAAA,EACR,QAAQE;AAAA,EACR,SAASE;AAAA,EACT,OAAOG;AACT,CAAC;"}

package/dist/components/ResponsiveDrawer.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export type ResponsiveDrawerBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ResponsiveDrawerProps 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;
+    /** Width of the sidebar */
+    width?: number | string;
+    /** Breakpoint at which sidebar becomes always visible (e.g., 'lg' for lg:drawer-open) */
+    responsive?: ResponsiveDrawerBreakpoint;
+    /** Additional classes for sidebar container */
+    sidebarClassName?: string;
+    /** Additional classes for content area */
+    contentClassName?: string;
+    /** Additional classes for the overlay */
+    overlayClassName?: string;
+    /** Unique ID for the drawer (auto-generated if not provided) */
+    id?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
+}
+/**
+ * ResponsiveDrawer - A responsive sidebar layout using DaisyUI's drawer.
+ * Use for navigation sidebars that toggle on mobile but can be always visible on larger screens.
+ * For overlay panel drawers (forms, details), use the Drawer component instead.
+ */
+export declare const ResponsiveDrawer: React.ForwardRefExoticComponent<ResponsiveDrawerProps & React.RefAttributes<HTMLDivElement>>;

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;"}