@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/pre-call-lobby/pre-call-lobby.styles.ts

@@ -0,0 +1,108 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Outer lobby card — a centered panel that holds all preflight controls.
+ */
+export const preCallLobbyVariants = cva({
+  base: [
+    'flex flex-col gap-6 rounded-2xl border border-border bg-card p-6 shadow-sm',
+    'w-full max-w-lg mx-auto',
+  ].join(' '),
+  variants: {},
+  defaultVariants: {},
+})
+
+/**
+ * Camera preview area. The `camera` variant switches between the live preview
+ * slot and an avatar / placeholder shown when the camera is off.
+ */
+export const preCallCameraVariants = cva({
+  base: [
+    'relative flex items-center justify-center overflow-hidden rounded-xl',
+    'aspect-video w-full bg-muted',
+  ].join(' '),
+  variants: {
+    camera: {
+      on: '',
+      off: 'bg-muted',
+    },
+  },
+  defaultVariants: {
+    camera: 'on',
+  },
+})
+
+/** Placeholder shown inside the camera area when the camera is off. */
+export const preCallCameraPlaceholderClass = [
+  'flex flex-col items-center justify-center gap-2',
+  'text-muted-foreground select-none',
+].join(' ')
+
+/** Row that holds the label and the <select> for a device picker. */
+export const preCallDeviceRowClass = 'flex flex-col gap-1'
+
+/** Label text above a device picker. */
+export const preCallDeviceLabelClass = 'text-xs font-medium text-muted-foreground'
+
+/** The <select> element used for device selection. */
+export const preCallDeviceSelectClass = [
+  'flex h-9 w-full rounded-md border border-input bg-background px-3 py-1',
+  'text-sm text-foreground shadow-sm',
+  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ')
+
+/**
+ * Mic level meter container. Renders a row of bars.
+ */
+export const preCallMicMeterClass = 'flex items-end gap-0.5 h-5'
+
+/**
+ * An individual bar in the mic level meter.
+ * The `lit` variant distinguishes active (lit) from inactive bars.
+ */
+export const preCallMicBarVariants = cva({
+  base: 'w-1.5 rounded-sm transition-colors',
+  variants: {
+    lit: {
+      true: 'bg-primary',
+      false: 'bg-muted-foreground/30',
+    },
+  },
+  defaultVariants: {
+    lit: 'false',
+  },
+})
+
+/** Row holding the camera-toggle and mic-toggle buttons. */
+export const preCallControlsRowClass = 'flex items-center gap-3'
+
+/**
+ * Toggle button for camera or microphone.
+ * The `active` variant styles the enabled vs disabled states.
+ */
+export const preCallToggleVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-full p-2.5',
+    'transition-colors focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-ring focus-visible:ring-offset-2',
+  ].join(' '),
+  variants: {
+    active: {
+      true: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      false: 'bg-destructive/10 text-destructive hover:bg-destructive/20',
+    },
+  },
+  defaultVariants: {
+    active: 'false',
+  },
+})
+
+/** Primary "Join" button. */
+export const preCallJoinButtonClass = [
+  'inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5',
+  'bg-primary text-primary-foreground text-sm font-semibold',
+  'shadow transition-colors hover:bg-primary/90',
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+  'disabled:pointer-events-none disabled:opacity-50',
+].join(' ')

package/dist/pre-call-lobby/pre-call-lobby.ts

