@acronis-platform/ui-react 2.0.0 → 4.0.0

package/dist/components/ui/trend-indicator/trend-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"trend-indicator.js","sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value + an optional comparison label. It deliberately\n// separates `direction` (what happened mathematically) from `sentiment`\n// (whether that change is good or bad), because the kit can't assume up = good —\n// revenue ↑ is positive, threats ↑ is negative, MTTR ↓ is positive. The consumer\n// computes both and passes an already-formatted `value`; this component never\n// diffs two numbers, rounds, or interprets domain rules. Sentiment drives the\n// color through the semantic status text tokens (the glyph inherits via\n// `currentColor`), and the `badge` variant adds a matching status tint — no new\n// tokens.\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center align-middle font-medium [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n      size: {\n        small: 'gap-0.5 text-xs [&_svg]:size-3.5',\n        medium: 'gap-1 text-sm [&_svg]:size-4',\n      },\n      variant: {\n        inline: '',\n        badge: 'rounded-sm px-1.5 py-0.5',\n      },\n    },\n    // The badge tint pairs with the same status family as the text color.\n    compoundVariants: [\n      {\n        variant: 'badge',\n        sentiment: 'positive',\n        className: 'bg-[var(--ui-background-status-success)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'negative',\n        className: 'bg-[var(--ui-background-status-danger)]',\n      },\n      {\n        variant: 'badge',\n        sentiment: 'neutral',\n        className: 'bg-[var(--ui-background-status-neutral)]',\n      },\n    ],\n    defaultVariants: {\n      sentiment: 'neutral',\n      size: 'medium',\n      variant: 'inline',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`, `\"4.2 h → 2.8 h\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Secondary comparison caption — e.g. `\"vs previous quarter\"`, `\"YoY\"`. */\n  comparisonLabel?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` / `comparisonLabel` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      size,\n      variant,\n      value,\n      comparisonLabel,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(\n          trendIndicatorVariants({ sentiment, size, variant }),\n          className\n        )}\n        // With an explicit sentence, the whole unit is one labelled image and\n        // the inner text/glyph is decorative; otherwise the visible text carries\n        // the meaning and the glyph is hidden.\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        // When it's a tooltip trigger, make it keyboard-reachable so the hint\n        // isn't hover-only.\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n        {comparisonLabel != null && (\n          <span className=\"text-[var(--ui-text-on-surface-secondary)]\">\n            {comparisonLabel}\n          </span>\n        )}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        {/* Base UI's Trigger ref is typed to its default <button>; the trigger\n            here is the span, so the runtime ref is that span. */}\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"names":["trendIndicatorVariants","cva","DIRECTION_ICON","ArrowTrendUpIcon","ArrowTrendDownIcon","ArrowRightIcon","TrendIndicator","React","className","direction","sentiment","size","variant","value","comparisonLabel","tooltip","showIcon","ariaLabel","props","ref","Icon","hasTooltip","root","jsxs","cn","jsx","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;AAuBA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAEX,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA,MAEV,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,MAAA;AAAA,IACT;AAAA;AAAA,IAGF,kBAAkB;AAAA,MAChB;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAKMC,IAAiB;AAAA,EACrB,IAAIC;AAAA,EACJ,MAAMC;AAAA,EACN,MAAMC;AACR,GA4BMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOlB,EAAeO,CAAS,GAC/BY,IAAaN,KAAW,MAExBO,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBd;AAAA,QAChB,kBAAgBC,KAAa;AAAA,QAC7B,WAAWc;AAAA,UACTxB,EAAuB,EAAE,WAAAU,GAAW,MAAAC,GAAM,SAAAC,GAAS;AAAA,UACnDJ;AAAA,QAAA;AAAA,QAKD,GAAIS,IAAY,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAc,CAAA;AAAA,QAG5D,UAAUI,IAAa,IAAI;AAAA,QAC1B,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAF,KAAY,gBAAAS,EAACL,GAAA,EAAK,eAAW,IAAC,WAAU,oBAAmB;AAAA,UAC3DP,KAAS,QAAQ,gBAAAY,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAZ,GAAM;AAAA,UACvDC,KAAmB,QAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,8CACb,UAAAX,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAKN,WAAKO,sBAKFK,GAAA,EAGC,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAe,KAAAR,GAA0C,QAAQG,EAAA,CAAM;AAAA,MACxE,gBAAAG,EAACG,KAAgB,UAAAb,EAAA,CAAQ;AAAA,IAAA,GAC3B,IATOR,EAAM,aAAae,GAAM,EAAE,KAAAH,GAAK;AAAA,EAW3C;AACF;AACAb,EAAe,cAAc;"}
+{"version":3,"file":"trend-indicator.js","sources":["../../../../src/components/ui/trend-indicator/trend-indicator.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n  ArrowRightIcon,\n  ArrowTrendDownIcon,\n  ArrowTrendUpIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip';\n\n// A small, presentational trend/delta indicator: a direction glyph + a\n// pre-formatted change value. It deliberately separates `direction` (what\n// happened mathematically) from `sentiment` (whether that change is good or\n// bad), because the kit can't assume up = good — revenue ↑ is positive,\n// threats ↑ is negative, MTTR ↓ is positive. The consumer computes both and\n// passes an already-formatted `value`; this component never diffs two numbers,\n// rounds, or interprets domain rules. Sentiment drives the color through the\n// semantic status text tokens (the glyph inherits via `currentColor`).\nconst trendIndicatorVariants = cva(\n  'inline-flex items-center gap-0.5 align-middle text-xs font-medium [&_svg]:size-3.5 [&_svg]:shrink-0',\n  {\n    variants: {\n      sentiment: {\n        positive: 'text-[var(--ui-text-on-status-success)]',\n        negative: 'text-[var(--ui-text-on-status-danger)]',\n        neutral: 'text-[var(--ui-text-on-status-neutral)]',\n      },\n    },\n    defaultVariants: {\n      sentiment: 'neutral',\n    },\n  }\n);\n\n// `flat` uses a horizontal arrow (the \"no meaningful change\" glyph); up/down use\n// the trend arrows. All three carry a horizontal direction, so they mirror under\n// `dir=\"rtl\"` (`rtl:-scale-x-100`) to stay aligned with the mirrored text flow.\nconst DIRECTION_ICON = {\n  up: ArrowTrendUpIcon,\n  down: ArrowTrendDownIcon,\n  flat: ArrowRightIcon,\n} as const;\n\nexport interface TrendIndicatorProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    VariantProps<typeof trendIndicatorVariants> {\n  /** What changed mathematically — selects the direction glyph. */\n  direction: 'up' | 'down' | 'flat';\n  /**\n   * Already-formatted change to display — e.g. `\"12%\"`, `\"3.5 h\"`,\n   * `\"Improving\"`. The kit does not format or compute it.\n   */\n  value?: React.ReactNode;\n  /** Contextual hint shown on hover/focus (Base UI Tooltip). */\n  tooltip?: React.ReactNode;\n  /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */\n  showIcon?: boolean;\n  /**\n   * Accessible sentence describing the trend (e.g. \"Revenue increased 12%\n   * compared with the previous quarter\"). Applied as the element's label via\n   * `role=\"img\"`, since the kit can't build a correct, localized sentence from\n   * `direction` + `value` alone. Without it, assistive tech reads the visible\n   * `value` text (the glyph is decorative).\n   */\n  ariaLabel?: string;\n}\n\nconst TrendIndicator = React.forwardRef<HTMLSpanElement, TrendIndicatorProps>(\n  (\n    {\n      className,\n      direction,\n      sentiment,\n      value,\n      tooltip,\n      showIcon = true,\n      ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const Icon = DIRECTION_ICON[direction];\n    const hasTooltip = tooltip != null;\n\n    const root = (\n      <span\n        data-direction={direction}\n        data-sentiment={sentiment ?? 'neutral'}\n        className={cn(trendIndicatorVariants({ sentiment }), className)}\n        {...(ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {})}\n        tabIndex={hasTooltip ? 0 : undefined}\n        {...props}\n      >\n        {showIcon && <Icon aria-hidden className=\"rtl:-scale-x-100\" />}\n        {value != null && <span className=\"tabular-nums\">{value}</span>}\n      </span>\n    );\n\n    if (!hasTooltip) {\n      return React.cloneElement(root, { ref });\n    }\n\n    return (\n      <Tooltip>\n        <TooltipTrigger ref={ref as React.Ref<HTMLButtonElement>} render={root} />\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    );\n  }\n);\nTrendIndicator.displayName = 'TrendIndicator';\n\nexport { TrendIndicator, trendIndicatorVariants };\n"],"names":["trendIndicatorVariants","cva","DIRECTION_ICON","ArrowTrendUpIcon","ArrowTrendDownIcon","ArrowRightIcon","TrendIndicator","React","className","direction","sentiment","value","tooltip","showIcon","ariaLabel","props","ref","Icon","hasTooltip","root","jsxs","cn","jsx","Tooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;AAqBA,MAAMA,IAAyBC;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,WAAW;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,GAKMC,IAAiB;AAAA,EACrB,IAAIC;AAAA,EACJ,MAAMC;AAAA,EACN,MAAMC;AACR,GA0BMC,IAAiBC,EAAM;AAAA,EAC3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOf,EAAeO,CAAS,GAC/BS,IAAaN,KAAW,MAExBO,IACJ,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAgBX;AAAA,QAChB,kBAAgBC,KAAa;AAAA,QAC7B,WAAWW,EAAGrB,EAAuB,EAAE,WAAAU,EAAA,CAAW,GAAGF,CAAS;AAAA,QAC7D,GAAIM,IAAY,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAc,CAAA;AAAA,QAC5D,UAAUI,IAAa,IAAI;AAAA,QAC1B,GAAGH;AAAA,QAEH,UAAA;AAAA,UAAAF,KAAY,gBAAAS,EAACL,GAAA,EAAK,eAAW,IAAC,WAAU,oBAAmB;AAAA,UAC3DN,KAAS,QAAQ,gBAAAW,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAX,EAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAI5D,WAAKO,sBAKFK,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAe,KAAAR,GAA0C,QAAQG,EAAA,CAAM;AAAA,MACxE,gBAAAG,EAACG,KAAgB,UAAAb,EAAA,CAAQ;AAAA,IAAA,GAC3B,IAPOL,EAAM,aAAaY,GAAM,EAAE,KAAAH,GAAK;AAAA,EAS3C;AACF;AACAV,EAAe,cAAc;"}

package/dist/components/ui/wizard/wizard.js

@@ -0,0 +1,59 @@
+import { jsx as e } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as i } from "../../../lib/utils.js";
+const l = o.forwardRef(({ className: a, ...r }, d) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: d,
+    "data-slot": "wizard",
+    className: i("flex h-full w-full flex-col", a),
+    ...r
+  }
+));
+l.displayName = "Wizard";
+const t = o.forwardRef(({ className: a, ...r }, d) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: d,
+    "data-slot": "wizard-header",
+    className: i(
+      "sticky top-0 z-10 flex w-full flex-col gap-[var(--ui-gap-12)] border-b border-[var(--ui-border-on-surface-divider)] bg-[var(--ui-background-surface-secondary)] p-[var(--ui-gap-16)]",
+      a
+    ),
+    ...r
+  }
+));
+t.displayName = "WizardHeader";
+const s = o.forwardRef(({ className: a, ...r }, d) => /* @__PURE__ */ e(
+  "p",
+  {
+    ref: d,
+    "data-slot": "wizard-subtitle",
+    className: i(
+      "text-sm font-normal leading-6 text-muted-foreground",
+      a
+    ),
+    ...r
+  }
+));
+s.displayName = "WizardSubtitle";
+const f = o.forwardRef(({ className: a, ...r }, d) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: d,
+    "data-slot": "wizard-body",
+    className: i(
+      "mx-auto flex w-full max-w-[1024px] flex-col pb-[var(--ui-gap-16)]",
+      a
+    ),
+    ...r
+  }
+));
+f.displayName = "WizardBody";
+export {
+  l as Wizard,
+  f as WizardBody,
+  t as WizardHeader,
+  s as WizardSubtitle
+};
+//# sourceMappingURL=wizard.js.map

