asterui 0.12.61 → 0.12.63

package/dist/components/Join.js.map

@@ -1 +1 @@
-{"version":3,"file":"Join.js","sources":["../../src/components/Join.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dJoin = 'join'\nconst dJoinVertical = 'join-vertical'\nconst dJoinItem = 'join-item'\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 = [dJoin, direction === 'vertical' && dJoinVertical, 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 ? `${dJoinItem} ${existingClassName}` : dJoinItem\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":["dJoin","dJoinVertical","dJoinItem","Join","children","direction","className","rest","classes","childrenWithJoinItem","React","child","existingClassName","newClassName"],"mappings":";;AAGA,MAAMA,IAAQ,QACRC,IAAgB,iBAChBC,IAAY;AAOX,SAASC,EAAK,EAAE,UAAAC,GAAU,WAAAC,IAAY,cAAc,WAAAC,IAAY,IAAI,GAAGC,KAAmB;AAC/F,QAAMC,IAAU,CAACR,GAAOK,MAAc,cAAcJ,GAAeK,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAGhGG,IAAuBC,EAAM,SAAS,IAAIN,GAAU,CAACO,MAAU;AACnE,QAAID,EAAM,eAAeC,CAAK,GAAG;AAC/B,YAAMC,IAAqBD,EAAM,MAAc,aAAa,IACtDE,IAAeD,IAAoB,GAAGV,CAAS,IAAIU,CAAiB,KAAKV;AAE/E,aAAOQ,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":"Join.js","sources":["../../src/components/Join.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dJoin = 'join'\nconst dJoinVertical = 'join-vertical'\nconst dJoinItem = 'join-item'\n\nexport interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode\n  direction?: 'horizontal' | 'vertical'\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nexport function Join({ children, direction = 'horizontal', className = '', ...rest }: JoinProps) {\n  const classes = [dJoin, direction === 'vertical' && dJoinVertical, 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 ? `${dJoinItem} ${existingClassName}` : dJoinItem\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":["dJoin","dJoinVertical","dJoinItem","Join","children","direction","className","rest","classes","childrenWithJoinItem","React","child","existingClassName","newClassName"],"mappings":";;AAGA,MAAMA,IAAQ,QACRC,IAAgB,iBAChBC,IAAY;AASX,SAASC,EAAK,EAAE,UAAAC,GAAU,WAAAC,IAAY,cAAc,WAAAC,IAAY,IAAI,GAAGC,KAAmB;AAC/F,QAAMC,IAAU,CAACR,GAAOK,MAAc,cAAcJ,GAAeK,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAGhGG,IAAuBC,EAAM,SAAS,IAAIN,GAAU,CAACO,MAAU;AACnE,QAAID,EAAM,eAAeC,CAAK,GAAG;AAC/B,YAAMC,IAAqBD,EAAM,MAAc,aAAa,IACtDE,IAAeD,IAAoB,GAAGV,CAAS,IAAIU,CAAiB,KAAKV;AAE/E,aAAOQ,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/components/Kbd.d.ts

@@ -5,5 +5,7 @@ export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
     size?: KbdSize;
     /** Key content */
     children?: React.ReactNode;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
 export declare const Kbd: React.FC<KbdProps>;

package/dist/components/Kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"Kbd.js","sources":["../../src/components/Kbd.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dKbd = 'kbd'\nconst dKbdXs = 'kbd-xs'\nconst dKbdSm = 'kbd-sm'\nconst dKbdMd = 'kbd-md'\nconst dKbdLg = 'kbd-lg'\nconst dKbdXl = 'kbd-xl'\n\nexport type KbdSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  /** Size of the kbd */\n  size?: KbdSize\n  /** Key content */\n  children?: React.ReactNode\n}\n\nconst sizeClasses: Record<KbdSize, string> = {\n  xs: dKbdXs,\n  sm: dKbdSm,\n  md: dKbdMd,\n  lg: dKbdLg,\n  xl: dKbdXl,\n}\n\nexport const Kbd: React.FC<KbdProps> = ({\n  size,\n  children,\n  className = '',\n  ...rest\n}) => {\n  const classes = [dKbd, size ? sizeClasses[size] : '', className]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <kbd className={classes} {...rest}>\n      {children}\n    </kbd>\n  )\n}\n"],"names":["dKbd","dKbdXs","dKbdSm","dKbdMd","dKbdLg","dKbdXl","sizeClasses","Kbd","size","children","className","rest","classes"],"mappings":";AAGA,MAAMA,IAAO,OACPC,IAAS,UACTC,IAAS,UACTC,IAAS,UACTC,IAAS,UACTC,IAAS,UAWTC,IAAuC;AAAA,EAC3C,IAAIL;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AACN,GAEaE,IAA0B,CAAC;AAAA,EACtC,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAU,CAACZ,GAAMQ,IAAOF,EAAYE,CAAI,IAAI,IAAIE,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWE,GAAU,GAAGD,GAC1B,UAAAF,GACH;AAEJ;"}
+{"version":3,"file":"Kbd.js","sources":["../../src/components/Kbd.tsx"],"sourcesContent":["import React from 'react'\n\n// DaisyUI classes\nconst dKbd = 'kbd'\nconst dKbdXs = 'kbd-xs'\nconst dKbdSm = 'kbd-sm'\nconst dKbdMd = 'kbd-md'\nconst dKbdLg = 'kbd-lg'\nconst dKbdXl = 'kbd-xl'\n\nexport type KbdSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  /** Size of the kbd */\n  size?: KbdSize\n  /** Key content */\n  children?: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nconst sizeClasses: Record<KbdSize, string> = {\n  xs: dKbdXs,\n  sm: dKbdSm,\n  md: dKbdMd,\n  lg: dKbdLg,\n  xl: dKbdXl,\n}\n\nexport const Kbd: React.FC<KbdProps> = ({\n  size,\n  children,\n  className = '',\n  ...rest\n}) => {\n  const classes = [dKbd, size ? sizeClasses[size] : '', className]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <kbd className={classes} {...rest}>\n      {children}\n    </kbd>\n  )\n}\n"],"names":["dKbd","dKbdXs","dKbdSm","dKbdMd","dKbdLg","dKbdXl","sizeClasses","Kbd","size","children","className","rest","classes"],"mappings":";AAGA,MAAMA,IAAO,OACPC,IAAS,UACTC,IAAS,UACTC,IAAS,UACTC,IAAS,UACTC,IAAS,UAaTC,IAAuC;AAAA,EAC3C,IAAIL;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AAAA,EACJ,IAAIC;AACN,GAEaE,IAA0B,CAAC;AAAA,EACtC,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAU,CAACZ,GAAMQ,IAAOF,EAAYE,CAAI,IAAI,IAAIE,CAAS,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWE,GAAU,GAAGD,GAC1B,UAAAF,GACH;AAEJ;"}

package/dist/components/Loading.d.ts

@@ -5,5 +5,8 @@ export interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {
     spinning?: boolean;
     children?: React.ReactNode;
     tip?: string;
+    /** Accessible label for the loading indicator (defaults to tip or "Loading") */
+    label?: string;
+    'data-testid'?: string;
 }
 export declare const Loading: React.FC<LoadingProps>;

package/dist/components/Loading.js

@@ -1,40 +1,63 @@
-import { jsxs as e, jsx as n } from "react/jsx-runtime";
-import { useConfig as f } from "../providers/ConfigProvider.js";
-const L = "loading", p = "loading-xs", x = "loading-sm", b = "loading-md", u = "loading-lg", N = "loading-xl", v = "loading-spinner", y = "loading-dots", C = "loading-ring", h = "loading-ball", j = "loading-bars", z = "loading-infinity", k = ({
-  size: l,
-  type: t = "spinner",
-  className: c = "",
-  spinning: o = !0,
-  children: a,
-  tip: s,
-  ...i
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { useConfig as b } from "../providers/ConfigProvider.js";
+const v = "loading", y = "loading-xs", N = "loading-sm", h = "loading-md", C = "loading-lg", j = "loading-xl", z = "loading-spinner", S = "loading-dots", B = "loading-ring", X = "loading-ball", $ = "loading-bars", k = "loading-infinity", T = ({
+  size: c,
+  type: g = "spinner",
+  className: m = "",
+  spinning: e = !0,
+  children: d,
+  tip: a,
+  label: f,
+  "data-testid": i,
+  ...o
 }) => {
-  const { componentSize: r } = f(), g = l ?? r ?? "md", m = {
-    xs: p,
-    sm: x,
-    md: b,
-    lg: u,
-    xl: N
-  }, d = [L, {
-    spinner: v,
-    dots: y,
-    ring: C,
-    ball: h,
-    bars: j,
-    infinity: z
-  }[t], m[g], c].filter(Boolean).join(" ");
-  return a ? /* @__PURE__ */ e("div", { className: "relative", ...i, children: [
-    o && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10", children: [
-      /* @__PURE__ */ n("span", { className: d }),
-      s && /* @__PURE__ */ n("p", { className: "mt-2 text-sm", children: s })
-    ] }),
-    /* @__PURE__ */ n("div", { className: o ? "pointer-events-none" : "", children: a })
-  ] }) : o ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", ...i, children: [
-    /* @__PURE__ */ n("span", { className: d }),
-    s && /* @__PURE__ */ n("p", { className: "text-sm", children: s })
-  ] }) : null;
+  const { componentSize: p } = b(), L = c ?? p ?? "md", l = f || a || "Loading", u = {
+    xs: y,
+    sm: N,
+    md: h,
+    lg: C,
+    xl: j
+  }, r = [v, {
+    spinner: z,
+    dots: S,
+    ring: B,
+    ball: X,
+    bars: $,
+    infinity: k
+  }[g], u[L], m].filter(Boolean).join(" "), n = (x) => i ? `${i}-${x}` : void 0;
+  return d ? /* @__PURE__ */ t("div", { className: "relative", "aria-busy": e, "data-testid": i, ...o, children: [
+    e && /* @__PURE__ */ t(
+      "div",
+      {
+        className: "absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10",
+        role: "status",
+        "aria-live": "polite",
+        "data-testid": n("overlay"),
+        children: [
+          /* @__PURE__ */ s("span", { className: r, "aria-hidden": "true", "data-testid": n("spinner") }),
+          a && /* @__PURE__ */ s("p", { className: "mt-2 text-sm", "data-testid": n("tip"), children: a }),
+          !a && /* @__PURE__ */ s("span", { className: "sr-only", children: l })
+        ]
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: e ? "pointer-events-none" : "", "aria-hidden": e, "data-testid": n("content"), children: d })
+  ] }) : e ? /* @__PURE__ */ t(
+    "div",
+    {
+      className: "flex flex-col items-center gap-2",
+      role: "status",
+      "aria-live": "polite",
+      "data-testid": i,
+      ...o,
+      children: [
+        /* @__PURE__ */ s("span", { className: r, "aria-hidden": "true", "data-testid": n("spinner") }),
+        a && /* @__PURE__ */ s("p", { className: "text-sm", "data-testid": n("tip"), children: a }),
+        !a && /* @__PURE__ */ s("span", { className: "sr-only", children: l })
+      ]
+    }
+  ) : null;
 };
 export {
-  k as Loading
+  T as Loading
 };
 //# sourceMappingURL=Loading.js.map

