@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/mini-map/mini-map.ts

@@ -0,0 +1,122 @@
+/** A rectangle in 2-D space. */
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** A single item to be represented as a dot on the minimap. */
+export interface MiniMapItem {
+  id: string
+  x: number
+  y: number
+  width?: number
+  height?: number
+}
+
+export interface MiniMapAPI {
+  /** ARIA attributes to spread on the minimap container element. */
+  ariaProps: { role: 'img'; 'aria-label': string }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Compute the bounding box that encloses all items (using their x/y + optional
+ * width/height). Returns a zero-size rect at the origin when `items` is empty.
+ */
+export function contentBounds(items: MiniMapItem[]): Rect {
+  if (items.length === 0) return { x: 0, y: 0, width: 0, height: 0 }
+
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (const item of items) {
+    const right = item.x + (item.width ?? 0)
+    const bottom = item.y + (item.height ?? 0)
+    if (item.x < minX) minX = item.x
+    if (item.y < minY) minY = item.y
+    if (right > maxX) maxX = right
+    if (bottom > maxY) maxY = bottom
+  }
+
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY }
+}
+
+/**
+ * Compute the uniform scale factor that fits `contentRect` into the minimap
+ * box (after subtracting `padding` on each side). Returns 1 when the content
+ * has zero area (nothing to scale).
+ */
+export function miniScale(
+  contentRect: Rect,
+  miniW: number,
+  miniH: number,
+  padding = 8,
+): number {
+  const availW = miniW - padding * 2
+  const availH = miniH - padding * 2
+  if (availW <= 0 || availH <= 0) return 1
+  if (contentRect.width === 0 || contentRect.height === 0) return 1
+  return Math.min(availW / contentRect.width, availH / contentRect.height)
+}
+
+/**
+ * Map a world-space point `{ x, y }` to minimap pixel coordinates.
+ *
+ * @param point       World coordinate
+ * @param contentRect Bounding box of all content (from `contentBounds`)
+ * @param scale       Scale factor (from `miniScale`)
+ * @param padding     Padding inset in px (must match the value passed to `miniScale`)
+ */
+export function worldToMini(
+  point: { x: number; y: number },
+  contentRect: Rect,
+  scale: number,
+  padding = 8,
+): { x: number; y: number } {
+  return {
+    x: (point.x - contentRect.x) * scale + padding,
+    y: (point.y - contentRect.y) * scale + padding,
+  }
+}
+
+/**
+ * Compute the position and size of the viewport indicator rectangle in
+ * minimap coordinates, ready to be applied as CSS `left/top/width/height`.
+ */
+export function viewportRectInMini(
+  viewport: Rect,
+  contentRect: Rect,
+  scale: number,
+  padding = 8,
+): Rect {
+  const { x, y } = worldToMini(
+    { x: viewport.x, y: viewport.y },
+    contentRect,
+    scale,
+    padding,
+  )
+  return {
+    x,
+    y,
+    width: viewport.width * scale,
+    height: viewport.height * scale,
+  }
+}
+
+/**
+ * Build the framework-agnostic ARIA props for the minimap container.
+ *
+ * Every adapter spreads `ariaProps` onto its outermost element; `dataAttributes`
+ * are available for CSS hooks.
+ */
+export function createMiniMap(): MiniMapAPI {
+  return {
+    ariaProps: { role: 'img', 'aria-label': 'Minimap' },
+    dataAttributes: { 'data-component': 'mini-map' },
+  }
+}

package/dist/numbered-steps/index.ts

@@ -0,0 +1,16 @@
+export {
+  createNumberedSteps,
+  padOrdinal,
+  stepColumns,
+  type NumberedStepItem,
+  type NumberedStepsProps,
+  type NumberedStepsAPI,
+} from './numbered-steps.js'
+
+export {
+  numberedStepsVariants,
+  numberedStepsItemClass,
+  numberedStepsOrdinalClass,
+  numberedStepsTitleClass,
+  numberedStepsBodyClass,
+} from './numbered-steps.styles.js'

