saha-ui 1.22.0 → 1.22.2

package/dist/components/Avatar/Avatar.types.d.ts

@@ -2,16 +2,32 @@ import { default as React } from 'react';
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 export type AvatarShape = "circle" | "square" | "rounded";
 export type AvatarStatus = "online" | "offline" | "away" | "busy" | "none";
+/**
+ * Avatar props - supports both compound component pattern and legacy props pattern
+ *
+ * Compound pattern:
+ * <Avatar>
+ *   <AvatarImage src="..." alt="..." />
+ *   <AvatarFallback>JB</AvatarFallback>
+ * </Avatar>
+ *
+ * Legacy pattern:
+ * <Avatar src="..." alt="..." initials="JB" />
+ */
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Image source URL
+     * Image source URL (legacy pattern)
      */
-    src: string;
+    src?: string;
     /**
-     * Alt text for accessibility
+     * Alt text for accessibility (legacy pattern)
      * @default "Avatar"
      */
     alt?: string;
+    /**
+     * Fallback content (e.g., initials) to display when image fails to load (legacy pattern)
+     */
+    fallback?: string;
     /**
      * Size of the avatar
      * @default "md"
@@ -27,10 +43,6 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default "none"
      */
     status?: AvatarStatus;
-    /**
-     * Initials to display when image fails to load
-     */
-    initials?: string;
     /**
      * Whether to show a border
      * @default false
@@ -41,5 +53,40 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default false
      */
     ring?: boolean;
+    /**
+     * Children elements (AvatarImage, AvatarFallback) for compound pattern
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Avatar image props
+ */
+export interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt?: string;
+    /**
+     * Callback when image fails to load
+     */
+    onLoadingStatusChange?: (status: "loading" | "loaded" | "error") => void;
+}
+/**
+ * Avatar fallback props
+ */
+export interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Delay before showing fallback (ms)
+     * @default 0
+     */
+    delayMs?: number;
+    /**
+     * Children content (typically initials)
+     */
+    children?: React.ReactNode;
 }
 //# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/Avatar/Avatar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3E,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAClE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AAC1D,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3E;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACjD;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CAC1E;AAED;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Avatar/index.d.ts

@@ -1,5 +1,29 @@
 import { default as React } from 'react';
-import { AvatarProps } from './Avatar.types';
+import { AvatarProps, AvatarImageProps, AvatarFallbackProps } from './Avatar.types';
+/**
+ * Avatar Component
+ * Supports both compound component pattern and legacy props pattern
+ *
+ * Compound pattern:
+ * <Avatar>
+ *   <AvatarImage src="..." alt="..." />
+ *   <AvatarFallback>JB</AvatarFallback>
+ * </Avatar>
+ *
+ * Legacy pattern:
+ * <Avatar src="..." alt="..." initials="JB" />
+ */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AvatarImage Component
+ * Displays the avatar image with loading state handling
+ */
+declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback Component
+ * Displays fallback content when image fails or is loading
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
 export default Avatar;
+export { Avatar, AvatarImage, AvatarFallback };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,QAAA,MAAM,MAAM,oFA+EX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAiBxB;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,MAAM,oFAoHX,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,WAAW,2FA4DhB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,cAAc,6FAwDnB,CAAC;AAIF,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/Avatar/index.js

