@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/dist/chunk-TTTYW3TR.js

@@ -0,0 +1,207 @@
+'use strict';
+
+var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/design-system/avatar.ts
+var zuiAvatarBase = "relative flex shrink-0 overflow-hidden rounded-full border border-[color:var(--zui-avatar-border,#0000001a)] dark:border-[color:var(--zui-avatar-border-dark,#ffffff1a)] text-[color:var(--zui-avatar-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-fg-dark,oklch(92.9%_0.013_255.508))]";
+var zuiAvatarAppearances = {
+  default: "border-[color:var(--zui-avatar-default-border,#0000001a)] dark:border-[color:var(--zui-avatar-default-border-dark,#ffffff1a)] bg-[var(--zui-avatar-default-bg,#0000001a)] dark:bg-[var(--zui-avatar-default-bg-dark,#ffffff1a)] text-[color:var(--zui-avatar-default-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-default-fg-dark,oklch(92.9%_0.013_255.508))]",
+  muted: "border-[color:var(--zui-avatar-muted-border,#00000066)] bg-[var(--zui-avatar-muted-bg,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-avatar-muted-border-dark,#ffffff1a)] dark:bg-[var(--zui-avatar-muted-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] text-[color:var(--zui-avatar-muted-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-muted-fg-dark,oklch(92.9%_0.013_255.508))]",
+  sky: "border-[color:var(--zui-avatar-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-avatar-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-avatar-sky-bg,oklch(95.1%_0.026_236.824_/_0.5))] dark:bg-[var(--zui-avatar-sky-bg-dark,oklch(58.8%_0.158_241.966_/_0.03))] text-[color:var(--zui-avatar-sky-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-sky-fg-dark,oklch(92.9%_0.013_255.508))]",
+  rose: "border-[color:var(--zui-avatar-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-avatar-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-avatar-rose-bg,oklch(94.1%_0.03_12.58_/_0.5))] dark:bg-[var(--zui-avatar-rose-bg-dark,oklch(58.6%_0.253_17.585_/_0.03))] text-[color:var(--zui-avatar-rose-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-rose-fg-dark,oklch(92.9%_0.013_255.508))]",
+  purple: "border-[color:var(--zui-avatar-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-avatar-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-avatar-purple-bg,oklch(94.6%_0.033_307.174_/_0.5))] dark:bg-[var(--zui-avatar-purple-bg-dark,oklch(55.8%_0.288_302.321_/_0.03))] text-[color:var(--zui-avatar-purple-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-purple-fg-dark,oklch(92.9%_0.013_255.508))]",
+  pink: "border-[color:var(--zui-avatar-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-avatar-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-avatar-pink-bg,oklch(94.8%_0.028_342.258_/_0.5))] dark:bg-[var(--zui-avatar-pink-bg-dark,oklch(59.2%_0.249_0.584_/_0.03))] text-[color:var(--zui-avatar-pink-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-pink-fg-dark,oklch(92.9%_0.013_255.508))]",
+  orange: "border-[color:var(--zui-avatar-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-avatar-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-avatar-orange-bg,oklch(95.4%_0.038_75.164_/_0.5))] dark:bg-[var(--zui-avatar-orange-bg-dark,oklch(64.6%_0.222_41.116_/_0.03))] text-[color:var(--zui-avatar-orange-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-orange-fg-dark,oklch(92.9%_0.013_255.508))]",
+  yellow: "border-[color:var(--zui-avatar-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-avatar-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-avatar-yellow-bg,oklch(97.3%_0.071_103.193_/_0.5))] dark:bg-[var(--zui-avatar-yellow-bg-dark,oklch(68.1%_0.162_75.834_/_0.03))] text-[color:var(--zui-avatar-yellow-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-yellow-fg-dark,oklch(92.9%_0.013_255.508))]",
+  teal: "border-[color:var(--zui-avatar-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-avatar-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-avatar-teal-bg,oklch(95.3%_0.051_180.801_/_0.5))] dark:bg-[var(--zui-avatar-teal-bg-dark,oklch(60%_0.118_184.704_/_0.03))] text-[color:var(--zui-avatar-teal-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-teal-fg-dark,oklch(92.9%_0.013_255.508))]",
+  indigo: "border-[color:var(--zui-avatar-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-avatar-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-avatar-indigo-bg,oklch(93%_0.034_272.788_/_0.5))] dark:bg-[var(--zui-avatar-indigo-bg-dark,oklch(51.1%_0.262_276.966_/_0.03))] text-[color:var(--zui-avatar-indigo-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-indigo-fg-dark,oklch(92.9%_0.013_255.508))]",
+  emerald: "border-[color:var(--zui-avatar-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-avatar-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-avatar-emerald-bg,oklch(95%_0.052_163.051_/_0.5))] dark:bg-[var(--zui-avatar-emerald-bg-dark,oklch(59.6%_0.145_163.225_/_0.03))] text-[color:var(--zui-avatar-emerald-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-emerald-fg-dark,oklch(92.9%_0.013_255.508))]",
+  gray: "border-[color:var(--zui-avatar-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-avatar-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-avatar-gray-bg,oklch(96.7%_0.003_264.542_/_0.5))] dark:bg-[var(--zui-avatar-gray-bg-dark,oklch(44.6%_0.03_256.802_/_0.03))] text-[color:var(--zui-avatar-gray-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gray-fg-dark,oklch(92.9%_0.013_255.508))]",
+  amber: "border-[color:var(--zui-avatar-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-avatar-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-avatar-amber-bg,oklch(96.2%_0.059_95.617_/_0.5))] dark:bg-[var(--zui-avatar-amber-bg-dark,oklch(66.6%_0.179_58.318_/_0.03))] text-[color:var(--zui-avatar-amber-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-amber-fg-dark,oklch(92.9%_0.013_255.508))]",
+  violet: "border-[color:var(--zui-avatar-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-avatar-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-avatar-violet-bg,oklch(94.3%_0.029_294.588_/_0.5))] dark:bg-[var(--zui-avatar-violet-bg-dark,oklch(54.1%_0.281_293.009_/_0.03))] text-[color:var(--zui-avatar-violet-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-violet-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-blue": "bg-linear-to-r from-[var(--zui-avatar-gradient-blue-from,oklch(62.3%_0.214_259.815))] dark:from-[var(--zui-avatar-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-avatar-gradient-blue-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-avatar-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-blue-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-blue-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-green": "bg-linear-to-r from-[var(--zui-avatar-gradient-green-from,oklch(72.3%_0.219_149.579))] dark:from-[var(--zui-avatar-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-avatar-gradient-green-to,oklch(76.8%_0.233_130.85))] dark:to-[var(--zui-avatar-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-green-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-green-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-red": "bg-linear-to-r from-[var(--zui-avatar-gradient-red-from,oklch(63.7%_0.237_25.331))] dark:from-[var(--zui-avatar-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-avatar-gradient-red-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-avatar-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-red-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-red-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-yellow": "bg-linear-to-r from-[var(--zui-avatar-gradient-yellow-from,oklch(79.5%_0.184_86.047))] dark:from-[var(--zui-avatar-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-avatar-gradient-yellow-to,oklch(70.5%_0.213_47.604))] dark:to-[var(--zui-avatar-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-yellow-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-yellow-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-purple": "bg-linear-to-r from-[var(--zui-avatar-gradient-purple-from,oklch(62.7%_0.265_303.9))] dark:from-[var(--zui-avatar-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-avatar-gradient-purple-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-avatar-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-purple-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-purple-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-teal": "bg-linear-to-r from-[var(--zui-avatar-gradient-teal-from,oklch(70.4%_0.14_182.503))] dark:from-[var(--zui-avatar-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-avatar-gradient-teal-to,oklch(71.5%_0.143_215.221))] dark:to-[var(--zui-avatar-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-teal-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-teal-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-indigo": "bg-linear-to-r from-[var(--zui-avatar-gradient-indigo-from,oklch(58.5%_0.233_277.117))] dark:from-[var(--zui-avatar-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-avatar-gradient-indigo-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-avatar-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-indigo-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-indigo-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-pink": "bg-linear-to-r from-[var(--zui-avatar-gradient-pink-from,oklch(65.6%_0.241_354.308))] dark:from-[var(--zui-avatar-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-avatar-gradient-pink-to,oklch(64.5%_0.246_16.439))] dark:to-[var(--zui-avatar-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-pink-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-pink-fg-dark,oklch(92.9%_0.013_255.508))]",
+  "gradient-orange": "bg-linear-to-r from-[var(--zui-avatar-gradient-orange-from,oklch(70.5%_0.213_47.604))] dark:from-[var(--zui-avatar-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-avatar-gradient-orange-to,oklch(63.7%_0.237_25.331))] dark:to-[var(--zui-avatar-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-orange-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-orange-fg-dark,oklch(92.9%_0.013_255.508))]"
+};
+var zuiAvatarSizes = {
+  sm: "size-8 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-12 text-base",
+  xl: "size-16 text-lg"
+};
+var zuiAvatarImageBase = "aspect-square size-full object-cover";
+var zuiAvatarFallbackBase = "flex size-full items-center justify-center bg-[var(--zui-avatar-fallback-bg,oklch(92.9%_0.013_255.508))] dark:bg-[var(--zui-avatar-fallback-bg-dark,oklch(27.9%_0.041_260.031))] font-medium text-[color:var(--zui-avatar-fallback-fg,oklch(27.9%_0.041_260.031))] dark:text-[color:var(--zui-avatar-fallback-fg-dark,oklch(96.8%_0.007_247.896))]";
+var zuiAvatarGroupBase = "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring,#ffffff)] dark:[&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring-dark,oklch(12.9%_0.042_264.695))] [&_[data-slot=avatar]]:first:ml-0";
+
+// src/ui/avatar/variants.ts
+var avatarVariants = classVarianceAuthority.cva(zuiAvatarBase, {
+  variants: {
+    appearance: zuiAvatarAppearances,
+    size: zuiAvatarSizes
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default"
+  }
+});
+var avatarImageVariants = classVarianceAuthority.cva(zuiAvatarImageBase);
+var avatarFallbackVariants = classVarianceAuthority.cva(zuiAvatarFallbackBase);
+var avatarGroupVariants = classVarianceAuthority.cva(zuiAvatarGroupBase);
+var AvatarContext = react.createContext(null);
+function useAvatarContext(component) {
+  const ctx = react.useContext(AvatarContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Avatar>`);
+  }
+  return ctx;
+}
+function AvatarBase({
+  className,
+  size,
+  appearance,
+  children,
+  ref,
+  as: Wrapper = "span",
+  ...rest
+}) {
+  const [imageStatus, setImageStatus] = react.useState("idle");
+  const ctx = react.useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AvatarContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "avatar",
+      className: chunkZS5756ZC_js.cn(avatarVariants({ size, appearance }), className),
+      ...rest,
+      children
+    }
+  ) });
+}
+AvatarBase.displayName = "Avatar";
+function AvatarImage({
+  className,
+  onLoad,
+  onError,
+  ref,
+  ...rest
+}) {
+  const { setImageStatus } = useAvatarContext("AvatarImage");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      "data-slot": "avatar-image",
+      className: chunkZS5756ZC_js.cn(avatarImageVariants(), className),
+      onLoad: (e) => {
+        setImageStatus("loaded");
+        onLoad?.(e);
+      },
+      onError: (e) => {
+        setImageStatus("error");
+        onError?.(e);
+      },
+      ...rest
+    }
+  );
+}
+AvatarImage.displayName = "AvatarImage";
+function AvatarFallback({
+  className,
+  delayMs = 0,
+  ref,
+  ...rest
+}) {
+  const { imageStatus } = useAvatarContext("AvatarFallback");
+  const [show, setShow] = react.useState(delayMs === 0);
+  react.useEffect(() => {
+    if (imageStatus === "loaded") {
+      setShow(false);
+      return;
+    }
+    if (imageStatus === "error") {
+      setShow(true);
+      return;
+    }
+    if (delayMs <= 0) {
+      setShow(true);
+      return;
+    }
+    const t = window.setTimeout(() => setShow(true), delayMs);
+    return () => window.clearTimeout(t);
+  }, [delayMs, imageStatus]);
+  if (!show) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      "data-slot": "avatar-fallback",
+      className: chunkZS5756ZC_js.cn(avatarFallbackVariants(), className),
+      ...rest
+    }
+  );
+}
+AvatarFallback.displayName = "AvatarFallback";
+function AvatarGroup({
+  className,
+  max,
+  children,
+  ref,
+  ...rest
+}) {
+  const childArray = react.useMemo(
+    () => react.Children.toArray(children).filter(react.isValidElement),
+    [children]
+  );
+  const visible = max !== void 0 ? childArray.slice(0, max) : childArray;
+  const overflow = max !== void 0 && childArray.length > max ? childArray.length - max : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "avatar-group",
+      className: chunkZS5756ZC_js.cn(avatarGroupVariants(), className),
+      ...rest,
+      children: [
+        visible,
+        overflow > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-slot": "avatar-group-overflow",
+            className: chunkZS5756ZC_js.cn(
+              avatarVariants({ size: "md" }),
+              "z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white"
+            ),
+            "aria-label": `${overflow} more`,
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+AvatarGroup.displayName = "AvatarGroup";
+
+exports.AvatarBase = AvatarBase;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarImage = AvatarImage;
+exports.avatarFallbackVariants = avatarFallbackVariants;
+exports.avatarGroupVariants = avatarGroupVariants;
+exports.avatarImageVariants = avatarImageVariants;
+exports.avatarVariants = avatarVariants;
+//# sourceMappingURL=chunk-TTTYW3TR.js.map
+//# sourceMappingURL=chunk-TTTYW3TR.js.map

package/dist/chunk-TTTYW3TR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/avatar.ts","../src/ui/avatar/variants.ts","../src/ui/avatar/avatar-base.tsx"],"names":["cva","createContext","useContext","useState","useMemo","jsx","cn","useEffect","Children","isValidElement","jsxs"],"mappings":"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","file":"chunk-TTTYW3TR.js","sourcesContent":["export const zuiAvatarBase =\n  \"relative flex shrink-0 overflow-hidden rounded-full border border-[color:var(--zui-avatar-border,#0000001a)] dark:border-[color:var(--zui-avatar-border-dark,#ffffff1a)] text-[color:var(--zui-avatar-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-fg-dark,oklch(92.9%_0.013_255.508))]\";\n\nexport const zuiAvatarAppearances = {\n  default:\n    \"border-[color:var(--zui-avatar-default-border,#0000001a)] dark:border-[color:var(--zui-avatar-default-border-dark,#ffffff1a)] bg-[var(--zui-avatar-default-bg,#0000001a)] dark:bg-[var(--zui-avatar-default-bg-dark,#ffffff1a)] text-[color:var(--zui-avatar-default-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-default-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  muted:\n    \"border-[color:var(--zui-avatar-muted-border,#00000066)] bg-[var(--zui-avatar-muted-bg,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-avatar-muted-border-dark,#ffffff1a)] dark:bg-[var(--zui-avatar-muted-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] text-[color:var(--zui-avatar-muted-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-muted-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  sky: \"border-[color:var(--zui-avatar-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-avatar-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-avatar-sky-bg,oklch(95.1%_0.026_236.824_/_0.5))] dark:bg-[var(--zui-avatar-sky-bg-dark,oklch(58.8%_0.158_241.966_/_0.03))] text-[color:var(--zui-avatar-sky-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-sky-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  rose: \"border-[color:var(--zui-avatar-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-avatar-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-avatar-rose-bg,oklch(94.1%_0.03_12.58_/_0.5))] dark:bg-[var(--zui-avatar-rose-bg-dark,oklch(58.6%_0.253_17.585_/_0.03))] text-[color:var(--zui-avatar-rose-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-rose-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  purple:\n    \"border-[color:var(--zui-avatar-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-avatar-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-avatar-purple-bg,oklch(94.6%_0.033_307.174_/_0.5))] dark:bg-[var(--zui-avatar-purple-bg-dark,oklch(55.8%_0.288_302.321_/_0.03))] text-[color:var(--zui-avatar-purple-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-purple-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  pink: \"border-[color:var(--zui-avatar-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-avatar-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-avatar-pink-bg,oklch(94.8%_0.028_342.258_/_0.5))] dark:bg-[var(--zui-avatar-pink-bg-dark,oklch(59.2%_0.249_0.584_/_0.03))] text-[color:var(--zui-avatar-pink-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-pink-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  orange:\n    \"border-[color:var(--zui-avatar-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-avatar-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-avatar-orange-bg,oklch(95.4%_0.038_75.164_/_0.5))] dark:bg-[var(--zui-avatar-orange-bg-dark,oklch(64.6%_0.222_41.116_/_0.03))] text-[color:var(--zui-avatar-orange-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-orange-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  yellow:\n    \"border-[color:var(--zui-avatar-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-avatar-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-avatar-yellow-bg,oklch(97.3%_0.071_103.193_/_0.5))] dark:bg-[var(--zui-avatar-yellow-bg-dark,oklch(68.1%_0.162_75.834_/_0.03))] text-[color:var(--zui-avatar-yellow-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-yellow-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  teal: \"border-[color:var(--zui-avatar-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-avatar-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-avatar-teal-bg,oklch(95.3%_0.051_180.801_/_0.5))] dark:bg-[var(--zui-avatar-teal-bg-dark,oklch(60%_0.118_184.704_/_0.03))] text-[color:var(--zui-avatar-teal-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-teal-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  indigo:\n    \"border-[color:var(--zui-avatar-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-avatar-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-avatar-indigo-bg,oklch(93%_0.034_272.788_/_0.5))] dark:bg-[var(--zui-avatar-indigo-bg-dark,oklch(51.1%_0.262_276.966_/_0.03))] text-[color:var(--zui-avatar-indigo-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-indigo-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  emerald:\n    \"border-[color:var(--zui-avatar-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-avatar-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-avatar-emerald-bg,oklch(95%_0.052_163.051_/_0.5))] dark:bg-[var(--zui-avatar-emerald-bg-dark,oklch(59.6%_0.145_163.225_/_0.03))] text-[color:var(--zui-avatar-emerald-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-emerald-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  gray: \"border-[color:var(--zui-avatar-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-avatar-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-avatar-gray-bg,oklch(96.7%_0.003_264.542_/_0.5))] dark:bg-[var(--zui-avatar-gray-bg-dark,oklch(44.6%_0.03_256.802_/_0.03))] text-[color:var(--zui-avatar-gray-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gray-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  amber:\n    \"border-[color:var(--zui-avatar-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-avatar-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-avatar-amber-bg,oklch(96.2%_0.059_95.617_/_0.5))] dark:bg-[var(--zui-avatar-amber-bg-dark,oklch(66.6%_0.179_58.318_/_0.03))] text-[color:var(--zui-avatar-amber-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-amber-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  violet:\n    \"border-[color:var(--zui-avatar-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-avatar-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-avatar-violet-bg,oklch(94.3%_0.029_294.588_/_0.5))] dark:bg-[var(--zui-avatar-violet-bg-dark,oklch(54.1%_0.281_293.009_/_0.03))] text-[color:var(--zui-avatar-violet-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-violet-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-blue-from,oklch(62.3%_0.214_259.815))] dark:from-[var(--zui-avatar-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-avatar-gradient-blue-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-avatar-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-blue-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-blue-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-green-from,oklch(72.3%_0.219_149.579))] dark:from-[var(--zui-avatar-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-avatar-gradient-green-to,oklch(76.8%_0.233_130.85))] dark:to-[var(--zui-avatar-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-green-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-green-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-red-from,oklch(63.7%_0.237_25.331))] dark:from-[var(--zui-avatar-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-avatar-gradient-red-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-avatar-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-red-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-red-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-yellow-from,oklch(79.5%_0.184_86.047))] dark:from-[var(--zui-avatar-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-avatar-gradient-yellow-to,oklch(70.5%_0.213_47.604))] dark:to-[var(--zui-avatar-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-yellow-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-yellow-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-purple-from,oklch(62.7%_0.265_303.9))] dark:from-[var(--zui-avatar-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-avatar-gradient-purple-to,oklch(65.6%_0.241_354.308))] dark:to-[var(--zui-avatar-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-purple-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-purple-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-teal-from,oklch(70.4%_0.14_182.503))] dark:from-[var(--zui-avatar-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-avatar-gradient-teal-to,oklch(71.5%_0.143_215.221))] dark:to-[var(--zui-avatar-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-teal-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-teal-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-indigo-from,oklch(58.5%_0.233_277.117))] dark:from-[var(--zui-avatar-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-avatar-gradient-indigo-to,oklch(62.7%_0.265_303.9))] dark:to-[var(--zui-avatar-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-indigo-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-indigo-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-pink-from,oklch(65.6%_0.241_354.308))] dark:from-[var(--zui-avatar-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-avatar-gradient-pink-to,oklch(64.5%_0.246_16.439))] dark:to-[var(--zui-avatar-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-pink-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-pink-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-orange-from,oklch(70.5%_0.213_47.604))] dark:from-[var(--zui-avatar-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-avatar-gradient-orange-to,oklch(63.7%_0.237_25.331))] dark:to-[var(--zui-avatar-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-orange-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-gradient-orange-fg-dark,oklch(92.9%_0.013_255.508))]\",\n} as const;\n\nexport const zuiAvatarSizes = {\n  sm: \"size-8 text-xs\",\n  md: \"size-10 text-sm\",\n  lg: \"size-12 text-base\",\n  xl: \"size-16 text-lg\",\n} as const;\n\nexport const zuiAvatarImageBase = \"aspect-square size-full object-cover\";\n\nexport const zuiAvatarFallbackBase =\n  \"flex size-full items-center justify-center bg-[var(--zui-avatar-fallback-bg,oklch(92.9%_0.013_255.508))] dark:bg-[var(--zui-avatar-fallback-bg-dark,oklch(27.9%_0.041_260.031))] font-medium text-[color:var(--zui-avatar-fallback-fg,oklch(27.9%_0.041_260.031))] dark:text-[color:var(--zui-avatar-fallback-fg-dark,oklch(96.8%_0.007_247.896))]\";\n\nexport const zuiAvatarGroupBase =\n  \"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring,#ffffff)] dark:[&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring-dark,oklch(12.9%_0.042_264.695))] [&_[data-slot=avatar]]:first:ml-0\";\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiAvatarAppearances,\n  zuiAvatarBase,\n  zuiAvatarFallbackBase,\n  zuiAvatarGroupBase,\n  zuiAvatarImageBase,\n  zuiAvatarSizes,\n} from \"../../design-system/avatar\";\n\nexport const avatarVariants = cva(zuiAvatarBase, {\n  variants: {\n    appearance: zuiAvatarAppearances,\n    size: zuiAvatarSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n    appearance: \"default\",\n  },\n});\n\nexport const avatarImageVariants = cva(zuiAvatarImageBase);\n\nexport const avatarFallbackVariants = cva(zuiAvatarFallbackBase);\n\nexport const avatarGroupVariants = cva(zuiAvatarGroupBase);\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  AvatarBaseProps,\n  AvatarCtx,\n  AvatarFallbackProps,\n  AvatarGroupProps,\n  AvatarImageProps,\n  ImageStatus,\n} from \"./types\";\nimport {\n  avatarFallbackVariants,\n  avatarGroupVariants,\n  avatarImageVariants,\n  avatarVariants,\n} from \"./variants\";\n\nconst AvatarContext = createContext<AvatarCtx | null>(null);\n\nfunction useAvatarContext(component: string): AvatarCtx {\n  const ctx = useContext(AvatarContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Avatar>`);\n  }\n  return ctx;\n}\n\nexport function AvatarBase({\n  className,\n  size,\n  appearance,\n  children,\n  ref,\n  as: Wrapper = \"span\",\n  ...rest\n}: AvatarBaseProps) {\n  const [imageStatus, setImageStatus] = useState<ImageStatus>(\"idle\");\n  const ctx = useMemo(() => ({ imageStatus, setImageStatus }), [imageStatus]);\n\n  return (\n    <AvatarContext.Provider value={ctx}>\n      <Wrapper\n        ref={ref}\n        data-slot=\"avatar\"\n        className={cn(avatarVariants({ size, appearance }), className)}\n        {...rest}\n      >\n        {children}\n      </Wrapper>\n    </AvatarContext.Provider>\n  );\n}\n\nAvatarBase.displayName = \"Avatar\";\n\nexport function AvatarImage({\n  className,\n  onLoad,\n  onError,\n  ref,\n  ...rest\n}: AvatarImageProps & { ref?: Ref<HTMLImageElement> }) {\n  const { setImageStatus } = useAvatarContext(\"AvatarImage\");\n\n  return (\n    <img\n      ref={ref}\n      data-slot=\"avatar-image\"\n      className={cn(avatarImageVariants(), className)}\n      onLoad={(e) => {\n        setImageStatus(\"loaded\");\n        onLoad?.(e);\n      }}\n      onError={(e) => {\n        setImageStatus(\"error\");\n        onError?.(e);\n      }}\n      {...rest}\n    />\n  );\n}\n\nAvatarImage.displayName = \"AvatarImage\";\n\nexport function AvatarFallback({\n  className,\n  delayMs = 0,\n  ref,\n  ...rest\n}: AvatarFallbackProps & { ref?: Ref<HTMLSpanElement> }) {\n  const { imageStatus } = useAvatarContext(\"AvatarFallback\");\n  const [show, setShow] = useState(delayMs === 0);\n\n  useEffect(() => {\n    if (imageStatus === \"loaded\") {\n      setShow(false);\n      return;\n    }\n    if (imageStatus === \"error\") {\n      setShow(true);\n      return;\n    }\n    if (delayMs <= 0) {\n      setShow(true);\n      return;\n    }\n    const t = window.setTimeout(() => setShow(true), delayMs);\n    return () => window.clearTimeout(t);\n  }, [delayMs, imageStatus]);\n\n  if (!show) {\n    return null;\n  }\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(avatarFallbackVariants(), className)}\n      {...rest}\n    />\n  );\n}\n\nAvatarFallback.displayName = \"AvatarFallback\";\n\nexport function AvatarGroup({\n  className,\n  max,\n  children,\n  ref,\n  ...rest\n}: AvatarGroupProps & { ref?: Ref<HTMLDivElement> }) {\n  const childArray = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const visible = max !== undefined ? childArray.slice(0, max) : childArray;\n  const overflow =\n    max !== undefined && childArray.length > max ? childArray.length - max : 0;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"avatar-group\"\n      className={cn(avatarGroupVariants(), className)}\n      {...rest}\n    >\n      {visible}\n      {overflow > 0 ? (\n        <span\n          data-slot=\"avatar-group-overflow\"\n          className={cn(\n            avatarVariants({ size: \"md\" }),\n            \"z-10 grid place-items-center bg-slate-800 text-xs font-semibold text-white\",\n          )}\n          aria-label={`${overflow} more`}\n        >\n          +{overflow}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nAvatarGroup.displayName = \"AvatarGroup\";\n"]}

