@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/document-extract-panel.tsx

@@ -0,0 +1,398 @@
+import { CaretDown, Check, FilePdf, Minus, Plus, Scan } from "@phosphor-icons/react";
+import { type ComponentProps, type ReactNode, useMemo, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { PanelPillTabs } from "./bot-instructions-panel";
+
+type WithClass<T> = Omit<T, "className"> & { className?: string };
+
+export type ExtractFieldStatus = "filled" | "check";
+
+export type ExtractField = {
+  id: string;
+  label: string;
+  value: string;
+  /** Field type shown at the row end, for example `Text` or `Date`. */
+  type?: string;
+  status?: ExtractFieldStatus;
+};
+
+export type ExtractTable = {
+  id: string;
+  label: string;
+  type?: string;
+  columns: { label: string; align?: "start" | "end"; width?: number }[];
+  rows: string[][];
+};
+
+export type ExtractGroup = {
+  id: string;
+  label: string;
+  fields: (ExtractField | ExtractTable)[];
+};
+
+export type DocumentExtractPanelProps = WithClass<Omit<ComponentProps<"section">, "title">> & {
+  fileName: string;
+  pageLabel?: string;
+  /** The paper sheet content. Wrap fields in `ExtractHighlight` to outline what was read. */
+  sheet: ReactNode;
+  groups: ExtractGroup[];
+  defaultZoom?: number;
+  bot?: { initial: string; name: string; elapsed?: string };
+  onExtract?: () => void;
+  onAcceptAll?: () => void;
+  /** Makes the file name actionable; without it the name is a plain label. */
+  onOpenFile?: () => void;
+};
+
+const ZOOM_MIN = 30;
+const ZOOM_MAX = 150;
+const ZOOM_STEP = 10;
+const ZOOM_FIT = 70;
+
+const highlightTone = {
+  sky: "border-accent-sky-500-90 bg-accent-sky-500-12",
+  brand: "border-accent-sky-700-90 bg-accent-sky-700-12",
+  neutral: "border-text-placeholder-90 bg-text-placeholder-12",
+  ink: "border-interactive-primary bg-overlay-ink-12",
+} as const;
+
+/** An outline over a value on the sheet, the 4px-radius 1.2px box Paper draws where a field was read. */
+export function ExtractHighlight({
+  tone = "sky",
+  className,
+  ...props
+}: WithClass<ComponentProps<"div">> & { tone?: keyof typeof highlightTone }) {
+  return (
+    <div
+      className={cn("flex flex-col gap-px rounded-sm border-[1.2px] px-1 py-0.5", highlightTone[tone], className)}
+      {...props}
+    />
+  );
+}
+
+function isTable(field: ExtractField | ExtractTable): field is ExtractTable {
+  return "rows" in field;
+}
+
+function isChecked(field: ExtractField, resolved: Set<string>) {
+  return field.status === "check" && !resolved.has(field.id);
+}
+
+function Divider({ vertical }: { vertical?: boolean }) {
+  return (
+    <div
+      role="separator"
+      className={cn("shrink-0 bg-overlay-ink-8", vertical ? "w-px self-stretch" : "h-px self-stretch")}
+    />
+  );
+}
+
+function stepClass() {
+  return "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-full text-text-primary motion-press hover:bg-overlay-ink-8 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-text-brand";
+}
+
+/**
+ * Document extract panel (Paper `YUT-1` / `GWP-0`): a viewer with zoom controls on the left and the extracted
+ * fields on the right, with Fields / JSON / Schema views, a per-row confirmation check and an Accept all footer.
+ */
+export function DocumentExtractPanel({
+  fileName,
+  pageLabel = "1 / 1",
+  sheet,
+  groups,
+  defaultZoom = ZOOM_FIT,
+  bot,
+  onExtract,
+  onAcceptAll,
+  onOpenFile,
+  className,
+  ...props
+}: DocumentExtractPanelProps) {
+  const [zoom, setZoom] = useState(defaultZoom);
+  const [view, setView] = useState("fields");
+  const [resolved, setResolved] = useState<Set<string>>(() => new Set());
+  const [run, setRun] = useState(0);
+
+  const flat = useMemo(() => groups.flatMap((group) => group.fields), [groups]);
+  const total = flat.length;
+  const toCheck = flat.filter((field) => !isTable(field) && isChecked(field, resolved)).length;
+  const filled = total - toCheck;
+
+  const resolve = (id: string) => setResolved((previous) => new Set(previous).add(id));
+  const acceptAll = () => {
+    setResolved(new Set(flat.map((field) => field.id)));
+    onAcceptAll?.();
+  };
+  const json = useMemo(() => {
+    const data: Record<string, unknown> = {};
+    for (const field of flat) {
+      data[field.label] = isTable(field)
+        ? field.rows.map((row) => Object.fromEntries(field.columns.map((column, index) => [column.label, row[index]])))
+        : field.value;
+    }
+    return JSON.stringify(data, null, 2);
+  }, [flat]);
+
+  let rowIndex = 0;
+
+  return (
+    <section
+      className={cn(
+        "@container flex w-full max-w-280 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex flex-col @4xl:flex-row">
+        <div className="flex min-w-0 flex-col @4xl:w-135 @4xl:shrink-0">
+          <div className="flex flex-wrap items-center gap-2 px-5 py-3">
+            <span className="flex size-7 shrink-0 items-center justify-center rounded-[10px] bg-overlay-ink-5 text-text-danger">
+              <FilePdf aria-hidden className="size-4" />
+            </span>
+            {onOpenFile ? (
+              <button
+                type="button"
+                onClick={onOpenFile}
+                className="flex min-w-0 cursor-pointer items-center gap-1 rounded-md text-left focus-visible:outline-2 focus-visible:outline-text-brand"
+              >
+                <span className="min-w-0 truncate text-label-md text-text-primary">{fileName}</span>
+                <CaretDown aria-hidden className="size-3.5 shrink-0 text-text-secondary" />
+              </button>
+            ) : (
+              <span className="min-w-0 truncate text-label-md text-text-primary">{fileName}</span>
+            )}
+            <span className="min-w-0 flex-1" />
+            <span className="shrink-0 text-caption text-text-secondary">{pageLabel}</span>
+            <div className="flex h-7.5 shrink-0 items-center gap-0.5 rounded-full bg-overlay-ink-5 p-[3px]">
+              <button
+                type="button"
+                aria-label="Zoom out"
+                disabled={zoom <= ZOOM_MIN}
+                onClick={() => setZoom((value) => Math.max(ZOOM_MIN, value - ZOOM_STEP))}
+                className={stepClass()}
+              >
+                <Minus aria-hidden className="size-3.5" />
+              </button>
+              <span className="w-9 text-center text-label-sm text-text-primary tabular-nums">{zoom}%</span>
+              <button
+                type="button"
+                aria-label="Zoom in"
+                disabled={zoom >= ZOOM_MAX}
+                onClick={() => setZoom((value) => Math.min(ZOOM_MAX, value + ZOOM_STEP))}
+                className={stepClass()}
+              >
+                <Plus aria-hidden className="size-3.5" />
+              </button>
+            </div>
+            <button
+              type="button"
+              onClick={() => setZoom(ZOOM_FIT)}
+              className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-overlay-ink-6 pr-3.5 pl-3 text-label-sm text-text-primary hover:bg-overlay-ink-8 focus-visible:outline-2 focus-visible:outline-text-brand"
+            >
+              Fit
+            </button>
+          </div>
+          <div className="flex min-h-120 flex-1 justify-center overflow-hidden bg-overlay-ink-7 px-6 py-5">
+            <div
+              className="flex h-fit w-full max-w-117.5 shrink-0 origin-top flex-col gap-3.5 bg-neutral-50 px-6.5 pt-6.5 pb-5 text-neutral-900 ring-1 ring-overlay-ink-8 [filter:drop-shadow(0_2px_4px_#00000014)] transition-[scale] duration-220 ease-out-quint"
+              style={{ scale: zoom / ZOOM_FIT }}
+            >
+              {sheet}
+            </div>
+          </div>
+        </div>
+        <Divider vertical />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="flex items-center gap-2 px-5 py-3">
+            <PanelPillTabs
+              aria-label="Extraction view"
+              value={view}
+              onValueChange={setView}
+              items={[
+                { value: "fields", label: "Fields" },
+                { value: "json", label: "JSON" },
+                { value: "schema", label: "Schema" },
+              ]}
+            />
+            <span className="min-w-0 flex-1" />
+            <button
+              type="button"
+              onClick={() => {
+                setRun((value) => value + 1);
+                onExtract?.();
+              }}
+              className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center justify-center gap-1.5 rounded-full bg-overlay-ink-6 pr-3 pl-3.5 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
+            >
+              <Scan aria-hidden className="size-3.5" />
+              Extract
+            </button>
+          </div>
+          <Divider />
+          <div key={`${view}-${run}`} className="flex flex-col gap-1.5 px-5 pt-3.5 pb-4">
+            {view === "fields" ? (
+              <>
+                <p className="text-body-sm text-text-secondary">{total} fields read from this document</p>
+                {groups.map((group) => (
+                  <div key={group.id} className="flex flex-col gap-1.5">
+                    <div className="flex items-center gap-2 pt-3 pb-1">
+                      <span aria-hidden className="size-1.75 rounded-full bg-sky-500" />
+                      <h4 className="text-label-md text-text-primary">{group.label}</h4>
+                    </div>
+                    {group.fields.map((field) => {
+                      const delay = { animationDelay: `${rowIndex++ * 30}ms` };
+                      if (isTable(field)) {
+                        return (
+                          <div key={field.id} className="flex motion-rise flex-col gap-1.5" style={delay}>
+                            <div className="flex items-center gap-3">
+                              <span className="w-25 shrink-0 text-body-sm text-text-secondary">{field.label}</span>
+                              <span className="min-w-0 flex-1" />
+                              {field.type ? (
+                                <span className="w-14 shrink-0 text-end text-caption text-text-secondary">
+                                  {field.type}
+                                </span>
+                              ) : null}
+                            </div>
+                            <div className="flex flex-col overflow-x-auto rounded-[10px] border border-overlay-ink-10 px-3 py-0.5">
+                              <div className="flex min-w-52 flex-col">
+                                <div className="flex items-center gap-2 py-2 text-caption text-text-secondary">
+                                  {field.columns.map((column) => (
+                                    <span
+                                      key={column.label}
+                                      className={cn(
+                                        column.width ? "shrink-0" : "min-w-0 flex-1",
+                                        column.align === "end" && "text-end",
+                                      )}
+                                      style={column.width ? { width: column.width } : undefined}
+                                    >
+                                      {column.label}
+                                    </span>
+                                  ))}
+                                </div>
+                                {field.rows.map((row) => (
+                                  <div
+                                    key={row.join("|")}
+                                    className="flex items-center gap-2 py-2 text-caption text-text-primary"
+                                  >
+                                    {row.map((cell, index) => {
+                                      const column = field.columns[index];
+                                      return (
+                                        <span
+                                          key={column?.label ?? cell}
+                                          className={cn(
+                                            column?.width ? "shrink-0" : "min-w-0 flex-1",
+                                            column?.align === "end" && "text-end",
+                                          )}
+                                          style={column?.width ? { width: column.width } : undefined}
+                                        >
+                                          {cell}
+                                        </span>
+                                      );
+                                    })}
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      }
+                      const needsCheck = isChecked(field, resolved);
+                      return (
+                        <div key={field.id} className="flex motion-rise flex-wrap items-center gap-3" style={delay}>
+                          <span className="w-25 shrink-0 text-body-sm text-text-secondary">{field.label}</span>
+                          <button
+                            type="button"
+                            disabled={!needsCheck}
+                            onClick={() => resolve(field.id)}
+                            aria-label={needsCheck ? `Confirm ${field.label}` : undefined}
+                            className={cn(
+                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-[10px] border px-3 text-start motion-colors",
+                              needsCheck
+                                ? "cursor-pointer border-border-danger bg-overlay-ink-12 hover:bg-overlay-ink-14 focus-visible:outline-2 focus-visible:outline-text-brand"
+                                : "cursor-default border-transparent bg-overlay-ink-4",
+                            )}
+                          >
+                            <span className="min-w-0 flex-1 truncate text-body-sm text-text-primary">
+                              {field.value}
+                            </span>
+                            {needsCheck ? (
+                              <span className="shrink-0 text-caption text-text-danger">Check</span>
+                            ) : (
+                              <Check
+                                aria-hidden
+                                weight="bold"
+                                className="size-3.5 shrink-0 animate-pop-in text-text-secondary"
+                              />
+                            )}
+                          </button>
+                          {field.type ? (
+                            <span className="w-14 shrink-0 text-end text-caption text-text-secondary">
+                              {field.type}
+                            </span>
+                          ) : null}
+                        </div>
+                      );
+                    })}
+                  </div>
+                ))}
+              </>
+            ) : null}
+            {view === "json" ? (
+              <pre className="animate-slide-shift-next overflow-x-auto rounded-[10px] bg-overlay-ink-4 p-3 font-mono text-caption whitespace-pre text-text-primary">
+                {json}
+              </pre>
+            ) : null}
+            {view === "schema" ? (
+              <ul className="flex animate-slide-shift-next flex-col gap-1.5">
+                {flat.map((field) => (
+                  <li key={field.id} className="flex items-center gap-3 text-body-sm text-text-primary">
+                    <span className="w-25 shrink-0 text-text-secondary">{field.label}</span>
+                    <span className="rounded-md bg-overlay-ink-6 px-1.5 py-px text-caption text-text-secondary">
+                      {field.type ?? "Text"}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <Divider />
+      <div className="flex flex-wrap items-center gap-3 px-5 py-3">
+        <div className="flex items-center gap-1" aria-hidden>
+          {flat.map((field) => (
+            <span
+              key={field.id}
+              className={cn(
+                "size-2 rounded-full motion-colors",
+                !isTable(field) && isChecked(field, resolved) ? "bg-red-500" : "bg-sky-500",
+              )}
+            />
+          ))}
+        </div>
+        <span className="text-body-sm text-text-secondary">
+          {filled} of {total} filled · {toCheck} to check
+        </span>
+        <span className="min-w-0 flex-1" />
+        {bot ? (
+          <>
+            <span className="flex size-5 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+              {bot.initial}
+            </span>
+            <span className="text-caption text-text-secondary">
+              {bot.name}
+              {bot.elapsed ? ` · ${bot.elapsed}` : ""}
+            </span>
+          </>
+        ) : null}
+        <button
+          type="button"
+          onClick={acceptAll}
+          className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-interactive-primary pr-3 pl-3.5 text-label-sm text-text-inverse hover:bg-interactive-primary-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+        >
+          Accept all
+        </button>
+      </div>
+    </section>
+  );
+}

package/src/components/empty-state.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export type EmptyStateProps = {
+  /** 140px illustration, such as a mascot pose. */
+  illustration?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Action under the text, usually a `Button`. */
+  action?: ReactNode;
+  className?: string;
+};
+
+/** Figma `Empty state` (64:485): centered 140px mascot, title-md heading, body-md text, action. */
+export function EmptyState({ illustration, title, description, action, className }: EmptyStateProps) {
+  return (
+    <div
+      className={cn("flex w-full max-w-90 motion-rise flex-col items-center gap-3 px-6 py-8 text-center", className)}
+    >
+      {illustration && (
+        <div className="flex size-35 shrink-0 items-center justify-center [&>*]:size-full">{illustration}</div>
+      )}
+      <p className="text-title-md text-balance text-text-primary">{title}</p>
+      {description && <p className="self-stretch text-body-md text-pretty text-text-secondary">{description}</p>}
+      {action && <div className="mt-4 flex">{action}</div>}
+    </div>
+  );
+}

package/src/components/field.tsx

@@ -0,0 +1,78 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { createContext, useContext, type ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+type WithClass<T> = Omit<T, "className"> & { className?: string };
+
+const FieldSizeContext = createContext<ControlSize>("md");
+
+const gapClass: Record<ControlSize, string> = {
+  sm: "gap-1.5",
+  md: "gap-2",
+  lg: "gap-2.5",
+};
+
+const labelClass: Record<ControlSize, string> = {
+  sm: "text-label-sm",
+  md: "text-label-md",
+  lg: "text-label-lg",
+};
+
+const metaClass: Record<ControlSize, string> = {
+  sm: "text-caption",
+  md: "text-caption",
+  lg: "text-body-sm",
+};
+
+/** Figma `Field examples` (58:163): label, control and help text, 6/8/10px apart. */
+export function Field({
+  size = "md",
+  className,
+  ...props
+}: WithClass<Omit<ComponentProps<typeof BaseField.Root>, "size">> & { size?: ControlSize }) {
+  return (
+    <FieldSizeContext.Provider value={size}>
+      <BaseField.Root
+        className={cn("flex max-w-full min-w-0 flex-col items-start", gapClass[size], className)}
+        {...props}
+      />
+    </FieldSizeContext.Provider>
+  );
+}
+
+export function FieldLabel({ className, ...props }: WithClass<ComponentProps<typeof BaseField.Label>>) {
+  const size = useContext(FieldSizeContext);
+  return (
+    <BaseField.Label
+      className={cn(labelClass[size], "text-text-primary data-disabled:text-text-disabled", className)}
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({ className, ...props }: WithClass<ComponentProps<typeof BaseField.Description>>) {
+  const size = useContext(FieldSizeContext);
+  return <BaseField.Description className={cn(metaClass[size], "w-full text-text-secondary", className)} {...props} />;
+}
+
+export function FieldError({ className, children, ...props }: WithClass<ComponentProps<typeof BaseField.Error>>) {
+  const size = useContext(FieldSizeContext);
+  // Base UI keeps the message mounted through its exit (`data-ending-style`), so the row can close
+  // as it fades: the fields below move with it instead of jumping when the text appears.
+  return (
+    <BaseField.Error
+      className={cn(
+        "motion-reveal data-ending-style:grid-rows-[0fr] data-starting-style:grid-rows-[0fr]",
+        "data-ending-style:opacity-0 data-starting-style:opacity-0",
+        metaClass[size],
+        "text-text-danger",
+        className,
+      )}
+      {...props}
+    >
+      <span className="block">{children}</span>
+    </BaseField.Error>
+  );
+}

package/src/components/file-drop.tsx

@@ -0,0 +1,89 @@
+import { UploadSimple } from "@phosphor-icons/react";
+import { type ComponentProps, type DragEvent, type ReactNode, useId, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { Spinner } from "./spinner";
+
+export type FileDropSurface = "solid" | "glass";
+
+export type FileDropProps = Omit<ComponentProps<"input">, "className" | "type" | "children" | "onDrop"> & {
+  /** Label next to the icon. */
+  label?: ReactNode;
+  /** Shows a spinner in place of the icon while files upload. */
+  uploading?: boolean;
+  /** Danger rim for a rejected file. */
+  rejected?: boolean;
+  /** Called with the dropped files. */
+  onFiles?: (files: File[]) => void;
+  /** `solid` (default) fills the target with the raised surface; `glass` puts it on the veil over imagery. */
+  surface?: FileDropSurface;
+  className?: string;
+};
+
+/**
+ * Paper `File drop` (1VWI-0): a 1.5px dashed r10 target, icon 16 and a 13/18 500 label centred with gap 8.
+ * Dragging swaps the dashes for a 1px brand rim; no shake or bounce. Solid fills with the raised surface,
+ * glass sits on the veil (`veil-drop`) and keeps the dashed border as its only outline.
+ */
+export function FileDrop({
+  label = "Drop files here or click to upload",
+  uploading,
+  rejected,
+  onFiles,
+  surface = "solid",
+  disabled,
+  className,
+  onChange,
+  ...props
+}: FileDropProps) {
+  const id = useId();
+  const [dragging, setDragging] = useState(false);
+
+  const onDrop = (event: DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    setDragging(false);
+    if (disabled || uploading) return;
+    onFiles?.(Array.from(event.dataTransfer.files));
+  };
+
+  return (
+    <label
+      htmlFor={id}
+      data-dragging={dragging ? "" : undefined}
+      data-rejected={rejected ? "" : undefined}
+      aria-busy={uploading || undefined}
+      onDragOver={(event) => {
+        event.preventDefault();
+        if (!disabled) setDragging(true);
+      }}
+      onDragLeave={() => setDragging(false)}
+      onDrop={onDrop}
+      className={cn(
+        "relative flex w-full max-w-[550px] cursor-pointer items-center justify-center gap-2 overflow-clip rounded-[10px] border-[1.5px] border-dashed border-border-dashed px-4 py-3 text-label-md text-text-secondary motion-colors",
+        "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-text-brand",
+        // The dashed edge stays put (border-style cannot transition) and the active state adds an inner rim.
+        "data-dragging:border-border-brand data-dragging:shadow-[inset_0_0_0_1px_var(--color-text-brand)]",
+        surface === "solid" ? "bg-bg-surface data-dragging:bg-bg-subtle" : "veil-drop",
+        "data-rejected:border-border-danger data-rejected:text-text-danger data-rejected:shadow-[inset_0_0_0_1px_var(--color-border-danger)]",
+        disabled && "cursor-not-allowed opacity-40",
+        className,
+      )}
+    >
+      <input
+        id={id}
+        type="file"
+        className="sr-only"
+        disabled={disabled || uploading}
+        onChange={(event) => {
+          onFiles?.(Array.from(event.target.files ?? []));
+          onChange?.(event);
+        }}
+        {...props}
+      />
+      <span className="relative flex items-center gap-2">
+        {uploading ? <Spinner size={16} label="Uploading" /> : <UploadSimple aria-hidden className="size-4 shrink-0" />}
+        <span className={cn(uploading && "opacity-60")}>{label}</span>
+      </span>
+    </label>
+  );
+}

package/src/components/filter-bar.tsx

@@ -0,0 +1,83 @@
+import { type ComponentProps, type ReactNode, useRef, useState } from "react";
+
+import { cn } from "../lib/cn";
+import { useActiveIndicator } from "../lib/use-active-indicator";
+
+export type FilterBarItem = {
+  value: string;
+  label: ReactNode;
+  /** Count shown after the label, such as 4. */
+  count?: number;
+  disabled?: boolean;
+};
+
+export type FilterBarProps = Omit<ComponentProps<"div">, "onChange" | "defaultValue"> & {
+  items: FilterBarItem[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+/**
+ * Paper `Filter bar` (Agents N2): a 5% ink pill track with 30px options; the selected option sits on a sliding 10% ink pill.
+ * The pills never wrap, so a screen too narrow for all of them scrolls the track sideways instead of widening the page.
+ * The track keeps its intrinsic width (and so stays centred by its parent) unless that width exceeds the box.
+ */
+export function FilterBar({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  className,
+  "aria-label": ariaLabel = "Filter",
+  ...props
+}: FilterBarProps) {
+  const [inner, setInner] = useState(defaultValue ?? items[0]?.value);
+  const selected = value ?? inner;
+  const track = useRef<HTMLDivElement>(null);
+  const { rect, animate } = useActiveIndicator(track, '[aria-checked="true"]');
+
+  return (
+    <div
+      ref={track}
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn(
+        "relative inline-flex max-w-full min-w-0 items-center gap-0.5 overflow-x-auto rounded-full bg-overlay-ink-5 p-[3px]",
+        className,
+      )}
+      {...props}
+    >
+      {rect && (
+        <span
+          aria-hidden
+          className={cn("absolute rounded-full bg-overlay-ink-10", animate && "motion-indicator")}
+          style={{ left: rect.left, top: rect.top, width: rect.width, height: rect.height }}
+        />
+      )}
+      {items.map((item) => {
+        const active = item.value === selected;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            disabled={item.disabled}
+            onClick={() => {
+              setInner(item.value);
+              onValueChange?.(item.value);
+            }}
+            className={cn(
+              "relative flex h-7.5 shrink-0 cursor-pointer items-center gap-1.5 rounded-full px-4 whitespace-nowrap motion-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand disabled:cursor-not-allowed disabled:opacity-40",
+              active ? "text-text-primary" : "text-text-secondary hover:bg-overlay-ink-5 hover:text-text-primary",
+            )}
+          >
+            <span className="text-label-md">{item.label}</span>
+            {item.count !== undefined && <span className="text-caption text-text-secondary">{item.count}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}