package/dist/components/Loading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loading.js","sources":["../../src/components/Loading.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\n\n// DaisyUI classes\nconst dLoading = 'loading'\nconst dLoadingXs = 'loading-xs'\nconst dLoadingSm = 'loading-sm'\nconst dLoadingMd = 'loading-md'\nconst dLoadingLg = 'loading-lg'\nconst dLoadingXl = 'loading-xl'\nconst dLoadingSpinner = 'loading-spinner'\nconst dLoadingDots = 'loading-dots'\nconst dLoadingRing = 'loading-ring'\nconst dLoadingBall = 'loading-ball'\nconst dLoadingBars = 'loading-bars'\nconst dLoadingInfinity = 'loading-infinity'\n\nexport interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'\n  spinning?: boolean\n  children?: React.ReactNode\n  tip?: string\n}\n\nexport const Loading: React.FC<LoadingProps> = ({\n  size,\n  type = 'spinner',\n  className = '',\n  spinning = true,\n  children,\n  tip,\n  ...rest\n}) => {\n  const { componentSize } = useConfig()\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const sizeClasses = {\n    xs: dLoadingXs,\n    sm: dLoadingSm,\n    md: dLoadingMd,\n    lg: dLoadingLg,\n    xl: dLoadingXl,\n  }\n\n  const typeClasses = {\n    spinner: dLoadingSpinner,\n    dots: dLoadingDots,\n    ring: dLoadingRing,\n    ball: dLoadingBall,\n    bars: dLoadingBars,\n    infinity: dLoadingInfinity,\n  }\n\n  const spinnerClasses = [dLoading, typeClasses[type], sizeClasses[effectiveSize], className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (children) {\n    return (\n      <div className=\"relative\" {...rest}>\n        {spinning && (\n          <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10\">\n            <span className={spinnerClasses}></span>\n            {tip && <p className=\"mt-2 text-sm\">{tip}</p>}\n          </div>\n        )}\n        <div className={spinning ? 'pointer-events-none' : ''}>{children}</div>\n      </div>\n    )\n  }\n\n  if (!spinning) {\n    return null\n  }\n\n  return (\n    <div className=\"flex flex-col items-center gap-2\" {...rest}>\n      <span className={spinnerClasses}></span>\n      {tip && <p className=\"text-sm\">{tip}</p>}\n    </div>\n  )\n}\n"],"names":["dLoading","dLoadingXs","dLoadingSm","dLoadingMd","dLoadingLg","dLoadingXl","dLoadingSpinner","dLoadingDots","dLoadingRing","dLoadingBall","dLoadingBars","dLoadingInfinity","Loading","size","type","className","spinning","children","tip","rest","componentSize","useConfig","effectiveSize","sizeClasses","spinnerClasses","jsxs","jsx"],"mappings":";;AAIA,MAAMA,IAAW,WACXC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAkB,mBAClBC,IAAe,gBACfC,IAAe,gBACfC,IAAe,gBACfC,IAAe,gBACfC,IAAmB,oBAUZC,IAAkC,CAAC;AAAA,EAC9C,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAgBT,KAAQO,KAAiB,MAEzCG,IAAc;AAAA,IAClB,IAAItB;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,EAAA,GAYAmB,IAAiB,CAACxB,GATJ;AAAA,IAClB,SAASM;AAAA,IACT,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,UAAUC;AAAA,EAAA,EAGkCG,CAAI,GAAGS,EAAYD,CAAa,GAAGP,CAAS,EACvF,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SAAIE,IAEA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,YAAY,GAAGN,GAC3B,UAAA;AAAA,IAAAH,KACC,gBAAAS,EAAC,OAAA,EAAI,WAAU,mGACb,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAgB;AAAA,MAChCN,KAAO,gBAAAQ,EAAC,KAAA,EAAE,WAAU,gBAAgB,UAAAR,EAAA,CAAI;AAAA,IAAA,GAC3C;AAAA,sBAED,OAAA,EAAI,WAAWF,IAAW,wBAAwB,IAAK,UAAAC,EAAA,CAAS;AAAA,EAAA,GACnE,IAICD,IAKH,gBAAAS,EAAC,OAAA,EAAI,WAAU,oCAAoC,GAAGN,GACpD,UAAA;AAAA,IAAA,gBAAAO,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAgB;AAAA,IAChCN,KAAO,gBAAAQ,EAAC,KAAA,EAAE,WAAU,WAAW,UAAAR,EAAA,CAAI;AAAA,EAAA,GACtC,IAPO;AASX;"}
+{"version":3,"file":"Loading.js","sources":["../../src/components/Loading.tsx"],"sourcesContent":["import React from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\n\n// DaisyUI classes\nconst dLoading = 'loading'\nconst dLoadingXs = 'loading-xs'\nconst dLoadingSm = 'loading-sm'\nconst dLoadingMd = 'loading-md'\nconst dLoadingLg = 'loading-lg'\nconst dLoadingXl = 'loading-xl'\nconst dLoadingSpinner = 'loading-spinner'\nconst dLoadingDots = 'loading-dots'\nconst dLoadingRing = 'loading-ring'\nconst dLoadingBall = 'loading-ball'\nconst dLoadingBars = 'loading-bars'\nconst dLoadingInfinity = 'loading-infinity'\n\nexport interface LoadingProps extends React.HTMLAttributes<HTMLDivElement> {\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  type?: 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'\n  spinning?: boolean\n  children?: React.ReactNode\n  tip?: string\n  /** Accessible label for the loading indicator (defaults to tip or \"Loading\") */\n  label?: string\n  'data-testid'?: string\n}\n\nexport const Loading: React.FC<LoadingProps> = ({\n  size,\n  type = 'spinner',\n  className = '',\n  spinning = true,\n  children,\n  tip,\n  label,\n  'data-testid': testId,\n  ...rest\n}) => {\n  const { componentSize } = useConfig()\n  const effectiveSize = size ?? componentSize ?? 'md'\n  const accessibleLabel = label || tip || 'Loading'\n\n  const sizeClasses = {\n    xs: dLoadingXs,\n    sm: dLoadingSm,\n    md: dLoadingMd,\n    lg: dLoadingLg,\n    xl: dLoadingXl,\n  }\n\n  const typeClasses = {\n    spinner: dLoadingSpinner,\n    dots: dLoadingDots,\n    ring: dLoadingRing,\n    ball: dLoadingBall,\n    bars: dLoadingBars,\n    infinity: dLoadingInfinity,\n  }\n\n  const spinnerClasses = [dLoading, typeClasses[type], sizeClasses[effectiveSize], className]\n    .filter(Boolean)\n    .join(' ')\n  const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n  if (children) {\n    return (\n      <div className=\"relative\" aria-busy={spinning} data-testid={testId} {...rest}>\n        {spinning && (\n          <div\n            className=\"absolute inset-0 flex flex-col items-center justify-center bg-base-100/50 backdrop-blur-sm z-10\"\n            role=\"status\"\n            aria-live=\"polite\"\n            data-testid={getTestId('overlay')}\n          >\n            <span className={spinnerClasses} aria-hidden=\"true\" data-testid={getTestId('spinner')}></span>\n            {tip && <p className=\"mt-2 text-sm\" data-testid={getTestId('tip')}>{tip}</p>}\n            {!tip && <span className=\"sr-only\">{accessibleLabel}</span>}\n          </div>\n        )}\n        <div className={spinning ? 'pointer-events-none' : ''} aria-hidden={spinning} data-testid={getTestId('content')}>\n          {children}\n        </div>\n      </div>\n    )\n  }\n\n  if (!spinning) {\n    return null\n  }\n\n  return (\n    <div\n      className=\"flex flex-col items-center gap-2\"\n      role=\"status\"\n      aria-live=\"polite\"\n      data-testid={testId}\n      {...rest}\n    >\n      <span className={spinnerClasses} aria-hidden=\"true\" data-testid={getTestId('spinner')}></span>\n      {tip && <p className=\"text-sm\" data-testid={getTestId('tip')}>{tip}</p>}\n      {!tip && <span className=\"sr-only\">{accessibleLabel}</span>}\n    </div>\n  )\n}\n"],"names":["dLoading","dLoadingXs","dLoadingSm","dLoadingMd","dLoadingLg","dLoadingXl","dLoadingSpinner","dLoadingDots","dLoadingRing","dLoadingBall","dLoadingBars","dLoadingInfinity","Loading","size","type","className","spinning","children","tip","label","testId","rest","componentSize","useConfig","effectiveSize","accessibleLabel","sizeClasses","spinnerClasses","getTestId","suffix","jsxs","jsx"],"mappings":";;AAIA,MAAMA,IAAW,WACXC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAa,cACbC,IAAkB,mBAClBC,IAAe,gBACfC,IAAe,gBACfC,IAAe,gBACfC,IAAe,gBACfC,IAAmB,oBAaZC,IAAkC,CAAC;AAAA,EAC9C,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GACpBC,IAAgBX,KAAQS,KAAiB,MACzCG,IAAkBN,KAASD,KAAO,WAElCQ,IAAc;AAAA,IAClB,IAAIzB;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,IACJ,IAAIC;AAAA,EAAA,GAYAsB,IAAiB,CAAC3B,GATJ;AAAA,IAClB,SAASM;AAAA,IACT,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,MAAMC;AAAA,IACN,UAAUC;AAAA,EAAA,EAGkCG,CAAI,GAAGY,EAAYF,CAAa,GAAGT,CAAS,EACvF,OAAO,OAAO,EACd,KAAK,GAAG,GACLa,IAAY,CAACC,MAAoBT,IAAS,GAAGA,CAAM,IAAIS,CAAM,KAAK;AAExE,SAAIZ,IAEA,gBAAAa,EAAC,SAAI,WAAU,YAAW,aAAWd,GAAU,eAAaI,GAAS,GAAGC,GACrE,UAAA;AAAA,IAAAL,KACC,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,MAAK;AAAA,QACL,aAAU;AAAA,QACV,eAAaF,EAAU,SAAS;AAAA,QAEhC,UAAA;AAAA,UAAA,gBAAAG,EAAC,QAAA,EAAK,WAAWJ,GAAgB,eAAY,QAAO,eAAaC,EAAU,SAAS,GAAG;AAAA,UACtFV,uBAAQ,KAAA,EAAE,WAAU,gBAAe,eAAaU,EAAU,KAAK,GAAI,UAAAV,EAAA,CAAI;AAAA,UACvE,CAACA,KAAO,gBAAAa,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,EAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGxD,gBAAAM,EAAC,OAAA,EAAI,WAAWf,IAAW,wBAAwB,IAAI,eAAaA,GAAU,eAAaY,EAAU,SAAS,GAC3G,UAAAX,EAAA,CACH;AAAA,EAAA,GACF,IAICD,IAKH,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAaV;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU,EAAC,QAAA,EAAK,WAAWJ,GAAgB,eAAY,QAAO,eAAaC,EAAU,SAAS,GAAG;AAAA,QACtFV,uBAAQ,KAAA,EAAE,WAAU,WAAU,eAAaU,EAAU,KAAK,GAAI,UAAAV,EAAA,CAAI;AAAA,QAClE,CAACA,KAAO,gBAAAa,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAN,EAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAb/C;AAgBX;"}

