@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/wizard/wizard.styles.ts

@@ -0,0 +1,147 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root container that holds the step rail and the content/footer area
+ * side-by-side (vertical) or stacked (horizontal).
+ */
+export const wizardVariants = cva({
+  base: 'flex gap-8',
+  variants: {
+    orientation: {
+      vertical: 'flex-row',
+      horizontal: 'flex-col',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+/**
+ * The step rail — the ordered list of step indicators.
+ * Vertical: a narrow column on the left. Horizontal: a row across the top.
+ */
+export const wizardRailVariants = cva({
+  base: 'flex shrink-0',
+  variants: {
+    orientation: {
+      vertical: 'flex-col gap-0',
+      horizontal: 'flex-row items-center gap-0',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+})
+
+/**
+ * A single step item in the rail. The `status` variant drives colour so
+ * adapters never inline these classes.
+ */
+export const wizardStepItemVariants = cva({
+  base: 'flex items-center gap-3 relative',
+  variants: {
+    orientation: {
+      vertical: 'flex-row',
+      horizontal: 'flex-col',
+    },
+    status: {
+      complete: '',
+      current: '',
+      upcoming: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+    status: 'upcoming',
+  },
+})
+
+/**
+ * The circular step indicator (the number/check badge on the rail).
+ * `status` variant applies the appropriate background and text treatment.
+ */
+export const wizardStepIndicatorVariants = cva({
+  base: [
+    'relative z-10 flex size-8 shrink-0 items-center justify-center',
+    'rounded-full border-2 text-xs font-semibold transition-colors',
+  ].join(' '),
+  variants: {
+    status: {
+      complete: 'border-primary bg-primary text-primary-foreground',
+      current: 'border-primary bg-background text-primary',
+      upcoming: 'border-border bg-background text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    status: 'upcoming',
+  },
+})
+
+/** The label text next to / below the step indicator. */
+export const wizardStepLabelVariants = cva({
+  base: 'text-sm font-medium transition-colors',
+  variants: {
+    status: {
+      complete: 'text-foreground',
+      current: 'text-foreground',
+      upcoming: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    status: 'upcoming',
+  },
+})
+
+/** "(Optional)" sub-label shown beneath the step label. */
+export const wizardStepOptionalClass = 'text-xs text-muted-foreground'
+
+/**
+ * The connector line drawn between two adjacent step indicators.
+ * Positioned absolutely so the indicator sits on top of it.
+ */
+export const wizardConnectorVariants = cva({
+  base: 'shrink-0 transition-colors',
+  variants: {
+    orientation: {
+      vertical: 'mx-4 w-0.5 flex-1 min-h-[1.5rem]',
+      horizontal: 'my-4 h-0.5 flex-1 min-w-[1.5rem]',
+    },
+    complete: {
+      true: 'bg-primary',
+      false: 'bg-border',
+    },
+  },
+  defaultVariants: {
+    orientation: 'vertical',
+    complete: 'false',
+  },
+})
+
+/** The main content area to the right (vertical) or below (horizontal) the rail. */
+export const wizardContentClass = 'flex min-w-0 flex-1 flex-col'
+
+/** Footer row that holds the Back / Skip / Next-or-Complete buttons. */
+export const wizardFooterClass = 'mt-6 flex items-center gap-3'
+
+/** The primary action button (Next / Complete). */
+export const wizardPrimaryButtonVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium',
+    'bg-primary text-primary-foreground transition-colors',
+    'hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ].join(' '),
+})
+
+/** The secondary action button (Back / Skip). */
+export const wizardSecondaryButtonVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium',
+    'border border-input bg-background text-foreground transition-colors',
+    'hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    'disabled:pointer-events-none disabled:opacity-50',
+  ].join(' '),
+})

package/dist/wizard/wizard.ts

@@ -0,0 +1,128 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+/** A single step in a wizard flow. */
+export interface WizardStep {
+  /** Unique identifier for the step. */
+  id: string
+  /** Human-readable label shown in the step rail. */
+  label: string
+  /** When true the user may skip this step. */
+  optional?: boolean
+}
+
+/** The resolved status of a step relative to the current position. */
+export type WizardStepStatus = 'complete' | 'current' | 'upcoming'
+
+/** A step enriched with its resolved status and position. */
+export interface WizardStepState {
+  step: WizardStep
+  status: WizardStepStatus
+  index: number
+}
+
+/** Orientation of the step rail. */
+export type WizardOrientation = 'vertical' | 'horizontal'
+
+export interface WizardProps {
+  /** Controlled current step index (0-based). */
+  currentIndex?: number
+  /** Total number of steps. */
+  count?: number
+  /** Orientation of the step rail. */
+  orientation?: WizardOrientation
+}
+
+export interface WizardAPI {
+  /** ARIA attributes to spread on the root element. */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Derive the status of every step from the current position.
+ *
+ * Steps before `currentIndex` are `'complete'`, the step at `currentIndex` is
+ * `'current'`, and every step after is `'upcoming'`.
+ */
+export function getStepState(
+  steps: WizardStep[],
+  currentIndex: number,
+): WizardStepState[] {
+  return steps.map((step, index) => {
+    let status: WizardStepStatus
+    if (index < currentIndex) {
+      status = 'complete'
+    } else if (index === currentIndex) {
+      status = 'current'
+    } else {
+      status = 'upcoming'
+    }
+    return { step, status, index }
+  })
+}
+
+/**
+ * Returns the next step index, clamped to the last step so the wizard never
+ * advances past the final step.
+ */
+export function getNextIndex(currentIndex: number, count: number): number {
+  if (count <= 0) return currentIndex
+  return Math.min(currentIndex + 1, count - 1)
+}
+
+/**
+ * Returns the previous step index, clamped to 0 so the wizard never goes
+ * behind the first step.
+ */
+export function getPrevIndex(currentIndex: number): number {
+  return Math.max(currentIndex - 1, 0)
+}
+
+/**
+ * Whether the wizard can advance from `currentIndex`.
+ *
+ * Returns `false` when already on the last step.
+ */
+export function canAdvance(currentIndex: number, count: number): boolean {
+  if (count <= 0) return false
+  return currentIndex < count - 1
+}
+
+/**
+ * Fractional progress through the wizard (0 when on step 0, 1 when the final
+ * step is complete). Returns 0 for empty wizards.
+ *
+ * `wizardProgress(0, 4)` → 0   (just started)
+ * `wizardProgress(3, 4)` → 0.75
+ * `wizardProgress(4, 4)` → 1   (done)
+ */
+export function wizardProgress(currentIndex: number, count: number): number {
+  if (count <= 0) return 0
+  return Math.min(currentIndex / count, 1)
+}
+
+/**
+ * Build the framework-agnostic root props for a wizard component.
+ *
+ * Returns `role="group"` plus `data-step` / `data-orientation` attributes so
+ * adapters can spread them onto their container without duplicating logic.
+ */
+export function createWizard(props: WizardProps = {}): WizardAPI {
+  const { currentIndex = 0, count = 0, orientation = 'vertical' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-step': String(currentIndex),
+    'data-orientation': orientation,
+  }
+
+  if (count > 0) {
+    dataAttributes['data-count'] = String(count)
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -22,8 +22,10 @@
   "devDependencies": {
     "@refraction-ui/astro-accordion": "workspace:*",
     "@refraction-ui/astro-ai": "workspace:*",
+    "@refraction-ui/astro-analytics": "workspace:*",
     "@refraction-ui/astro-animated-text": "workspace:*",
     "@refraction-ui/astro-app-shell": "workspace:*",
+    "@refraction-ui/astro-audio-room": "workspace:*",
     "@refraction-ui/astro-auth": "workspace:*",
     "@refraction-ui/astro-avatar": "workspace:*",
     "@refraction-ui/astro-avatar-group": "workspace:*",
@@ -32,14 +34,21 @@
     "@refraction-ui/astro-breadcrumbs": "workspace:*",
     "@refraction-ui/astro-button": "workspace:*",
     "@refraction-ui/astro-calendar": "workspace:*",
+    "@refraction-ui/astro-call-controls": "workspace:*",
+    "@refraction-ui/astro-callout": "workspace:*",
     "@refraction-ui/astro-card": "workspace:*",
+    "@refraction-ui/astro-card-grid": "workspace:*",
+    "@refraction-ui/astro-carousel": "workspace:*",
     "@refraction-ui/astro-charts": "workspace:*",
     "@refraction-ui/astro-checkbox": "workspace:*",
+    "@refraction-ui/astro-checklist": "workspace:*",
+    "@refraction-ui/astro-code-block": "workspace:*",
     "@refraction-ui/astro-code-editor": "workspace:*",
     "@refraction-ui/astro-collapsible": "workspace:*",
     "@refraction-ui/astro-command": "workspace:*",
-    "@refraction-ui/astro-conversation": "workspace:*",
+    "@refraction-ui/astro-command-input": "workspace:*",
     "@refraction-ui/astro-content-protection": "workspace:*",
+    "@refraction-ui/astro-conversation": "workspace:*",
     "@refraction-ui/astro-cookie-consent": "workspace:*",
     "@refraction-ui/astro-data-table": "workspace:*",
     "@refraction-ui/astro-date-picker": "workspace:*",
@@ -47,61 +56,80 @@
     "@refraction-ui/astro-dialog": "workspace:*",
     "@refraction-ui/astro-diff-viewer": "workspace:*",
     "@refraction-ui/astro-dropdown-menu": "workspace:*",
+    "@refraction-ui/astro-editor-status-bar": "workspace:*",
+    "@refraction-ui/astro-editor-tabs": "workspace:*",
     "@refraction-ui/astro-emoji-picker": "workspace:*",
+    "@refraction-ui/astro-empty-state": "workspace:*",
     "@refraction-ui/astro-feedback-dialog": "workspace:*",
+    "@refraction-ui/astro-file-tree": "workspace:*",
     "@refraction-ui/astro-file-upload": "workspace:*",
+    "@refraction-ui/astro-floating-reactions": "workspace:*",
+    "@refraction-ui/astro-flow-editor": "workspace:*",
     "@refraction-ui/astro-footer": "workspace:*",
+    "@refraction-ui/astro-graph-view": "workspace:*",
+    "@refraction-ui/astro-icon-system": "workspace:*",
+    "@refraction-ui/astro-infinite-canvas": "workspace:*",
     "@refraction-ui/astro-inline-editor": "workspace:*",
     "@refraction-ui/astro-input": "workspace:*",
     "@refraction-ui/astro-input-group": "workspace:*",
     "@refraction-ui/astro-install-prompt": "workspace:*",
     "@refraction-ui/astro-keyboard-shortcut": "workspace:*",
     "@refraction-ui/astro-language-selector": "workspace:*",
+    "@refraction-ui/astro-link-card": "workspace:*",
+    "@refraction-ui/astro-live-captions": "workspace:*",
+    "@refraction-ui/astro-live-cursors": "workspace:*",
+    "@refraction-ui/astro-live-transcript": "workspace:*",
+    "@refraction-ui/astro-logger": "workspace:*",
     "@refraction-ui/astro-markdown-renderer": "workspace:*",
+    "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",
     "@refraction-ui/astro-otp-input": "workspace:*",
+    "@refraction-ui/astro-pagination": "workspace:*",
+    "@refraction-ui/astro-password-input": "workspace:*",
+    "@refraction-ui/astro-payment": "workspace:*",
     "@refraction-ui/astro-popover": "workspace:*",
+    "@refraction-ui/astro-pre-call-lobby": "workspace:*",
     "@refraction-ui/astro-presence-indicator": "workspace:*",
     "@refraction-ui/astro-progress-display": "workspace:*",
+    "@refraction-ui/astro-radial-gauge": "workspace:*",
     "@refraction-ui/astro-radio": "workspace:*",
+    "@refraction-ui/astro-rating-scale": "workspace:*",
     "@refraction-ui/astro-reaction-bar": "workspace:*",
     "@refraction-ui/astro-resizable-layout": "workspace:*",
     "@refraction-ui/astro-rich-editor": "workspace:*",
     "@refraction-ui/astro-search-bar": "workspace:*",
+    "@refraction-ui/astro-segmented-control": "workspace:*",
     "@refraction-ui/astro-select": "workspace:*",
+    "@refraction-ui/astro-separator": "workspace:*",
     "@refraction-ui/astro-sidebar": "workspace:*",
     "@refraction-ui/astro-skeleton": "workspace:*",
+    "@refraction-ui/astro-skip-to-content": "workspace:*",
     "@refraction-ui/astro-slide-viewer": "workspace:*",
+    "@refraction-ui/astro-slider": "workspace:*",
+    "@refraction-ui/astro-social-auth-button": "workspace:*",
     "@refraction-ui/astro-status-indicator": "workspace:*",
+    "@refraction-ui/astro-steps": "workspace:*",
+    "@refraction-ui/astro-sticky-note": "workspace:*",
     "@refraction-ui/astro-switch": "workspace:*",
+    "@refraction-ui/astro-table-of-contents": "workspace:*",
     "@refraction-ui/astro-tabs": "workspace:*",
+    "@refraction-ui/astro-terminal": "workspace:*",
+    "@refraction-ui/astro-test-results": "workspace:*",
     "@refraction-ui/astro-textarea": "workspace:*",
     "@refraction-ui/astro-theme": "workspace:*",
     "@refraction-ui/astro-thread-view": "workspace:*",
+    "@refraction-ui/astro-timeline": "workspace:*",
     "@refraction-ui/astro-toast": "workspace:*",
     "@refraction-ui/astro-tooltip": "workspace:*",
     "@refraction-ui/astro-version-selector": "workspace:*",
+    "@refraction-ui/astro-video-grid": "workspace:*",
     "@refraction-ui/astro-video-player": "workspace:*",
+    "@refraction-ui/astro-video-tile": "workspace:*",
     "@refraction-ui/astro-voice-pill": "workspace:*",
     "@refraction-ui/astro-waveform": "workspace:*",
-    "@refraction-ui/shared": "workspace:*",
-    "@refraction-ui/astro-table-of-contents": "workspace:*",
-    "@refraction-ui/astro-carousel": "workspace:*",
-    "@refraction-ui/astro-slider": "workspace:*",
-    "@refraction-ui/astro-pagination": "workspace:*",
-    "@refraction-ui/astro-callout": "workspace:*",
-    "@refraction-ui/astro-steps": "workspace:*",
-    "@refraction-ui/astro-file-tree": "workspace:*",
-    "@refraction-ui/astro-icon-system": "workspace:*",
-    "@refraction-ui/astro-skip-to-content": "workspace:*",
-    "@refraction-ui/astro-code-block": "workspace:*",
-    "@refraction-ui/astro-link-card": "workspace:*",
-    "@refraction-ui/astro-card-grid": "workspace:*",
-    "@refraction-ui/astro-payment": "workspace:*",
-    "@refraction-ui/astro-command-input": "workspace:*",
-    "@refraction-ui/astro-logger": "workspace:*",
-    "@refraction-ui/astro-analytics": "workspace:*"
+    "@refraction-ui/astro-wizard": "workspace:*",
+    "@refraction-ui/shared": "workspace:*"
   },
   "publishConfig": {
     "access": "public"