@refraction-ui/astro 0.17.0 → 0.17.2

package/dist/slider/slider.ts

@@ -1,2 +1,134 @@
-// Core slider logic
-export interface SliderProps {}
+/**
+ * @refraction-ui/slider — headless slider.
+ *
+ * Owns the *behavior* of a single-value range slider: min/max clamping,
+ * step rounding, and keyboard increment/decrement semantics. It has NO UI
+ * opinion — adapters render the control (a native `<input type="range">` in
+ * React, which already applies these same keyboard rules natively) and spread
+ * the ARIA object.
+ */
+
+/** Options for {@link createSlider}. */
+export interface SliderProps {
+  /** Current value. Clamped into `[min, max]` and rounded to `step`. */
+  value?: number
+  /** Minimum selectable value (default 0). */
+  min?: number
+  /** Maximum selectable value (default 100). */
+  max?: number
+  /** Granularity between selectable values (default 1). */
+  step?: number
+  /** Disables the control. */
+  disabled?: boolean
+  /** Accessible label attached to the slider, when provided. */
+  'aria-label'?: string
+}
+
+/** The computed view of a slider control. */
+export interface SliderAPI {
+  /** Normalized value (clamped + step-rounded). */
+  value: number
+  min: number
+  max: number
+  step: number
+  /** Value position within the range, 0–100. */
+  percentage: number
+  /** ARIA attributes for the slider element (`role="slider"` + value attrs). */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/** Clamp a value into `[min, max]`. */
+export function clampSliderValue(value: number, min = 0, max = 100): number {
+  if (Number.isNaN(value)) return min
+  return Math.min(Math.max(value, min), max)
+}
+
+/**
+ * Round a value to the nearest multiple of `step`, offset from `min`.
+ * Non-positive steps leave the value unchanged. The result is re-rounded to
+ * the step's decimal precision to avoid float noise (e.g. 0.30000000000000004).
+ */
+export function roundToStep(value: number, min = 0, step = 1): number {
+  if (!step || step <= 0 || Number.isNaN(value)) return value
+  const snapped = min + Math.round((value - min) / step) * step
+  const decimals = (String(step).split('.')[1] ?? '').length
+  return Number(snapped.toFixed(decimals))
+}
+
+/**
+ * Pure keyboard rule for a slider (WAI-ARIA slider pattern), shared by every
+ * adapter that does NOT render a native range input (native inputs already
+ * implement these keys):
+ *
+ * - ArrowRight / ArrowUp   → +step
+ * - ArrowLeft  / ArrowDown → -step
+ * - PageUp   / PageDown    → ±10×step
+ * - Home / End             → min / max
+ *
+ * The result is clamped; unhandled keys return `current` unchanged.
+ */
+export function getSliderValueFromKey(
+  current: number,
+  key: string,
+  options: { min?: number; max?: number; step?: number } = {},
+): number {
+  const { min = 0, max = 100, step = 1 } = options
+  switch (key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      return clampSliderValue(current + step, min, max)
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      return clampSliderValue(current - step, min, max)
+    case 'PageUp':
+      return clampSliderValue(current + step * 10, min, max)
+    case 'PageDown':
+      return clampSliderValue(current - step * 10, min, max)
+    case 'Home':
+      return min
+    case 'End':
+      return max
+    default:
+      return current
+  }
+}
+
+/**
+ * createSlider — the framework-agnostic view of a slider: normalized value,
+ * percentage position, and the ARIA object (`role="slider"`,
+ * `aria-valuemin/max/now`). Adapters own the value state
+ * (controlled/uncontrolled) and call this per render.
+ */
+export function createSlider(props: SliderProps = {}): SliderAPI {
+  const min = props.min ?? 0
+  const max = props.max ?? 100
+  const step = props.step ?? 1
+  const value = clampSliderValue(roundToStep(props.value ?? min, min, step), min, max)
+  const percentage = max === min ? 0 : ((value - min) / (max - min)) * 100
+
+  const ariaProps: Record<string, string | number | boolean> = {
+    role: 'slider',
+    'aria-valuemin': min,
+    'aria-valuemax': max,
+    'aria-valuenow': value,
+    'aria-orientation': 'horizontal',
+  }
+  if (props.disabled) ariaProps['aria-disabled'] = true
+  if (props['aria-label']) ariaProps['aria-label'] = props['aria-label']
+
+  return {
+    value,
+    min,
+    max,
+    step,
+    percentage,
+    ariaProps,
+    dataAttributes: {
+      'data-value': String(value),
+      'data-min': String(min),
+      'data-max': String(max),
+    },
+  }
+}

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

@@ -1,5 +1,3 @@
-import type { AccessibilityProps } from '../shared/index.ts'
-
 export type StatusType = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'neutral'
 
 export interface StatusProps {
@@ -13,7 +11,7 @@ export interface StatusProps {
 
 export interface StatusAPI {
   /** ARIA attributes for the status indicator */
-  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  ariaProps: Record<string, string | number | boolean>
   /** The status type */
   type: StatusType
   /** The display label */
@@ -54,7 +52,7 @@ export function createStatusIndicator(props: StatusProps): StatusAPI {
   const label = labelOverride ?? STATUS_INDICATOR_LABELS[type]
   const pulse = pulseOverride ?? (type === 'pending')
 
-  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+  const ariaProps: Record<string, string | number | boolean> = {
     role: 'status',
     'aria-label': label,
   }

package/dist/thread-view/thread-view.ts

@@ -1,4 +1,3 @@
-import type { AccessibilityProps } from '../shared/index.ts'
 import { generateId } from '../shared/index.ts'
 
 export interface MessageReaction {
@@ -70,11 +69,11 @@ export interface ThreadViewAPI {
   /** Format relative time (e.g., "2 minutes ago") */
   formatRelativeTime(date: Date): string
   /** ARIA props for the thread container */
-  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  ariaProps: Record<string, string | number | boolean>
   /** Get ARIA props for a message */
-  getMessageAriaProps(message: MessageData): Record<string, unknown>
+  getMessageAriaProps(message: MessageData): Record<string, string | number | boolean>
   /** Get ARIA props for a reply button */
-  getReplyButtonAriaProps(messageId: string): Record<string, unknown>
+  getReplyButtonAriaProps(messageId: string): Record<string, string | number | boolean>
   /** Generated IDs */
   ids: {
     thread: string
@@ -132,14 +131,14 @@ export function createThreadView(props: ThreadViewProps): ThreadViewAPI {
     onReact?.(messageId, emoji)
   }
 
-  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+  const ariaProps: Record<string, string | number | boolean> = {
     role: 'log',
     'aria-label': 'Message thread',
     'aria-live': 'polite',
     id: threadId,
   }
 
-  function getMessageAriaProps(message: MessageData): Record<string, unknown> {
+  function getMessageAriaProps(message: MessageData): Record<string, string | number | boolean> {
     const isOwn = currentUserId && message.author.id === currentUserId
     return {
       role: 'article',
@@ -147,7 +146,7 @@ export function createThreadView(props: ThreadViewProps): ThreadViewAPI {
     }
   }
 
-  function getReplyButtonAriaProps(_messageId: string): Record<string, unknown> {
+  function getReplyButtonAriaProps(_messageId: string): Record<string, string | number | boolean> {
     return {
       role: 'button',
       'aria-label': `Reply to message`,

package/dist/toast/toast.ts

@@ -25,6 +25,8 @@ export interface ToastProps {
   open?: boolean
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void
+  /** Elapsed-time clock for timer pause/resume math (ms). Default: ambient `Date.now()` — inject for deterministic tests. */
+  now?: () => number
 }
 
 export interface ToastState {
@@ -55,6 +57,8 @@ export function createToast(props: ToastProps = {}): ToastAPI {
     onOpenChange,
   } = props
 
+  // Injection boundary: ambient time is the default; inject `now` for deterministic timer math.
+  const now = props.now ?? (() => Date.now())
   let isOpen = controlledOpen ?? true
   let timerId: ReturnType<typeof setTimeout> | null = null
   let remaining = duration
@@ -77,21 +81,21 @@ export function createToast(props: ToastProps = {}): ToastAPI {
     if (duration <= 0) return
     clearTimer()
     remaining = duration
-    startedAt = Date.now()
+    startedAt = now()
     timerId = setTimeout(dismiss, remaining)
   }
 
   function pauseTimer(): void {
     if (timerId === null) return
     clearTimer()
-    remaining = remaining - (Date.now() - startedAt)
+    remaining = remaining - (now() - startedAt)
     if (remaining < 0) remaining = 0
   }
 
   function resumeTimer(): void {
     if (duration <= 0 || remaining <= 0) return
     clearTimer()
-    startedAt = Date.now()
+    startedAt = now()
     timerId = setTimeout(dismiss, remaining)
   }
 
@@ -136,7 +140,14 @@ export interface ToastManagerAPI {
   subscribe(fn: (toasts: ReadonlyArray<ToastEntry>) => void): () => void
 }
 
-export function createToastManager(): ToastManagerAPI {
+export interface ToastManagerConfig {
+  /** Clock for entry `createdAt` stamps (ms). Default: ambient `Date.now()` — inject for deterministic tests. */
+  now?: () => number
+}
+
+export function createToastManager(config: ToastManagerConfig = {}): ToastManagerAPI {
+  // Injection boundary: ambient time is the default; inject `now` for deterministic createdAt.
+  const now = config.now ?? (() => Date.now())
   let toasts: ToastEntry[] = []
   const listeners = new Set<(toasts: ReadonlyArray<ToastEntry>) => void>()
   const timers = new Map<string, ReturnType<typeof setTimeout>>()
@@ -171,7 +182,7 @@ export function createToastManager(): ToastManagerAPI {
       message,
       variant,
       duration,
-      createdAt: Date.now(),
+      createdAt: now(),
     }
 
     toasts = [...toasts, entry]

package/dist/voice-pill/voice-pill.ts

@@ -1,5 +1,3 @@
-import type { AccessibilityProps } from '../shared/index.ts'
-
 export type VoicePillSpeaker = 'ai' | 'user' | (string & {})
 
 export type VoicePillPosition =
@@ -60,7 +58,7 @@ export interface VoicePillAPI {
   /** Invoke the mute callback when provided */
   toggleMute(): void
   /** ARIA props for the live status pill */
-  ariaProps: Partial<AccessibilityProps> & Record<string, unknown>
+  ariaProps: Record<string, string | number | boolean>
   /** ARIA props for the mute toggle */
   toggleMuteAriaProps: Record<string, unknown>
   /** Data attributes reflecting speaker/state */
@@ -196,7 +194,7 @@ export function createVoicePill(props: VoicePillProps): VoicePillAPI {
     onToggleMute?.()
   }
 
-  const ariaProps: Partial<AccessibilityProps> & Record<string, unknown> = {
+  const ariaProps: Record<string, string | number | boolean> = {
     role: 'status',
     'aria-live': 'polite',
     'aria-atomic': true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -84,6 +84,7 @@
     "@refraction-ui/astro-live-captions": "workspace:*",
     "@refraction-ui/astro-live-cursors": "workspace:*",
     "@refraction-ui/astro-live-transcript": "workspace:*",
+    "@refraction-ui/astro-location-selector": "workspace:*",
     "@refraction-ui/astro-logger": "workspace:*",
     "@refraction-ui/astro-markdown-renderer": "workspace:*",
     "@refraction-ui/astro-marquee-strip": "workspace:*",