@anyknown/ui 0.7.0 → 0.8.1

package/dist/components/radio/Radio.js

@@ -2,16 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { useId } from "react";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
-import { 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";
 import { useRadioGroup } from "./RadioGroup.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
-// 鏡頭 dot:布像背景一樣在後面延伸(與 checkbox 同源幾何,module scope 織一次),
-// 圓形只是取景框 — 選中 = 孔徑(circle r)從 0 打開,布本身完全不動。
-// 孔徑只開到 r 6.8:維持 radio 的標準構成(外環 + surface 空隙 + 內實心圓)。
-const CLOTH = buildWeave({ w: 14.8, h: 14.8, s: 24 / 14.8 }, weaveRand());
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -35,44 +29,39 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "1.05rem", height: "1.05rem", margin: 0 },
     dot: {
         flex: "none",
+        boxSizing: "border-box",
+        display: "grid",
+        placeItems: "center",
         width: "1.05rem",
         height: "1.05rem",
         marginTop: "0.16rem",
-        borderWidth: 1,
+        borderWidth: 1.5,
         borderStyle: "solid",
         borderColor: color.borderStrong,
         borderRadius: radius.full,
-        backgroundColor: color.surface,
+        backgroundColor: color.bg,
         transitionProperty: "border-color",
         transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 2,
     },
     dotOn: { borderColor: color.accent },
-    svg: { display: "block", width: "100%", height: "100%" },
-    lens: {
-        r: "0px",
-        transitionProperty: "r",
-        transitionDuration: { default: motion.normal, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
+    fill: {
+        width: "0.55rem",
+        height: "0.55rem",
+        borderRadius: radius.full,
+        backgroundColor: color.accent,
+        scale: "0",
+        transitionProperty: "scale",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    lensOn: { r: "6.8px" },
-    yarns: { 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 },
+    fillOn: { scale: "1" },
     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 Radio({ value, label, description, onChange, disabled, ...props }) {
     const group = useRadioGroup();
-    const clipId = useSvgId("ak-lens");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -85,5 +74,5 @@ export function Radio({ value, label, description, onChange, disabled, ...props
                             if (event.currentTarget.checked)
                                 group.select(value);
                             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("circle", { cx: "12", cy: "12", ...stylex.props(styles.lens, checked && styles.lensOn) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.yarns), 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))) })] })] })] }), (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("span", { "aria-hidden": "true", ...stylex.props(styles.fill, checked && styles.fillOn) })] }), (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/segmented/Segmented.d.ts

@@ -0,0 +1,12 @@
+import * as stylex from "@stylexjs/stylex";
+export type SegmentedProps<T extends string> = {
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (value: T) => void;
+    label: string;
+    sx?: stylex.StyleXStyles;
+};
+export declare function Segmented<T extends string>({ value, options, onChange, label, sx }: SegmentedProps<T>): import("react").JSX.Element;

package/dist/components/segmented/Segmented.js

@@ -0,0 +1,43 @@
+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";
+/** `.seg`: a few words in one outline; the chosen one sits on a layer. */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    root: {
+        alignSelf: "flex-start",
+        borderRadius: corner.md,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        display: "inline-flex",
+        gap: 2,
+        maxWidth: "100%",
+        overflowX: { default: "visible", [PHONE]: "auto" },
+        padding: 2,
+        scrollbarWidth: "none",
+    },
+    item: {
+        backgroundColor: { default: "transparent", ":hover": "transparent" },
+        borderRadius: corner.sm,
+        borderStyle: "none",
+        borderWidth: 0,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        height: { default: 28, [PHONE]: 40 },
+        lineHeight: type.body,
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: -2,
+        paddingBlock: 0,
+        paddingInline: space.sm,
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        whiteSpace: "nowrap",
+    },
+    on: { backgroundColor: color.layer4, color: color.text },
+});
+export function Segmented({ value, options, onChange, label, sx }) {
+    return (_jsx("div", { "aria-label": label, ...stylex.props(styles.root, sx), children: options.map((one) => (_jsx("button", { type: "button", "aria-pressed": one.value === value, onClick: () => onChange(one.value), ...stylex.props(styles.item, one.value === value && styles.on), children: one.label }, one.value))) }));
+}

