@anyknown/ui 0.6.1 → 0.8.0

package/dist/components/badge/Badge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { reset, styled } from "../../lib/styled.js";
 import { color, font, radius, space, text } from "../../tokens.stylex.js";
@@ -42,6 +42,20 @@ const styles = stylex.create({
     dotDanger: { color: color.danger },
     dotWarning: { color: color.warning },
     count: { fontFamily: font.mono, fontSize: "0.7rem", fontWeight: 600, lineHeight: 1 },
+    pressable: {
+        cursor: "pointer",
+        backgroundColor: {
+            default: "transparent",
+            ":hover": "color-mix(in srgb, currentColor 10%, transparent)",
+        },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    pressed: {
+        backgroundColor: { default: color.text, ":hover": color.text },
+        borderColor: color.text,
+        color: color.bg,
+    },
     remove: {
         position: "relative",
         display: "grid",
@@ -74,6 +88,10 @@ const DOT_TONES = {
 export function Badge({ variant = "neutral", dot, count, children, sx, ...props }) {
     return (_jsxs("span", { ...props, ...styled(props, styles.base, styles[variant], sx), children: [dot != null && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, DOT_TONES[dot]) }), children, count != null && _jsx("span", { ...stylex.props(styles.count), children: count })] }));
 }
-export function Chip({ onRemove, removeLabel, variant = "outline", children, ...props }) {
-    return (_jsxs(Badge, { variant: variant, ...props, children: [children, onRemove != null && (_jsx("button", { type: "button", "aria-label": removeLabel, onClick: onRemove, ...stylex.props(reset.control, styles.remove), children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m1 1 6 6M7 1 1 7" }) }) }))] }));
+export function Chip({ onRemove, removeLabel, onClick, pressed, variant = "outline", children, sx, ref, ...props }) {
+    const body = (_jsxs(_Fragment, { children: [children, onRemove != null && (_jsx("button", { type: "button", "aria-label": removeLabel, onClick: onRemove, ...stylex.props(reset.control, styles.remove), children: _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m1 1 6 6M7 1 1 7" }) }) }))] }));
+    if (onClick == null) {
+        return (_jsx(Badge, { variant: variant, sx: sx, ref: ref, ...props, children: body }));
+    }
+    return (_jsx("button", { type: "button", "aria-pressed": pressed, onClick: onClick, ...props, ...styled(props, reset.control, styles.base, styles.pressable, styles[variant], pressed === true && styles.pressed, sx), children: body }));
 }

package/dist/components/button/Button.d.ts

@@ -1,7 +1,8 @@
-import { type ComponentProps } from "react";
+import type { ComponentProps } from "react";
 import { type StyleArg } from "../../lib/styled.js";
+type Variant = "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
 type ButtonProps = ComponentProps<"button"> & {
-    variant?: "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
+    variant?: Variant;
     size?: "xs" | "sm" | "md";
     /** Square, no side padding — for a button whose whole label is one icon. */
     icon?: boolean;

package/dist/components/button/Button.js

@@ -1,13 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
-import { useCallback } from "react";
 import { assignRef } from "../../lib/mergeRefs.js";
-import { SilkBody } from "../../lib/silk.js";
 import { styled } from "../../lib/styled.js";
-import { color, font, motion, space, text, yarn, yarnDanger, yarnGhost, yarnSecondary, } from "../../tokens.stylex.js";
-// 織成的實心(TEXTURE-GUIDE):沒有 background,實心由紗織成;
-// 動態全由觸點決定 — 帶動 + 窩 + 掃光(press 全套),幾何在 client 端由
-// SilkBody 以固定種子現織(同尺寸恆定)。reduced-motion 時靜態織紋。
+import { color, corner, font, motion, space, text } from "../../tokens.stylex.js";
 const styles = stylex.create({
     base: {
         position: "relative",
@@ -19,12 +14,12 @@ const styles = stylex.create({
         fontSize: text.sm,
         fontWeight: 500,
         lineHeight: text.leadingTight,
-        borderRadius: 8, // = radius.md;織線 clip 的 rx 同步寫死在 RADIUS
+        borderRadius: corner.btn,
         borderWidth: 0,
         backgroundColor: "transparent",
         cursor: { default: "pointer", ":disabled": "not-allowed" },
         opacity: { default: 1, ":disabled": 0.5 },
-        transitionProperty: "color",
+        transitionProperty: "color, background-color",
         transitionDuration: { default: motion.fast, "@media (prefers-reduced-motion: reduce)": "0s" },
         outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
         outlineOffset: 3,
@@ -51,48 +46,37 @@ const styles = stylex.create({
     iconMd: { paddingInline: 0, width: "2.25rem" },
     iconSm: { paddingInline: 0, width: "1.75rem" },
     iconXs: { paddingInline: 0, width: "1.5rem" },
-    // filter = 整塊布的落影(§3.3);ghost 是疏織,不落影
-    primary: { color: color.accentText, filter: yarn.shadow },
-    secondary: { color: color.text, filter: yarnSecondary.shadow },
-    ghost: { color: color.textMuted, filter: yarnGhost.shadow },
-    danger: { color: color.accentText, filter: yarnDanger.shadow },
-    // 「白底紅字」的織體版:份量走 ghost 疏織(不與 primary 打架),
-    // 語意走 danger token(和 interaction-card 收據列 rejected 的 ✓ 同一個 token)
-    dangerGhost: { color: color.danger, filter: yarnGhost.shadow },
-    silk: {
-        position: "absolute",
-        inset: 0,
-        width: "100%",
-        height: "100%",
-        overflow: "hidden",
-        pointerEvents: "none",
+    primary: {
+        color: color.accentText,
+        backgroundColor: {
+            default: color.accent,
+            ":hover": `color-mix(in srgb, ${color.accent} 86%, ${color.bg})`,
+        },
+    },
+    secondary: {
+        color: color.text,
+        backgroundColor: { default: color.bone, ":hover": color.layer5 },
+    },
+    ghost: {
+        color: color.textMuted,
+        backgroundColor: { default: "transparent", ":hover": color.bone },
+    },
+    danger: {
+        color: color.accentText,
+        backgroundColor: {
+            default: color.danger,
+            ":hover": `color-mix(in srgb, ${color.danger} 86%, ${color.bg})`,
+        },
+    },
+    // 「白底紅字」:份量走 ghost,語意走 danger token(和 interaction-card 收據列
+    // rejected 的 ✓ 同一個 token)
+    dangerGhost: {
+        color: color.danger,
+        backgroundColor: { default: "transparent", ":hover": color.dangerSubtle },
     },
     label: { position: "relative", display: "inline-flex", alignItems: "center", gap: space.xs },
 });
-const RADIUS = 8;
-function palette(vars) {
-    return vars;
-}
-const SILK = {
-    primary: { palette: palette(yarn), bandMax: 0.75 },
-    secondary: { palette: palette(yarnSecondary), bandMax: 0.5 },
-    ghost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
-    danger: { palette: palette(yarnDanger), bandMax: 0.75 },
-    dangerGhost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
-};
 const ICON_SIZE = { xs: "iconXs", sm: "iconSm", md: "iconMd" };
 export function Button({ variant = "primary", size = "md", icon = false, children, ref, sx, ...props }) {
-    // ref callback + cleanup(React 19)管生命週期,不用 effect;
-    // useCallback 鎖 identity,只有 variant 變了才重建織體
-    const silk = useCallback((node) => {
-        if (!node)
-            return;
-        const body = new SilkBody(node.parentElement, node, {
-            ...SILK[variant],
-            mode: "press",
-            radius: RADIUS,
-        });
-        return () => body.destroy();
-    }, [variant]);
-    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], icon && styles[ICON_SIZE[size]], styles[variant], sx), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
+    return (_jsx("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], icon && styles[ICON_SIZE[size]], styles[variant], sx), children: _jsx("span", { ...stylex.props(styles.label), children: children }) }));
 }

package/dist/components/checkbox/Checkbox.js

@@ -3,26 +3,12 @@ import * as stylex from "@stylexjs/stylex";
 import { useCallback, useId } from "react";
 import { assignRef } from "../../lib/mergeRefs.js";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
 import { useControllableState } from "../../lib/useControllableState.js";
-import { buildThread, buildWeave, weaveRand } from "../../lib/weave.js";
-import { color, font, motion, radius, space, text, yarn } from "../../tokens.stylex.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
 import { useFieldControl } from "../label/fieldContext.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-// 布與縫線在 module scope 織一次(固定種子、固定尺寸 → 恆定;純幾何,SSR 安全)。
-// 格子顯示 14.8 CSS px(1.05rem − 2px border),viewBox 24 → s = 24/14.8,
-// 螢幕上紗的粗細行距與 button 等粗。勾/橫線 = 縫在布上的線,與布共用同一支 rand 序列。
-const rand = weaveRand();
-const CLOTH = buildWeave({ w: 14.8, h: 14.8, s: 24 / 14.8 }, rand);
-const CHECK_D = buildThread([
-    [5.83, 12.33],
-    [10.05, 16.55],
-    [18.18, 7.13],
-], rand);
-const DASH_D = buildThread([
-    [6.48, 12],
-    [17.53, 12],
-], rand);
+const CHECK_D = "M6 12.4 L10.2 16.6 L18.2 7.4";
+const DASH_D = "M6.5 12 L17.5 12";
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -35,50 +21,40 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
     box: {
         flex: "none",
+        boxSizing: "border-box",
         width: "1.05rem",
         height: "1.05rem",
         marginTop: "0.16rem",
-        borderWidth: 1,
+        borderWidth: 1.5,
         borderStyle: "solid",
         borderColor: color.borderStrong,
         borderRadius: radius.sm,
-        backgroundColor: color.surface,
-        overflow: "hidden",
-        transitionProperty: "border-color",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
+        backgroundColor: color.bg,
+        transitionProperty: "border-color, background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 2,
     },
-    boxOn: { borderColor: color.accent },
+    boxOn: { borderColor: color.accent, backgroundColor: color.accent },
+    boxInvalid: { borderColor: color.danger },
     svg: { display: "block", width: "100%", height: "100%" },
-    // 勾選 = 布織進格子:clip rect 的 width 從左往右推進,紗本身不動;
-    // 縫線掛同一個 clip — 前緣推到哪,布和勾一起被織出來
-    weave: {
-        width: 0,
-        height: 24,
-        transitionProperty: "width",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
+    mark: {
+        fill: "none",
+        stroke: color.accentText,
+        strokeWidth: 2.4,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeDasharray: 32,
+        strokeDashoffset: 32,
+        transitionProperty: "stroke-dashoffset",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    weaveOn: { width: 24 },
-    cloth: { fill: "none", strokeLinecap: "round" },
-    un: { stroke: yarn.un },
-    sh: { stroke: yarn.sh, opacity: 0.5 },
-    y0: { stroke: yarn.y0 },
-    y1: { stroke: yarn.y1 },
-    y2: { stroke: yarn.y2 },
-    y3: { stroke: yarn.y3 },
-    y4: { stroke: yarn.y4 },
-    hi: { stroke: yarn.hi, opacity: 0.45 },
-    mark: { fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
-    threadShadow: { stroke: "rgba(9, 20, 16, 0.32)" },
-    threadCore: { stroke: color.accentText },
+    markOn: { strokeDashoffset: 0 },
     labelText: { display: "block", fontWeight: 500, fontSize: text.sm, color: color.text },
     description: { display: "block", fontSize: text.xs, color: color.textMuted },
 });
-const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
 export function Checkbox({ indeterminate = false, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, sx, ...props }) {
-    const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -95,8 +71,8 @@ export function Checkbox({ indeterminate = false, label, description, onCheckedC
     const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
         .filter(Boolean)
         .join(" ");
-    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [_jsxs("span", { ...stylex.props(styles.box, filled && styles.boxOn, invalid && styles.boxInvalid), children: [_jsx("input", { type: "checkbox", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, ref: setNode, checked: isChecked, onChange: (event) => {
                             setChecked(event.currentTarget.checked);
                             onChange?.(event);
-                        }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { rx: "3", ...stylex.props(styles.weave, filled && styles.weaveOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, children: [_jsxs("g", { ...stylex.props(styles.cloth), children: [_jsx("g", { ...stylex.props(styles.un), children: CLOTH.under.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), _jsx("g", { ...stylex.props(styles.sh), children: CLOTH.seams.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) }), CLOTH.face.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw, ...stylex.props(BUCKETS[t.bucket]) }, i))), _jsx("g", { ...stylex.props(styles.hi), children: CLOTH.hi.map((t, i) => (_jsx("path", { d: t.d, strokeWidth: t.sw }, i))) })] }), _jsxs("g", { ...stylex.props(styles.mark), children: [_jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "2.1", transform: "translate(0.35 0.5)", ...stylex.props(styles.threadShadow) }), _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, strokeWidth: "1.95", ...stylex.props(styles.threadCore) })] })] })] })] }), (label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] }))] }));
+                        }, ...styled(props, styles.input) }), _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...stylex.props(styles.svg), children: _jsx("path", { d: indeterminate ? DASH_D : CHECK_D, ...stylex.props(styles.mark, filled && styles.markOn) }) })] }), (label != null || description != null) && (_jsxs("span", { children: [label != null && (_jsx("span", { id: labelId, ...stylex.props(styles.labelText), children: label })), description != null && (_jsx("span", { id: descriptionId, ...stylex.props(styles.description), children: description }))] }))] }));
 }

