@bmsuisse/ui 0.12.0 → 0.13.0

package/dist/index.d.ts

@@ -836,6 +836,52 @@ declare function SidebarNav({ children, className, ...rest }: SidebarNavProps):
  */
 declare function useSidebarCollapsed(): boolean;
 
+/** The minimal shape this component needs to render one chip in the stepper. */
+interface StepperStep {
+    /** 1-based step number, also used as the React key and navigation target. */
+    n: number;
+    /** Visible label under the chip. */
+    label: string;
+    /** Small uppercase caption under the label (e.g. a phase/section name). */
+    phase: string;
+}
+interface StepperProps {
+    /** The current step number (1-based, matches a `StepperStep.n`). */
+    step: number;
+    /** Highest step number reachable so far -- steps beyond this aren't clickable. */
+    maxStep: number;
+    /** Called with a step's `n` when a navigable chip is clicked. */
+    onNavigate: (n: number) => void;
+    /** Called when the trailing "new" button is clicked. Omit to hide that button entirely. */
+    onNew?: () => void;
+    /** The steps to render, in order. */
+    steps: StepperStep[];
+    /** Accessible label for the stepper's `<nav>`. @default "Steps" */
+    navLabel?: string;
+    /** Visible text and title of the trailing `onNew` button. Only relevant when `onNew` is passed. @default "New" */
+    newLabel?: string;
+    /** `data-testid` for the horizontally-scrolling steps region. @default "stepper-scroll" */
+    scrollTestId?: string;
+    /** `data-testid` for the trailing `onNew` button, when rendered. */
+    newTestId?: string;
+}
+/**
+ * Numbered-chip wizard progress indicator: a horizontally-scrolling row of
+ * step chips (done/active/upcoming, connected by a line that fills in as
+ * steps complete) plus an optional trailing "start over" button. Replaces
+ * the same shape hand-rolled independently by more than one multi-step
+ * wizard.
+ *
+ * Note: the original OneSales `Stepper` this was ported from also supported
+ * a one-off `tinderSubStep` prop that injected a bespoke "matcher" chip
+ * between two specific steps for a single screen's own sub-flow. That was
+ * deliberately left out of this generic version -- it doesn't generalize
+ * meaningfully beyond that one screen. Don't re-add it here; a consumer
+ * that needs a one-off extra chip should compose its own around this
+ * component instead.
+ */
+declare function Stepper({ step, maxStep, onNavigate, onNew, steps, navLabel, newLabel, scrollTestId, newTestId, }: StepperProps): react.JSX.Element;
+
 /** Merges conditional class names, then dedupes conflicting Tailwind utility classes. */
 declare function cn(...inputs: ClassValue[]): string;
 
@@ -845,4 +891,4 @@ declare function cn(...inputs: ClassValue[]): string;
  */
 declare function useMediaQuery(query: string): boolean;
 
-export { AlertBox, type AlertBoxProps, type AlertBoxVariant, Badge, type BadgeProps, Button, ButtonGroup, type ButtonGroupOption, type ButtonGroupProps, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, type GridColumn as ComboboxColumn, type ComboboxMultiProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, ConfirmDialog, type ConfirmDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormField, type FormFieldProps, FormModal, type FormModalProps, Input, type InputProps, KpiCard, type KpiCardProps, Label, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, NavGroup, type NavGroupProps, type NavIconProps, NavItem, type NavItemProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResponsivePanel, type ResponsivePanelProps, type ResponsivePanelSize, ScrollArea, ScrollBar, SearchBar, type SearchBarProps, SearchPanel, type SearchPanelMode, type SearchPanelProps, SearchTrigger, type SearchTriggerProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, Sparkline, StatusBadge, type StatusBadgeProps, type StatusTone, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagCombobox, type TagComboboxOption, type TagComboboxProps, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, loadingSpinnerIconVariants, sheetVariants, useMediaQuery, useSidebarCollapsed };
+export { AlertBox, type AlertBoxProps, type AlertBoxVariant, Badge, type BadgeProps, Button, ButtonGroup, type ButtonGroupOption, type ButtonGroupProps, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, type GridColumn as ComboboxColumn, type ComboboxMultiProps, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, ConfirmDialog, type ConfirmDialogProps, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DonutChart, type DonutSegment, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormField, type FormFieldProps, FormModal, type FormModalProps, Input, type InputProps, KpiCard, type KpiCardProps, Label, LoadingOverlay, type LoadingOverlayProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, NavGroup, type NavGroupProps, type NavIconProps, NavItem, type NavItemProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResponsivePanel, type ResponsivePanelProps, type ResponsivePanelSize, ScrollArea, ScrollBar, SearchBar, type SearchBarProps, SearchPanel, type SearchPanelMode, type SearchPanelProps, SearchTrigger, type SearchTriggerProps, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarNav, type SidebarNavProps, type SidebarProps, Skeleton, Sparkline, StatusBadge, type StatusBadgeProps, type StatusTone, Stepper, type StepperProps, type StepperStep, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagCombobox, type TagComboboxOption, type TagComboboxProps, Textarea, type TextareaProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, loadingSpinnerIconVariants, sheetVariants, useMediaQuery, useSidebarCollapsed };

