@refraction-ui/astro 0.11.1 → 0.13.0

package/dist/astro-social-auth-button/SocialAuthButton.astro

@@ -0,0 +1,110 @@
+---
+import {
+  createSocialAuthButton,
+  socialAuthButtonVariants,
+  lastUsedBadgeVariants,
+  type SocialProvider,
+} from '../social-auth-button/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  provider: SocialProvider
+  lastUsed?: boolean
+  loading?: boolean
+  disabled?: boolean
+}
+
+const {
+  provider,
+  lastUsed,
+  loading,
+  disabled,
+  class: className,
+  ...props
+} = Astro.props
+
+const { label, mono, dataAttributes } = createSocialAuthButton({ provider })
+
+// Mirrors the react-button outline variant base + outline classes so the Astro
+// and React buttons render identically.
+const buttonClasses = cn(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+  'w-full justify-center gap-2',
+  className,
+)
+
+const iconFill = (color: string) => (mono ? 'currentColor' : color)
+---
+
+<div class={socialAuthButtonVariants()}>
+  <button
+    type="button"
+    class={buttonClasses}
+    disabled={disabled || loading}
+    {...dataAttributes}
+    {...props}
+  >
+    {loading ? (
+      <svg
+        class="animate-spin h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        />
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        />
+      </svg>
+    ) : (
+      <svg
+        class="shrink-0"
+        width="18"
+        height="18"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+      >
+        {provider === 'google' && (
+          <path
+            fill={iconFill('#4285F4')}
+            d="M21.35 11.1H12v2.92h5.35c-.23 1.4-1.65 4.1-5.35 4.1a5.99 5.99 0 0 1 0-11.98c1.71 0 2.86.73 3.52 1.36l2.4-2.31C16.46 3.7 14.43 2.8 12 2.8a9.2 9.2 0 1 0 0 18.4c5.31 0 8.82-3.73 8.82-8.99 0-.6-.07-1.06-.17-1.51Z"
+          />
+        )}
+        {provider === 'github' && (
+          <path
+            fill="currentColor"
+            d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.45-1.16-1.11-1.46-1.11-1.46-.91-.62.07-.61.07-.61 1 .07 1.53 1.03 1.53 1.03.9 1.53 2.36 1.09 2.94.83.09-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.09.39-1.98 1.03-2.68-.1-.25-.45-1.27.1-2.65 0 0 .84-.27 2.75 1.02a9.6 9.6 0 0 1 5 0c1.91-1.29 2.75-1.02 2.75-1.02.55 1.38.2 2.4.1 2.65.64.7 1.03 1.59 1.03 2.68 0 3.84-2.34 4.69-4.57 4.94.36.31.68.92.68 1.85l-.01 2.74c0 .27.18.58.69.48A10 10 0 0 0 12 2Z"
+          />
+        )}
+        {provider === 'microsoft' && (
+          <Fragment>
+            <path fill={iconFill('#F25022')} d="M3 3h8v8H3z" />
+            <path fill={iconFill('#7FBA00')} d="M13 3h8v8h-8z" />
+            <path fill={iconFill('#00A4EF')} d="M3 13h8v8H3z" />
+            <path fill={iconFill('#FFB900')} d="M13 13h8v8h-8z" />
+          </Fragment>
+        )}
+        {provider === 'apple' && (
+          <path
+            fill="currentColor"
+            d="M16.37 12.78c-.03-2.62 2.14-3.88 2.24-3.94-1.22-1.79-3.12-2.03-3.79-2.06-1.61-.16-3.15.95-3.97.95-.82 0-2.08-.93-3.42-.9-1.76.03-3.39 1.02-4.29 2.6-1.83 3.18-.47 7.88 1.31 10.46.87 1.26 1.91 2.67 3.27 2.62 1.31-.05 1.81-.85 3.4-.85 1.58 0 2.03.85 3.42.82 1.41-.02 2.31-1.28 3.17-2.55.99-1.46 1.4-2.88 1.42-2.95-.03-.01-2.73-1.05-2.76-4.15M13.9 5.1c.72-.88 1.21-2.09 1.08-3.3-1.04.04-2.3.69-3.04 1.56-.66.77-1.24 2.01-1.09 3.19 1.16.09 2.34-.59 3.05-1.45"
+          />
+        )}
+      </svg>
+    )}
+    {label}
+  </button>
+  {lastUsed && <span class={lastUsedBadgeVariants()}>Last used</span>}
+</div>

