saha-ui 1.14.0 → 1.15.0

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

@@ -1,6 +1,21 @@
+/**
+ * Skeleton variant styles using CVA
+ *
+ * Why we use skeleton loaders:
+ * 1. Improve perceived performance - users see immediate feedback
+ * 2. Reduce layout shift - maintain space before content loads
+ * 3. Better UX - animated placeholders feel more responsive than blank screens
+ * 4. Communicate loading state - users understand content is coming
+ */
 export declare const skeletonVariants: (props?: ({
-    variant?: "default" | "gradient" | "glass" | "pulse" | "shimmer" | "wave" | null | undefined;
-    shape?: "text" | "circle" | "rounded" | "rectangle" | null | undefined;
-    speed?: "normal" | "slow" | "fast" | null | undefined;
+    variant?: "default" | "gradient" | "glass" | "pulse" | "shimmer" | "glow" | "wave" | null | undefined;
+    shape?: "input" | "button" | "text" | "circle" | "rounded" | "avatar" | "rectangle" | "card" | null | undefined;
+    speed?: "normal" | "slow" | "fast" | "ultra-fast" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Container variant for skeleton groups
+ */
+export declare const skeletonContainerVariants: (props?: ({
+    spacing?: "normal" | "loose" | "tight" | "relaxed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=Skeleton.styles.d.ts.map

package/dist/components/Skeleton/Skeleton.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;;;8EA6F5B,CAAC"}
+{"version":3,"file":"Skeleton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB;;;;8EAyH5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,yBAAyB;;8EAerC,CAAC"}

package/dist/components/Skeleton/Skeleton.styles.js

@@ -4,86 +4,108 @@ const a = e(
     // Base styles
     "relative",
     "overflow-hidden",
-    "bg-base-200/50",
-    "dark:bg-base-content/10",
-    "shadow-sm"
+    "bg-gradient-to-r",
+    "from-muted/60",
+    "via-muted/40",
+    "to-muted/60",
+    "dark:from-muted/20",
+    "dark:via-muted/10",
+    "dark:to-muted/20"
   ],
   {
     variants: {
       variant: {
-        default: ["animate-pulse", "shadow-inner"],
-        pulse: ["animate-pulse", "shadow-inner"],
+        // Simple pulse animation - best for subtle loading states
+        default: ["animate-pulse"],
+        // Pulse with enhanced rhythm - draws more attention
+        pulse: ["animate-[pulse_1.5s_cubic-bezier(0.4,0,0.6,1)_infinite]"],
+        // Wave effect with sweeping gradient - premium feel
         wave: [
-          "shadow-md",
           "before:absolute",
           "before:inset-0",
           "before:-translate-x-full",
-          "before:animate-[shimmer_2s_infinite]",
+          "before:animate-[shimmer_2s_ease-in-out_infinite]",
           "before:bg-gradient-to-r",
           "before:from-transparent",
-          "before:via-primary/10",
-          "before:to-transparent",
-          "after:absolute",
-          "after:inset-0",
-          "after:bg-gradient-to-b",
-          "after:from-transparent",
-          "after:to-black/5"
+          "before:via-white/20",
+          "dark:before:via-white/10",
+          "before:to-transparent"
         ],
+        // Fast shimmer - energetic loading state
         shimmer: [
-          "shadow-md",
           "before:absolute",
           "before:inset-0",
           "before:-translate-x-full",
-          "before:animate-[shimmer_1.5s_infinite]",
+          "before:animate-[shimmer_1.5s_ease-in-out_infinite]",
           "before:bg-gradient-to-r",
           "before:from-transparent",
-          "before:via-white/30",
-          "dark:before:via-white/15",
+          "before:via-primary/20",
+          "dark:before:via-primary/15",
           "before:to-transparent",
-          "before:shadow-[0_0_20px_10px_rgba(255,255,255,0.1)]"
+          "before:blur-sm"
         ],
+        // Gradient flow - smooth color transition
         gradient: [
           "bg-gradient-to-r",
-          "from-base-200/50",
-          "via-primary/10",
-          "to-base-200/50",
-          "dark:from-base-content/10",
-          "dark:via-primary/5",
-          "dark:to-base-content/10",
-          "animate-pulse",
-          "shadow-lg"
+          "from-muted/80",
+          "via-primary/20",
+          "to-muted/80",
+          "dark:from-muted/30",
+          "dark:via-primary/10",
+          "dark:to-muted/30",
+          "animate-[pulse_2s_ease-in-out_infinite]",
+          "bg-[length:200%_100%]"
         ],
+        // Glass morphism effect - modern and elegant
         glass: [
           "bg-white/5",
-          "backdrop-blur-md",
+          "dark:bg-white/[0.02]",
+          "backdrop-blur-sm",
           "border",
           "border-white/10",
-          "shadow-xl",
+          "dark:border-white/5",
           "before:absolute",
           "before:inset-0",
           "before:-translate-x-full",
-          "before:animate-[shimmer_2s_infinite]",
+          "before:animate-[shimmer_2.5s_ease-in-out_infinite]",
           "before:bg-gradient-to-r",
           "before:from-transparent",
-          "before:via-white/20",
-          "before:to-transparent",
-          "after:absolute",
-          "after:inset-0",
-          "after:bg-gradient-to-br",
-          "after:from-white/5",
-          "after:to-transparent"
+          "before:via-white/15",
+          "dark:before:via-white/8",
+          "before:to-transparent"
+        ],
+        // Glow effect - attention-grabbing
+        glow: [
+          "animate-[pulse_2s_ease-in-out_infinite]",
+          "shadow-lg",
+          "shadow-primary/10",
+          "dark:shadow-primary/5",
+          "before:absolute",
+          "before:inset-0",
+          "before:-translate-x-full",
+          "before:animate-[shimmer_2s_ease-in-out_infinite]",
+          "before:bg-gradient-to-r",
+          "before:from-transparent",
+          "before:via-primary/30",
+          "dark:before:via-primary/20",
+          "before:to-transparent"
         ]
       },
       shape: {
         rectangle: ["rounded-md"],
-        circle: ["rounded-full"],
+        circle: ["rounded-full", "aspect-square"],
         rounded: ["rounded-lg"],
-        text: ["rounded-sm"]
+        text: ["rounded-sm", "h-4"],
+        card: ["rounded-xl"],
+        button: ["rounded-lg", "h-10"],
+        input: ["rounded-md", "h-10"],
+        avatar: ["rounded-full", "aspect-square"]
       },
       speed: {
-        slow: ["[animation-duration:2s]"],
+        slow: ["[animation-duration:3s]"],
         normal: [],
-        fast: ["[animation-duration:0.8s]"]
+        fast: ["[animation-duration:1s]"],
+        "ultra-fast": ["[animation-duration:0.6s]"]
       }
     },
     defaultVariants: {
@@ -92,7 +114,23 @@ const a = e(
       speed: "normal"
     }
   }
+), t = e(
+  ["flex", "flex-col", "gap-3", "w-full"],
+  {
+    variants: {
+      spacing: {
+        tight: ["gap-1"],
+        normal: ["gap-3"],
+        loose: ["gap-4"],
+        relaxed: ["gap-6"]
+      }
+    },
+    defaultVariants: {
+      spacing: "normal"
+    }
+  }
 );
 export {
+  t as skeletonContainerVariants,
   a as skeletonVariants
 };

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

@@ -1,24 +1,67 @@
 import { default as React } from 'react';
 /**
  * Skeleton variant types
+ *
+ * - default: Simple pulse animation
+ * - pulse: Enhanced pulse with custom timing
+ * - wave: Sweeping wave effect from left to right
+ * - shimmer: Fast shimmer with primary color accent
+ * - gradient: Gradient flow animation
+ * - glass: Glass morphism effect with backdrop blur
+ * - glow: Glowing effect with shadow
  */
-export type SkeletonVariant = "default" | "pulse" | "wave" | "shimmer" | "gradient" | "glass";
+export type SkeletonVariant = "default" | "pulse" | "wave" | "shimmer" | "gradient" | "glass" | "glow";
 /**
  * Skeleton shape types
+ *
+ * - rectangle: Standard rectangular shape with medium rounded corners
+ * - circle: Perfect circle shape (aspect-square)
+ * - rounded: Rounded rectangle with larger border radius
+ * - text: Small height for text line simulation
+ * - card: Card-like shape with extra large rounded corners
+ * - button: Button-sized shape
+ * - input: Input field sized shape
+ * - avatar: Circle avatar shape
  */
-export type SkeletonShape = "rectangle" | "circle" | "rounded" | "text";
+export type SkeletonShape = "rectangle" | "circle" | "rounded" | "text" | "card" | "button" | "input" | "avatar";
 /**
  * Skeleton animation speed types
+ *
+ * - slow: 3s duration - subtle, calm loading
+ * - normal: 1.5s duration - balanced loading
+ * - fast: 1s duration - energetic loading
+ * - ultra-fast: 0.6s duration - very quick loading
  */
-export type SkeletonSpeed = "slow" | "normal" | "fast";
+export type SkeletonSpeed = "slow" | "normal" | "fast" | "ultra-fast";
+/**
+ * Skeleton container spacing types
+ */
+export type SkeletonSpacing = "tight" | "normal" | "loose" | "relaxed";
 /**
  * Props for the Skeleton component
  *
  * @example
+ * Basic usage:
  * ```tsx
  * <Skeleton width="100%" height="20px" />
- * <Skeleton variant="pulse" shape="circle" width="48px" height="48px" />
- * <Skeleton variant="shimmer" count={3} />
+ * ```
+ *
+ * @example
+ * Avatar skeleton:
+ * ```tsx
+ * <Skeleton variant="shimmer" shape="circle" width="48px" height="48px" />
+ * ```
+ *
+ * @example
+ * Multiple text lines:
+ * ```tsx
+ * <Skeleton variant="pulse" shape="text" count={3} />
+ * ```
+ *
+ * @example
+ * Card skeleton:
+ * ```tsx
+ * <Skeleton variant="wave" shape="card" height="200px" />
  * ```
  */
 export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -34,16 +77,19 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     shape?: SkeletonShape;
     /**
      * Width of the skeleton (CSS value)
+     * Can be a number (converted to px) or a string with units
      * @default "100%"
      */
     width?: string | number;
     /**
      * Height of the skeleton (CSS value)
+     * Can be a number (converted to px) or a string with units
      * @default "20px"
      */
     height?: string | number;
     /**
      * Number of skeleton lines to render
+     * When count > 1, skeletons are stacked vertically with gap
      * @default 1
      */
     count?: number;
@@ -53,13 +99,157 @@ export interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     speed?: SkeletonSpeed;
     /**
-     * Disable animation
+     * Disable animation completely
+     * Useful for reducing motion for accessibility
      * @default false
      */
     noAnimation?: boolean;
     /**
      * Custom border radius (only for rectangle shape)
+     * Overrides the default border radius for the shape
      */
     borderRadius?: string;
+    /**
+     * Spacing between multiple skeletons when count > 1
+     * @default "normal"
+     */
+    spacing?: SkeletonSpacing;
+    /**
+     * Custom CSS class names for additional styling
+     */
+    className?: string;
+    /**
+     * Custom inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Props for preset skeleton components
+ */
+export interface SkeletonPresetProps extends Omit<SkeletonProps, "width" | "height" | "shape" | "count" | "spacing"> {
+    /**
+     * Custom CSS class names
+     */
+    className?: string;
+}
+/**
+ * Props for Card Skeleton component
+ */
+export interface SkeletonCardProps extends SkeletonPresetProps {
+    /**
+     * Show image skeleton at the top
+     * @default true
+     */
+    showImage?: boolean;
+    /**
+     * Image height
+     * @default "200px"
+     */
+    imageHeight?: string;
+    /**
+     * Number of text lines
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Show action button skeleton
+     * @default true
+     */
+    showActions?: boolean;
+}
+/**
+ * Props for Avatar Skeleton component
+ */
+export interface SkeletonAvatarProps extends SkeletonPresetProps {
+    /**
+     * Size of the avatar
+     * @default "md"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Show name text skeleton next to avatar
+     * @default false
+     */
+    showText?: boolean;
+    /**
+     * Number of text lines when showText is true
+     * @default 2
+     */
+    lines?: number;
+}
+/**
+ * Props for List Skeleton component
+ */
+export interface SkeletonListProps extends SkeletonPresetProps {
+    /**
+     * Number of list items
+     * @default 3
+     */
+    items?: number;
+    /**
+     * Show avatar in each list item
+     * @default true
+     */
+    showAvatar?: boolean;
+    /**
+     * Avatar size
+     * @default "md"
+     */
+    avatarSize?: "sm" | "md" | "lg";
+    /**
+     * Number of text lines per item
+     * @default 2
+     */
+    lines?: number;
+}
+/**
+ * Props for Table Skeleton component
+ */
+export interface SkeletonTableProps extends SkeletonPresetProps {
+    /**
+     * Number of rows
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * Number of columns
+     * @default 4
+     */
+    columns?: number;
+    /**
+     * Show table header
+     * @default true
+     */
+    showHeader?: boolean;
+}
+/**
+ * Props for Form Skeleton component
+ */
+export interface SkeletonFormProps extends SkeletonPresetProps {
+    /**
+     * Number of form fields
+     * @default 4
+     */
+    fields?: number;
+    /**
+     * Show submit button skeleton
+     * @default true
+     */
+    showButton?: boolean;
+}
+/**
+ * Props for Text Skeleton component
+ */
+export interface SkeletonTextProps extends SkeletonPresetProps {
+    /**
+     * Number of text lines
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Last line width percentage
+     * @default 60
+     */
+    lastLineWidth?: number;
 }
 //# sourceMappingURL=Skeleton.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,GACT,UAAU,GACV,OAAO,CAAC;AAEZ;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEvD;;;;;;;;;GASG;AACH,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB"}
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"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"}

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

@@ -6,19 +6,53 @@ import { SkeletonProps } from './Skeleton.types';
  * A flexible skeleton loader component for displaying placeholder content
  * while data is loading. Supports multiple variants, shapes, and animations.
  *
+ * Why use skeleton loaders?
+ * 1. **Perceived Performance**: Users see immediate visual feedback
+ * 2. **Reduced Layout Shift**: Maintains space before content loads (better CLS score)
+ * 3. **Better UX**: Animated placeholders feel more responsive than blank screens
+ * 4. **Loading Communication**: Users understand content is being fetched
+ * 5. **Progressive Loading**: Show structure before details
+ *
+ * How it works:
+ * - Uses CSS animations (pulse, shimmer, wave) to create loading effect
+ * - Pseudo-elements (::before) create animated gradient overlays
+ * - CVA (Class Variance Authority) manages variant combinations
+ * - Supports custom dimensions, shapes, and animation speeds
+ *
  * @example
+ * Basic usage:
  * ```tsx
- * // Basic skeleton
  * <Skeleton width="100%" height="20px" />
+ * ```
  *
- * // Circle skeleton (avatar)
- * <Skeleton variant="pulse" shape="circle" width="48px" height="48px" />
+ * @example
+ * Avatar skeleton:
+ * ```tsx
+ * <Skeleton variant="shimmer" shape="circle" width="48px" height="48px" />
+ * ```
  *
- * // Multiple skeleton lines
- * <Skeleton variant="shimmer" count={3} />
+ * @example
+ * Multiple text lines:
+ * ```tsx
+ * <Skeleton variant="pulse" shape="text" count={3} spacing="normal" />
+ * ```
  *
- * // Custom styling
- * <Skeleton variant="wave" width="200px" height="100px" className="mb-4" />
+ * @example
+ * Card skeleton with wave effect:
+ * ```tsx
+ * <Skeleton variant="wave" shape="card" height="200px" />
+ * ```
+ *
+ * @example
+ * Custom styling and no animation:
+ * ```tsx
+ * <Skeleton
+ *   variant="gradient"
+ *   width="200px"
+ *   height="100px"
+ *   className="mb-4"
+ *   noAnimation={false}
+ * />
  * ```
  */
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,QAAQ,sFAuEpB,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,eAAO,MAAM,QAAQ,sFA2FpB,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/components/Skeleton/index.js

@@ -1,64 +1,75 @@
-import { jsx as a } from "react/jsx-runtime";
-import k from "react";
-import { cn as u } from "../../lib/utils.js";
-import { skeletonVariants as v } from "./Skeleton.styles.js";
-const N = k.forwardRef(
+import { jsx as r } from "react/jsx-runtime";
+import V from "react";
+import { cn as n } from "../../lib/utils.js";
+import { skeletonVariants as v, skeletonContainerVariants as I } from "./Skeleton.styles.js";
+const L = V.forwardRef(
   ({
-    variant: o = "default",
-    shape: t = "rectangle",
-    width: l = "100%",
-    height: r = "20px",
-    count: f = 1,
-    speed: s = "normal",
-    noAnimation: e = !1,
-    borderRadius: m,
-    className: c,
-    style: i,
-    ...d
+    variant: m = "default",
+    shape: a = "rectangle",
+    width: e = "100%",
+    height: s = "20px",
+    count: l = 1,
+    speed: i = "normal",
+    spacing: x = "normal",
+    noAnimation: t = !1,
+    borderRadius: c,
+    className: d,
+    style: g,
+    ...f
   }, p) => {
-    const x = typeof l == "number" ? `${l}px` : l, y = typeof r == "number" ? `${r}px` : r, n = {
-      width: x,
-      height: y,
-      ...m && t === "rectangle" ? { borderRadius: m } : {},
-      ...i
+    const o = typeof e == "number" ? `${e}px` : e, k = typeof s == "number" ? `${s}px` : s, u = {
+      width: o,
+      height: k,
+      ...c && a === "rectangle" ? { borderRadius: c } : {},
+      ...g
     };
-    return f > 1 ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", ref: p, children: Array.from({ length: f }).map((S, g) => /* @__PURE__ */ a(
-      "div",
-      {
-        className: u(
-          v({
-            variant: e ? void 0 : o,
-            shape: t,
-            speed: e ? void 0 : s
-          }),
-          e && "animate-none",
-          c
-        ),
-        style: n,
-        ...d
-      },
-      g
-    )) }) : /* @__PURE__ */ a(
+    return l > 1 ? /* @__PURE__ */ r("div", { className: n(I({ spacing: x })), ref: p, children: Array.from({ length: l }).map((S, y) => {
+      const N = y === l - 1 && a === "text" && typeof e == "string" && e.includes("%") ? `${Math.max(40, parseInt(e) - 20)}%` : o;
+      return /* @__PURE__ */ r(
+        "div",
+        {
+          className: n(
+            v({
+              variant: t ? void 0 : m,
+              shape: a,
+              speed: t ? void 0 : i
+            }),
+            t && "animate-none",
+            d
+          ),
+          style: {
+            ...u,
+            width: N
+          },
+          ...f
+        },
+        y
+      );
+    }) }) : /* @__PURE__ */ r(
       "div",
       {
         ref: p,
-        className: u(
+        className: n(
           v({
-            variant: e ? void 0 : o,
-            shape: t,
-            speed: e ? void 0 : s
+            variant: t ? void 0 : m,
+            shape: a,
+            speed: t ? void 0 : i
           }),
-          e && "animate-none",
-          c
+          t && "animate-none",
+          d
         ),
-        style: n,
-        ...d
+        style: u,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        role: "status",
+        ...f,
+        children: /* @__PURE__ */ r("span", { className: "sr-only", children: "Loading..." })
       }
     );
   }
 );
-N.displayName = "Skeleton";
+L.displayName = "Skeleton";
 export {
-  N as Skeleton,
-  N as default
+  L as Skeleton,
+  L as default
 };