@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/progress.mjs

@@ -0,0 +1,211 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { forwardRef, useEffect } from "react";
+const progressTrackVariants = 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 = 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() {
+  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 = 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__ */ jsxs(
+      "div",
+      {
+        "data-ds": "",
+        "data-ds-component": "progress",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        ...indeterminate ? { "data-ds-indeterminate": "" } : {},
+        children: [
+          showLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium leading-4 text-foreground", children: label ?? "" }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium leading-4 text-muted-foreground tabular-nums", children: typeof label === "string" || !label ? labelFormatter(clampedValue, max) : "" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref,
+              className: cn(progressTrackVariants({ size }), className),
+              ...ariaAttrs,
+              ...rest,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    progressIndicatorVariants({ variant }),
+                    indeterminate && "absolute",
+                    indicatorClassName
+                  ),
+                  style: indicatorStyle
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+export {
+  Progress,
+  progressIndicatorVariants,
+  progressTrackVariants
+};

package/dist/components/radio.cjs

@@ -0,0 +1,344 @@
+"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 radio_exports = {};
+__export(radio_exports, {
+  RadioCard: () => RadioCard,
+  RadioGroup: () => RadioGroup,
+  RadioGroupItem: () => RadioGroupItem,
+  radioCardVariants: () => radioCardVariants,
+  radioGroupVariants: () => radioGroupVariants,
+  radioIndicatorVariants: () => radioIndicatorVariants
+});
+module.exports = __toCommonJS(radio_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_focus_ring = require("../utils/focus-ring.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const RadioGroupContext = (0, import_react.createContext)({
+  size: "md"
+});
+function useRadioGroupContext() {
+  return (0, import_react.useContext)(RadioGroupContext);
+}
+const radioGroupVariants = (0, import_class_variance_authority.cva)(["flex"], {
+  variants: {
+    orientation: {
+      vertical: "flex-col gap-3",
+      horizontal: "flex-row flex-wrap gap-4"
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+const radioIndicatorVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Layout
+    "relative shrink-0",
+    // Shape
+    "rounded-full",
+    // Border
+    "border",
+    // Colors
+    "border-input bg-background",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant
+    import_focus_ring.focusRingClasses,
+    // Hover
+    "hover:border-border-strong",
+    // Checked state
+    "data-[state=checked]:border-primary data-[state=checked]:bg-primary",
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-disabled"
+  ],
+  {
+    variants: {
+      size: {
+        /**
+         * Small — compact for dense UIs, tables, toolbars.
+         * Diameter: 16px
+         */
+        sm: "size-4",
+        /**
+         * Medium — default size for most radio buttons.
+         * Diameter: 20px
+         */
+        md: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const radioInnerDotVariants = (0, import_class_variance_authority.cva)(
+  [
+    "absolute inset-0 flex items-center justify-center",
+    "after:block after:rounded-full after:bg-primary-foreground"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "after:size-1.5",
+        md: "after:size-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const radioCardVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Layout
+    "relative flex items-start gap-3",
+    // Shape
+    "rounded-md",
+    // Border
+    "border border-input",
+    // Colors
+    "bg-background",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Hover
+    "hover:border-border-strong hover:bg-surface",
+    // Cursor
+    "cursor-pointer",
+    // Checked state
+    "has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary-muted",
+    // Disabled
+    "has-[[data-disabled]]:pointer-events-none has-[[data-disabled]]:opacity-50 has-[[data-disabled]]:cursor-not-allowed",
+    // Focus within
+    "has-[:focus-visible]:border-border-strong"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-3",
+        md: "p-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const labelSizeMap = {
+  sm: "text-xs",
+  md: "text-sm"
+};
+const descriptionSizeMap = {
+  sm: "text-xs",
+  md: "text-xs"
+};
+const RadioGroup = (0, import_react.forwardRef)(function RadioGroup2({
+  orientation = "vertical",
+  size = "md",
+  disabled,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, { value: { size, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.RadioGroup.Root,
+    {
+      ref,
+      orientation,
+      disabled,
+      className: (0, import_cn.cn)(radioGroupVariants({ orientation }), className),
+      "data-ds": "",
+      "data-ds-component": "radio-group",
+      "data-ds-orientation": orientation,
+      "data-ds-size": size,
+      ...rest,
+      children
+    }
+  ) });
+});
+RadioGroup.displayName = "RadioGroup";
+const RadioGroupItem = (0, import_react.forwardRef)(function RadioGroupItem2({ value, label, description, size: sizeProp, disabled, className, ...rest }, ref) {
+  const { size: groupSize, disabled: groupDisabled } = useRadioGroupContext();
+  const size = sizeProp ?? groupSize;
+  const isDisabled = disabled ?? groupDisabled;
+  const generatedId = (0, import_react.useId)();
+  const itemId = rest.id ?? `radio-${generatedId}`;
+  const labelId = label ? `${itemId}-label` : void 0;
+  const descriptionId = description ? `${itemId}-desc` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "flex items-start gap-2",
+        isDisabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "radio-item-wrapper",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_radix_ui.RadioGroup.Item,
+          {
+            ref,
+            id: itemId,
+            value,
+            disabled: isDisabled,
+            "aria-labelledby": labelId,
+            "aria-describedby": descriptionId,
+            className: (0, import_cn.cn)(radioIndicatorVariants({ size }), "mt-0.5"),
+            "data-ds": "",
+            "data-ds-component": "radio-item",
+            "data-ds-size": size,
+            ...rest,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_radix_ui.RadioGroup.Indicator,
+              {
+                className: (0, import_cn.cn)(radioInnerDotVariants({ size }))
+              }
+            )
+          }
+        ),
+        (label || description) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "label",
+            {
+              id: labelId,
+              htmlFor: itemId,
+              className: (0, import_cn.cn)(
+                "font-medium leading-5 text-foreground",
+                "cursor-pointer",
+                isDisabled && "cursor-not-allowed",
+                labelSizeMap[size]
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              id: descriptionId,
+              className: (0, import_cn.cn)(
+                "text-muted-foreground leading-4",
+                descriptionSizeMap[size]
+              ),
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+const RadioCard = (0, import_react.forwardRef)(function RadioCard2({
+  value,
+  label,
+  description,
+  size: sizeProp,
+  disabled,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const { size: groupSize, disabled: groupDisabled } = useRadioGroupContext();
+  const size = sizeProp ?? groupSize;
+  const isDisabled = disabled ?? groupDisabled;
+  const generatedId = (0, import_react.useId)();
+  const itemId = rest.id ?? `radio-card-${generatedId}`;
+  const labelId = label ? `${itemId}-label` : void 0;
+  const descriptionId = description ? `${itemId}-desc` : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      htmlFor: itemId,
+      className: (0, import_cn.cn)(
+        radioCardVariants({ size }),
+        isDisabled && "cursor-not-allowed",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "radio-card",
+      "data-ds-size": size,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_radix_ui.RadioGroup.Item,
+          {
+            ref,
+            id: itemId,
+            value,
+            disabled: isDisabled,
+            "aria-labelledby": labelId,
+            "aria-describedby": descriptionId,
+            className: (0, import_cn.cn)(radioIndicatorVariants({ size }), "mt-0.5 shrink-0"),
+            "data-ds": "",
+            "data-ds-component": "radio-card-item",
+            "data-ds-size": size,
+            ...rest,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_radix_ui.RadioGroup.Indicator,
+              {
+                className: (0, import_cn.cn)(radioInnerDotVariants({ size }))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-0.5 min-w-0 flex-1", children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              id: labelId,
+              className: (0, import_cn.cn)(
+                "font-medium leading-5 text-foreground",
+                labelSizeMap[size]
+              ),
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              id: descriptionId,
+              className: (0, import_cn.cn)(
+                "text-muted-foreground leading-4",
+                descriptionSizeMap[size]
+              ),
+              children: description
+            }
+          ),
+          children
+        ] })
+      ]
+    }
+  );
+});
+RadioCard.displayName = "RadioCard";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioCard,
+  RadioGroup,
+  RadioGroupItem,
+  radioCardVariants,
+  radioGroupVariants,
+  radioIndicatorVariants
+});

package/dist/components/radio.d.cts

@@ -0,0 +1,145 @@
+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';
+import { RadioGroup as RadioGroup$1 } from 'radix-ui';
+
+declare const radioGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const radioIndicatorVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const radioCardVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type RadioSize = "sm" | "md";
+type RadioOrientation = "vertical" | "horizontal";
+interface RadioGroupProps extends Omit<RadioGroup$1.RadioGroupProps, "orientation" | "asChild">, VariantProps<typeof radioGroupVariants> {
+    /**
+     * Layout direction of the radio group.
+     * @default "vertical"
+     */
+    orientation?: RadioOrientation;
+    /**
+     * Size of all radio items in the group.
+     * @default "md"
+     */
+    size?: RadioSize;
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+    /** The radio group items. */
+    children?: ReactNode;
+}
+interface RadioGroupItemProps extends Omit<RadioGroup$1.RadioGroupItemProps, "asChild"> {
+    /**
+     * The value of this radio item.
+     */
+    value: string;
+    /**
+     * Label text displayed next to the radio indicator.
+     */
+    label?: ReactNode;
+    /**
+     * Optional description displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Override the group-level size for this specific item.
+     */
+    size?: RadioSize;
+    /** Additional CSS classes to merge on the wrapper element. */
+    className?: string;
+}
+interface RadioCardProps extends Omit<RadioGroup$1.RadioGroupItemProps, "asChild"> {
+    /**
+     * The value of this radio card.
+     */
+    value: string;
+    /**
+     * Label text for the card.
+     */
+    label?: ReactNode;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Override the group-level size for this specific card.
+     */
+    size?: RadioSize;
+    /** Additional CSS classes to merge on the card wrapper. */
+    className?: string;
+    /** Additional content to render inside the card. */
+    children?: ReactNode;
+}
+/**
+ * RadioGroup — a group of radio buttons for selecting a single value.
+ *
+ * Built on Radix UI's RadioGroup primitive for full keyboard navigation
+ * and ARIA compliance. All colors, radii, and transitions come from CSS
+ * custom properties defined in design-system.css.
+ *
+ * Accessibility:
+ *   - Radix UI provides `role="radiogroup"` and manages `aria-checked`
+ *   - Arrow key navigation between items
+ *   - Supports `aria-label` and `aria-labelledby`
+ *   - Disabled state propagated to all children
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroupItem value="option-1" label="Option 1" />
+ *   <RadioGroupItem value="option-2" label="Option 2" />
+ *   <RadioGroupItem value="option-3" label="Option 3" disabled />
+ * </RadioGroup>
+ *
+ * // Horizontal layout
+ * <RadioGroup orientation="horizontal" size="sm">
+ *   <RadioGroupItem value="a" label="A" />
+ *   <RadioGroupItem value="b" label="B" />
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * RadioGroupItem — a single radio button with optional label and description.
+ *
+ * Must be used as a child of `RadioGroup`.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupItem value="newsletter" label="Subscribe to newsletter" />
+ * <RadioGroupItem
+ *   value="updates"
+ *   label="Product updates"
+ *   description="Get notified about new features and improvements"
+ * />
+ * ```
+ */
+declare const RadioGroupItem: react.ForwardRefExoticComponent<RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * RadioCard — a card-style radio button where the entire card is clickable.
+ *
+ * Must be used as a child of `RadioGroup`. Provides a richer visual
+ * treatment for radio options, useful for plan selectors, theme pickers, etc.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup value={plan} onValueChange={setPlan}>
+ *   <RadioCard
+ *     value="free"
+ *     label="Free Plan"
+ *     description="Basic features, limited storage"
+ *   />
+ *   <RadioCard
+ *     value="pro"
+ *     label="Pro Plan"
+ *     description="All features, unlimited storage"
+ *   />
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type RadioOrientation, type RadioSize, radioCardVariants, radioGroupVariants, radioIndicatorVariants };