package/dist/astro-social-auth-button/SocialAuthRow.astro

@@ -0,0 +1,13 @@
+---
+import { socialAuthRowVariants } from '../social-auth-button/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+
+const { class: className, ...props } = Astro.props
+const classes = cn(socialAuthRowVariants(), className)
+---
+
+<div class={classes} {...props}>
+  <slot />
+</div>

package/dist/astro-social-auth-button/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 {}

package/dist/astro-terminal/Terminal.astro

@@ -0,0 +1,67 @@
+---
+import {
+  createTerminal,
+  formatPrompt,
+  terminalVariants,
+  terminalLineVariants,
+  terminalPromptClass,
+  type TerminalLine,
+} from '../terminal/index.ts'
+import { cn } from '../shared/index.ts'
+
+type TerminalMaxHeight = 'sm' | 'md' | 'lg' | 'none'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Lines to render in order. Each line's `kind` determines its styling. */
+  lines: TerminalLine[]
+  /**
+   * Prompt symbol prepended to `command` lines.
+   * @default '$'
+   */
+  promptSymbol?: string
+  /**
+   * Maximum height of the scroll region before it becomes scrollable.
+   * @default 'md'
+   */
+  maxHeight?: TerminalMaxHeight
+  /** Accessible label for the live region. */
+  'aria-label'?: string
+}
+
+const {
+  lines,
+  promptSymbol = '$',
+  maxHeight = 'md',
+  'aria-label': ariaLabel,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createTerminal({ label: ariaLabel })
+---
+
+<div
+  class={cn(terminalVariants({ maxHeight }), className)}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {
+    lines.map((line, index) => {
+      const lineClass = terminalLineVariants({ kind: line.kind })
+      if (line.kind === 'command') {
+        return (
+          <span key={line.id ?? index} class={lineClass}>
+            <span class={terminalPromptClass}>{promptSymbol}</span>
+            {line.text}
+          </span>
+        )
+      }
+      return (
+        <span key={line.id ?? index} class={lineClass}>
+          {line.text}
+        </span>
+      )
+    })
+  }
+</div>

package/dist/astro-terminal/index.ts

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

package/dist/astro-test-results/TestResults.astro

@@ -0,0 +1,76 @@
+---
+import {
+  summarizeTests,
+  createTestResults,
+  testResultsContainerVariants,
+  testResultsSummaryVariants,
+  testRowVariants,
+  testStatusBadgeVariants,
+  testNameClass,
+  testDurationClass,
+  testDiffBlockVariants,
+  testMessageClass,
+  type TestResultData,
+} from '../test-results/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Array of test case results to display. */
+  results: TestResultData[]
+  /** When true, renders a summary bar showing "{passed}/{total} passed". */
+  showSummary?: boolean
+}
+
+const { results, showSummary = true, class: className, ...rest } = Astro.props
+
+const summary = summarizeTests(results)
+const { ariaProps, dataAttributes } = createTestResults()
+const summaryOutcome = summary.failed > 0 ? 'fail' : summary.skipped > 0 ? 'skip' : 'pass'
+---
+
+<div class={cn(testResultsContainerVariants(), className)} {...dataAttributes} {...rest}>
+  {showSummary && results.length > 0 && (
+    <div class={testResultsSummaryVariants({ outcome: summaryOutcome })} aria-live="polite">
+      <span>{summary.passed}/{summary.total} passed</span>
+      {summary.failed > 0 && <span>· {summary.failed} failed</span>}
+      {summary.skipped > 0 && <span>· {summary.skipped} skipped</span>}
+    </div>
+  )}
+
+  <ul {...ariaProps} class="flex flex-col gap-2">
+    {
+      results.map((result) => (
+        <li role="listitem" class={testRowVariants({ status: result.status })}>
+          <div class="flex items-center justify-between gap-2">
+            <div class="flex items-center gap-2 min-w-0">
+              <span class={testStatusBadgeVariants({ status: result.status })}>
+                {result.status}
+              </span>
+              <span class={cn(testNameClass, 'truncate')}>{result.name}</span>
+            </div>
+            {result.durationMs !== undefined && (
+              <span class={testDurationClass}>{result.durationMs} ms</span>
+            )}
+          </div>
+
+          {result.status === 'fail' && result.expected !== undefined && (
+            <div class="flex flex-col gap-1 mt-1">
+              <div class={testDiffBlockVariants({ side: 'expected' })}>
+                <span class="opacity-60 mr-1 select-none">expected</span>
+                {result.expected}
+              </div>
+              {result.actual !== undefined && (
+                <div class={testDiffBlockVariants({ side: 'actual' })}>
+                  <span class="opacity-60 mr-1 select-none">actual</span>
+                  {result.actual}
+                </div>
+              )}
+            </div>
+          )}
+
+          {result.message && <p class={testMessageClass}>{result.message}</p>}
+        </li>
+      ))
+    }
+  </ul>
+</div>

