@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/astro-pre-call-lobby/PreCallLobby.astro

@@ -0,0 +1,202 @@
+---
+import {
+  createPreCallLobby,
+  micLevelToBars,
+  preCallLobbyVariants,
+  preCallCameraVariants,
+  preCallCameraPlaceholderClass,
+  preCallDeviceRowClass,
+  preCallDeviceLabelClass,
+  preCallDeviceSelectClass,
+  preCallMicMeterClass,
+  preCallMicBarVariants,
+  preCallControlsRowClass,
+  preCallToggleVariants,
+  preCallJoinButtonClass,
+  type MediaDeviceOption,
+} from '../pre-call-lobby/index.ts'
+import { cn } from '../shared/index.ts'
+
+const MIC_BAR_COUNT = 8
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Whether the camera is on. */
+  cameraOn?: boolean
+  /** Whether the microphone is on. */
+  micOn?: boolean
+  /** Current microphone level (0..1). */
+  micLevel?: number
+  /** Available cameras. */
+  cameras?: MediaDeviceOption[]
+  /** Available microphones. */
+  microphones?: MediaDeviceOption[]
+  /** Available speakers. */
+  speakers?: MediaDeviceOption[]
+  /** Currently selected camera id. */
+  selectedCamera?: string
+  /** Currently selected microphone id. */
+  selectedMicrophone?: string
+  /** Currently selected speaker id. */
+  selectedSpeaker?: string
+  /** Label for the join button. */
+  joinLabel?: string
+}
+
+const {
+  cameraOn = true,
+  micOn = true,
+  micLevel = 0,
+  cameras = [],
+  microphones = [],
+  speakers = [],
+  selectedCamera,
+  selectedMicrophone,
+  selectedSpeaker,
+  joinLabel = 'Join',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createPreCallLobby({ cameraOn, micOn })
+const litBars = micLevelToBars(micLevel, MIC_BAR_COUNT)
+---
+
+<div class={cn(preCallLobbyVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Camera preview -->
+  <div class={preCallCameraVariants({ camera: cameraOn ? 'on' : 'off' })}>
+    {cameraOn ? (
+      <slot name="preview">
+        <div class={preCallCameraPlaceholderClass}>
+          <span class="text-xs">No preview</span>
+        </div>
+      </slot>
+    ) : (
+      <div class={preCallCameraPlaceholderClass}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <line x1="2" y1="2" x2="22" y2="22" />
+        </svg>
+        <span class="text-xs">Camera is off</span>
+      </div>
+    )}
+  </div>
+
+  <!-- Mic level meter -->
+  <div class="flex items-center gap-2">
+    <span class="text-xs text-muted-foreground">Mic</span>
+    <div class={preCallMicMeterClass} aria-label={`Mic level: ${litBars} of ${MIC_BAR_COUNT}`}>
+      {Array.from({ length: MIC_BAR_COUNT }, (_, i) => {
+        const isLit = i < litBars
+        const heightClass = i < 2 ? 'h-2' : i < 4 ? 'h-3' : i < 6 ? 'h-4' : 'h-5'
+        return (
+          <div
+            class={`${preCallMicBarVariants({ lit: isLit ? 'true' : 'false' })} ${heightClass}`}
+            data-lit={isLit ? 'true' : 'false'}
+          />
+        )
+      })}
+    </div>
+  </div>
+
+  <!-- Device selectors -->
+  {cameras.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-camera-select" class={preCallDeviceLabelClass}>Camera</label>
+      <select id="pcl-camera-select" class={preCallDeviceSelectClass} value={selectedCamera}>
+        {cameras.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  {microphones.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-mic-select" class={preCallDeviceLabelClass}>Microphone</label>
+      <select id="pcl-mic-select" class={preCallDeviceSelectClass} value={selectedMicrophone}>
+        {microphones.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  {speakers.length > 0 && (
+    <div class={preCallDeviceRowClass}>
+      <label for="pcl-speaker-select" class={preCallDeviceLabelClass}>Speaker</label>
+      <select id="pcl-speaker-select" class={preCallDeviceSelectClass} value={selectedSpeaker}>
+        {speakers.map((d) => (
+          <option value={d.id}>{d.label}</option>
+        ))}
+      </select>
+    </div>
+  )}
+
+  <!-- Controls row -->
+  <div class={preCallControlsRowClass}>
+    <button
+      type="button"
+      aria-label={cameraOn ? 'Turn camera off' : 'Turn camera on'}
+      aria-pressed={cameraOn}
+      class={preCallToggleVariants({ active: cameraOn ? 'true' : 'false' })}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M23 7l-7 5 7 5V7z" />
+        <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+      </svg>
+    </button>
+
+    <button
+      type="button"
+      aria-label={micOn ? 'Mute microphone' : 'Unmute microphone'}
+      aria-pressed={micOn}
+      class={preCallToggleVariants({ active: micOn ? 'true' : 'false' })}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" />
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2" />
+        <line x1="12" y1="19" x2="12" y2="23" />
+        <line x1="8" y1="23" x2="16" y2="23" />
+      </svg>
+    </button>
+  </div>
+
+  <!-- Join button -->
+  <button type="button" class={preCallJoinButtonClass}>
+    {joinLabel}
+  </button>
+</div>

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

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

package/dist/astro-radial-gauge/RadialGauge.astro

@@ -0,0 +1,144 @@
+---
+import {
+  clampValue,
+  valueToFraction,
+  gaugeStrokeDashoffset,
+  resolveZoneTone,
+  createRadialGauge,
+  radialGaugeRootVariants,
+  gaugeTrackClass,
+  gaugeArcClass,
+  gaugeArcToneVariants,
+  gaugeLabelClass,
+  gaugeSublabelClass,
+  GAUGE_SIZE_PX,
+  GAUGE_LABEL_FONT_SIZE,
+  GAUGE_SUBLABEL_FONT_SIZE,
+  type GaugeSize,
+  type GaugeZone,
+} from '../radial-gauge/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.SVGAttributes {
+  /** Current value. */
+  value: number
+  /** Minimum value. Defaults to 0. */
+  min?: number
+  /** Maximum value. Defaults to 100. */
+  max?: number
+  /** Visual size of the gauge. Defaults to 'md'. */
+  size?: GaugeSize
+  /** Stroke thickness in px. Defaults to 8. */
+  thickness?: number
+  /** Primary center label. When omitted and `showValue` is true, the numeric value is shown. */
+  label?: string
+  /** Secondary label shown below the primary label. */
+  sublabel?: string
+  /**
+   * Threshold zones that colour the arc based on the current value.
+   * List in ascending `upTo` order for clarity (internally sorted).
+   */
+  zones?: GaugeZone[]
+  /** Show the numeric value in the center when no explicit label is given. Defaults to true. */
+  showValue?: boolean
+}
+
+const {
+  value,
+  min = 0,
+  max = 100,
+  size = 'md',
+  thickness = 8,
+  label,
+  sublabel,
+  zones,
+  showValue = true,
+  class: className,
+  ...rest
+} = Astro.props
+
+const diameter = GAUGE_SIZE_PX[size]
+const cx = diameter / 2
+const cy = diameter / 2
+const r = cx - thickness / 2
+
+const clamped = clampValue(value, min, max)
+const fraction = valueToFraction(clamped, min, max)
+
+const circumference = 2 * Math.PI * r
+const dashoffset = gaugeStrokeDashoffset(fraction, circumference)
+
+const tone = zones && zones.length > 0 ? resolveZoneTone(clamped, zones, max) : 'default'
+
+const { ariaProps, dataAttributes } = createRadialGauge({ value, min, max, size })
+
+const centerLabel = label ?? (showValue ? String(clamped) : null)
+const labelFontSize = GAUGE_LABEL_FONT_SIZE[size]
+const sublabelFontSize = GAUGE_SUBLABEL_FONT_SIZE[size]
+const labelDy = sublabel ? -sublabelFontSize * 0.8 : 0
+---
+
+<svg
+  width={diameter}
+  height={diameter}
+  viewBox={`0 0 ${diameter} ${diameter}`}
+  role="meter"
+  aria-valuenow={ariaProps['aria-valuenow']}
+  aria-valuemin={ariaProps['aria-valuemin']}
+  aria-valuemax={ariaProps['aria-valuemax']}
+  class={cn(radialGaugeRootVariants({ size }), className)}
+  {...dataAttributes}
+  {...rest}
+>
+  {/* Background track */}
+  <circle
+    cx={cx}
+    cy={cy}
+    r={r}
+    stroke-width={thickness}
+    class={gaugeTrackClass}
+  />
+
+  {/* Value arc */}
+  <circle
+    cx={cx}
+    cy={cy}
+    r={r}
+    stroke-width={thickness}
+    stroke-dasharray={`${circumference} ${circumference}`}
+    stroke-dashoffset={dashoffset}
+    stroke-linecap="round"
+    transform={`rotate(-90 ${cx} ${cy})`}
+    class={cn(gaugeArcClass, gaugeArcToneVariants({ tone }))}
+  />
+
+  {/* Center label */}
+  {centerLabel != null && (
+    <text
+      x={cx}
+      y={cy}
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-size={labelFontSize}
+      dy={labelDy}
+      class={gaugeLabelClass}
+    >
+      {centerLabel}
+    </text>
+  )}
+
+  {/* Sub-label */}
+  {sublabel != null && (
+    <text
+      x={cx}
+      y={cy}
+      text-anchor="middle"
+      dominant-baseline="central"
+      font-size={sublabelFontSize}
+      dy={labelDy + labelFontSize * 1.1}
+      class={gaugeSublabelClass}
+    >
+      {sublabel}
+    </text>
+  )}
+</svg>

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

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

package/dist/astro-rating-scale/RatingScale.astro

@@ -0,0 +1,73 @@
+---
+import {
+  createRatingScale,
+  resolveRatingPoints,
+  ratingScaleVariants,
+  ratingScaleTrackClass,
+  ratingScaleItemVariants,
+  ratingScaleLabelClass,
+  type RatingScaleSize,
+  type RatingScalePoint,
+} from '../rating-scale/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Selected value. */
+  value?: number
+  /** Number of points (1..count). Ignored when `points` is provided. */
+  count?: number
+  /** Explicit points with accessible labels. */
+  points?: RatingScalePoint[]
+  /** Label shown before the scale (low end). */
+  minLabel?: string
+  /** Label shown after the scale (high end). */
+  maxLabel?: string
+  /** Visual size. */
+  size?: RatingScaleSize
+  /** Disables the whole scale. */
+  disabled?: boolean
+}
+
+const {
+  value,
+  count = 5,
+  points,
+  minLabel,
+  maxLabel,
+  size = 'md',
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const resolved = resolveRatingPoints(points, count)
+const selectedIndex = resolved.findIndex((p) => p.value === value)
+const tabbableIndex = selectedIndex === -1 ? 0 : selectedIndex
+const { ariaProps, dataAttributes } = createRatingScale({ value, size })
+---
+
+<div class={cn(ratingScaleVariants({ size }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {minLabel && <span class={ratingScaleLabelClass}>{minLabel}</span>}
+  <div class={ratingScaleTrackClass}>
+    {
+      resolved.map((point, index) => {
+        const checked = point.value === value
+        return (
+          <button
+            type="button"
+            role="radio"
+            aria-checked={checked}
+            aria-label={point.label ?? String(point.value)}
+            tabindex={index === tabbableIndex ? 0 : -1}
+            disabled={disabled}
+            data-state={checked ? 'checked' : 'unchecked'}
+            class={ratingScaleItemVariants({ size, state: checked ? 'checked' : 'unchecked' })}
+          >
+            {point.label ?? point.value}
+          </button>
+        )
+      })
+    }
+  </div>
+  {maxLabel && <span class={ratingScaleLabelClass}>{maxLabel}</span>}
+</div>

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

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

package/dist/astro-segmented-control/SegmentedControl.astro

@@ -0,0 +1,106 @@
+---
+import { segmentedControlVariants, createSegmentedControl } from '../segmented-control/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  size?: 'sm' | 'md'
+  name?: string
+}
+
+const { value, size = 'md', name, class: className, ...props } = Astro.props
+
+const api = createSegmentedControl({ value, size })
+---
+
+<div
+  class={cn(segmentedControlVariants({ size }), className)}
+  data-rfr-segmented-group
+  data-rfr-segmented-size={size}
+  data-rfr-segmented-value={value || ''}
+  {...api.ariaProps}
+  {...props}
+>
+  <slot />
+  {name && <input type="hidden" name={name} value={value || ''} data-rfr-segmented-input />}
+</div>
+
+<script>
+  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
+    }
+  }
+
+  document.querySelectorAll<HTMLElement>('[data-rfr-segmented-group]').forEach((group) => {
+    const items = () => group.querySelectorAll<HTMLButtonElement>('[data-rfr-segmented-item]')
+
+    function selectItem(item: HTMLButtonElement) {
+      if (item.disabled) return
+      const value = item.getAttribute('data-rfr-segmented-item-value') || ''
+
+      items().forEach((btn) => {
+        const btnValue = btn.getAttribute('data-rfr-segmented-item-value') || ''
+        const isSelected = btnValue === value
+        btn.setAttribute('aria-checked', String(isSelected))
+        btn.setAttribute('tabindex', isSelected ? '0' : '-1')
+        btn.setAttribute('data-state', isSelected ? 'checked' : 'unchecked')
+
+        if (isSelected) {
+          btn.classList.add('bg-background', 'text-foreground', 'shadow-sm')
+          btn.classList.remove('text-muted-foreground', 'hover:text-foreground')
+        } else {
+          btn.classList.remove('bg-background', 'text-foreground', 'shadow-sm')
+          btn.classList.add('text-muted-foreground', 'hover:text-foreground')
+        }
+      })
+
+      group.setAttribute('data-rfr-segmented-value', value)
+
+      const input = group.querySelector('[data-rfr-segmented-input]') as HTMLInputElement | null
+      if (input) input.value = value
+
+      group.dispatchEvent(new CustomEvent('change', { detail: { value } }))
+    }
+
+    group.addEventListener('click', (e) => {
+      const item = (e.target as HTMLElement).closest<HTMLButtonElement>('[data-rfr-segmented-item]')
+      if (item) selectItem(item)
+    })
+
+    group.addEventListener('keydown', (e) => {
+      const target = e.target as HTMLElement
+      if (!target.hasAttribute('data-rfr-segmented-item')) return
+
+      const allItems = Array.from(items()).filter((i) => !i.disabled)
+      const currentIndex = allItems.indexOf(target as HTMLButtonElement)
+      if (currentIndex === -1) return
+
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.preventDefault()
+        selectItem(target as HTMLButtonElement)
+        return
+      }
+
+      const nextIndex = getNextSegmentIndex(currentIndex, e.key, allItems.length)
+      if (nextIndex !== currentIndex) {
+        e.preventDefault()
+        const nextItem = allItems[nextIndex]
+        nextItem.focus()
+        selectItem(nextItem)
+      }
+    })
+  })
+</script>

package/dist/astro-segmented-control/SegmentedControlItem.astro

@@ -0,0 +1,32 @@
+---
+import { segmentedControlItemVariants } from '../segmented-control/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: string
+  size?: 'sm' | 'md'
+  checked?: boolean
+  disabled?: boolean
+}
+
+const { value, size = 'md', checked = false, disabled = false, class: className, ...props } = Astro.props
+---
+
+<button
+  type="button"
+  role="radio"
+  aria-checked={checked}
+  aria-disabled={disabled || undefined}
+  tabindex={checked ? 0 : -1}
+  disabled={disabled || undefined}
+  data-state={checked ? 'checked' : 'unchecked'}
+  data-rfr-segmented-item
+  data-rfr-segmented-item-value={value}
+  class={cn(
+    segmentedControlItemVariants({ size, state: checked ? 'checked' : 'unchecked' }),
+    className,
+  )}
+  {...props}
+>
+  <slot />
+</button>

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

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

package/dist/astro-separator/Separator.astro

@@ -0,0 +1,49 @@
+---
+import {
+  createSeparator,
+  separatorVariants,
+  separatorLineClass,
+  separatorLabelClass,
+  type SeparatorOrientation,
+} from '../separator/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  orientation?: SeparatorOrientation
+  /**
+   * Optional centered label (horizontal only). Renders a flanking line on
+   * each side — the "labeled divider" variant. May also be supplied via the
+   * default slot.
+   */
+  label?: string
+  decorative?: boolean
+}
+
+const {
+  orientation = 'horizontal',
+  label,
+  decorative = true,
+  class: className,
+  ...props
+} = Astro.props
+
+const hasLabel = orientation === 'horizontal' && (label != null || Astro.slots.has('default'))
+const { ariaProps, dataAttributes } = createSeparator({ orientation, decorative })
+---
+
+{
+  hasLabel ? (
+    <div role="none" class={cn(separatorVariants({ labeled: 'true' }), className)} {...props}>
+      <span class={separatorLineClass} />
+      <span class={separatorLabelClass}>{label}<slot /></span>
+      <span class={separatorLineClass} />
+    </div>
+  ) : (
+    <div
+      class={cn(separatorVariants({ orientation }), className)}
+      {...ariaProps}
+      {...dataAttributes}
+      {...props}
+    />
+  )
+}

package/dist/astro-separator/index.ts

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