@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/list-detail.tsx

@@ -0,0 +1,275 @@
+import { Collapsible } from "@base-ui/react/collapsible";
+import { type ComponentProps, type ReactNode, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { CodePanel } from "./code-panel";
+import { LiquidGlass } from "./liquid-glass";
+
+export type ListDetailItem = {
+  id: string;
+  title: ReactNode;
+  meta?: ReactNode;
+};
+
+export type ListDetailGroup = {
+  id: string;
+  label: ReactNode;
+  items: ListDetailItem[];
+};
+
+export type ListDetailProps = Omit<ComponentProps<"div">, "className" | "children" | "onChange"> & {
+  groups: ListDetailGroup[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (id: string) => void;
+  /** Renders the detail pane for the selected item. */
+  children: (item: ListDetailItem) => ReactNode;
+  /** `solid` (default) is an opaque surface shell with a default border; `glass` is the thick glass shell. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/**
+ * Paper `List and detail` (1W6P-0): a 16px-radius shell, solid or thick glass, with a 250px list on an inset
+ * surface and a detail pane. Selecting a row fills it in 150ms and swaps the detail with a short rise.
+ */
+export function ListDetail({
+  groups,
+  value,
+  defaultValue,
+  onValueChange,
+  children,
+  surface = "solid",
+  className,
+  ...props
+}: ListDetailProps) {
+  const all = groups.flatMap((group) => group.items);
+  const [inner, setInner] = useState(defaultValue ?? all[0]?.id);
+  const selectedId = value ?? inner;
+  const selected = all.find((item) => item.id === selectedId) ?? all[0];
+  const mutedClass = "text-text-secondary";
+  return (
+    <div
+      className={cn(
+        // Below `sm` the two panes stack: the list would otherwise hold its 250px
+        // and leave the detail pane nothing to render in.
+        "relative flex w-full max-w-201.5 min-w-0 flex-col overflow-clip rounded-2xl sm:flex-row",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <div
+        role="listbox"
+        aria-label="Items"
+        className={cn(
+          "relative flex w-full shrink-0 flex-col gap-3 border-b border-border-default p-2.5 sm:w-62.5 sm:border-r sm:border-b-0",
+          surface === "glass" ? "bg-transparent" : "bg-bg-inset",
+        )}
+      >
+        {groups.map((group) => (
+          <div key={group.id} className="flex flex-col gap-0.5">
+            <span className={cn("px-3 py-1 text-label-sm font-semibold tracking-[0.04em]", mutedClass)}>
+              {group.label}
+            </span>
+            {group.items.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                role="option"
+                aria-selected={item.id === selected?.id}
+                data-selected={item.id === selected?.id ? "" : undefined}
+                className="flex cursor-pointer flex-col gap-1 rounded-[10px] px-3 py-2.5 text-left motion-colors hover:bg-overlay-ink-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-selected:bg-overlay-ink-6 data-selected:hover:bg-overlay-ink-8"
+                onClick={() => {
+                  setInner(item.id);
+                  onValueChange?.(item.id);
+                }}
+              >
+                <span className="flex items-center gap-2">
+                  <span className="min-w-0 truncate font-mono text-label-md text-text-primary">{item.title}</span>
+                </span>
+                {item.meta && <span className={cn("text-label-sm", mutedClass)}>{item.meta}</span>}
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+      <div key={selected?.id} className="relative flex min-w-0 flex-1 motion-rise flex-col gap-5 px-6 py-5.5">
+        {selected && children(selected)}
+      </div>
+    </div>
+  );
+}
+
+export type ListDetailHeaderProps = Omit<ComponentProps<"div">, "className" | "title"> & {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Right-hand cluster: a state label, a `Switch`, an icon button. */
+  actions?: ReactNode;
+  className?: string;
+};
+
+/** Detail header: a 40px sky tile with an 18px icon, title and description, actions on the right. */
+export function ListDetailHeader({ icon, title, description, actions, className, ...props }: ListDetailHeaderProps) {
+  return (
+    <div className={cn("flex flex-wrap items-center gap-3", className)} {...props}>
+      {icon && (
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300 [&_svg]:size-5">
+          {icon}
+        </span>
+      )}
+      <div className="flex min-w-0 flex-1 flex-col">
+        <span className="font-mono text-label-lg font-semibold text-text-primary">{title}</span>
+        {description && <span className="text-body-sm text-text-secondary">{description}</span>}
+      </div>
+      {actions && <div className="flex shrink-0 items-center gap-3">{actions}</div>}
+    </div>
+  );
+}
+
+export type ListDetailMetaProps = Omit<ComponentProps<"dl">, "className"> & {
+  items: { id: string; label: ReactNode; value: ReactNode }[];
+  className?: string;
+};
+
+/** Meta box: a subtle-fill 12px-radius box with equal columns of a label over a 14/20 value. */
+export function ListDetailMeta({ items, className, ...props }: ListDetailMetaProps) {
+  return (
+    <dl
+      className={cn("m-0 grid grid-cols-2 gap-x-4 gap-y-3 rounded-md bg-bg-subtle px-4 py-3.5", className)}
+      {...props}
+    >
+      {items.map((item) => (
+        <div key={item.id} className="flex min-w-0 flex-1 flex-col gap-0.5">
+          <dt className="text-label-sm text-text-secondary">{item.label}</dt>
+          <dd className="m-0 truncate text-label-md text-text-primary">{item.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export type ListDetailInstructionsProps = Omit<ComponentProps<"div">, "className" | "onChange"> & {
+  title?: ReactNode;
+  /** Small chip beside the title, such as the file name. */
+  tag?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+};
+
+function renderInstructions(text: string) {
+  const lines = text.split("\n");
+  let fences = 0;
+  let offset = 0;
+  return lines.map((line, index) => {
+    const start = offset;
+    offset += line.length + 1;
+    if (line.trim() === "---") fences += 1;
+    const key = fences === 1 ? /^([\w-]+:)(.*)$/.exec(line) : null;
+    return (
+      <span key={start}>
+        {key ? (
+          <>
+            <span className="text-syntax-key">{key[1]}</span>
+            {key[2]}
+          </>
+        ) : (
+          line
+        )}
+        {index < lines.length - 1 && "\n"}
+      </span>
+    );
+  });
+}
+
+/**
+ * Instructions block: header with an Edit button and a code panel. Edit opens a textarea under the panel with
+ * the 240ms collapse transition.
+ */
+export function ListDetailInstructions({
+  title = "Instructions",
+  tag,
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  ...props
+}: ListDetailInstructionsProps) {
+  const [inner, setInner] = useState(defaultValue);
+  const [editing, setEditing] = useState(false);
+  const text = value ?? inner;
+  return (
+    <div className={cn("flex flex-col gap-2", className)} {...props}>
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-label-md font-semibold text-text-primary">{title}</span>
+        {tag && (
+          <span className="inline-flex h-5.5 items-center rounded-full bg-overlay-ink-6 px-2 text-label-sm text-text-secondary">
+            {tag}
+          </span>
+        )}
+        <span className="flex-1" />
+        <Button
+          variant="solid"
+          size="sm"
+          aria-pressed={editing}
+          onClick={() => setEditing((open) => !open)}
+          className="w-16 justify-center px-0"
+        >
+          <span key={editing ? "done" : "edit"} className="animate-fade-in">
+            {editing ? "Done" : "Edit"}
+          </span>
+        </Button>
+      </div>
+      <CodePanel>{renderInstructions(text)}</CodePanel>
+      <Collapsible.Root open={editing} onOpenChange={setEditing}>
+        <Collapsible.Panel className="motion-collapse">
+          <textarea
+            aria-label="Edit instructions"
+            value={text}
+            rows={6}
+            className="block w-full resize-y rounded-[10px] border border-border-default bg-bg-inset px-4 py-3.5 font-mono text-[12px]/[21px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+            onChange={(event) => {
+              setInner(event.target.value);
+              onValueChange?.(event.target.value);
+            }}
+          />
+        </Collapsible.Panel>
+      </Collapsible.Root>
+    </div>
+  );
+}
+
+export type ListDetailFilesProps = Omit<ComponentProps<"div">, "className"> & {
+  label?: ReactNode;
+  /** Chips, usually a small `Button` with an icon. */
+  children: ReactNode;
+  className?: string;
+};
+
+/** Files row: a 13/18 label over a wrap of 32px glass chips, 6px apart. */
+export function ListDetailFiles({ label = "Files", children, className, ...props }: ListDetailFilesProps) {
+  return (
+    <div className={cn("flex flex-col gap-2", className)} {...props}>
+      <span className="text-label-md font-semibold text-text-primary">{label}</span>
+      <div className="flex flex-wrap gap-1.5">{children}</div>
+    </div>
+  );
+}
+
+/** Footer: a 1px top rule and 8px-spaced glass buttons; use `<span className="flex-1" />` as the spacer. */
+export function ListDetailFooter({
+  className,
+  ...props
+}: Omit<ComponentProps<"div">, "className"> & { className?: string }) {
+  return (
+    <div
+      className={cn("flex flex-wrap items-center gap-2 border-t border-border-default pt-3.5", className)}
+      {...props}
+    />
+  );
+}

package/src/components/marketplace-card.tsx

@@ -0,0 +1,97 @@
+import { Star } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { LiquidGlass } from "./liquid-glass";
+
+export type MarketplaceCardProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Two-letter initials shown on the 40px ink tile. */
+  initials: string;
+  name: ReactNode;
+  author?: ReactNode;
+  description?: ReactNode;
+  /** Capability chips, each with an optional 11px icon. */
+  chips?: { id: string; label: ReactNode; icon?: ReactNode }[];
+  score?: ReactNode;
+  installs?: ReactNode;
+  onInstall?: () => void;
+  installLabel?: string;
+  /** `solid` (default) is an opaque surface card with a default border; `glass` is the thick glass card. */
+  surface?: "solid" | "glass";
+};
+
+/** Paper `Marketplace card` (Settings 1VMY-0): solid or thick glass column with tile header, description, chips and a footer with rating and Install. */
+export function MarketplaceCard({
+  initials,
+  name,
+  author,
+  description,
+  chips,
+  score,
+  installs,
+  onInstall,
+  installLabel = "Install",
+  surface = "solid",
+  className,
+  ...props
+}: MarketplaceCardProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col gap-3 overflow-clip rounded-xl p-4",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <div className="relative flex items-center gap-3">
+        <span
+          aria-hidden
+          className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-neutral-900 text-label-md text-neutral-50"
+        >
+          {initials}
+        </span>
+        <span className="flex min-w-0 flex-col gap-0.5">
+          <span className="truncate text-label-md text-text-primary">{name}</span>
+          {author && <span className="truncate text-caption text-text-secondary">{author}</span>}
+        </span>
+      </div>
+      {description && <p className="relative text-body-sm text-text-secondary">{description}</p>}
+      {chips && chips.length > 0 && (
+        <div className="relative flex flex-wrap gap-1.5">
+          {chips.map((chip) => (
+            <span
+              key={chip.id}
+              className="inline-flex h-5.5 items-center gap-1 rounded-full bg-overlay-ink-6 px-2 text-label-sm text-text-secondary [&_svg]:size-3"
+            >
+              {chip.icon}
+              {chip.label}
+            </span>
+          ))}
+        </div>
+      )}
+      <div className="relative flex items-center gap-1.5 border-t border-border-default pt-3">
+        {score && (
+          <>
+            <Star aria-hidden weight="fill" className="size-3.5 text-mascot-gold" />
+            <span className="text-label-sm text-text-primary">{score}</span>
+          </>
+        )}
+        {score && installs && (
+          <span aria-hidden className="text-caption text-text-placeholder">
+            ·
+          </span>
+        )}
+        {installs && <span className="text-caption text-text-secondary">{installs}</span>}
+        <span className="flex-1" />
+        {onInstall && (
+          <Button variant="solid" size="sm" onClick={onInstall}>
+            {installLabel}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/mcp-server-row.tsx

@@ -0,0 +1,122 @@
+import { DotsThree, GearSix } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Button } from "./button";
+import { IconButton } from "./icon-button";
+import { Menu, MenuContent, MenuTrigger } from "./menu";
+
+const pillClass = "inline-flex h-5.5 items-center rounded-full px-2 text-label-sm";
+
+export type McpServerStatusTone = "connected" | "warning" | "neutral";
+
+const statusToneClass: Record<McpServerStatusTone, { pill: string; dot: string }> = {
+  connected: { pill: "bg-overlay-ink-6 text-text-primary", dot: "bg-status-live" },
+  warning: { pill: "bg-accent-red-500-14 text-text-danger", dot: "bg-text-danger" },
+  neutral: { pill: "bg-overlay-ink-6 text-text-secondary", dot: "bg-text-placeholder" },
+};
+
+/** Suffixes repeated values with their occurrence so duplicate tags never share a React key. */
+const withKeys = (values: string[] | undefined) => {
+  const seen = new Map<string, number>();
+  return (values ?? []).map((value) => {
+    const count = seen.get(value) ?? 0;
+    seen.set(value, count + 1);
+    return { value, key: count === 0 ? value : `${value}#${count}` };
+  });
+};
+
+export type McpServerRowProps = Omit<ComponentProps<"div">, "className" | "title"> & {
+  /** Server name; its first two letters fill the 40px tile unless `initials` is set. */
+  name: string;
+  initials?: string;
+  /** Tags next to the name, such as "Official". */
+  tags?: string[];
+  /** Tags tinted brand, such as "All devices". */
+  brandTags?: string[];
+  description?: ReactNode;
+  /** Meta line, joined by "·". */
+  meta?: string[];
+  statusLabel?: ReactNode;
+  /** Colour of the status pill: a live dot by default, a danger tint for a warning, a muted dot for a neutral state. */
+  statusTone?: McpServerStatusTone;
+  configureLabel?: ReactNode;
+  onConfigure?: () => void;
+  /** Overflow menu items (`MenuItem`). Hides the overflow button when absent. */
+  menu?: ReactNode;
+  menuLabel?: string;
+  className?: string;
+};
+
+/** Paper `MCP server row` (1VHS-0): a divided row with a 40px tile, tags, a status pill and two actions. */
+export function McpServerRow({
+  name,
+  initials,
+  tags,
+  brandTags,
+  description,
+  meta,
+  statusLabel = "Connected",
+  statusTone = "connected",
+  configureLabel = "Configure",
+  onConfigure,
+  menu,
+  menuLabel = "More",
+  className,
+  ...props
+}: McpServerRowProps) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-wrap items-center gap-x-3.5 gap-y-3 border-b border-border-default py-4 last:border-b-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-label-md text-neutral-50">
+        {initials ?? name.slice(0, 2).toUpperCase()}
+      </span>
+      <div className="flex min-w-0 grow basis-40 flex-col gap-1">
+        <div className="flex min-w-0 flex-wrap items-center gap-2">
+          <span className="max-w-full min-w-0 truncate text-label-md text-text-primary">{name}</span>
+          {withKeys(tags).map(({ value, key }) => (
+            <span key={key} className={cn(pillClass, "bg-overlay-ink-6 text-text-secondary")}>
+              {value}
+            </span>
+          ))}
+          {withKeys(brandTags).map(({ value, key }) => (
+            <span key={key} className={cn(pillClass, "bg-accent-sky-500-18 text-text-brand")}>
+              {value}
+            </span>
+          ))}
+        </div>
+        {description && <span className="text-body-sm wrap-break-word text-text-secondary">{description}</span>}
+        {meta && meta.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 text-label-sm text-text-secondary">
+            {withKeys(meta).map(({ value, key }, i) => (
+              <span key={key} className="inline-flex items-center gap-1.5">
+                {i > 0 && <span aria-hidden>·</span>}
+                {value}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+      <span className={cn(pillClass, "shrink-0 gap-1.5", statusToneClass[statusTone].pill)}>
+        <span aria-hidden className={cn("size-1.5 rounded-full", statusToneClass[statusTone].dot)} />
+        {statusLabel}
+      </span>
+      <Button variant="solid" size="sm" icon={<GearSix aria-hidden className="size-3.5" />} onClick={onConfigure}>
+        {configureLabel}
+      </Button>
+      {menu && (
+        <Menu>
+          <MenuTrigger
+            render={<IconButton label={menuLabel} variant="ghost" size="sm" icon={<DotsThree aria-hidden />} />}
+          />
+          <MenuContent align="end">{menu}</MenuContent>
+        </Menu>
+      )}
+    </div>
+  );
+}

package/src/components/menu.tsx

@@ -0,0 +1,165 @@
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { createContext, useContext, type ComponentProps, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+type WithClass<T> = Omit<T, "className"> & { className?: string };
+
+export type MenuSurface = "glass" | "solid" | "paper";
+
+const SurfaceContext = createContext<MenuSurface>("glass");
+
+export const Menu = BaseMenu.Root;
+export const MenuTrigger = BaseMenu.Trigger;
+
+export type MenuContentProps = WithClass<ComponentProps<typeof BaseMenu.Popup>> & {
+  /**
+   * `glass` is the Figma `Menu` on the veil (20px radius, 40px rows).
+   * `solid` is the Account / Workspace menu that opens over glass chrome
+   * (opaque fill, 18px radius, soft shadow, 36px rows).
+   * `paper` is the Paper workspace switcher: default fill, 1px default border, 14px radius,
+   * 0 12 32 shadow, 304px wide, 36px rows.
+   */
+  surface?: MenuSurface;
+  side?: ComponentProps<typeof BaseMenu.Positioner>["side"];
+  align?: ComponentProps<typeof BaseMenu.Positioner>["align"];
+  sideOffset?: number;
+  alignOffset?: number;
+};
+
+export const menuPopupClass = {
+  glass: "rounded-xl veil-overlay",
+  solid: "rounded-[18px] bg-glass-fill-solid shadow-popover",
+  paper: "rounded-[14px] border border-border-default bg-bg-default shadow-[0_12px_32px_#0A142424]",
+} as const;
+
+/** Figma `Menus and popovers` (88:495): `Menu`, `Account menu` and `Workspace menu`. */
+export function MenuContent({
+  surface = "solid",
+  side,
+  align = "start",
+  sideOffset = 8,
+  alignOffset,
+  className,
+  children,
+  ...props
+}: MenuContentProps) {
+  return (
+    <BaseMenu.Portal>
+      <BaseMenu.Positioner
+        side={side}
+        align={align}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        className="z-50 outline-none"
+      >
+        <BaseMenu.Popup
+          className={cn(
+            "relative flex motion-popup flex-col gap-0.5 overflow-clip p-1.5 outline-none",
+            surface === "glass" ? "w-55" : surface === "paper" ? "w-76" : "w-64",
+            // The 304px paper menu is wider than a 320px viewport allows once the
+            // positioner offsets it; this cap keeps the popup on screen.
+            "max-w-[calc(100vw-2rem)]",
+            menuPopupClass[surface],
+            className,
+          )}
+          {...props}
+        >
+          <SurfaceContext value={surface}>{children}</SurfaceContext>
+        </BaseMenu.Popup>
+      </BaseMenu.Positioner>
+    </BaseMenu.Portal>
+  );
+}
+
+export type MenuItemProps = WithClass<ComponentProps<typeof BaseMenu.Item>> & {
+  /** 18px leading icon, or a 28px workspace tile. */
+  icon?: ReactNode;
+  /** Caption under the label, such as "3 members". */
+  description?: ReactNode;
+  /** Right side: a shortcut such as "⌘C", or a check. */
+  trailing?: ReactNode;
+  danger?: boolean;
+  /** Current choice drawn on the brand tint (Paper workspace switcher). */
+  selected?: boolean;
+};
+
+export function MenuItem({
+  icon,
+  description,
+  trailing,
+  danger,
+  selected,
+  className,
+  children,
+  ...props
+}: MenuItemProps) {
+  const surface = useContext(SurfaceContext);
+  return (
+    <BaseMenu.Item
+      className={cn(
+        "relative flex w-full cursor-pointer items-center gap-2.5 motion-colors outline-none select-none data-disabled:cursor-not-allowed data-disabled:opacity-40 data-highlighted:bg-overlay-ink-6",
+        surface === "glass" ? "rounded-md px-3" : "rounded-[10px] px-2.5",
+        description ? "h-12" : surface === "glass" ? "h-10" : "h-9",
+        selected && "bg-bg-brand data-highlighted:bg-bg-brand",
+        className,
+      )}
+      {...props}
+    >
+      {icon && (
+        <span
+          className={cn(
+            "flex shrink-0 [&>svg]:size-4.5",
+            danger ? "text-text-danger" : surface === "glass" ? "text-text-secondary" : "text-text-primary",
+          )}
+        >
+          {icon}
+        </span>
+      )}
+      <span className="flex min-w-0 flex-1 flex-col">
+        <span className={cn("truncate text-label-md", danger ? "text-text-danger" : "text-text-primary")}>
+          {children}
+        </span>
+        {description && <span className="truncate text-caption text-text-secondary">{description}</span>}
+      </span>
+      {trailing && (
+        <span className="flex shrink-0 text-caption text-text-secondary [&>svg]:size-4 [&>svg]:text-text-primary">
+          {trailing}
+        </span>
+      )}
+    </BaseMenu.Item>
+  );
+}
+
+export function MenuSeparator({ className, ...props }: WithClass<ComponentProps<typeof BaseMenu.Separator>>) {
+  const surface = useContext(SurfaceContext);
+  return (
+    <BaseMenu.Separator
+      className={cn("relative flex py-1", surface === "glass" ? "px-1.5" : "px-2.5", className)}
+      {...props}
+      render={(separatorProps) => (
+        <div {...separatorProps}>
+          <span className="h-px flex-1 bg-overlay-ink-8" />
+        </div>
+      )}
+    />
+  );
+}
+
+/** A caption heading for a group of items, such as "Workspaces" or the account email. */
+export function MenuLabel({ className, ...props }: WithClass<ComponentProps<"div">>) {
+  return <div className={cn("relative px-2.5 pt-2 pb-1 text-caption text-text-secondary", className)} {...props} />;
+}
+
+/** A 28px rounded tile for a workspace initial, used as a `MenuItem` icon. */
+export function MenuTile({ className, ...props }: WithClass<ComponentProps<"span">>) {
+  return (
+    <span
+      className={cn(
+        "flex size-7 shrink-0 items-center justify-center rounded-sm bg-interactive-primary text-label-sm text-text-inverse",
+        className,
+      )}
+      {...props}
+    />
+  );
+}