package/dist/components/settings-rows/SettingsRows.d.ts

@@ -0,0 +1,25 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export declare function SettingsRows({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export type SettingsRowProps = {
+    label: ReactNode;
+    help?: ReactNode;
+    children?: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+export declare function SettingsRow({ label, help, children, sx }: SettingsRowProps): import("react").JSX.Element;
+/** `.help` inline: a muted reading on a row's label line. */
+export declare function Help({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.val`: a mono reading, like `•••• 9b7c`. */
+export declare function Value({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export declare function Dot({ sx }: Sx): import("react").JSX.Element;
+export {};

package/dist/components/settings-rows/SettingsRows.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, corner, font, space, type } from "../../tokens.stylex.js";
+/**
+ * `.srows` / `.srow`: a setting per line, 44px — its name and one line of help on the left, the
+ * control on the right. The rows sit on one surface with hairlines between them.
+ */
+const styles = stylex.create({
+    rows: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+    },
+    row: {
+        alignItems: "center",
+        borderRadius: {
+            default: 0,
+            ":first-child": `${corner.card} ${corner.card} 0 0`,
+            ":last-child": `0 0 ${corner.card} ${corner.card}`,
+        },
+        boxShadow: { default: "none", ":not(:first-child)": `inset 0 1px 0 ${color.border}` },
+        columnGap: space.sm,
+        display: "grid",
+        gridTemplateColumns: "minmax(0, 1fr) auto",
+        minHeight: 44,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+    },
+    key: { minWidth: 0 },
+    label: {
+        alignItems: "center",
+        display: "flex",
+        flexWrap: "wrap",
+        fontSize: type.t2,
+        fontWeight: 500,
+        gap: space.xs,
+        minWidth: 0,
+    },
+    help: { color: color.textMuted, fontSize: type.t2 },
+    value: { color: color.textMuted, fontFamily: font.mono, fontSize: type.t2, whiteSpace: "nowrap" },
+    ctl: { alignItems: "center", display: "flex", flex: "none", gap: space.xs },
+    dot: { backgroundColor: color.accent, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+});
+export function SettingsRows({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.rows, sx), children: children });
+}
+export function SettingsRow({ label, help, children, sx }) {
+    return (_jsxs("div", { ...stylex.props(styles.row, sx), children: [_jsxs("div", { ...stylex.props(styles.key), children: [_jsx("div", { ...stylex.props(styles.label), children: label }), help !== undefined && _jsx("div", { ...stylex.props(styles.help), children: help })] }), children !== undefined && _jsx("div", { ...stylex.props(styles.ctl), children: children })] }));
+}
+/** `.help` inline: a muted reading on a row's label line. */
+export function Help({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.help, sx), children: children });
+}
+/** `.val`: a mono reading, like `•••• 9b7c`. */
+export function Value({ children, sx }) {
+    return _jsx("span", { ...stylex.props(styles.value, sx), children: children });
+}
+export function Dot({ sx }) {
+    return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.dot, sx) });
+}

package/dist/components/spin/Spin.d.ts

@@ -0,0 +1,5 @@
+import * as stylex from "@stylexjs/stylex";
+export declare function Spin({ small, sx }: {
+    small?: boolean;
+    sx?: stylex.StyleXStyles;
+}): import("react").JSX.Element;

package/dist/components/spin/Spin.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+/** `.spin`: 12px ring, the one thing on a button that moves while it waits. */
+const turn = stylex.keyframes({ to: { transform: "rotate(360deg)" } });
+const styles = stylex.create({
+    root: {
+        animationDuration: "0.7s",
+        animationIterationCount: "infinite",
+        animationName: { default: turn, "@media (prefers-reduced-motion: reduce)": "none" },
+        animationTimingFunction: "linear",
+        borderColor: "color-mix(in srgb, currentColor 28%, transparent)",
+        borderRadius: "50%",
+        borderStyle: "solid",
+        borderTopColor: "currentColor",
+        borderWidth: 2,
+        boxSizing: "border-box",
+        flex: "none",
+        height: 12,
+        width: 12,
+    },
+    small: { borderWidth: 1.5, height: 9, width: 9 },
+});
+export function Spin({ small = false, sx }) {
+    return _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.root, small && styles.small, sx) });
+}

package/dist/components/status-chip/StatusChip.d.ts

@@ -0,0 +1,18 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+export type StatusChipProps = {
+    variant: "r" | "w" | "d" | "n" | "a" | "f" | "plain";
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+export declare function StatusChip({ variant, children, sx }: StatusChipProps): import("react").JSX.Element;
+export type PillProps = {
+    /** A dot in front, coloured by what the thing is doing. */
+    status?: "live" | "paused" | "done";
+    /** The sub thread's name: body face, text colour, truncates. */
+    title?: boolean;
+    children: ReactNode;
+    sx?: stylex.StyleXStyles;
+};
+/** `.pill-s`: the 22px mono pills a fold's first line is made of. */
+export declare function Pill({ status, title, children, sx }: PillProps): import("react").JSX.Element;

package/dist/components/status-chip/StatusChip.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { color, font, space, tone, type } from "../../tokens.stylex.js";
+import { Spin } from "../spin/Spin.js";
+/**
+ * `.tchip` / `.achip`: a mono word in a 16px pill. `r` read-only (outline), `w` writes (layer),
+ * `d` destructive (warning fill), `n` unmarked (faint outline), `a` active (accent, spinning),
+ * `f` failed (warning outline + dot), `plain` the catalogue's auth chip.
+ */
+const styles = stylex.create({
+    root: {
+        alignItems: "center",
+        borderRadius: "1rem",
+        display: "inline-flex",
+        flex: "none",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.xxs,
+        lineHeight: "16px",
+        paddingInline: 6,
+        whiteSpace: "nowrap",
+    },
+    r: { boxShadow: `inset 0 0 0 1px ${color.border}`, color: color.textMuted },
+    w: { backgroundColor: color.layer4, color: color.text },
+    d: { backgroundColor: color.warning, color: color.bg },
+    n: { boxShadow: `inset 0 0 0 1px ${color.border}`, color: tone.faint },
+    a: { backgroundColor: color.accentSubtle, color: color.text },
+    f: {
+        boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${color.warning} 55%, transparent)`,
+        color: color.warning,
+    },
+    plain: { backgroundColor: color.layer3, color: color.textMuted, textAlign: "center" },
+    dot: { backgroundColor: color.warning, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    pill: {
+        alignItems: "center",
+        backgroundColor: color.layer3,
+        borderRadius: 11,
+        color: color.textMuted,
+        display: "inline-flex",
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.xxs,
+        height: 22,
+        paddingInline: space.xs,
+        whiteSpace: "nowrap",
+    },
+    status: { paddingInlineStart: 6 },
+    live: { backgroundColor: color.accent, borderRadius: "50%", flex: "none", height: 6, width: 6 },
+    paused: { backgroundColor: color.warning },
+    done: { backgroundColor: tone.faint },
+    title: {
+        color: color.text,
+        display: "inline-block",
+        fontFamily: font.body,
+        fontSize: type.t2,
+        lineHeight: "20px",
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+});
+export function StatusChip({ variant, children, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.root, styles[variant], sx), children: [variant === "a" && _jsx(Spin, { small: true }), variant === "f" && _jsx("i", { ...stylex.props(styles.dot), "aria-hidden": "true" }), children] }));
+}
+/** `.pill-s`: the 22px mono pills a fold's first line is made of. */
+export function Pill({ status, title = false, children, sx }) {
+    return (_jsxs("span", { ...stylex.props(styles.pill, status !== undefined && styles.status, title && styles.title, sx), children: [status !== undefined && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.live, status === "paused" && styles.paused, status === "done" && styles.done) })), children] }));
+}

