@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/steps.d.ts

@@ -0,0 +1,76 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+type StepsOrientation = "horizontal" | "vertical";
+type StepsVariant = "default" | "outline" | "dots";
+type StepStatus = "complete" | "active" | "upcoming";
+interface StepsProps extends ComponentPropsWithoutRef<"ol"> {
+    /** The index of the currently active step (0-based). */
+    currentStep: number;
+    /** Orientation of the steps. @default "horizontal" */
+    orientation?: StepsOrientation;
+    /** Visual variant. @default "default" */
+    variant?: StepsVariant;
+    /** Total number of steps — derived from children if not provided. */
+    count?: number;
+    /** Callback when a step is clicked (for clickable wizards). */
+    onStepClick?: (index: number) => void;
+    className?: string;
+    children: ReactNode;
+}
+interface StepProps extends ComponentPropsWithoutRef<"li"> {
+    /** Optional custom icon to override the default number/check. */
+    icon?: ReactNode;
+    /** Optional title for the step. */
+    title?: string;
+    /** Optional description beneath the title. */
+    description?: string;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Steps — a wizard progress indicator.
+ *
+ * Wrap `Step` components as children. The `currentStep` prop (0-based index)
+ * drives the visual state of each step (complete, active, upcoming).
+ *
+ * @example
+ * ```tsx
+ * <Steps currentStep={1}>
+ *   <Step title="Account" description="Create your account" />
+ *   <Step title="Profile" description="Fill in your details" />
+ *   <Step title="Confirm" description="Review and submit" />
+ * </Steps>
+ *
+ * // Vertical orientation
+ * <Steps currentStep={0} orientation="vertical">
+ *   <Step title="Step 1" description="First step" />
+ *   <Step title="Step 2" description="Second step" />
+ * </Steps>
+ *
+ * // Clickable steps
+ * <Steps currentStep={activeStep} onStepClick={setActiveStep}>
+ *   <Step title="Step 1" />
+ *   <Step title="Step 2" />
+ *   <Step title="Step 3" />
+ * </Steps>
+ * ```
+ */
+declare const Steps: react.ForwardRefExoticComponent<StepsProps & react.RefAttributes<HTMLOListElement>>;
+/**
+ * Step — a single step in the Steps wizard.
+ *
+ * Must be a direct child of `Steps`. Automatically derives its visual state
+ * (complete, active, upcoming) from the parent `currentStep` prop.
+ *
+ * @example
+ * ```tsx
+ * <Step title="Account" description="Set up your account" />
+ *
+ * // With a custom icon
+ * <Step title="Upload" icon={<Upload className="size-4" />} />
+ * ```
+ */
+declare const Step: react.ForwardRefExoticComponent<StepProps & react.RefAttributes<HTMLLIElement>>;
+
+export { Step, type StepProps, type StepStatus, Steps, type StepsOrientation, type StepsProps, type StepsVariant };

package/dist/components/steps.mjs

@@ -0,0 +1,207 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import {
+  createContext,
+  forwardRef,
+  useContext
+} from "react";
+const StepsContext = createContext({
+  currentStep: 0,
+  orientation: "horizontal",
+  variant: "default",
+  totalSteps: 0
+});
+const StepIndexContext = createContext(0);
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+const Steps = forwardRef(function Steps2({
+  currentStep,
+  orientation = "horizontal",
+  variant = "default",
+  onStepClick,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const childArray = Array.isArray(children) ? children : children ? [children] : [];
+  const totalSteps = childArray.length;
+  return /* @__PURE__ */ jsx(
+    StepsContext.Provider,
+    {
+      value: { currentStep, orientation, variant, totalSteps, onStepClick },
+      children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          ref,
+          "aria-label": "Steps",
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "flex-row items-start gap-0" : "flex-col gap-0",
+            className
+          ),
+          "data-ds": "",
+          "data-ds-component": "steps",
+          "data-ds-orientation": orientation,
+          ...rest,
+          children: childArray.map((child, index) => /* @__PURE__ */ jsx(StepIndexContext.Provider, { value: index, children: child }, index))
+        }
+      )
+    }
+  );
+});
+Steps.displayName = "Steps";
+const Step = forwardRef(function Step2({ icon, title, description, className, children, ...rest }, ref) {
+  const { currentStep, orientation, variant, totalSteps, onStepClick } = useContext(StepsContext);
+  const index = useContext(StepIndexContext);
+  const status = index < currentStep ? "complete" : index === currentStep ? "active" : "upcoming";
+  const isLast = index === totalSteps - 1;
+  const isClickable = !!onStepClick;
+  const indicatorContent = variant === "dots" ? null : status === "complete" && variant !== "outline" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { children: index + 1 });
+  const indicator = /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex shrink-0 items-center justify-center",
+        "font-medium text-xs leading-none",
+        "transition-colors duration-fast ease-standard",
+        // Dot variant
+        variant === "dots" ? cn(
+          "size-2 rounded-full",
+          status === "complete" && "bg-primary",
+          status === "active" && "bg-primary",
+          status === "upcoming" && "bg-border"
+        ) : cn(
+          // Default & outline
+          "size-7 rounded-full border-2",
+          variant === "default" ? cn(
+            status === "complete" && "border-primary bg-primary text-primary-foreground",
+            status === "active" && "border-primary bg-background text-primary",
+            status === "upcoming" && "border-muted bg-background text-muted-foreground"
+          ) : cn(
+            // outline variant
+            status === "complete" && "border-primary bg-primary/10 text-primary",
+            status === "active" && "border-primary bg-background text-primary",
+            status === "upcoming" && "border-muted bg-background text-muted-foreground"
+          )
+        )
+      ),
+      "aria-hidden": variant === "dots",
+      children: indicatorContent
+    }
+  );
+  const labelContent = (title || description) && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        orientation === "horizontal" ? "mt-2 text-center" : "ml-3 text-left"
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "text-sm font-medium leading-5",
+              status === "active" && "text-foreground",
+              status === "complete" && "text-foreground",
+              status === "upcoming" && "text-muted-foreground"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsx("p", { className: "text-xs leading-4 text-muted-foreground mt-0.5", children: description })
+      ]
+    }
+  );
+  const connector = !isLast && /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex-1 transition-colors duration-fast ease-standard",
+        orientation === "horizontal" ? "mx-2 mt-3.5 h-px" : "ml-3.5 my-1 w-px self-stretch",
+        index < currentStep ? "bg-primary" : "bg-border"
+      )
+    }
+  );
+  const stepContent = /* @__PURE__ */ jsx(Fragment, { children: orientation === "horizontal" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+    indicator,
+    labelContent
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+      indicator,
+      !isLast && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "mt-1 w-px flex-1 self-stretch transition-colors duration-fast ease-standard",
+            "min-h-[24px]",
+            index < currentStep ? "bg-primary" : "bg-border"
+          )
+        }
+      )
+    ] }),
+    labelContent
+  ] }) });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      "aria-current": status === "active" ? "step" : void 0,
+      "data-ds": "",
+      "data-ds-component": "step",
+      "data-ds-status": status,
+      className: cn(
+        orientation === "horizontal" ? "flex flex-1 items-start" : "flex flex-col",
+        className
+      ),
+      ...rest,
+      children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        isClickable ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onStepClick(index),
+            className: cn(
+              "flex flex-1 flex-col items-center",
+              isClickable && "cursor-pointer",
+              status === "upcoming" && !isClickable && "cursor-default"
+            ),
+            "aria-label": title ? `Go to step: ${title}` : `Go to step ${index + 1}`,
+            children: [
+              indicator,
+              labelContent
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center", children: [
+          indicator,
+          labelContent
+        ] }),
+        connector
+      ] }) : stepContent
+    }
+  );
+});
+Step.displayName = "Step";
+export {
+  Step,
+  Steps
+};