package/dist/numbered-steps/numbered-steps.styles.ts

@@ -0,0 +1,36 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Container grid for the numbered steps. The `columns` variant maps to a
+ * fixed Tailwind grid-cols class; adapters that need a dynamic column count
+ * use `gridTemplateColumns` inline style via {@link stepColumns} instead and
+ * omit this variant.
+ */
+export const numberedStepsVariants = cva({
+  base: 'grid gap-6',
+  variants: {
+    columns: {
+      '2': 'grid-cols-2',
+      '3': 'grid-cols-3',
+      '4': 'grid-cols-4',
+      '5': 'grid-cols-5',
+    },
+  },
+  defaultVariants: {
+    columns: '3',
+  },
+})
+
+/** Individual step card. */
+export const numberedStepsItemClass =
+  'rounded-xl border border-border bg-card p-5'
+
+/** Zero-padded ordinal badge above each step title. */
+export const numberedStepsOrdinalClass = 'font-mono text-sm text-primary'
+
+/** Step title. */
+export const numberedStepsTitleClass = 'mt-2 text-sm font-bold text-foreground'
+
+/** Step body copy. */
+export const numberedStepsBodyClass =
+  'mt-1 text-xs text-muted-foreground leading-relaxed'

package/dist/numbered-steps/numbered-steps.ts

