@refraction-ui/astro 0.12.0 → 0.14.0

package/dist/astro-audience-feature-card/AudienceFeatureCard.astro

@@ -0,0 +1,53 @@
+---
+import {
+  createAudienceFeatureCard,
+  audienceFeatureCardVariants,
+  audienceFeatureCardKickerClass,
+  audienceFeatureCardTitleClass,
+  audienceFeatureCardBodyClass,
+  audienceFeatureCardFooterClass,
+} from '../audience-feature-card/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Kicker text displayed above the title (e.g. "For teams"). */
+  kicker?: string
+  /** Main title — required (or pass content via default slot). */
+  title?: string
+  /** Body copy. */
+  body?: string
+  /** Footer string (alternative to the named footer slot). */
+  footer?: string
+  class?: string
+}
+
+const {
+  kicker,
+  title,
+  body,
+  footer,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createAudienceFeatureCard()
+---
+
+<div
+  class={cn(audienceFeatureCardVariants(), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {kicker && <p class={audienceFeatureCardKickerClass}>{kicker}</p>}
+  {title
+    ? <p class={audienceFeatureCardTitleClass}>{title}</p>
+    : <p class={audienceFeatureCardTitleClass}><slot /></p>
+  }
+  {body && <p class={audienceFeatureCardBodyClass}>{body}</p>}
+  {(footer || Astro.slots.has('footer')) && (
+    <div class={audienceFeatureCardFooterClass}>
+      {footer ?? <slot name="footer" />}
+    </div>
+  )}
+</div>

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

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

package/dist/astro-audio-room/AudioRoom.astro

@@ -0,0 +1,81 @@
+---
+import {
+  createAudioRoom,
+  getInitials,
+  orbColumns,
+  audioRoomVariants,
+  audioRoomOrbCellVariants,
+  speakingOrbVariants,
+  audioRoomNameLabelClass,
+  audioRoomMutedBadgeClass,
+  audioRoomHandBadgeClass,
+  type AudioParticipant,
+} from '../audio-room/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Participants to render as speaking orbs. */
+  participants: AudioParticipant[]
+}
+
+const { participants, class: className, ...rest } = Astro.props
+
+const cols = orbColumns(participants.length)
+const { ariaProps, dataAttributes } = createAudioRoom()
+---
+
+<div
+  class={cn(audioRoomVariants(), className)}
+  style={`grid-template-columns: repeat(${cols}, minmax(0, 1fr))`}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    participants.map((participant) => {
+      const initials = getInitials(participant.name)
+      const speaking = participant.speaking ?? false
+      const muted = participant.muted ?? false
+      const handRaised = participant.handRaised ?? false
+
+      return (
+        <div class={audioRoomOrbCellVariants()}>
+          <div
+            role="img"
+            aria-label={participant.name}
+            data-speaking={speaking ? 'true' : 'false'}
+            data-muted={muted ? 'true' : 'false'}
+            data-hand-raised={handRaised ? 'true' : 'false'}
+            class={speakingOrbVariants({
+              speaking: speaking ? 'true' : 'false',
+              muted: muted ? 'true' : 'false',
+            })}
+          >
+            {participant.avatarUrl ? (
+              <img
+                src={participant.avatarUrl}
+                alt={participant.name}
+                class="absolute inset-0 size-full object-cover"
+              />
+            ) : (
+              <span aria-hidden="true">{initials}</span>
+            )}
+
+            {muted && (
+              <span class={audioRoomMutedBadgeClass} aria-label="Muted">
+                🔇
+              </span>
+            )}
+
+            {handRaised && (
+              <span class={audioRoomHandBadgeClass} aria-label="Hand raised">
+                ✋
+              </span>
+            )}
+          </div>
+          <span class={audioRoomNameLabelClass}>{participant.name}</span>
+        </div>
+      )
+    })
+  }
+</div>

package/dist/astro-audio-room/index.ts

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

package/dist/astro-brand-network-cell/BrandNetworkCell.astro

@@ -0,0 +1,77 @@
+---
+import {
+  createBrandNetworkCell,
+  brandNetworkCellVariants,
+  brandNetworkCellGlyphClass,
+  brandNetworkCellDomainClass,
+  brandNetworkCellCurrentBadgeClass,
+  brandNetworkCellBodyClass,
+  brandNetworkCellLinkClass,
+} from '../brand-network-cell/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Single character or short string used as the brand monogram. */
+  glyph: string
+  /** CSS colour value for the glyph box background (brand tint). Applied via inline style. */
+  glyphBg?: string
+  /** CSS colour value for the glyph text (brand tint). Applied via inline style. */
+  glyphColor?: string
+  /** Primary identifier shown below the glyph (product domain or name). */
+  domain: string
+  /** Supporting description text. */
+  body: string
+  /** When provided, renders a link at the bottom of the card. */
+  href?: string
+  /** Label for the link. Defaults to "Visit →". */
+  linkLabel?: string
+  /** Marks this cell as the current/active product in the network. */
+  current?: boolean
+}
+
+const {
+  glyph,
+  glyphBg,
+  glyphColor,
+  domain,
+  body,
+  href,
+  linkLabel,
+  current = false,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createBrandNetworkCell({ current })
+const glyphStyle = `${glyphBg ? `background:${glyphBg};` : ''}${glyphColor ? `color:${glyphColor};` : ''}`
+---
+
+<div
+  class={cn(brandNetworkCellVariants({ current: current ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  <!-- Glyph box — brand tint via inline style -->
+  <div class={brandNetworkCellGlyphClass} style={glyphStyle} aria-hidden="true">
+    {glyph}
+  </div>
+
+  <!-- Domain row -->
+  <div class="flex items-center gap-2">
+    <span class={brandNetworkCellDomainClass}>{domain}</span>
+    {current && (
+      <span class={brandNetworkCellCurrentBadgeClass}>You are here</span>
+    )}
+  </div>
+
+  <!-- Body -->
+  <p class={brandNetworkCellBodyClass}>{body}</p>
+
+  <!-- Optional link -->
+  {href && (
+    <a href={href} class={brandNetworkCellLinkClass}>
+      {linkLabel ?? 'Visit →'}
+    </a>
+  )}
+</div>

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

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

package/dist/astro-browser-chrome-mock/BrowserChromeMock.astro

@@ -0,0 +1,62 @@
+---
+import {
+  createBrowserChromeMock,
+  splitUrl,
+  browserChromeMockVariants,
+  chromeBarClass,
+  trafficDotClass,
+  urlBarClass,
+  urlDomainClass,
+  statusBadgeVariants,
+  contentAreaClass,
+  type BrowserChromeStatus,
+} from '../browser-chrome-mock/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** URL to display in the address bar. Bold domain + normal path. */
+  url: string
+  /** Optional status badge shown in the chrome bar. */
+  status?: BrowserChromeStatus
+}
+
+const { url, status, class: className, ...rest } = Astro.props
+
+const { ariaProps, dataAttributes } = createBrowserChromeMock({ status })
+const { domain, path } = splitUrl(url)
+
+const trafficDots = ['bg-red-400', 'bg-yellow-400', 'bg-green-400'] as const
+---
+
+<div class={cn(browserChromeMockVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <!-- Chrome toolbar -->
+  <div class={chromeBarClass}>
+    <!-- Traffic-light dots -->
+    <div class="flex items-center gap-1.5 shrink-0">
+      {trafficDots.map((color) => (
+        <span class={`${trafficDotClass} ${color}`} />
+      ))}
+    </div>
+
+    <!-- URL bar -->
+    <div class={urlBarClass}>
+      <span class={urlDomainClass}>{domain}</span>
+      {path && <span>{path}</span>}
+    </div>
+
+    <!-- Status badge -->
+    {status && (
+      <div class={statusBadgeVariants({ status })}>
+        {status === 'rec' && (
+          <span class="size-1.5 rounded-full bg-destructive animate-pulse" />
+        )}
+        {status}
+      </div>
+    )}
+  </div>
+
+  <!-- Content area -->
+  <div class={contentAreaClass}>
+    <slot />
+  </div>
+</div>

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

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

package/dist/astro-call-controls/CallControls.astro

@@ -0,0 +1,57 @@
+---
+import {
+  createCallControls,
+  callControlsVariants,
+  callControlButtonVariants,
+  callControlLabelClass,
+  type CallControlTone,
+  type CallControlItem,
+} from '../call-controls/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Array of control descriptors to render as buttons.
+   * If omitted, the default <slot /> is used instead (composable usage).
+   */
+  controls?: CallControlItem[]
+  /** Visual size of the toolbar and its buttons. */
+  size?: 'sm' | 'md'
+}
+
+const {
+  controls,
+  size = 'md',
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createCallControls({ controls })
+
+function toneClass(tone: CallControlTone | undefined): string {
+  return callControlButtonVariants({ tone: tone ?? 'default', size })
+}
+---
+
+<div
+  class={cn(callControlsVariants({ size }), className)}
+  role={ariaProps.role}
+  aria-label={ariaProps['aria-label']}
+  {...dataAttributes}
+  {...rest}
+>
+  {controls
+    ? controls.map((ctrl) => (
+        <button
+          type="button"
+          aria-label={ctrl.label}
+          aria-pressed={ctrl.pressed !== undefined ? ctrl.pressed : undefined}
+          class={toneClass(ctrl.tone)}
+        >
+          {ctrl.icon && <span aria-hidden="true">{ctrl.icon}</span>}
+          <span class={callControlLabelClass}>{ctrl.label}</span>
+        </button>
+      ))
+    : <slot />
+  }
+</div>

package/dist/astro-call-controls/index.ts

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

package/dist/astro-checklist/Checklist.astro

@@ -0,0 +1,76 @@
+---
+import {
+  createChecklist,
+  checklistProgress,
+  checklistContainerClass,
+  checklistListClass,
+  checklistItemVariants,
+  checklistBoxVariants,
+  checklistLabelWrapClass,
+  checklistLabelVariants,
+  checklistDescriptionClass,
+  checklistProgressClass,
+  type ChecklistItemData,
+} from '../checklist/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** List of checklist items. */
+  items: ChecklistItemData[]
+  /** Show a "{completed}/{total}" progress summary below the list. */
+  showProgress?: boolean
+}
+
+const { items, showProgress = false, class: className, ...rest } = Astro.props
+
+const { ariaProps, dataAttributes } = createChecklist()
+const progress = showProgress ? checklistProgress(items) : null
+---
+
+<div class={cn(checklistContainerClass, className)} {...dataAttributes} {...rest}>
+  <ul class={checklistListClass} {...ariaProps}>
+    {
+      items.map((item) => {
+        const checked = Boolean(item.checked)
+        return (
+          <li role="presentation">
+            <button
+              type="button"
+              role="checkbox"
+              aria-checked={checked}
+              data-state={checked ? 'checked' : 'unchecked'}
+              class={checklistItemVariants({ checked: checked ? 'true' : 'false' })}
+            >
+              <span aria-hidden="true" class={checklistBoxVariants({ checked: checked ? 'true' : 'false' })}>
+                {checked && (
+                  <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3" aria-hidden="true">
+                    <path
+                      d="M2 6l3 3 5-5"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                )}
+              </span>
+              <span class={checklistLabelWrapClass}>
+                <span class={checklistLabelVariants({ checked: checked ? 'true' : 'false' })}>{item.label}</span>
+                {item.description && (
+                  <span class={checklistDescriptionClass}>{item.description}</span>
+                )}
+              </span>
+            </button>
+          </li>
+        )
+      })
+    }
+  </ul>
+  {
+    progress !== null && (
+      <p class={checklistProgressClass}>
+        {progress.completed}/{progress.total} completed
+      </p>
+    )
+  }
+</div>

package/dist/astro-checklist/index.ts

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

package/dist/astro-editor-status-bar/EditorStatusBar.astro

@@ -0,0 +1,92 @@
+---
+import {
+  createEditorStatusBar,
+  formatCursorPosition,
+  partitionSegments,
+  editorStatusBarVariants,
+  statusBarGroupClass,
+  statusBarSegmentVariants,
+  type StatusSegment,
+  type StatusSegmentTone,
+} from '../editor-status-bar/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Explicit list of segments. When provided, all convenience props are
+   * ignored.
+   */
+  segments?: StatusSegment[]
+  /** Current line number (1-indexed). */
+  line?: number
+  /** Current column number (1-indexed). */
+  col?: number
+  /** Indentation descriptor, e.g. `'Spaces: 4'`. */
+  indentation?: string
+  /** Language / runtime label, e.g. `'Python 3.11.4'`. */
+  language?: string
+  /** File encoding, e.g. `'UTF-8'`. */
+  encoding?: string
+  /** End-of-line sequence, e.g. `'LF'` or `'CRLF'`. */
+  eol?: string
+  /** Persistence status label, e.g. `'Auto-saved'`. */
+  status?: string
+}
+
+const {
+  segments: segmentsProp,
+  line,
+  col,
+  indentation,
+  language,
+  encoding,
+  eol,
+  status,
+  class: className,
+  ...rest
+} = Astro.props
+
+function buildSegments(): StatusSegment[] {
+  const segs: StatusSegment[] = []
+  if (line !== undefined && col !== undefined) {
+    segs.push({ id: 'cursor', label: formatCursorPosition(line, col), align: 'left', tone: 'default' })
+  }
+  if (indentation) {
+    segs.push({ id: 'indentation', label: indentation, align: 'left', tone: 'muted' })
+  }
+  if (language) {
+    segs.push({ id: 'language', label: language, align: 'right', tone: 'accent' })
+  }
+  if (encoding) {
+    segs.push({ id: 'encoding', label: encoding, align: 'right', tone: 'muted' })
+  }
+  if (eol) {
+    segs.push({ id: 'eol', label: eol, align: 'right', tone: 'muted' })
+  }
+  if (status) {
+    segs.push({ id: 'status', label: status, align: 'right', tone: 'muted' })
+  }
+  return segs
+}
+
+const segments = segmentsProp ?? buildSegments()
+const { left, right } = partitionSegments(segments)
+const { ariaProps, dataAttributes } = createEditorStatusBar()
+---
+
+<div class={cn(editorStatusBarVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  <div class={statusBarGroupClass}>
+    {left.map((seg) => (
+      <span class={statusBarSegmentVariants({ tone: (seg.tone ?? 'default') as StatusSegmentTone })}>
+        {seg.label}
+      </span>
+    ))}
+  </div>
+  <div class={statusBarGroupClass}>
+    {right.map((seg) => (
+      <span class={statusBarSegmentVariants({ tone: (seg.tone ?? 'default') as StatusSegmentTone })}>
+        {seg.label}
+      </span>
+    ))}
+  </div>
+</div>

package/dist/astro-editor-status-bar/index.ts

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

package/dist/astro-editor-tabs/EditorTabs.astro

@@ -0,0 +1,74 @@
+---
+import {
+  createEditorTabs,
+  editorTabsVariants,
+  editorTabVariants,
+  editorTabDirtyDotClass,
+  editorTabCloseButtonClass,
+  editorTabIconClass,
+  type EditorTabData,
+} from '../editor-tabs/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The list of tab entries to render. */
+  tabs: EditorTabData[]
+  /** The id of the currently active tab. */
+  activeId: string
+}
+
+const {
+  tabs,
+  activeId,
+  class: className,
+  ...rest
+} = Astro.props
+
+const activeIndex = tabs.findIndex((t) => t.id === activeId)
+const tabbableIndex = activeIndex === -1 ? 0 : activeIndex
+const { ariaProps, dataAttributes } = createEditorTabs({ activeId })
+---
+
+<div class={cn(editorTabsVariants(), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    tabs.map((tab, index) => {
+      const isActive = tab.id === activeId
+      return (
+        <button
+          type="button"
+          role="tab"
+          aria-selected={isActive}
+          aria-controls={`tabpanel-${tab.id}`}
+          id={`tab-${tab.id}`}
+          tabindex={index === tabbableIndex ? 0 : -1}
+          data-state={isActive ? 'active' : 'inactive'}
+          class={editorTabVariants({ state: isActive ? 'active' : 'inactive' })}
+        >
+          {tab.icon && (
+            <span class={editorTabIconClass} aria-hidden="true">
+              {tab.icon}
+            </span>
+          )}
+          <span>{tab.label}</span>
+          {tab.dirty && (
+            <span
+              class={editorTabDirtyDotClass}
+              aria-label="unsaved changes"
+              role="status"
+            />
+          )}
+          {tab.closable && (
+            <span
+              role="button"
+              aria-label={`Close ${tab.label}`}
+              tabindex="-1"
+              class={editorTabCloseButtonClass}
+            >
+              ×
+            </span>
+          )}
+        </button>
+      )
+    })
+  }
+</div>

package/dist/astro-editor-tabs/index.ts

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

package/dist/astro-floating-reactions/FloatingReactions.astro

@@ -0,0 +1,56 @@
+---
+import {
+  createFloatingReactions,
+  laneOffsetPercent,
+  floatingReactionsVariants,
+  floatingReactionItemClass,
+  floatingReactionLabelClass,
+  type FloatingReaction,
+} from '../floating-reactions/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /**
+   * Reactions to render at SSR time. For animated runtime usage, use the
+   * React adapter which manages auto-expiry via useFloatingReactions().
+   */
+  reactions?: FloatingReaction[]
+  /**
+   * Total number of horizontal lane buckets used to spread reactions.
+   * @default 5
+   */
+  lanes?: number
+}
+
+const {
+  reactions = [],
+  lanes = 5,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createFloatingReactions()
+---
+
+<div
+  class={cn(floatingReactionsVariants({ active: reactions.length > 0 ? 'true' : 'false' }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    reactions.map((reaction) => {
+      const left = laneOffsetPercent(reaction.lane ?? 0, lanes)
+      return (
+        <span
+          class={floatingReactionItemClass}
+          style={`left:${left}%`}
+          aria-hidden="true"
+        >
+          {reaction.emoji}
+          <span class={floatingReactionLabelClass}>{reaction.emoji}</span>
+        </span>
+      )
+    })
+  }
+</div>

package/dist/astro-floating-reactions/index.ts

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