package/dist/components/switch.cjs

@@ -0,0 +1,243 @@
+"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 switch_exports = {};
+__export(switch_exports, {
+  Switch: () => Switch,
+  switchThumbVariants: () => switchThumbVariants,
+  switchTrackVariants: () => switchTrackVariants
+});
+module.exports = __toCommonJS(switch_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const switchTrackVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Layout
+    "relative inline-flex shrink-0 cursor-pointer items-center",
+    // Shape
+    "rounded-full",
+    // Border
+    "border-2 border-transparent",
+    // Transition
+    "transition-[background-color,box-shadow] duration-fast ease-standard",
+    // Focus ring
+    import_focus_ring.focusRingClasses,
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+    // Unchecked state
+    "data-[state=unchecked]:bg-input",
+    // Checked state
+    "data-[state=checked]:bg-primary"
+  ],
+  {
+    variants: {
+      size: {
+        /**
+         * Small — compact for dense UIs, settings panels.
+         * Track: 36px × 20px
+         */
+        sm: "h-5 w-9",
+        /**
+         * Medium — default size for most switches.
+         * Track: 44px × 24px
+         */
+        md: "h-6 w-11"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const switchThumbVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Shape
+    "pointer-events-none block rounded-full",
+    // Color
+    "bg-white",
+    // Shadow
+    "shadow-sm"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const thumbSpringConfig = {
+  stiffness: 500,
+  damping: 30,
+  mass: 0.5
+};
+const thumbTravel = {
+  sm: { off: 0, on: 16 },
+  md: { off: 0, on: 20 }
+};
+const MotionThumb = import_framer_motion.motion.create("span");
+const instantSpringConfig = {
+  stiffness: 1e4,
+  damping: 1e4,
+  mass: 0.01
+};
+function AnimatedThumb({
+  size = "md",
+  checked
+}) {
+  const prefersReduced = (0, import_framer_motion.useReducedMotion)();
+  const travel = thumbTravel[size];
+  const x = (0, import_framer_motion.useMotionValue)(checked ? travel.on : travel.off);
+  const springConfig = prefersReduced ? instantSpringConfig : thumbSpringConfig;
+  const springX = (0, import_framer_motion.useSpring)(x, springConfig);
+  (0, import_react.useEffect)(() => {
+    x.set(checked ? travel.on : travel.off);
+  }, [checked, travel, x]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Switch.Thumb, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MotionThumb,
+    {
+      className: (0, import_cn.cn)(switchThumbVariants({ size })),
+      style: { x: springX },
+      "aria-hidden": "true"
+    }
+  ) });
+}
+const Switch = (0, import_react.forwardRef)(function Switch2({
+  size = "md",
+  label,
+  description,
+  labelPosition = "right",
+  wrapperClassName,
+  labelClassName,
+  descriptionClassName,
+  className,
+  id: idProp,
+  checked,
+  defaultChecked,
+  disabled,
+  onCheckedChange,
+  ...rest
+}, ref) {
+  const autoId = (0, import_react.useId)();
+  const id = idProp ?? autoId;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const isControlled = checked !== void 0;
+  const [internalChecked, setInternalChecked] = (0, import_react.useState)(
+    checked ?? defaultChecked ?? false
+  );
+  const [prevChecked, setPrevChecked] = (0, import_react.useState)(checked);
+  if (isControlled && checked !== prevChecked) {
+    setPrevChecked(checked);
+    setInternalChecked(checked);
+  }
+  const handleCheckedChange = (0, import_react.useCallback)(
+    (value) => {
+      if (!isControlled) {
+        setInternalChecked(value);
+      }
+      onCheckedChange?.(value);
+    },
+    [isControlled, onCheckedChange]
+  );
+  const isChecked = isControlled ? checked : internalChecked;
+  const switchElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Switch.Root,
+    {
+      ref,
+      id,
+      checked: isControlled ? checked : void 0,
+      defaultChecked: isControlled ? void 0 : defaultChecked,
+      disabled,
+      onCheckedChange: handleCheckedChange,
+      "aria-describedby": descriptionId,
+      className: (0, import_cn.cn)(switchTrackVariants({ size }), className),
+      "data-ds": "",
+      "data-ds-component": "switch",
+      "data-ds-size": size,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedThumb, { size, checked: isChecked })
+    }
+  );
+  if (!label) {
+    return switchElement;
+  }
+  const labelBlock = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: (0, import_cn.cn)(
+          "text-sm font-medium leading-5 text-foreground",
+          "select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          !disabled && "cursor-pointer",
+          labelClassName
+        ),
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        id: descriptionId,
+        className: (0, import_cn.cn)(
+          "text-xs leading-4 text-muted-foreground",
+          disabled && "opacity-50",
+          descriptionClassName
+        ),
+        children: description
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "flex items-center gap-3",
+        // Reverse order when label is on the left
+        labelPosition === "left" ? "flex-row" : "flex-row-reverse",
+        // Align to start when description is present
+        description && "items-start",
+        wrapperClassName
+      ),
+      "data-ds": "",
+      "data-ds-component": "switch-group",
+      children: [
+        switchElement,
+        labelBlock
+      ]
+    }
+  );
+});
+Switch.displayName = "Switch";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Switch,
+  switchThumbVariants,
+  switchTrackVariants
+});