package/dist/components/ui/wizard/wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wizard.js","sources":["../../../../src/components/ui/wizard/wizard.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page wizard page template, from the Figma \"RegionMain\" frame\n// (ui-react file, node 10511-61418).\n//\n// ── Why this is layout only ──\n// Wizard is a *composition*, not a new primitive: every visual part it needs\n// already exists in this package (`Breadcrumb`, `PageHeaderRow` /\n// `PageHeaderTitle` / `PageHeaderActions`, `Stepper` + `StepperItem`,\n// `Section`, `Button`). Its whole job is the structural skeleton — the sticky\n// header band, its stacking gap, and the capped content column — plus slots for\n// those parts. It deliberately owns **no** step state, no navigation, and no\n// button wiring: which of Cancel / Back / Next / Submit shows on which step is a\n// per-flow product decision the design brief assigns to the consuming UI block,\n// not to the kit (the same call `PageHeader` makes about its own actions slot).\n// So there is no `step`/`currentStep`/`onNext` prop here by omission, not\n// oversight.\n//\n// That boundary is about these *components*, not about the package: a consumer\n// that would rather not hand-maintain one `StepperItem` block per step can opt\n// into `useWizard` (`src/hooks/use-wizard.ts`), a headless hook that holds the\n// step index and derives the `Stepper` summary props plus each step's\n// `variant` + avatar presentation. It is separate and optional — it renders\n// nothing, decides no button visibility, and `Wizard` neither knows nor\n// requires it.\n//\n// ── Reuse over new parts ──\n// The title row is functionally identical to `PageHeader`'s, so consumers place\n// `PageHeaderRow` / `PageHeaderTitle` / `PageHeaderActions` directly inside\n// `WizardHeader` rather than getting near-duplicate `WizardTitle` /\n// `WizardActions` parts. `PageHeader`'s *root* is intentionally not reused: it\n// carries `role=\"banner\"`, and the wizard header band is not a page banner —\n// composing the row parts alone keeps the landmark structure honest.\n// `WizardSubtitle` is the one piece of typography with no existing home (a\n// dedicated `Subtitle` component was considered and rejected upstream), so it\n// reuses `PageHeaderDescription`'s exact body/secondary text treatment instead\n// of inventing a scale.\n//\n// ── Tokens ──\n// The header band's surface, divider, padding, and stacking gap come from the\n// generic semantic tiers (`--ui-background-surface-secondary`,\n// `--ui-border-on-surface-divider`, `--ui-gap-16`, `--ui-gap-12`) — Figma\n// references no `components/Wizard/*` variables, and there is no\n// `--ui-wizard-*` tier in @acronis-platform/tokens-pd.\n//\n// The body's 1024px cap is the one hardcoded number, and it is a plain layout\n// constant rather than a themed value — the same call `dialog.tsx` makes for its\n// `large` size's 832px. It deliberately does *not* read from the\n// `--ui-breakpoint-lg` bridge var even though that hand-authored var also\n// resolves to 1024px: a content column's max width and a viewport breakpoint are\n// independent facts that happen to coincide today, and tying them would make a\n// future change to either silently move the other. No `cva` variant either —\n// Figma shows exactly one width; a per-step override goes through `className`,\n// exactly as Dialog's per-instance width override does.\n//\n// The body is horizontally centered (`mx-auto`), not left-aligned with the\n// header's content: the Figma frame is 1344px wide with `containerBody` at\n// x=160/width=1024 — (1344 - 1024) / 2 = 160 on both sides, a centered column,\n// while `WizardHeader`'s content spans edge-to-edge inside its own 16px padding.\n// The two rows are intentionally not flush on the same left edge.\n\nconst Wizard = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard\"\n    className={cn('flex h-full w-full flex-col', className)}\n    {...props}\n  />\n));\nWizard.displayName = 'Wizard';\n\n// The header band: breadcrumb, title row, optional subtitle, and optional\n// stepper, stacked in that order as children. Sticky, so the step context and\n// the Cancel/Back/Next actions stay reachable while a long step body scrolls.\nconst WizardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard-header\"\n    className={cn(\n      'sticky top-0 z-10 flex w-full flex-col gap-[var(--ui-gap-12)] border-b border-[var(--ui-border-on-surface-divider)] bg-[var(--ui-background-surface-secondary)] p-[var(--ui-gap-16)]',\n      className\n    )}\n    {...props}\n  />\n));\nWizardHeader.displayName = 'WizardHeader';\n\n// Optional supporting line under the title row. Same treatment as\n// `PageHeaderDescription` — body size, secondary (muted) color.\nconst WizardSubtitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"wizard-subtitle\"\n    className={cn(\n      'text-sm font-normal leading-6 text-muted-foreground',\n      className\n    )}\n    {...props}\n  />\n));\nWizardSubtitle.displayName = 'WizardSubtitle';\n\n// The step's content column, capped at 1024px. Always meant to wrap a\n// `Section` (or several) — the wizard step's own fields live inside that, not\n// here.\nconst WizardBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"wizard-body\"\n    className={cn(\n      'mx-auto flex w-full max-w-[1024px] flex-col pb-[var(--ui-gap-16)]',\n      className\n    )}\n    {...props}\n  />\n));\nWizardBody.displayName = 'WizardBody';\n\nexport { Wizard, WizardHeader, WizardSubtitle, WizardBody };\n"],"names":["Wizard","React","className","props","ref","jsx","cn","WizardHeader","WizardSubtitle","WizardBody"],"mappings":";;;AA+DA,MAAMA,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,+BAA+BJ,CAAS;AAAA,IACrD,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAO,cAAc;AAKrB,MAAMO,IAAeN,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAa,cAAc;AAI3B,MAAMC,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAe,cAAc;AAK7B,MAAMC,IAAaR,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAW,cAAc;"}

