@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/segmented-control/segmented-control.ts

@@ -0,0 +1,80 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type SegmentedControlSize = 'sm' | 'md'
+
+/** Value identifying a single segment. */
+export type SegmentedControlValue = string
+
+export interface SegmentedControlProps {
+  /** Currently selected segment value (controlled). */
+  value?: SegmentedControlValue
+  /** Visual size of the control. */
+  size?: SegmentedControlSize
+}
+
+export interface SegmentedControlAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for a segmented control.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these
+ * onto their group element and handle their own rendering/state.
+ */
+export function createSegmentedControl(
+  props: SegmentedControlProps = {},
+): SegmentedControlAPI {
+  const { value, size = 'md' } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'radiogroup',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-size': size,
+  }
+  if (value !== undefined) {
+    dataAttributes['data-value'] = value
+  }
+
+  return { ariaProps, dataAttributes }
+}
+
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Given the current index, the pressed key, and the item count, returns the
+ * index that focus/selection should move to. Arrow keys wrap; Home/End jump
+ * to the ends. Unhandled keys (or an empty group) return `current` unchanged.
+ *
+ * - ArrowRight / ArrowDown → next (wraps to 0 past the end)
+ * - ArrowLeft  / ArrowUp   → previous (wraps to last before 0)
+ * - Home                   → first
+ * - End                    → last
+ */
+export function getNextSegmentIndex(
+  current: number,
+  key: string,
+  count: number,
+): number {
+  if (count <= 0) return current
+
+  switch (key) {
+    case 'ArrowRight':
+    case 'ArrowDown':
+      return (current + 1) % count
+    case 'ArrowLeft':
+    case 'ArrowUp':
+      return (current - 1 + count) % count
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return current
+  }
+}

package/dist/separator/index.ts

@@ -0,0 +1,12 @@
+export {
+  createSeparator,
+  type SeparatorOrientation,
+  type SeparatorProps,
+  type SeparatorAPI,
+} from './separator.js'
+
+export {
+  separatorVariants,
+  separatorLineClass,
+  separatorLabelClass,
+} from './separator.styles.js'

package/dist/separator/separator.styles.ts

