@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/skeleton.cjs

@@ -0,0 +1,210 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var skeleton_exports = {};
+__export(skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonRect: () => SkeletonRect,
+  SkeletonText: () => SkeletonText,
+  skeletonVariants: () => skeletonVariants
+});
+module.exports = __toCommonJS(skeleton_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+const skeletonVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all shapes
+  [
+    // Background
+    "bg-muted",
+    // Animation — gentle pulse
+    "animate-pulse",
+    // Ensure it doesn't collapse
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Shape Variants
+      // -----------------------------------------------------------------
+      shape: {
+        /**
+         * Text — a horizontal line placeholder for text content.
+         * Default height matches body text line-height.
+         * Rounded for a softer appearance.
+         */
+        text: "h-4 w-full rounded-sm",
+        /**
+         * Circle — a circular placeholder for avatars, icons.
+         * Uses border-radius: 9999px (full circle).
+         */
+        circle: "rounded-full aspect-square",
+        /**
+         * Rect — a rectangular placeholder for images, cards, media.
+         * Uses standard border-radius.
+         */
+        rect: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      shape: "text"
+    }
+  }
+);
+const circleSizeMap = {
+  xs: "size-6",
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+  xl: "size-16"
+};
+const textHeightMap = {
+  xs: "h-3",
+  sm: "h-3.5",
+  md: "h-4",
+  lg: "h-5"
+};
+function resolveDimension(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+const Skeleton = (0, import_react.forwardRef)(
+  function Skeleton2({
+    shape = "text",
+    width,
+    height,
+    size = "md",
+    textSize = "md",
+    animate = true,
+    className,
+    style,
+    ...rest
+  }, ref) {
+    const dimensionStyles = {
+      ...style,
+      width: resolveDimension(width),
+      height: resolveDimension(height)
+    };
+    if (dimensionStyles.width === void 0) delete dimensionStyles.width;
+    if (dimensionStyles.height === void 0) delete dimensionStyles.height;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: (0, import_cn.cn)(
+          skeletonVariants({ shape }),
+          // Circle: apply size class
+          shape === "circle" && !width && !height && circleSizeMap[size],
+          // Text: apply text height class (unless custom height provided)
+          shape === "text" && !height && textHeightMap[textSize],
+          // Disable animation
+          !animate && "animate-none",
+          className
+        ),
+        style: Object.keys(dimensionStyles).length > 0 ? dimensionStyles : void 0,
+        "data-ds": "",
+        "data-ds-component": "skeleton",
+        "data-ds-shape": shape,
+        ...rest
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+const SkeletonText = (0, import_react.forwardRef)(
+  function SkeletonText2({
+    lines = 3,
+    textSize = "md",
+    lastLineWidth = "60%",
+    gap = "gap-2.5",
+    animate = true,
+    className,
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: (0, import_cn.cn)("flex flex-col w-full", gap, className),
+        "data-ds": "",
+        "data-ds-component": "skeleton-text",
+        ...rest,
+        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Skeleton,
+          {
+            shape: "text",
+            textSize,
+            width: i === lines - 1 && lines > 1 ? lastLineWidth : void 0,
+            animate
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+const SkeletonCircle = (0, import_react.forwardRef)(
+  function SkeletonCircle2({ size = "md", animate = true, className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Skeleton,
+      {
+        ref,
+        shape: "circle",
+        size,
+        animate,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonCircle.displayName = "SkeletonCircle";
+const SkeletonRect = (0, import_react.forwardRef)(
+  function SkeletonRect2({ width = "100%", height = 120, animate = true, className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Skeleton,
+      {
+        ref,
+        shape: "rect",
+        width,
+        height,
+        animate,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonRect.displayName = "SkeletonRect";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonRect,
+  SkeletonText,
+  skeletonVariants
+});

package/dist/components/skeleton.d.cts

@@ -0,0 +1,202 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const skeletonVariants: (props?: ({
+    shape?: "circle" | "rect" | "text" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SkeletonTextSize = "xs" | "sm" | "md" | "lg";
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof skeletonVariants> {
+    /**
+     * Shape of the skeleton placeholder.
+     * @default "text"
+     */
+    shape?: "text" | "circle" | "rect";
+    /**
+     * Width of the skeleton. Accepts CSS values (number → px, string → raw).
+     * For `circle` shape, use `size` prop instead.
+     * @default "100%" for text/rect shapes
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton. Accepts CSS values (number → px, string → raw).
+     * For `circle` shape, use `size` prop instead.
+     * For `text` shape, defaults to the text height based on `textSize`.
+     */
+    height?: number | string;
+    /**
+     * Predefined size for circle shapes. Maps to standard avatar sizes.
+     * Only applies when `shape="circle"`.
+     * @default "md"
+     */
+    size?: SkeletonSize;
+    /**
+     * Text height preset for text shapes. Matches typography size scale.
+     * Only applies when `shape="text"`.
+     * @default "md"
+     */
+    textSize?: SkeletonTextSize;
+    /**
+     * Whether the pulse animation is active.
+     * Set to false to show a static skeleton (e.g., when paused).
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * Skeleton — a loading placeholder that mimics the shape of content.
+ *
+ * Built on the design system's token layer. Uses the muted background
+ * color and a CSS `animate-pulse` animation to indicate loading state.
+ * The animation is automatically disabled when the user prefers reduced
+ * motion.
+ *
+ * Accessibility:
+ *   - `aria-hidden="true"` — skeletons are decorative, not content
+ *   - `role="presentation"` — excluded from accessibility tree
+ *   - Reduced motion respected via global CSS in design-system.css
+ *
+ * @example
+ * ```tsx
+ * // Text line placeholder
+ * <Skeleton shape="text" />
+ * <Skeleton shape="text" width="60%" />
+ * <Skeleton shape="text" textSize="lg" />
+ *
+ * // Circle placeholder (avatars)
+ * <Skeleton shape="circle" size="md" />
+ * <Skeleton shape="circle" size="lg" />
+ *
+ * // Rectangle placeholder (images, cards)
+ * <Skeleton shape="rect" width={300} height={200} />
+ * <Skeleton shape="rect" width="100%" height={160} />
+ *
+ * // Static (no animation)
+ * <Skeleton shape="text" animate={false} />
+ *
+ * // Custom dimensions
+ * <Skeleton shape="rect" width="100%" height="8rem" className="rounded-lg" />
+ * ```
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Number of text lines to render.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Text height preset for each line.
+     * @default "md"
+     */
+    textSize?: SkeletonTextSize;
+    /**
+     * Width of the last line (as CSS value).
+     * Creates a more natural appearance since real text rarely fills
+     * the full width on the last line.
+     * @default "60%"
+     */
+    lastLineWidth?: number | string;
+    /**
+     * Gap between lines.
+     * @default "gap-2.5"
+     */
+    gap?: string;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge on the wrapper. */
+    className?: string;
+}
+/**
+ * SkeletonText — renders multiple skeleton text lines.
+ *
+ * A convenience wrapper around `Skeleton` that renders multiple text-shaped
+ * lines with automatic width variation on the last line.
+ *
+ * @example
+ * ```tsx
+ * // Default (3 lines)
+ * <SkeletonText />
+ *
+ * // Custom line count
+ * <SkeletonText lines={5} />
+ *
+ * // Custom last line width
+ * <SkeletonText lines={4} lastLineWidth="40%" />
+ *
+ * // Larger text size
+ * <SkeletonText textSize="lg" lines={2} />
+ *
+ * // With custom gap
+ * <SkeletonText lines={3} gap="gap-3" />
+ * ```
+ */
+declare const SkeletonText: react.ForwardRefExoticComponent<SkeletonTextProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonCircleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Predefined size. Maps to standard avatar sizes.
+     * @default "md"
+     */
+    size?: SkeletonSize;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * SkeletonCircle — a circle-shaped skeleton placeholder.
+ *
+ * Shorthand for `<Skeleton shape="circle" />` with a cleaner API.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCircle size="sm" />
+ * <SkeletonCircle size="md" />
+ * <SkeletonCircle size="lg" />
+ * ```
+ */
+declare const SkeletonCircle: react.ForwardRefExoticComponent<SkeletonCircleProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonRectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Width of the rectangle. Accepts CSS values.
+     * @default "100%"
+     */
+    width?: number | string;
+    /**
+     * Height of the rectangle. Accepts CSS values.
+     * @default 120
+     */
+    height?: number | string;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * SkeletonRect — a rectangle-shaped skeleton placeholder.
+ *
+ * Shorthand for `<Skeleton shape="rect" />` with sensible defaults.
+ * Useful for image placeholders, card thumbnails, and media areas.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonRect width={300} height={200} />
+ * <SkeletonRect width="100%" height={160} />
+ * <SkeletonRect height="12rem" />
+ * ```
+ */
+declare const SkeletonRect: react.ForwardRefExoticComponent<SkeletonRectProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonRect, type SkeletonRectProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonTextSize, skeletonVariants };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,202 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const skeletonVariants: (props?: ({
+    shape?: "circle" | "rect" | "text" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SkeletonTextSize = "xs" | "sm" | "md" | "lg";
+interface SkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof skeletonVariants> {
+    /**
+     * Shape of the skeleton placeholder.
+     * @default "text"
+     */
+    shape?: "text" | "circle" | "rect";
+    /**
+     * Width of the skeleton. Accepts CSS values (number → px, string → raw).
+     * For `circle` shape, use `size` prop instead.
+     * @default "100%" for text/rect shapes
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton. Accepts CSS values (number → px, string → raw).
+     * For `circle` shape, use `size` prop instead.
+     * For `text` shape, defaults to the text height based on `textSize`.
+     */
+    height?: number | string;
+    /**
+     * Predefined size for circle shapes. Maps to standard avatar sizes.
+     * Only applies when `shape="circle"`.
+     * @default "md"
+     */
+    size?: SkeletonSize;
+    /**
+     * Text height preset for text shapes. Matches typography size scale.
+     * Only applies when `shape="text"`.
+     * @default "md"
+     */
+    textSize?: SkeletonTextSize;
+    /**
+     * Whether the pulse animation is active.
+     * Set to false to show a static skeleton (e.g., when paused).
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * Skeleton — a loading placeholder that mimics the shape of content.
+ *
+ * Built on the design system's token layer. Uses the muted background
+ * color and a CSS `animate-pulse` animation to indicate loading state.
+ * The animation is automatically disabled when the user prefers reduced
+ * motion.
+ *
+ * Accessibility:
+ *   - `aria-hidden="true"` — skeletons are decorative, not content
+ *   - `role="presentation"` — excluded from accessibility tree
+ *   - Reduced motion respected via global CSS in design-system.css
+ *
+ * @example
+ * ```tsx
+ * // Text line placeholder
+ * <Skeleton shape="text" />
+ * <Skeleton shape="text" width="60%" />
+ * <Skeleton shape="text" textSize="lg" />
+ *
+ * // Circle placeholder (avatars)
+ * <Skeleton shape="circle" size="md" />
+ * <Skeleton shape="circle" size="lg" />
+ *
+ * // Rectangle placeholder (images, cards)
+ * <Skeleton shape="rect" width={300} height={200} />
+ * <Skeleton shape="rect" width="100%" height={160} />
+ *
+ * // Static (no animation)
+ * <Skeleton shape="text" animate={false} />
+ *
+ * // Custom dimensions
+ * <Skeleton shape="rect" width="100%" height="8rem" className="rounded-lg" />
+ * ```
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Number of text lines to render.
+     * @default 3
+     */
+    lines?: number;
+    /**
+     * Text height preset for each line.
+     * @default "md"
+     */
+    textSize?: SkeletonTextSize;
+    /**
+     * Width of the last line (as CSS value).
+     * Creates a more natural appearance since real text rarely fills
+     * the full width on the last line.
+     * @default "60%"
+     */
+    lastLineWidth?: number | string;
+    /**
+     * Gap between lines.
+     * @default "gap-2.5"
+     */
+    gap?: string;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge on the wrapper. */
+    className?: string;
+}
+/**
+ * SkeletonText — renders multiple skeleton text lines.
+ *
+ * A convenience wrapper around `Skeleton` that renders multiple text-shaped
+ * lines with automatic width variation on the last line.
+ *
+ * @example
+ * ```tsx
+ * // Default (3 lines)
+ * <SkeletonText />
+ *
+ * // Custom line count
+ * <SkeletonText lines={5} />
+ *
+ * // Custom last line width
+ * <SkeletonText lines={4} lastLineWidth="40%" />
+ *
+ * // Larger text size
+ * <SkeletonText textSize="lg" lines={2} />
+ *
+ * // With custom gap
+ * <SkeletonText lines={3} gap="gap-3" />
+ * ```
+ */
+declare const SkeletonText: react.ForwardRefExoticComponent<SkeletonTextProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonCircleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Predefined size. Maps to standard avatar sizes.
+     * @default "md"
+     */
+    size?: SkeletonSize;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * SkeletonCircle — a circle-shaped skeleton placeholder.
+ *
+ * Shorthand for `<Skeleton shape="circle" />` with a cleaner API.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonCircle size="sm" />
+ * <SkeletonCircle size="md" />
+ * <SkeletonCircle size="lg" />
+ * ```
+ */
+declare const SkeletonCircle: react.ForwardRefExoticComponent<SkeletonCircleProps & react.RefAttributes<HTMLDivElement>>;
+interface SkeletonRectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Width of the rectangle. Accepts CSS values.
+     * @default "100%"
+     */
+    width?: number | string;
+    /**
+     * Height of the rectangle. Accepts CSS values.
+     * @default 120
+     */
+    height?: number | string;
+    /**
+     * Whether the pulse animation is active.
+     * @default true
+     */
+    animate?: boolean;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * SkeletonRect — a rectangle-shaped skeleton placeholder.
+ *
+ * Shorthand for `<Skeleton shape="rect" />` with sensible defaults.
+ * Useful for image placeholders, card thumbnails, and media areas.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonRect width={300} height={200} />
+ * <SkeletonRect width="100%" height={160} />
+ * <SkeletonRect height="12rem" />
+ * ```
+ */
+declare const SkeletonRect: react.ForwardRefExoticComponent<SkeletonRectProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonCircle, type SkeletonCircleProps, type SkeletonProps, SkeletonRect, type SkeletonRectProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonTextSize, skeletonVariants };