@@ -1,70 +1,166 @@
-import { jsxs as l, jsx as a, Fragment as N } from "react/jsx-runtime";
-import x from "react";
-import { cn as e } from "../../lib/utils.js";
-import { statusVariants as y, avatarVariants as A } from "./Avatar.styles.js";
-import { useAvatar as j } from "../../hooks/useAvatar.js";
-const k = x.forwardRef(
+import { jsxs as h, jsx as e, Fragment as L } from "react/jsx-runtime";
+import p, { createContext as F, useState as w, useEffect as S, useContext as T } from "react";
+import { cn as d } from "../../lib/utils.js";
+import { statusVariants as N, avatarVariants as A } from "./Avatar.styles.js";
+import { useAvatar as B } from "../../hooks/useAvatar.js";
+const k = F(null), I = () => T(k), P = p.forwardRef(
   ({
-    src: o,
-    alt: r = "Avatar",
-    size: i = "md",
-    shape: m = "circle",
-    status: n = "none",
-    initials: c,
-    bordered: d = !1,
-    ring: f = !1,
-    className: p,
-    ...h
-  }, u) => {
-    const {
-      showInitials: t,
-      bgColor: v,
-      initialsText: g,
-      imageLoaded: s,
-      handleImageLoad: b,
-      handleImageError: w
-    } = j({
-      src: o,
-      alt: r,
-      initials: c
+    src: t,
+    alt: c = "Avatar",
+    fallback: i,
+    size: a = "md",
+    shape: u = "circle",
+    status: o = "none",
+    bordered: r = !1,
+    ring: s = !1,
+    className: l,
+    children: m,
+    ...n
+  }, f) => {
+    const [g, v] = w("loading"), y = t !== void 0 || i !== void 0 && !m, {
+      showInitials: b,
+      bgColor: C,
+      initialsText: R,
+      imageLoaded: x,
+      handleImageLoad: j,
+      handleImageError: E
+    } = B({
+      src: t,
+      alt: c,
+      initials: i
     });
-    return /* @__PURE__ */ l(
+    return y ? /* @__PURE__ */ h(
       "div",
       {
-        ref: u,
-        className: e(
-          A({ size: i, shape: m, bordered: d, ring: f }),
-          t && v,
-          t && "text-white",
-          p
+        ref: f,
+        className: d(
+          A({ size: a, shape: u, bordered: r, ring: s }),
+          b && C,
+          b && "text-white",
+          l
         ),
-        ...h,
+        ...n,
         children: [
-          !t && /* @__PURE__ */ l(N, { children: [
-            /* @__PURE__ */ a(
+          !b && t && /* @__PURE__ */ h(L, { children: [
+            /* @__PURE__ */ e(
               "img",
               {
-                src: o,
-                alt: r,
-                className: e(
+                src: t,
+                alt: c,
+                className: d(
                   "w-full h-full object-cover transition-opacity duration-300",
-                  s ? "opacity-100" : "opacity-0"
+                  x ? "opacity-100" : "opacity-0"
                 ),
-                onLoad: b,
-                onError: w
+                onLoad: j,
+                onError: E
               }
             ),
-            !s && /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-muted animate-pulse" })
+            !x && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-muted animate-pulse" })
           ] }),
-          t && /* @__PURE__ */ a("span", { className: "relative z-10 font-bold tracking-tight", children: g }),
-          n !== "none" && /* @__PURE__ */ a("span", { className: e(y({ size: i, status: n })) }),
-          /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-black/0 group-hover:from-white/10 group-hover:to-black/5 transition-all duration-300 pointer-events-none" })
+          b && /* @__PURE__ */ e("span", { className: "relative z-10 font-bold tracking-tight", children: R }),
+          o !== "none" && /* @__PURE__ */ e("span", { className: d(N({ size: a, status: o })) }),
+          /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-black/0 group-hover:from-white/10 group-hover:to-black/5 transition-all duration-300 pointer-events-none" })
         ]
       }
+    ) : /* @__PURE__ */ e(
+      k.Provider,
+      {
+        value: { imageLoadingStatus: g, setImageLoadingStatus: v },
+        children: /* @__PURE__ */ h(
+          "div",
+          {
+            ref: f,
+            className: d(
+              A({ size: a, shape: u, bordered: r, ring: s }),
+              l
+            ),
+            ...n,
+            children: [
+              m,
+              o !== "none" && /* @__PURE__ */ e("span", { className: d(N({ size: a, status: o })) }),
+              /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-br from-white/0 via-white/0 to-black/0 group-hover:from-white/10 group-hover:to-black/5 transition-all duration-300 pointer-events-none" })
+            ]
+          }
+        )
+      }
     );
   }
 );
-k.displayName = "Avatar";
+P.displayName = "Avatar";
+const V = p.forwardRef(
+  ({ src: t, alt: c = "Avatar", className: i, onLoadingStatusChange: a, ...u }, o) => {
+    const r = I(), [s, l] = w("loading"), m = () => {
+      l("loaded"), r?.setImageLoadingStatus("loaded"), a?.("loaded");
+    }, n = () => {
+      l("error"), r?.setImageLoadingStatus("error"), a?.("error");
+    };
+    return S(() => {
+      t ? (l("loading"), r?.setImageLoadingStatus("loading"), a?.("loading")) : (l("error"), r?.setImageLoadingStatus("error"));
+    }, [t]), !t || s === "error" ? null : /* @__PURE__ */ h(L, { children: [
+      /* @__PURE__ */ e(
+        "img",
+        {
+          ref: o,
+          src: t,
+          alt: c,
+          className: d(
+            "w-full h-full object-cover transition-opacity duration-300",
+            s === "loaded" ? "opacity-100" : "opacity-0",
+            i
+          ),
+          onLoad: m,
+          onError: n,
+          ...u
+        }
+      ),
+      s === "loading" && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-muted animate-pulse" })
+    ] });
+  }
+);
+V.displayName = "AvatarImage";
+const _ = p.forwardRef(
+  ({ delayMs: t = 0, className: c, children: i, ...a }, u) => {
+    const o = I(), [r, s] = w(t === 0);
+    return S(() => {
+      if (t > 0) {
+        const n = setTimeout(() => s(!0), t);
+        return () => clearTimeout(n);
+      }
+    }, [t]), r && (!o || o.imageLoadingStatus === "error") ? /* @__PURE__ */ e(
+      "span",
+      {
+        ref: u,
+        className: d(
+          "absolute inset-0 flex items-center justify-center font-bold tracking-tight text-white",
+          (() => {
+            if (!i) return "bg-muted";
+            const n = String(i), f = [
+              "bg-red-500",
+              "bg-blue-500",
+              "bg-green-500",
+              "bg-purple-500",
+              "bg-pink-500",
+              "bg-indigo-500",
+              "bg-cyan-500",
+              "bg-orange-500"
+            ];
+            let g = 0;
+            for (let v = 0; v < n.length; v++)
+              g = n.charCodeAt(v) + ((g << 5) - g);
+            return f[Math.abs(g) % f.length];
+          })(),
+          c
+        ),
+        ...a,
+        children: i
+      }
+    ) : null;
+  }
+);
+_.displayName = "AvatarFallback";
 export {
-  k as default
+  P as Avatar,
+  _ as AvatarFallback,
+  V as AvatarImage,
+  P as default
 };

package/dist/components/Card/Card.types.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type CardVariant = "default" | "glass" | "glass-strong" | "glass-subtle" | "bordered";
-export type CardPadding = "none" | "sm" | "md" | "lg" | "xl";
+export type CardPadding = "none" | "sm" | "md" | "lg" | "xl" | number | string;
 export type CardRounded = "sm" | "md" | "lg" | "xl" | "2xl";
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -14,7 +14,12 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: CardVariant;
     /**
      * Padding size applied to the card
+     * Accepts predefined tokens, numbers (px), or string with units
      * @default "md"
+     * @example
+     * <Card padding="lg">Token padding</Card>
+     * <Card padding={24}>24px padding</Card>
+     * <Card padding="2rem">Custom padding</Card>
      */
     padding?: CardPadding;
     /**

package/dist/components/Card/Card.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,cAAc,GACd,cAAc,GACd,UAAU,CAAC;AACf,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,OAAO,GACP,cAAc,GACd,cAAc,GACd,UAAU,CAAC;AACf,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE5D,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/components/Card/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAElE,eAAO,MAAM,IAAI,kFA6BhB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wFAStB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2FAerB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mGAgB1B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFASvB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wFAetB,CAAC;AAIF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAG7C;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAElE,eAAO,MAAM,IAAI,kFAiDhB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wFAStB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2FAerB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mGAgB1B,CAAC;AAIH;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFASvB,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wFAetB,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/components/Card/index.js

@@ -1,87 +1,100 @@
-import { jsx as o } from "react/jsx-runtime";
-import s from "react";
-import { cn as m } from "../../lib/utils.js";
-import { cardVariants as c } from "./Card.styles.js";
+import { jsx as a } from "react/jsx-runtime";
+import m from "react";
+import { cn as d } from "../../lib/utils.js";
+import { cardVariants as N } from "./Card.styles.js";
 import { Slot as n } from "../../lib/Slot.js";
-const C = s.forwardRef(
+const x = m.forwardRef(
   ({
     children: r,
-    variant: e,
-    padding: a,
+    variant: o,
+    padding: e,
     rounded: t,
-    hoverable: d,
-    className: i,
-    onClick: l,
-    ...f
-  }, p) => /* @__PURE__ */ o(
-    "div",
-    {
-      ref: p,
-      className: m(
-        c({ variant: e, padding: a, rounded: t, hoverable: d }),
-        i
-      ),
-      onClick: l,
-      ...f,
-      children: /* @__PURE__ */ o("div", { className: "relative", children: r })
-    }
-  )
+    hoverable: s,
+    className: f,
+    onClick: c,
+    style: l,
+    ...p
+  }, C) => {
+    const i = typeof e == "string" && ["none", "sm", "md", "lg", "xl"].includes(e), u = !i && e !== void 0 ? {
+      padding: typeof e == "number" ? `${e}px` : e,
+      ...l
+    } : l;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        ref: C,
+        className: d(
+          N({
+            variant: o,
+            padding: i ? e : void 0,
+            rounded: t,
+            hoverable: s
+          }),
+          f
+        ),
+        style: u,
+        onClick: c,
+        ...p,
+        children: /* @__PURE__ */ a("div", { className: "relative", children: r })
+      }
+    );
+  }
 );
-C.displayName = "Card";
-const N = s.forwardRef(
-  ({ children: r, className: e = "", asChild: a = !1 }, t) => /* @__PURE__ */ o(a ? n : "div", { ref: t, className: m("mb-4", e), children: r })
+x.displayName = "Card";
+const y = m.forwardRef(
+  ({ children: r, className: o = "", asChild: e = !1 }, t) => /* @__PURE__ */ a(e ? n : "div", { ref: t, className: d("mb-4", o), children: r })
 );
-N.displayName = "CardHeader";
-const u = s.forwardRef(
-  ({ children: r, className: e = "", asChild: a = !1 }, t) => /* @__PURE__ */ o(
-    a ? n : "h3",
+y.displayName = "CardHeader";
+const v = m.forwardRef(
+  ({ children: r, className: o = "", asChild: e = !1 }, t) => /* @__PURE__ */ a(
+    e ? n : "h3",
     {
       ref: t,
-      className: m(
+      className: d(
         "text-xl font-semibold text-foreground tracking-tight",
-        e
+        o
       ),
       children: r
     }
   )
 );
-u.displayName = "CardTitle";
-const x = s.forwardRef(({ children: r, className: e = "", asChild: a = !1 }, t) => /* @__PURE__ */ o(
-  a ? n : "p",
+v.displayName = "CardTitle";
+const R = m.forwardRef(({ children: r, className: o = "", asChild: e = !1 }, t) => /* @__PURE__ */ a(
+  e ? n : "p",
   {
     ref: t,
-    className: m(
+    className: d(
       "text-sm text-muted-foreground mt-1.5 leading-relaxed",
-      e
+      o
     ),
     children: r
   }
 ));
-x.displayName = "CardDescription";
-const g = s.forwardRef(
-  ({ children: r, className: e = "", asChild: a = !1 }, t) => /* @__PURE__ */ o(a ? n : "div", { ref: t, className: m("text-foreground", e), children: r })
+R.displayName = "CardDescription";
+const b = m.forwardRef(
+  ({ children: r, className: o = "", asChild: e = !1 }, t) => /* @__PURE__ */ a(e ? n : "div", { ref: t, className: d("text-foreground", o), children: r })
 );
-g.displayName = "CardContent";
-const R = s.forwardRef(
-  ({ children: r, className: e = "", asChild: a = !1 }, t) => /* @__PURE__ */ o(
-    a ? n : "div",
+b.displayName = "CardContent";
+const g = m.forwardRef(
+  ({ children: r, className: o = "", asChild: e = !1 }, t) => /* @__PURE__ */ a(
+    e ? n : "div",
     {
       ref: t,
-      className: m(
+      className: d(
         "mt-4 pt-4 border-t border-border/50 flex items-center gap-2",
-        e
+        o
       ),
       children: r
     }
   )
 );
-R.displayName = "CardFooter";
+g.displayName = "CardFooter";
 export {
-  C as Card,
-  g as CardContent,
-  x as CardDescription,
-  R as CardFooter,
-  N as CardHeader,
-  u as CardTitle,
-  C as default
+  x as Card,
+  b as CardContent,
+  R as CardDescription,
+  g as CardFooter,
+  y as CardHeader,
+  v as CardTitle,
+  x as default
 };

package/dist/components/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,SAAS,uFAqCrB,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Container/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,SAAS,uFA2DrB,CAAC"}

package/dist/components/Container/Container.js

@@ -1,40 +1,54 @@
-import { jsx as p } from "react/jsx-runtime";
-import c from "react";
-import { Slot as u } from "../../lib/Slot.js";
-import { cn as y } from "../../lib/utils.js";
-import { containerVariants as C } from "./Container.styles.js";
-const x = c.forwardRef(
+import { jsx as x } from "react/jsx-runtime";
+import v from "react";
+import { Slot as C } from "../../lib/Slot.js";
+import { cn as N } from "../../lib/utils.js";
+import { containerVariants as R } from "./Container.styles.js";
+const S = v.forwardRef(
   ({
-    className: a,
-    size: r = "lg",
+    className: t,
+    size: a = "lg",
     padding: e = "default",
-    center: o = !0,
+    center: l = !0,
     gutter: i = !0,
-    asChild: t = !1,
-    children: l,
-    role: m,
-    "aria-label": d,
-    "aria-labelledby": n,
-    "aria-describedby": b,
-    ...f
-  }, s) => /* @__PURE__ */ p(
-    t ? u : "div",
-    {
-      ref: s,
-      className: y(
-        C({ size: r, padding: e, center: o, gutter: i }),
-        a
-      ),
-      role: m,
-      "aria-label": d,
-      "aria-labelledby": n,
-      "aria-describedby": b,
-      ...f,
-      children: l
-    }
-  )
+    asChild: m = !1,
+    children: s,
+    style: o,
+    role: n,
+    "aria-label": f,
+    "aria-labelledby": b,
+    "aria-describedby": c,
+    ...u
+  }, y) => {
+    const p = m ? C : "div", r = typeof e == "string" && ["none", "sm", "default", "lg"].includes(e), d = !r && e !== void 0 ? {
+      paddingTop: typeof e == "number" ? `${e}px` : e,
+      paddingBottom: typeof e == "number" ? `${e}px` : e,
+      ...o
+    } : o;
+    return /* @__PURE__ */ x(
+      p,
+      {
+        ref: y,
+        className: N(
+          R({
+            size: a,
+            padding: r ? e : void 0,
+            center: l,
+            gutter: i
+          }),
+          t
+        ),
+        style: d,
+        role: n,
+        "aria-label": f,
+        "aria-labelledby": b,
+        "aria-describedby": c,
+        ...u,
+        children: s
+      }
+    );
+  }
 );
-x.displayName = "Container";
+S.displayName = "Container";
 export {
-  x as Container
+  S as Container
 };

package/dist/components/Container/Container.types.d.ts

@@ -10,11 +10,14 @@ export type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
 /**
  * Padding variants for the Container component
  * Controls the vertical padding
+ * Accepts predefined tokens, numbers (px), or string with units
  * @example
  * <Container padding="none">No padding</Container>
  * <Container padding="lg">Large padding</Container>
+ * <Container padding={24}>24px padding</Container>
+ * <Container padding="2rem">Custom padding</Container>
  */
-export type ContainerPadding = "none" | "sm" | "default" | "lg";
+export type ContainerPadding = "none" | "sm" | "default" | "lg" | number | string;
 /**
  * Props for the Container component
  *