@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/checkbox.tsx

@@ -0,0 +1,73 @@
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { Check, Minus } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type CheckboxSize = ControlSize;
+
+export type CheckboxProps = Omit<ComponentProps<typeof BaseCheckbox.Root>, "className"> & {
+  label?: ReactNode;
+  /**
+   * `md` is the 20px Figma Checkbox, `sm` the 18px box of the Data table (192:9046),
+   * `lg` the 24px box.
+   */
+  size?: CheckboxSize;
+  className?: string;
+};
+
+const labelClass: Record<CheckboxSize, string> = {
+  sm: "gap-2 text-body-sm",
+  md: "gap-2.5 text-body-md",
+  lg: "gap-3 text-body-lg",
+};
+
+/** One 6px corner (`rounded-xs`, the Figma radius) at every size; only the box grows with the rung. */
+const boxClass: Record<CheckboxSize, string> = {
+  sm: "size-4.5 rounded-xs",
+  md: "size-5 rounded-xs",
+  lg: "size-6 rounded-xs",
+};
+
+const indicatorClass: Record<CheckboxSize, string> = {
+  sm: "[&_svg]:size-3",
+  md: "[&_svg]:size-3.5",
+  lg: "[&_svg]:size-4",
+};
+
+/** Figma `Checkbox` (58:217): a 20px box, 6px radius, with a 10px gap to its label. */
+export function Checkbox({ label, size = "md", className, ...props }: CheckboxProps) {
+  return (
+    <label
+      className={cn(
+        "group inline-flex max-w-full min-w-0 cursor-pointer items-center text-text-primary has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-40",
+        labelClass[size],
+        className,
+      )}
+    >
+      <BaseCheckbox.Root
+        className={cn(
+          "flex shrink-0 items-center justify-center border-[1.5px] border-border-strong bg-bg-surface motion-colors",
+          boxClass[size],
+          "hover:not-data-disabled:border-text-secondary",
+          "data-checked:border-interactive-primary data-checked:bg-interactive-primary data-indeterminate:border-interactive-primary data-indeterminate:bg-interactive-primary",
+          "hover:not-data-disabled:data-checked:border-interactive-primary-hover hover:not-data-disabled:data-checked:bg-interactive-primary-hover hover:not-data-disabled:data-indeterminate:border-interactive-primary-hover hover:not-data-disabled:data-indeterminate:bg-interactive-primary-hover",
+          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        )}
+        {...props}
+      >
+        <BaseCheckbox.Indicator
+          className={cn(
+            "flex animate-pop-in text-interactive-on-primary data-ending-style:animate-scale-out",
+            indicatorClass[size],
+          )}
+          render={(indicatorProps, state) => (
+            <span {...indicatorProps}>{state.indeterminate ? <Minus /> : <Check />}</span>
+          )}
+        />
+      </BaseCheckbox.Root>
+      {label}
+    </label>
+  );
+}

package/src/components/chip.tsx

@@ -0,0 +1,81 @@
+import { Toggle } from "@base-ui/react/toggle";
+import { Check } from "@phosphor-icons/react";
+import { Children, type ComponentProps, useState } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+
+export type ChipSize = ControlSize;
+
+export type ChipProps = Omit<ComponentProps<typeof Toggle>, "className"> & {
+  /** `md` is the 32px Figma Chip; `sm` is 28px and `lg` 36px. */
+  size?: ChipSize;
+  className?: string;
+};
+
+const sizeClass: Record<ChipSize, string> = {
+  sm: "h-7 px-2.5 text-label-sm",
+  md: "h-8 px-3 text-label-md",
+  lg: "h-9 px-3.5 text-label-lg",
+};
+
+/** The slot is 0px wide until pressed, then opens to icon + the label gap (6 / 8 / 10px). */
+const checkSlotClass: Record<ChipSize, string> = {
+  sm: "group-data-pressed:w-[1.125rem]",
+  md: "group-data-pressed:w-[1.375rem]",
+  lg: "group-data-pressed:w-[1.625rem]",
+};
+
+const checkIconClass: Record<ChipSize, string> = {
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4",
+};
+
+/** Figma `Chip` (61:302): a 32px solid toggle, no glass; selected shows a check, the brand border and brand text. */
+export function Chip({ size = "md", className, children, onPressedChange, ...props }: ChipProps) {
+  // The exit animation only plays after the first toggle, so a chip that mounts unpressed never flashes the check.
+  const [toggled, setToggled] = useState(false);
+  // Preflight makes every `svg` a block box, so an icon passed as a child would stack above the
+  // label and clip. Element children get a row at the label gap; text keeps the plain span.
+  const hasElementChild = Children.toArray(children).some(
+    (child) => typeof child !== "string" && typeof child !== "number",
+  );
+  return (
+    <Toggle
+      className={cn(
+        "group relative inline-flex shrink-0 motion-press cursor-pointer items-center justify-center rounded-full border whitespace-nowrap",
+        sizeClass[size],
+        "border-border-default bg-bg-surface text-text-primary hover:not-data-disabled:bg-bg-subtle",
+        "data-pressed:border-border-brand data-pressed:text-text-brand",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-40",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        className,
+      )}
+      onPressedChange={(pressed, eventDetails) => {
+        setToggled(true);
+        onPressedChange?.(pressed, eventDetails);
+      }}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          "relative flex w-0 shrink-0 overflow-hidden transition-[width] duration-150 ease-out",
+          checkSlotClass[size],
+        )}
+      >
+        <Check
+          className={cn(
+            "opacity-0 group-data-pressed:opacity-100",
+            toggled && "animate-pop-out group-data-pressed:animate-pop-in",
+            checkIconClass[size],
+          )}
+        />
+      </span>
+      <span className={cn("relative text-trim", hasElementChild && "inline-flex items-center gap-1.5")}>
+        {children}
+      </span>
+    </Toggle>
+  );
+}

