asterui 0.12.8 → 0.12.10

package/dist/components/Hero.d.ts

@@ -2,8 +2,10 @@ import { default as React } from 'react';
 export interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     overlay?: boolean;
-    overlayClassName?: string;
     contentClassName?: string;
-    wrapperClassName?: string;
 }
-export declare function Hero({ children, overlay, overlayClassName, contentClassName, wrapperClassName, className, style, ...rest }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export declare function Hero({ children, overlay, contentClassName, className, ...rest }: HeroProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Hero {
+    var displayName: string;
+}
+export default Hero;

package/dist/components/Join.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
-    vertical?: boolean;
+    direction?: 'horizontal' | 'vertical';
 }
-export declare function Join({ children, vertical, className, ...rest }: JoinProps): import("react/jsx-runtime").JSX.Element;
+export declare function Join({ children, direction, className, ...rest }: JoinProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout.d.ts

@@ -46,7 +46,7 @@ declare namespace LayoutRoot {
 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, className, style, }: LayoutSiderProps): 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;
 }

package/dist/components/Masonry.d.ts

@@ -9,7 +9,7 @@ export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
         xl?: number;
         '2xl'?: number;
     };
-    gap?: number | string;
+    gap?: number;
 }
 export declare const Masonry: React.FC<MasonryProps>;
 export default Masonry;

package/dist/index35.js