package/dist/components/Mask.d.ts

@@ -8,7 +8,7 @@ export interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {
     half?: MaskHalf;
     /** Content to mask (typically an image) */
     children: React.ReactNode;
-    /** Additional CSS classes */
-    className?: string;
+    /** Test ID for testing */
+    'data-testid'?: string;
 }
 export declare const Mask: React.ForwardRefExoticComponent<MaskProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Mask.js.map

@@ -1 +1 @@
-{"version":3,"file":"Mask.js","sources":["../../src/components/Mask.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\n// DaisyUI classes\nconst dMask = 'mask'\nconst dMaskSquircle = 'mask-squircle'\nconst dMaskHeart = 'mask-heart'\nconst dMaskHexagon = 'mask-hexagon'\nconst dMaskHexagon2 = 'mask-hexagon-2'\nconst dMaskDecagon = 'mask-decagon'\nconst dMaskPentagon = 'mask-pentagon'\nconst dMaskDiamond = 'mask-diamond'\nconst dMaskSquare = 'mask-square'\nconst dMaskCircle = 'mask-circle'\nconst dMaskStar = 'mask-star'\nconst dMaskStar2 = 'mask-star-2'\nconst dMaskTriangle = 'mask-triangle'\nconst dMaskTriangle2 = 'mask-triangle-2'\nconst dMaskTriangle3 = 'mask-triangle-3'\nconst dMaskTriangle4 = 'mask-triangle-4'\nconst dMaskHalf1 = 'mask-half-1'\nconst dMaskHalf2 = 'mask-half-2'\n\nexport type MaskShape =\n  | 'squircle'\n  | 'heart'\n  | 'hexagon'\n  | 'hexagon-2'\n  | 'decagon'\n  | 'pentagon'\n  | 'diamond'\n  | 'square'\n  | 'circle'\n  | 'star'\n  | 'star-2'\n  | 'triangle'\n  | 'triangle-2'\n  | 'triangle-3'\n  | 'triangle-4'\n\nexport type MaskHalf = 'half-1' | 'half-2'\n\nexport interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Shape of the mask */\n  shape: MaskShape\n  /** Show only half of the mask */\n  half?: MaskHalf\n  /** Content to mask (typically an image) */\n  children: React.ReactNode\n  /** Additional CSS classes */\n  className?: string\n}\n\nconst shapeClasses: Record<MaskShape, string> = {\n  squircle: dMaskSquircle,\n  heart: dMaskHeart,\n  hexagon: dMaskHexagon,\n  'hexagon-2': dMaskHexagon2,\n  decagon: dMaskDecagon,\n  pentagon: dMaskPentagon,\n  diamond: dMaskDiamond,\n  square: dMaskSquare,\n  circle: dMaskCircle,\n  star: dMaskStar,\n  'star-2': dMaskStar2,\n  triangle: dMaskTriangle,\n  'triangle-2': dMaskTriangle2,\n  'triangle-3': dMaskTriangle3,\n  'triangle-4': dMaskTriangle4,\n}\n\nconst halfClasses: Record<MaskHalf, string> = {\n  'half-1': dMaskHalf1,\n  'half-2': dMaskHalf2,\n}\n\nexport const Mask = forwardRef<HTMLDivElement, MaskProps>(\n  ({ shape, half, children, className = '', ...props }, ref) => {\n    const classes = [\n      dMask,\n      shapeClasses[shape],\n      half ? halfClasses[half] : '',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  }\n)\n\nMask.displayName = 'Mask'\n"],"names":["dMask","dMaskSquircle","dMaskHeart","dMaskHexagon","dMaskHexagon2","dMaskDecagon","dMaskPentagon","dMaskDiamond","dMaskSquare","dMaskCircle","dMaskStar","dMaskStar2","dMaskTriangle","dMaskTriangle2","dMaskTriangle3","dMaskTriangle4","dMaskHalf1","dMaskHalf2","shapeClasses","halfClasses","Mask","forwardRef","shape","half","children","className","props","ref","classes"],"mappings":";;AAGA,MAAMA,IAAQ,QACRC,IAAgB,iBAChBC,IAAa,cACbC,IAAe,gBACfC,IAAgB,kBAChBC,IAAe,gBACfC,IAAgB,iBAChBC,IAAe,gBACfC,IAAc,eACdC,IAAc,eACdC,IAAY,aACZC,IAAa,eACbC,IAAgB,iBAChBC,IAAiB,mBACjBC,IAAiB,mBACjBC,IAAiB,mBACjBC,IAAa,eACbC,IAAa,eAgCbC,IAA0C;AAAA,EAC9C,UAAUjB;AAAA,EACV,OAAOC;AAAA,EACP,SAASC;AAAA,EACT,aAAaC;AAAA,EACb,SAASC;AAAA,EACT,UAAUC;AAAA,EACV,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,UAAUC;AAAA,EACV,UAAUC;AAAA,EACV,cAAcC;AAAA,EACd,cAAcC;AAAA,EACd,cAAcC;AAChB,GAEMI,IAAwC;AAAA,EAC5C,UAAUH;AAAA,EACV,UAAUC;AACZ,GAEaG,IAAOC;AAAA,EAClB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,EAAA,GAASC,MAAQ;AAC5D,UAAMC,IAAU;AAAA,MACd5B;AAAA,MACAkB,EAAaI,CAAK;AAAA,MAClBC,IAAOJ,EAAYI,CAAI,IAAI;AAAA,MAC3BE;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,6BACG,OAAA,EAAI,KAAAE,GAAU,WAAWC,GAAU,GAAGF,GACpC,UAAAF,GACH;AAAA,EAEJ;AACF;AAEAJ,EAAK,cAAc;"}
+{"version":3,"file":"Mask.js","sources":["../../src/components/Mask.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\n// DaisyUI classes\nconst dMask = 'mask'\nconst dMaskSquircle = 'mask-squircle'\nconst dMaskHeart = 'mask-heart'\nconst dMaskHexagon = 'mask-hexagon'\nconst dMaskHexagon2 = 'mask-hexagon-2'\nconst dMaskDecagon = 'mask-decagon'\nconst dMaskPentagon = 'mask-pentagon'\nconst dMaskDiamond = 'mask-diamond'\nconst dMaskSquare = 'mask-square'\nconst dMaskCircle = 'mask-circle'\nconst dMaskStar = 'mask-star'\nconst dMaskStar2 = 'mask-star-2'\nconst dMaskTriangle = 'mask-triangle'\nconst dMaskTriangle2 = 'mask-triangle-2'\nconst dMaskTriangle3 = 'mask-triangle-3'\nconst dMaskTriangle4 = 'mask-triangle-4'\nconst dMaskHalf1 = 'mask-half-1'\nconst dMaskHalf2 = 'mask-half-2'\n\nexport type MaskShape =\n  | 'squircle'\n  | 'heart'\n  | 'hexagon'\n  | 'hexagon-2'\n  | 'decagon'\n  | 'pentagon'\n  | 'diamond'\n  | 'square'\n  | 'circle'\n  | 'star'\n  | 'star-2'\n  | 'triangle'\n  | 'triangle-2'\n  | 'triangle-3'\n  | 'triangle-4'\n\nexport type MaskHalf = 'half-1' | 'half-2'\n\nexport interface MaskProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Shape of the mask */\n  shape: MaskShape\n  /** Show only half of the mask */\n  half?: MaskHalf\n  /** Content to mask (typically an image) */\n  children: React.ReactNode\n  /** Test ID for testing */\n  'data-testid'?: string\n}\n\nconst shapeClasses: Record<MaskShape, string> = {\n  squircle: dMaskSquircle,\n  heart: dMaskHeart,\n  hexagon: dMaskHexagon,\n  'hexagon-2': dMaskHexagon2,\n  decagon: dMaskDecagon,\n  pentagon: dMaskPentagon,\n  diamond: dMaskDiamond,\n  square: dMaskSquare,\n  circle: dMaskCircle,\n  star: dMaskStar,\n  'star-2': dMaskStar2,\n  triangle: dMaskTriangle,\n  'triangle-2': dMaskTriangle2,\n  'triangle-3': dMaskTriangle3,\n  'triangle-4': dMaskTriangle4,\n}\n\nconst halfClasses: Record<MaskHalf, string> = {\n  'half-1': dMaskHalf1,\n  'half-2': dMaskHalf2,\n}\n\nexport const Mask = forwardRef<HTMLDivElement, MaskProps>(\n  ({ shape, half, children, className = '', ...props }, ref) => {\n    const classes = [\n      dMask,\n      shapeClasses[shape],\n      half ? halfClasses[half] : '',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    )\n  }\n)\n\nMask.displayName = 'Mask'\n"],"names":["dMask","dMaskSquircle","dMaskHeart","dMaskHexagon","dMaskHexagon2","dMaskDecagon","dMaskPentagon","dMaskDiamond","dMaskSquare","dMaskCircle","dMaskStar","dMaskStar2","dMaskTriangle","dMaskTriangle2","dMaskTriangle3","dMaskTriangle4","dMaskHalf1","dMaskHalf2","shapeClasses","halfClasses","Mask","forwardRef","shape","half","children","className","props","ref","classes"],"mappings":";;AAGA,MAAMA,IAAQ,QACRC,IAAgB,iBAChBC,IAAa,cACbC,IAAe,gBACfC,IAAgB,kBAChBC,IAAe,gBACfC,IAAgB,iBAChBC,IAAe,gBACfC,IAAc,eACdC,IAAc,eACdC,IAAY,aACZC,IAAa,eACbC,IAAgB,iBAChBC,IAAiB,mBACjBC,IAAiB,mBACjBC,IAAiB,mBACjBC,IAAa,eACbC,IAAa,eAgCbC,IAA0C;AAAA,EAC9C,UAAUjB;AAAA,EACV,OAAOC;AAAA,EACP,SAASC;AAAA,EACT,aAAaC;AAAA,EACb,SAASC;AAAA,EACT,UAAUC;AAAA,EACV,SAASC;AAAA,EACT,QAAQC;AAAA,EACR,QAAQC;AAAA,EACR,MAAMC;AAAA,EACN,UAAUC;AAAA,EACV,UAAUC;AAAA,EACV,cAAcC;AAAA,EACd,cAAcC;AAAA,EACd,cAAcC;AAChB,GAEMI,IAAwC;AAAA,EAC5C,UAAUH;AAAA,EACV,UAAUC;AACZ,GAEaG,IAAOC;AAAA,EAClB,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,UAAAC,GAAU,WAAAC,IAAY,IAAI,GAAGC,EAAA,GAASC,MAAQ;AAC5D,UAAMC,IAAU;AAAA,MACd5B;AAAA,MACAkB,EAAaI,CAAK;AAAA,MAClBC,IAAOJ,EAAYI,CAAI,IAAI;AAAA,MAC3BE;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,6BACG,OAAA,EAAI,KAAAE,GAAU,WAAWC,GAAU,GAAGF,GACpC,UAAAF,GACH;AAAA,EAEJ;AACF;AAEAJ,EAAK,cAAc;"}

package/dist/components/Masonry.d.ts

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

package/dist/components/Masonry.js

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

package/dist/components/Masonry.js.map

@@ -1 +1 @@
-{"version":3,"file":"Masonry.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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"}
+{"version":3,"file":"Masonry.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  'data-testid'?: string\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  'data-testid': testId,\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  const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\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      data-testid={testId}\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          data-testid={getTestId(`item-${index}`)}\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","testId","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","getTestId","suffix","jsx","child","el"],"mappings":"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"}

package/dist/components/Mention.d.ts

@@ -26,5 +26,6 @@ export interface MentionProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     notFoundContent?: React.ReactNode;
     filterOption?: boolean | ((input: string, option: MentionOption) => boolean);
     dropdownClassName?: string;
+    'data-testid'?: string;
 }
 export declare const Mention: React.FC<MentionProps>;