@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/progress.cjs

@@ -0,0 +1,237 @@
+"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 progress_exports = {};
+__export(progress_exports, {
+  Progress: () => Progress,
+  progressIndicatorVariants: () => progressIndicatorVariants,
+  progressTrackVariants: () => progressTrackVariants
+});
+module.exports = __toCommonJS(progress_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+const progressTrackVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "relative w-full overflow-hidden",
+    // Shape
+    "rounded-full",
+    // Background
+    "bg-muted"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — thin bar for subtle progress indicators.
+         * Height: 6px
+         */
+        sm: "h-1.5",
+        /**
+         * Medium — default size for most progress bars.
+         * Height: 8px
+         */
+        md: "h-2",
+        /**
+         * Large — prominent bar for hero progress, file uploads.
+         * Height: 12px
+         */
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const progressIndicatorVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants
+  [
+    // Layout
+    "h-full",
+    // Shape — match track rounding
+    "rounded-full",
+    // Transition for value changes
+    "transition-[width] duration-standard ease-standard"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — uses primary brand color.
+         */
+        default: "bg-primary",
+        /**
+         * Primary — explicit primary brand color.
+         */
+        primary: "bg-primary",
+        /**
+         * Success — positive/complete progress.
+         */
+        success: "bg-success",
+        /**
+         * Danger — error/critical progress (e.g., storage almost full).
+         */
+        danger: "bg-danger",
+        /**
+         * Warning — caution progress (e.g., approaching limit).
+         */
+        warning: "bg-warning",
+        /**
+         * Info — informational progress.
+         */
+        info: "bg-info"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const stripedStyle = {
+  backgroundImage: "linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)",
+  backgroundSize: "1rem 1rem"
+};
+const PROGRESS_STYLE_ID = "unified-ui-progress-keyframes";
+const PROGRESS_KEYFRAMES_CSS = `
+@keyframes unified-ui-progress-indeterminate {
+  0% { transform: translateX(-100%); width: 50%; }
+  50% { transform: translateX(50%); width: 30%; }
+  100% { transform: translateX(200%); width: 50%; }
+}
+@keyframes unified-ui-progress-stripe-slide {
+  0% { background-position: 1rem 0; }
+  100% { background-position: 0 0; }
+}
+`;
+function useProgressKeyframes() {
+  (0, import_react.useEffect)(() => {
+    if (document.getElementById(PROGRESS_STYLE_ID)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = PROGRESS_STYLE_ID;
+    style.textContent = PROGRESS_KEYFRAMES_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+const Progress = (0, import_react.forwardRef)(
+  function Progress2({
+    value = 0,
+    max = 100,
+    min = 0,
+    variant = "default",
+    size = "md",
+    indeterminate = false,
+    striped = false,
+    animated = false,
+    showLabel = false,
+    label,
+    formatLabel,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    className,
+    indicatorClassName,
+    ...rest
+  }, ref) {
+    useProgressKeyframes();
+    const clampedValue = Math.max(min, Math.min(value, max));
+    const range = max - min;
+    const percentage = range > 0 ? (clampedValue - min) / range * 100 : 0;
+    const defaultFormatLabel = (v, m) => {
+      const pct = m - min > 0 ? (v - min) / (m - min) * 100 : 0;
+      return `${Math.round(pct)}%`;
+    };
+    const labelFormatter = formatLabel ?? defaultFormatLabel;
+    const _labelText = label ?? labelFormatter(clampedValue, max);
+    const indicatorStyle = {
+      ...indeterminate ? {
+        animation: "unified-ui-progress-indeterminate 1.5s ease-in-out infinite"
+      } : {
+        width: `${percentage}%`
+      },
+      ...striped ? stripedStyle : {},
+      ...striped && animated ? {
+        animation: indeterminate ? "unified-ui-progress-indeterminate 1.5s ease-in-out infinite" : "unified-ui-progress-stripe-slide 0.6s linear infinite"
+      } : {}
+    };
+    const ariaAttrs = {
+      role: "progressbar",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      ...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {}
+    };
+    if (!indeterminate) {
+      ariaAttrs["aria-valuenow"] = clampedValue;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        "data-ds": "",
+        "data-ds-component": "progress",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        ...indeterminate ? { "data-ds-indeterminate": "" } : {},
+        children: [
+          showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-medium leading-4 text-foreground", children: label ?? "" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-xs font-medium leading-4 text-muted-foreground tabular-nums", children: typeof label === "string" || !label ? labelFormatter(clampedValue, max) : "" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              ref,
+              className: (0, import_cn.cn)(progressTrackVariants({ size }), className),
+              ...ariaAttrs,
+              ...rest,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "div",
+                {
+                  className: (0, import_cn.cn)(
+                    progressIndicatorVariants({ variant }),
+                    indeterminate && "absolute",
+                    indicatorClassName
+                  ),
+                  style: indicatorStyle
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Progress,
+  progressIndicatorVariants,
+  progressTrackVariants
+});

package/dist/components/progress.d.cts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressIndicatorVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | "default" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressVariant = "default" | "primary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof progressTrackVariants>, VariantProps<typeof progressIndicatorVariants> {
+    /**
+     * Current progress value (0–100).
+     * Ignored when `indeterminate` is true.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Maximum progress value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Minimum progress value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Visual variant of the progress indicator.
+     * @default "default"
+     */
+    variant?: ProgressVariant;
+    /**
+     * Size of the progress bar.
+     * @default "md"
+     */
+    size?: ProgressSize;
+    /**
+     * Whether the progress is indeterminate (unknown completion).
+     * When true, the bar displays a looping sliding animation
+     * and `value` is ignored.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether to display diagonal stripes on the indicator.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Whether the stripes should animate (slide).
+     * Only applies when `striped` is true.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Whether to display the progress label.
+     * Shows the percentage value or custom label above the bar.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label text displayed above or inside the bar.
+     * When provided alongside `showLabel`, replaces the default "X%" text.
+     */
+    label?: ReactNode;
+    /**
+     * Custom format function for the value label.
+     * Receives the current value and max, returns a string.
+     * @default (value, max) => `${Math.round((value / max) * 100)}%`
+     */
+    formatLabel?: (value: number, max: number) => string;
+    /**
+     * Accessible label for the progress bar.
+     * Use when there's no visible label to describe what's loading.
+     */
+    "aria-label"?: string;
+    /**
+     * ID of the element that labels the progress bar.
+     */
+    "aria-labelledby"?: string;
+    /** Additional CSS classes for the track (outer container). */
+    className?: string;
+    /** Additional CSS classes for the indicator (inner fill). */
+    indicatorClassName?: string;
+}
+/**
+ * Progress — a linear progress bar for displaying completion or loading state.
+ *
+ * Built on the design system's token layer with CVA for variant composition.
+ * All colors, radii, spacing, and transitions come from CSS custom properties
+ * defined in design-system.css.
+ *
+ * Supports both determinate (with a known value) and indeterminate (unknown
+ * completion) modes. Add stripes and animation for visual emphasis.
+ *
+ * Accessibility:
+ *   - Uses `role="progressbar"` with proper ARIA attributes
+ *   - `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for determinate mode
+ *   - `aria-valuenow` is omitted for indeterminate mode (per WAI-ARIA spec)
+ *   - Supports `aria-label` and `aria-labelledby` for screen readers
+ *
+ * @example
+ * ```tsx
+ * // Basic determinate progress
+ * <Progress value={60} />
+ *
+ * // With variant and label
+ * <Progress value={80} variant="success" showLabel />
+ *
+ * // Indeterminate (loading)
+ * <Progress indeterminate />
+ *
+ * // Striped with animation
+ * <Progress value={45} striped animated />
+ *
+ * // Large with custom label
+ * <Progress value={30} size="lg" showLabel label="Uploading files..." />
+ *
+ * // Custom format
+ * <Progress
+ *   value={750}
+ *   max={1000}
+ *   showLabel
+ *   formatLabel={(v, m) => `${v}/${m} MB`}
+ * />
+ *
+ * // Danger variant (e.g. storage warning)
+ * <Progress value={92} variant="danger" showLabel />
+ * ```
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Progress, type ProgressProps, type ProgressSize, type ProgressVariant, progressIndicatorVariants, progressTrackVariants };

package/dist/components/progress.d.ts

@@ -0,0 +1,137 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressIndicatorVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | "default" | "primary" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ProgressVariant = "default" | "primary" | "success" | "danger" | "warning" | "info";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof progressTrackVariants>, VariantProps<typeof progressIndicatorVariants> {
+    /**
+     * Current progress value (0–100).
+     * Ignored when `indeterminate` is true.
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Maximum progress value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Minimum progress value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Visual variant of the progress indicator.
+     * @default "default"
+     */
+    variant?: ProgressVariant;
+    /**
+     * Size of the progress bar.
+     * @default "md"
+     */
+    size?: ProgressSize;
+    /**
+     * Whether the progress is indeterminate (unknown completion).
+     * When true, the bar displays a looping sliding animation
+     * and `value` is ignored.
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Whether to display diagonal stripes on the indicator.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Whether the stripes should animate (slide).
+     * Only applies when `striped` is true.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Whether to display the progress label.
+     * Shows the percentage value or custom label above the bar.
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label text displayed above or inside the bar.
+     * When provided alongside `showLabel`, replaces the default "X%" text.
+     */
+    label?: ReactNode;
+    /**
+     * Custom format function for the value label.
+     * Receives the current value and max, returns a string.
+     * @default (value, max) => `${Math.round((value / max) * 100)}%`
+     */
+    formatLabel?: (value: number, max: number) => string;
+    /**
+     * Accessible label for the progress bar.
+     * Use when there's no visible label to describe what's loading.
+     */
+    "aria-label"?: string;
+    /**
+     * ID of the element that labels the progress bar.
+     */
+    "aria-labelledby"?: string;
+    /** Additional CSS classes for the track (outer container). */
+    className?: string;
+    /** Additional CSS classes for the indicator (inner fill). */
+    indicatorClassName?: string;
+}
+/**
+ * Progress — a linear progress bar for displaying completion or loading state.
+ *
+ * Built on the design system's token layer with CVA for variant composition.
+ * All colors, radii, spacing, and transitions come from CSS custom properties
+ * defined in design-system.css.
+ *
+ * Supports both determinate (with a known value) and indeterminate (unknown
+ * completion) modes. Add stripes and animation for visual emphasis.
+ *
+ * Accessibility:
+ *   - Uses `role="progressbar"` with proper ARIA attributes
+ *   - `aria-valuenow`, `aria-valuemin`, `aria-valuemax` for determinate mode
+ *   - `aria-valuenow` is omitted for indeterminate mode (per WAI-ARIA spec)
+ *   - Supports `aria-label` and `aria-labelledby` for screen readers
+ *
+ * @example
+ * ```tsx
+ * // Basic determinate progress
+ * <Progress value={60} />
+ *
+ * // With variant and label
+ * <Progress value={80} variant="success" showLabel />
+ *
+ * // Indeterminate (loading)
+ * <Progress indeterminate />
+ *
+ * // Striped with animation
+ * <Progress value={45} striped animated />
+ *
+ * // Large with custom label
+ * <Progress value={30} size="lg" showLabel label="Uploading files..." />
+ *
+ * // Custom format
+ * <Progress
+ *   value={750}
+ *   max={1000}
+ *   showLabel
+ *   formatLabel={(v, m) => `${v}/${m} MB`}
+ * />
+ *
+ * // Danger variant (e.g. storage warning)
+ * <Progress value={92} variant="danger" showLabel />
+ * ```
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Progress, type ProgressProps, type ProgressSize, type ProgressVariant, progressIndicatorVariants, progressTrackVariants };