@@ -0,0 +1,34 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Visual variants for the separator rule.
+ *
+ * - `orientation: horizontal` → a full-width 1px line.
+ * - `orientation: vertical` → a full-height 1px line.
+ * - `labeled` → flex layout used by the labeled-divider variant, which
+ *   arranges a centered label between two flanking lines.
+ */
+export const separatorVariants = cva({
+  base: '',
+  variants: {
+    orientation: {
+      horizontal: 'h-px w-full bg-border',
+      vertical: 'w-px h-full bg-border',
+    },
+    labeled: {
+      true: 'flex items-center',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    labeled: 'false',
+  },
+})
+
+/** Class for each flanking line in the labeled-divider variant. */
+export const separatorLineClass = 'h-px flex-1 bg-border'
+
+/** Class for the centered label in the labeled-divider variant. */
+export const separatorLabelClass =
+  'px-3 text-xs uppercase tracking-wide text-muted-foreground'

package/dist/separator/separator.ts

@@ -0,0 +1,53 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type SeparatorOrientation = 'horizontal' | 'vertical'
+
+export interface SeparatorProps {
+  /** Orientation of the separator. Defaults to `'horizontal'`. */
+  orientation?: SeparatorOrientation
+  /**
+   * When `true` (the default) the separator is purely visual and is hidden
+   * from assistive tech (`role="none"`). When `false` it is exposed as a
+   * semantic `role="separator"` with the appropriate `aria-orientation`.
+   */
+  decorative?: boolean
+}
+
+/**
+ * ARIA attributes for a separator. Extends the shared base with
+ * `aria-orientation`, which is specific to the `separator` role.
+ */
+export interface SeparatorAriaProps extends Partial<AccessibilityProps> {
+  'aria-orientation'?: SeparatorOrientation
+}
+
+export interface SeparatorAPI {
+  /** ARIA attributes to spread on the element. */
+  ariaProps: SeparatorAriaProps
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Headless separator core — computes ARIA semantics and data attributes for
+ * a separator rule. JSX-free so it can be shared across framework adapters.
+ *
+ * Per ARIA, a decorative separator must not be announced (`role="none"`),
+ * while a semantic one exposes `role="separator"` and `aria-orientation`.
+ */
+export function createSeparator(props: SeparatorProps = {}): SeparatorAPI {
+  const { orientation = 'horizontal', decorative = true } = props
+
+  const ariaProps: SeparatorAriaProps = decorative
+    ? { role: 'none' }
+    : { role: 'separator', 'aria-orientation': orientation }
+
+  const dataAttributes: Record<string, string> = {
+    'data-orientation': orientation,
+  }
+
+  return {
+    ariaProps,
+    dataAttributes,
+  }
+}

package/dist/social-auth-button/index.ts

@@ -0,0 +1,14 @@
+export {
+  createSocialAuthButton,
+  PROVIDER_LABELS,
+  PROVIDER_MONO,
+  type SocialProvider,
+  type SocialAuthButtonProps,
+  type SocialAuthButtonAPI,
+} from './social-auth-button.js'
+
+export {
+  socialAuthButtonVariants,
+  socialAuthRowVariants,
+  lastUsedBadgeVariants,
+} from './social-auth-button.styles.js'

package/dist/social-auth-button/social-auth-button.styles.ts

@@ -0,0 +1,16 @@
+import { cva } from '../shared/index.ts'
+
+/** Wrapper around an individual social auth button (positions the lastUsed badge). */
+export const socialAuthButtonVariants = cva({
+  base: 'relative',
+})
+
+/** Responsive grid wrapper: one column on mobile, two columns from `sm` up. */
+export const socialAuthRowVariants = cva({
+  base: 'grid grid-cols-1 sm:grid-cols-2 gap-3',
+})
+
+/** Floating "Last used" badge anchored to the top-right of a button. */
+export const lastUsedBadgeVariants = cva({
+  base: 'absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-1.5',
+})

package/dist/social-auth-button/social-auth-button.ts

@@ -0,0 +1,51 @@
+export type SocialProvider = 'google' | 'github' | 'microsoft' | 'apple'
+
+/** "Continue with …" label shown on each provider's button. */
+export const PROVIDER_LABELS: Record<SocialProvider, string> = {
+  google: 'Continue with Google',
+  github: 'Continue with GitHub',
+  microsoft: 'Continue with Microsoft',
+  apple: 'Continue with Apple',
+}
+
+/**
+ * Which providers render their brand mark monochrome (currentColor). GitHub and
+ * Apple are monochrome by design so they read correctly on dark/outline
+ * surfaces; Google and Microsoft keep their full brand color.
+ */
+export const PROVIDER_MONO: Record<SocialProvider, boolean> = {
+  google: false,
+  github: true,
+  microsoft: false,
+  apple: true,
+}
+
+export interface SocialAuthButtonProps {
+  /** Identity provider this button authenticates against. */
+  provider: SocialProvider
+}
+
+export interface SocialAuthButtonAPI {
+  /** Data attributes for CSS styling hooks. */
+  dataAttributes: Record<string, string>
+  /** "Continue with …" label for the provider. */
+  label: string
+  /** Whether the brand mark should render monochrome. */
+  mono: boolean
+}
+
+/**
+ * Framework-agnostic core for a social sign-in button. Returns the provider
+ * label, monochrome hint, and the `data-provider` styling hook. No React/JSX.
+ */
+export function createSocialAuthButton(
+  props: SocialAuthButtonProps,
+): SocialAuthButtonAPI {
+  const { provider } = props
+
+  return {
+    dataAttributes: { 'data-provider': provider },
+    label: PROVIDER_LABELS[provider],
+    mono: PROVIDER_MONO[provider],
+  }
+}

package/dist/sticky-note/index.ts

@@ -0,0 +1,14 @@
+export {
+  STICKY_NOTE_COLORS,
+  nextStickyColor,
+  createStickyNote,
+  type StickyNoteColor,
+  type CreateStickyNoteOptions,
+  type StickyNoteAPI,
+} from './sticky-note.js'
+
+export {
+  stickyNoteVariants,
+  stickyNoteTextClass,
+  stickyNoteAuthorClass,
+} from './sticky-note.styles.js'

package/dist/sticky-note/sticky-note.styles.ts

@@ -0,0 +1,37 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Note container with color variant.
+ *
+ * Sticky notes are intrinsically colorful — an approved exception to the
+ * semantic-token-only rule. Each color maps to a soft tint background with a
+ * readable dark text.
+ */
+export const stickyNoteVariants = cva({
+  base: [
+    'relative inline-flex flex-col gap-2 rounded-md p-4',
+    'shadow-md',
+    'min-w-[160px] min-h-[120px]',
+  ].join(' '),
+  variants: {
+    color: {
+      yellow: 'bg-yellow-100 text-yellow-900',
+      pink: 'bg-pink-100 text-pink-900',
+      blue: 'bg-blue-100 text-blue-900',
+      green: 'bg-green-100 text-green-900',
+      purple: 'bg-purple-100 text-purple-900',
+      orange: 'bg-orange-100 text-orange-900',
+    },
+  },
+  defaultVariants: {
+    color: 'yellow',
+  },
+})
+
+/** Class for the editable/static text area inside the note. */
+export const stickyNoteTextClass =
+  'flex-1 w-full resize-none bg-transparent text-sm leading-relaxed placeholder:opacity-60 outline-none'
+
+/** Class for the author chip rendered in the note footer. */
+export const stickyNoteAuthorClass =
+  'mt-auto text-xs font-medium opacity-70 truncate'

package/dist/sticky-note/sticky-note.ts

@@ -0,0 +1,47 @@
+/** The available color variants for a sticky note. */
+export type StickyNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple' | 'orange'
+
+/** Ordered list of all sticky note colors — used for cycling and iteration. */
+export const STICKY_NOTE_COLORS: StickyNoteColor[] = [
+  'yellow',
+  'pink',
+  'blue',
+  'green',
+  'purple',
+  'orange',
+]
+
+/**
+ * Returns the next color in the cycle. Wraps from the last color back to the
+ * first. Useful for "add note" flows that auto-assign colors in sequence.
+ */
+export function nextStickyColor(color: StickyNoteColor): StickyNoteColor {
+  const index = STICKY_NOTE_COLORS.indexOf(color)
+  const next = (index + 1) % STICKY_NOTE_COLORS.length
+  return STICKY_NOTE_COLORS[next]
+}
+
+export interface CreateStickyNoteOptions {
+  /** Color of the note. */
+  color: StickyNoteColor
+}
+
+export interface StickyNoteAPI {
+  /** Data attributes for styling hooks; spread onto the note container. */
+  dataAttributes: { 'data-color': StickyNoteColor }
+  /** ARIA props for the note container. */
+  ariaProps: { role: 'group' }
+}
+
+/**
+ * Build the framework-agnostic props for a sticky note container.
+ *
+ * Returns `role="group"` plus the `data-color` attribute that adapters use
+ * as a styling hook. Logic is pure and SSR-safe — no Math.random, no Date.
+ */
+export function createStickyNote(options: CreateStickyNoteOptions): StickyNoteAPI {
+  return {
+    dataAttributes: { 'data-color': options.color },
+    ariaProps: { role: 'group' },
+  }
+}

package/dist/terminal/index.ts

@@ -0,0 +1,13 @@
+export {
+  formatPrompt,
+  createTerminal,
+  type TerminalLineKind,
+  type TerminalLine,
+  type TerminalAPI,
+} from './terminal.js'
+
+export {
+  terminalVariants,
+  terminalLineVariants,
+  terminalPromptClass,
+} from './terminal.styles.js'

package/dist/terminal/terminal.styles.ts

@@ -0,0 +1,56 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * The outer scroll container — a dark monospaced surface that houses all
+ * terminal lines. Uses semantic card tokens so it inherits the active theme.
+ */
+export const terminalVariants = cva({
+  base: [
+    'relative rounded-lg border border-border bg-card font-mono text-sm',
+    'overflow-y-auto overflow-x-auto',
+    'p-4 space-y-0.5',
+  ].join(' '),
+  variants: {
+    maxHeight: {
+      sm: 'max-h-48',
+      md: 'max-h-80',
+      lg: 'max-h-[32rem]',
+      none: '',
+    },
+  },
+  defaultVariants: {
+    maxHeight: 'md',
+  },
+})
+
+/**
+ * A single terminal line. The `kind` variant maps each semantic category to
+ * the appropriate semantic token class — no raw color values inline.
+ */
+export const terminalLineVariants = cva({
+  base: 'block whitespace-pre-wrap break-all leading-relaxed',
+  variants: {
+    kind: {
+      /** The user-typed command: full foreground, bold weight. */
+      command: 'text-foreground font-semibold',
+      /** Normal program output. */
+      stdout: 'text-foreground',
+      /** Error / stderr output — uses the destructive semantic token. */
+      stderr: 'text-destructive',
+      /** Informational summary lines — muted, visually de-emphasised. */
+      info: 'text-muted-foreground',
+      /**
+       * Success / passing lines — green-family.
+       * Maps to `text-emerald-500` via the Tailwind semantic alias used
+       * across the design system; downstream themes can override this token.
+       */
+      success: 'text-emerald-500 dark:text-emerald-400',
+    },
+  },
+  defaultVariants: {
+    kind: 'stdout',
+  },
+})
+
+/** The prompt symbol (`$`, `❯`, …) preceding a command line. */
+export const terminalPromptClass = 'select-none mr-2 text-muted-foreground'

package/dist/terminal/terminal.ts

@@ -0,0 +1,60 @@
+/** The semantic kind of a terminal output line. */
+export type TerminalLineKind = 'command' | 'stdout' | 'stderr' | 'info' | 'success'
+
+/** A single line displayed in the terminal output panel. */
+export interface TerminalLine {
+  /** Optional stable key for list rendering. */
+  id?: string
+  /** Semantic kind — drives styling and screen-reader announcements. */
+  kind: TerminalLineKind
+  /** Text content of the line. */
+  text: string
+}
+
+export interface TerminalAPI {
+  /**
+   * ARIA attributes to spread on the terminal container element.
+   * - `role="log"` semantics: assistive technologies announce appended content.
+   * - `aria-live="polite"` so new output does not interrupt the user mid-action.
+   */
+  ariaProps: {
+    role: 'log'
+    'aria-live': 'polite'
+    'aria-label'?: string
+  }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the prompt string shown before a command line.
+ *
+ * @param promptSymbol - The shell prompt character(s), e.g. `'$'` or `'❯'`.
+ * @param command - The command text that follows the prompt.
+ * @returns The formatted prompt string, e.g. `'$ python solution.py'`.
+ */
+export function formatPrompt(promptSymbol: string, command: string): string {
+  return `${promptSymbol} ${command}`
+}
+
+/**
+ * Build the framework-agnostic ARIA and data props for a terminal output panel.
+ *
+ * Returns `role="log"` (live region semantics for streaming output) plus data
+ * attributes; adapters spread these onto their scroll container.
+ */
+export function createTerminal(options: { label?: string } = {}): TerminalAPI {
+  const ariaProps: TerminalAPI['ariaProps'] = {
+    role: 'log',
+    'aria-live': 'polite',
+  }
+  if (options.label) {
+    ariaProps['aria-label'] = options.label
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'terminal',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/test-results/index.ts

@@ -0,0 +1,19 @@
+export {
+  summarizeTests,
+  createTestResults,
+  type TestStatus,
+  type TestResultData,
+  type TestSummary,
+  type TestResultsAPI,
+} from './test-results.js'
+
+export {
+  testResultsContainerVariants,
+  testResultsSummaryVariants,
+  testRowVariants,
+  testStatusBadgeVariants,
+  testNameClass,
+  testDurationClass,
+  testDiffBlockVariants,
+  testMessageClass,
+} from './test-results.styles.js'

package/dist/test-results/test-results.styles.ts

@@ -0,0 +1,93 @@
+import { cva } from '../shared/index.ts'
+
+/** Outer container that wraps the summary bar and the test row list. */
+export const testResultsContainerVariants = cva({
+  base: 'flex flex-col gap-3 w-full',
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * Summary bar ("2 / 3 passed").
+ *
+ * The `outcome` variant maps to a semantic color token so the bar turns green
+ * when everything passes, red when there are failures.
+ */
+export const testResultsSummaryVariants = cva({
+  base: [
+    'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium',
+    'border',
+  ].join(' '),
+  variants: {
+    outcome: {
+      pass: 'border-success/30 bg-success/10 text-success',
+      fail: 'border-destructive/30 bg-destructive/10 text-destructive',
+      skip: 'border-muted/30 bg-muted/10 text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    outcome: 'pass',
+  },
+})
+
+/** A single test row in the list. */
+export const testRowVariants = cva({
+  base: [
+    'flex flex-col gap-1.5 rounded-md border px-3 py-2.5 text-sm',
+  ].join(' '),
+  variants: {
+    status: {
+      pass: 'border-success/20 bg-success/5',
+      fail: 'border-destructive/20 bg-destructive/5',
+      skip: 'border-muted/20 bg-muted/5',
+    },
+  },
+  defaultVariants: {
+    status: 'pass',
+  },
+})
+
+/** Status icon / badge inside a test row (the PASS / FAIL / SKIP pill). */
+export const testStatusBadgeVariants = cva({
+  base: 'inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold uppercase tracking-wide',
+  variants: {
+    status: {
+      pass: 'bg-success/20 text-success',
+      fail: 'bg-destructive/20 text-destructive',
+      skip: 'bg-muted text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    status: 'pass',
+  },
+})
+
+/** Test name text inside a row. */
+export const testNameClass = 'font-medium text-foreground'
+
+/** Duration text ("12 ms") inside a row. */
+export const testDurationClass = 'text-xs text-muted-foreground'
+
+/**
+ * Expected / actual diff block shown beneath a failing test row.
+ *
+ * The `side` variant sets the left-border accent color to distinguish the two
+ * sides of the diff.
+ */
+export const testDiffBlockVariants = cva({
+  base: [
+    'rounded border-l-2 bg-muted/30 px-3 py-2 font-mono text-xs text-foreground',
+  ].join(' '),
+  variants: {
+    side: {
+      expected: 'border-l-success text-success',
+      actual: 'border-l-destructive text-destructive',
+    },
+  },
+  defaultVariants: {
+    side: 'actual',
+  },
+})
+
+/** Error / skip message text beneath a test row. */
+export const testMessageClass = 'text-xs text-muted-foreground italic'