package/dist/index.js

@@ -2609,6 +2609,112 @@ function SidebarNav({ children, className, ...rest }) {
     )
   ] });
 }
+
+// src/patterns/stepper/Stepper.tsx
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import { Check as Check5, Plus } from "lucide-react";
+import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+function Stepper({
+  step,
+  maxStep,
+  onNavigate,
+  onNew,
+  steps,
+  navLabel = "Steps",
+  newLabel = "New",
+  scrollTestId = "stepper-scroll",
+  newTestId
+}) {
+  const stepRefs = useRef6(/* @__PURE__ */ new Map());
+  useEffect6(() => {
+    const activeStep = stepRefs.current.get(step);
+    activeStep?.scrollIntoView({ block: "nearest", inline: "center" });
+  }, [step]);
+  return (
+    // onNew is pinned outside the horizontally-scrolling region below (a sibling of
+    // it, not a child) so its own edge never scrolls off-screen along with the
+    // later steps once the scroller's min-width doesn't fit the viewport.
+    /* @__PURE__ */ jsxs23("div", { className: "flex w-full shrink-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx39("nav", { "aria-label": navLabel, className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx39(
+        "div",
+        {
+          "data-testid": scrollTestId,
+          className: "flex w-full items-center gap-0 overflow-x-auto px-2 py-1",
+          children: /* @__PURE__ */ jsx39("ol", { className: "flex min-w-[700px] flex-1 items-start", children: steps.map(({ n, label, phase }, i) => {
+            const done = step > n;
+            const active = step === n;
+            const navigable = n <= maxStep && n !== step;
+            const last = i === steps.length - 1;
+            return /* @__PURE__ */ jsxs23("li", { className: cn("flex items-start", !last && "flex-1"), children: [
+              /* @__PURE__ */ jsxs23(
+                "button",
+                {
+                  ref: (element) => {
+                    if (element) stepRefs.current.set(n, element);
+                    else stepRefs.current.delete(n);
+                  },
+                  "data-testid": `step-${n}`,
+                  "aria-disabled": !navigable,
+                  "aria-current": active ? "step" : void 0,
+                  onClick: () => navigable && onNavigate(n),
+                  className: cn(
+                    "flex min-w-[68px] flex-col items-center gap-0.5 transition-opacity",
+                    navigable ? "cursor-pointer hover:opacity-80" : "cursor-default"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx39(
+                      "div",
+                      {
+                        className: cn(
+                          "flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold transition-colors",
+                          done ? "bg-primary/15 text-primary" : active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                        ),
+                        children: done ? /* @__PURE__ */ jsx39(Check5, { className: "h-3 w-3" }) : n
+                      }
+                    ),
+                    /* @__PURE__ */ jsx39(
+                      "span",
+                      {
+                        className: cn(
+                          "text-center whitespace-nowrap transition-colors",
+                          active ? "text-[12px] font-semibold text-foreground" : done ? "text-[12px] font-medium text-primary" : "text-[12px] font-medium text-muted-foreground"
+                        ),
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx39("span", { className: "text-[9px] tracking-[0.5px] text-muted-foreground/50 uppercase", children: phase })
+                  ]
+                }
+              ),
+              !last && /* @__PURE__ */ jsx39(
+                "div",
+                {
+                  className: cn(
+                    "mx-1.5 mt-3.5 h-px flex-1 transition-colors",
+                    done ? "bg-primary" : "bg-border"
+                  )
+                }
+              )
+            ] }, n);
+          }) })
+        }
+      ) }),
+      onNew && /* @__PURE__ */ jsxs23(
+        "button",
+        {
+          "data-testid": newTestId,
+          onClick: onNew,
+          title: newLabel,
+          className: "flex shrink-0 items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-[12px] font-semibold text-foreground transition-colors hover:bg-muted/50",
+          children: [
+            /* @__PURE__ */ jsx39(Plus, { className: "h-3.5 w-3.5" }),
+            newLabel
+          ]
+        }
+      )
+    ] })
+  );
+}
 export {
   AlertBox,
   Badge,
@@ -2687,6 +2793,7 @@ export {
   Skeleton,
   Sparkline,
   StatusBadge,
+  Stepper,
   Switch,
   Table,
   TableBody,