@exegia/corpora-ui 0.29.0 → 1.0.0

package/src/components/ui/chat/buttons.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { Play, Plus, X } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button, type ButtonProps } from "@/components/ui/button"
+
+type IconButtonProps = Omit<ButtonProps, "variant" | "size" | "glassVariant" | "children">
+
+/**
+ * 18px filled circle with an inverse ✕, used on composer chips.
+ *
+ * @sketch "Atom / Button / Remove"
+ */
+export function RemoveButton({ className, ...props }: IconButtonProps): React.ReactElement {
+  return (
+    <Button
+      aria-label="Remove"
+      variant="ghost"
+      size="icon-xs"
+      className={cn(
+        "size-[18px] rounded-full border-0 bg-text-primary text-text-inverse hover:bg-text-primary/85 sm:size-[18px] [&_svg]:size-2.5! [&_svg]:opacity-100",
+        className
+      )}
+      {...props}
+    >
+      <X strokeWidth={3} />
+    </Button>
+  )
+}
+
+/**
+ * 36px scrim circle with a white play glyph, centred on media previews.
+ *
+ * @sketch "Atom / Button / Play"
+ */
+export function PlayButton({ className, ...props }: IconButtonProps): React.ReactElement {
+  return (
+    <Button
+      aria-label="Play"
+      variant="ghost"
+      size="icon"
+      className={cn(
+        "size-9 rounded-full border-0 bg-overlay-scrim text-overlay-on-media hover:bg-overlay-scrim/80 sm:size-9 [&_svg]:size-3.5! [&_svg]:translate-x-px [&_svg]:fill-current [&_svg]:opacity-100",
+        className
+      )}
+      {...props}
+    >
+      <Play />
+    </Button>
+  )
+}
+
+/**
+ * 26px ghost "+" for the composer's attach action.
+ *
+ * @sketch "Atom / Button / Add"
+ */
+export function AddButton({ className, ...props }: IconButtonProps): React.ReactElement {
+  return (
+    <Button
+      aria-label="Add attachment"
+      variant="ghost"
+      size="icon-xs"
+      className={cn("size-[26px] rounded-md text-icon sm:size-[26px] [&_svg]:size-4!", className)}
+      {...props}
+    >
+      <Plus />
+    </Button>
+  )
+}
+
+export type SendButtonProps = Omit<ButtonProps, "variant" | "glassVariant">
+
+/**
+ * Brand-yellow 61×31 pill, radius 8, dark label.
+ *
+ * @sketch "Atom / Button / Send"
+ */
+export function SendButton({ className, children = "Send", ...props }: SendButtonProps): React.ReactElement {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn(
+        "h-[31px] rounded-md border-0 bg-brand px-4 text-[13px] font-semibold text-[#1a1a1a] shadow-none hover:bg-brand/90 data-pressed:bg-brand/90 sm:h-[31px] *:data-[slot=button-loading-indicator]:text-[#1a1a1a]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/ui/chat/chips.tsx

@@ -0,0 +1,106 @@
+import { CornerDownLeft } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Favicon } from "./badges"
+import { Dot, type DotTone } from "./dot"
+
+export interface SourceChipProps extends React.ComponentPropsWithoutRef<"span"> {
+  favicon?: string
+  /** Domain in mono ("scoopdata.io"). */
+  children: React.ReactNode
+}
+
+/**
+ * 18px pill with a favicon and a mono domain, inline in streamed text.
+ *
+ * @sketch "Atom / Source Chip"
+ */
+export function SourceChip({ favicon, className, children, ...props }: SourceChipProps): React.ReactElement {
+  return (
+    <span
+      data-slot="source-chip"
+      className={cn("inline-flex h-[18px] items-center gap-1.5 rounded-full bg-surface-subtle py-0.5 pl-0.5 pr-2 align-middle font-mono text-[10.5px] leading-none text-text-secondary", className)}
+      {...props}
+    >
+      <Favicon src={favicon} size={14} />
+      {children}
+    </span>
+  )
+}
+
+export interface AvatarStackProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** Up to three tones or image urls, rendered overlapping. */
+  items?: (DotTone | { src: string })[]
+}
+
+/**
+ * Three overlapping 14px circles.
+ *
+ * @sketch "Atom / Avatar Stack"
+ */
+export function AvatarStack({ items = ["series-1", "series-3", "series-4"], className, ...props }: AvatarStackProps): React.ReactElement {
+  return (
+    <span aria-hidden="true" data-slot="avatar-stack" className={cn("inline-flex items-center", className)} {...props}>
+      {items.slice(0, 3).map((item, i) => (
+        <span key={i} className={cn("inline-flex size-3.5 overflow-hidden rounded-full ring-2 ring-surface-card", i > 0 && "-ml-1.5")}>
+          {typeof item === "string" ? <Dot tone={item} className="size-full rounded-full" /> : <img alt="" className="size-full object-cover" src={item.src} />}
+        </span>
+      ))}
+    </span>
+  )
+}
+
+export interface StatProps extends React.ComponentPropsWithoutRef<"div"> {
+  tone?: DotTone
+  label: React.ReactNode
+  value: React.ReactNode
+  /** Secondary mono line ("−$2,377.66"). */
+  delta?: React.ReactNode
+  trend?: "positive" | "negative"
+}
+
+/**
+ * 152×64 stat: dot + label, big coloured value, mono delta.
+ *
+ * @sketch "Atom / Stat / {Positive, Negative}"
+ */
+export function Stat({ tone = "series-1", label, value, delta, trend = "positive", className, ...props }: StatProps): React.ReactElement {
+  const color = trend === "positive" ? "text-semantic-success" : "text-semantic-danger"
+  return (
+    <div data-slot="stat" data-trend={trend} className={cn("flex w-[152px] flex-col gap-1", className)} {...props}>
+      <span className="flex items-center gap-2 text-[11px] leading-none text-text-secondary">
+        <Dot tone={tone} />
+        <span className="truncate">{label}</span>
+      </span>
+      <span className={cn("text-[17px] font-semibold leading-5", color)}>{value}</span>
+      {delta !== undefined ? <span className={cn("font-mono text-[11px] leading-none", color)}>{delta}</span> : null}
+    </div>
+  )
+}
+
+export interface FollowUpRowProps extends Omit<React.ComponentPropsWithoutRef<"button">, "onSelect"> {
+  onSelect?: () => void
+}
+
+/**
+ * Full-width follow-up prompt with a return-arrow icon and a hairline base.
+ *
+ * @sketch "Atom / Follow-up Row"
+ */
+export function FollowUpRow({ onSelect, className, children, ...props }: FollowUpRowProps): React.ReactElement {
+  return (
+    <button
+      type="button"
+      data-slot="follow-up-row"
+      onClick={onSelect}
+      className={cn(
+        "flex h-8 w-full items-center gap-2.5 border-b border-border-default px-1 text-left text-[12.5px] leading-none text-text-primary outline-none transition-colors hover:bg-surface-subtle focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-text-muted",
+        className
+      )}
+      {...props}
+    >
+      <CornerDownLeft />
+      <span className="truncate">{children}</span>
+    </button>
+  )
+}