package/dist/components/data-table/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type SortState = {
     col: string;
     dir: "asc" | "desc";
@@ -34,5 +35,10 @@ export type DataTableProps<Row> = {
     selectAllLabel?: string;
     editLabel?: (column: string, key: string) => string;
     clearLabel?: string;
+    /** 捲動區的高度上限。 @default "20rem" */
+    maxHeight?: string | number;
+    /** 跟著列一起捲的結尾 —— 「載入更多」要待在清單裡,不是待在清單外。 */
+    footer?: ReactNode;
+    sx?: StyleArg;
 };
-export declare function DataTable<Row>({ rows, total, rowKey, columns, label, filter, onFilterChange, filterPlaceholder, sort, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel, selectLabel, selectAllLabel, editLabel, clearLabel, }: DataTableProps<Row>): import("react").JSX.Element;
+export declare function DataTable<Row>({ rows, total, rowKey, columns, label, filter, onFilterChange, filterPlaceholder, sort, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel, selectLabel, selectAllLabel, editLabel, clearLabel, maxHeight, footer, sx, }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/components/data-table/DataTable.js

@@ -46,10 +46,10 @@ const styles = stylex.create({
         borderStyle: "solid",
         borderColor: color.border,
         borderRadius: radius.lg,
-        maxHeight: "20rem",
         overflow: "auto",
         marginTop: space.xs,
     },
+    capped: (maxHeight) => ({ maxHeight }),
     table: { width: "100%", borderCollapse: "collapse", fontFamily: font.body, fontSize: text.sm },
     th: {
         position: "sticky",
@@ -161,7 +161,7 @@ function focusOnMount(node) {
 function cellValue(column, row) {
     return column.value?.(row) ?? "";
 }
-export function DataTable({ rows, total, rowKey, columns, label, filter = "", onFilterChange, filterPlaceholder = "過濾…", sort = null, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel = (shown, total) => `${shown} / ${total}`, selectLabel = (key) => `選取 ${key}`, selectAllLabel = "全選", editLabel = (column, key) => `編輯 ${key} 的 ${column}`, clearLabel = "清除過濾", }) {
+export function DataTable({ rows, total, rowKey, columns, label, filter = "", onFilterChange, filterPlaceholder = "過濾…", sort = null, onSortChange, selected, onSelectedChange, emptyState, onClearFilter, countLabel = (shown, total) => `${shown} / ${total}`, selectLabel = (key) => `選取 ${key}`, selectAllLabel = "全選", editLabel = (column, key) => `編輯 ${key} 的 ${column}`, clearLabel = "清除過濾", maxHeight = "20rem", footer, sx, }) {
     const [editing, setEditing] = useState(null);
     const cancelling = useRef(false);
     const [draft, setDraft] = useState("");
@@ -219,38 +219,38 @@ export function DataTable({ rows, total, rowKey, columns, label, filter = "", on
         }
         onSelectedChange?.(next);
     }
-    return (_jsxs("div", { children: [onFilterChange != null && (_jsxs("div", { ...stylex.props(styles.toolbar), children: [_jsxs("div", { ...stylex.props(styles.filter), children: [_jsx("span", { ...stylex.props(styles.filterIcon), children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "search", "aria-label": filterPlaceholder, placeholder: filterPlaceholder, value: filter, onChange: (event) => onFilterChange(event.currentTarget.value), ...stylex.props(styles.filterInput) })] }), _jsx("span", { "aria-live": "polite", ...stylex.props(styles.count), children: countLabel(visible.length, total ?? rows.length) })] })), _jsx("div", { tabIndex: 0, role: "region", "aria-label": label, ...stylex.props(styles.wrap), children: _jsxs("table", { "aria-label": label, ...stylex.props(styles.table), children: [_jsx("thead", { children: _jsxs("tr", { children: [selected != null && (_jsx("th", { scope: "col", ...stylex.props(styles.th, styles.thCheck), children: _jsx("input", { ref: selectAll, type: "checkbox", checked: allSelected, "aria-label": selectAllLabel, onChange: (event) => toggleAll(event.currentTarget.checked), ...stylex.props(styles.checkbox) }) })), columns.map((column) => (_jsx("th", { scope: "col", "aria-sort": sort?.col === column.id ? (sort.dir === "asc" ? "ascending" : "descending") : undefined, ...stylex.props(styles.th), children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column), ...stylex.props(reset.control, styles.sort), children: [column.header, sort?.col === column.id && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.arrow), children: sort.dir === "asc" ? "▲" : "▼" }))] })) : (_jsx("span", { ...stylex.props(styles.plainHeader), children: column.header })) }, column.id)))] }) }), _jsx("tbody", { children: visible.length === 0 ? (_jsx("tr", { children: _jsxs("td", { colSpan: columns.length + (selected != null ? 1 : 0), ...stylex.props(styles.emptyRow), children: [emptyState?.(filter) ?? `找不到符合「${filter}」的資料。`, onClearFilter != null && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", onClick: onClearFilter, ...stylex.props(reset.control, styles.clear), children: clearLabel })] }))] }) })) : (visible.map((row) => {
-                                const key = rowKey(row);
-                                const isSelected = selected?.has(key) ?? false;
-                                return (_jsxs("tr", { ...stylex.props(styles.row, isSelected && styles.rowSelected), children: [selected != null && (_jsx("td", { ...stylex.props(styles.td, styles.tdCheck), children: _jsx("input", { type: "checkbox", checked: isSelected, "aria-label": selectLabel(key), onChange: (event) => {
-                                                    const next = new Set(selected);
-                                                    if (event.currentTarget.checked)
-                                                        next.add(key);
-                                                    else
-                                                        next.delete(key);
-                                                    onSelectedChange?.(next);
-                                                }, ...stylex.props(styles.checkbox) }) })), columns.map((column) => {
-                                            const isEditing = editing?.key === key && editing.col === column.id;
-                                            const value = cellValue(column, row);
-                                            return (_jsx("td", { tabIndex: column.editable ? 0 : undefined, onDoubleClick: column.editable ? () => startEdit(key, column.id, value) : undefined, onKeyDown: column.editable && !isEditing
-                                                    ? (event) => {
-                                                        if (event.key !== "Enter" && event.key !== "F2")
-                                                            return;
-                                                        event.preventDefault();
-                                                        startEdit(key, column.id, value);
-                                                    }
-                                                    : undefined, ...stylex.props(styles.td, column.mono && styles.mono, column.editable && styles.editable), children: isEditing ? (_jsx("input", { ref: focusOnMount, "aria-label": editLabel(column.header, key), value: draft, onChange: (event) => setDraft(event.currentTarget.value), onBlur: (event) => commit(column, row, draft, event.currentTarget.closest("td")), onKeyDown: (event) => {
-                                                        const cell = event.currentTarget.closest("td");
-                                                        if (event.key === "Enter") {
+    return (_jsxs("div", { ...stylex.props(sx), children: [onFilterChange != null && (_jsxs("div", { ...stylex.props(styles.toolbar), children: [_jsxs("div", { ...stylex.props(styles.filter), children: [_jsx("span", { ...stylex.props(styles.filterIcon), children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "search", "aria-label": filterPlaceholder, placeholder: filterPlaceholder, value: filter, onChange: (event) => onFilterChange(event.currentTarget.value), ...stylex.props(styles.filterInput) })] }), _jsx("span", { "aria-live": "polite", ...stylex.props(styles.count), children: countLabel(visible.length, total ?? rows.length) })] })), _jsxs("div", { tabIndex: 0, role: "region", "aria-label": label, ...stylex.props(styles.wrap, styles.capped(maxHeight)), children: [_jsxs("table", { "aria-label": label, ...stylex.props(styles.table), children: [_jsx("thead", { children: _jsxs("tr", { children: [selected != null && (_jsx("th", { scope: "col", ...stylex.props(styles.th, styles.thCheck), children: _jsx("input", { ref: selectAll, type: "checkbox", checked: allSelected, "aria-label": selectAllLabel, onChange: (event) => toggleAll(event.currentTarget.checked), ...stylex.props(styles.checkbox) }) })), columns.map((column) => (_jsx("th", { scope: "col", "aria-sort": sort?.col === column.id ? (sort.dir === "asc" ? "ascending" : "descending") : undefined, ...stylex.props(styles.th), children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column), ...stylex.props(reset.control, styles.sort), children: [column.header, sort?.col === column.id && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.arrow), children: sort.dir === "asc" ? "▲" : "▼" }))] })) : (_jsx("span", { ...stylex.props(styles.plainHeader), children: column.header })) }, column.id)))] }) }), _jsx("tbody", { children: visible.length === 0 ? (_jsx("tr", { children: _jsxs("td", { colSpan: columns.length + (selected != null ? 1 : 0), ...stylex.props(styles.emptyRow), children: [emptyState?.(filter) ?? `找不到符合「${filter}」的資料。`, onClearFilter != null && (_jsxs(_Fragment, { children: [" ", _jsx("button", { type: "button", onClick: onClearFilter, ...stylex.props(reset.control, styles.clear), children: clearLabel })] }))] }) })) : (visible.map((row) => {
+                                    const key = rowKey(row);
+                                    const isSelected = selected?.has(key) ?? false;
+                                    return (_jsxs("tr", { ...stylex.props(styles.row, isSelected && styles.rowSelected), children: [selected != null && (_jsx("td", { ...stylex.props(styles.td, styles.tdCheck), children: _jsx("input", { type: "checkbox", checked: isSelected, "aria-label": selectLabel(key), onChange: (event) => {
+                                                        const next = new Set(selected);
+                                                        if (event.currentTarget.checked)
+                                                            next.add(key);
+                                                        else
+                                                            next.delete(key);
+                                                        onSelectedChange?.(next);
+                                                    }, ...stylex.props(styles.checkbox) }) })), columns.map((column) => {
+                                                const isEditing = editing?.key === key && editing.col === column.id;
+                                                const value = cellValue(column, row);
+                                                return (_jsx("td", { tabIndex: column.editable ? 0 : undefined, onDoubleClick: column.editable ? () => startEdit(key, column.id, value) : undefined, onKeyDown: column.editable && !isEditing
+                                                        ? (event) => {
+                                                            if (event.key !== "Enter" && event.key !== "F2")
+                                                                return;
                                                             event.preventDefault();
-                                                            commit(column, row, draft, cell);
+                                                            startEdit(key, column.id, value);
                                                         }
-                                                        else if (event.key === "Escape") {
-                                                            event.preventDefault();
-                                                            leaveEdit(cell);
-                                                        }
-                                                    }, ...stylex.props(reset.control, styles.cellInput) })) : ((column.cell?.(row) ??
-                                                    (value === "" ? _jsx("span", { ...stylex.props(styles.empty), children: "\u2014" }) : value))) }, column.id));
-                                        })] }, key));
-                            })) })] }) })] }));
+                                                        : undefined, ...stylex.props(styles.td, column.mono && styles.mono, column.editable && styles.editable), children: isEditing ? (_jsx("input", { ref: focusOnMount, "aria-label": editLabel(column.header, key), value: draft, onChange: (event) => setDraft(event.currentTarget.value), onBlur: (event) => commit(column, row, draft, event.currentTarget.closest("td")), onKeyDown: (event) => {
+                                                            const cell = event.currentTarget.closest("td");
+                                                            if (event.key === "Enter") {
+                                                                event.preventDefault();
+                                                                commit(column, row, draft, cell);
+                                                            }
+                                                            else if (event.key === "Escape") {
+                                                                event.preventDefault();
+                                                                leaveEdit(cell);
+                                                            }
+                                                        }, ...stylex.props(reset.control, styles.cellInput) })) : ((column.cell?.(row) ??
+                                                        (value === "" ? _jsx("span", { ...stylex.props(styles.empty), children: "\u2014" }) : value))) }, column.id));
+                                            })] }, key));
+                                })) })] }), footer] })] }));
 }

