@horon-ai/react 0.0.0-stage → 0.1.1

package/src/components/data-table.tsx

@@ -0,0 +1,429 @@
+import { CaretDown, CaretLeft, CaretRight, CaretUp, CaretUpDown, MagnifyingGlass, Plus } from "@phosphor-icons/react";
+import {
+  columnFilteringFeature,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  filterFn_includesString,
+  globalFilteringFeature,
+  rowPaginationFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+  useTable,
+  type ColumnDef,
+  type ReactTable,
+  type RowData,
+} from "@tanstack/react-table";
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { Checkbox } from "./checkbox";
+import { IconButton } from "./icon-button";
+import { Input } from "./input";
+
+type WithClass<T> = Omit<T, "className"> & { className?: string };
+
+export type DataTableDevice = "desktop" | "tablet" | "mobile";
+
+/**
+ * Figma `Data table`: a solid surface card, 20px radius, 1px default border.
+ * `device` sets the gutters: 24px on desktop and tablet, 18px on mobile (where the table scrolls sideways).
+ */
+export function DataTable({
+  device = "desktop",
+  className,
+  ...props
+}: WithClass<ComponentProps<"div">> & { device?: DataTableDevice }) {
+  return (
+    <div
+      data-device={device}
+      className={cn(
+        "group/dt flex min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type DataTableHeaderProps = {
+  /** 16px icon on the 26px brand tile. */
+  icon?: ReactNode;
+  title: ReactNode;
+  /** Trailing 16px icon buttons. */
+  actions?: ReactNode;
+  className?: string;
+};
+
+export function DataTableHeader({ icon, title, actions, className }: DataTableHeaderProps) {
+  return (
+    <div className={cn("flex items-center gap-3 px-6 py-4.5 group-data-[device=mobile]/dt:px-4.5", className)}>
+      {icon && (
+        <span className="flex size-6.5 shrink-0 items-center justify-center rounded-[7px] bg-bg-brand text-text-brand [&>svg]:size-4">
+          {icon}
+        </span>
+      )}
+      <h3 className="min-w-0 flex-1 truncate text-label-lg text-text-primary">{title}</h3>
+      {actions && (
+        <div className="-my-1.5 flex shrink-0 items-center gap-3 text-text-secondary [&_svg]:size-4">{actions}</div>
+      )}
+    </div>
+  );
+}
+
+export function DataTableTable({ className, ...props }: WithClass<ComponentProps<"table">>) {
+  return (
+    <div className="w-full max-w-full min-w-0 overflow-x-auto">
+      <table
+        className={cn("w-full border-collapse text-left group-data-[device=mobile]/dt:min-w-max", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+/** Header cell: 52px, 14px icon and label-md secondary text. */
+export function DataTableHead({
+  icon,
+  className,
+  children,
+  ...props
+}: WithClass<ComponentProps<"th">> & { icon?: ReactNode }) {
+  return (
+    <th
+      className={cn(
+        "font-normal h-13 border-y border-border-default pr-3 align-middle first:pl-6 group-data-[device=mobile]/dt:first:pl-4.5 last:pr-6 group-data-[device=mobile]/dt:last:pr-4.5 [&_svg]:size-3.5",
+        className,
+      )}
+      {...props}
+    >
+      <span className="flex items-center gap-2 text-label-md whitespace-nowrap text-text-secondary">
+        {icon}
+        {children}
+      </span>
+    </th>
+  );
+}
+
+export function DataTableRow({ className, ...props }: WithClass<ComponentProps<"tr">>) {
+  return <tr className={cn("border-b border-border-default", className)} {...props} />;
+}
+
+/** Body cell: 52px; body-sm secondary text unless the content sets its own. */
+export function DataTableCell({ className, ...props }: WithClass<ComponentProps<"td">>) {
+  return (
+    <td
+      className={cn(
+        "h-13 pr-3 align-middle text-body-sm whitespace-nowrap text-text-secondary first:pl-6 group-data-[device=mobile]/dt:first:pl-4.5 last:pr-6 group-data-[device=mobile]/dt:last:pr-4.5 [&>label]:flex",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** The 24px ink logo tile with a label-sm initial, beside a label-lg name. */
+export function DataTableItem({ logo, children }: { logo: ReactNode; children: ReactNode }) {
+  return (
+    <span className="flex items-center gap-2.5">
+      <span className="flex size-6 shrink-0 items-center justify-center rounded-xs bg-surface-ink text-label-sm text-text-on-ink">
+        {logo}
+      </span>
+      <span className="truncate text-label-lg text-text-primary">{children}</span>
+    </span>
+  );
+}
+
+/** Figma `Table tag`: brand (sky tint) or neutral (subtle) label, 8px radius. */
+export function DataTableTag({
+  tone = "brand",
+  className,
+  ...props
+}: WithClass<ComponentProps<"span">> & { tone?: "brand" | "neutral" }) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-6.5 items-center rounded-sm px-2.5 text-label-md whitespace-nowrap",
+        tone === "brand" ? "bg-bg-brand text-text-brand" : "bg-bg-subtle text-text-secondary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type DataTableFooterProps = { onAdd?: () => void; addLabel?: string; hint?: ReactNode; className?: string };
+
+/** Footer: "Add row" with a 16px plus and a caption hint on the right. */
+export function DataTableFooter({ onAdd, addLabel = "Add row", hint, className }: DataTableFooterProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-x-2 gap-y-1 px-6 pt-3.5 pb-4 group-data-[device=mobile]/dt:px-4.5",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={onAdd}
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-label-md text-text-secondary motion-colors focus-visible:outline-2 focus-visible:outline-text-brand"
+      >
+        <Plus aria-hidden className="size-4" />
+        {addLabel}
+      </button>
+      {hint && <span className="shrink-0 text-caption text-text-secondary">{hint}</span>}
+    </div>
+  );
+}
+
+export type DataTableColumnMeta = {
+  /** 14px icon before the header label. */
+  icon?: ReactNode;
+  headClassName?: string;
+  cellClassName?: string;
+};
+
+const columnMeta: DataTableColumnMeta = {};
+
+/** TanStack Table features every horon data table registers: sorting, filtering, selection, pagination. */
+export const dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+  rowSelectionFeature,
+  rowPaginationFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  paginatedRowModel: createPaginatedRowModel(),
+  sortFns: { alphanumeric: sortFn_alphanumeric, basic: sortFn_basic, datetime: sortFn_datetime, text: sortFn_text },
+  filterFns: { includesString: filterFn_includesString },
+  columnMeta,
+});
+
+export type DataTableFeatures = typeof dataTableFeatures;
+export type DataTableColumn<TData extends RowData> = ColumnDef<DataTableFeatures, TData>;
+export type DataTableInstance<TData extends RowData> = ReactTable<DataTableFeatures, TData>;
+
+export type UseDataTableOptions<TData extends RowData> = {
+  data: TData[];
+  columns: DataTableColumn<TData>[];
+  getRowId?: (row: TData, index: number) => string;
+  /** Rows per page. Omit it to show every row on one page. */
+  pageSize?: number;
+  enableRowSelection?: boolean;
+};
+
+/** Builds the TanStack table behind `DataTableView`, `DataTableSearch` and `DataTablePagination`. */
+export function useDataTable<TData extends RowData>({
+  data,
+  columns,
+  getRowId,
+  pageSize,
+  enableRowSelection = false,
+}: UseDataTableOptions<TData>): DataTableInstance<TData> {
+  return useTable({
+    features: dataTableFeatures,
+    data,
+    columns,
+    getRowId,
+    enableRowSelection,
+    manualPagination: pageSize === undefined,
+    initialState: { pagination: { pageIndex: 0, pageSize: pageSize ?? 10 } },
+  });
+}
+
+/** Leading checkbox column; the header box selects every row on the current page. */
+export function dataTableSelectColumn<TData extends RowData>(): DataTableColumn<TData> {
+  return {
+    id: "select",
+    enableSorting: false,
+    meta: { headClassName: "w-12" },
+    header: ({ table }) => {
+      const all = table.getIsAllPageRowsSelected();
+      return (
+        <Checkbox
+          size="sm"
+          aria-label="Select all rows"
+          checked={all}
+          indeterminate={!all && table.getIsSomePageRowsSelected()}
+          onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
+        />
+      );
+    },
+    cell: ({ row }) => (
+      <Checkbox
+        size="sm"
+        aria-label={`Select row ${row.index + 1}`}
+        checked={row.getIsSelected()}
+        disabled={!row.getCanSelect()}
+        onCheckedChange={(checked) => row.toggleSelected(checked)}
+      />
+    ),
+  };
+}
+
+const ariaSort = { asc: "ascending", desc: "descending" } as const;
+
+export type DataTableViewProps<TData extends RowData> = {
+  table: DataTableInstance<TData>;
+  emptyMessage?: ReactNode;
+  className?: string;
+};
+
+/** Renders a `useDataTable` instance with the Figma head and body cells; sortable heads toggle on click. */
+export function DataTableView<TData extends RowData>({
+  table,
+  emptyMessage = "No results.",
+  className,
+}: DataTableViewProps<TData>) {
+  const rows = table.getRowModel().rows;
+
+  return (
+    <DataTableTable className={className}>
+      <thead>
+        {table.getHeaderGroups().map((group) => (
+          <tr key={group.id}>
+            {group.headers.map((header) => {
+              const meta = header.column.columnDef.meta;
+              const canSort = header.column.getCanSort();
+              const sorted = header.column.getIsSorted();
+
+              return (
+                <DataTableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  icon={canSort ? undefined : meta?.icon}
+                  aria-sort={canSort ? (sorted ? ariaSort[sorted] : "none") : undefined}
+                  className={meta?.headClassName}
+                >
+                  {header.isPlaceholder ? null : canSort ? (
+                    <button
+                      type="button"
+                      onClick={header.column.getToggleSortingHandler()}
+                      className="-mx-1 flex cursor-pointer items-center gap-2 rounded-xs px-1 hover:text-text-primary focus-visible:outline-2 focus-visible:outline-text-brand"
+                    >
+                      {meta?.icon}
+                      <table.FlexRender header={header} />
+                      <span key={sorted || "none"} className="flex animate-fade-in">
+                        {sorted === "asc" ? (
+                          <CaretUp aria-hidden />
+                        ) : sorted === "desc" ? (
+                          <CaretDown aria-hidden />
+                        ) : (
+                          <CaretUpDown aria-hidden className="opacity-60" />
+                        )}
+                      </span>
+                    </button>
+                  ) : (
+                    <table.FlexRender header={header} />
+                  )}
+                </DataTableHead>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+      <tbody>
+        {rows.length === 0 ? (
+          <DataTableRow>
+            <DataTableCell colSpan={table.getAllLeafColumns().length} className="h-24 text-center">
+              {emptyMessage}
+            </DataTableCell>
+          </DataTableRow>
+        ) : (
+          rows.map((row, index) => (
+            <DataTableRow
+              key={`${table.state.pagination.pageIndex}:${table.state.sorting
+                .map((sort) => `${sort.id}${sort.desc ? "d" : "a"}`)
+                .join()}:${row.id}`}
+              className="motion-rise motion-colors hover:bg-overlay-ink-4 data-selected:[&>td]:bg-overlay-ink-4 data-selected:hover:[&>td]:bg-overlay-ink-6"
+              style={{ "--i": index, animationDelay: "calc(var(--i) * 30ms)" } as CSSProperties}
+              data-selected={row.getIsSelected() ? "" : undefined}
+            >
+              {row.getAllCells().map((cell) => (
+                <DataTableCell key={cell.id} className={cell.column.columnDef.meta?.cellClassName}>
+                  <table.FlexRender cell={cell} />
+                </DataTableCell>
+              ))}
+            </DataTableRow>
+          ))
+        )}
+      </tbody>
+    </DataTableTable>
+  );
+}
+
+export type DataTableSearchProps<TData extends RowData> = {
+  table: DataTableInstance<TData>;
+  placeholder?: string;
+  className?: string;
+};
+
+/** Solid search field bound to the table's global filter. */
+export function DataTableSearch<TData extends RowData>({
+  table,
+  placeholder = "Search",
+  className,
+}: DataTableSearchProps<TData>) {
+  return (
+    <Input
+      surface="solid"
+      size="sm"
+      icon={<MagnifyingGlass />}
+      placeholder={placeholder}
+      aria-label={placeholder}
+      value={String(table.state.globalFilter ?? "")}
+      onChange={(event) => table.setGlobalFilter(event.target.value)}
+      className={cn("min-w-0", className)}
+    />
+  );
+}
+
+export type DataTablePaginationProps<TData extends RowData> = {
+  table: DataTableInstance<TData>;
+  className?: string;
+};
+
+/** Row count (or selection count) with previous and next page buttons. */
+export function DataTablePagination<TData extends RowData>({ table, className }: DataTablePaginationProps<TData>) {
+  const total = table.getFilteredRowModel().rows.length;
+  const selected = table.getFilteredSelectedRowModel().rows.length;
+  const pageCount = Math.max(table.getPageCount(), 1);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center justify-between gap-x-4 gap-y-2 px-6 py-3 group-data-[device=mobile]/dt:px-4.5",
+        className,
+      )}
+    >
+      <p className="text-caption text-text-secondary tabular-nums">
+        {selected > 0 ? `${selected} of ${total} selected` : `${total} ${total === 1 ? "row" : "rows"}`}
+      </p>
+      <div className="flex items-center gap-2">
+        <IconButton
+          size="sm"
+          icon={<CaretLeft />}
+          label="Previous page"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        />
+        <span className="text-caption text-text-secondary tabular-nums">
+          Page {table.state.pagination.pageIndex + 1} of {pageCount}
+        </span>
+        <IconButton
+          size="sm"
+          icon={<CaretRight />}
+          label="Next page"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/date-field.tsx

@@ -0,0 +1,100 @@
+import { Popover } from "@base-ui/react/popover";
+import { CalendarBlank } from "@phosphor-icons/react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { Calendar, type CalendarProps, type DateRange } from "./calendar";
+import { fieldBoxClass, fieldSizeClass, fieldTextClass, type InputSurface } from "./input";
+
+export type DateFieldSize = ControlSize;
+export type DateFieldSurface = InputSurface;
+
+type WithoutCalendarSurface<T> = T extends unknown ? Omit<T, "size" | "surface"> : never;
+
+export type DateFieldProps = WithoutCalendarSurface<CalendarProps> & {
+  size?: DateFieldSize;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels, `solid-on-page` directly on the page background. */
+  surface?: DateFieldSurface;
+  placeholder?: string;
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Formats the trigger text; defaults to "Oct 20, 2026" and "Oct 20 – Oct 24, 2026". */
+  format?: (value: Date | DateRange) => string;
+  triggerClassName?: string;
+};
+
+function defaultFormat(value: Date | DateRange, locale?: string): string {
+  const withYear = new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", year: "numeric" });
+  if (value instanceof Date) return withYear.format(value);
+  if (!value.start) return "";
+  if (!value.end) return withYear.format(value.start);
+  const sameYear = value.start.getFullYear() === value.end.getFullYear();
+  const start = sameYear
+    ? new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(value.start)
+    : withYear.format(value.start);
+  return `${start} – ${withYear.format(value.end)}`;
+}
+
+/** The calendar fills its parent, and a popover's positioner is auto-width, so the popup names the width it should take, capped at the viewport. */
+const popupCalendarWidthClass: Record<DateFieldSize, string> = {
+  sm: "w-62.5 max-w-[calc(100vw-2rem)]",
+  md: "w-78.5 max-w-[calc(100vw-2rem)]",
+  lg: "w-93.5 max-w-[calc(100vw-2rem)]",
+};
+
+/** Figma `Date field` (60:244): a 280px field that opens the calendar, in three sizes and two surfaces. */
+export function DateField({
+  size = "md",
+  surface = "solid",
+  placeholder = "Pick a date",
+  invalid,
+  disabled,
+  format,
+  triggerClassName,
+  ...calendar
+}: DateFieldProps) {
+  const value = calendar.value ?? null;
+  const text = value ? (format ? format(value) : defaultFormat(value, calendar.locale)) : "";
+  return (
+    <Popover.Root>
+      <Popover.Trigger
+        disabled={disabled}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          fieldBoxClass.base,
+          fieldBoxClass[surface],
+          fieldSizeClass[size],
+          "w-full max-w-70 cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-disabled:cursor-not-allowed",
+          surface !== "glass" && "hover:enabled:not-data-invalid:border-border-strong",
+          triggerClassName,
+        )}
+        data-invalid={invalid ? "" : undefined}
+      >
+        <span className="relative flex shrink-0 text-text-secondary">
+          <CalendarBlank />
+        </span>
+        <span
+          className={cn(
+            "relative min-w-0 flex-1 truncate",
+            fieldTextClass[size],
+            disabled ? "text-text-disabled" : text ? "text-text-primary" : "text-text-placeholder",
+          )}
+        >
+          {text || placeholder}
+        </span>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Positioner sideOffset={4} align="start" className="z-50 outline-none">
+          <Popover.Popup className="motion-popup">
+            <Calendar
+              {...calendar}
+              size={size}
+              surface={surface === "glass" ? "glass" : "solid"}
+              className={popupCalendarWidthClass[size]}
+            />
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/components/dialog.tsx

@@ -0,0 +1,93 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { X } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export const Dialog = BaseDialog.Root;
+export const DialogTrigger = BaseDialog.Trigger;
+export const DialogClose = BaseDialog.Close;
+
+export type DialogContentProps = Omit<ComponentProps<typeof BaseDialog.Popup>, "className" | "title"> & {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Label for the close button; hides it when `null`. */
+  closeLabel?: string | null;
+  /** Slot marker on the close control, for a surface its own app selects the control by. */
+  closeSlot?: string;
+  /** Tile or icon set before the title (Paper settings modals). */
+  leading?: ReactNode;
+  /**
+   * `glass` is the veil dialog (`veil-overlay`). `solid` is the Paper workspace modal:
+   * opaque default fill, 20px radius, 24px padding and a 0 24 64 shadow, no glass layer.
+   * Both surfaces share the 16px block rhythm between title, description and actions.
+   */
+  surface?: "glass" | "solid";
+  className?: string;
+};
+
+/**
+ * Figma `Dialog on scrim` (63:329): a 40% scrim and a 420px veil dialog,
+ * 24px padding, title-md heading with a 32px close target, body-md description.
+ */
+export function DialogContent({
+  title,
+  description,
+  closeLabel = "Close",
+  closeSlot,
+  leading,
+  surface = "solid",
+  className,
+  children,
+  ...props
+}: DialogContentProps) {
+  const solid = surface === "solid";
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className="fixed inset-0 z-50 bg-bg-scrim/32 motion-fade backdrop-blur-[6px]" />
+      <BaseDialog.Viewport className="fixed inset-0 z-50 flex items-center justify-center px-4">
+        <BaseDialog.Popup
+          className={cn(
+            // 420px where it fits; the viewport's 16px gutters cap `w-full` below that.
+            "relative flex max-h-[calc(100dvh-2rem)] w-full max-w-105 flex-col items-start gap-4 overflow-y-auto overscroll-contain rounded-xl p-6 outline-none",
+            solid ? "bg-bg-surface shadow-[0_24px_64px_#0A142433]" : "veil-overlay",
+            "motion-popup duration-240 data-starting-style:translate-y-2",
+            className,
+          )}
+          {...props}
+        >
+          <div className={cn("relative flex w-full items-start", leading ? "gap-3.5" : "gap-2")}>
+            {leading}
+            <BaseDialog.Title className="min-w-0 flex-1 text-title-md text-text-primary">{title}</BaseDialog.Title>
+            {closeLabel !== null && (
+              <BaseDialog.Close
+                aria-label={closeLabel}
+                data-slot={closeSlot}
+                className="relative -mt-1 -mr-2 flex size-8 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full text-text-secondary motion-colors hover:bg-overlay-ink-6 hover:text-text-primary focus-visible:outline-2 focus-visible:outline-text-brand [&_svg]:size-4"
+              >
+                <X />
+              </BaseDialog.Close>
+            )}
+          </div>
+          {description && (
+            <BaseDialog.Description className="relative text-body-md text-text-secondary">
+              {description}
+            </BaseDialog.Description>
+          )}
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Viewport>
+    </BaseDialog.Portal>
+  );
+}
+
+/**
+ * The action row: secondary first, the primary action at the right edge, 8px apart.
+ * `w-full` is what right-aligns it — the dialog popup stacks children at their content width.
+ */
+export function DialogFooter({
+  className,
+  ...props
+}: Omit<ComponentProps<"div">, "className"> & { className?: string }) {
+  return <div className={cn("relative flex w-full flex-wrap items-center justify-end gap-2", className)} {...props} />;
+}

package/src/components/directory-card.tsx

@@ -0,0 +1,59 @@
+import { Plus } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { IconButton } from "./icon-button";
+import { LiquidGlass } from "./liquid-glass";
+
+export type DirectoryCardProps = Omit<ComponentProps<"div">, "children"> & {
+  /** 20px icon shown in inverse on the 40px tile. */
+  icon: ReactNode;
+  name: ReactNode;
+  /** One line; longer text is clamped. */
+  description?: ReactNode;
+  onAdd?: () => void;
+  addLabel?: string;
+  /** `solid` (default) on raised surfaces, `glass` over imagery and glass panels. */
+  surface?: "solid" | "glass";
+};
+
+/** Paper `Directory card` (Settings 1VJJ-0): 40px tile, name and one-line description, plus an add button. */
+export function DirectoryCard({
+  icon,
+  name,
+  description,
+  onAdd,
+  addLabel = "Add",
+  surface = "solid",
+  className,
+  ...props
+}: DirectoryCardProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex items-center gap-3 overflow-clip rounded-2xl py-3 pr-3 pl-3",
+        surface === "glass" ? "bg-glass-thick" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <span className="relative flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-neutral-50 [&>svg]:size-5">
+        {icon}
+      </span>
+      <span className="relative flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className="truncate text-label-md text-text-primary">{name}</span>
+        {description && <span className="line-clamp-1 text-caption text-text-secondary">{description}</span>}
+      </span>
+      {onAdd && (
+        <IconButton
+          variant={surface === "glass" ? "glass" : "solid"}
+          size="sm"
+          label={addLabel}
+          icon={<Plus aria-hidden />}
+          onClick={onAdd}
+        />
+      )}
+    </div>
+  );
+}