package/dist/chunk-W3QRRWQX.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/useResizeObserver/useResizeObserver.ts
+function useResizeObserver(params = {}) {
+  const { enabled = true } = params;
+  const [element, setElement] = react.useState(null);
+  const [size, setSize] = react.useState(void 0);
+  const setRef = react.useCallback((node) => {
+    setElement(node);
+  }, []);
+  react.useEffect(() => {
+    if (!enabled || element == null) {
+      return;
+    }
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const { width, height } = entries[0]?.contentRect ?? {
+        width: 0,
+        height: 0
+      };
+      setSize({ width, height });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [element, enabled]);
+  return [setRef, size];
+}
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=chunk-W3QRRWQX.js.map
+//# sourceMappingURL=chunk-W3QRRWQX.js.map

package/dist/chunk-W3QRRWQX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useResizeObserver/useResizeObserver.ts"],"names":["useState","useCallback","useEffect"],"mappings":";;;;;AAyBO,SAAS,iBAAA,CACd,MAAA,GAAkC,EAAC,EACQ;AAC3C,EAAA,MAAM,EAAE,OAAA,GAAU,IAAA,EAAK,GAAI,MAAA;AAC3B,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAmB,IAAI,CAAA;AACrD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAAkC,MAAS,CAAA;AAEnE,EAAA,MAAM,MAAA,GAASC,iBAAA,CAAY,CAAC,IAAA,KAAmB;AAC7C,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,OAAA,IAAW,OAAA,IAAW,IAAA,EAAM;AAC/B,MAAA;AAAA,IACF;AACA,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA;AAAA,IACF;AACA,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,CAAC,OAAA,KAAY;AAC/C,MAAA,MAAM,EAAE,KAAA,EAAO,MAAA,KAAW,OAAA,CAAQ,CAAC,GAAG,WAAA,IAAe;AAAA,QACnD,KAAA,EAAO,CAAA;AAAA,QACP,MAAA,EAAQ;AAAA,OACV;AACA,MAAA,OAAA,CAAQ,EAAE,KAAA,EAAO,MAAA,EAAQ,CAAA;AAAA,IAC3B,CAAC,CAAA;AACD,IAAA,QAAA,CAAS,QAAQ,OAAO,CAAA;AACxB,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAA,EAAW;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,OAAO,CAAC,CAAA;AAErB,EAAA,OAAO,CAAC,QAAQ,IAAI,CAAA;AACtB","file":"chunk-W3QRRWQX.js","sourcesContent":["\"use client\";\n\nimport type { RefCallback } from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nexport type ElementSize = {\n  width: number;\n  height: number;\n};\n\nexport type UseResizeObserverParams = {\n  /** When `false`, no `ResizeObserver` is attached. */\n  enabled?: boolean;\n};\n\n/**\n * Observes an element’s `contentRect` size via `ResizeObserver` and exposes `{ width, height }`.\n *\n * When `ResizeObserver` is undefined or `enabled` is false, size may remain `undefined`. Uses the first\n * entry from the observer callback (`entries[0]`) aligned with the single observed node.\n *\n * @typeParam T - Observed element type.\n * @param params - Optional `{ enabled }` (default `true`).\n * @returns `[setRef, size]` callback ref and latest measured size.\n */\nexport function useResizeObserver<T extends Element>(\n  params: UseResizeObserverParams = {},\n): [RefCallback<T>, ElementSize | undefined] {\n  const { enabled = true } = params;\n  const [element, setElement] = useState<T | null>(null);\n  const [size, setSize] = useState<ElementSize | undefined>(undefined);\n\n  const setRef = useCallback((node: T | null) => {\n    setElement(node);\n  }, []);\n\n  useEffect(() => {\n    if (!enabled || element == null) {\n      return;\n    }\n    if (typeof ResizeObserver === \"undefined\") {\n      return;\n    }\n    const observer = new ResizeObserver((entries) => {\n      const { width, height } = entries[0]?.contentRect ?? {\n        width: 0,\n        height: 0,\n      };\n      setSize({ width, height });\n    });\n    observer.observe(element);\n    return () => {\n      observer.disconnect();\n    };\n  }, [element, enabled]);\n\n  return [setRef, size];\n}\n"]}

