@refraction-ui/astro 0.12.0 → 0.14.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-pricing-card/PricingCard.astro

@@ -0,0 +1,114 @@
+---
+import {
+  createPricingCard,
+  pricingCardVariants,
+  pricingCardBadgeClass,
+  pricingCardNameClass,
+  pricingCardPriceClass,
+  pricingCardPeriodClass,
+  pricingCardDescriptionClass,
+  pricingCardFeatureListClass,
+  pricingCardFeatureRowClass,
+  pricingCardFeatureTickClass,
+  pricingCtaVariants,
+  type PricingCtaVariant,
+} from '../pricing-card/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional badge label shown above the plan name (e.g. "Most popular"). */
+  badge?: string
+  /** Plan name (e.g. "Pro", "Starter"). */
+  name: string
+  /** Price string (e.g. "$29", "Free"). */
+  price: string
+  /** Billing period or qualifier (e.g. "/ month"). */
+  period?: string
+  /** Short marketing description. */
+  description?: string
+  /** List of included features to render as a checklist. */
+  features: string[]
+  /** CTA button/link label. */
+  cta: string
+  /** Visual variant for the CTA. */
+  ctaVariant?: PricingCtaVariant
+  /** When provided, the CTA renders as an `<a>` tag. */
+  ctaHref?: string
+  /** Highlights the card with a primary ring. */
+  featured?: boolean
+}
+
+const {
+  badge,
+  name,
+  price,
+  period,
+  description,
+  features,
+  cta,
+  ctaVariant = 'default',
+  ctaHref,
+  featured = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createPricingCard({ featured })
+const ctaClass = pricingCtaVariants({ variant: ctaVariant })
+---
+
+<div
+  class={cn(pricingCardVariants({ featured: featured ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {badge && <span class={pricingCardBadgeClass}>{badge}</span>}
+
+  <p class={pricingCardNameClass}>{name}</p>
+
+  <div class="mt-4 flex items-baseline gap-1">
+    <span class={pricingCardPriceClass}>{price}</span>
+    {period && <span class={pricingCardPeriodClass}>{period}</span>}
+  </div>
+
+  {description && <p class={`mt-2 ${pricingCardDescriptionClass}`}>{description}</p>}
+
+  <ul class={`mt-6 ${pricingCardFeatureListClass}`}>
+    {
+      features.map((feature) => (
+        <li class={pricingCardFeatureRowClass}>
+          <svg
+            class={pricingCardFeatureTickClass}
+            viewBox="0 0 16 16"
+            fill="none"
+            aria-hidden="true"
+          >
+            <path
+              d="M3 8l3.5 3.5L13 4.5"
+              stroke="currentColor"
+              stroke-width="1.75"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          {feature}
+        </li>
+      ))
+    }
+  </ul>
+
+  <div class="mt-6">
+    {
+      ctaHref ? (
+        <a href={ctaHref} class={ctaClass}>
+          {cta}
+        </a>
+      ) : (
+        <button type="button" class={ctaClass}>
+          {cta}
+        </button>
+      )
+    }
+  </div>
+</div>

package/dist/astro-pricing-card/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-section-head/SectionHead.astro

@@ -0,0 +1,44 @@
+---
+import {
+  createSectionHead,
+  sectionHeadVariants,
+  sectionHeadKickerClass,
+  sectionHeadTitleClass,
+  sectionHeadLedeClass,
+  type SectionHeadAlign,
+} from '../section-head/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional eyebrow / kicker rendered above the title. */
+  kicker?: string
+  /** Primary heading content. Falls back to the default slot when not set. */
+  title?: string
+  /** Optional lede paragraph rendered below the title. */
+  lede?: string
+  /** Horizontal alignment of the cluster. */
+  align?: SectionHeadAlign
+  /** Override the heading element rendered for the title. Defaults to `h2`. */
+  as?: 'h1' | 'h2' | 'h3'
+}
+
+const {
+  kicker,
+  title,
+  lede,
+  align = 'center',
+  as: Tag = 'h2',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { dataAttributes } = createSectionHead({ align })
+---
+
+<div class={cn(sectionHeadVariants({ align }), className)} {...dataAttributes} {...rest}>
+  {kicker && <p class={sectionHeadKickerClass}>{kicker}</p>}
+  <Tag class={sectionHeadTitleClass}>
+    {title ?? <slot />}
+  </Tag>
+  {lede && <p class={sectionHeadLedeClass}>{lede}</p>}
+</div>

package/dist/astro-section-head/index.ts

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

package/dist/astro-stat-grid/StatGrid.astro

@@ -0,0 +1,46 @@
+---
+import {
+  createStatGrid,
+  statColumns,
+  statGridVariants,
+  statItemClass,
+  statValueClass,
+  statLabelClass,
+  type StatItem,
+} from '../stat-grid/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The stat items to display in the grid (value and label as strings). */
+  items: StatItem[]
+  /**
+   * Number of columns. Defaults to statColumns(items.length):
+   * 1 item → 1, 2 items → 2, 3+ items → 3.
+   */
+  columns?: number
+}
+
+const { items, columns, class: className, ...rest } = Astro.props
+
+const cols = columns ?? statColumns(items.length)
+const colsKey = String(cols) as '1' | '2' | '3'
+const { ariaProps, dataAttributes } = createStatGrid()
+const gridStyle = `grid-template-columns:repeat(${cols}, 1fr)`
+---
+
+<div
+  class={cn(statGridVariants({ columns: colsKey }), className)}
+  style={gridStyle}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    items.map((item) => (
+      <div role="listitem" class={statItemClass}>
+        <span class={statValueClass}>{item.value}</span>
+        <span class={statLabelClass}>{item.label}</span>
+      </div>
+    ))
+  }
+</div>

package/dist/astro-stat-grid/index.ts

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

package/dist/astro-sticky-note/StickyNote.astro

@@ -0,0 +1,55 @@
+---
+import {
+  createStickyNote,
+  stickyNoteVariants,
+  stickyNoteTextClass,
+  stickyNoteAuthorClass,
+  type StickyNoteColor,
+} from '../sticky-note/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Color of the sticky note. */
+  color?: StickyNoteColor
+  /** Text content of the note. */
+  text?: string
+  /** Optional author name shown in the note footer. */
+  author?: string
+  /** Absolute x position in pixels (for board/canvas placement). */
+  x?: number
+  /** Absolute y position in pixels (for board/canvas placement). */
+  y?: number
+}
+
+const {
+  color = 'yellow',
+  text,
+  author,
+  x,
+  y,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createStickyNote({ color })
+
+const positionStyle =
+  x !== undefined && y !== undefined
+    ? `position:absolute;left:${x}px;top:${y}px;`
+    : ''
+---
+
+<div
+  class={cn(stickyNoteVariants({ color }), className)}
+  style={positionStyle || undefined}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {text ? (
+    <p class={`${stickyNoteTextClass} whitespace-pre-wrap`}>{text}</p>
+  ) : (
+    <p class={`${stickyNoteTextClass} whitespace-pre-wrap`}><slot /></p>
+  )}
+  {author && <span class={stickyNoteAuthorClass}>{author}</span>}
+</div>

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

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