package/dist/components/switch/Switch.js

@@ -2,15 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { useId } from "react";
 import { styled } from "../../lib/styled.js";
-import { useSvgId } from "../../lib/svgId.js";
 import { useControllableState } from "../../lib/useControllableState.js";
-import { 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)";
-const DARK = "@media (prefers-color-scheme: dark)";
-// 藥丸 42×20(1:1 CSS px),module scope 織一次(固定種子 → 恆定;純幾何,SSR 安全)
-const CLOTH = buildWeave({ w: 42, h: 20, ox: 1, oy: 1 }, weaveRand());
 const styles = stylex.create({
     root: {
         display: "flex",
@@ -24,75 +19,37 @@ const styles = stylex.create({
     input: { position: "absolute", opacity: 0, width: "2.75rem", height: "1.4rem", margin: 0 },
     track: {
         flex: "none",
+        position: "relative",
+        boxSizing: "border-box",
         width: "2.75rem",
         height: "1.4rem",
         marginTop: "0.1rem",
         borderRadius: radius.full,
+        backgroundColor: color.borderStrong,
+        transitionProperty: "background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
         outline: { default: "none", ":has(:focus-visible)": `2px solid ${color.focusRing}` },
         outlineOffset: 3,
     },
-    svg: { width: "100%", height: "100%", display: "block", overflow: "visible" },
-    guide: { stroke: color.borderStrong, strokeWidth: 1.5, strokeLinecap: "round", fill: "none" },
-    // 開:布從左織進來(wipe clip 的 width 推進,紗本身不動 — 同一塊布被逐漸織出);
-    // 關:整塊布 scale 到 0 收掉,width/opacity 等 scale 跑完才歸零。
-    // 藥丸形狀是另一支固定 clip:左圓角從第一幀就完整,前緣是織布機的直線 fell。
-    cloth: {
-        opacity: 0,
-        scale: "0",
-        transformBox: "fill-box",
-        transformOrigin: "center",
-        transitionProperty: "scale, opacity",
-        transitionDuration: { default: "200ms, 0s", [REDUCED]: "0s" },
-        transitionTimingFunction: "ease-in",
-        transitionDelay: { default: "0s, 200ms", [REDUCED]: "0s" },
-        filter: {
-            default: "drop-shadow(0 1px 1.5px rgba(18, 60, 49, 0.30))",
-            [DARK]: "drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))",
-        },
-    },
-    clothOn: {
-        opacity: 1,
-        scale: "1",
-        transitionDuration: { default: "0s, 0s", [REDUCED]: "0s" },
-        transitionDelay: "0s",
-    },
-    pillclip: {
-        width: 0,
-        transitionProperty: "width",
-        transitionDuration: { default: "0s", [REDUCED]: "0s" },
-        transitionDelay: { default: "200ms", [REDUCED]: "0s" },
-    },
-    pillclipOn: {
-        width: 42,
-        transitionDuration: { default: "240ms", [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.32, 0.85, 0.45, 1)",
-        transitionDelay: "0s",
-    },
-    yarns: { 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 },
+    trackOn: { backgroundColor: color.accent },
     thumb: {
-        fill: color.bg,
-        stroke: color.borderStrong,
-        strokeWidth: 1.6,
+        position: "absolute",
+        insetBlockStart: 2,
+        insetInlineStart: 2,
+        width: "calc(1.4rem - 4px)",
+        height: "calc(1.4rem - 4px)",
+        borderRadius: radius.full,
+        backgroundColor: "#FFFFFF",
         translate: "0 0",
-        transitionProperty: "translate, stroke, fill",
-        transitionDuration: { default: `240ms, ${motion.normal}, ${motion.normal}`, [REDUCED]: "0s" },
-        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+        transitionProperty: "translate, background-color",
+        transitionDuration: { default: "180ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "ease-out",
     },
-    thumbOn: { translate: "22px 0", fill: color.surface, stroke: color.accent },
+    thumbOn: { translate: "1.35rem 0", backgroundColor: color.accentText },
     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 Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, sx, ...props }) {
-    const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
     const descriptionId = `${base}description`;
@@ -101,8 +58,8 @@ export function Switch({ label, description, onCheckedChange, checked, defaultCh
         .filter(Boolean)
         .join(" ");
     const [isOn, setOn] = useControllableState(checked, defaultChecked ?? false, onCheckedChange);
-    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [(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 }))] })), _jsxs("span", { ...stylex.props(styles.track), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
+    return (_jsxs("label", { ...stylex.props(styles.root, sx), children: [(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 }))] })), _jsxs("span", { ...stylex.props(styles.track, isOn && styles.trackOn), children: [_jsx("input", { type: "checkbox", role: "switch", ...props, ...field, "aria-invalid": invalid || undefined, "aria-labelledby": label != null ? labelId : undefined, "aria-describedby": describedBy || undefined, checked: isOn, "aria-checked": isOn, onChange: (event) => {
                             setOn(event.currentTarget.checked);
                             onChange?.(event);
-                        }, ...styled(props, styles.input) }), _jsxs("svg", { viewBox: "0 0 44 22", "aria-hidden": "true", ...stylex.props(styles.svg), children: [_jsx("path", { d: "M11,11 H33", ...stylex.props(styles.guide) }), _jsxs("g", { ...stylex.props(styles.cloth, isOn && styles.clothOn), children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `${clipId}p`, children: _jsx("rect", { x: "1", y: "1", width: "42", height: "20", rx: "10" }) }), _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: "1", y: "-3", height: "28", ...stylex.props(styles.pillclip, isOn && styles.pillclipOn) }) })] }), _jsx("g", { clipPath: `url(#${clipId}p)`, children: _jsxs("g", { clipPath: `url(#${clipId})`, ...stylex.props(styles.yarns), 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))) })] }) })] }), _jsx("circle", { cx: "11", cy: "11", r: "8.4", ...stylex.props(styles.thumb, isOn && styles.thumbOn) })] })] })] }));
+                        }, ...styled(props, styles.input) }), _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.thumb, isOn && styles.thumbOn) })] })] }));
 }

