@refraction-ui/astro 0.17.4 → 0.18.1

package/dist/astro-steps/StepContent.astro

@@ -0,0 +1,17 @@
+---
+import { createStepContent } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createStepContent()
+---
+
+<div
+  class={cn('flex-1 pb-8', className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-steps/StepDescription.astro

@@ -0,0 +1,17 @@
+---
+import { createStepDescription, stepDescriptionVariants } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createStepDescription()
+---
+
+<p
+  class={cn(stepDescriptionVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</p>

package/dist/astro-steps/StepIndicator.astro

@@ -0,0 +1,20 @@
+---
+import { createStepIndicator, stepIndicatorVariants } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  status?: 'completed' | 'active' | 'upcoming'
+}
+
+const { status, class: className, ...props } = Astro.props
+const api = createStepIndicator()
+---
+
+<div
+  class={cn(stepIndicatorVariants({ status }), className)}
+  data-state={status ?? 'upcoming'}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-steps/StepTitle.astro

@@ -0,0 +1,17 @@
+---
+import { createStepTitle, stepTitleVariants } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const api = createStepTitle()
+---
+
+<h4
+  class={cn(stepTitleVariants(), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</h4>

package/dist/astro-steps/Steps.astro

@@ -1,3 +1,19 @@
 ---
+import { createSteps, stepsVariants } from '../steps/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: 'vertical' | 'horizontal'
+}
+
+const { orientation, class: className, ...props } = Astro.props
+const api = createSteps()
 ---
-<div></div>
+
+<div
+  class={cn(stepsVariants({ orientation }), className)}
+  {...api.dataAttributes}
+  {...props}
+>
+  <slot />
+</div>

package/dist/astro-steps/Steps.stories.ts

@@ -3,10 +3,16 @@ import Component from './Steps.astro'
 const meta = {
   title: 'Astro/Steps',
   component: Component,
+  argTypes: {
+    orientation: { control: 'select', options: ['vertical', 'horizontal'] },
+  },
 }
 
 export default meta
 
 export const Default = {
-  args: {},
+  args: {
+    default: '<div data-slot="step" data-state="completed"><strong>1. Account</strong></div><div data-slot="step" data-state="active"><strong>2. Profile</strong></div><div data-slot="step" data-state="upcoming"><strong>3. Review</strong></div>',
+    orientation: 'vertical',
+  }
 }

package/dist/astro-steps/index.ts

@@ -1 +1,6 @@
-export { default as Steps } from './Steps.astro';
+export { default as Steps } from './Steps.astro'
+export { default as Step } from './Step.astro'
+export { default as StepIndicator } from './StepIndicator.astro'
+export { default as StepContent } from './StepContent.astro'
+export { default as StepTitle } from './StepTitle.astro'
+export { default as StepDescription } from './StepDescription.astro'

package/dist/astro-toast/Toaster.astro

@@ -88,9 +88,9 @@ const { class: className, ...props } = Astro.props
 
   const VARIANT_CLASSES: Record<string, string> = {
     default: 'border bg-background text-foreground',
-    success: 'border-l-4 border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100',
-    error: 'border-l-4 border-red-500/50 bg-red-50 text-red-900 dark:bg-red-950 dark:text-red-100',
-    warning: 'border-l-4 border-amber-500/50 bg-amber-50 text-amber-900 dark:bg-amber-950 dark:text-amber-100',
+    success: 'border-l-4 border-success/50 bg-success/10 text-success',
+    error: 'border-l-4 border-destructive/50 bg-destructive/10 text-destructive',
+    warning: 'border-l-4 border-warning/50 bg-warning/10 text-warning',
   }
 
   function createToastElement(options: ToastOptions): HTMLElement {

package/dist/avatar-group/avatar-group.styles.ts

@@ -49,11 +49,11 @@ export const avatarPresenceDotVariants = cva({
       xl: 'h-4 w-4',
     },
     status: {
-      online: 'bg-green-500',
-      offline: 'bg-gray-400',
-      away: 'bg-yellow-500',
-      busy: 'bg-red-500',
-      dnd: 'bg-red-500',
+      online: 'bg-success',
+      offline: 'bg-neutral',
+      away: 'bg-warning',
+      busy: 'bg-destructive',
+      dnd: 'bg-destructive',
     },
   },
   defaultVariants: {

package/dist/callout/callout.styles.ts

@@ -8,7 +8,7 @@ export const calloutVariants = cva({
       destructive: 'bg-destructive/10 border-destructive/20 text-destructive',
       success: 'bg-success/10 border-success/20 text-success',
       warning: 'bg-warning/10 border-warning/20 text-warning',
-      info: 'bg-blue-500/10 border-blue-500/20 text-blue-700 dark:text-blue-400',
+      info: 'bg-info/10 border-info/20 text-info',
     },
   },
   defaultVariants: {

package/dist/empty-state/empty-state.styles.ts

@@ -26,8 +26,8 @@ export const emptyStateIconChipVariants = cva({
   variants: {
     tone: {
       neutral: 'bg-muted text-muted-foreground',
-      success: 'bg-green-500/10 text-green-600',
-      warning: 'bg-yellow-500/10 text-yellow-600',
+      success: 'bg-success/10 text-success',
+      warning: 'bg-warning/10 text-warning',
       danger: 'bg-destructive/10 text-destructive',
     },
   },

package/dist/file-tree/file-tree.styles.ts

@@ -0,0 +1,31 @@
+import { cva } from '../shared/index.ts'
+
+/** Tree container. */
+export const fileTreeVariants = cva({
+  base: 'w-full text-sm',
+})
+
+/**
+ * A single tree row (treeitem). The `selected` variant carries the
+ * selected-row treatment so adapters never inline these classes.
+ */
+export const fileTreeItemVariants = cva({
+  base: [
+    'flex w-full cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1',
+    'text-sm outline-none transition-colors',
+    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  ].join(' '),
+  variants: {
+    selected: {
+      true: 'bg-accent text-accent-foreground',
+      false: 'text-foreground hover:bg-muted',
+    },
+  },
+  defaultVariants: {
+    selected: 'false',
+  },
+})
+
+/** Expand/collapse glyph or file marker preceding the label. */
+export const fileTreeGlyphClass = 'w-4 shrink-0 text-center text-muted-foreground'

package/dist/file-tree/file-tree.ts

@@ -0,0 +1,360 @@
+/**
+ * @refraction-ui/file-tree — headless tree view.
+ *
+ * Owns the *behavior* of a hierarchical tree: the node model, expand/collapse
+ * state, single selection, roving focus, and WAI-ARIA treeview keyboard
+ * semantics. It has NO UI opinion — adapters render the nested markup and
+ * spread the ARIA objects.
+ */
+
+/** A node in the tree. Parents carry `children`; leaves do not. */
+export interface FileTreeNode {
+  /** Unique, stable id (used for expansion/selection/focus). */
+  id: string
+  /** Display label. */
+  label: string
+  /** Child nodes — presence (even empty is not allowed: omit for leaves) marks a parent. */
+  children?: FileTreeNode[]
+  /** Disabled nodes cannot be selected, toggled, or focused via click. */
+  disabled?: boolean
+}
+
+/** Options for {@link createFileTree}. */
+export interface FileTreeConfig {
+  /** Root-level nodes. */
+  nodes?: FileTreeNode[]
+  /** Controlled expanded node ids. Pair with `onExpandedChange`. */
+  expandedIds?: string[]
+  /** Uncontrolled initial expanded node ids. */
+  defaultExpandedIds?: string[]
+  /** Controlled selected node id (`null` = none). Pair with `onSelectionChange`. */
+  selectedId?: string | null
+  /** Uncontrolled initial selected node id. */
+  defaultSelectedId?: string | null
+  /** Called whenever the expanded set changes. */
+  onExpandedChange?: (ids: string[]) => void
+  /** Called whenever the selection changes. */
+  onSelectionChange?: (id: string | null) => void
+  /** Accessible label for the tree (default `'File tree'`). */
+  'aria-label'?: string
+}
+
+/** Snapshot of the store. Returned by `getState()`; treat as immutable. */
+export interface FileTreeState {
+  nodes: FileTreeNode[]
+  expandedIds: string[]
+  selectedId: string | null
+  /** Node holding the roving-tabindex focus (null = the first visible item). */
+  focusedId: string | null
+}
+
+/** A row of the flattened, currently-visible tree (DFS order). */
+export interface VisibleTreeItem {
+  node: FileTreeNode
+  /** Id of the parent node, or null for root-level items. */
+  parentId: string | null
+  /** 1-based nesting depth (ARIA `aria-level`). */
+  depth: number
+  hasChildren: boolean
+  isExpanded: boolean
+  isSelected: boolean
+  isFocused: boolean
+}
+
+/** The framework-agnostic store. React/Astro adapters wrap this. */
+export interface FileTreeAPI {
+  /** Current immutable snapshot */
+  getState(): FileTreeState
+  /** Subscribe to changes; returns an unsubscribe fn (suits useSyncExternalStore) */
+  subscribe(listener: () => void): () => void
+
+  /** Flattened visible rows in DFS order (children of collapsed parents omitted) */
+  getVisibleItems(): VisibleTreeItem[]
+  isExpanded(id: string): boolean
+  /** Toggle a parent's expanded state (no-op for leaves/disabled nodes) */
+  toggle(id: string): void
+  expand(id: string): void
+  collapse(id: string): void
+  /** Select a node (`null` clears). No-op for unknown/disabled nodes. */
+  select(id: string | null): void
+  /** Move the roving focus to a node */
+  focus(id: string | null): void
+  /**
+   * WAI-ARIA treeview keyboard semantics, applied to the focused item:
+   * ArrowDown/Up move, ArrowRight expands or descends, ArrowLeft collapses or
+   * ascends, Home/End jump, Enter/Space selects.
+   */
+  handleKey(key: string): void
+
+  /** Replace the node model (adapters sync the prop) */
+  setNodes(nodes: FileTreeNode[]): void
+  /** Sync a controlled expanded set */
+  setExpandedIds(ids: string[]): void
+  /** Sync a controlled selection */
+  setSelectedId(id: string | null): void
+  /** Update callbacks/options after creation */
+  setOptions(options: {
+    onExpandedChange?: (ids: string[]) => void
+    onSelectionChange?: (id: string | null) => void
+    'aria-label'?: string
+  }): void
+
+  /** ARIA attributes for the tree container (`role="tree"`). */
+  getTreeAria(): Record<string, string | number | boolean>
+  /** ARIA attributes for one visible row (`role="treeitem"`). */
+  getItemAria(item: VisibleTreeItem): Record<string, string | number | boolean>
+}
+
+function arrayEquals(a: string[], b: string[]): boolean {
+  return a.length === b.length && a.every((v, i) => v === b[i])
+}
+
+/**
+ * createFileTree — headless tree store with expand/collapse, single
+ * selection, roving focus, and treeview keyboard semantics. Supports
+ * controlled (`expandedIds` / `selectedId`) and uncontrolled
+ * (`defaultExpandedIds` / `defaultSelectedId`) usage.
+ */
+export function createFileTree(config: FileTreeConfig = {}): FileTreeAPI {
+  let nodes: FileTreeNode[] = config.nodes ?? []
+  let ariaLabel = config['aria-label'] ?? 'File tree'
+  let onExpandedChange = config.onExpandedChange
+  let onSelectionChange = config.onSelectionChange
+
+  let uncontrolledExpanded: string[] = config.defaultExpandedIds ?? []
+  let controlledExpanded: string[] | undefined = config.expandedIds
+  let uncontrolledSelected: string | null = config.defaultSelectedId ?? null
+  let controlledSelected: string | null | undefined = config.selectedId
+  let focusedId: string | null = null
+
+  // Indexes rebuilt whenever the node model changes.
+  let parentById = new Map<string, string | null>()
+  let nodeById = new Map<string, FileTreeNode>()
+
+  function reindex(): void {
+    parentById = new Map()
+    nodeById = new Map()
+    const walk = (list: FileTreeNode[], parentId: string | null) => {
+      for (const node of list) {
+        nodeById.set(node.id, node)
+        parentById.set(node.id, parentId)
+        if (node.children) walk(node.children, node.id)
+      }
+    }
+    walk(nodes, null)
+  }
+  reindex()
+
+  const listeners = new Set<() => void>()
+  let snapshot: FileTreeState = buildSnapshot()
+  let visibleItems: VisibleTreeItem[] = buildVisibleItems()
+
+  function expandedIds(): string[] {
+    return controlledExpanded !== undefined ? controlledExpanded : uncontrolledExpanded
+  }
+
+  function selectedId(): string | null {
+    return controlledSelected !== undefined ? controlledSelected : uncontrolledSelected
+  }
+
+  function buildSnapshot(): FileTreeState {
+    return {
+      nodes,
+      expandedIds: expandedIds(),
+      selectedId: selectedId(),
+      focusedId,
+    }
+  }
+
+  function buildVisibleItems(): VisibleTreeItem[] {
+    const expanded = new Set(expandedIds())
+    const selected = selectedId()
+    const items: VisibleTreeItem[] = []
+    const walk = (list: FileTreeNode[], parentId: string | null, depth: number) => {
+      for (const node of list) {
+        const hasChildren = Boolean(node.children && node.children.length > 0)
+        const isExpanded = hasChildren && expanded.has(node.id)
+        items.push({
+          node,
+          parentId,
+          depth,
+          hasChildren,
+          isExpanded,
+          isSelected: node.id === selected,
+          isFocused: node.id === focusedId,
+        })
+        if (hasChildren && isExpanded) walk(node.children!, node.id, depth + 1)
+      }
+    }
+    walk(nodes, null, 1)
+    return items
+  }
+
+  function emit(): void {
+    snapshot = buildSnapshot()
+    visibleItems = buildVisibleItems()
+    for (const l of listeners) l()
+  }
+
+  function setExpanded(ids: string[]): void {
+    if (controlledExpanded === undefined) {
+      if (arrayEquals(uncontrolledExpanded, ids)) return
+      uncontrolledExpanded = ids
+    }
+    onExpandedChange?.(ids)
+    emit()
+  }
+
+  function isExpandable(id: string): boolean {
+    const node = nodeById.get(id)
+    return Boolean(node && !node.disabled && node.children && node.children.length > 0)
+  }
+
+  const api: FileTreeAPI = {
+    getState() {
+      return snapshot
+    },
+
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+
+    getVisibleItems() {
+      return visibleItems
+    },
+
+    isExpanded(id) {
+      return expandedIds().includes(id)
+    },
+
+    toggle(id) {
+      if (!isExpandable(id)) return
+      const current = expandedIds()
+      setExpanded(current.includes(id) ? current.filter((v) => v !== id) : [...current, id])
+    },
+
+    expand(id) {
+      if (!isExpandable(id)) return
+      const current = expandedIds()
+      if (current.includes(id)) return
+      setExpanded([...current, id])
+    },
+
+    collapse(id) {
+      const current = expandedIds()
+      if (!current.includes(id)) return
+      setExpanded(current.filter((v) => v !== id))
+    },
+
+    select(id) {
+      if (id !== null) {
+        const node = nodeById.get(id)
+        if (!node || node.disabled) return
+      }
+      if (controlledSelected === undefined) {
+        if (uncontrolledSelected === id) return
+        uncontrolledSelected = id
+      }
+      onSelectionChange?.(id)
+      emit()
+    },
+
+    focus(id) {
+      // Focus is only meaningful on rows that are actually rendered.
+      if (id !== null && !visibleItems.some((i) => i.node.id === id)) return
+      if (focusedId === id) return
+      focusedId = id
+      emit()
+    },
+
+    handleKey(key) {
+      const items = visibleItems
+      if (items.length === 0) return
+      const currentIndex = focusedId ? items.findIndex((i) => i.node.id === focusedId) : -1
+
+      switch (key) {
+        case 'ArrowDown':
+          api.focus(items[Math.min(currentIndex + 1, items.length - 1)]!.node.id)
+          return
+        case 'ArrowUp':
+          api.focus(items[Math.max(currentIndex - 1, 0)]!.node.id)
+          return
+        case 'Home':
+          api.focus(items[0]!.node.id)
+          return
+        case 'End':
+          api.focus(items[items.length - 1]!.node.id)
+          return
+        case 'ArrowRight': {
+          const item = currentIndex === -1 ? undefined : items[currentIndex]
+          if (!item) {
+            api.focus(items[0]!.node.id)
+            return
+          }
+          if (!item.hasChildren) return
+          if (!item.isExpanded) api.expand(item.node.id)
+          // Expanded: descend to the first child (DFS order puts it next).
+          else api.focus(items[currentIndex + 1]?.node.id ?? item.node.id)
+          return
+        }
+        case 'ArrowLeft': {
+          const item = currentIndex === -1 ? undefined : items[currentIndex]
+          if (!item) return
+          if (item.hasChildren && item.isExpanded) api.collapse(item.node.id)
+          else if (item.parentId) api.focus(item.parentId)
+          return
+        }
+        case 'Enter':
+        case ' ': {
+          const item = currentIndex === -1 ? undefined : items[currentIndex]
+          if (item) api.select(item.node.id)
+          return
+        }
+        default:
+          return
+      }
+    },
+
+    setNodes(nextNodes) {
+      nodes = nextNodes
+      reindex()
+      emit()
+    },
+
+    setExpandedIds(ids) {
+      if (controlledExpanded !== undefined && arrayEquals(controlledExpanded, ids)) return
+      controlledExpanded = ids
+      emit()
+    },
+
+    setSelectedId(id) {
+      if (controlledSelected !== undefined && controlledSelected === id) return
+      controlledSelected = id
+      emit()
+    },
+
+    setOptions(options) {
+      if (options.onExpandedChange !== undefined) onExpandedChange = options.onExpandedChange
+      if (options.onSelectionChange !== undefined) onSelectionChange = options.onSelectionChange
+      if (options['aria-label'] !== undefined) ariaLabel = options['aria-label']
+    },
+
+    getTreeAria(): Record<string, string | number | boolean> {
+      return { role: 'tree', 'aria-label': ariaLabel }
+    },
+
+    getItemAria(item): Record<string, string | number | boolean> {
+      const aria: Record<string, string | number | boolean> = {
+        role: 'treeitem',
+        'aria-level': item.depth,
+        'aria-selected': item.isSelected,
+      }
+      if (item.hasChildren) aria['aria-expanded'] = item.isExpanded
+      if (item.node.disabled) aria['aria-disabled'] = true
+      return aria
+    },
+  }
+
+  return api
+}

package/dist/file-tree/index.ts

@@ -0,0 +1,15 @@
+export { createFileTree } from './file-tree.js'
+
+export type {
+  FileTreeNode,
+  FileTreeConfig,
+  FileTreeState,
+  FileTreeAPI,
+  VisibleTreeItem,
+} from './file-tree.js'
+
+export {
+  fileTreeVariants,
+  fileTreeItemVariants,
+  fileTreeGlyphClass,
+} from './file-tree.styles.js'

package/dist/input/input.styles.ts

@@ -9,7 +9,7 @@ export const inputVariants = cva({
       lg: 'h-10 text-base',
     },
     validationState: {
-      valid: 'border-green-500 focus-visible:ring-green-500',
+      valid: 'border-success focus-visible:ring-success',
       invalid: 'border-destructive focus-visible:ring-destructive',
     },
   },

package/dist/presence-indicator/presence-indicator.styles.ts

@@ -4,11 +4,11 @@ export const presenceDotVariants = cva({
   base: 'inline-block rounded-full',
   variants: {
     status: {
-      online: 'bg-green-500',
-      offline: 'bg-gray-400',
-      away: 'bg-yellow-500',
-      busy: 'bg-red-500',
-      dnd: 'bg-red-500',
+      online: 'bg-success',
+      offline: 'bg-neutral',
+      away: 'bg-warning',
+      busy: 'bg-destructive',
+      dnd: 'bg-destructive',
     },
     size: {
       sm: 'h-2 w-2',

package/dist/progress-display/progress-display.styles.ts

@@ -20,8 +20,8 @@ export const statCardVariants = cva({
     color: {
       default: 'bg-card text-card-foreground',
       primary: 'bg-primary/10 text-primary border-primary/20',
-      success: 'bg-green-500/10 text-green-700 border-green-500/20',
-      warning: 'bg-yellow-500/10 text-yellow-700 border-yellow-500/20',
+      success: 'bg-success/10 text-success border-success/20',
+      warning: 'bg-warning/10 text-warning border-warning/20',
       destructive: 'bg-destructive/10 text-destructive border-destructive/20',
     },
   },

package/dist/status-indicator/status-indicator.styles.ts

@@ -7,12 +7,12 @@ export const statusDotVariants = cva({
   base: 'inline-block h-2 w-2 rounded-full',
   variants: {
     type: {
-      success: 'bg-green-500',
-      error: 'bg-red-500',
-      warning: 'bg-yellow-500',
-      info: 'bg-blue-500',
-      pending: 'bg-orange-500',
-      neutral: 'bg-gray-400',
+      success: 'bg-success',
+      error: 'bg-destructive',
+      warning: 'bg-warning',
+      info: 'bg-info',
+      pending: 'bg-pending',
+      neutral: 'bg-neutral',
     },
   },
   defaultVariants: {
@@ -24,12 +24,12 @@ export const statusPulseVariants = cva({
   base: 'animate-pulse inline-block h-2 w-2 rounded-full',
   variants: {
     type: {
-      success: 'bg-green-500',
-      error: 'bg-red-500',
-      warning: 'bg-yellow-500',
-      info: 'bg-blue-500',
-      pending: 'bg-orange-500',
-      neutral: 'bg-gray-400',
+      success: 'bg-success',
+      error: 'bg-destructive',
+      warning: 'bg-warning',
+      info: 'bg-info',
+      pending: 'bg-pending',
+      neutral: 'bg-neutral',
     },
   },
   defaultVariants: {