package/dist/hooks/use-wizard.js

@@ -0,0 +1,75 @@
+import * as l from "react";
+const f = {
+  completed: { avatarColor: "green", avatarClassName: "[box-shadow:none]" },
+  current: {
+    avatarColor: "blue",
+    avatarClassName: "[box-shadow:none] text-[var(--ui-stepper-item-current-label-color)]"
+  },
+  future: {
+    avatarColor: "gray",
+    avatarClassName: "[box-shadow:none] text-[var(--ui-stepper-item-future-label-color)]"
+  }
+};
+function u(e, n) {
+  return Math.min(Math.max(e, 0), n - 1);
+}
+function d(e, n) {
+  if (typeof n == "number")
+    return Number.isNaN(n) ? null : u(Math.trunc(n), e.length);
+  const t = e.findIndex((c) => c.id === n);
+  return t === -1 ? null : t;
+}
+function S({
+  steps: e,
+  initialStep: n = 0
+}) {
+  var i;
+  if (e.length === 0)
+    throw new Error("useWizard: `steps` must not be empty.");
+  const t = e.length, [c, s] = l.useState(
+    () => d(e, n) ?? 0
+  ), r = u(c, t), b = l.useCallback(() => {
+    s(
+      (a) => u(u(a, t) + 1, t)
+    );
+  }, [t]), p = l.useCallback(() => {
+    s(
+      (a) => u(u(a, t) - 1, t)
+    );
+  }, [t]), x = l.useCallback(
+    (a) => {
+      const o = d(e, a);
+      o !== null && s(o);
+    },
+    [e]
+  );
+  return {
+    steps: l.useMemo(
+      () => e.map((a, o) => {
+        const m = o < r ? "completed" : o === r ? "current" : "future";
+        return {
+          ...a,
+          index: o,
+          stepNumber: o + 1,
+          variant: m,
+          ...f[m]
+        };
+      }),
+      [e, r]
+    ),
+    currentIndex: r,
+    currentStepNumber: r + 1,
+    stepCount: t,
+    currentStepLabel: e[r].label,
+    nextStepLabel: (i = e[r + 1]) == null ? void 0 : i.label,
+    isFirstStep: r === 0,
+    isLastStep: r === t - 1,
+    goToNextStep: b,
+    goToPreviousStep: p,
+    goToStep: x
+  };
+}
+export {
+  S as useWizard
+};
+//# sourceMappingURL=use-wizard.js.map