package/dist/components/dialog/Dialog.d.ts

@@ -20,10 +20,15 @@ export type DialogContentProps = {
     title: ReactNode;
     description?: ReactNode;
     children?: ReactNode;
+    /** 寬度階;`full` 是沉浸式(整個視窗那麼高)。 @default "sm" */
+    size?: "sm" | "md" | "full";
+    /** 會捲的那一段 —— 標頭與 children 釘住,只有這裡捲。 */
+    body?: ReactNode;
+    bodySx?: StyleArg;
     /** 寬高是 popup 自己的事,但要蓋得掉 —— 三欄選擇器那種得自己給 width / maxHeight */
     sx?: StyleArg;
 };
-export declare function DialogContent({ title, description, children, sx }: DialogContentProps): import("react").JSX.Element;
+export declare function DialogContent({ title, description, children, size, body, bodySx, sx, }: DialogContentProps): import("react").JSX.Element;
 export type ConfirmDialogProps = {
     open?: boolean;
     defaultOpen?: boolean;

package/dist/components/dialog/Dialog.js

@@ -44,10 +44,18 @@ const styles = stylex.create({
         outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
         outlineOffset: -2,
     },
+    md: { width: "min(40rem, calc(100vw - 2rem))" },
+    full: {
+        width: "min(64rem, calc(100vw - 2rem))",
+        height: "min(46rem, calc(100vh - 2rem))",
+    },
+    // 有 body 就換成「標頭釘住、只有 body 捲」:popup 自己不再捲
+    split: { display: "flex", flexDirection: "column", overflowY: "hidden" },
+    body: { flexGrow: 1, minHeight: 0, overflowY: "auto" },
     title: {
         fontFamily: font.display,
         fontSize: text.lg,
-        fontWeight: 500,
+        fontWeight: 600,
         lineHeight: text.leadingSnug,
         margin: 0,
         marginBottom: space.xxs,
@@ -67,8 +75,8 @@ export function DialogClose({ children }) {
 export function DialogActions({ children }) {
     return _jsx("div", { ...stylex.props(styles.actions), children: children });
 }
-export function DialogContent({ title, description, children, sx }) {
-    return (_jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { ...stylex.props(layerStyles.dialogBackdrop, styles.backdrop) }), _jsx(BaseDialog.Viewport, { ...stylex.props(layerStyles.dialog, styles.viewport), children: _jsxs(BaseDialog.Popup, { ...stylex.props(styles.popup, sx), children: [_jsx(BaseDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(BaseDialog.Description, { ...stylex.props(styles.description), children: description })), children] }) })] }));
+export function DialogContent({ title, description, children, size = "sm", body, bodySx, sx, }) {
+    return (_jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { ...stylex.props(layerStyles.dialogBackdrop, styles.backdrop) }), _jsx(BaseDialog.Viewport, { ...stylex.props(layerStyles.dialog, styles.viewport), children: _jsxs(BaseDialog.Popup, { ...stylex.props(styles.popup, size === "md" && styles.md, size === "full" && styles.full, body != null && styles.split, sx), children: [_jsx(BaseDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(BaseDialog.Description, { ...stylex.props(styles.description), children: description })), children, body != null && _jsx("div", { ...stylex.props(styles.body, bodySx), children: body })] }) })] }));
 }
 export function ConfirmDialog({ trigger, title, description, danger = false, confirmLabel = "確認", cancelLabel = "取消", onConfirm, ...props }) {
     const cancelRef = useRef(null);

package/dist/components/empty-state/EmptyState.js

@@ -27,7 +27,7 @@ const styles = stylex.create({
     title: {
         fontFamily: font.display,
         fontSize: text.base,
-        fontWeight: 500,
+        fontWeight: 600,
         lineHeight: text.leadingSnug,
         margin: 0,
         color: color.text,

package/dist/components/ghost/Ghost.d.ts

@@ -0,0 +1,16 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ButtonHTMLAttributes, Ref } from "react";
+export type GhostProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    danger?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Ghost({ danger, sx, ...props }: GhostProps): import("react").JSX.Element;
+export type GhostLinkProps = {
+    href: string;
+    children: React.ReactNode;
+    external?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+/** The same word, as a link that leaves the app. */
+export declare function GhostLink({ href, children, external, sx }: GhostLinkProps): import("react").JSX.Element;

package/dist/components/ghost/Ghost.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, motion, space, type } from "../../tokens.stylex.js";
+/** `.ghost`: a word that is a button. 28px, muted until the pointer is on it; `danger` is warning. */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    root: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": color.layer3 },
+        borderRadius: corner.sm,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: { default: "pointer", ":disabled": "default" },
+        display: "inline-flex",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        fontWeight: 400,
+        gap: space.xxs,
+        height: 28,
+        lineHeight: type.body,
+        margin: 0,
+        minHeight: { default: 0, [PHONE]: 40 },
+        opacity: { default: 1, ":disabled": 0.4 },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: 2,
+        paddingBlock: 0,
+        paddingInline: space.xs,
+        textDecoration: "none",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        transitionTimingFunction: motion.easeOut,
+        whiteSpace: "nowrap",
+    },
+    danger: {
+        backgroundColor: {
+            default: "transparent",
+            ":hover": `color-mix(in srgb, ${color.warning} 10%, transparent)`,
+        },
+        color: { default: color.warning, ":hover": color.warning },
+    },
+});
+export function Ghost({ danger = false, sx, ...props }) {
+    return _jsx("button", { type: "button", ...props, ...stylex.props(styles.root, danger && styles.danger, sx) });
+}
+/** The same word, as a link that leaves the app. */
+export function GhostLink({ href, children, external = false, sx }) {
+    return (_jsx("a", { href: href, ...(external ? { target: "_blank", rel: "noreferrer" } : {}), ...stylex.props(styles.root, sx), children: children }));
+}

