@getgreenline/blaze-ui 1.0.49-beta.2 → 1.0.50

package/dist/components/stepper.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const stepperVariants: (props?: ({
+    variant?: "card" | "compact" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StepperStep {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    hasWarning?: boolean;
+}
+export interface StepperProps extends React.ComponentProps<"nav">, VariantProps<typeof stepperVariants> {
+    steps: readonly StepperStep[];
+    activeStepId: StepperStep["id"];
+    onStepClick?: (step: StepperStep) => void;
+    isLoading?: boolean;
+}
+declare function Stepper({ steps, activeStepId, onStepClick, isLoading, variant, className, ...props }: StepperProps): import("react/jsx-runtime").JSX.Element | null;
+export { Stepper, stepperVariants };
+//# sourceMappingURL=stepper.d.ts.map

package/dist/components/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/components/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,eAAe;;8EAUnB,CAAA;AAuDF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,eAAe,CAAC;IACzE,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,YAAY,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AA8DD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,YAAY,EACZ,WAAW,EACX,SAAiB,EACjB,OAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,YAAY,kDAgId;AAED,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/stepper.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronRight, Check, TriangleAlert } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { cn } from '../lib/utils.js';
+import { VisuallyHidden } from './visually-hidden.js';
+
+const stepperVariants = cva("tw:flex tw:flex-wrap tw:items-center", {
+    variants: {
+        variant: {
+            card: "tw:justify-center tw:gap-3",
+            compact: "tw:gap-1",
+        },
+    },
+    defaultVariants: {
+        variant: "card",
+    },
+});
+const stepperTriggerVariants = cva("tw:group/stepper-trigger tw:inline-flex tw:items-center tw:outline-none tw:transition-[background-color,border-color,color,box-shadow,opacity] tw:focus-visible:ring-ring/50 tw:focus-visible:ring-[3px] tw:disabled:cursor-not-allowed tw:disabled:opacity-50", {
+    variants: {
+        variant: {
+            card: [
+                "tw:gap-3 tw:rounded-xl tw:px-4 tw:py-3 tw:text-left",
+                "tw:hover:bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] tw:hover:text-accent-foreground",
+                "data-[disabled=true]:tw:bg-muted/40",
+            ],
+            compact: [
+                "tw:gap-2 tw:rounded-md tw:px-2 tw:py-1.5 tw:text-left",
+                "data-[active=true]:tw:bg-primary/5",
+            ],
+        },
+    },
+    defaultVariants: {
+        variant: "card",
+    },
+});
+const stepperIndicatorVariants = cva("tw:flex tw:shrink-0 tw:items-center tw:justify-center tw:rounded-full tw:font-medium tw:transition-[background-color,color]", {
+    variants: {
+        variant: {
+            card: "tw:size-11 tw:text-base tw:font-semibold",
+            compact: "tw:size-5 tw:text-sm tw:font-semibold",
+        },
+        state: {
+            inactive: "tw:bg-muted tw:text-muted-foreground",
+            active: "tw:bg-primary tw:text-primary-foreground",
+            completed: "tw:bg-primary/10 tw:text-primary",
+            warning: "tw:bg-amber-500/10 tw:text-amber-700 dark:tw:text-amber-400",
+        },
+    },
+    defaultVariants: {
+        variant: "card",
+        state: "inactive",
+    },
+});
+const stepperTitleClassName = "tw:text-sm tw:font-medium tw:leading-tight tw:transition-colors";
+const stepperDescriptionClassName = "tw:text-muted-foreground tw:text-xs tw:leading-tight";
+function getStepperIndicatorState({ isActive, isCompleted, hasWarning, }) {
+    if (isCompleted) {
+        if (hasWarning) {
+            return "warning";
+        }
+        return "completed";
+    }
+    if (isActive) {
+        return "active";
+    }
+    return "inactive";
+}
+function getStepperIndicatorIcon({ variant, state, }) {
+    if (state === "completed") {
+        return (jsx(Check, { className: cn(variant === "card" ? "tw:size-5" : "tw:size-3.5") }));
+    }
+    if (state === "warning") {
+        return (jsx(TriangleAlert, { className: cn(variant === "card" ? "tw:size-5" : "tw:size-3.5") }));
+    }
+    return null;
+}
+function getStepperIndicatorStatusLabel(state) {
+    if (state === "warning") {
+        return "Warning";
+    }
+    if (state === "completed") {
+        return "Completed";
+    }
+    return null;
+}
+function Stepper({ steps, activeStepId, onStepClick, isLoading = false, variant = "card", className, ...props }) {
+    if (steps.length === 0) {
+        return null;
+    }
+    const stepperVariant = variant ?? "card";
+    const activeStepIndex = steps.findIndex((step) => step.id === activeStepId);
+    const boundedActiveStepIndex = activeStepIndex >= 0 ? activeStepIndex : 0;
+    return (jsx("nav", { "data-slot": "stepper", "aria-label": "Progress", className: cn(stepperVariants({ variant: stepperVariant }), className), ...props, children: steps.map((step, index) => {
+            const isActive = index === boundedActiveStepIndex;
+            const isCompleted = index < boundedActiveStepIndex;
+            const isDisabled = isLoading;
+            const isInteractive = Boolean(onStepClick);
+            const isClickable = isInteractive && !isDisabled;
+            const indicatorState = getStepperIndicatorState({
+                isActive,
+                isCompleted,
+                hasWarning: step.hasWarning,
+            });
+            const indicatorIcon = getStepperIndicatorIcon({
+                variant: stepperVariant,
+                state: indicatorState,
+            });
+            const indicatorStatusLabel = getStepperIndicatorStatusLabel(indicatorState);
+            const stepperTriggerClassName = cn(stepperTriggerVariants({ variant: stepperVariant }), stepperVariant === "card" &&
+                isActive &&
+                "tw:bg-[color-mix(in_oklab,var(--primary)_10%,transparent)] tw:text-accent-foreground", isClickable && "tw:cursor-pointer", !isClickable && "tw:cursor-default");
+            const stepperTriggerContent = (jsxs(Fragment, { children: [jsxs("div", { "data-slot": "stepper-indicator", className: stepperIndicatorVariants({
+                            variant: stepperVariant,
+                            state: indicatorState,
+                        }), children: [indicatorIcon ? indicatorIcon : jsx("span", { children: index + 1 }), indicatorStatusLabel ? (jsx(VisuallyHidden, { children: indicatorStatusLabel })) : null] }), stepperVariant === "card" ? (jsxs("div", { "data-slot": "stepper-content", className: "tw:flex tw:min-w-0 tw:flex-col tw:gap-0.5", children: [jsx("span", { className: cn(stepperTitleClassName, isActive ? "tw:text-primary" : "tw:text-foreground"), children: step.title }), step.description ? (jsx("span", { className: stepperDescriptionClassName, children: step.description })) : null] })) : (jsx("span", { className: cn(stepperTitleClassName, "tw:text-foreground"), children: step.title }))] }));
+            return (jsxs(React.Fragment, { children: [jsx("div", { "data-slot": "stepper-item", className: "tw:flex tw:items-center tw:gap-3", children: isInteractive ? (jsx("button", { type: "button", "data-slot": "stepper-trigger", "data-active": isActive, "data-completed": isCompleted, "data-disabled": isDisabled, "aria-current": isActive ? "step" : undefined, disabled: isDisabled, onClick: () => onStepClick?.(step), className: stepperTriggerClassName, children: stepperTriggerContent })) : (jsx("div", { "data-slot": "stepper-trigger", "data-active": isActive, "data-completed": isCompleted, "aria-current": isActive ? "step" : undefined, className: stepperTriggerClassName, children: stepperTriggerContent })) }), index < steps.length - 1 ? (jsx(ChevronRight, { "data-slot": "stepper-separator", className: "tw:size-4 tw:shrink-0 tw:text-muted-foreground" })) : null] }, step.id));
+        }) }));
+}
+
+export { Stepper, stepperVariants };

package/dist/index.d.ts

@@ -38,6 +38,7 @@ export * from "./components/skeleton";
 export * from "./components/slider";
 export * from "./components/sonner";
 export * from "./components/spinner";
+export * from "./components/stepper";
 export * from "./components/table";
 export * from "./components/data-table";
 export * from "./components/tabs";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,oBAAoB,CAAA;AAClC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wBAAwB,CAAA;AACtC,cAAc,yBAAyB,CAAA;AACvC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,sBAAsB,CAAA;AACpC,cAAc,mBAAmB,CAAA;AACjC,cAAc,2BAA2B,CAAA;AACzC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,0BAA0B,CAAA;AACxC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kCAAkC,CAAA;AAChD,cAAc,kCAAkC,CAAA;AAChD,cAAc,aAAa,CAAA"}

package/dist/index.js

@@ -38,6 +38,7 @@ export { Skeleton } from './components/skeleton.js';
 export { Slider } from './components/slider.js';
 export { Toaster } from './components/sonner.js';
 export { Spinner } from './components/spinner.js';
+export { Stepper, stepperVariants } from './components/stepper.js';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
 export { DataTable } from './components/data-table.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './components/tabs.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getgreenline/blaze-ui",
-  "version": "1.0.49-beta.2",
+  "version": "1.0.50",
   "type": "module",
   "dependencies": {
     "@base-ui/react": "^1.4.1",