package/dist/hooks/use-wizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-wizard.js","sources":["../../src/hooks/use-wizard.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface WizardStep {\n  /** Stable identifier; `goToStep` and `initialStep` accept it as a string. */\n  id: string;\n  /** Step label, rendered by `StepperItem` and the `Stepper` summary. */\n  label: string;\n}\n\nexport type WizardStepAvatarColor = 'blue' | 'green' | 'gray';\n\nexport type WizardStepVariant = 'completed' | 'current' | 'future';\n\n/**\n * A step enriched with everything a `StepperItem` needs. Intersects `TStep`, so\n * any extra fields the consumer put on their own step objects survive.\n */\nexport type WizardStepState<TStep extends WizardStep = WizardStep> = TStep & {\n  /** Zero-based position in `steps`. */\n  index: number;\n  /** One-based position, for the avatar's displayed number. */\n  stepNumber: number;\n  /** `StepperItem`'s `variant`, derived from the position vs. `currentIndex`. */\n  variant: WizardStepVariant;\n  /** `Avatar`'s `color` for this step's variant. */\n  avatarColor: WizardStepAvatarColor;\n  /** Classes to merge onto this step's `Avatar`. */\n  avatarClassName: string;\n};\n\nexport interface UseWizardOptions<TStep extends WizardStep = WizardStep> {\n  /** The flow's steps, in order. Must not be empty. */\n  steps: TStep[];\n  /**\n   * Where the flow starts — a zero-based index or a step `id`. A numeric\n   * index is truncated toward zero and clamped into range; `NaN` and an id\n   * that matches no step fall back to the first step. A seed, not a\n   * controlled input: later changes are ignored.\n   */\n  initialStep?: number | string;\n}\n\nexport interface UseWizardResult<TStep extends WizardStep = WizardStep> {\n  /** `steps` with per-step `variant`/avatar presentation derived. */\n  steps: WizardStepState<TStep>[];\n  /**\n   * Zero-based index of the active step. Always a valid index into `steps`:\n   * if `steps` shrinks so that the stored index is past the end, the\n   * effective index clamps to `steps.length - 1`.\n   */\n  currentIndex: number;\n  /** One-based number of the active step, for `Stepper`'s `currentStep`. */\n  currentStepNumber: number;\n  /** Total number of steps, for `Stepper`'s `totalSteps`. */\n  stepCount: number;\n  /** The active step's label, for `Stepper`'s `current`. */\n  currentStepLabel: string;\n  /** The following step's label, or `undefined` on the last step. */\n  nextStepLabel: string | undefined;\n  isFirstStep: boolean;\n  isLastStep: boolean;\n  /** Advance one step; no-op on the last step (never wraps). */\n  goToNextStep: () => void;\n  /** Go back one step; no-op on the first step (never wraps). */\n  goToPreviousStep: () => void;\n  /**\n   * Jump to a zero-based index or a step `id`. A numeric index is truncated\n   * toward zero (`1.5` → `1`) and clamped into range; `NaN` is a no-op. An\n   * id that matches no step is a no-op; on duplicate ids the first wins.\n   */\n  goToStep: (target: number | string) => void;\n}\n\nconst AVATAR_BY_VARIANT: Record<\n  WizardStepVariant,\n  { avatarColor: WizardStepAvatarColor; avatarClassName: string }\n> = {\n  completed: { avatarColor: 'green', avatarClassName: '[box-shadow:none]' },\n  current: {\n    avatarColor: 'blue',\n    avatarClassName:\n      '[box-shadow:none] text-[var(--ui-stepper-item-current-label-color)]',\n  },\n  future: {\n    avatarColor: 'gray',\n    avatarClassName:\n      '[box-shadow:none] text-[var(--ui-stepper-item-future-label-color)]',\n  },\n};\n\nfunction clampIndex(index: number, stepCount: number): number {\n  return Math.min(Math.max(index, 0), stepCount - 1);\n}\n\n// Numbers are truncated toward zero and clamped into range; `NaN` and ids that\n// match nothing resolve to `null`, which callers treat as a no-op.\nfunction resolveStepIndex(\n  steps: readonly WizardStep[],\n  target: number | string\n): number | null {\n  if (typeof target === 'number') {\n    if (Number.isNaN(target)) return null;\n    return clampIndex(Math.trunc(target), steps.length);\n  }\n  const index = steps.findIndex((step) => step.id === target);\n  return index === -1 ? null : index;\n}\n\n/**\n * Headless step state for a `Wizard`'s `Stepper` (the `Wizard` components\n * themselves stay presentational and own no state). Returns the `Stepper`\n * summary props plus a per-step `variant` + avatar presentation, and the\n * navigation callbacks a consumer wires to its Back/Next buttons.\n *\n * Opt-in: a consumer that already owns its step state can keep driving\n * `Stepper`/`StepperItem` by hand.\n *\n * `steps` may be a live, per-render value. The active index is stored as\n * state but re-clamped against the *current* `steps.length` on every read,\n * so a `steps` array that shrinks past the active index resolves to the last\n * remaining step instead of reading past the end.\n */\nexport function useWizard<TStep extends WizardStep = WizardStep>({\n  steps,\n  initialStep = 0,\n}: UseWizardOptions<TStep>): UseWizardResult<TStep> {\n  if (steps.length === 0) {\n    throw new Error('useWizard: `steps` must not be empty.');\n  }\n\n  const stepCount = steps.length;\n\n  const [storedIndex, setCurrentIndex] = React.useState(\n    () => resolveStepIndex(steps, initialStep) ?? 0\n  );\n\n  // `storedIndex` can outlive the step it pointed at, so every read goes\n  // through the clamp rather than trusting the stored value.\n  const currentIndex = clampIndex(storedIndex, stepCount);\n\n  // Both step relative to the *clamped* current index, so a `steps` array that\n  // shrank does not leave the stored value skipping steps on the way back.\n  const goToNextStep = React.useCallback(() => {\n    setCurrentIndex((current) =>\n      clampIndex(clampIndex(current, stepCount) + 1, stepCount)\n    );\n  }, [stepCount]);\n\n  const goToPreviousStep = React.useCallback(() => {\n    setCurrentIndex((current) =>\n      clampIndex(clampIndex(current, stepCount) - 1, stepCount)\n    );\n  }, [stepCount]);\n\n  const goToStep = React.useCallback(\n    (target: number | string) => {\n      const index = resolveStepIndex(steps, target);\n      if (index === null) return;\n      setCurrentIndex(index);\n    },\n    [steps]\n  );\n\n  const derivedSteps = React.useMemo(\n    () =>\n      steps.map((step, index) => {\n        const variant: WizardStepVariant =\n          index < currentIndex\n            ? 'completed'\n            : index === currentIndex\n              ? 'current'\n              : 'future';\n        return {\n          ...step,\n          index,\n          stepNumber: index + 1,\n          variant,\n          ...AVATAR_BY_VARIANT[variant],\n        };\n      }),\n    [steps, currentIndex]\n  );\n\n  return {\n    steps: derivedSteps,\n    currentIndex,\n    currentStepNumber: currentIndex + 1,\n    stepCount,\n    currentStepLabel: steps[currentIndex].label,\n    nextStepLabel: steps[currentIndex + 1]?.label,\n    isFirstStep: currentIndex === 0,\n    isLastStep: currentIndex === stepCount - 1,\n    goToNextStep,\n    goToPreviousStep,\n    goToStep,\n  };\n}\n"],"names":["AVATAR_BY_VARIANT","clampIndex","index","stepCount","resolveStepIndex","steps","target","step","useWizard","initialStep","storedIndex","setCurrentIndex","React","currentIndex","goToNextStep","current","goToPreviousStep","goToStep","variant","_a"],"mappings":";AAyEA,MAAMA,IAGF;AAAA,EACF,WAAW,EAAE,aAAa,SAAS,iBAAiB,oBAAA;AAAA,EACpD,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBACE;AAAA,EAAA;AAAA,EAEJ,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,iBACE;AAAA,EAAA;AAEN;AAEA,SAASC,EAAWC,GAAeC,GAA2B;AAC5D,SAAO,KAAK,IAAI,KAAK,IAAID,GAAO,CAAC,GAAGC,IAAY,CAAC;AACnD;AAIA,SAASC,EACPC,GACAC,GACe;AACf,MAAI,OAAOA,KAAW;AACpB,WAAI,OAAO,MAAMA,CAAM,IAAU,OAC1BL,EAAW,KAAK,MAAMK,CAAM,GAAGD,EAAM,MAAM;AAEpD,QAAMH,IAAQG,EAAM,UAAU,CAACE,MAASA,EAAK,OAAOD,CAAM;AAC1D,SAAOJ,MAAU,KAAK,OAAOA;AAC/B;AAgBO,SAASM,EAAiD;AAAA,EAC/D,OAAAH;AAAA,EACA,aAAAI,IAAc;AAChB,GAAoD;;AAClD,MAAIJ,EAAM,WAAW;AACnB,UAAM,IAAI,MAAM,uCAAuC;AAGzD,QAAMF,IAAYE,EAAM,QAElB,CAACK,GAAaC,CAAe,IAAIC,EAAM;AAAA,IAC3C,MAAMR,EAAiBC,GAAOI,CAAW,KAAK;AAAA,EAAA,GAK1CI,IAAeZ,EAAWS,GAAaP,CAAS,GAIhDW,IAAeF,EAAM,YAAY,MAAM;AAC3C,IAAAD;AAAA,MAAgB,CAACI,MACfd,EAAWA,EAAWc,GAASZ,CAAS,IAAI,GAAGA,CAAS;AAAA,IAAA;AAAA,EAE5D,GAAG,CAACA,CAAS,CAAC,GAERa,IAAmBJ,EAAM,YAAY,MAAM;AAC/C,IAAAD;AAAA,MAAgB,CAACI,MACfd,EAAWA,EAAWc,GAASZ,CAAS,IAAI,GAAGA,CAAS;AAAA,IAAA;AAAA,EAE5D,GAAG,CAACA,CAAS,CAAC,GAERc,IAAWL,EAAM;AAAA,IACrB,CAACN,MAA4B;AAC3B,YAAMJ,IAAQE,EAAiBC,GAAOC,CAAM;AAC5C,MAAIJ,MAAU,QACdS,EAAgBT,CAAK;AAAA,IACvB;AAAA,IACA,CAACG,CAAK;AAAA,EAAA;AAuBR,SAAO;AAAA,IACL,OArBmBO,EAAM;AAAA,MACzB,MACEP,EAAM,IAAI,CAACE,GAAML,MAAU;AACzB,cAAMgB,IACJhB,IAAQW,IACJ,cACAX,MAAUW,IACR,YACA;AACR,eAAO;AAAA,UACL,GAAGN;AAAA,UACH,OAAAL;AAAA,UACA,YAAYA,IAAQ;AAAA,UACpB,SAAAgB;AAAA,UACA,GAAGlB,EAAkBkB,CAAO;AAAA,QAAA;AAAA,MAEhC,CAAC;AAAA,MACH,CAACb,GAAOQ,CAAY;AAAA,IAAA;AAAA,IAKpB,cAAAA;AAAA,IACA,mBAAmBA,IAAe;AAAA,IAClC,WAAAV;AAAA,IACA,kBAAkBE,EAAMQ,CAAY,EAAE;AAAA,IACtC,gBAAeM,IAAAd,EAAMQ,IAAe,CAAC,MAAtB,gBAAAM,EAAyB;AAAA,IACxC,aAAaN,MAAiB;AAAA,IAC9B,YAAYA,MAAiBV,IAAY;AAAA,IACzC,cAAAW;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAC;AAAA,EAAA;AAEJ;"}