package/dist/components/group/Group.d.ts

@@ -0,0 +1,66 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export declare function Group({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Item({ children, go, sx }: {
+    children: ReactNode;
+    go?: boolean;
+} & Sx): import("react").JSX.Element;
+export type MarkProps = {
+    letter: string;
+    tint: string;
+    sx?: stylex.StyleXStyles;
+};
+/** The 22px square with the first letter; `tint` is `<colour> <percent>%` for the mix. */
+export declare function Mark({ letter, tint, sx }: MarkProps): import("react").JSX.Element;
+export type StatusProps = {
+    children: ReactNode;
+    warn?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Status({ children, warn, sx }: StatusProps): import("react").JSX.Element;
+export declare function Sep(): import("react").JSX.Element;
+export type RowProps = {
+    mark?: ReactNode;
+    name: ReactNode;
+    /** What follows the name after a `·`: a `Status`, a mono value, a tag. */
+    children?: ReactNode;
+    actions?: ReactNode;
+    /** The whole line is the way in; a chevron says so. */
+    onPress?: () => void;
+    chevron?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Row({ mark, name, children, actions, onPress, chevron, sx }: RowProps): import("react").JSX.Element;
+export type ExpandProps = {
+    open: boolean;
+    /** `plain` drops the mark indent, for a form that is not under a row's mark. */
+    plain?: boolean;
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+/** `.exp`: what a row opens, unfolding under it in 200ms and taking no room when shut. */
+export declare function Expand({ open, plain, children, sx }: ExpandProps): import("react").JSX.Element;
+export type NoteProps = {
+    children: ReactNode;
+    faint?: boolean;
+    err?: boolean;
+    sx?: stylex.StyleXStyles;
+};
+/** A sentence inside an `Expand`: what it means, or what went wrong. */
+export declare function Note({ children, faint, err, sx }: NoteProps): import("react").JSX.Element;
+export declare function Acts({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.empty`: nothing here yet, said inside the group in one muted line. */
+export declare function Empty({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Tag({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export {};