@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/astro-wizard/Wizard.astro

@@ -0,0 +1,137 @@
+---
+import {
+  createWizard,
+  getStepState,
+  wizardVariants,
+  wizardRailVariants,
+  wizardStepItemVariants,
+  wizardStepIndicatorVariants,
+  wizardStepLabelVariants,
+  wizardStepOptionalClass,
+  wizardConnectorVariants,
+  wizardContentClass,
+  wizardFooterClass,
+  wizardPrimaryButtonVariants,
+  wizardSecondaryButtonVariants,
+  type WizardStep,
+  type WizardOrientation,
+} from '../wizard/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Step definitions for the rail. */
+  steps: WizardStep[]
+  /** Current step index (0-based). */
+  currentStep?: number
+  /** Orientation of the step rail. */
+  orientation?: WizardOrientation
+  /** Label for the Next button. */
+  nextLabel?: string
+  /** Label for the Back button. */
+  backLabel?: string
+  /** Label for the button on the final step. */
+  completeLabel?: string
+  /** Label for the Skip button (shown on optional steps only). */
+  skipLabel?: string
+}
+
+const {
+  steps,
+  currentStep = 0,
+  orientation = 'vertical',
+  nextLabel = 'Next',
+  backLabel = 'Back',
+  completeLabel = 'Complete',
+  skipLabel = 'Skip',
+  class: className,
+  ...rest
+} = Astro.props
+
+const stepStates = getStepState(steps, currentStep)
+const isLastStep = currentStep === steps.length - 1
+const isOptional = steps[currentStep]?.optional ?? false
+const { ariaProps, dataAttributes } = createWizard({
+  currentIndex: currentStep,
+  count: steps.length,
+  orientation,
+})
+---
+
+<div class={cn(wizardVariants({ orientation }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Step Rail -->
+  <nav aria-label="Progress" class={wizardRailVariants({ orientation })}>
+    {
+      stepStates.map((state, i) => {
+        const isLast = i === stepStates.length - 1
+        return (
+          <>
+            <div class={wizardStepItemVariants({ orientation, status: state.status })}>
+              <span
+                aria-current={state.status === 'current' ? 'step' : undefined}
+                class={wizardStepIndicatorVariants({ status: state.status })}
+              >
+                {state.status === 'complete' ? (
+                  <svg
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="size-4"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                ) : (
+                  <span>{state.index + 1}</span>
+                )}
+              </span>
+              <div class="flex flex-col">
+                <span class={wizardStepLabelVariants({ status: state.status })}>
+                  {state.step.label}
+                </span>
+                {state.step.optional && (
+                  <span class={wizardStepOptionalClass}>(Optional)</span>
+                )}
+              </div>
+            </div>
+            {!isLast && (
+              <div
+                aria-hidden="true"
+                class={wizardConnectorVariants({
+                  orientation,
+                  complete: state.status === 'complete' ? 'true' : 'false',
+                })}
+              />
+            )}
+          </>
+        )
+      })
+    }
+  </nav>
+
+  <!-- Content + Footer -->
+  <div class={wizardContentClass}>
+    <div class="flex-1">
+      <slot />
+    </div>
+
+    <div class={wizardFooterClass}>
+      <button type="button" disabled={currentStep === 0} class={wizardSecondaryButtonVariants()}>
+        {backLabel}
+      </button>
+
+      {isOptional && (
+        <button type="button" class={wizardSecondaryButtonVariants()}>
+          {skipLabel}
+        </button>
+      )}
+
+      <button type="button" class={wizardPrimaryButtonVariants()}>
+        {isLastStep ? completeLabel : nextLabel}
+      </button>
+    </div>
+  </div>
+</div>

package/dist/astro-wizard/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/audio-room/audio-room.styles.ts

@@ -0,0 +1,88 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Grid container that lays out the speaking orbs.
+ *
+ * Column count and gap are applied via inline `gridTemplateColumns` in
+ * adapters (dynamic count); this cva handles only the non-dynamic layout
+ * concerns — display, alignment, and padding.
+ */
+export const audioRoomVariants = cva({
+  base: 'grid place-items-center gap-6 p-6 w-full',
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * Wrapper cell for a single orb + name label combination.
+ * Keeps the avatar and label centred as a column.
+ */
+export const audioRoomOrbCellVariants = cva({
+  base: 'flex flex-col items-center gap-2',
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * The circular avatar / speaking indicator.
+ *
+ * - `speaking` adds an animated ring using the primary colour.
+ * - `muted` dims the orb slightly to signal a silenced microphone.
+ */
+export const speakingOrbVariants = cva({
+  base: [
+    'relative inline-flex items-center justify-center',
+    'size-20 rounded-full',
+    'bg-muted text-muted-foreground font-semibold text-xl select-none',
+    'overflow-hidden',
+    'transition-shadow duration-300',
+  ].join(' '),
+  variants: {
+    speaking: {
+      true: [
+        'ring-4 ring-primary ring-offset-2 ring-offset-background',
+        'shadow-[0_0_0_4px_hsl(var(--primary)/0.25),0_0_16px_4px_hsl(var(--primary)/0.35)]',
+      ].join(' '),
+      false: 'ring-2 ring-border',
+    },
+    muted: {
+      true: 'opacity-60',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    speaking: 'false',
+    muted: 'false',
+  },
+})
+
+/** Name label rendered below each orb. */
+export const audioRoomNameLabelClass =
+  'text-sm font-medium text-foreground text-center max-w-[6rem] truncate'
+
+/**
+ * Muted badge — a small indicator overlaid at the bottom-right of the orb
+ * to show the microphone is off.
+ */
+export const audioRoomMutedBadgeClass = [
+  'absolute bottom-0 right-0',
+  'inline-flex items-center justify-center',
+  'size-6 rounded-full',
+  'bg-destructive text-destructive-foreground',
+  'text-[10px] leading-none',
+  'border-2 border-background',
+  'translate-x-1 translate-y-1',
+].join(' ')
+
+/**
+ * Hand-raise badge — shown at the top-right of the orb.
+ */
+export const audioRoomHandBadgeClass = [
+  'absolute top-0 right-0',
+  'inline-flex items-center justify-center',
+  'size-6 rounded-full',
+  'bg-warning text-warning-foreground',
+  'text-[12px] leading-none',
+  'border-2 border-background',
+  'translate-x-1 -translate-y-1',
+].join(' ')

package/dist/audio-room/audio-room.ts

@@ -0,0 +1,70 @@
+/** A participant in an audio-only room. */
+export interface AudioParticipant {
+  /** Unique participant identifier. */
+  id: string
+  /** Display name shown below the orb. */
+  name: string
+  /** Optional avatar image URL. Falls back to initials when absent. */
+  avatarUrl?: string
+  /** Whether this participant is currently speaking. */
+  speaking?: boolean
+  /** Whether this participant's microphone is muted. */
+  muted?: boolean
+  /** Whether this participant has raised their hand. */
+  handRaised?: boolean
+}
+
+export interface AudioRoomAPI {
+  /** ARIA attributes to spread on the room container element. */
+  ariaProps: { role: 'group' }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Derive up to two uppercase initials from a display name.
+ *
+ * Examples: "Alice" → "A", "Bob Smith" → "BS", "Dr. Jane Doe" → "JD"
+ * (only word-initial alphabetic characters are used).
+ */
+export function getInitials(name: string): string {
+  const words = name
+    .trim()
+    .split(/\s+/)
+    .filter((w) => /[A-Za-z]/.test(w))
+  if (words.length === 0) return ''
+  if (words.length === 1) return words[0][0].toUpperCase()
+  return (words[0][0] + words[words.length - 1][0]).toUpperCase()
+}
+
+/**
+ * Determine the number of grid columns for the orb grid.
+ *
+ * | Count  | Columns |
+ * |--------|---------|
+ * | 1      | 1       |
+ * | 2–4    | 2       |
+ * | 5–9    | 3       |
+ * | 10+    | 4       |
+ */
+export function orbColumns(count: number): number {
+  if (count <= 1) return 1
+  if (count <= 4) return 2
+  if (count <= 9) return 3
+  return 4
+}
+
+/**
+ * Build the framework-agnostic container props for an audio room.
+ *
+ * Returns `role="group"` plus data attributes that adapters spread onto
+ * their outermost container element.
+ */
+export function createAudioRoom(): AudioRoomAPI {
+  return {
+    ariaProps: { role: 'group' },
+    dataAttributes: {
+      'data-component': 'audio-room',
+    },
+  }
+}

package/dist/audio-room/index.ts

@@ -0,0 +1,16 @@
+export {
+  createAudioRoom,
+  getInitials,
+  orbColumns,
+  type AudioParticipant,
+  type AudioRoomAPI,
+} from './audio-room.js'
+
+export {
+  audioRoomVariants,
+  audioRoomOrbCellVariants,
+  speakingOrbVariants,
+  audioRoomNameLabelClass,
+  audioRoomMutedBadgeClass,
+  audioRoomHandBadgeClass,
+} from './audio-room.styles.js'

package/dist/call-controls/call-controls.styles.ts

@@ -0,0 +1,63 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Toolbar container — flex row, centred, with a card background and gap
+ * between the control buttons.
+ */
+export const callControlsVariants = cva({
+  base: [
+    'inline-flex items-center justify-center gap-2',
+    'rounded-xl bg-card px-4 py-3',
+    'shadow-sm border border-border',
+  ].join(' '),
+  variants: {
+    size: {
+      sm: 'gap-1.5 px-3 py-2',
+      md: 'gap-2 px-4 py-3',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * Individual call-control button.
+ *
+ * `tone` variants:
+ * - `default`     → neutral muted appearance (standard inactive controls)
+ * - `active`      → primary/highlighted (e.g. mic on, screen-share running)
+ * - `destructive` → red/danger (leave button or a muted mic indicator)
+ *
+ * `size` variants match the toolbar container.
+ */
+export const callControlButtonVariants = cva({
+  base: [
+    'inline-flex flex-col items-center justify-center rounded-full',
+    'font-medium transition-colors',
+    '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',
+    'cursor-pointer',
+  ].join(' '),
+  variants: {
+    size: {
+      sm: 'size-9 text-xs',
+      md: 'size-11 text-xs',
+    },
+    tone: {
+      default: 'bg-muted text-foreground hover:bg-muted/80',
+      active: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      destructive:
+        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    tone: 'default',
+  },
+})
+
+/** Label beneath the icon inside a call-control button. */
+export const callControlLabelClass =
+  'sr-only text-[10px] leading-none mt-0.5'

package/dist/call-controls/call-controls.ts

@@ -0,0 +1,79 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+/** Visual/semantic tone of a call control button. */
+export type CallControlTone = 'default' | 'active' | 'destructive'
+
+/**
+ * Toggleable state for controls like mic or camera.
+ * `'on'`  = currently active (mic/camera live).
+ * `'off'` = currently muted/disabled.
+ */
+export type CallControlState = 'on' | 'off'
+
+/**
+ * A single control descriptor used by adapters to drive button rendering.
+ */
+export interface CallControlItem {
+  /** Unique identifier for this control. */
+  id: string
+  /** Visible label (also used as aria-label). */
+  label: string
+  /** Optional icon to render inside the button. */
+  icon?: string
+  /** Explicit tone override; when omitted `controlTone` is used with `state`. */
+  tone?: CallControlTone
+  /** Toggleable state (present only for toggleable controls). */
+  pressed?: boolean
+}
+
+export interface CallControlsProps {
+  /** Controls to render. */
+  controls?: CallControlItem[]
+}
+
+export interface CallControlsAPI {
+  /** ARIA attributes to spread on the toolbar element (`role="toolbar"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Derive the visual tone for a control given its kind and current toggle state.
+ *
+ * Convention used by easyloops meeting toolbar:
+ * - `leave` / `end`  → always `'destructive'`
+ * - any control that is `'off'` (muted/stopped) → `'destructive'` to signal
+ *   the user that something is disabled (e.g. mic muted = red indicator).
+ * - a control that is `'on'` → `'active'` (lit up / highlighted).
+ * - otherwise → `'default'` (neutral).
+ */
+export function controlTone(
+  kind: string,
+  state: CallControlState | undefined,
+): CallControlTone {
+  const normalised = kind.toLowerCase()
+  if (normalised === 'leave' || normalised === 'end') return 'destructive'
+  if (state === 'off') return 'destructive'
+  if (state === 'on') return 'active'
+  return 'default'
+}
+
+/**
+ * Build the framework-agnostic toolbar props for a call-controls bar.
+ *
+ * Returns `role="toolbar"` plus `aria-label="Call controls"` and data
+ * attributes; adapters spread these onto their container element.
+ */
+export function createCallControls(_props: CallControlsProps = {}): CallControlsAPI {
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'toolbar',
+    'aria-label': 'Call controls',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'call-controls',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/call-controls/index.ts

@@ -0,0 +1,15 @@
+export {
+  controlTone,
+  createCallControls,
+  type CallControlTone,
+  type CallControlState,
+  type CallControlItem,
+  type CallControlsProps,
+  type CallControlsAPI,
+} from './call-controls.js'
+
+export {
+  callControlsVariants,
+  callControlButtonVariants,
+  callControlLabelClass,
+} from './call-controls.styles.js'

package/dist/checklist/checklist.styles.ts

@@ -0,0 +1,76 @@
+import { cva } from '../shared/index.ts'
+
+/** Outer container that wraps the list and optional progress summary. */
+export const checklistContainerClass = 'flex flex-col gap-2'
+
+/** The `role="list"` element holding all item rows. */
+export const checklistListClass = 'flex flex-col gap-1'
+
+/**
+ * A single item row — a button with checkbox semantics.
+ *
+ * The `checked` variant applies muted text and a line-through on the label
+ * to communicate completion without relying solely on the checkbox visual.
+ */
+export const checklistItemVariants = cva({
+  base: [
+    'flex items-start gap-3 rounded-md px-2 py-2 text-left',
+    'transition-colors hover:bg-accent',
+    '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(' '),
+  variants: {
+    checked: {
+      true: 'text-muted-foreground',
+      false: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+  },
+})
+
+/**
+ * The visual checkbox box (the square indicator beside the label).
+ *
+ * The `checked` variant fills the box with the primary colour and shows a
+ * checkmark via a border trick; the unchecked state shows an empty border.
+ */
+export const checklistBoxVariants = cva({
+  base: [
+    'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded',
+    'border transition-colors',
+  ].join(' '),
+  variants: {
+    checked: {
+      true: 'border-primary bg-primary text-primary-foreground',
+      false: 'border-input bg-background',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+  },
+})
+
+/** Wrapper for label + optional description text. */
+export const checklistLabelWrapClass = 'flex flex-col gap-0.5 min-w-0'
+
+/** The item's primary label. Strikethrough is applied when the item is checked. */
+export const checklistLabelVariants = cva({
+  base: 'text-sm font-medium leading-none transition-colors',
+  variants: {
+    checked: {
+      true: 'line-through text-muted-foreground',
+      false: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+  },
+})
+
+/** Optional description — always in muted text, smaller than the label. */
+export const checklistDescriptionClass = 'text-xs text-muted-foreground'
+
+/** Progress summary line shown below the list when `showProgress` is true. */
+export const checklistProgressClass = 'text-xs text-muted-foreground tabular-nums'

package/dist/checklist/checklist.ts

@@ -0,0 +1,62 @@
+/** A single item in a checklist. */
+export interface ChecklistItemData {
+  /** Unique identifier for this item. */
+  id: string
+  /** Display label for the item. */
+  label: string
+  /** Whether the item is completed. */
+  checked?: boolean
+  /** Optional additional description text. */
+  description?: string
+}
+
+export interface ChecklistAPI {
+  /** ARIA attributes to spread on the list container (`role="list"`). */
+  ariaProps: { role: 'list' }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic container props for a checklist.
+ *
+ * Returns `role="list"` plus a `data-component` attribute. Adapters spread
+ * these onto their container element.
+ */
+export function createChecklist(): ChecklistAPI {
+  return {
+    ariaProps: { role: 'list' },
+    dataAttributes: { 'data-component': 'checklist' },
+  }
+}
+
+/**
+ * Compute progress statistics for a checklist.
+ *
+ * Pure function — does not mutate the array.
+ */
+export function checklistProgress(items: ChecklistItemData[]): {
+  completed: number
+  total: number
+  fraction: number
+} {
+  const total = items.length
+  const completed = items.filter((item) => item.checked).length
+  const fraction = total === 0 ? 0 : completed / total
+  return { completed, total, fraction }
+}
+
+/**
+ * Toggle a single item's `checked` state by id.
+ *
+ * Pure — returns a new array; the original is not mutated.
+ * Items whose id does not match are returned unchanged (same reference).
+ */
+export function toggleChecklistItem(
+  items: ChecklistItemData[],
+  id: string,
+): ChecklistItemData[] {
+  return items.map((item) =>
+    item.id === id ? { ...item, checked: !item.checked } : item,
+  )
+}

package/dist/checklist/index.ts

@@ -0,0 +1,18 @@
+export {
+  createChecklist,
+  checklistProgress,
+  toggleChecklistItem,
+  type ChecklistItemData,
+  type ChecklistAPI,
+} from './checklist.js'
+
+export {
+  checklistContainerClass,
+  checklistListClass,
+  checklistItemVariants,
+  checklistBoxVariants,
+  checklistLabelWrapClass,
+  checklistLabelVariants,
+  checklistDescriptionClass,
+  checklistProgressClass,
+} from './checklist.styles.js'

package/dist/editor-status-bar/editor-status-bar.styles.ts

@@ -0,0 +1,40 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * The outer bar — a thin, full-width strip that sits at the bottom of an IDE
+ * pane. Uses a monospace font stack so numeric values (line, col) don't shift
+ * width as they update.
+ */
+export const editorStatusBarVariants = cva({
+  base: [
+    'flex items-center justify-between',
+    'w-full h-6 px-2 gap-4',
+    'text-xs font-mono',
+    'bg-muted text-muted-foreground',
+    'border-t border-border',
+    'select-none',
+  ].join(' '),
+  variants: {},
+  defaultVariants: {},
+})
+
+/** The left or right group that holds a cluster of segments. */
+export const statusBarGroupClass = 'flex items-center gap-3 overflow-hidden'
+
+/**
+ * A single segment pill. The `tone` variant maps to semantic token classes so
+ * adapters never inline colour values.
+ */
+export const statusBarSegmentVariants = cva({
+  base: 'inline-flex items-center whitespace-nowrap truncate leading-none',
+  variants: {
+    tone: {
+      default: 'text-muted-foreground',
+      muted: 'text-muted-foreground/60',
+      accent: 'text-primary',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+})