package/dist/components/table/Table.d.ts

@@ -0,0 +1,39 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+type Sx = {
+    sx?: stylex.StyleXStyles;
+};
+export type TableProps = {
+    children: ReactNode;
+} & Sx;
+export declare function Table({ children, sx }: TableProps): import("react").JSX.Element;
+export type HeadProps = {
+    columns: string;
+    children: ReactNode;
+    sticky?: boolean;
+} & Sx;
+/** The one mono line above the rows; `columns` is the grid template every row shares. */
+export declare function Head({ columns, children, sticky, sx }: HeadProps): import("react").JSX.Element;
+export type TrProps = {
+    columns: string;
+    children: ReactNode;
+    hover?: boolean;
+} & Sx;
+export declare function Tr({ columns, children, hover, sx }: TrProps): import("react").JSX.Element;
+export declare function Detail({ id, children, sx }: {
+    id?: string;
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+/** `.moreRow`: the last line of a ledger that has more, 40px, centred. */
+export declare function MoreRow({ children, onPress, sx }: {
+    children: ReactNode;
+    onPress: () => void;
+} & Sx): import("react").JSX.Element;
+/**
+ * `.listscroll`: a ledger that scrolls on its own to the bottom of the window, the head stuck to
+ * its top.
+ */
+export declare function ListScroll({ children, sx }: {
+    children: ReactNode;
+} & Sx): import("react").JSX.Element;
+export {};

package/dist/components/table/Table.js

@@ -0,0 +1,125 @@
+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";
+/**
+ * `.tbl`: a ledger. The head is one mono line, every row is 34px, identifiers and numbers are
+ * mono and numbers sit on the right. On a phone the head goes and each row wraps to two lines,
+ * in the order the caller gives each cell.
+ */
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const PHONE = "@media (max-width: 45rem)";
+const styles = stylex.create({
+    table: {
+        backgroundColor: color.surface,
+        borderRadius: corner.card,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+        color: color.text,
+        fontSize: type.t2,
+        lineHeight: type.body,
+        minWidth: 0,
+    },
+    cols: (columns) => ({ gridTemplateColumns: columns }),
+    head: {
+        alignItems: "center",
+        borderRadius: `${corner.card} ${corner.card} 0 0`,
+        color: color.textMuted,
+        display: { default: "grid", [PHONE]: "none" },
+        fontFamily: font.mono,
+        fontSize: type.t1,
+        gap: space.sm,
+        height: 28,
+        paddingInline: space.sm,
+    },
+    sticky: { backgroundColor: color.surface, position: "sticky", top: 0, zIndex: 1 },
+    row: {
+        alignItems: "center",
+        borderRadius: { default: 0, ":last-child": `0 0 ${corner.card} ${corner.card}` },
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        columnGap: { default: space.sm, [PHONE]: space.xs },
+        display: { default: "grid", [PHONE]: "flex" },
+        flexWrap: "wrap",
+        fontSize: type.t2,
+        height: { default: 34, [PHONE]: "auto" },
+        lineHeight: { default: type.body, [PHONE]: "1.4" },
+        minHeight: { default: 34, [PHONE]: 52 },
+        paddingBlock: { default: 0, [PHONE]: space.xs },
+        paddingInline: space.sm,
+        rowGap: 0,
+    },
+    hover: { backgroundColor: { default: "transparent", ":hover": color.layer3 } },
+    detail: {
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        paddingBlock: `0 ${space.xs}`,
+        paddingInline: space.sm,
+    },
+    more: {
+        alignItems: "center",
+        backgroundColor: { default: "transparent", ":hover": color.layer3 },
+        borderRadius: `0 0 ${corner.card} ${corner.card}`,
+        borderStyle: "none",
+        borderWidth: 0,
+        boxShadow: `inset 0 1px 0 ${color.border}`,
+        color: { default: color.textMuted, ":hover": color.text },
+        cursor: "pointer",
+        display: "flex",
+        fontFamily: "inherit",
+        fontSize: type.t2,
+        height: 40,
+        justifyContent: "center",
+        lineHeight: type.body,
+        margin: 0,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.accent}` },
+        outlineOffset: -2,
+        padding: 0,
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        transitionProperty: "background-color, color",
+        width: "100%",
+    },
+    scroll: {
+        borderRadius: corner.card,
+        maxHeight: "calc(100dvh - var(--akn-off, 22rem))",
+        minHeight: "12rem",
+        overflow: "auto",
+        overscrollBehavior: "contain",
+        scrollbarColor: {
+            default: "transparent transparent",
+            ":hover": `color-mix(in srgb, ${color.text} 24%, transparent) transparent`,
+        },
+        scrollbarWidth: "thin",
+    },
+});
+export function Table({ children, sx }) {
+    return _jsx("div", { ...stylex.props(styles.table, sx), children: children });
+}
+/** The one mono line above the rows; `columns` is the grid template every row shares. */
+export function Head({ columns, children, sticky = false, sx }) {
+    return (_jsx("div", { ...stylex.props(styles.head, styles.cols(columns), sticky && styles.sticky, sx), children: children }));
+}
+export function Tr({ columns, children, hover = false, sx }) {
+    return _jsx("div", { ...stylex.props(styles.row, styles.cols(columns), hover && styles.hover, sx), children: children });
+}
+export function Detail({ id, children, sx }) {
+    return (_jsx("div", { ...(id ? { id } : {}), ...stylex.props(styles.detail, sx), children: children }));
+}
+/** `.moreRow`: the last line of a ledger that has more, 40px, centred. */
+export function MoreRow({ children, onPress, sx }) {
+    return (_jsx("button", { type: "button", onClick: onPress, ...stylex.props(styles.more, sx), children: children }));
+}
+/** Reads where the list starts and leaves 24px under it, again whenever the window changes. */
+function fit(node) {
+    if (node === null)
+        return;
+    const measure = () => {
+        node.style.setProperty("--akn-off", `${Math.round(node.getBoundingClientRect().top + 24)}px`);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+}
+/**
+ * `.listscroll`: a ledger that scrolls on its own to the bottom of the window, the head stuck to
+ * its top.
+ */
+export function ListScroll({ children, sx }) {
+    return (_jsx("div", { ref: fit, ...stylex.props(styles.scroll, sx), children: children }));
+}