package/dist/chunk-WPXQHWPV.js

@@ -0,0 +1,232 @@
+'use strict';
+
+var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
+var classVarianceAuthority = require('class-variance-authority');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/design-system/card.ts
+var zuiCardBase = [
+  "relative flex w-full flex-col overflow-hidden text-[color:var(--zui-card-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-card-fg-dark,oklch(98.4%_0.003_247.858))]",
+  "ring-offset-[var(--zui-card-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-card-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-card-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-card-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2"
+];
+var zuiCardAppearances = {
+  default: "border border-[color:var(--zui-card-default-border,#0000001a)] dark:border-[color:var(--zui-card-default-border-dark,#ffffff1a)] bg-[var(--zui-card-default-bg,#0000000d)] dark:bg-[var(--zui-card-default-bg-dark,#ffffff0d)] shadow-[var(--zui-card-default-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-card-default-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]",
+  glass: "border border-[color:var(--zui-card-glass-border,#00000026)] dark:border-[color:var(--zui-card-glass-border-dark,#ffffff26)] bg-[var(--zui-card-glass-bg,#0000001a)] dark:bg-[var(--zui-card-glass-bg-dark,#ffffff1a)] backdrop-blur-md shadow-[var(--zui-card-glass-shadow,0_8px_24px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-card-glass-shadow-dark,0_18px_48px_rgba(15,23,42,0.35))]",
+  outline: "border border-[color:var(--zui-card-outline-border,#00000026)] dark:border-[color:var(--zui-card-outline-border-dark,#ffffff26)] bg-[var(--zui-card-outline-bg,transparent)]",
+  ghost: "border border-[color:var(--zui-card-ghost-border,transparent)] bg-[var(--zui-card-ghost-bg,transparent)]",
+  elevated: "border border-[color:var(--zui-card-elevated-border,#0000001a)] dark:border-[color:var(--zui-card-elevated-border-dark,#ffffff1a)] bg-[var(--zui-card-elevated-bg,oklch(96.8%_0.007_247.896_/_0.8))] dark:bg-[var(--zui-card-elevated-bg-dark,oklch(20.8%_0.042_265.755_/_0.8))] shadow-[var(--zui-card-elevated-shadow,0_12px_32px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-card-elevated-shadow-dark,0_24px_64px_rgba(15,23,42,0.45))]",
+  sky: "border border-[color:var(--zui-card-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-card-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-card-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-card-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl",
+  rose: "border border-[color:var(--zui-card-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-card-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-card-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-card-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  purple: "border border-[color:var(--zui-card-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-card-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-card-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-card-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  pink: "border border-[color:var(--zui-card-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-card-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-card-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-card-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  orange: "border border-[color:var(--zui-card-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-card-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-card-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-card-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  yellow: "border border-[color:var(--zui-card-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-card-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-card-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-card-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl",
+  teal: "border border-[color:var(--zui-card-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-card-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-card-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-card-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl",
+  indigo: "border border-[color:var(--zui-card-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-card-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-card-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-card-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl",
+  emerald: "border border-[color:var(--zui-card-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-card-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-card-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-card-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl",
+  gray: "border border-[color:var(--zui-card-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-card-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-card-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-card-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl",
+  amber: "border border-[color:var(--zui-card-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-card-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-card-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-card-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl",
+  violet: "border border-[color:var(--zui-card-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-card-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-card-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-card-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl",
+  "gradient-blue": "border border-[color:var(--zui-card-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-card-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-r from-[var(--zui-card-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-card-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.7))] to-[var(--zui-card-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-card-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  "gradient-green": "border border-[color:var(--zui-card-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-card-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-r from-[var(--zui-card-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-card-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.7))] to-[var(--zui-card-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-card-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.7))] backdrop-blur-xl",
+  "gradient-red": "border border-[color:var(--zui-card-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-card-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-r from-[var(--zui-card-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-card-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.7))] to-[var(--zui-card-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-card-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  "gradient-yellow": "border border-[color:var(--zui-card-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-card-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-r from-[var(--zui-card-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-card-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.7))] to-[var(--zui-card-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-card-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  "gradient-purple": "border border-[color:var(--zui-card-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-card-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-r from-[var(--zui-card-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-card-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.7))] to-[var(--zui-card-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-card-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  "gradient-teal": "border border-[color:var(--zui-card-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-card-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-card-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-card-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-card-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-card-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl",
+  "gradient-indigo": "border border-[color:var(--zui-card-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-card-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-card-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-card-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-card-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-card-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  "gradient-pink": "border border-[color:var(--zui-card-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-card-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-card-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-card-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-card-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-card-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  "gradient-orange": "border border-[color:var(--zui-card-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-card-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-card-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-card-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-card-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-card-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl"
+};
+var zuiCardSizes = {
+  sm: "gap-2 p-3 text-sm",
+  md: "gap-3 p-4 text-sm",
+  lg: "gap-4 p-6 text-base"
+};
+var zuiCardRounded = {
+  sm: "rounded-lg",
+  md: "rounded-xl",
+  lg: "rounded-2xl",
+  full: "rounded-3xl"
+};
+var zuiCardHeaderBase = "flex flex-col gap-1 border-b border-[color:var(--zui-card-header-border,#0000001a)] dark:border-[color:var(--zui-card-header-border-dark,#ffffff1a)] pb-3";
+var zuiCardHeaderSizes = {
+  sm: "pb-2",
+  md: "pb-3",
+  lg: "pb-4"
+};
+var zuiCardFooterBase = "flex flex-col gap-2 border-t border-[color:var(--zui-card-footer-border,#0000001a)] dark:border-[color:var(--zui-card-footer-border-dark,#ffffff1a)] pt-3";
+var zuiCardFooterSizes = {
+  sm: "pt-2",
+  md: "pt-3",
+  lg: "pt-4"
+};
+var zuiCardTitleBase = "font-semibold tracking-tight text-[color:var(--zui-card-title-fg,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-card-title-fg-dark,#ffffff)]";
+var zuiCardTitleSizes = {
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg"
+};
+var zuiCardDescriptionBase = "text-[color:var(--zui-card-description-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-card-description-fg-dark,oklch(98.4%_0.003_247.858))]";
+var zuiCardDescriptionSizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+
+// src/ui/card/variants.ts
+var cardVariants = classVarianceAuthority.cva(zuiCardBase, {
+  variants: {
+    appearance: zuiCardAppearances,
+    size: zuiCardSizes,
+    rounded: zuiCardRounded
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    rounded: "md"
+  }
+});
+var cardHeaderVariants = classVarianceAuthority.cva(zuiCardHeaderBase, {
+  variants: {
+    size: zuiCardHeaderSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var cardFooterVariants = classVarianceAuthority.cva(zuiCardFooterBase, {
+  variants: {
+    size: zuiCardFooterSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var cardTitleVariants = classVarianceAuthority.cva(zuiCardTitleBase, {
+  variants: {
+    size: zuiCardTitleSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var cardDescriptionVariants = classVarianceAuthority.cva(zuiCardDescriptionBase, {
+  variants: {
+    size: zuiCardDescriptionSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var CardSizeContext = react.createContext("md");
+function useCardSize() {
+  return react.useContext(CardSizeContext);
+}
+function CardBase({
+  className,
+  appearance,
+  size = "md",
+  rounded,
+  children,
+  ref,
+  as: Wrapper = "article",
+  ...rest
+}) {
+  const ctx = react.useMemo(() => size ?? "md", [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CardSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "card",
+      className: chunkZS5756ZC_js.cn(cardVariants({ appearance, size, rounded }), className),
+      ...rest,
+      children
+    }
+  ) });
+}
+CardBase.displayName = "Card";
+function CardHeader({ className, children }) {
+  const size = useCardSize();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      "data-slot": "card-header",
+      className: chunkZS5756ZC_js.cn(cardHeaderVariants({ size }), className),
+      children
+    }
+  );
+}
+CardHeader.displayName = "CardHeader";
+function CardBody({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "card-body",
+      className: chunkZS5756ZC_js.cn("flex flex-1 flex-col gap-2", className),
+      children
+    }
+  );
+}
+CardBody.displayName = "CardBody";
+function CardFooter({ className, children }) {
+  const size = useCardSize();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "footer",
+    {
+      "data-slot": "card-footer",
+      className: chunkZS5756ZC_js.cn(cardFooterVariants({ size }), className),
+      children
+    }
+  );
+}
+CardFooter.displayName = "CardFooter";
+function CardTitle({
+  className,
+  children,
+  as = "h3",
+  ref,
+  ...rest
+}) {
+  const size = useCardSize();
+  const Tag = as;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      "data-slot": "card-title",
+      className: chunkZS5756ZC_js.cn(cardTitleVariants({ size }), className),
+      ...rest,
+      children
+    }
+  );
+}
+CardTitle.displayName = "CardTitle";
+function CardDescription({
+  className,
+  children,
+  as = "p",
+  ref,
+  ...rest
+}) {
+  const size = useCardSize();
+  const Tag = as;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag,
+    {
+      ref,
+      "data-slot": "card-description",
+      className: chunkZS5756ZC_js.cn(cardDescriptionVariants({ size }), className),
+      ...rest,
+      children
+    }
+  );
+}
+CardDescription.displayName = "CardDescription";
+
+exports.CardBase = CardBase;
+exports.CardBody = CardBody;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.cardDescriptionVariants = cardDescriptionVariants;
+exports.cardFooterVariants = cardFooterVariants;
+exports.cardHeaderVariants = cardHeaderVariants;
+exports.cardTitleVariants = cardTitleVariants;
+exports.cardVariants = cardVariants;
+//# sourceMappingURL=chunk-WPXQHWPV.js.map
+//# sourceMappingURL=chunk-WPXQHWPV.js.map

package/dist/chunk-WPXQHWPV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/card.ts","../src/ui/card/variants.ts","../src/ui/card/card-base.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","cn"],"mappings":"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","file":"chunk-WPXQHWPV.js","sourcesContent":["export const zuiCardBase = [\n  \"relative flex w-full flex-col overflow-hidden text-[color:var(--zui-card-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-card-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  \"ring-offset-[var(--zui-card-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-card-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors\",\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-card-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-card-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2\",\n] as const;\n\nexport const zuiCardAppearances = {\n  default:\n    \"border border-[color:var(--zui-card-default-border,#0000001a)] dark:border-[color:var(--zui-card-default-border-dark,#ffffff1a)] bg-[var(--zui-card-default-bg,#0000000d)] dark:bg-[var(--zui-card-default-bg-dark,#ffffff0d)] shadow-[var(--zui-card-default-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-card-default-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]\",\n  glass:\n    \"border border-[color:var(--zui-card-glass-border,#00000026)] dark:border-[color:var(--zui-card-glass-border-dark,#ffffff26)] bg-[var(--zui-card-glass-bg,#0000001a)] dark:bg-[var(--zui-card-glass-bg-dark,#ffffff1a)] backdrop-blur-md shadow-[var(--zui-card-glass-shadow,0_8px_24px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-card-glass-shadow-dark,0_18px_48px_rgba(15,23,42,0.35))]\",\n  outline:\n    \"border border-[color:var(--zui-card-outline-border,#00000026)] dark:border-[color:var(--zui-card-outline-border-dark,#ffffff26)] bg-[var(--zui-card-outline-bg,transparent)]\",\n  ghost:\n    \"border border-[color:var(--zui-card-ghost-border,transparent)] bg-[var(--zui-card-ghost-bg,transparent)]\",\n  elevated:\n    \"border border-[color:var(--zui-card-elevated-border,#0000001a)] dark:border-[color:var(--zui-card-elevated-border-dark,#ffffff1a)] bg-[var(--zui-card-elevated-bg,oklch(96.8%_0.007_247.896_/_0.8))] dark:bg-[var(--zui-card-elevated-bg-dark,oklch(20.8%_0.042_265.755_/_0.8))] shadow-[var(--zui-card-elevated-shadow,0_12px_32px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-card-elevated-shadow-dark,0_24px_64px_rgba(15,23,42,0.45))]\",\n  sky: \"border border-[color:var(--zui-card-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-card-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-card-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-card-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl\",\n  rose: \"border border-[color:var(--zui-card-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-card-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-card-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-card-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl\",\n  purple:\n    \"border border-[color:var(--zui-card-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-card-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-card-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-card-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl\",\n  pink: \"border border-[color:var(--zui-card-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-card-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-card-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-card-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl\",\n  orange:\n    \"border border-[color:var(--zui-card-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-card-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-card-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-card-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl\",\n  yellow:\n    \"border border-[color:var(--zui-card-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-card-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-card-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-card-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl\",\n  teal: \"border border-[color:var(--zui-card-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-card-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-card-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-card-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl\",\n  indigo:\n    \"border border-[color:var(--zui-card-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-card-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-card-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-card-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl\",\n  emerald:\n    \"border border-[color:var(--zui-card-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-card-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-card-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-card-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl\",\n  gray: \"border border-[color:var(--zui-card-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-card-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-card-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-card-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl\",\n  amber:\n    \"border border-[color:var(--zui-card-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-card-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-card-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-card-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl\",\n  violet:\n    \"border border-[color:var(--zui-card-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-card-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-card-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-card-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl\",\n  \"gradient-blue\":\n    \"border border-[color:var(--zui-card-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-card-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-r from-[var(--zui-card-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-card-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.7))] to-[var(--zui-card-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-card-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl\",\n  \"gradient-green\":\n    \"border border-[color:var(--zui-card-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-card-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-r from-[var(--zui-card-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-card-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.7))] to-[var(--zui-card-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-card-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.7))] backdrop-blur-xl\",\n  \"gradient-red\":\n    \"border border-[color:var(--zui-card-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-card-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-r from-[var(--zui-card-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-card-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.7))] to-[var(--zui-card-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-card-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl\",\n  \"gradient-yellow\":\n    \"border border-[color:var(--zui-card-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-card-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-r from-[var(--zui-card-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-card-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.7))] to-[var(--zui-card-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-card-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl\",\n  \"gradient-purple\":\n    \"border border-[color:var(--zui-card-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-card-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-r from-[var(--zui-card-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-card-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.7))] to-[var(--zui-card-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-card-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl\",\n  \"gradient-teal\":\n    \"border border-[color:var(--zui-card-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-card-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-card-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-card-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-card-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-card-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl\",\n  \"gradient-indigo\":\n    \"border border-[color:var(--zui-card-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-card-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-card-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-card-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-card-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-card-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl\",\n  \"gradient-pink\":\n    \"border border-[color:var(--zui-card-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-card-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-card-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-card-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-card-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-card-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl\",\n  \"gradient-orange\":\n    \"border border-[color:var(--zui-card-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-card-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-card-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-card-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-card-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-card-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl\",\n} as const;\n\nexport const zuiCardSizes = {\n  sm: \"gap-2 p-3 text-sm\",\n  md: \"gap-3 p-4 text-sm\",\n  lg: \"gap-4 p-6 text-base\",\n} as const;\n\nexport const zuiCardRounded = {\n  sm: \"rounded-lg\",\n  md: \"rounded-xl\",\n  lg: \"rounded-2xl\",\n  full: \"rounded-3xl\",\n} as const;\n\nexport const zuiCardHeaderBase =\n  \"flex flex-col gap-1 border-b border-[color:var(--zui-card-header-border,#0000001a)] dark:border-[color:var(--zui-card-header-border-dark,#ffffff1a)] pb-3\";\n\nexport const zuiCardHeaderSizes = {\n  sm: \"pb-2\",\n  md: \"pb-3\",\n  lg: \"pb-4\",\n} as const;\n\nexport const zuiCardFooterBase =\n  \"flex flex-col gap-2 border-t border-[color:var(--zui-card-footer-border,#0000001a)] dark:border-[color:var(--zui-card-footer-border-dark,#ffffff1a)] pt-3\";\n\nexport const zuiCardFooterSizes = {\n  sm: \"pt-2\",\n  md: \"pt-3\",\n  lg: \"pt-4\",\n} as const;\n\nexport const zuiCardTitleBase =\n  \"font-semibold tracking-tight text-[color:var(--zui-card-title-fg,oklch(12.9%_0.042_264.695))] dark:text-[color:var(--zui-card-title-fg-dark,#ffffff)]\";\n\nexport const zuiCardTitleSizes = {\n  sm: \"text-sm\",\n  md: \"text-base\",\n  lg: \"text-lg\",\n} as const;\n\nexport const zuiCardDescriptionBase =\n  \"text-[color:var(--zui-card-description-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-card-description-fg-dark,oklch(98.4%_0.003_247.858))]\";\n\nexport const zuiCardDescriptionSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiCardAppearances,\n  zuiCardBase,\n  zuiCardDescriptionBase,\n  zuiCardDescriptionSizes,\n  zuiCardFooterBase,\n  zuiCardFooterSizes,\n  zuiCardHeaderBase,\n  zuiCardHeaderSizes,\n  zuiCardRounded,\n  zuiCardSizes,\n  zuiCardTitleBase,\n  zuiCardTitleSizes,\n} from \"../../design-system/card\";\n\nexport const cardVariants = cva(zuiCardBase, {\n  variants: {\n    appearance: zuiCardAppearances,\n    size: zuiCardSizes,\n    rounded: zuiCardRounded,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    rounded: \"md\",\n  },\n});\n\nexport const cardHeaderVariants = cva(zuiCardHeaderBase, {\n  variants: {\n    size: zuiCardHeaderSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const cardFooterVariants = cva(zuiCardFooterBase, {\n  variants: {\n    size: zuiCardFooterSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const cardTitleVariants = cva(zuiCardTitleBase, {\n  variants: {\n    size: zuiCardTitleSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const cardDescriptionVariants = cva(zuiCardDescriptionBase, {\n  variants: {\n    size: zuiCardDescriptionSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo, type ElementType } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  CardBaseProps,\n  CardDescriptionProps,\n  CardSectionProps,\n  CardSize,\n  CardTitleProps,\n} from \"./types\";\nimport {\n  cardDescriptionVariants,\n  cardFooterVariants,\n  cardHeaderVariants,\n  cardTitleVariants,\n  cardVariants,\n} from \"./variants\";\n\nconst CardSizeContext = createContext<CardSize>(\"md\");\n\nfunction useCardSize(): CardSize {\n  return useContext(CardSizeContext);\n}\n\nexport function CardBase({\n  className,\n  appearance,\n  size = \"md\",\n  rounded,\n  children,\n  ref,\n  as: Wrapper = \"article\",\n  ...rest\n}: CardBaseProps) {\n  const ctx = useMemo(() => size ?? \"md\", [size]);\n\n  return (\n    <CardSizeContext.Provider value={ctx}>\n      <Wrapper\n        ref={ref}\n        data-slot=\"card\"\n        className={cn(cardVariants({ appearance, size, rounded }), className)}\n        {...rest}\n      >\n        {children}\n      </Wrapper>\n    </CardSizeContext.Provider>\n  );\n}\n\nCardBase.displayName = \"Card\";\n\nexport function CardHeader({ className, children }: CardSectionProps) {\n  const size = useCardSize();\n  return (\n    <header\n      data-slot=\"card-header\"\n      className={cn(cardHeaderVariants({ size }), className)}\n    >\n      {children}\n    </header>\n  );\n}\n\nCardHeader.displayName = \"CardHeader\";\n\nexport function CardBody({ className, children }: CardSectionProps) {\n  return (\n    <div\n      data-slot=\"card-body\"\n      className={cn(\"flex flex-1 flex-col gap-2\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nCardBody.displayName = \"CardBody\";\n\nexport function CardFooter({ className, children }: CardSectionProps) {\n  const size = useCardSize();\n  return (\n    <footer\n      data-slot=\"card-footer\"\n      className={cn(cardFooterVariants({ size }), className)}\n    >\n      {children}\n    </footer>\n  );\n}\n\nCardFooter.displayName = \"CardFooter\";\n\nexport function CardTitle({\n  className,\n  children,\n  as = \"h3\",\n  ref,\n  ...rest\n}: CardTitleProps) {\n  const size = useCardSize();\n  const Tag = as as ElementType;\n  return (\n    <Tag\n      ref={ref as never}\n      data-slot=\"card-title\"\n      className={cn(cardTitleVariants({ size }), className)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n}\n\nCardTitle.displayName = \"CardTitle\";\n\nexport function CardDescription({\n  className,\n  children,\n  as = \"p\",\n  ref,\n  ...rest\n}: CardDescriptionProps) {\n  const size = useCardSize();\n  const Tag = as as ElementType;\n  return (\n    <Tag\n      ref={ref as never}\n      data-slot=\"card-description\"\n      className={cn(cardDescriptionVariants({ size }), className)}\n      {...rest}\n    >\n      {children}\n    </Tag>\n  );\n}\n\nCardDescription.displayName = \"CardDescription\";\n"]}