@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/astro-terminal/Terminal.astro

@@ -0,0 +1,67 @@
+---
+import {
+  createTerminal,
+  formatPrompt,
+  terminalVariants,
+  terminalLineVariants,
+  terminalPromptClass,
+  type TerminalLine,
+} from '../terminal/index.ts'
+import { cn } from '../shared/index.ts'
+
+type TerminalMaxHeight = 'sm' | 'md' | 'lg' | 'none'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Lines to render in order. Each line's `kind` determines its styling. */
+  lines: TerminalLine[]
+  /**
+   * Prompt symbol prepended to `command` lines.
+   * @default '$'
+   */
+  promptSymbol?: string
+  /**
+   * Maximum height of the scroll region before it becomes scrollable.
+   * @default 'md'
+   */
+  maxHeight?: TerminalMaxHeight
+  /** Accessible label for the live region. */
+  'aria-label'?: string
+}
+
+const {
+  lines,
+  promptSymbol = '$',
+  maxHeight = 'md',
+  'aria-label': ariaLabel,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createTerminal({ label: ariaLabel })
+---
+
+<div
+  class={cn(terminalVariants({ maxHeight }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    lines.map((line, index) => {
+      const lineClass = terminalLineVariants({ kind: line.kind })
+      if (line.kind === 'command') {
+        return (
+          <span key={line.id ?? index} class={lineClass}>
+            <span class={terminalPromptClass}>{promptSymbol}</span>
+            {line.text}
+          </span>
+        )
+      }
+      return (
+        <span key={line.id ?? index} class={lineClass}>
+          {line.text}
+        </span>
+      )
+    })
+  }
+</div>

package/dist/astro-terminal/index.ts

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

package/dist/astro-test-results/TestResults.astro

@@ -0,0 +1,76 @@
+---
+import {
+  summarizeTests,
+  createTestResults,
+  testResultsContainerVariants,
+  testResultsSummaryVariants,
+  testRowVariants,
+  testStatusBadgeVariants,
+  testNameClass,
+  testDurationClass,
+  testDiffBlockVariants,
+  testMessageClass,
+  type TestResultData,
+} from '../test-results/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Array of test case results to display. */
+  results: TestResultData[]
+  /** When true, renders a summary bar showing "{passed}/{total} passed". */
+  showSummary?: boolean
+}
+
+const { results, showSummary = true, class: className, ...rest } = Astro.props
+
+const summary = summarizeTests(results)
+const { ariaProps, dataAttributes } = createTestResults()
+const summaryOutcome = summary.failed > 0 ? 'fail' : summary.skipped > 0 ? 'skip' : 'pass'
+---
+
+<div class={cn(testResultsContainerVariants(), className)} {...dataAttributes} {...rest}>
+  {showSummary && results.length > 0 && (
+    <div class={testResultsSummaryVariants({ outcome: summaryOutcome })} aria-live="polite">
+      <span>{summary.passed}/{summary.total} passed</span>
+      {summary.failed > 0 && <span>· {summary.failed} failed</span>}
+      {summary.skipped > 0 && <span>· {summary.skipped} skipped</span>}
+    </div>
+  )}
+
+  <ul {...ariaProps} class="flex flex-col gap-2">
+    {
+      results.map((result) => (
+        <li role="listitem" class={testRowVariants({ status: result.status })}>
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2 min-w-0">
+              <span class={testStatusBadgeVariants({ status: result.status })}>
+                {result.status}
+              </span>
+              <span class={cn(testNameClass, 'truncate')}>{result.name}</span>
+            </div>
+            {result.durationMs !== undefined && (
+              <span class={testDurationClass}>{result.durationMs} ms</span>
+            )}
+          </div>
+
+          {result.status === 'fail' && result.expected !== undefined && (
+            <div class="flex flex-col gap-1 mt-1">
+              <div class={testDiffBlockVariants({ side: 'expected' })}>
+                <span class="opacity-60 mr-1 select-none">expected</span>
+                {result.expected}
+              </div>
+              {result.actual !== undefined && (
+                <div class={testDiffBlockVariants({ side: 'actual' })}>
+                  <span class="opacity-60 mr-1 select-none">actual</span>
+                  {result.actual}
+                </div>
+              )}
+            </div>
+          )}
+
+          {result.message && <p class={testMessageClass}>{result.message}</p>}
+        </li>
+      ))
+    }
+  </ul>
+</div>

package/dist/astro-test-results/index.ts

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

package/dist/astro-timeline/Timeline.astro

@@ -0,0 +1,59 @@
+---
+import {
+  createTimeline,
+  resolveTimelineItems,
+  timelineVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineConnectorVariants,
+  timelineGutterClass,
+  timelineTimeClass,
+  timelineTitleClass,
+  timelineDescriptionClass,
+  timelineContentClass,
+  type TimelineOrientation,
+  type TimelineItemData,
+} from '../timeline/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Ordered list of events to render. */
+  items: TimelineItemData[]
+  /** Layout direction. Defaults to `'vertical'`. */
+  orientation?: TimelineOrientation
+}
+
+const {
+  items,
+  orientation = 'vertical',
+  class: className,
+  ...rest
+} = Astro.props
+
+const resolved = resolveTimelineItems(items)
+const { ariaProps, dataAttributes } = createTimeline({ orientation })
+---
+
+<ul class={cn(timelineVariants({ orientation }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    resolved.map((item, index) => {
+      const isLast = index === resolved.length - 1
+      return (
+        <li role="listitem" class={timelineItemVariants({ orientation })} data-status={item.status}>
+          {/* Gutter: marker + connector */}
+          <div class={timelineGutterClass}>
+            <div class={timelineMarkerVariants({ status: item.status })} />
+            {!isLast && <div class={timelineConnectorVariants({ orientation })} />}
+          </div>
+
+          {/* Content */}
+          <div class={timelineContentClass}>
+            {item.time && <span class={timelineTimeClass}>{item.time}</span>}
+            <span class={timelineTitleClass}>{item.title}</span>
+            {item.description && <p class={timelineDescriptionClass}>{item.description}</p>}
+          </div>
+        </li>
+      )
+    })
+  }
+</ul>

package/dist/astro-timeline/index.ts

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

package/dist/astro-video-grid/VideoGrid.astro

@@ -0,0 +1,182 @@
+---
+import {
+  createVideoGrid,
+  computeGridColumns,
+  videoGridVariants,
+  videoGridSpotlightClass,
+  videoGridFilmstripClass,
+  videoGridFilmstripTileClass,
+  type VideoGridLayout,
+} from '../video-grid/index.ts'
+import { getInitials, type VideoTileData } from '../video-tile/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** List of participant data to render as tiles. */
+  participants: VideoTileData[]
+  /**
+   * Grid layout mode.
+   * - 'auto'    — grid unless ≤1 participant (falls back to speaker)
+   * - 'grid'    — always uniform CSS grid
+   * - 'speaker' — spotlight for `spotlightId` (or first participant) + filmstrip
+   */
+  layout?: VideoGridLayout
+  /**
+   * Participant `id` to spotlight in speaker view.
+   * Falls back to the first participant when omitted.
+   */
+  spotlightId?: string
+}
+
+const {
+  participants,
+  layout = 'auto',
+  spotlightId,
+  class: className,
+  style,
+  ...rest
+} = Astro.props
+
+const count = participants.length
+
+// Resolve effective layout: 'auto' with ≤1 participant shows speaker view.
+const effectiveLayout: VideoGridLayout =
+  layout === 'auto' ? (count <= 1 ? 'speaker' : 'grid') : layout
+
+const { ariaProps, dataAttributes } = createVideoGrid({ layout: effectiveLayout })
+const columns = computeGridColumns(count)
+
+const gridStyle =
+  effectiveLayout !== 'speaker'
+    ? `grid-template-columns: repeat(${columns}, 1fr);${style ? ` ${style}` : ''}`
+    : (style as string | undefined)
+
+const spotlightParticipant =
+  effectiveLayout === 'speaker'
+    ? (participants.find((p) => p.id === spotlightId) ?? participants[0])
+    : undefined
+
+const filmstrip =
+  effectiveLayout === 'speaker'
+    ? participants.filter((p) => p.id !== spotlightParticipant?.id)
+    : []
+
+// Inline tile helper — renders VideoTile markup without importing the .astro
+// file (which may not be built yet in a parallel-build context). When
+// astro-video-tile ships its own VideoTile.astro, replace this with:
+//   import VideoTile from '../astro-video-tile/src/VideoTile.astro.ts'
+function renderTileAttrs(p: VideoTileData): Record<string, string> {
+  const speaking = p.speaking ?? false
+  const pinned = p.pinned ?? false
+  return {
+    role: 'group',
+    'data-speaking': speaking ? 'true' : 'false',
+    'data-pinned': pinned ? 'true' : 'false',
+  }
+}
+---
+
+{effectiveLayout === 'speaker' ? (
+  <div
+    class={cn(videoGridVariants({ layout: 'speaker' }), className)}
+    style={style as string | undefined}
+    {...ariaProps}
+    {...dataAttributes}
+    {...rest}
+  >
+    {spotlightParticipant && (
+      <div class={videoGridSpotlightClass}>
+        {/* Inline VideoTile markup for the spotlight participant */}
+        <div
+          {...renderTileAttrs(spotlightParticipant)}
+          class="relative flex h-full w-full flex-col items-center justify-center bg-muted rounded-xl overflow-hidden"
+          aria-label={spotlightParticipant.name}
+        >
+          {spotlightParticipant.avatarUrl ? (
+            <img
+              src={spotlightParticipant.avatarUrl}
+              alt={spotlightParticipant.name}
+              class="h-full w-full object-cover"
+            />
+          ) : (
+            <span class="flex h-20 w-20 items-center justify-center rounded-full bg-primary text-3xl font-semibold text-primary-foreground">
+              {getInitials(spotlightParticipant.name)}
+            </span>
+          )}
+          <div class="absolute bottom-2 left-2 flex items-center gap-1 rounded-md bg-black/60 px-2 py-0.5 text-xs text-white">
+            {(spotlightParticipant.micState ?? 'on') === 'muted' && (
+              <span aria-label="Muted" role="img">🔇</span>
+            )}
+            <span>{spotlightParticipant.name}</span>
+          </div>
+        </div>
+      </div>
+    )}
+
+    {filmstrip.length > 0 && (
+      <div class={videoGridFilmstripClass}>
+        {filmstrip.map((p) => (
+          <div class={videoGridFilmstripTileClass}>
+            <div
+              {...renderTileAttrs(p)}
+              class="relative flex h-24 flex-col items-center justify-center bg-muted rounded-lg overflow-hidden"
+              aria-label={p.name}
+            >
+              {p.avatarUrl ? (
+                <img
+                  src={p.avatarUrl}
+                  alt={p.name}
+                  class="h-full w-full object-cover"
+                />
+              ) : (
+                <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
+                  {getInitials(p.name)}
+                </span>
+              )}
+              <div class="absolute bottom-1 left-1 flex items-center gap-0.5 rounded bg-black/60 px-1 py-0.5 text-[10px] text-white">
+                {(p.micState ?? 'on') === 'muted' && (
+                  <span aria-label="Muted" role="img">🔇</span>
+                )}
+                <span>{p.name}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )}
+  </div>
+) : (
+  <div
+    class={cn(videoGridVariants({ layout: effectiveLayout }), className)}
+    style={gridStyle}
+    {...ariaProps}
+    {...dataAttributes}
+    {...rest}
+  >
+    {participants.map((p) => (
+      <div
+        {...renderTileAttrs(p)}
+        class="relative flex flex-col items-center justify-center bg-muted rounded-xl overflow-hidden aspect-video"
+        aria-label={p.name}
+      >
+        {p.avatarUrl ? (
+          <img
+            src={p.avatarUrl}
+            alt={p.name}
+            class="h-full w-full object-cover"
+          />
+        ) : (
+          <span class="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-xl font-semibold text-primary-foreground">
+            {getInitials(p.name)}
+          </span>
+        )}
+        <div class="absolute bottom-2 left-2 flex items-center gap-1 rounded-md bg-black/60 px-2 py-0.5 text-xs text-white">
+          {(p.micState ?? 'on') === 'muted' && (
+            <span aria-label="Muted" role="img">🔇</span>
+          )}
+          <span>{p.name}</span>
+        </div>
+      </div>
+    ))}
+  </div>
+)}

package/dist/astro-video-grid/index.ts

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

package/dist/astro-video-tile/VideoTile.astro

@@ -0,0 +1,104 @@
+---
+import {
+  createVideoTile,
+  getInitials,
+  videoTileVariants,
+  videoTileNameChipClass,
+  videoTileMicIconClass,
+  videoTileAvatarFallbackClass,
+  videoTileAvatarCircleClass,
+  videoTileReactionBadgeClass,
+  type VideoTileMicState,
+} from '../video-tile/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Participant display name — shown in the name chip and used for initials. */
+  name: string
+  /** Current microphone state. Defaults to 'on'. */
+  micState?: VideoTileMicState
+  /** Whether the participant is actively speaking. Adds an emerald ring. */
+  speaking?: boolean
+  /** Whether the tile is pinned in the grid. Adds a primary ring. */
+  pinned?: boolean
+  /** URL of the participant's avatar image, used in the fallback circle. */
+  avatarUrl?: string
+}
+
+const {
+  name,
+  micState = 'on',
+  speaking = false,
+  pinned = false,
+  avatarUrl,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createVideoTile({ speaking, pinned })
+const initials = getInitials(name)
+const isMuted = micState === 'muted'
+const hasDefaultSlot = Astro.slots.has('default')
+---
+
+<div
+  class={cn(
+    videoTileVariants({
+      speaking: speaking ? 'true' : 'false',
+      pinned: pinned ? 'true' : 'false',
+    }),
+    className,
+  )}
+  aria-label={name}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {hasDefaultSlot ? (
+    <!-- Media slot fills the tile -->
+    <div class="absolute inset-0 h-full w-full">
+      <slot />
+    </div>
+  ) : avatarUrl ? (
+    <!-- Avatar image fallback -->
+    <div class={videoTileAvatarFallbackClass}>
+      <img src={avatarUrl} alt={name} class={videoTileAvatarCircleClass} />
+    </div>
+  ) : (
+    <!-- Initials fallback -->
+    <div class={videoTileAvatarFallbackClass}>
+      <div class={videoTileAvatarCircleClass} aria-hidden="true">{initials}</div>
+    </div>
+  )}
+
+  {/* Reaction badge (top-right) — via named slot */}
+  <slot name="reaction" />
+
+  <!-- Name chip (bottom-left) -->
+  <div class={videoTileNameChipClass}>
+    <span>{name}</span>
+    {isMuted && (
+      <span class={videoTileMicIconClass} aria-label="Microphone muted">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <line x1="2" y1="2" x2="22" y2="22" />
+          <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+          <path d="M5 10v2a7 7 0 0 0 12 5" />
+          <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+          <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+          <line x1="12" y1="19" x2="12" y2="22" />
+        </svg>
+      </span>
+    )}
+  </div>
+</div>

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

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

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/audience-feature-card/audience-feature-card.styles.ts

@@ -0,0 +1,23 @@
+import { cva } from '../shared/index.ts'
+
+/** Container — full-height flex column so footers align across a row. */
+export const audienceFeatureCardVariants = cva({
+  base: 'flex h-full flex-col rounded-xl border border-border bg-card p-5',
+  variants: {},
+  defaultVariants: {},
+})
+
+/** Kicker text above the title. */
+export const audienceFeatureCardKickerClass =
+  'text-[10px] uppercase tracking-widest text-primary font-semibold'
+
+/** Main title. */
+export const audienceFeatureCardTitleClass =
+  'mt-2 text-lg font-bold text-foreground'
+
+/** Body copy. */
+export const audienceFeatureCardBodyClass =
+  'mt-1 text-sm text-muted-foreground leading-relaxed'
+
+/** Footer area — pushed to bottom via mt-auto. */
+export const audienceFeatureCardFooterClass = 'mt-auto pt-4 text-xs'