@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/audience-feature-card/audience-feature-card.ts

@@ -0,0 +1,39 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface AudienceFeatureCardProps {
+  /** Kicker text displayed above the title (e.g. "For teams"). */
+  kicker?: string
+  /** Main title — required. */
+  title: string
+  /** Body copy. */
+  body: string
+  /** Footer content (optional). */
+  footer?: string
+}
+
+export interface AudienceFeatureCardAPI {
+  /** ARIA attributes to spread on the group element (`role="group"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for an audience feature card.
+ *
+ * Returns `role="group"` plus data attributes; adapters spread these onto
+ * their container and render the kicker, title, body, and footer slots.
+ */
+export function createAudienceFeatureCard(
+  _props: Partial<AudienceFeatureCardProps> = {},
+): AudienceFeatureCardAPI {
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'audience-feature-card',
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/audience-feature-card/index.ts

@@ -0,0 +1,13 @@
+export {
+  createAudienceFeatureCard,
+  type AudienceFeatureCardProps,
+  type AudienceFeatureCardAPI,
+} from './audience-feature-card.js'
+
+export {
+  audienceFeatureCardVariants,
+  audienceFeatureCardKickerClass,
+  audienceFeatureCardTitleClass,
+  audienceFeatureCardBodyClass,
+  audienceFeatureCardFooterClass,
+} from './audience-feature-card.styles.js'

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/brand-network-cell/brand-network-cell.styles.ts

@@ -0,0 +1,46 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root card container. The `current` variant adds the primary ring that signals
+ * "You are here". Background and border come from semantic tokens so the card
+ * works in both light and dark themes without callers touching class names.
+ */
+export const brandNetworkCellVariants = cva({
+  base: [
+    'relative rounded-xl border border-border bg-card p-4',
+    'flex flex-col gap-3 transition-shadow',
+  ].join(' '),
+  variants: {
+    current: {
+      true: 'ring-1 ring-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    current: 'false',
+  },
+})
+
+/**
+ * Square glyph box — the brand monogram or icon.
+ * Background and text colour are caller-provided via inline `style` (brand
+ * tints vary per product); this class only controls geometry and typography.
+ */
+export const brandNetworkCellGlyphClass =
+  'flex size-10 items-center justify-center rounded-lg text-sm font-bold'
+
+/** Domain / product name row. */
+export const brandNetworkCellDomainClass = 'font-semibold text-foreground'
+
+/**
+ * "You are here" badge shown beside the domain when `current` is true.
+ * Uses semantic token colours so it inherits the active theme automatically.
+ */
+export const brandNetworkCellCurrentBadgeClass =
+  'inline-flex items-center rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary'
+
+/** Supporting body text below the domain. */
+export const brandNetworkCellBodyClass = 'text-sm text-muted-foreground'
+
+/** Inline link row rendered at the bottom of the card. */
+export const brandNetworkCellLinkClass = 'text-sm text-primary'

package/dist/brand-network-cell/brand-network-cell.ts

@@ -0,0 +1,35 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export interface BrandNetworkCellProps {
+  /** Whether this cell represents the current/active product in the network. */
+  current?: boolean
+}
+
+export interface BrandNetworkCellAPI {
+  /** ARIA attributes to spread on the group element (`role="group"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for a brand network card.
+ *
+ * Returns `role="group"` plus a `data-current` attribute so adapters and
+ * consumers can style the "You are here" state without coupling to class names.
+ */
+export function createBrandNetworkCell(
+  props: BrandNetworkCellProps = {},
+): BrandNetworkCellAPI {
+  const { current = false } = props
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-current': String(current),
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/brand-network-cell/index.ts

@@ -0,0 +1,14 @@
+export {
+  createBrandNetworkCell,
+  type BrandNetworkCellProps,
+  type BrandNetworkCellAPI,
+} from './brand-network-cell.js'
+
+export {
+  brandNetworkCellVariants,
+  brandNetworkCellGlyphClass,
+  brandNetworkCellDomainClass,
+  brandNetworkCellCurrentBadgeClass,
+  brandNetworkCellBodyClass,
+  brandNetworkCellLinkClass,
+} from './brand-network-cell.styles.js'

package/dist/browser-chrome-mock/browser-chrome-mock.styles.ts

@@ -0,0 +1,43 @@
+import { cva } from '../shared/index.ts'
+
+/** Outer frame wrapping the chrome bar and content. */
+export const browserChromeMockVariants = cva({
+  base: 'rounded-xl border border-border overflow-hidden bg-card',
+  variants: {},
+  defaultVariants: {},
+})
+
+/** The chrome toolbar row containing dots, URL bar, and optional badge. */
+export const chromeBarClass =
+  'flex items-center gap-2 bg-muted/40 border-b border-border px-3 py-2'
+
+/** A single traffic-light dot. */
+export const trafficDotClass = 'size-2.5 rounded-full border border-border'
+
+/** Centered URL bar. */
+export const urlBarClass = 'flex-1 text-center font-mono text-[11px] text-muted-foreground'
+
+/** Bold domain segment inside the URL bar. */
+export const urlDomainClass = 'font-semibold text-foreground'
+
+/**
+ * Status badge shown in the chrome bar.
+ *
+ * live  → emerald tint (approved exception to semantic tokens)
+ * rec   → destructive tint with a pulsing dot
+ */
+export const statusBadgeVariants = cva({
+  base: 'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide',
+  variants: {
+    status: {
+      live: 'text-emerald-500 bg-emerald-500/10',
+      rec: 'text-destructive bg-destructive/10',
+    },
+  },
+  defaultVariants: {
+    status: 'live',
+  },
+})
+
+/** Inner content area that receives slotted/children content. */
+export const contentAreaClass = 'p-0'

package/dist/browser-chrome-mock/browser-chrome-mock.ts

@@ -0,0 +1,52 @@
+/** Recording or live stream status for the browser chrome mock. */
+export type BrowserChromeStatus = 'live' | 'rec'
+
+export interface BrowserChromeMockProps {
+  /** URL to display in the address bar. */
+  url: string
+  /** Optional status badge shown in the chrome bar. */
+  status?: BrowserChromeStatus
+}
+
+export interface BrowserChromeMockAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: { role: 'group'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/** Split a URL into bold domain and normal path segments. */
+export function splitUrl(url: string): { domain: string; path: string } {
+  const slashIndex = url.indexOf('/')
+  if (slashIndex === -1) {
+    return { domain: url, path: '' }
+  }
+  return {
+    domain: url.slice(0, slashIndex),
+    path: url.slice(slashIndex),
+  }
+}
+
+/**
+ * Build the framework-agnostic props for a BrowserChromeMock.
+ *
+ * Returns a `role="group"` aria label plus optional `data-status` so adapters
+ * can hook CSS without duplicating logic.
+ */
+export function createBrowserChromeMock(
+  props: Pick<BrowserChromeMockProps, 'status'> = {},
+): BrowserChromeMockAPI {
+  const { status } = props
+
+  const ariaProps = {
+    role: 'group' as const,
+    'aria-label': 'Browser preview',
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (status !== undefined) {
+    dataAttributes['data-status'] = status
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/browser-chrome-mock/index.ts

@@ -0,0 +1,17 @@
+export {
+  createBrowserChromeMock,
+  splitUrl,
+  type BrowserChromeStatus,
+  type BrowserChromeMockProps,
+  type BrowserChromeMockAPI,
+} from './browser-chrome-mock.js'
+
+export {
+  browserChromeMockVariants,
+  chromeBarClass,
+  trafficDotClass,
+  urlBarClass,
+  urlDomainClass,
+  statusBadgeVariants,
+  contentAreaClass,
+} from './browser-chrome-mock.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'