@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/video-tile/video-tile.ts

@@ -0,0 +1,74 @@
+/** Microphone state for a video participant. */
+export type VideoTileMicState = 'on' | 'muted'
+
+/** Data describing a video meeting participant tile. */
+export interface VideoTileData {
+  /** Unique participant identifier. */
+  id: string
+  /** Display name shown in the name chip. */
+  name: string
+  /** Current microphone state. Defaults to 'on'. */
+  micState?: VideoTileMicState
+  /** Whether the participant is currently speaking (active audio). */
+  speaking?: boolean
+  /** Whether the tile is pinned in the grid. */
+  pinned?: boolean
+}
+
+export interface VideoTileHeadlessProps {
+  /** Whether the participant is actively speaking. */
+  speaking?: boolean
+  /** Whether the tile is pinned in the grid. */
+  pinned?: boolean
+}
+
+export interface VideoTileAPI {
+  /** Data attributes for styling hooks — spread onto the tile container. */
+  dataAttributes: {
+    'data-speaking': string
+    'data-pinned': string
+  }
+  /** ARIA props — spread onto the tile container. */
+  ariaProps: {
+    role: 'group'
+  }
+}
+
+/**
+ * Derive framework-agnostic data attributes and ARIA props for a VideoTile.
+ *
+ * Adapters spread `dataAttributes` and `ariaProps` onto the tile container so
+ * CSS selectors and assistive technology can reflect the current participant
+ * state without coupling to a specific framework.
+ */
+export function createVideoTile(props: VideoTileHeadlessProps = {}): VideoTileAPI {
+  const { speaking = false, pinned = false } = props
+
+  return {
+    dataAttributes: {
+      'data-speaking': speaking ? 'true' : 'false',
+      'data-pinned': pinned ? 'true' : 'false',
+    },
+    ariaProps: {
+      role: 'group',
+    },
+  }
+}
+
+/**
+ * Derive up to two uppercase initials from a display name.
+ *
+ * Splits on whitespace and takes the first character of the first two words.
+ * Single-word names produce a single initial.
+ *
+ * @example
+ * getInitials('Maya Goldberg') // 'MG'
+ * getInitials('Alice')         // 'A'
+ */
+export function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  return words
+    .slice(0, 2)
+    .map((w) => w[0].toUpperCase())
+    .join('')
+}

package/dist/wizard/index.ts

@@ -0,0 +1,28 @@
+export {
+  createWizard,
+  getStepState,
+  getNextIndex,
+  getPrevIndex,
+  canAdvance,
+  wizardProgress,
+  type WizardStep,
+  type WizardStepStatus,
+  type WizardStepState,
+  type WizardOrientation,
+  type WizardProps,
+  type WizardAPI,
+} from './wizard.js'
+
+export {
+  wizardVariants,
+  wizardRailVariants,
+  wizardStepItemVariants,
+  wizardStepIndicatorVariants,
+  wizardStepLabelVariants,
+  wizardStepOptionalClass,
+  wizardConnectorVariants,
+  wizardContentClass,
+  wizardFooterClass,
+  wizardPrimaryButtonVariants,
+  wizardSecondaryButtonVariants,
+} from './wizard.styles.js'

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.12.0",
+  "version": "0.14.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -25,20 +25,26 @@
     "@refraction-ui/astro-analytics": "workspace:*",
     "@refraction-ui/astro-animated-text": "workspace:*",
     "@refraction-ui/astro-app-shell": "workspace:*",
+    "@refraction-ui/astro-audience-feature-card": "workspace:*",
+    "@refraction-ui/astro-audio-room": "workspace:*",
     "@refraction-ui/astro-auth": "workspace:*",
     "@refraction-ui/astro-avatar": "workspace:*",
     "@refraction-ui/astro-avatar-group": "workspace:*",
     "@refraction-ui/astro-badge": "workspace:*",
     "@refraction-ui/astro-bottom-nav": "workspace:*",
+    "@refraction-ui/astro-brand-network-cell": "workspace:*",
     "@refraction-ui/astro-breadcrumbs": "workspace:*",
+    "@refraction-ui/astro-browser-chrome-mock": "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:*",
@@ -53,13 +59,19 @@
     "@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:*",
@@ -67,22 +79,34 @@
     "@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-marquee-strip": "workspace:*",
+    "@refraction-ui/astro-mastery-bar": "workspace:*",
+    "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",
+    "@refraction-ui/astro-numbered-steps": "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-pricing-card": "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-section-head": "workspace:*",
     "@refraction-ui/astro-segmented-control": "workspace:*",
     "@refraction-ui/astro-select": "workspace:*",
     "@refraction-ui/astro-separator": "workspace:*",
@@ -92,20 +116,28 @@
     "@refraction-ui/astro-slide-viewer": "workspace:*",
     "@refraction-ui/astro-slider": "workspace:*",
     "@refraction-ui/astro-social-auth-button": "workspace:*",
+    "@refraction-ui/astro-stat-grid": "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/astro-wizard": "workspace:*",
     "@refraction-ui/shared": "workspace:*"
   },
   "publishConfig": {