package/dist/astro-test-results/index.ts

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

package/dist/astro-timeline/Timeline.astro

@@ -0,0 +1,59 @@
+---
+import {
+  createTimeline,
+  resolveTimelineItems,
+  timelineVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineConnectorVariants,
+  timelineGutterClass,
+  timelineTimeClass,
+  timelineTitleClass,
+  timelineDescriptionClass,
+  timelineContentClass,
+  type TimelineOrientation,
+  type TimelineItemData,
+} from '../timeline/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Ordered list of events to render. */
+  items: TimelineItemData[]
+  /** Layout direction. Defaults to `'vertical'`. */
+  orientation?: TimelineOrientation
+}
+
+const {
+  items,
+  orientation = 'vertical',
+  class: className,
+  ...rest
+} = Astro.props
+
+const resolved = resolveTimelineItems(items)
+const { ariaProps, dataAttributes } = createTimeline({ orientation })
+---
+
+<ul class={cn(timelineVariants({ orientation }), className)} {...ariaProps} {...dataAttributes} {...rest}>
+  {
+    resolved.map((item, index) => {
+      const isLast = index === resolved.length - 1
+      return (
+        <li role="listitem" class={timelineItemVariants({ orientation })} data-status={item.status}>
+          {/* Gutter: marker + connector */}
+          <div class={timelineGutterClass}>
+            <div class={timelineMarkerVariants({ status: item.status })} />
+            {!isLast && <div class={timelineConnectorVariants({ orientation })} />}
+          </div>
+
+          {/* Content */}
+          <div class={timelineContentClass}>
+            {item.time && <span class={timelineTimeClass}>{item.time}</span>}
+            <span class={timelineTitleClass}>{item.title}</span>
+            {item.description && <p class={timelineDescriptionClass}>{item.description}</p>}
+          </div>
+        </li>
+      )
+    })
+  }
+</ul>

package/dist/astro-timeline/index.ts

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

package/dist/astro-video-grid/VideoGrid.astro