@@ -0,0 +1,64 @@
+/** A single step item in the numbered steps grid. */
+export type NumberedStepItem = {
+  /** Step title displayed prominently below the ordinal badge. */
+  title: string
+  /** Step body copy displayed below the title. */
+  body: string
+}
+
+export interface NumberedStepsProps {
+  /** The step items to display. */
+  items: NumberedStepItem[]
+  /**
+   * Number of grid columns. When omitted, defaults to clamping the item count
+   * to the 2–5 range via {@link stepColumns}.
+   */
+  columns?: number
+}
+
+export interface NumberedStepsAPI {
+  /** ARIA attributes to spread on the container element (`role="list"`). */
+  ariaProps: { role: 'list' }
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Zero-pad a 1-indexed ordinal to at least two digits.
+ *
+ * @example
+ * padOrdinal(1)  // '01'
+ * padOrdinal(10) // '10'
+ */
+export function padOrdinal(n: number): string {
+  return String(n).padStart(2, '0')
+}
+
+/**
+ * Derive the number of grid columns from the item count.
+ * Clamps the count to the 2–5 range.
+ *
+ * @example
+ * stepColumns(3) // 3
+ * stepColumns(1) // 2
+ * stepColumns(6) // 5
+ */
+export function stepColumns(count: number): number {
+  return Math.min(5, Math.max(2, count))
+}
+
+/**
+ * Build the framework-agnostic container props for a numbered-steps grid.
+ *
+ * Returns `role="list"` plus data attributes; adapters spread these onto their
+ * container and render each step as a `role="listitem"`.
+ */
+export function createNumberedSteps(): NumberedStepsAPI {
+  const ariaProps = { role: 'list' } as const
+
+  const dataAttributes: Record<string, string> = {
+    'data-component': 'numbered-steps',
+  }
+
+  return { ariaProps, dataAttributes }
+}

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

@@ -0,0 +1,22 @@
+export {
+  createPreCallLobby,
+  micLevelToBars,
+  type MediaDeviceOption,
+  type DeviceKind,
+  type PreCallLobbyProps,
+  type PreCallLobbyAPI,
+} from './pre-call-lobby.js'
+
+export {
+  preCallLobbyVariants,
+  preCallCameraVariants,
+  preCallCameraPlaceholderClass,
+  preCallDeviceRowClass,
+  preCallDeviceLabelClass,
+  preCallDeviceSelectClass,
+  preCallMicMeterClass,
+  preCallMicBarVariants,
+  preCallControlsRowClass,
+  preCallToggleVariants,
+  preCallJoinButtonClass,
+} from './pre-call-lobby.styles.js'

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/pricing-card/index.ts

@@ -0,0 +1,19 @@
+export {
+  createPricingCard,
+  type PricingCtaVariant,
+  type PricingCardOptions,
+  type PricingCardAPI,
+} from './pricing-card.js'
+
+export {
+  pricingCardVariants,
+  pricingCardBadgeClass,
+  pricingCardNameClass,
+  pricingCardPriceClass,
+  pricingCardPeriodClass,
+  pricingCardDescriptionClass,
+  pricingCardFeatureListClass,
+  pricingCardFeatureRowClass,
+  pricingCardFeatureTickClass,
+  pricingCtaVariants,
+} from './pricing-card.styles.js'

package/dist/pricing-card/pricing-card.styles.ts

@@ -0,0 +1,71 @@
+import { cva } from '../shared/index.ts'
+
+/**
+ * Root pricing card container. The `featured` variant adds a primary-coloured
+ * ring to draw the eye to the recommended plan.
+ */
+export const pricingCardVariants = cva({
+  base: [
+    'relative flex flex-col rounded-2xl border border-border bg-card p-6',
+    'transition-shadow',
+  ].join(' '),
+  variants: {
+    featured: {
+      true: 'ring-1 ring-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    featured: 'false',
+  },
+})
+
+/** "Best value" / "Most popular" badge above the plan name. */
+export const pricingCardBadgeClass =
+  'mb-3 inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary'
+
+/** Plan name (e.g. "Pro", "Starter"). */
+export const pricingCardNameClass = 'text-lg font-bold text-foreground'
+
+/** Main price figure (e.g. "$29", "Free"). */
+export const pricingCardPriceClass = 'text-3xl font-bold text-foreground'
+
+/** Billing period or qualifier (e.g. "/ month", "forever"). */
+export const pricingCardPeriodClass = 'text-sm text-muted-foreground'
+
+/** Short marketing description beneath the price. */
+export const pricingCardDescriptionClass = 'text-sm text-muted-foreground'
+
+/** Unordered list of included features. */
+export const pricingCardFeatureListClass = 'flex flex-col gap-2'
+
+/** A single feature row — tick icon + text. */
+export const pricingCardFeatureRowClass = 'flex items-start gap-2 text-sm text-foreground'
+
+/** Inline check SVG rendered before each feature string. */
+export const pricingCardFeatureTickClass = 'mt-0.5 size-4 shrink-0 text-primary'
+
+/**
+ * CTA button/link that appears at the bottom of the card.
+ *
+ * `default` — filled primary style (call to action on featured plans).
+ * `outline` — bordered secondary style (for non-featured plans).
+ */
+export const pricingCtaVariants = cva({
+  base: [
+    'mt-auto inline-flex w-full items-center justify-center rounded-lg px-4 py-2',
+    'text-sm font-medium transition-colors',
+    '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(' '),
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      outline:
+        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})

package/dist/pricing-card/pricing-card.ts

@@ -0,0 +1,37 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+/** CTA button/link visual variant. */
+export type PricingCtaVariant = 'default' | 'outline'
+
+export interface PricingCardOptions {
+  /** Whether this card is highlighted as the featured / recommended plan. */
+  featured?: boolean
+}
+
+export interface PricingCardAPI {
+  /** ARIA props to spread on the card container. */
+  ariaProps: Partial<AccessibilityProps>
+  /** Data attributes for styling hooks and CSS selectors. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic props for a pricing plan card.
+ *
+ * Returns `role="group"` (semantically groups the plan's content without
+ * imposing listitem semantics on a standalone card) and a `data-featured`
+ * attribute that adapters can use for conditional ring/highlight styling.
+ */
+export function createPricingCard(options: PricingCardOptions = {}): PricingCardAPI {
+  const { featured = false } = options
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'group',
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-featured': String(featured),
+  }
+
+  return { ariaProps, dataAttributes }
+}

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,
+}