devnonla-ui 0.1.0

package/src/switch/Switch.tsx

@@ -0,0 +1,58 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { type CSSProperties, type ComponentPropsWithoutRef, forwardRef } from "react";
+import { cn } from "../lib/cn";
+import { type ControlSize, controlRadiusVar, normalizeSize } from "../lib/sizes";
+
+export type SwitchVariant = "default" | "square";
+
+export type SwitchProps = Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, "onCheckedChange" | "checked" | "onChange"> & {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  /** antd-style — receives the next checked boolean (not a DOM event). */
+  onChange?: (checked: boolean) => void;
+  size?: ControlSize;
+  variant?: SwitchVariant;
+};
+
+/** Switch track heights — shorter than Button/Input (antd-like). */
+const SWITCH_TRACK_H = { small: 16, default: 22, large: 28 } as const;
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch({ className, checked, defaultChecked, onChange, size, variant = "default", disabled, style, ...rest }, ref) {
+  const trackH = SWITCH_TRACK_H[normalizeSize(size)];
+  const trackW = Math.round(trackH * 1.8);
+  const thumb = trackH - 4;
+  const travel = trackW - thumb - 3;
+  const square = variant === "square";
+  const squareRadius = `max(3px, calc(${controlRadiusVar(size)} * 0.55))`;
+
+  return (
+    <SwitchPrimitive.Root
+      ref={ref}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      disabled={disabled}
+      onCheckedChange={onChange}
+      className={cn(
+        "peer inline-flex shrink-0 cursor-pointer items-center border transition-colors duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+        square ? undefined : "rounded-full",
+        "focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-45",
+        "data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=unchecked]:border-[color-mix(in_oklab,var(--foreground)_40%,var(--background))] data-[state=unchecked]:bg-[color-mix(in_oklab,var(--foreground)_22%,var(--background))]",
+        className,
+      )}
+      style={{ width: trackW, height: trackH, borderRadius: square ? squareRadius : undefined, ...style }}
+      {...rest}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn("pointer-events-none block bg-(--nonla-surface) shadow-sm transition-transform duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] data-[state=unchecked]:translate-x-0.5 data-[state=checked]:translate-x-(--nonla-switch-travel)", square ? undefined : "rounded-full")}
+        style={
+          {
+            width: thumb,
+            height: thumb,
+            borderRadius: square ? `max(1px, calc(${squareRadius} - 1px))` : undefined,
+            ["--nonla-switch-travel" as string]: `${travel}px`,
+          } as CSSProperties
+        }
+      />
+    </SwitchPrimitive.Root>
+  );
+});

package/src/table/Table.tsx