@@ -0,0 +1,61 @@
+/** A single selectable media device (camera, microphone, or speaker). */
+export interface MediaDeviceOption {
+  id: string
+  label: string
+}
+
+/** The kind of media device. */
+export type DeviceKind = 'camera' | 'microphone' | 'speaker'
+
+export interface PreCallLobbyProps {
+  /** Whether the camera is currently enabled. */
+  cameraOn: boolean
+  /** Whether the microphone is currently enabled. */
+  micOn: boolean
+}
+
+export interface PreCallLobbyAPI {
+  /** ARIA attributes to spread on the group element. */
+  ariaProps: { role: 'group'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: { 'data-camera': string; 'data-mic': string }
+}
+
+/**
+ * Build the framework-agnostic group props for a pre-call lobby / device-check panel.
+ *
+ * Returns `role="group"` plus data attributes reflecting camera and mic state.
+ * Adapters spread these onto their container and render the device pickers,
+ * preview, and join button themselves.
+ */
+export function createPreCallLobby(props: PreCallLobbyProps): PreCallLobbyAPI {
+  const { cameraOn, micOn } = props
+
+  return {
+    ariaProps: {
+      role: 'group',
+      'aria-label': 'Device setup',
+    },
+    dataAttributes: {
+      'data-camera': cameraOn ? 'on' : 'off',
+      'data-mic': micOn ? 'on' : 'off',
+    },
+  }
+}
+
+/**
+ * Convert a microphone level (0..1) to a count of lit bars.
+ *
+ * Pure function — no side effects, no JSX. Adapters use this to render
+ * the mic level meter by iterating `0..barCount` and lighting bars up to
+ * the returned value.
+ *
+ * @param level    Current mic level in the range [0, 1].
+ * @param barCount Total number of bars in the meter.
+ * @returns        Number of bars that should appear "lit" (0..barCount).
+ */
+export function micLevelToBars(level: number, barCount: number): number {
+  if (barCount <= 0) return 0
+  const clamped = Math.min(1, Math.max(0, level))
+  return Math.round(clamped * barCount)
+}

package/dist/radial-gauge/index.ts

@@ -0,0 +1,26 @@
+export {
+  clampValue,
+  valueToFraction,
+  polarToCartesian,
+  describeArc,
+  gaugeStrokeDashoffset,
+  resolveZoneTone,
+  createRadialGauge,
+  GAUGE_SIZE_PX,
+  type GaugeSize,
+  type GaugeTone,
+  type GaugeZone,
+  type RadialGaugeProps,
+  type RadialGaugeAPI,
+} from './radial-gauge.js'
+
+export {
+  radialGaugeRootVariants,
+  gaugeTrackClass,
+  gaugeArcClass,
+  gaugeArcToneVariants,
+  gaugeLabelClass,
+  gaugeSublabelClass,
+  GAUGE_LABEL_FONT_SIZE,
+  GAUGE_SUBLABEL_FONT_SIZE,
+} from './radial-gauge.styles.js'

package/dist/radial-gauge/radial-gauge.styles.ts

@@ -0,0 +1,75 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root SVG element variants — controls the rendered size via an inline
+ * width/height (adapters use GAUGE_SIZE_PX) and sets up the color context.
+ */
+export const radialGaugeRootVariants = cva({
+  base: 'inline-block shrink-0',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * Track (background) circle stroke class.
+ * Uses a muted foreground so it sits behind the value arc without competing.
+ */
+export const gaugeTrackClass = 'fill-none stroke-muted-foreground/20'
+
+/**
+ * Value arc stroke class — resolved per tone via {@link gaugeArcToneVariants}.
+ * `currentColor` stroke picks up the Tailwind text-* class applied by the
+ * tone variant so we only need one class-generating helper.
+ */
+export const gaugeArcClass = 'fill-none stroke-current transition-[stroke-dashoffset] duration-300 ease-out'
+
+/**
+ * Tone variants for the value arc.  Adapters combine this with `gaugeArcClass`.
+ */
+export const gaugeArcToneVariants = cva({
+  base: '',
+  variants: {
+    tone: {
+      default: 'text-foreground',
+      success: 'text-emerald-500',
+      warning: 'text-amber-500',
+      danger: 'text-destructive',
+    },
+  },
+  defaultVariants: {
+    tone: 'default',
+  },
+})
+
+/** Center label (primary text) classes. */
+export const gaugeLabelClass = 'fill-foreground text-center font-semibold'
+
+/** Center sub-label (secondary text) classes. */
+export const gaugeSublabelClass = 'fill-muted-foreground'
+
+/**
+ * Font size for the primary label by size variant.
+ * Expressed as SVG `font-size` values (px) for use in the `<text>` element.
+ */
+export const GAUGE_LABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 14,
+  md: 20,
+  lg: 26,
+}
+
+/**
+ * Font size for the sub-label by size variant.
+ */
+export const GAUGE_SUBLABEL_FONT_SIZE: Record<'sm' | 'md' | 'lg', number> = {
+  sm: 9,
+  md: 11,
+  lg: 13,
+}

package/dist/radial-gauge/radial-gauge.ts

@@ -0,0 +1,183 @@
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/** The visual size of the gauge. */
+export type GaugeSize = 'sm' | 'md' | 'lg'
+
+/** Tone mapped to a zone range. */
+export type GaugeTone = 'default' | 'success' | 'warning' | 'danger'
+
+/**
+ * A threshold zone that applies a semantic tone when the gauge value falls
+ * at or below `upTo`. Zones should be listed in ascending `upTo` order; the
+ * first zone whose `upTo >= value` wins.
+ */
+export interface GaugeZone {
+  /** Value up to (and including) which this zone applies. */
+  upTo: number
+  /** Semantic tone for the arc while the value is in this zone. */
+  tone: GaugeTone
+}
+
+export interface RadialGaugeProps {
+  /** Current gauge value. */
+  value: number
+  /** Minimum possible value. */
+  min?: number
+  /** Maximum possible value. */
+  max?: number
+  /** Visual size. */
+  size?: GaugeSize
+}
+
+export interface RadialGaugeAPI {
+  /** ARIA attributes to spread on the SVG element (`role="meter"`). */
+  ariaProps: Record<string, string | number>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+// ---------------------------------------------------------------------------
+// Pixel diameters for each size variant (exported for use in adapters)
+// ---------------------------------------------------------------------------
+export const GAUGE_SIZE_PX: Record<GaugeSize, number> = {
+  sm: 80,
+  md: 120,
+  lg: 160,
+}
+
+// ---------------------------------------------------------------------------
+// Pure geometry helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Clamp `value` to the inclusive range `[min, max]`.
+ */
+export function clampValue(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+/**
+ * Map a `value` within `[min, max]` to a fraction in `[0, 1]`.
+ * Returns 0 when `min === max` to avoid division by zero.
+ */
+export function valueToFraction(value: number, min: number, max: number): number {
+  if (max === min) return 0
+  return clampValue((value - min) / (max - min), 0, 1)
+}
+
+/**
+ * Convert polar coordinates to Cartesian.
+ * `angleDeg` is measured clockwise from the positive x-axis (SVG convention).
+ */
+export function polarToCartesian(
+  cx: number,
+  cy: number,
+  r: number,
+  angleDeg: number,
+): { x: number; y: number } {
+  const rad = ((angleDeg - 90) * Math.PI) / 180
+  return {
+    x: cx + r * Math.cos(rad),
+    y: cy + r * Math.sin(rad),
+  }
+}
+
+/**
+ * Build an SVG arc path `d` string from `startAngleDeg` to `endAngleDeg`
+ * (both measured clockwise from the top / 12-o'clock position).
+ *
+ * Returns an empty string when the arc span is zero.
+ */
+export function describeArc(
+  cx: number,
+  cy: number,
+  r: number,
+  startAngleDeg: number,
+  endAngleDeg: number,
+): string {
+  const span = endAngleDeg - startAngleDeg
+  if (span === 0) return ''
+
+  // For a full circle we need two arcs to avoid SVG treating start === end as
+  // a no-op.  Shift the end by 0.001° so the path stays valid.
+  const clampedEnd = span >= 360 ? startAngleDeg + 359.999 : endAngleDeg
+
+  const start = polarToCartesian(cx, cy, r, startAngleDeg)
+  const end = polarToCartesian(cx, cy, r, clampedEnd)
+  const largeArc = clampedEnd - startAngleDeg > 180 ? 1 : 0
+
+  return [
+    `M ${start.x} ${start.y}`,
+    `A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y}`,
+  ].join(' ')
+}
+
+/**
+ * Compute the `stroke-dashoffset` for a full-circle ring gauge.
+ *
+ * With `stroke-dasharray="circumference circumference"` and this offset, the
+ * visible portion of the stroke equals `fraction × circumference`.
+ */
+export function gaugeStrokeDashoffset(fraction: number, circumference: number): number {
+  return circumference * (1 - fraction)
+}
+
+// ---------------------------------------------------------------------------
+// Zone resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Find the active zone tone for the current `value`.
+ * Zones are tested in ascending `upTo` order; the first zone whose
+ * `upTo >= value` wins. Falls back to `'default'` when no zone matches.
+ */
+export function resolveZoneTone(
+  value: number,
+  zones: GaugeZone[],
+  _max: number,
+): GaugeTone {
+  if (!zones || zones.length === 0) return 'default'
+
+  // Sort a copy ascending by upTo so callers don't have to pre-sort.
+  const sorted = [...zones].sort((a, b) => a.upTo - b.upTo)
+
+  for (const zone of sorted) {
+    if (value <= zone.upTo) return zone.tone
+  }
+
+  // Value is above all zone thresholds — use the last zone's tone.
+  return sorted[sorted.length - 1].tone
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Build the framework-agnostic props for a radial gauge element.
+ *
+ * Returns `role="meter"` plus ARIA value attributes and data attributes;
+ * adapters spread these onto their `<svg>` element.
+ */
+export function createRadialGauge(props: RadialGaugeProps): RadialGaugeAPI {
+  const { value, min = 0, max = 100, size = 'md' } = props
+
+  const clamped = clampValue(value, min, max)
+
+  const ariaProps: Record<string, string | number> = {
+    role: 'meter',
+    'aria-valuenow': clamped,
+    'aria-valuemin': min,
+    'aria-valuemax': max,
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-size': size,
+    'data-value': String(clamped),
+  }
+
+  return { ariaProps, dataAttributes }
+}

package/dist/rating-scale/index.ts

@@ -0,0 +1,16 @@
+export {
+  createRatingScale,
+  resolveRatingPoints,
+  getNextRatingIndex,
+  type RatingScaleSize,
+  type RatingScalePoint,
+  type RatingScaleProps,
+  type RatingScaleAPI,
+} from './rating-scale.js'
+
+export {
+  ratingScaleVariants,
+  ratingScaleTrackClass,
+  ratingScaleItemVariants,
+  ratingScaleLabelClass,
+} from './rating-scale.styles.js'

package/dist/rating-scale/rating-scale.styles.ts

@@ -0,0 +1,48 @@
+import { cva } from '../shared/index.ts'
+
+/** Container row that holds the points plus optional end labels. */
+export const ratingScaleVariants = cva({
+  base: 'inline-flex items-center gap-3',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/** Row of point buttons (the scale itself, between the end labels). */
+export const ratingScaleTrackClass = 'inline-flex items-center gap-1.5'
+
+/**
+ * A single point button. The `state` variant carries the selected vs unselected
+ * treatment so adapters never inline these classes.
+ */
+export const ratingScaleItemVariants = cva({
+  base: [
+    'inline-flex items-center justify-center rounded-md border font-medium tabular-nums',
+    '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',
+  ].join(' '),
+  variants: {
+    size: {
+      sm: 'size-8 text-xs',
+      md: 'size-10 text-sm',
+    },
+    state: {
+      checked: 'border-primary bg-primary text-primary-foreground',
+      unchecked: 'border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    state: 'unchecked',
+  },
+})
+
+/** End-label text flanking the scale (e.g. "Never seen this" / "Could write it"). */
+export const ratingScaleLabelClass = 'text-xs text-muted-foreground'

package/dist/rating-scale/rating-scale.ts

@@ -0,0 +1,101 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+/** Visual size of a rating scale. */
+export type RatingScaleSize = 'sm' | 'md'
+
+/** A single selectable point on the scale (1-indexed value + accessible label). */
+export interface RatingScalePoint {
+  /** The value this point represents. */
+  value: number
+  /** Accessible label for the point (falls back to the value). */
+  label?: string
+}
+
+export interface RatingScaleProps {
+  /** Currently selected value (controlled). */
+  value?: number
+  /** Number of points on the scale. Ignored when {@link points} is given. */
+  count?: number
+  /** Visual size. */
+  size?: RatingScaleSize
+}
+
+export interface RatingScaleAPI {
+  /** ARIA attributes to spread on the group element (`role="radiogroup"`). */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic group props for a rating / Likert scale.
+ *
+ * Returns `role="radiogroup"` plus data attributes; adapters spread these onto
+ * their container and render the points themselves. A rating scale is a
+ * single-select control with radio semantics, like a segmented control, but
+ * tuned for ordinal self-rating (e.g. a 1–5 Likert prompt with end labels).
+ */
+export function createRatingScale(props: RatingScaleProps = {}): RatingScaleAPI {
+  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'] = String(value)
+  }
+
+  return { ariaProps, dataAttributes }
+}
+
+/**
+ * Resolve the list of points for a scale from either an explicit list or a
+ * `count` (producing `1..count`). The single source of truth shared by every
+ * adapter so a `count={5}` scale renders identical points everywhere.
+ */
+export function resolveRatingPoints(
+  points: RatingScalePoint[] | undefined,
+  count = 5,
+): RatingScalePoint[] {
+  if (points && points.length > 0) return points
+  return Array.from({ length: Math.max(0, count) }, (_, i) => ({ value: i + 1 }))
+}
+
+/**
+ * Pure keyboard-navigation rule shared by every adapter.
+ *
+ * Unlike a wrapping segmented control, an ordinal rating scale **clamps** at
+ * the ends (you can't wrap from "5 — strongly agree" back to "1"). Home/End
+ * jump to the extremes; unhandled keys return `current` unchanged.
+ *
+ * - ArrowRight / ArrowUp   → next (clamped to last)
+ * - ArrowLeft  / ArrowDown → previous (clamped to first)
+ * - Home                   → first
+ * - End                    → last
+ */
+export function getNextRatingIndex(
+  current: number,
+  key: string,
+  count: number,
+): number {
+  if (count <= 0) return current
+
+  switch (key) {
+    case 'ArrowRight':
+    case 'ArrowUp':
+      return Math.min(current + 1, count - 1)
+    case 'ArrowLeft':
+    case 'ArrowDown':
+      return Math.max(current - 1, 0)
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return current
+  }
+}

package/dist/segmented-control/index.ts

@@ -0,0 +1,13 @@
+export {
+  createSegmentedControl,
+  getNextSegmentIndex,
+  type SegmentedControlSize,
+  type SegmentedControlValue,
+  type SegmentedControlProps,
+  type SegmentedControlAPI,
+} from './segmented-control.js'
+
+export {
+  segmentedControlVariants,
+  segmentedControlItemVariants,
+} from './segmented-control.styles.js'

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

@@ -0,0 +1,42 @@
+import { cva } from '../shared/index.ts'
+
+/** Pill-shaped container that holds the segments (`role="radiogroup"`). */
+export const segmentedControlVariants = cva({
+  base: 'inline-flex items-center gap-1 rounded-lg bg-muted p-1',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+/**
+ * A single segment (`role="radio"`). The `state` variant carries the
+ * active vs inactive visual treatment so adapters never inline these classes.
+ */
+export const segmentedControlItemVariants = cva({
+  base: [
+    'inline-flex items-center justify-center gap-1.5 rounded-md font-medium',
+    'whitespace-nowrap transition-colors',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    'focus-visible:ring-offset-2 focus-visible:ring-offset-muted',
+  ].join(' '),
+  variants: {
+    size: {
+      sm: 'px-2.5 py-1 text-xs',
+      md: 'px-3 py-1.5 text-sm',
+    },
+    state: {
+      checked: 'bg-background text-foreground shadow-sm',
+      unchecked: 'text-muted-foreground hover:text-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    state: 'unchecked',
+  },
+})