@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/stat.cjs

@@ -0,0 +1,180 @@
+"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 stat_exports = {};
+__export(stat_exports, {
+  Stat: () => Stat,
+  statVariants: () => statVariants
+});
+module.exports = __toCommonJS(stat_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index.cjs");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+const statVariants = (0, import_class_variance_authority.cva)([
+  "rounded-lg border border-border bg-card p-4 flex flex-col gap-2"
+]);
+function TrendUpIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m22 7-8.5 8.5-5-5L2 17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 7h6v6" })
+      ]
+    }
+  );
+}
+function TrendDownIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m22 17-8.5-8.5-5 5L2 7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17h6v-6" })
+      ]
+    }
+  );
+}
+function AnimatedNumber({
+  value,
+  prefix,
+  suffix
+}) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  const motionVal = (0, import_framer_motion.useMotionValue)(0);
+  (0, import_react.useEffect)(() => {
+    if (shouldReduce) {
+      motionVal.set(value);
+      return;
+    }
+    const controls = (0, import_framer_motion.animate)(motionVal, value, {
+      duration: 1,
+      ease: [0.4, 0, 0.2, 1]
+    });
+    return controls.stop;
+  }, [value, motionVal, shouldReduce]);
+  const rounded = (0, import_framer_motion.useTransform)(
+    motionVal,
+    (v) => `${prefix ?? ""}${Math.round(v).toLocaleString()}${suffix ?? ""}`
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.span, { "data-ds-animated": "", children: rounded });
+}
+const Stat = (0, import_react.forwardRef)(function Stat2({
+  label,
+  value,
+  previousValue,
+  trend,
+  trendLabel,
+  sparkline,
+  prefix,
+  suffix,
+  animated = true,
+  className,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  const isNumeric = typeof value === "number";
+  const trendColor = trend === "up" ? "text-success" : trend === "down" ? "text-danger" : "text-muted-foreground";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_cn.cn)(statVariants(), className),
+      "data-ds": "",
+      "data-ds-component": "stat",
+      "data-ds-trend": trend,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-medium text-muted-foreground leading-none", children: label }),
+          sparkline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 flex items-center", children: sparkline })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
+          {
+            className: "text-2xl font-bold text-foreground leading-none tabular-nums",
+            variants: animated && !shouldReduce ? import_motion.countUp.variants : void 0,
+            initial: animated && !shouldReduce ? "initial" : void 0,
+            animate: animated && !shouldReduce ? "animate" : void 0,
+            transition: animated && !shouldReduce ? import_motion.countUp.transition : void 0,
+            "data-ds-animated": animated ? "" : void 0,
+            children: isNumeric && animated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              AnimatedNumber,
+              {
+                value,
+                prefix,
+                suffix
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              prefix,
+              String(value),
+              suffix
+            ] })
+          }
+        ),
+        (trend || trendLabel) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_framer_motion.motion.div,
+          {
+            className: (0, import_cn.cn)(
+              "flex items-center gap-1 text-xs font-medium",
+              trendColor
+            ),
+            variants: animated && !shouldReduce ? import_motion.slideUpSm.variants : void 0,
+            initial: animated && !shouldReduce ? "initial" : void 0,
+            animate: animated && !shouldReduce ? "animate" : void 0,
+            transition: animated && !shouldReduce ? { ...import_motion.slideUpSm.transition, delay: 0.3 } : void 0,
+            "data-ds-animated": animated ? "" : void 0,
+            children: [
+              trend === "up" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrendUpIcon, { className: "size-3.5" }),
+              trend === "down" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrendDownIcon, { className: "size-3.5" }),
+              trendLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: trendLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Stat.displayName = "Stat";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Stat,
+  statVariants
+});

package/dist/components/stat.d.cts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const statVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type StatTrend = "up" | "down" | "neutral";
+interface StatProps {
+    label: ReactNode;
+    value: string | number;
+    previousValue?: number;
+    trend?: StatTrend;
+    trendLabel?: ReactNode;
+    sparkline?: ReactNode;
+    prefix?: string;
+    suffix?: string;
+    animated?: boolean;
+    className?: string;
+}
+declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Stat, type StatProps, type StatTrend, statVariants };

