saha-ui 1.21.0 → 1.22.1

package/dist/components/AspectRatio/AspectRatio.styles.d.ts

@@ -6,7 +6,7 @@ declare const aspectRatioVariants: (props?: ({
  * Overlay gradient variants
  */
 declare const overlayVariants: (props?: ({
-    position?: "top" | "left" | "center" | "right" | "bottom" | null | undefined;
+    position?: "top" | "left" | "right" | "bottom" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export { aspectRatioVariants, overlayVariants };
 //# sourceMappingURL=AspectRatio.styles.d.ts.map

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/Form/Form.styles.d.ts

@@ -56,7 +56,7 @@ export declare const formSectionTitleVariants: (props?: ({
  * Form actions variants
  */
 export declare const formActionsVariants: (props?: ({
-    align?: "left" | "center" | "right" | "between" | null | undefined;
+    align?: "left" | "right" | "center" | "between" | null | undefined;
     variant?: "error" | "primary" | "secondary" | "success" | "warning" | "info" | "default" | "glass" | "accent" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=Form.styles.d.ts.map

package/dist/components/Table/Table.styles.d.ts

@@ -10,7 +10,7 @@ declare const tableHeaderVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tableCellVariants: (props?: ({
     density?: "normal" | "compact" | "comfortable" | null | undefined;
-    align?: "left" | "center" | "right" | null | undefined;
+    align?: "left" | "right" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tableRowVariants: (props?: ({
     hoverable?: boolean | null | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAYvD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqUlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAYvD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkZlD,CAAC;AAEF,eAAe,WAAW,CAAC"}