package/dist/components/switch.d.cts

@@ -0,0 +1,90 @@
+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 { Switch as Switch$1 } from 'radix-ui';
+
+declare const switchTrackVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const switchThumbVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SwitchSize = "sm" | "md";
+type SwitchLabelPosition = "left" | "right";
+interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof Switch$1.Root>, "asChild">, VariantProps<typeof switchTrackVariants> {
+    /**
+     * Size of the switch.
+     * @default "md"
+     */
+    size?: SwitchSize;
+    /**
+     * Text label for the switch.
+     */
+    label?: ReactNode;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: ReactNode;
+    /**
+     * Position of the label relative to the switch.
+     * @default "right"
+     */
+    labelPosition?: SwitchLabelPosition;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     */
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes for the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional CSS classes for the description element.
+     */
+    descriptionClassName?: string;
+    /** Additional CSS classes to merge on the switch track element. */
+    className?: string;
+}
+/**
+ * Switch — a toggle control for binary on/off states.
+ *
+ * Built on Radix UI's Switch primitive for accessibility and the design
+ * system's token layer for styling. The thumb uses a Framer Motion spring
+ * animation for a tactile, snappy feel.
+ *
+ * Accessibility:
+ *   - Radix handles `role="switch"`, `aria-checked`, keyboard toggle (Space)
+ *   - Focus ring visible on keyboard navigation (focus-visible)
+ *   - Disabled state uses both `disabled` attribute and `aria-disabled`
+ *   - Label is associated via `htmlFor` / `id` linkage
+ *   - Description linked via `aria-describedby`
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Switch label="Dark mode" />
+ *
+ * // Controlled
+ * <Switch
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   label="Notifications"
+ * />
+ *
+ * // Small with left label
+ * <Switch size="sm" label="Auto-save" labelPosition="left" />
+ *
+ * // With description
+ * <Switch
+ *   label="Marketing emails"
+ *   description="Receive emails about new features and updates"
+ * />
+ *
+ * // Disabled
+ * <Switch disabled label="Feature locked" />
+ * ```
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, switchThumbVariants, switchTrackVariants };