package/src/components/ui/chat/dot.tsx

@@ -0,0 +1,81 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type DotTone =
+  | "success" | "warning" | "info" | "danger" | "neutral" | "accent" | "brand"
+  | "series-1" | "series-2" | "series-3" | "series-4" | "series-5"
+
+export const DOT_TONE_CLASSES: Record<DotTone, string> = {
+  success: "bg-semantic-success",
+  warning: "bg-semantic-warning",
+  info: "bg-semantic-info",
+  danger: "bg-semantic-danger",
+  neutral: "bg-text-muted",
+  accent: "bg-accent-default",
+  brand: "bg-brand",
+  "series-1": "bg-chart-series-1",
+  "series-2": "bg-chart-series-2",
+  "series-3": "bg-chart-series-3",
+  "series-4": "bg-chart-series-4",
+  "series-5": "bg-chart-series-5",
+}
+
+export interface DotProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: DotTone
+  size?: 6 | 8
+}
+
+/**
+ * Status / series marker.
+ *
+ * @sketch "Atom / Dot / {Success, Warning, Info, Danger, Neutral, Accent, Brand, Series 3, Series 4}"
+ */
+export function Dot({ tone = "neutral", size = 8, className, ...props }: DotProps): React.ReactElement {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="dot"
+      data-tone={tone}
+      className={cn("inline-block shrink-0 rounded-full", size === 8 ? "size-2" : "size-1.5", DOT_TONE_CLASSES[tone], className)}
+      {...props}
+    />
+  )
+}
+
+export interface LegendItemProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: DotTone
+  /** Optional trailing value ("42%"). */
+  value?: React.ReactNode
+}
+
+/**
+ * Dot + label (+ value) row for chart legends.
+ *
+ * @sketch "Atom / Legend Item"
+ */
+export function LegendItem({ tone = "series-1", value, className, children, ...props }: LegendItemProps): React.ReactElement {
+  return (
+    <span data-slot="legend-item" className={cn("inline-flex h-4 items-center gap-2 text-[11px] leading-none text-text-secondary", className)} {...props}>
+      <Dot tone={tone} />
+      <span className="truncate">{children}</span>
+      {value !== undefined ? <span className="ml-auto pl-3 font-medium text-text-primary">{value}</span> : null}
+    </span>
+  )
+}
+
+/**
+ * 20px neutral pill for chart-type badges and counts.
+ *
+ * @sketch "Atom / Pill"
+ */
+export function Pill({ className, children, ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
+  return (
+    <span
+      data-slot="pill"
+      className={cn("inline-flex h-5 shrink-0 items-center rounded-full bg-surface-subtle px-2.5 text-[11px] font-medium leading-none text-text-secondary", className)}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/ui/chat/icon-button.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button, type ButtonProps } from "@/components/ui/button"
+
+export type IconButtonProps = Omit<ButtonProps, "variant" | "size" | "glassVariant" | "aria-label"> & {
+  /** Required: icon-only controls need a name. */
+  "aria-label": string
+}
+
+/**
+ * 24px ghost control framing a 16px icon.
+ *
+ * @sketch "Atom / Icon Button"
+ */
+export function IconButton({ className, ...props }: IconButtonProps): React.ReactElement {
+  return (
+    <Button
+      variant="ghost"
+      size="icon-xs"
+      className={cn("size-6 rounded-md text-icon hover:bg-surface-subtle hover:text-text-primary sm:size-6 [&_svg]:size-4! [&_svg]:opacity-100", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Violet "Agent" chip beside the assistant's name.
+ *
+ * @sketch "Atom / Badge / Agent"
+ */
+export function AgentBadge({ className, children = "Agent", ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
+  return (
+    <span
+      data-slot="agent-badge"
+      className={cn("inline-flex h-5 shrink-0 items-center rounded-[4px] bg-accent-subtle px-2 text-[11px] font-medium leading-none text-accent-text", className)}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/ui/chat/icon-tile.tsx

@@ -0,0 +1,33 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+const SIZES = { 28: "size-7 rounded-md", 32: "size-8 rounded-[10px]", 36: "size-9 rounded-[10px]", 40: "size-10 rounded-[10px]" } as const
+
+export interface IconTileProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** Tile edge in px. The design uses 40 (attachments), 32 (agent avatar), 28 (research kicker), 36 (flowchart node). */
+  size?: keyof typeof SIZES
+  /** Fill the tile with the accent-subtle tint instead of the neutral surface. */
+  tone?: "neutral" | "accent"
+}
+
+/**
+ * Square tile that frames a 16px lucide icon.
+ *
+ * @sketch "Atom / Icon Tile"
+ */
+export function IconTile({ size = 40, tone = "neutral", className, children, ...props }: IconTileProps): React.ReactElement {
+  return (
+    <span
+      data-slot="icon-tile"
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center [&_svg]:size-4 [&_svg]:shrink-0",
+        SIZES[size],
+        tone === "accent" ? "bg-accent-subtle text-accent-text" : "bg-surface-subtle text-icon",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}

package/src/components/ui/chat/index.ts

@@ -0,0 +1,12 @@
+export { IconTile, type IconTileProps } from "./icon-tile"
+export { Thumbnail, type ThumbnailProps } from "./thumbnail"
+export { AvatarHandle, type AvatarHandleProps } from "./avatar-handle"
+export { AddButton, PlayButton, RemoveButton, SendButton, type SendButtonProps } from "./buttons"
+export { DurationPill, Favicon, FileTypeBadge, QuoteRail, type FaviconProps } from "./badges"
+export { Waveform, type WaveformProps } from "./waveform"
+export { DOT_TONE_CLASSES, Dot, LegendItem, Pill, type DotProps, type DotTone, type LegendItemProps } from "./dot"
+export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from "./segmented-toggle"
+export { AgentBadge, IconButton, type IconButtonProps } from "./icon-button"
+export { Signal, Tag, type SignalLevel, type SignalProps, type TagProps, type TagTone } from "./tag"
+export { AvatarStack, FollowUpRow, SourceChip, Stat, type AvatarStackProps, type FollowUpRowProps, type SourceChipProps, type StatProps } from "./chips"
+export { InlineSource, type InlineSourceProps } from "./inline-source"

package/src/components/ui/chat/inline-source.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import { ArrowUpRight } from "lucide-react"
+import type * as React from "react"
+import { Button } from "@/components/ui/button"
+import {
+  PreviewCard,
+  PreviewCardPopup,
+  PreviewCardTrigger,
+} from "@/components/ui/preview-card"
+import { cn } from "@/lib/utils"
+import { Favicon } from "./badges"
+import { SourceChip } from "./chips"
+
+export interface InlineSourceProps
+  extends Omit<React.ComponentPropsWithoutRef<"span">, "title"> {
+  /** Domain shown in the chip ("scoopdata.io"). */
+  domain: React.ReactNode
+  favicon?: string
+  /** Source title in the popover. */
+  title?: React.ReactNode
+  /** Excerpt or summary in the popover. */
+  description?: React.ReactNode
+  /** Opens the source in a new tab from the popover. */
+  href?: string
+  openLabel?: React.ReactNode
+}
+
+/**
+ * Inline citation: a SourceChip that, when it carries a title, description
+ * or href, opens a hover preview with an "Open source" button.
+ *
+ * @sketch "Atom / Inline Source"
+ */
+export function InlineSource({
+  domain,
+  favicon,
+  title,
+  description,
+  href,
+  openLabel = "Open source",
+  className,
+  ...props
+}: InlineSourceProps): React.ReactElement {
+  const chip = (
+    <SourceChip
+      className={cn(href || title || description ? "cursor-default" : null, className)}
+      data-slot="inline-source"
+      favicon={favicon}
+      {...props}
+    >
+      {domain}
+    </SourceChip>
+  )
+  if (!href && !title && !description) return chip
+
+  return (
+    <PreviewCard>
+      <PreviewCardTrigger delay={250} render={chip} />
+      <PreviewCardPopup
+        className="w-72 flex-col gap-2 p-3"
+        data-slot="inline-source-preview"
+      >
+        <span className="flex items-center gap-2">
+          <Favicon src={favicon} />
+          <span className="flex min-w-0 flex-col">
+            {title ? (
+              <span className="truncate text-xs font-semibold leading-4 text-foreground">
+                {title}
+              </span>
+            ) : null}
+            <span className="truncate font-mono text-[11px] leading-4 text-muted-foreground">
+              {domain}
+            </span>
+          </span>
+        </span>
+        {description ? (
+          <p className="text-xs leading-4 text-foreground/90">{description}</p>
+        ) : null}
+        {href ? (
+          <Button
+            className="self-start"
+            render={<a href={href} rel="noreferrer" target="_blank" />}
+            size="xs"
+            variant="outline"
+          >
+            {openLabel}
+            <ArrowUpRight className="size-3" />
+          </Button>
+        ) : null}
+      </PreviewCardPopup>
+    </PreviewCard>
+  )
+}

package/src/components/ui/chat/segmented-toggle.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { motion, useReducedMotion } from "motion/react"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { SPRING_LAYOUT } from "@/lib/ease"
+import { playCue } from "@/lib/sound"
+
+export interface SegmentedToggleOption<T extends string> {
+  value: T
+  label: React.ReactNode
+}
+
+export interface SegmentedToggleProps<T extends string> extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+  options: readonly SegmentedToggleOption<T>[]
+  value?: T
+  defaultValue?: T
+  onValueChange?: (value: T) => void
+  /** Accessible group name. */
+  label?: string
+  sound?: boolean
+}
+
+/**
+ * Two-or-more segment switch with a sliding active pill.
+ *
+ * @sketch "Atom / Segmented Toggle", "Atom / Segmented Toggle / Right"
+ */
+export function SegmentedToggle<T extends string>({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  label,
+  sound = true,
+  className,
+  ...props
+}: SegmentedToggleProps<T>): React.ReactElement {
+  const reduceMotion = useReducedMotion()
+  const layoutId = React.useId()
+  const [internal, setInternal] = React.useState<T>(defaultValue ?? options[0].value)
+  const current = value ?? internal
+
+  const select = (next: T) => {
+    if (next === current) return
+    if (value === undefined) setInternal(next)
+    onValueChange?.(next)
+    if (sound) playCue("toggle")
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent, index: number) => {
+    const delta = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0
+    if (!delta) return
+    e.preventDefault()
+    const next = options[(index + delta + options.length) % options.length]
+    select(next.value)
+    ;(e.currentTarget.parentElement?.querySelector(`[data-value="${next.value}"]`) as HTMLElement | null)?.focus()
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={label}
+      data-slot="segmented-toggle"
+      className={cn("inline-flex h-6 items-center rounded-md bg-surface-subtle p-0.5", className)}
+      {...props}
+    >
+      {options.map((option, index) => {
+        const active = option.value === current
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            data-value={option.value}
+            tabIndex={active ? 0 : -1}
+            onClick={() => select(option.value)}
+            onKeyDown={(e) => onKeyDown(e, index)}
+            className={cn(
+              "relative h-5 rounded-[5px] px-2 text-[11px] font-medium leading-none outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+              active ? "text-text-primary" : "text-text-secondary hover:text-text-primary"
+            )}
+          >
+            {active ? (
+              <motion.span
+                aria-hidden="true"
+                layoutId={layoutId}
+                transition={reduceMotion ? { duration: 0 } : SPRING_LAYOUT}
+                className="absolute inset-0 rounded-[5px] bg-surface-card shadow-[0_1px_2px_rgb(0_0_0/0.12)] dark:shadow-[0_1px_2px_rgb(0_0_0/0.5)]"
+              />
+            ) : null}
+            <span className="relative">{option.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/ui/chat/tag.tsx

@@ -0,0 +1,61 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+export type TagTone = "amber" | "purple" | "blue" | "green"
+
+const TONE: Record<TagTone, string> = {
+  amber: "border-tag-amber-border bg-tag-amber-fill text-tag-amber-text",
+  purple: "border-tag-purple-border bg-tag-purple-fill text-tag-purple-text",
+  blue: "border-tag-blue-border bg-tag-blue-fill text-tag-blue-text",
+  green: "border-tag-green-border bg-tag-green-fill text-tag-green-text",
+}
+
+export interface TagProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: TagTone
+}
+
+/**
+ * 22px tinted label with a hairline border.
+ *
+ * @sketch "Atom / Tag / {Amber, Purple, Blue, Green}"
+ */
+export function Tag({ tone = "blue", className, children, ...props }: TagProps): React.ReactElement {
+  return (
+    <span
+      data-slot="tag"
+      data-tone={tone}
+      className={cn("inline-flex h-[22px] shrink-0 items-center rounded-lg border px-2 text-[11px] font-medium leading-none", TONE[tone], className)}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export type SignalLevel = "high" | "medium" | "low"
+
+const SIGNAL: Record<SignalLevel, { lit: number; color: string }> = {
+  high: { lit: 3, color: "bg-semantic-success" },
+  medium: { lit: 2, color: "bg-semantic-warning" },
+  low: { lit: 1, color: "bg-text-muted" },
+}
+
+export interface SignalProps extends React.ComponentPropsWithoutRef<"span"> {
+  level?: SignalLevel
+}
+
+/**
+ * Three-bar confidence meter.
+ *
+ * @sketch "Atom / Signal / {High, Medium, Low}"
+ */
+export function Signal({ level = "high", className, ...props }: SignalProps): React.ReactElement {
+  const { lit, color } = SIGNAL[level]
+  return (
+    <span role="img" aria-label={`${level} signal`} data-slot="signal" data-level={level} className={cn("inline-flex h-2.5 items-end gap-0.5", className)} {...props}>
+      {[0, 1, 2].map((i) => (
+        <span key={i} className={cn("w-1 rounded-[1px]", i < lit ? color : "bg-surface-subtle", i === 0 ? "h-1.5" : i === 1 ? "h-2" : "h-2.5")} />
+      ))}
+    </span>
+  )
+}

package/src/components/ui/chat/thumbnail.tsx

@@ -0,0 +1,31 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface ThumbnailProps extends React.ComponentPropsWithoutRef<"span"> {
+  src?: string
+  alt?: string
+  /** `sm` is the 40px chip tile (radius 10); `lg` the 240×160 preview (radius 14). */
+  size?: "sm" | "lg"
+}
+
+/**
+ * Image slot with a gradient placeholder when `src` is missing.
+ *
+ * @sketch "Atom / Thumbnail / Small", "Atom / Thumbnail / Large"
+ */
+export function Thumbnail({ src, alt = "", size = "sm", className, children, ...props }: ThumbnailProps): React.ReactElement {
+  return (
+    <span
+      data-slot="thumbnail"
+      className={cn(
+        "relative block shrink-0 overflow-hidden bg-[linear-gradient(135deg,#8b7bd8_0%,#c9b3ff_45%,#f2b48a_100%)]",
+        size === "sm" ? "size-10 rounded-[10px]" : "aspect-[3/2] w-60 rounded-[14px]",
+        className
+      )}
+      {...props}
+    >
+      {src ? <img alt={alt} className="size-full object-cover" src={src} /> : null}
+      {children}
+    </span>
+  )
+}