package/dist/components/stat.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const statVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+type StatTrend = "up" | "down" | "neutral";
+interface StatProps {
+    label: ReactNode;
+    value: string | number;
+    previousValue?: number;
+    trend?: StatTrend;
+    trendLabel?: ReactNode;
+    sparkline?: ReactNode;
+    prefix?: string;
+    suffix?: string;
+    animated?: boolean;
+    className?: string;
+}
+declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Stat, type StatProps, type StatTrend, statVariants };

package/dist/components/stat.mjs

@@ -0,0 +1,161 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { countUp, slideUpSm } from "../motion/index.mjs";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "framer-motion";
+import { forwardRef, useEffect } from "react";
+const statVariants = cva([
+  "rounded-lg border border-border bg-card p-4 flex flex-col gap-2"
+]);
+function TrendUpIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m22 7-8.5 8.5-5-5L2 17" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 7h6v6" })
+      ]
+    }
+  );
+}
+function TrendDownIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m22 17-8.5-8.5-5 5L2 7" }),
+        /* @__PURE__ */ jsx("path", { d: "M16 17h6v-6" })
+      ]
+    }
+  );
+}
+function AnimatedNumber({
+  value,
+  prefix,
+  suffix
+}) {
+  const shouldReduce = useReducedMotion();
+  const motionVal = useMotionValue(0);
+  useEffect(() => {
+    if (shouldReduce) {
+      motionVal.set(value);
+      return;
+    }
+    const controls = animate(motionVal, value, {
+      duration: 1,
+      ease: [0.4, 0, 0.2, 1]
+    });
+    return controls.stop;
+  }, [value, motionVal, shouldReduce]);
+  const rounded = useTransform(
+    motionVal,
+    (v) => `${prefix ?? ""}${Math.round(v).toLocaleString()}${suffix ?? ""}`
+  );
+  return /* @__PURE__ */ jsx(motion.span, { "data-ds-animated": "", children: rounded });
+}
+const Stat = forwardRef(function Stat2({
+  label,
+  value,
+  previousValue,
+  trend,
+  trendLabel,
+  sparkline,
+  prefix,
+  suffix,
+  animated = true,
+  className,
+  ...rest
+}, ref) {
+  const shouldReduce = useReducedMotion();
+  const isNumeric = typeof value === "number";
+  const trendColor = trend === "up" ? "text-success" : trend === "down" ? "text-danger" : "text-muted-foreground";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(statVariants(), className),
+      "data-ds": "",
+      "data-ds-component": "stat",
+      "data-ds-trend": trend,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-muted-foreground leading-none", children: label }),
+          sparkline && /* @__PURE__ */ jsx("div", { className: "h-8 flex items-center", children: sparkline })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "text-2xl font-bold text-foreground leading-none tabular-nums",
+            variants: animated && !shouldReduce ? countUp.variants : void 0,
+            initial: animated && !shouldReduce ? "initial" : void 0,
+            animate: animated && !shouldReduce ? "animate" : void 0,
+            transition: animated && !shouldReduce ? countUp.transition : void 0,
+            "data-ds-animated": animated ? "" : void 0,
+            children: isNumeric && animated ? /* @__PURE__ */ jsx(
+              AnimatedNumber,
+              {
+                value,
+                prefix,
+                suffix
+              }
+            ) : /* @__PURE__ */ jsxs("span", { children: [
+              prefix,
+              String(value),
+              suffix
+            ] })
+          }
+        ),
+        (trend || trendLabel) && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: cn(
+              "flex items-center gap-1 text-xs font-medium",
+              trendColor
+            ),
+            variants: animated && !shouldReduce ? slideUpSm.variants : void 0,
+            initial: animated && !shouldReduce ? "initial" : void 0,
+            animate: animated && !shouldReduce ? "animate" : void 0,
+            transition: animated && !shouldReduce ? { ...slideUpSm.transition, delay: 0.3 } : void 0,
+            "data-ds-animated": animated ? "" : void 0,
+            children: [
+              trend === "up" && /* @__PURE__ */ jsx(TrendUpIcon, { className: "size-3.5" }),
+              trend === "down" && /* @__PURE__ */ jsx(TrendDownIcon, { className: "size-3.5" }),
+              trendLabel && /* @__PURE__ */ jsx("span", { children: trendLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Stat.displayName = "Stat";
+export {
+  Stat,
+  statVariants
+};

package/dist/components/steps.cjs

@@ -0,0 +1,228 @@
+"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 steps_exports = {};
+__export(steps_exports, {
+  Step: () => Step,
+  Steps: () => Steps
+});
+module.exports = __toCommonJS(steps_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_react = require("react");
+const StepsContext = (0, import_react.createContext)({
+  currentStep: 0,
+  orientation: "horizontal",
+  variant: "default",
+  totalSteps: 0
+});
+const StepIndexContext = (0, import_react.createContext)(0);
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+const Steps = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(
+    StepsContext.Provider,
+    {
+      value: { currentStep, orientation, variant, totalSteps, onStepClick },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "ol",
+        {
+          ref,
+          "aria-label": "Steps",
+          className: (0, import_cn.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__ */ (0, import_jsx_runtime.jsx)(StepIndexContext.Provider, { value: index, children: child }, index))
+        }
+      )
+    }
+  );
+});
+Steps.displayName = "Steps";
+const Step = (0, import_react.forwardRef)(function Step2({ icon, title, description, className, children, ...rest }, ref) {
+  const { currentStep, orientation, variant, totalSteps, onStepClick } = (0, import_react.useContext)(StepsContext);
+  const index = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: index + 1 });
+  const indicator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        "flex shrink-0 items-center justify-center",
+        "font-medium text-xs leading-none",
+        "transition-colors duration-fast ease-standard",
+        // Dot variant
+        variant === "dots" ? (0, import_cn.cn)(
+          "size-2 rounded-full",
+          status === "complete" && "bg-primary",
+          status === "active" && "bg-primary",
+          status === "upcoming" && "bg-border"
+        ) : (0, import_cn.cn)(
+          // Default & outline
+          "size-7 rounded-full border-2",
+          variant === "default" ? (0, import_cn.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"
+          ) : (0, import_cn.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__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(
+        orientation === "horizontal" ? "mt-2 text-center" : "ml-3 text-left"
+      ),
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "p",
+          {
+            className: (0, import_cn.cn)(
+              "text-sm font-medium leading-5",
+              status === "active" && "text-foreground",
+              status === "complete" && "text-foreground",
+              status === "upcoming" && "text-muted-foreground"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs leading-4 text-muted-foreground mt-0.5", children: description })
+      ]
+    }
+  );
+  const connector = !isLast && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: (0, import_cn.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center", children: [
+    indicator,
+    labelContent
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center", children: [
+      indicator,
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: (0, import_cn.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__ */ (0, import_jsx_runtime.jsx)(
+    "li",
+    {
+      ref,
+      "aria-current": status === "active" ? "step" : void 0,
+      "data-ds": "",
+      "data-ds-component": "step",
+      "data-ds-status": status,
+      className: (0, import_cn.cn)(
+        orientation === "horizontal" ? "flex flex-1 items-start" : "flex flex-col",
+        className
+      ),
+      ...rest,
+      children: orientation === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        isClickable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => onStepClick(index),
+            className: (0, import_cn.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-1 flex-col items-center", children: [
+          indicator,
+          labelContent
+        ] }),
+        connector
+      ] }) : stepContent
+    }
+  );
+});
+Step.displayName = "Step";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Step,
+  Steps
+});

package/dist/components/steps.d.cts

@@ -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 };