@@ -0,0 +1,182 @@
+---
+import {
+  createVideoGrid,
+  computeGridColumns,
+  videoGridVariants,
+  videoGridSpotlightClass,
+  videoGridFilmstripClass,
+  videoGridFilmstripTileClass,
+  type VideoGridLayout,
+} from '../video-grid/index.ts'
+import { getInitials, type VideoTileData } from '../video-tile/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** List of participant data to render as tiles. */
+  participants: VideoTileData[]
+  /**
+   * Grid layout mode.
+   * - 'auto'    — grid unless ≤1 participant (falls back to speaker)
+   * - 'grid'    — always uniform CSS grid
+   * - 'speaker' — spotlight for `spotlightId` (or first participant) + filmstrip
+   */
+  layout?: VideoGridLayout
+  /**
+   * Participant `id` to spotlight in speaker view.
+   * Falls back to the first participant when omitted.
+   */
+  spotlightId?: string
+}
+
+const {
+  participants,
+  layout = 'auto',
+  spotlightId,
+  class: className,
+  style,
+  ...rest
+} = Astro.props
+
+const count = participants.length
+
+// Resolve effective layout: 'auto' with ≤1 participant shows speaker view.
+const effectiveLayout: VideoGridLayout =
+  layout === 'auto' ? (count <= 1 ? 'speaker' : 'grid') : layout
+
+const { ariaProps, dataAttributes } = createVideoGrid({ layout: effectiveLayout })
+const columns = computeGridColumns(count)
+
+const gridStyle =
+  effectiveLayout !== 'speaker'
+    ? `grid-template-columns: repeat(${columns}, 1fr);${style ? ` ${style}` : ''}`
+    : (style as string | undefined)
+
+const spotlightParticipant =
+  effectiveLayout === 'speaker'
+    ? (participants.find((p) => p.id === spotlightId) ?? participants[0])
+    : undefined
+
+const filmstrip =
+  effectiveLayout === 'speaker'
+    ? participants.filter((p) => p.id !== spotlightParticipant?.id)
+    : []
+
+// Inline tile helper — renders VideoTile markup without importing the .astro
+// file (which may not be built yet in a parallel-build context). When
+// astro-video-tile ships its own VideoTile.astro, replace this with:
+//   import VideoTile from '../astro-video-tile/src/VideoTile.astro.ts'
+function renderTileAttrs(p: VideoTileData): Record<string, string> {
+  const speaking = p.speaking ?? false
+  const pinned = p.pinned ?? false
+  return {
+    role: 'group',
+    'data-speaking': speaking ? 'true' : 'false',
+    'data-pinned': pinned ? 'true' : 'false',
+  }
+}
+---
+
+{effectiveLayout === 'speaker' ? (
+  <div
+    class={cn(videoGridVariants({ layout: 'speaker' }), className)}
+    style={style as string | undefined}
+    {...ariaProps}
+    {...dataAttributes}
+    {...rest}
+  >
+    {spotlightParticipant && (
+      <div class={videoGridSpotlightClass}>
+        {/* Inline VideoTile markup for the spotlight participant */}
+        <div
+          {...renderTileAttrs(spotlightParticipant)}
+          class="relative flex h-full w-full flex-col items-center justify-center bg-muted rounded-xl overflow-hidden"
+          aria-label={spotlightParticipant.name}
+        >
+          {spotlightParticipant.avatarUrl ? (
+            <img
+              src={spotlightParticipant.avatarUrl}
+              alt={spotlightParticipant.name}
+              class="h-full w-full object-cover"
+            />
+          ) : (
+            <span class="flex h-20 w-20 items-center justify-center rounded-full bg-primary text-3xl font-semibold text-primary-foreground">
+              {getInitials(spotlightParticipant.name)}
+            </span>
+          )}
+          <div class="absolute bottom-2 left-2 flex items-center gap-1 rounded-md bg-black/60 px-2 py-0.5 text-xs text-white">
+            {(spotlightParticipant.micState ?? 'on') === 'muted' && (
+              <span aria-label="Muted" role="img">🔇</span>
+            )}
+            <span>{spotlightParticipant.name}</span>
+          </div>
+        </div>
+      </div>
+    )}
+
+    {filmstrip.length > 0 && (
+      <div class={videoGridFilmstripClass}>
+        {filmstrip.map((p) => (
+          <div class={videoGridFilmstripTileClass}>
+            <div
+              {...renderTileAttrs(p)}
+              class="relative flex h-24 flex-col items-center justify-center bg-muted rounded-lg overflow-hidden"
+              aria-label={p.name}
+            >
+              {p.avatarUrl ? (
+                <img
+                  src={p.avatarUrl}
+                  alt={p.name}
+                  class="h-full w-full object-cover"
+                />
+              ) : (
+                <span class="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground">
+                  {getInitials(p.name)}
+                </span>
+              )}
+              <div class="absolute bottom-1 left-1 flex items-center gap-0.5 rounded bg-black/60 px-1 py-0.5 text-[10px] text-white">
+                {(p.micState ?? 'on') === 'muted' && (
+                  <span aria-label="Muted" role="img">🔇</span>
+                )}
+                <span>{p.name}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    )}
+  </div>
+) : (
+  <div
+    class={cn(videoGridVariants({ layout: effectiveLayout }), className)}
+    style={gridStyle}
+    {...ariaProps}
+    {...dataAttributes}
+    {...rest}
+  >
+    {participants.map((p) => (
+      <div
+        {...renderTileAttrs(p)}
+        class="relative flex flex-col items-center justify-center bg-muted rounded-xl overflow-hidden aspect-video"
+        aria-label={p.name}
+      >
+        {p.avatarUrl ? (
+          <img
+            src={p.avatarUrl}
+            alt={p.name}
+            class="h-full w-full object-cover"
+          />
+        ) : (
+          <span class="flex h-14 w-14 items-center justify-center rounded-full bg-primary text-xl font-semibold text-primary-foreground">
+            {getInitials(p.name)}
+          </span>
+        )}
+        <div class="absolute bottom-2 left-2 flex items-center gap-1 rounded-md bg-black/60 px-2 py-0.5 text-xs text-white">
+          {(p.micState ?? 'on') === 'muted' && (
+            <span aria-label="Muted" role="img">🔇</span>
+          )}
+          <span>{p.name}</span>
+        </div>
+      </div>
+    ))}
+  </div>
+)}

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

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

package/dist/astro-video-tile/VideoTile.astro

@@ -0,0 +1,104 @@
+---
+import {
+  createVideoTile,
+  getInitials,
+  videoTileVariants,
+  videoTileNameChipClass,
+  videoTileMicIconClass,
+  videoTileAvatarFallbackClass,
+  videoTileAvatarCircleClass,
+  videoTileReactionBadgeClass,
+  type VideoTileMicState,
+} from '../video-tile/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Participant display name — shown in the name chip and used for initials. */
+  name: string
+  /** Current microphone state. Defaults to 'on'. */
+  micState?: VideoTileMicState
+  /** Whether the participant is actively speaking. Adds an emerald ring. */
+  speaking?: boolean
+  /** Whether the tile is pinned in the grid. Adds a primary ring. */
+  pinned?: boolean
+  /** URL of the participant's avatar image, used in the fallback circle. */
+  avatarUrl?: string
+}
+
+const {
+  name,
+  micState = 'on',
+  speaking = false,
+  pinned = false,
+  avatarUrl,
+  class: className,
+  ...rest
+} = Astro.props
+
+const { ariaProps, dataAttributes } = createVideoTile({ speaking, pinned })
+const initials = getInitials(name)
+const isMuted = micState === 'muted'
+const hasDefaultSlot = Astro.slots.has('default')
+---
+
+<div
+  class={cn(
+    videoTileVariants({
+      speaking: speaking ? 'true' : 'false',
+      pinned: pinned ? 'true' : 'false',
+    }),
+    className,
+  )}
+  aria-label={name}
+  {...ariaProps}
+  {...dataAttributes}
+  {...rest}
+>
+  {hasDefaultSlot ? (
+    <!-- Media slot fills the tile -->
+    <div class="absolute inset-0 h-full w-full">
+      <slot />
+    </div>
+  ) : avatarUrl ? (
+    <!-- Avatar image fallback -->
+    <div class={videoTileAvatarFallbackClass}>
+      <img src={avatarUrl} alt={name} class={videoTileAvatarCircleClass} />
+    </div>
+  ) : (
+    <!-- Initials fallback -->
+    <div class={videoTileAvatarFallbackClass}>
+      <div class={videoTileAvatarCircleClass} aria-hidden="true">{initials}</div>
+    </div>
+  )}
+
+  {/* Reaction badge (top-right) — via named slot */}
+  <slot name="reaction" />
+
+  <!-- Name chip (bottom-left) -->
+  <div class={videoTileNameChipClass}>
+    <span>{name}</span>
+    {isMuted && (
+      <span class={videoTileMicIconClass} aria-label="Microphone muted">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <line x1="2" y1="2" x2="22" y2="22" />
+          <path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2" />
+          <path d="M5 10v2a7 7 0 0 0 12 5" />
+          <path d="M15 9.34V5a3 3 0 0 0-5.68-1.33" />
+          <path d="M9 9v3a3 3 0 0 0 5.12 2.12" />
+          <line x1="12" y1="19" x2="12" y2="22" />
+        </svg>
+      </span>
+    )}
+  </div>
+</div>

package/dist/astro-video-tile/index.ts

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