package/src/components/choice-card.tsx

@@ -0,0 +1,55 @@
+import { Radio as BaseRadio } from "@base-ui/react/radio";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+export type ChoiceCardProps = Omit<ComponentProps<typeof BaseRadio.Root>, "className" | "children" | "title"> & {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Pill at the end of the title line, e.g. "Recommended": 22px, 8px padding, 18% sky with brand text (Paper Mobile connection). */
+  badge?: ReactNode;
+  /** `brand` (default) is 18% sky with brand text; `neutral` is 6% ink with secondary text. */
+  badgeTone?: "brand" | "neutral";
+  className?: string;
+};
+
+/**
+ * Paper `Choice card` (1VXM-0 selected, 1VXR-0 default): a 252px solid card, padding 14, radius 16, gap 12,
+ * with a 1px default border that turns brand when selected; no glass.
+ * Use inside `RadioGroup`. The 18px radio is a ring: 1.5px grey when off, a 5px ink ring around an 8px core when on.
+ */
+export function ChoiceCard({ title, description, badge, badgeTone = "brand", className, ...props }: ChoiceCardProps) {
+  return (
+    <BaseRadio.Root
+      className={cn(
+        "group relative flex w-full max-w-[252px] cursor-pointer items-start gap-3 overflow-clip rounded-2xl border border-border-default bg-bg-surface p-3.5 text-left motion-colors data-checked:border-border-brand data-unchecked:hover:border-border-strong",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-40",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden
+        className="relative mt-px flex size-[18px] shrink-0 items-center justify-center rounded-full border-[1.5px] border-border-dashed motion-colors group-data-checked:border-interactive-primary group-data-checked:shadow-[inset_0_0_0_3.5px_var(--color-interactive-primary)]"
+      >
+        <BaseRadio.Indicator className="size-2 animate-pop-in rounded-full bg-interactive-on-primary data-unchecked:hidden" />
+      </span>
+      <span className="relative flex min-w-0 flex-1 flex-col gap-1">
+        <span className="flex items-center gap-2.5">
+          <span className="min-w-0 flex-1 text-label-md font-semibold text-text-primary">{title}</span>
+          {badge && (
+            <span
+              className={cn(
+                "inline-flex h-[22px] shrink-0 items-center rounded-full px-2 text-label-sm",
+                badgeTone === "brand" ? "bg-accent-sky-500-18 text-text-brand" : "bg-overlay-ink-6 text-text-secondary",
+              )}
+            >
+              {badge}
+            </span>
+          )}
+        </span>
+        {description && <span className="text-caption text-text-secondary">{description}</span>}
+      </span>
+    </BaseRadio.Root>
+  );
+}

package/src/components/code-panel.tsx

@@ -0,0 +1,27 @@
+import type { ComponentProps } from "react";
+
+import { cn } from "../lib/cn";
+
+export type CodePanelProps = Omit<ComponentProps<"pre">, "className"> & { className?: string };
+
+/**
+ * Paper `Code block` (1VV9-0), the light variant: a 10px-radius neutral-50 panel with a 1px hairline,
+ * Geist Mono 12px on a 21px line pitch (Paper rows are 19px with a 2px gap), no header bar or copy button. Wrap keys in `CodeKey`; plain text reads as the string color.
+ * Chat surfaces keep the ink `CodeBlock` from message-extras.
+ */
+export function CodePanel({ className, ...props }: CodePanelProps) {
+  return (
+    <pre
+      className={cn(
+        "font-normal m-0 max-w-full overflow-x-auto rounded-[10px] border border-border-default bg-neutral-50 px-4 py-3.5 font-mono text-[12px]/[21px] whitespace-pre text-syntax-string dark:border-border-strong dark:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** A frontmatter key or other highlighted token inside a `CodePanel`. */
+export function CodeKey({ className, ...props }: Omit<ComponentProps<"span">, "className"> & { className?: string }) {
+  return <span className={cn("text-syntax-key", className)} {...props} />;
+}

package/src/components/combobox.tsx

@@ -0,0 +1,312 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+import { CaretDown, Check, MagnifyingGlass, X } from "@phosphor-icons/react";
+import { useRef, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import type { ControlSize } from "../lib/size";
+import { fieldBoxClass, fieldSizeClass, fieldTextClass, type InputSurface } from "./input";
+import { inputGroupSegmentClass, useInputGroup } from "./input-group";
+
+export type ComboboxSize = ControlSize;
+
+export type ComboboxItemData = {
+  value: string;
+  /** Row text and the text the search matches. */
+  label: string;
+  /** Shorter text shown once chosen, such as `+82` for "+82 South Korea". */
+  selectedLabel?: string;
+  /** Secondary text on the right of the row, such as a dial code. */
+  trailing?: ReactNode;
+  /** Extra search terms that are not shown, such as `KR` or `Korea`. */
+  keywords?: readonly string[];
+  disabled?: boolean;
+};
+
+type ComboboxBaseProps = {
+  items: readonly ComboboxItemData[];
+  placeholder?: string;
+  /** Placeholder of the search box inside the popup (`segment` variant). */
+  searchPlaceholder?: string;
+  /** Shown in the popup when nothing matches the search. */
+  emptyLabel?: ReactNode;
+  size?: ComboboxSize;
+  surface?: InputSurface;
+  /**
+   * `field` is a searchable field (the default). `segment` is the tinted prefix or suffix of an
+   * `InputGroup`: a button that opens a popup with the search box on top, taking the group's size.
+   */
+  variant?: "field" | "segment";
+  invalid?: boolean;
+  disabled?: boolean;
+  /** Form field name; the submitted value is the item `value`. */
+  name?: string;
+  className?: string;
+  "aria-label"?: string;
+};
+
+export type ComboboxSingleProps = ComboboxBaseProps & {
+  multiple?: false;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+};
+
+export type ComboboxMultipleProps = ComboboxBaseProps & {
+  /** Chosen items show as removable chips in the field. */
+  multiple: true;
+  value?: readonly string[];
+  defaultValue?: readonly string[];
+  onValueChange?: (value: string[]) => void;
+};
+
+export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
+
+const itemClass: Record<ComboboxSize, string> = {
+  sm: "h-8 gap-2 px-2.5 text-label-sm [&_svg]:size-4",
+  md: "h-10 gap-2.5 px-3 text-label-md [&_svg]:size-4",
+  lg: "h-12 gap-3 px-4 text-label-lg [&_svg]:size-5",
+};
+
+const chipClass: Record<ComboboxSize, string> = {
+  sm: "h-5 gap-0.5 pr-0.5 pl-1.5 text-label-sm [&_svg]:size-3",
+  md: "h-6 gap-1 pr-1 pl-2 text-label-sm [&_svg]:size-3.5",
+  lg: "h-7 gap-1 pr-1 pl-2.5 text-label-md [&_svg]:size-4",
+};
+
+/** Multiple chips wrap, so the field grows from its rung height instead of fixing it. */
+const multiFieldClass: Record<ComboboxSize, string> = {
+  sm: "min-h-8 flex-wrap gap-1 px-2 py-1",
+  md: "min-h-10 flex-wrap gap-1.5 px-2.5 py-1.5",
+  lg: "min-h-12 flex-wrap gap-2 px-3 py-2",
+};
+
+/** The popup follows the field's surface (a segment takes its group's): glass is the veil, every solid kind is solid. */
+const popupClass =
+  "relative max-h-80 min-w-(--anchor-width) max-w-[calc(100vw-2rem)] motion-popup overflow-clip rounded-xl p-1.5 outline-none";
+const popupSurfaceClass = (surface: InputSurface) =>
+  surface === "glass" ? "veil-overlay" : "border border-border-default bg-bg-surface shadow-popover";
+
+const findItem = (items: readonly ComboboxItemData[], value: string | null | undefined) =>
+  value == null ? null : (items.find((item) => item.value === value) ?? null);
+
+const shortLabel = (item: ComboboxItemData) => item.selectedLabel ?? item.label;
+
+/**
+ * Search and choose: a field you type into to narrow the list, then pick one item or, with
+ * `multiple`, several items shown as chips. The popup matches `Select`: the veil, rows with
+ * a check. `variant="segment"` puts it in an `InputGroup`, such as a country code before a
+ * phone number.
+ */
+export function Combobox(props: ComboboxProps) {
+  const {
+    items,
+    placeholder = "Search",
+    searchPlaceholder = "Search",
+    emptyLabel = "No results",
+    size: ownSize = "md",
+    surface = "solid",
+    variant = "field",
+    invalid,
+    disabled,
+    name,
+    className,
+    "aria-label": ariaLabel,
+  } = props;
+  const group = useInputGroup();
+  const segment = variant === "segment";
+  const size = segment && group ? group.size : ownSize;
+  const popupSurface = segment && group ? group.surface : surface;
+  const anchor = useRef<HTMLDivElement>(null);
+
+  const list = (
+    <BaseCombobox.Portal>
+      <BaseCombobox.Positioner
+        anchor={segment ? undefined : anchor}
+        sideOffset={4}
+        align="start"
+        className="z-50 outline-none"
+      >
+        <BaseCombobox.Popup
+          className={cn(
+            popupClass,
+            popupSurfaceClass(popupSurface),
+            segment && "flex w-64 max-w-[calc(100vw-2rem)] flex-col gap-1",
+          )}
+        >
+          {segment && (
+            <div className={cn(fieldBoxClass.base, fieldBoxClass.solid, fieldSizeClass[size], "shrink-0")}>
+              <MagnifyingGlass aria-hidden className="relative shrink-0 text-text-secondary" />
+              <BaseCombobox.Input
+                placeholder={searchPlaceholder}
+                className={cn("relative", fieldBoxClass.text, fieldTextClass[size])}
+              />
+            </div>
+          )}
+          <BaseCombobox.Empty
+            className={cn(
+              "relative px-3 text-text-secondary empty:hidden",
+              size === "lg" ? "py-3 text-body-md" : "py-2 text-body-sm",
+            )}
+          >
+            {emptyLabel}
+          </BaseCombobox.Empty>
+          <BaseCombobox.List className="relative flex max-h-64 flex-col gap-0.5 overflow-y-auto">
+            {(item: ComboboxItemData) => (
+              <BaseCombobox.Item
+                key={item.value}
+                value={item}
+                disabled={item.disabled}
+                className={cn(
+                  "flex shrink-0 cursor-pointer items-center rounded-md text-text-primary motion-colors outline-none select-none data-disabled:cursor-not-allowed data-disabled:opacity-40 data-highlighted:bg-overlay-ink-6 data-selected:bg-overlay-ink-6",
+                  itemClass[size],
+                )}
+              >
+                <span className="min-w-0 flex-1 truncate">{item.label}</span>
+                {item.trailing && <span className="shrink-0 text-text-secondary">{item.trailing}</span>}
+                <BaseCombobox.ItemIndicator className="flex shrink-0 text-text-primary">
+                  <Check />
+                </BaseCombobox.ItemIndicator>
+              </BaseCombobox.Item>
+            )}
+          </BaseCombobox.List>
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+
+  const shared = {
+    items,
+    name,
+    disabled: disabled ?? (segment ? group?.disabled : undefined),
+    itemToStringLabel: shortLabel,
+    itemToStringValue: (item: ComboboxItemData) => item.value,
+    isItemEqualToValue: (item: ComboboxItemData, value: ComboboxItemData) => item.value === value.value,
+    filter: (item: ComboboxItemData, query: string) => {
+      const needle = query.trim().toLowerCase();
+      if (!needle) return true;
+      return [item.label, item.value, ...(item.keywords ?? [])].some((text) => text.toLowerCase().includes(needle));
+    },
+  };
+
+  const body = (
+    <>
+      {segment ? (
+        <BaseCombobox.Trigger
+          aria-label={ariaLabel}
+          className={cn(
+            inputGroupSegmentClass[size],
+            "group cursor-pointer text-left outline-none data-disabled:cursor-not-allowed data-disabled:text-text-disabled",
+            className,
+          )}
+        >
+          <BaseCombobox.Value>
+            {(value: ComboboxItemData | ComboboxItemData[] | null) => {
+              const chosen = Array.isArray(value) ? value : value ? [value] : [];
+              return chosen.length ? (
+                <span className="truncate">{chosen.map(shortLabel).join(", ")}</span>
+              ) : (
+                <span className="text-text-placeholder">{placeholder}</span>
+              );
+            }}
+          </BaseCombobox.Value>
+          <CaretDown
+            aria-hidden
+            className="shrink-0 transition-transform duration-200 ease-out-quint group-data-popup-open:rotate-180"
+          />
+        </BaseCombobox.Trigger>
+      ) : props.multiple ? (
+        <BaseCombobox.Chips
+          ref={anchor}
+          data-invalid={invalid ? "" : undefined}
+          className={cn(
+            fieldBoxClass.base,
+            fieldBoxClass[surface],
+            multiFieldClass[size],
+            "w-60 max-w-full cursor-text data-disabled:cursor-not-allowed",
+            className,
+          )}
+        >
+          <BaseCombobox.Value>
+            {(value: ComboboxItemData[]) => (
+              <>
+                {value.map((item) => (
+                  <BaseCombobox.Chip
+                    key={item.value}
+                    className={cn(
+                      "relative flex shrink-0 animate-pop-in items-center rounded-full bg-overlay-ink-6 text-text-primary outline-none data-highlighted:bg-overlay-ink-12",
+                      chipClass[size],
+                    )}
+                  >
+                    {shortLabel(item)}
+                    <BaseCombobox.ChipRemove
+                      aria-label={`Remove ${item.label}`}
+                      className="flex cursor-pointer rounded-full p-0.5 text-text-secondary hover:bg-overlay-ink-10 hover:text-text-primary"
+                    >
+                      <X />
+                    </BaseCombobox.ChipRemove>
+                  </BaseCombobox.Chip>
+                ))}
+                <BaseCombobox.Input
+                  aria-label={ariaLabel}
+                  aria-invalid={invalid || undefined}
+                  placeholder={value.length ? undefined : placeholder}
+                  className={cn("relative min-w-16", fieldBoxClass.text, fieldTextClass[size])}
+                />
+              </>
+            )}
+          </BaseCombobox.Value>
+        </BaseCombobox.Chips>
+      ) : (
+        <BaseCombobox.InputGroup
+          ref={anchor}
+          data-invalid={invalid ? "" : undefined}
+          className={cn(fieldBoxClass.base, fieldBoxClass[surface], fieldSizeClass[size], "w-60 max-w-full", className)}
+        >
+          <MagnifyingGlass aria-hidden className="relative shrink-0 text-text-secondary" />
+          <BaseCombobox.Input
+            aria-label={ariaLabel}
+            aria-invalid={invalid || undefined}
+            placeholder={placeholder}
+            className={cn("relative", fieldBoxClass.text, fieldTextClass[size])}
+          />
+          <BaseCombobox.Trigger
+            aria-label="Show options"
+            className="group relative flex shrink-0 cursor-pointer text-text-secondary outline-none"
+          >
+            <CaretDown
+              aria-hidden
+              className="transition-transform duration-200 ease-out-quint group-data-popup-open:rotate-180"
+            />
+          </BaseCombobox.Trigger>
+        </BaseCombobox.InputGroup>
+      )}
+      {list}
+    </>
+  );
+
+  if (props.multiple) {
+    const toItems = (values: readonly string[] | undefined) =>
+      values?.map((value) => findItem(items, value)).filter((item) => item !== null);
+    return (
+      <BaseCombobox.Root
+        {...shared}
+        multiple
+        value={toItems(props.value)}
+        defaultValue={toItems(props.defaultValue)}
+        onValueChange={(next) => props.onValueChange?.(next.map((item) => item.value))}
+      >
+        {body}
+      </BaseCombobox.Root>
+    );
+  }
+  return (
+    <BaseCombobox.Root
+      {...shared}
+      value={props.value === undefined ? undefined : findItem(items, props.value)}
+      defaultValue={props.defaultValue === undefined ? undefined : findItem(items, props.defaultValue)}
+      onValueChange={(next) => props.onValueChange?.(next?.value ?? null)}
+    >
+      {body}
+    </BaseCombobox.Root>
+  );
+}