@@ -1,21 +1,20 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
-function h({
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+function c({
   children: o,
-  overlay: n = !1,
-  overlayClassName: l = "",
+  overlay: s = !1,
   contentClassName: a = "",
-  wrapperClassName: s,
-  className: i = "",
-  style: r,
-  ...t
+  className: r = "",
+  ...l
 }) {
-  const c = ["hero", "min-h-screen", i].filter(Boolean).join(" "), f = ["hero-content", a].filter(Boolean).join(" "), m = ["hero-overlay", l].filter(Boolean).join(" ");
-  return /* @__PURE__ */ v("div", { className: c, style: r, ...t, children: [
-    n && /* @__PURE__ */ e("div", { className: m }),
-    /* @__PURE__ */ e("div", { className: f, children: s ? /* @__PURE__ */ e("div", { className: s, children: o }) : o })
+  const n = ["hero", r].filter(Boolean).join(" "), t = ["hero-content", a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ i("div", { className: n, ...l, children: [
+    s && /* @__PURE__ */ e("div", { className: "hero-overlay bg-opacity-60" }),
+    /* @__PURE__ */ e("div", { className: t, children: o })
   ] });
 }
+c.displayName = "Hero";
 export {
-  h as Hero
+  c as Hero,
+  c as default
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/components/Hero.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  overlay?: boolean\n  overlayClassName?: string\n  contentClassName?: string\n  wrapperClassName?: string\n}\n\nexport function Hero({\n  children,\n  overlay = false,\n  overlayClassName = '',\n  contentClassName = '',\n  wrapperClassName,\n  className = '',\n  style,\n  ...rest\n}: HeroProps) {\n  const classes = ['hero', 'min-h-screen', className].filter(Boolean).join(' ')\n  const contentClasses = ['hero-content', contentClassName].filter(Boolean).join(' ')\n  const overlayClasses = ['hero-overlay', overlayClassName].filter(Boolean).join(' ')\n\n  return (\n    <div className={classes} style={style} {...rest}>\n      {overlay && <div className={overlayClasses} />}\n      <div className={contentClasses}>\n        {wrapperClassName ? <div className={wrapperClassName}>{children}</div> : children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Hero","children","overlay","overlayClassName","contentClassName","wrapperClassName","className","style","rest","classes","contentClasses","overlayClasses","jsx"],"mappings":";AAUO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC,IAAmB;AAAA,EACnB,kBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAU,CAAC,QAAQ,gBAAgBH,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACtEI,IAAiB,CAAC,gBAAgBN,CAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC5EO,IAAiB,CAAC,gBAAgBR,CAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAElF,2BACG,OAAA,EAAI,WAAWM,GAAS,OAAAF,GAAe,GAAGC,GACxC,UAAA;AAAA,IAAAN,KAAW,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAA,CAAgB;AAAA,IAC5C,gBAAAC,EAAC,OAAA,EAAI,WAAWF,GACb,UAAAL,IAAmB,gBAAAO,EAAC,OAAA,EAAI,WAAWP,GAAmB,UAAAJ,EAAA,CAAS,IAASA,EAAA,CAC3E;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index35.js","sources":["../src/components/Hero.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface HeroProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  overlay?: boolean\n  contentClassName?: string\n}\n\nexport function Hero({\n  children,\n  overlay = false,\n  contentClassName = '',\n  className = '',\n  ...rest\n}: HeroProps) {\n  const heroClasses = ['hero', className].filter(Boolean).join(' ')\n  const contentClasses = ['hero-content', contentClassName].filter(Boolean).join(' ')\n\n  return (\n    <div className={heroClasses} {...rest}>\n      {overlay && <div className=\"hero-overlay bg-opacity-60\" />}\n      <div className={contentClasses}>{children}</div>\n    </div>\n  )\n}\n\nHero.displayName = 'Hero'\n\nexport default Hero\n"],"names":["Hero","children","overlay","contentClassName","className","rest","heroClasses","contentClasses","jsxs","jsx"],"mappings":";AAQO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,kBAAAC,IAAmB;AAAA,EACnB,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAc,CAAC,QAAQF,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1DG,IAAiB,CAAC,gBAAgBJ,CAAgB,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAElF,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAWF,GAAc,GAAGD,GAC9B,UAAA;AAAA,IAAAH,KAAW,gBAAAO,EAAC,OAAA,EAAI,WAAU,6BAAA,CAA6B;AAAA,IACxD,gBAAAA,EAAC,OAAA,EAAI,WAAWF,GAAiB,UAAAN,EAAA,CAAS;AAAA,EAAA,GAC5C;AAEJ;AAEAD,EAAK,cAAc;"}

package/dist/index42.js

@@ -1,18 +1,18 @@
 import { jsx as c } from "react/jsx-runtime";
 import n from "react";
-function p({ children: i, vertical: o = !1, className: t = "", ...a }) {
-  const r = ["join", o && "join-vertical", t].filter(Boolean).join(" "), m = n.Children.map(i, (e) => {
+function f({ children: o, direction: t = "horizontal", className: s = "", ...r }) {
+  const a = ["join", t === "vertical" && "join-vertical", s].filter(Boolean).join(" "), l = n.Children.map(o, (e) => {
     if (n.isValidElement(e)) {
-      const s = e.props.className || "", l = s ? `join-item ${s}` : "join-item";
+      const i = e.props.className || "", m = i ? `join-item ${i}` : "join-item";
       return n.cloneElement(e, {
-        className: l
+        className: m
       });
     }
     return e;
   });
-  return /* @__PURE__ */ c("div", { className: r, ...a, children: m });
+  return /* @__PURE__ */ c("div", { className: a, ...r, children: l });
 }
 export {
-  p as Join
+  f as Join
 };
 //# sourceMappingURL=index42.js.map

package/dist/index42.js.map

@@ -1 +1 @@
-{"version":3,"file":"index42.js","sources":["../src/components/Join.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  vertical?: boolean\n}\n\nexport function Join({ children, vertical = false, className = '', ...rest }: JoinProps) {\n  const classes = ['join', vertical && 'join-vertical', className].filter(Boolean).join(' ')\n\n  // Automatically add join-item class to all children\n  const childrenWithJoinItem = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      const existingClassName = (child.props as any).className || ''\n      const newClassName = existingClassName ? `join-item ${existingClassName}` : 'join-item'\n\n      return React.cloneElement(child as React.ReactElement<any>, {\n        className: newClassName,\n      })\n    }\n    return child\n  })\n\n  return <div className={classes} {...rest}>{childrenWithJoinItem}</div>\n}\n"],"names":["Join","children","vertical","className","rest","classes","childrenWithJoinItem","React","child","existingClassName","newClassName"],"mappings":";;AAOO,SAASA,EAAK,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,IAAY,IAAI,GAAGC,KAAmB;AACvF,QAAMC,IAAU,CAAC,QAAQH,KAAY,iBAAiBC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAGnFG,IAAuBC,EAAM,SAAS,IAAIN,GAAU,CAACO,MAAU;AACnE,QAAID,EAAM,eAAeC,CAAK,GAAG;AAC/B,YAAMC,IAAqBD,EAAM,MAAc,aAAa,IACtDE,IAAeD,IAAoB,aAAaA,CAAiB,KAAK;AAE5E,aAAOF,EAAM,aAAaC,GAAkC;AAAA,QAC1D,WAAWE;AAAA,MAAA,CACZ;AAAA,IACH;AACA,WAAOF;AAAA,EACT,CAAC;AAED,2BAAQ,OAAA,EAAI,WAAWH,GAAU,GAAGD,GAAO,UAAAE,GAAqB;AAClE;"}
+{"version":3,"file":"index42.js","sources":["../src/components/Join.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  direction?: 'horizontal' | 'vertical'\n}\n\nexport function Join({ children, direction = 'horizontal', className = '', ...rest }: JoinProps) {\n  const classes = ['join', direction === 'vertical' && 'join-vertical', className].filter(Boolean).join(' ')\n\n  // Automatically add join-item class to all children\n  const childrenWithJoinItem = React.Children.map(children, (child) => {\n    if (React.isValidElement(child)) {\n      const existingClassName = (child.props as any).className || ''\n      const newClassName = existingClassName ? `join-item ${existingClassName}` : 'join-item'\n\n      return React.cloneElement(child as React.ReactElement<any>, {\n        className: newClassName,\n      })\n    }\n    return child\n  })\n\n  return <div className={classes} {...rest}>{childrenWithJoinItem}</div>\n}\n"],"names":["Join","children","direction","className","rest","classes","childrenWithJoinItem","React","child","existingClassName","newClassName"],"mappings":";;AAOO,SAASA,EAAK,EAAE,UAAAC,GAAU,WAAAC,IAAY,cAAc,WAAAC,IAAY,IAAI,GAAGC,KAAmB;AAC/F,QAAMC,IAAU,CAAC,QAAQH,MAAc,cAAc,iBAAiBC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAGnGG,IAAuBC,EAAM,SAAS,IAAIN,GAAU,CAACO,MAAU;AACnE,QAAID,EAAM,eAAeC,CAAK,GAAG;AAC/B,YAAMC,IAAqBD,EAAM,MAAc,aAAa,IACtDE,IAAeD,IAAoB,aAAaA,CAAiB,KAAK;AAE5E,aAAOF,EAAM,aAAaC,GAAkC;AAAA,QAC1D,WAAWE;AAAA,MAAA,CACZ;AAAA,IACH;AACA,WAAOF;AAAA,EACT,CAAC;AAED,2BAAQ,OAAA,EAAI,WAAWH,GAAU,GAAGD,GAAO,UAAAE,GAAqB;AAClE;"}

package/dist/index45.js

@@ -1,122 +1,140 @@
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import u, { useContext as k, createContext as S, useState as w, useCallback as g } from "react";
-const p = S(null);
-function F() {
-  return k(p);
+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);
 }
-function m({ children: o, className: n = "", style: s }) {
-  const t = u.Children.toArray(o), l = t.some(
-    (e) => u.isValidElement(e) && e.type.displayName === "LayoutSider"
-  ), f = [
+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",
-    l ? "flex-row" : "flex-col",
-    n
-  ].filter(Boolean).join(" "), i = l ? t.map((e) => {
-    if (u.isValidElement(e) && (e.type === m || e.type.displayName === "LayoutRoot") && e.type.displayName !== "LayoutSider") {
-      const c = e.props.className || "";
-      if (!c.includes("flex-1"))
-        return u.cloneElement(e, {
-          className: `flex-1 ${c}`.trim()
+    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 e;
-  }) : o;
-  return /* @__PURE__ */ a("div", { className: f, style: s, children: i });
+    return t;
+  }) : n;
+  return /* @__PURE__ */ o("div", { className: m, style: a, children: r });
 }
-m.displayName = "LayoutRoot";
-function B({ children: o, className: n = "", style: s }) {
-  const t = [
+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",
-    n
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("header", { className: t, style: s, children: o });
+  return /* @__PURE__ */ o("header", { className: e, style: a, children: n });
 }
-function E({ children: o, className: n = "", style: s }) {
-  const t = [
+function I({ children: n, className: s = "", style: a }) {
+  const e = [
     "px-6",
     "py-4",
     "text-center",
     "bg-base-300",
     "flex-shrink-0",
-    n
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("footer", { className: t, style: s, children: o });
+  return /* @__PURE__ */ o("footer", { className: e, style: a, children: n });
 }
-function R({ children: o, className: n = "", style: s }) {
-  const t = ["flex-1", "min-h-0", "overflow-auto", n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ a("main", { className: t, style: s, children: o });
+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 });
 }
-function y({
-  children: o,
-  width: n = 200,
-  collapsedWidth: s = 80,
-  collapsed: t,
-  defaultCollapsed: l = !1,
-  collapsible: f = !1,
-  onCollapse: i,
-  trigger: e,
-  className: c = "",
-  style: C
+const T = {
+  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 [b, N] = w(l), r = t ?? b, h = g(() => {
-    const x = !r;
-    t === void 0 && N(x), i?.(x);
-  }, [r, t, i]), d = r ? s : n, L = [
+  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",
-    c
-  ].filter(Boolean).join(" "), j = f && e !== null && /* @__PURE__ */ a(
+    w
+  ].filter(Boolean).join(" "), E = m && t !== null && /* @__PURE__ */ o(
     "button",
     {
-      onClick: h,
+      onClick: S,
       className: "flex items-center justify-center h-10 w-full bg-base-300 hover:bg-base-content/10 transition-colors",
-      "aria-label": r ? "Expand sidebar" : "Collapse sidebar",
-      children: /* @__PURE__ */ a(
+      "aria-label": l ? "Expand sidebar" : "Collapse sidebar",
+      children: /* @__PURE__ */ o(
         "svg",
         {
-          className: `w-4 h-4 transition-transform ${r ? "rotate-180" : ""}`,
+          className: `w-4 h-4 transition-transform ${l ? "rotate-180" : ""}`,
           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" })
+          children: /* @__PURE__ */ o("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" })
         }
       )
     }
   );
-  return /* @__PURE__ */ a(p.Provider, { value: { collapsed: r, collapsedWidth: s, width: n }, children: /* @__PURE__ */ v(
+  return /* @__PURE__ */ o(L.Provider, { value: { collapsed: l, collapsedWidth: a, width: s }, children: /* @__PURE__ */ A(
     "aside",
     {
-      className: L,
+      className: B,
       style: {
-        width: typeof d == "number" ? `${d}px` : d,
-        ...C
+        width: typeof x == "number" ? `${x}px` : x,
+        ...g
       },
       children: [
-        /* @__PURE__ */ a("div", { className: "flex-1 overflow-auto", children: o }),
-        e !== null && (e ?? j)
+        /* @__PURE__ */ o("div", { className: "flex-1 overflow-auto", children: n }),
+        t !== null && (t ?? E)
       ]
     }
   ) });
 }
-y.displayName = "LayoutSider";
-const H = Object.assign(m, {
-  Header: B,
-  Footer: E,
-  Content: R,
-  Sider: y
+v.displayName = "LayoutSider";
+const W = Object.assign(h, {
+  Header: H,
+  Footer: I,
+  Content: O,
+  Sider: v
 });
 export {
-  H as Layout,
-  F as useSiderContext
+  W as Layout,
+  Q as useSiderContext
 };
 //# sourceMappingURL=index45.js.map

package/dist/index45.js.map

@@ -1 +1 @@
-{"version":3,"file":"index45.js","sources":["../src/components/Layout.tsx"],"sourcesContent":["import React, { createContext, useContext, useState, useCallback } 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\nfunction LayoutSider({\n  children,\n  width = 200,\n  collapsedWidth = 80,\n  collapsed: controlledCollapsed,\n  defaultCollapsed = false,\n  collapsible = false,\n  onCollapse,\n  trigger,\n  className = '',\n  style,\n}: LayoutSiderProps) {\n  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)\n\n  const collapsed = controlledCollapsed ?? internalCollapsed\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","LayoutSider","width","collapsedWidth","controlledCollapsed","defaultCollapsed","collapsible","onCollapse","trigger","internalCollapsed","setInternalCollapsed","useState","collapsed","handleCollapse","useCallback","newCollapsed","currentWidth","siderClasses","defaultTrigger","jsxs","Layout"],"mappings":"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"}
+{"version":3,"file":"index45.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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"}

package/dist/index49.js

@@ -1,119 +1,84 @@
-import { jsx as n } from "react/jsx-runtime";
-import C from "react";
-const h = ({
-  children: u,
-  columns: l = 3,
-  gap: m = 4,
-  className: c = "",
-  ...a
+import { jsx as H } from "react/jsx-runtime";
+import I, { useRef as R, useState as b, useCallback as K, useLayoutEffect as A } from "react";
+const d = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function L(t, e) {
+  return typeof t == "number" ? t : t ? t["2xl"] !== void 0 && e >= d["2xl"] ? t["2xl"] : t.xl !== void 0 && e >= d.xl ? t.xl : t.lg !== void 0 && e >= d.lg ? t.lg : t.md !== void 0 && e >= d.md ? t.md : t.sm !== void 0 && e >= d.sm ? t.sm : t.xs !== void 0 ? t.xs : 3 : 3;
+}
+const O = ({
+  children: t,
+  columns: e = 3,
+  gap: r = 16,
+  className: z = "",
+  style: M,
+  ...P
 }) => {
-  const p = () => typeof m == "string" ? m : {
-    0: "gap-0",
-    1: "gap-1",
-    2: "gap-2",
-    3: "gap-3",
-    4: "gap-4",
-    5: "gap-5",
-    6: "gap-6",
-    7: "gap-7",
-    8: "gap-8",
-    9: "gap-9",
-    10: "gap-10",
-    11: "gap-11",
-    12: "gap-12"
-  }[m] || "gap-4", o = {
-    1: "columns-1",
-    2: "columns-2",
-    3: "columns-3",
-    4: "columns-4",
-    5: "columns-5",
-    6: "columns-6",
-    7: "columns-7",
-    8: "columns-8",
-    9: "columns-9",
-    10: "columns-10",
-    11: "columns-11",
-    12: "columns-12"
-  }, x = {
-    1: "sm:columns-1",
-    2: "sm:columns-2",
-    3: "sm:columns-3",
-    4: "sm:columns-4",
-    5: "sm:columns-5",
-    6: "sm:columns-6",
-    7: "sm:columns-7",
-    8: "sm:columns-8",
-    9: "sm:columns-9",
-    10: "sm:columns-10",
-    11: "sm:columns-11",
-    12: "sm:columns-12"
-  }, g = {
-    1: "md:columns-1",
-    2: "md:columns-2",
-    3: "md:columns-3",
-    4: "md:columns-4",
-    5: "md:columns-5",
-    6: "md:columns-6",
-    7: "md:columns-7",
-    8: "md:columns-8",
-    9: "md:columns-9",
-    10: "md:columns-10",
-    11: "md:columns-11",
-    12: "md:columns-12"
-  }, d = {
-    1: "lg:columns-1",
-    2: "lg:columns-2",
-    3: "lg:columns-3",
-    4: "lg:columns-4",
-    5: "lg:columns-5",
-    6: "lg:columns-6",
-    7: "lg:columns-7",
-    8: "lg:columns-8",
-    9: "lg:columns-9",
-    10: "lg:columns-10",
-    11: "lg:columns-11",
-    12: "lg:columns-12"
-  }, e = {
-    1: "xl:columns-1",
-    2: "xl:columns-2",
-    3: "xl:columns-3",
-    4: "xl:columns-4",
-    5: "xl:columns-5",
-    6: "xl:columns-6",
-    7: "xl:columns-7",
-    8: "xl:columns-8",
-    9: "xl:columns-9",
-    10: "xl:columns-10",
-    11: "xl:columns-11",
-    12: "xl:columns-12"
-  }, i = {
-    1: "2xl:columns-1",
-    2: "2xl:columns-2",
-    3: "2xl:columns-3",
-    4: "2xl:columns-4",
-    5: "2xl:columns-5",
-    6: "2xl:columns-6",
-    7: "2xl:columns-7",
-    8: "2xl:columns-8",
-    9: "2xl:columns-9",
-    10: "2xl:columns-10",
-    11: "2xl:columns-11",
-    12: "2xl:columns-12"
-  }, t = [
-    (() => {
-      if (typeof l == "number")
-        return o[l] || "columns-3";
-      const s = [];
-      return l.xs !== void 0 && s.push(o[l.xs] || "columns-3"), l.sm !== void 0 && s.push(x[l.sm] || "sm:columns-3"), l.md !== void 0 && s.push(g[l.md] || "md:columns-3"), l.lg !== void 0 && s.push(d[l.lg] || "lg:columns-3"), l.xl !== void 0 && s.push(e[l.xl] || "xl:columns-3"), l["2xl"] !== void 0 && s.push(i[l["2xl"]] || "2xl:columns-3"), s.join(" ");
-    })(),
-    p(),
-    c
-  ].filter(Boolean).join(" "), r = C.Children.map(u, (s, f) => /* @__PURE__ */ n("div", { className: "break-inside-avoid mb-4", children: s }, f));
-  return /* @__PURE__ */ n("div", { className: t, ...a, children: r });
+  const u = R(null), [l, T] = b([]), [y, N] = b(0), w = R([]), c = I.Children.toArray(t), s = K(() => {
+    const i = u.current;
+    if (!i || c.length === 0) return;
+    const n = i.offsetWidth, m = typeof window < "u" ? window.innerWidth : n, a = L(e, m), j = (n - r * (a - 1)) / a, o = new Array(a).fill(0), W = [];
+    c.forEach((_, x) => {
+      const C = w.current[x];
+      if (!C) return;
+      let h = 0, E = o[0];
+      for (let f = 1; f < a; f++)
+        o[f] < E && (E = o[f], h = f);
+      const k = h * (j + r), B = o[h];
+      W[x] = { left: k, top: B };
+      const F = C.offsetHeight;
+      o[h] += F + r;
+    }), T(W), N(Math.max(...o) - r);
+  }, [t, e, r, c.length]);
+  A(() => {
+    s();
+    const i = () => {
+      s();
+    };
+    return window.addEventListener("resize", i), () => window.removeEventListener("resize", i);
+  }, [s]), A(() => {
+    const i = setTimeout(s, 0);
+    return () => clearTimeout(i);
+  }, [t, s]);
+  const v = u.current?.offsetWidth ?? 0, S = typeof window < "u" ? window.innerWidth : v, g = L(e, S), p = v > 0 ? (v - r * (g - 1)) / g : 0;
+  return /* @__PURE__ */ H(
+    "div",
+    {
+      ref: u,
+      className: z,
+      style: {
+        position: "relative",
+        height: y > 0 ? y : void 0,
+        ...M
+      },
+      ...P,
+      children: c.map((i, n) => /* @__PURE__ */ H(
+        "div",
+        {
+          ref: (m) => {
+            w.current[n] = m;
+          },
+          style: {
+            position: l.length > 0 ? "absolute" : "relative",
+            left: l[n]?.left ?? 0,
+            top: l[n]?.top ?? 0,
+            width: p > 0 ? p : "100%",
+            visibility: l.length > 0 ? "visible" : "hidden"
+          },
+          children: i
+        },
+        n
+      ))
+    }
+  );
 };
-h.displayName = "Masonry";
+O.displayName = "Masonry";
 export {
-  h as Masonry,
-  h as default
+  O as Masonry,
+  O as default
 };
 //# sourceMappingURL=index49.js.map

package/dist/index49.js.map

@@ -1 +1 @@
-{"version":3,"file":"index49.js","sources":["../src/components/Masonry.tsx"],"sourcesContent":["import React from 'react'\n\nexport interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  columns?: number | {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n    xl?: number\n    '2xl'?: number\n  }\n  gap?: number | string\n}\n\nexport const Masonry: React.FC<MasonryProps> = ({\n  children,\n  columns = 3,\n  gap = 4,\n  className = '',\n  ...rest\n}) => {\n  // Map gap values to Tailwind classes\n  const getGapClass = () => {\n    if (typeof gap === 'string') {\n      return gap\n    }\n\n    const gapMap: Record<number, string> = {\n      0: 'gap-0',\n      1: 'gap-1',\n      2: 'gap-2',\n      3: 'gap-3',\n      4: 'gap-4',\n      5: 'gap-5',\n      6: 'gap-6',\n      7: 'gap-7',\n      8: 'gap-8',\n      9: 'gap-9',\n      10: 'gap-10',\n      11: 'gap-11',\n      12: 'gap-12',\n    }\n    return gapMap[gap] || 'gap-4'\n  }\n\n  // Static column class mappings for Tailwind JIT\n  const baseColumnMap: Record<number, string> = {\n    1: 'columns-1',\n    2: 'columns-2',\n    3: 'columns-3',\n    4: 'columns-4',\n    5: 'columns-5',\n    6: 'columns-6',\n    7: 'columns-7',\n    8: 'columns-8',\n    9: 'columns-9',\n    10: 'columns-10',\n    11: 'columns-11',\n    12: 'columns-12',\n  }\n\n  const smColumnMap: Record<number, string> = {\n    1: 'sm:columns-1',\n    2: 'sm:columns-2',\n    3: 'sm:columns-3',\n    4: 'sm:columns-4',\n    5: 'sm:columns-5',\n    6: 'sm:columns-6',\n    7: 'sm:columns-7',\n    8: 'sm:columns-8',\n    9: 'sm:columns-9',\n    10: 'sm:columns-10',\n    11: 'sm:columns-11',\n    12: 'sm:columns-12',\n  }\n\n  const mdColumnMap: Record<number, string> = {\n    1: 'md:columns-1',\n    2: 'md:columns-2',\n    3: 'md:columns-3',\n    4: 'md:columns-4',\n    5: 'md:columns-5',\n    6: 'md:columns-6',\n    7: 'md:columns-7',\n    8: 'md:columns-8',\n    9: 'md:columns-9',\n    10: 'md:columns-10',\n    11: 'md:columns-11',\n    12: 'md:columns-12',\n  }\n\n  const lgColumnMap: Record<number, string> = {\n    1: 'lg:columns-1',\n    2: 'lg:columns-2',\n    3: 'lg:columns-3',\n    4: 'lg:columns-4',\n    5: 'lg:columns-5',\n    6: 'lg:columns-6',\n    7: 'lg:columns-7',\n    8: 'lg:columns-8',\n    9: 'lg:columns-9',\n    10: 'lg:columns-10',\n    11: 'lg:columns-11',\n    12: 'lg:columns-12',\n  }\n\n  const xlColumnMap: Record<number, string> = {\n    1: 'xl:columns-1',\n    2: 'xl:columns-2',\n    3: 'xl:columns-3',\n    4: 'xl:columns-4',\n    5: 'xl:columns-5',\n    6: 'xl:columns-6',\n    7: 'xl:columns-7',\n    8: 'xl:columns-8',\n    9: 'xl:columns-9',\n    10: 'xl:columns-10',\n    11: 'xl:columns-11',\n    12: 'xl:columns-12',\n  }\n\n  const xl2ColumnMap: Record<number, string> = {\n    1: '2xl:columns-1',\n    2: '2xl:columns-2',\n    3: '2xl:columns-3',\n    4: '2xl:columns-4',\n    5: '2xl:columns-5',\n    6: '2xl:columns-6',\n    7: '2xl:columns-7',\n    8: '2xl:columns-8',\n    9: '2xl:columns-9',\n    10: '2xl:columns-10',\n    11: '2xl:columns-11',\n    12: '2xl:columns-12',\n  }\n\n  // Convert columns to Tailwind classes\n  const getColumnClasses = () => {\n    if (typeof columns === 'number') {\n      return baseColumnMap[columns] || 'columns-3'\n    }\n\n    // Handle responsive columns object\n    const classes: string[] = []\n    if (columns.xs !== undefined) classes.push(baseColumnMap[columns.xs] || 'columns-3')\n    if (columns.sm !== undefined) classes.push(smColumnMap[columns.sm] || 'sm:columns-3')\n    if (columns.md !== undefined) classes.push(mdColumnMap[columns.md] || 'md:columns-3')\n    if (columns.lg !== undefined) classes.push(lgColumnMap[columns.lg] || 'lg:columns-3')\n    if (columns.xl !== undefined) classes.push(xlColumnMap[columns.xl] || 'xl:columns-3')\n    if (columns['2xl'] !== undefined) classes.push(xl2ColumnMap[columns['2xl']] || '2xl:columns-3')\n\n    return classes.join(' ')\n  }\n\n  const containerClasses = [\n    getColumnClasses(),\n    getGapClass(),\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Wrap children in break-inside-avoid containers\n  const wrappedChildren = React.Children.map(children, (child, index) => (\n    <div key={index} className=\"break-inside-avoid mb-4\">\n      {child}\n    </div>\n  ))\n\n  return (\n    <div className={containerClasses} {...rest}>\n      {wrappedChildren}\n    </div>\n  )\n}\n\nMasonry.displayName = 'Masonry'\n\nexport default Masonry\n"],"names":["Masonry","children","columns","gap","className","rest","getGapClass","baseColumnMap","smColumnMap","mdColumnMap","lgColumnMap","xlColumnMap","xl2ColumnMap","containerClasses","classes","wrappedChildren","React","child","index","jsx"],"mappings":"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"}
+{"version":3,"file":"index49.js","sources":["../src/components/Masonry.tsx"],"sourcesContent":["import React, { useRef, useState, useLayoutEffect, useCallback } from 'react'\n\nexport interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  columns?:\n    | number\n    | {\n        xs?: number\n        sm?: number\n        md?: number\n        lg?: number\n        xl?: number\n        '2xl'?: number\n      }\n  gap?: number\n}\n\n// Tailwind breakpoints in pixels\nconst BREAKPOINTS = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n}\n\nfunction getColumnsForWidth(\n  columns: MasonryProps['columns'],\n  width: number\n): number {\n  if (typeof columns === 'number') {\n    return columns\n  }\n\n  if (!columns) return 3\n\n  // Find the appropriate column count for current width\n  // Start from largest breakpoint and work down\n  if (columns['2xl'] !== undefined && width >= BREAKPOINTS['2xl']) {\n    return columns['2xl']\n  }\n  if (columns.xl !== undefined && width >= BREAKPOINTS.xl) {\n    return columns.xl\n  }\n  if (columns.lg !== undefined && width >= BREAKPOINTS.lg) {\n    return columns.lg\n  }\n  if (columns.md !== undefined && width >= BREAKPOINTS.md) {\n    return columns.md\n  }\n  if (columns.sm !== undefined && width >= BREAKPOINTS.sm) {\n    return columns.sm\n  }\n  if (columns.xs !== undefined) {\n    return columns.xs\n  }\n\n  // Default fallback\n  return 3\n}\n\nexport const Masonry: React.FC<MasonryProps> = ({\n  children,\n  columns = 3,\n  gap = 16,\n  className = '',\n  style,\n  ...rest\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [positions, setPositions] = useState<\n    Array<{ left: number; top: number }>\n  >([])\n  const [containerHeight, setContainerHeight] = useState(0)\n  const itemRefs = useRef<(HTMLDivElement | null)[]>([])\n\n  const childArray = React.Children.toArray(children)\n\n  const calculateLayout = useCallback(() => {\n    const container = containerRef.current\n    if (!container || childArray.length === 0) return\n\n    const containerWidth = container.offsetWidth\n    // Use viewport width for responsive breakpoints (matches Tailwind behavior)\n    const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n    const numColumns = getColumnsForWidth(columns, viewportWidth)\n    const columnWidth = (containerWidth - gap * (numColumns - 1)) / numColumns\n\n    // Track height of each column\n    const columnHeights = new Array(numColumns).fill(0)\n    const newPositions: Array<{ left: number; top: number }> = []\n\n    // Place each item in the shortest column\n    childArray.forEach((_, index) => {\n      const itemEl = itemRefs.current[index]\n      if (!itemEl) return\n\n      // Find shortest column\n      let shortestColumn = 0\n      let minHeight = columnHeights[0]\n      for (let i = 1; i < numColumns; i++) {\n        if (columnHeights[i] < minHeight) {\n          minHeight = columnHeights[i]\n          shortestColumn = i\n        }\n      }\n\n      // Calculate position\n      const left = shortestColumn * (columnWidth + gap)\n      const top = columnHeights[shortestColumn]\n\n      newPositions[index] = { left, top }\n\n      // Update column height\n      const itemHeight = itemEl.offsetHeight\n      columnHeights[shortestColumn] += itemHeight + gap\n    })\n\n    setPositions(newPositions)\n    setContainerHeight(Math.max(...columnHeights) - gap)\n  }, [children, columns, gap, childArray.length])\n\n  // Calculate layout after render and on resize\n  useLayoutEffect(() => {\n    calculateLayout()\n\n    const handleResize = () => {\n      calculateLayout()\n    }\n\n    window.addEventListener('resize', handleResize)\n    return () => window.removeEventListener('resize', handleResize)\n  }, [calculateLayout])\n\n  // Recalculate when children change\n  useLayoutEffect(() => {\n    // Small delay to ensure refs are populated\n    const timer = setTimeout(calculateLayout, 0)\n    return () => clearTimeout(timer)\n  }, [children, calculateLayout])\n\n  const containerWidth = containerRef.current?.offsetWidth ?? 0\n  const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : containerWidth\n  const numColumns = getColumnsForWidth(columns, viewportWidth)\n  const columnWidth =\n    containerWidth > 0\n      ? (containerWidth - gap * (numColumns - 1)) / numColumns\n      : 0\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={{\n        position: 'relative',\n        height: containerHeight > 0 ? containerHeight : undefined,\n        ...style,\n      }}\n      {...rest}\n    >\n      {childArray.map((child, index) => (\n        <div\n          key={index}\n          ref={(el) => {\n            itemRefs.current[index] = el\n          }}\n          style={{\n            position: positions.length > 0 ? 'absolute' : 'relative',\n            left: positions[index]?.left ?? 0,\n            top: positions[index]?.top ?? 0,\n            width: columnWidth > 0 ? columnWidth : '100%',\n            visibility: positions.length > 0 ? 'visible' : 'hidden',\n          }}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nMasonry.displayName = 'Masonry'\n\nexport default Masonry\n"],"names":["BREAKPOINTS","getColumnsForWidth","columns","width","Masonry","children","gap","className","style","rest","containerRef","useRef","positions","setPositions","useState","containerHeight","setContainerHeight","itemRefs","childArray","React","calculateLayout","useCallback","container","containerWidth","viewportWidth","numColumns","columnWidth","columnHeights","newPositions","index","itemEl","shortestColumn","minHeight","i","left","top","itemHeight","useLayoutEffect","handleResize","timer","jsx","child","el"],"mappings":"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"}

package/package.json

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