@@ -0,0 +1,387 @@
+import { type CSSProperties, type Key, type ReactNode, useMemo, useState } from "react";
+import { Checkbox } from "../checkbox/Checkbox";
+import { Empty } from "../empty/Empty";
+import { cn } from "../lib/cn";
+import { type ControlSize, normalizeSize } from "../lib/sizes";
+import { Pagination } from "../pagination/Pagination";
+import { Spin } from "../spin/Spin";
+
+export type SortOrder = "ascend" | "descend" | null;
+
+export type ColumnType<T> = {
+  title?: ReactNode;
+  dataIndex?: keyof T | string | (string | number)[];
+  key?: string;
+  width?: number | string;
+  minWidth?: number | string;
+  align?: "left" | "center" | "right";
+  /** Custom cell — Ant Design style `(value, record, index) => ReactNode`. */
+  render?: (value: any, record: T, index: number) => ReactNode;
+  className?: string;
+  ellipsis?: boolean;
+  fixed?: "left" | "right";
+  /** `true` = default compare on `dataIndex`; or pass a compare fn. */
+  sorter?: boolean | ((a: T, b: T) => number);
+  sortOrder?: SortOrder;
+  defaultSortOrder?: SortOrder;
+  onHeaderCell?: () => { className?: string; style?: CSSProperties };
+};
+
+export type ColumnsType<T> = ColumnType<T>[];
+
+export type TablePaginationConfig = {
+  current?: number;
+  pageSize?: number;
+  total?: number;
+  onChange?: (page: number, pageSize: number) => void;
+  hideOnSinglePage?: boolean;
+  className?: string;
+};
+
+export type TableRowSelection<T> = {
+  selectedRowKeys?: Key[];
+  defaultSelectedRowKeys?: Key[];
+  onChange?: (selectedRowKeys: Key[], selectedRows: T[]) => void;
+  getCheckboxProps?: (record: T) => { disabled?: boolean };
+  columnWidth?: number | string;
+  type?: "checkbox" | "radio";
+};
+
+export type TableProps<T extends object = Record<string, unknown>> = {
+  columns?: ColumnType<T>[];
+  dataSource?: T[];
+  rowKey?: keyof T | ((record: T) => Key);
+  loading?: boolean;
+  /** `false` disables; object enables (client-side slice when `total` omitted). */
+  pagination?: false | TablePaginationConfig;
+  className?: string;
+  size?: ControlSize;
+  bordered?: boolean;
+  scroll?: { x?: number | string; y?: number | string };
+  onRow?: (
+    record: T,
+    index: number,
+  ) => {
+    onClick?: () => void;
+    className?: string;
+    style?: CSSProperties;
+  };
+  locale?: { emptyText?: ReactNode };
+  showHeader?: boolean;
+  title?: ReactNode | ((data: readonly T[]) => ReactNode);
+  footer?: ReactNode | ((data: readonly T[]) => ReactNode);
+  rowSelection?: TableRowSelection<T>;
+  rowClassName?: string | ((record: T, index: number) => string);
+  onChange?: (pagination: TablePaginationConfig | false, _filters: Record<string, unknown>, sorter: { columnKey?: string; field?: string; order?: SortOrder }) => void;
+};
+
+function getRowKey<T extends object>(record: T, index: number, rowKey?: TableProps<T>["rowKey"]): Key {
+  if (typeof rowKey === "function") return rowKey(record);
+  if (typeof rowKey === "string" || typeof rowKey === "number") {
+    return String(record[rowKey as keyof T] ?? index);
+  }
+  if ("id" in record) return String((record as { id: unknown }).id);
+  if ("key" in record) return String((record as { key: unknown }).key);
+  return index;
+}
+
+function getCellValue<T>(record: T, dataIndex?: ColumnType<T>["dataIndex"]): unknown {
+  if (dataIndex == null) return undefined;
+  if (Array.isArray(dataIndex)) {
+    let cur: unknown = record;
+    for (const part of dataIndex) {
+      if (cur == null || typeof cur !== "object") return undefined;
+      cur = (cur as Record<string | number, unknown>)[part];
+    }
+    return cur;
+  }
+  return (record as Record<string, unknown>)[dataIndex as string];
+}
+
+function getColumnKey<T>(col: ColumnType<T>, index: number): string {
+  if (col.key != null) return col.key;
+  if (Array.isArray(col.dataIndex)) return col.dataIndex.join(".");
+  if (col.dataIndex != null) return String(col.dataIndex);
+  return String(index);
+}
+
+function defaultCompare(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a).localeCompare(String(b), undefined, { numeric: true, sensitivity: "base" });
+}
+
+/** Dual filled carets with a clear gap (stroke chevrons merge into a ◇). */
+function SortIcon({ order }: { order: SortOrder | undefined }) {
+  return (
+    <span className="ml-1.5 inline-flex shrink-0 flex-col items-center gap-0.5" aria-hidden>
+      <svg width="7" height="4" viewBox="0 0 7 4" className={cn(order === "ascend" ? "text-foreground" : "text-muted-foreground/45")}>
+        <path d="M3.5 0 7 4H0z" fill="currentColor" />
+      </svg>
+      <svg width="7" height="4" viewBox="0 0 7 4" className={cn(order === "descend" ? "text-foreground" : "text-muted-foreground/45")}>
+        <path d="M3.5 4 0 0h7z" fill="currentColor" />
+      </svg>
+    </span>
+  );
+}
+
+function sizeClasses(size: ControlSize | undefined) {
+  const s = normalizeSize(size);
+  if (s === "small") {
+    return {
+      head: "h-9 px-2 text-xs",
+      cell: "px-2 py-1.5 text-xs",
+      check: "w-9 px-2",
+    };
+  }
+  if (s === "large") {
+    return {
+      head: "h-12 px-3 text-sm",
+      cell: "px-3 py-3 text-sm",
+      check: "w-12 px-3",
+    };
+  }
+  // default — matches shadcn TableHead h-10 / TableCell p-2 / text-sm
+  return {
+    head: "h-10 px-2 text-sm",
+    cell: "p-2 text-sm",
+    check: "w-10 px-2",
+  };
+}
+
+export function Table<T extends object = Record<string, unknown>>({ columns = [], dataSource = [], rowKey, loading, pagination, className, size, bordered, scroll, onRow, locale, showHeader = true, title, footer, rowSelection, rowClassName, onChange }: TableProps<T>) {
+  const sz = sizeClasses(size);
+
+  const selectionControlled = rowSelection?.selectedRowKeys !== undefined;
+  const [innerSelected, setInnerSelected] = useState<Key[]>(() => rowSelection?.defaultSelectedRowKeys ?? []);
+  const selectedKeys = selectionControlled ? (rowSelection?.selectedRowKeys ?? []) : innerSelected;
+
+  const [innerPage, setInnerPage] = useState(1);
+  const [innerPageSize, setInnerPageSize] = useState(10);
+
+  const initialSort = useMemo(() => {
+    const col = columns.find((c) => c.defaultSortOrder);
+    if (!col) return { key: null as string | null, order: null as SortOrder };
+    return { key: getColumnKey(col, columns.indexOf(col)), order: col.defaultSortOrder ?? null };
+  }, [columns]);
+
+  const [innerSort, setInnerSort] = useState(initialSort);
+
+  const controlledSortCol = columns.find((c) => c.sortOrder !== undefined);
+  const sortState = controlledSortCol
+    ? {
+        key: getColumnKey(controlledSortCol, columns.indexOf(controlledSortCol)),
+        order: controlledSortCol.sortOrder ?? null,
+      }
+    : innerSort;
+
+  const paginationOff = pagination === false;
+  const pageConfig: TablePaginationConfig = paginationOff ? {} : (pagination ?? {});
+  const pageControlled = pageConfig.current !== undefined;
+  const current = pageControlled ? (pageConfig.current ?? 1) : innerPage;
+  const pageSize = pageConfig.pageSize ?? (pageControlled ? 10 : innerPageSize);
+  const serverSide = pageConfig.total !== undefined;
+
+  const sortedData = useMemo(() => {
+    if (!sortState.key || !sortState.order) return dataSource;
+    const colIndex = columns.findIndex((c, i) => getColumnKey(c, i) === sortState.key);
+    const col = colIndex >= 0 ? columns[colIndex] : undefined;
+    if (!col?.sorter) return dataSource;
+    const dir = sortState.order === "ascend" ? 1 : -1;
+    const cmp = typeof col.sorter === "function" ? col.sorter : (a: T, b: T) => defaultCompare(getCellValue(a, col.dataIndex), getCellValue(b, col.dataIndex));
+    return [...dataSource].sort((a, b) => cmp(a, b) * dir);
+  }, [columns, dataSource, sortState.key, sortState.order]);
+
+  const total = serverSide ? (pageConfig.total ?? sortedData.length) : sortedData.length;
+
+  const pageData = useMemo(() => {
+    if (paginationOff || serverSide) return sortedData;
+    const start = (current - 1) * pageSize;
+    return sortedData.slice(start, start + pageSize);
+  }, [sortedData, paginationOff, serverSide, current, pageSize]);
+
+  const showPagination = !paginationOff && !(pageConfig.hideOnSinglePage && total <= pageSize) && (total > 0 || serverSide);
+
+  const emitSelection = (keys: Key[]) => {
+    if (!selectionControlled) setInnerSelected(keys);
+    const rows = dataSource.filter((r, i) => keys.includes(getRowKey(r, i, rowKey)));
+    rowSelection?.onChange?.(keys, rows);
+  };
+
+  /** Two modes only: ascend ↔ descend. */
+  const toggleSort = (col: ColumnType<T>, index: number) => {
+    if (!col.sorter) return;
+    const key = getColumnKey(col, index);
+    const next: SortOrder = sortState.key === key && sortState.order === "ascend" ? "descend" : "ascend";
+    if (!controlledSortCol) setInnerSort({ key, order: next });
+    onChange?.(
+      paginationOff ? false : { current, pageSize, total },
+      {},
+      {
+        columnKey: key,
+        field: Array.isArray(col.dataIndex) ? col.dataIndex.join(".") : String(col.dataIndex ?? key),
+        order: next,
+      },
+    );
+  };
+
+  const handlePageChange = (page: number, nextSize: number) => {
+    if (!pageControlled) {
+      setInnerPage(page);
+      setInnerPageSize(nextSize);
+    }
+    pageConfig.onChange?.(page, nextSize);
+    onChange?.({ current: page, pageSize: nextSize, total }, {}, { columnKey: sortState.key ?? undefined, order: sortState.order });
+  };
+
+  const pageKeys = pageData.map((r, i) => getRowKey(r, (current - 1) * pageSize + i, rowKey));
+  const enabledPageKeys = pageData
+    .map((r, i) => ({ key: pageKeys[i]!, disabled: rowSelection?.getCheckboxProps?.(r)?.disabled }))
+    .filter((x) => !x.disabled)
+    .map((x) => x.key);
+  const allPageSelected = enabledPageKeys.length > 0 && enabledPageKeys.every((k) => selectedKeys.includes(k));
+  const somePageSelected = enabledPageKeys.some((k) => selectedKeys.includes(k));
+
+  const titleNode = typeof title === "function" ? title(pageData) : title;
+  const footerNode = typeof footer === "function" ? footer(pageData) : footer;
+  const selectionColWidth = rowSelection?.columnWidth;
+  const colCount = (columns.length || 1) + (rowSelection ? 1 : 0);
+
+  const alignClass = (align?: "left" | "center" | "right") => (align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left");
+
+  return (
+    <div className={cn("relative w-full", className)}>
+      {titleNode != null ? <div className="mb-3 text-sm font-medium text-foreground">{titleNode}</div> : null}
+
+      <Spin spinning={Boolean(loading)}>
+        <div data-slot="table-container" className={cn("relative w-full overflow-x-auto", bordered && "rounded-md border border-border")} style={scroll?.x != null ? { overflowX: "auto" } : undefined}>
+          <div style={scroll?.y != null ? { maxHeight: scroll.y, overflow: "auto" } : undefined}>
+            <table data-slot="table" className="w-full caption-bottom border-collapse text-sm">
+              {showHeader ? (
+                <thead data-slot="table-header" className="[&_tr]:border-b [&_tr]:border-border">
+                  <tr data-slot="table-row" className="border-b border-border transition-colors hover:bg-transparent">
+                    {rowSelection ? (
+                      <th data-slot="table-head" className={cn(sz.head, sz.check, "align-middle font-medium text-foreground", scroll?.y && "sticky top-0 z-10 bg-background", bordered && "border-b border-border")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined}>
+                        <div className="flex items-center justify-center">
+                          {rowSelection.type === "radio" ? null : (
+                            <Checkbox
+                              checked={allPageSelected}
+                              indeterminate={somePageSelected && !allPageSelected}
+                              onChange={(checked) => {
+                                if (checked) emitSelection(Array.from(new Set([...selectedKeys, ...enabledPageKeys])));
+                                else emitSelection(selectedKeys.filter((k: Key) => !enabledPageKeys.includes(k)));
+                              }}
+                              aria-label="Select all"
+                            />
+                          )}
+                        </div>
+                      </th>
+                    ) : null}
+                    {columns.map((col, i) => {
+                      const key = getColumnKey(col, i);
+                      const order = sortState.key === key ? sortState.order : undefined;
+                      const headerExtra = col.onHeaderCell?.();
+                      const sortable = Boolean(col.sorter);
+                      return (
+                        <th
+                          key={key}
+                          data-slot="table-head"
+                          className={cn(sz.head, "align-middle font-medium whitespace-nowrap text-foreground", alignClass(col.align), scroll?.y && "sticky top-0 z-10 bg-background", bordered && "border-b border-border", sortable && "cursor-pointer select-none", col.className, headerExtra?.className)}
+                          style={{
+                            width: col.width,
+                            minWidth: col.minWidth,
+                            ...headerExtra?.style,
+                          }}
+                          onClick={sortable ? () => toggleSort(col, i) : undefined}
+                        >
+                          <span className={cn("inline-flex max-w-full items-center", col.align === "center" && "justify-center", col.align === "right" && "w-full justify-end")}>
+                            <span className="min-w-0 truncate">{col.title}</span>
+                            {sortable ? <SortIcon order={order ?? undefined} /> : null}
+                          </span>
+                        </th>
+                      );
+                    })}
+                  </tr>
+                </thead>
+              ) : null}
+
+              <tbody data-slot="table-body" className="[&_tr:last-child]:border-0">
+                {pageData.length === 0 ? (
+                  <tr data-slot="table-row" className="border-b border-border">
+                    <td data-slot="table-cell" colSpan={colCount} className={cn(sz.cell, "text-center align-middle")}>
+                      {locale?.emptyText ?? <Empty description="No data" className="py-10" />}
+                    </td>
+                  </tr>
+                ) : (
+                  pageData.map((record, index) => {
+                    const absoluteIndex = paginationOff || serverSide ? index : (current - 1) * pageSize + index;
+                    const key = getRowKey(record, absoluteIndex, rowKey);
+                    const rowProps = onRow?.(record, absoluteIndex);
+                    const extraClass = typeof rowClassName === "function" ? rowClassName(record, absoluteIndex) : rowClassName;
+                    const selected = selectedKeys.includes(key);
+                    return (
+                      <tr key={key} data-slot="table-row" data-state={selected ? "selected" : undefined} className={cn("border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", rowProps?.className, extraClass)} style={rowProps?.style} onClick={rowProps?.onClick}>
+                        {rowSelection ? (
+                          <td data-slot="table-cell" className={cn(sz.cell, sz.check, "align-middle")} style={selectionColWidth != null ? { width: selectionColWidth } : undefined}>
+                            <div className="flex items-center justify-center" onClick={(e) => e.stopPropagation()}>
+                              {rowSelection.type === "radio" ? (
+                                <input type="radio" name="nonla-table-row-select" checked={selected} disabled={rowSelection.getCheckboxProps?.(record)?.disabled} aria-label="Select row" className="size-3.5 accent-foreground" onChange={() => emitSelection([key])} />
+                              ) : (
+                                <Checkbox
+                                  checked={selected}
+                                  disabled={rowSelection.getCheckboxProps?.(record)?.disabled}
+                                  aria-label="Select row"
+                                  onChange={(next) => {
+                                    if (next) emitSelection([...selectedKeys, key]);
+                                    else emitSelection(selectedKeys.filter((k: Key) => k !== key));
+                                  }}
+                                />
+                              )}
+                            </div>
+                          </td>
+                        ) : null}
+                        {columns.map((col, i) => {
+                          const raw = getCellValue(record, col.dataIndex);
+                          const content = col.render ? col.render(raw, record, absoluteIndex) : (raw as ReactNode);
+                          return (
+                            <td
+                              key={getColumnKey(col, i)}
+                              data-slot="table-cell"
+                              className={cn(sz.cell, "align-middle", alignClass(col.align), col.ellipsis ? "max-w-0 truncate" : "whitespace-nowrap", col.className)}
+                              style={{ width: col.width, minWidth: col.minWidth }}
+                              title={col.ellipsis && (typeof content === "string" || typeof content === "number") ? String(content) : undefined}
+                            >
+                              {content}
+                            </td>
+                          );
+                        })}
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+
+              {footerNode != null ? (
+                <tfoot data-slot="table-footer" className="border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0">
+                  <tr>
+                    <td colSpan={colCount} className={cn(sz.cell, "align-middle text-muted-foreground")}>
+                      {footerNode}
+                    </td>
+                  </tr>
+                </tfoot>
+              ) : null}
+            </table>
+          </div>
+        </div>
+      </Spin>
+
+      {showPagination ? (
+        <div className={cn("mt-4 flex justify-end", pageConfig.className)}>
+          <Pagination current={current} pageSize={pageSize} total={total} size={size} onChange={handlePageChange} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/tag/Tag.tsx

@@ -0,0 +1,109 @@
+import type { CSSProperties, ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type TagVariant = "soft" | "solid";
+
+export type TagProps = {
+  children?: ReactNode;
+  color?: string;
+  /** @deprecated prefer `variant="soft"` — kept for antd-ish callers */
+  bordered?: boolean;
+  /**
+   * `soft` — quiet wash (default).
+   * `solid` — saturated chip.
+   * `filled` / `outlined` map to `soft` for backwards compat.
+   */
+  variant?: TagVariant | "filled" | "outlined";
+  className?: string;
+  onClose?: () => void;
+  closable?: boolean;
+  /** Hide the leading status dot on soft colored tags. */
+  dot?: boolean;
+};
+
+const NAMED_VAR: Record<string, string> = {
+  success: "var(--success)",
+  error: "var(--destructive)",
+  warning: "var(--warn)",
+  processing: "var(--link)",
+  brand: "var(--brand)",
+  blue: "var(--nonla-blue)",
+  purple: "var(--nonla-purple)",
+  cyan: "var(--nonla-cyan)",
+  green: "var(--nonla-green)",
+  magenta: "var(--nonla-magenta)",
+  pink: "var(--nonla-pink)",
+  orange: "var(--nonla-orange)",
+  gold: "var(--nonla-gold)",
+  red: "var(--nonla-red)",
+  yellow: "var(--nonla-yellow)",
+  volcano: "var(--nonla-volcano)",
+  geekblue: "var(--nonla-geekblue)",
+  lime: "var(--nonla-lime)",
+};
+
+const SOFT = "bg-[color-mix(in_oklab,var(--nonla-tag)_12%,transparent)] text-[color-mix(in_oklab,var(--nonla-tag)_72%,black)]";
+const SOLID = "bg-(--nonla-tag) text-[var(--nonla-solid-fg)]";
+
+function resolveVariant(variant: TagProps["variant"]): TagVariant {
+  if (variant === "solid") return "solid";
+  return "soft";
+}
+
+function CloseIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden>
+      <path d="M2.2 2.2L7.8 7.8M7.8 2.2L2.2 7.8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function Tag({
+  children,
+  color = "default",
+  bordered: _bordered,
+  variant = "soft",
+  className,
+  closable,
+  onClose,
+  dot,
+}: TagProps) {
+  const named = NAMED_VAR[color];
+  const isDefault = color === "default";
+  const token = named ?? (isDefault ? undefined : color);
+  const mode = resolveVariant(variant);
+  const solid = mode === "solid";
+  const showDot = (dot ?? (!solid && !isDefault)) && Boolean(token || isDefault);
+
+  return (
+    <span
+      className={cn(
+        "inline-flex h-[22px] max-w-full items-center gap-1.5 rounded-full px-2.5 text-[11px] font-medium tracking-[0.01em]",
+        isDefault && (solid ? "bg-foreground/10 text-(--nonla-ink)" : "bg-muted text-muted-foreground"),
+        !isDefault && (solid ? SOLID : SOFT),
+        className,
+      )}
+      style={token ? ({ "--nonla-tag": token } as CSSProperties) : undefined}
+    >
+      {showDot ? (
+        <span
+          className={cn("size-1.5 shrink-0 rounded-full", isDefault ? "bg-(--nonla-fg-muted)" : "bg-(--nonla-tag)")}
+          aria-hidden
+        />
+      ) : null}
+      <span className="min-w-0 overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:4px] [text-box:trim-both_cap_alphabetic]">
+        {children}
+      </span>
+      {closable ? (
+        <button
+          type="button"
+          className="-mr-0.5 inline-flex size-3.5 shrink-0 items-center justify-center rounded-full text-current/55 transition-colors hover:bg-foreground/8 hover:text-current"
+          aria-label="Remove"
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </button>
+      ) : null}
+    </span>
+  );
+}

package/src/theme.ts

@@ -0,0 +1,131 @@
+/**
+ * Theme knobs for NonlaUI.
+ *
+ * Defaults live in `styles.css` on `:root` / `.dark` / `.nonla-ui`.
+ * `--brand-50`…`--brand-800` follow `--nonla-brand` (500 = the knob).
+ * Consumers retheme without touching components:
+ *   1. CSS:  `:root { --nonla-brand: #3b82f6; }`
+ *   2. JS:   `<App theme={{ colors: { brand: "#3b82f6" } }} />` or `applyNonlaTheme({ brand: "#3b82f6" })`
+ */
+
+export const NONLA_THEME_KEYS = {
+  bg: "--nonla-bg",
+  fg: "--nonla-fg",
+  fgMuted: "--nonla-fg-muted",
+  fgTertiary: "--nonla-fg-tertiary",
+  fgQuaternary: "--nonla-fg-quaternary",
+  brand: "--nonla-brand",
+  solidFg: "--nonla-solid-fg",
+  danger: "--nonla-danger",
+  success: "--nonla-success",
+  warn: "--nonla-warn",
+  link: "--nonla-link",
+  radius: "--nonla-radius",
+  height: "--nonla-height",
+  heightSm: "--nonla-height-sm",
+  heightLg: "--nonla-height-lg",
+  ink: "--nonla-ink",
+  surface: "--nonla-surface",
+  elevated: "--nonla-elevated",
+  chip: "--nonla-chip",
+  chipHover: "--nonla-chip-hover",
+  border: "--nonla-border",
+  borderInput: "--nonla-input",
+  composer: "--nonla-composer",
+  chatBg: "--nonla-chat-bg",
+  meadow: "--nonla-meadow",
+  glass: "--nonla-glass",
+  glassBar: "--nonla-glass-bar",
+  glassMenu: "--nonla-glass-menu",
+  glassBorder: "--nonla-glass-border",
+  glassHighlight: "--nonla-glass-highlight",
+  inkHover: "--nonla-ink-hover",
+  inkActive: "--nonla-ink-active",
+  inkLine: "--nonla-ink-line",
+  desktopBarHeight: "--nonla-desktop-bar-height",
+  blue: "--nonla-blue",
+  purple: "--nonla-purple",
+  cyan: "--nonla-cyan",
+  green: "--nonla-green",
+  magenta: "--nonla-magenta",
+  pink: "--nonla-pink",
+  red: "--nonla-red",
+  orange: "--nonla-orange",
+  yellow: "--nonla-yellow",
+  volcano: "--nonla-volcano",
+  geekblue: "--nonla-geekblue",
+  lime: "--nonla-lime",
+  gold: "--nonla-gold",
+} as const;
+
+export type NonlaThemeKnobName = keyof typeof NONLA_THEME_KEYS;
+export type NonlaThemeKnob = (typeof NONLA_THEME_KEYS)[NonlaThemeKnobName];
+
+const METRIC_KEYS = new Set<NonlaThemeKnobName>(["radius", "height", "heightSm", "heightLg", "desktopBarHeight"]);
+
+export type NonlaThemeColorName = Exclude<NonlaThemeKnobName, "radius" | "height" | "heightSm" | "heightLg">;
+export type NonlaThemeColors = { [K in NonlaThemeColorName]?: string };
+
+/** Flat aliases → knob name (`colorBorder` == `colors.border`). */
+const COLOR_ALIASES = {
+  colorBorder: "border",
+  colorBorderInput: "borderInput",
+  /** @deprecated use `borderInput` / `colorBorderInput` */
+  input: "borderInput",
+} as const satisfies Record<string, NonlaThemeColorName>;
+
+export const NONLA_THEME_KNOBS = Object.values(NONLA_THEME_KEYS);
+
+export type NonlaThemeConfig = {
+  [K in NonlaThemeKnobName]?: string;
+} & {
+  /** Grouped color knobs — same names as the flat keys (`colors.border`, `colors.borderInput`, …). */
+  colors?: NonlaThemeColors;
+  /** Alias of `colors.border` / `border`. */
+  colorBorder?: string;
+  /** Alias of `colors.borderInput` / `borderInput`. */
+  colorBorderInput?: string;
+  /** Extra CSS custom properties (include the leading `--`). */
+  vars?: Record<string, string>;
+};
+
+function entriesOf(theme: NonlaThemeConfig): [string, string][] {
+  const map = new Map<string, string>();
+  const set = (key: string, value: unknown) => {
+    if (typeof value !== "string" || !value) return;
+    const knob = (COLOR_ALIASES as Record<string, NonlaThemeKnobName>)[key] ?? (key as NonlaThemeKnobName);
+    const prop = NONLA_THEME_KEYS[knob];
+    if (prop) map.set(prop, value);
+  };
+
+  if (theme.colors) {
+    for (const [key, value] of Object.entries(theme.colors)) {
+      if (METRIC_KEYS.has(key as NonlaThemeKnobName)) continue;
+      set(key, value);
+    }
+  }
+  set("colorBorder", theme.colorBorder);
+  set("colorBorderInput", theme.colorBorderInput);
+  for (const key of Object.keys(NONLA_THEME_KEYS) as NonlaThemeKnobName[]) {
+    set(key, theme[key]);
+  }
+  if (theme.vars) {
+    for (const [prop, value] of Object.entries(theme.vars)) {
+      if (value) map.set(prop, value);
+    }
+  }
+  return [...map.entries()];
+}
+
+/** Apply knobs on an element (defaults to `:root`). Returns a restore function. */
+export function applyNonlaTheme(theme: NonlaThemeConfig, target: HTMLElement = document.documentElement): () => void {
+  const entries = entriesOf(theme);
+  const prev = entries.map(([prop]) => [prop, target.style.getPropertyValue(prop)] as const);
+  for (const [prop, value] of entries) target.style.setProperty(prop, value);
+  return () => {
+    for (const [prop, value] of prev) {
+      if (value) target.style.setProperty(prop, value);
+      else target.style.removeProperty(prop);
+    }
+  };
+}