@anyknown/ui 0.1.0

package/dist/components/select/Select.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui/react/combobox";
+import * as stylex from "@stylexjs/stylex";
+import { Children, isValidElement, useId, useMemo, useState } from "react";
+import { reset } from "../../lib/styled.js";
+import { popupStyles } from "../../lib/popup.js";
+import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+export function SelectItem(_props) {
+    return null;
+}
+export function SelectGroup(_props) {
+    return null;
+}
+function toOption(element) {
+    const { value, hint, disabled, textValue, children } = element.props;
+    return {
+        value,
+        label: children,
+        text: textValue ?? (typeof children === "string" ? children : value),
+        hint,
+        disabled,
+    };
+}
+function collect(children) {
+    const options = [];
+    const groups = [];
+    for (const child of Children.toArray(children)) {
+        if (!isValidElement(child))
+            continue;
+        if (child.type === SelectGroup) {
+            const group = child;
+            const items = Children.toArray(group.props.children)
+                .filter((c) => isValidElement(c) && c.type === SelectItem)
+                .map(toOption);
+            groups.push({ value: group.props.label, items });
+            options.push(...items);
+        }
+        else if (child.type === SelectItem) {
+            options.push(toOption(child));
+        }
+    }
+    return { options, groups };
+}
+const styles = stylex.create({
+    trigger: {
+        width: "100%",
+        minHeight: "2.25rem",
+        // multiple 的 trigger 是 div(不是原生 button,拿不到 UA 的 border-box)
+        boxSizing: "border-box",
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        flexWrap: "wrap",
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: { default: color.border, ":hover": color.borderStrong },
+        borderRadius: radius.md,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        cursor: "pointer",
+        textAlign: "start",
+        transitionProperty: "border-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: -1,
+    },
+    placeholder: { color: color.textFaint },
+    caret: { marginInlineStart: "auto", color: color.textFaint, flex: "none" },
+    chip: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: space.xxs,
+        backgroundColor: color.accentSubtle,
+        color: color.text,
+        borderRadius: radius.sm,
+        paddingBlock: "0.1rem",
+        paddingInline: space.xxs,
+        fontSize: text.xs,
+    },
+    chipRemove: {
+        cursor: "pointer",
+        color: color.textMuted,
+        lineHeight: 1,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 1,
+        borderRadius: radius.sm,
+    },
+    search: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+    },
+    searchIcon: { color: color.textFaint, flex: "none" },
+    searchInput: {
+        flex: 1,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+        "::placeholder": { color: color.textFaint },
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+    },
+    list: { maxHeight: "14rem", overflowY: "auto", padding: space.xxs, margin: 0 },
+    groupLabel: {
+        fontFamily: font.mono,
+        fontSize: "0.65rem",
+        fontWeight: 600,
+        lineHeight: 1,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: color.textFaint,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+    },
+    option: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xs,
+        borderRadius: radius.sm,
+        paddingBlock: "0.42rem",
+        paddingInline: space.xs,
+        fontSize: text.sm,
+        cursor: "pointer",
+        outline: "none",
+        userSelect: "none",
+    },
+    optionHighlighted: {
+        backgroundColor: color.accentSubtle,
+        outline: `2px solid ${color.focusRing}`,
+        outlineOffset: -2,
+        "@media (forced-colors: active)": { outline: "2px solid Highlight" },
+    },
+    optionDisabled: { opacity: 0.5, cursor: "not-allowed" },
+    hint: { color: color.textFaint, fontSize: "0.72rem" },
+    tick: { marginInlineStart: "auto", color: color.accent, display: "flex" },
+    empty: {
+        paddingBlock: space.md,
+        paddingInline: space.sm,
+        fontSize: text.xs,
+        color: color.textMuted,
+        textAlign: "center",
+    },
+});
+function CaretIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+}
+function SearchIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("circle", { cx: "11", cy: "11", r: "7" }), _jsx("path", { d: "m20 20-3.5-3.5" })] }));
+}
+function TickIcon() {
+    return (_jsx("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "m2.5 8.5 4 4 7-9" }) }));
+}
+function OptionRow({ option }) {
+    return (_jsxs(Combobox.Item, { value: option, disabled: option.disabled, className: (state) => stylex.props(styles.option, state.highlighted && styles.optionHighlighted, state.disabled && styles.optionDisabled).className ?? "", children: [_jsx("span", { children: option.label }), option.hint != null && _jsx("small", { ...stylex.props(styles.hint), children: option.hint }), _jsx(Combobox.ItemIndicator, { ...stylex.props(styles.tick), children: _jsx(TickIcon, {}) })] }));
+}
+export function Select({ value, defaultValue, onValueChange, placeholder = "選擇…", searchPlaceholder = "搜尋…", searchLabel = "搜尋選項", emptyLabel, multiple = false, searchable = true, disabled, name, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
+    const base = useId();
+    const labelId = `${base}label`;
+    const triggerId = `${base}trigger`;
+    const nameId = ariaLabelledBy ?? (ariaLabel != null ? labelId : undefined);
+    const triggerLabelledBy = nameId ? `${nameId} ${triggerId}` : undefined;
+    const { options, groups } = useMemo(() => collect(children), [children]);
+    const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(defaultValue ?? (multiple ? [] : ""));
+    const current = isControlled ? value : internal;
+    const selectedList = useMemo(() => (Array.isArray(current) ? current : [])
+        .map((v) => byValue.get(v))
+        .filter((o) => o != null), [current, byValue]);
+    const selectedOne = typeof current === "string" && current !== "" ? (byValue.get(current) ?? null) : null;
+    const selected = multiple ? selectedList : selectedOne;
+    const [query, setQuery] = useState("");
+    const notify = onValueChange;
+    const emit = (next) => {
+        if (!isControlled)
+            setInternal(next);
+        notify?.(next);
+    };
+    const items = groups.length > 0 ? groups : options;
+    return (_jsxs(Combobox.Root, { items: items, multiple: multiple, value: selected, disabled: disabled, name: name, filter: searchable ? undefined : null, itemToStringLabel: (item) => item.text, itemToStringValue: (item) => item.value, onInputValueChange: setQuery, onValueChange: (next) => {
+            if (multiple)
+                emit((next ?? []).map((o) => o.value));
+            else
+                emit(next?.value ?? "");
+        }, children: [ariaLabel != null && ariaLabelledBy == null && (_jsx("span", { id: labelId, hidden: true, children: ariaLabel })), _jsxs(Combobox.Trigger, { id: triggerId, "aria-labelledby": triggerLabelledBy, nativeButton: !multiple, render: multiple ? _jsx("div", {}) : undefined, ...stylex.props(styles.trigger), children: [multiple ? (selectedList.length === 0 ? (_jsx("span", { ...stylex.props(styles.placeholder), children: placeholder })) : (selectedList.map((option) => (_jsxs("span", { ...stylex.props(styles.chip), children: [option.label, _jsx("button", { type: "button", "aria-label": `移除 ${option.text}`, onPointerDown: (event) => event.stopPropagation(), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => {
+                                    event.stopPropagation();
+                                    emit(selectedList.filter((o) => o.value !== option.value).map((o) => o.value));
+                                }, ...stylex.props(reset.control, styles.chipRemove), children: "\u00D7" })] }, option.value))))) : (_jsx(Combobox.Value, { children: (v) => v ? _jsx("span", { children: v.label }) : _jsx("span", { ...stylex.props(styles.placeholder), children: placeholder }) })), _jsx(Combobox.Icon, { ...stylex.props(styles.caret), children: _jsx(CaretIcon, {}) })] }), _jsx(Combobox.Portal, { children: _jsx(Combobox.Positioner, { align: "start", sideOffset: 6, ...stylex.props(popupStyles.positioner), children: _jsxs(Combobox.Popup, { "aria-labelledby": nameId, ...stylex.props(popupStyles.surface, popupStyles.anchorWidth), children: [searchable ? (_jsxs("div", { ...stylex.props(styles.search), children: [_jsx("span", { ...stylex.props(styles.searchIcon), children: _jsx(SearchIcon, {}) }), _jsx(Combobox.Input, { placeholder: searchPlaceholder, "aria-label": searchLabel, ...stylex.props(reset.control, styles.searchInput) })] })) : (_jsx(Combobox.Input, { "aria-labelledby": nameId, "aria-label": nameId ? undefined : searchLabel, ...stylex.props(styles.srOnly) })), _jsx(Combobox.List, { ...stylex.props(styles.list), children: groups.length > 0
+                                    ? (group) => (_jsxs(Combobox.Group, { items: group.items, children: [_jsx(Combobox.GroupLabel, { ...stylex.props(styles.groupLabel), children: group.value }), _jsx(Combobox.Collection, { children: (option) => _jsx(OptionRow, { option: option }, option.value) })] }, group.value))
+                                    : (option) => _jsx(OptionRow, { option: option }, option.value) }), _jsx(Combobox.Empty, { ...stylex.props(styles.empty), children: emptyLabel ? emptyLabel(query) : `找不到「${query}」。` })] }) }) })] }));
+}

package/dist/components/skeleton/Skeleton.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
+export type SkeletonProps = Omit<ComponentProps<"div">, "children" | "width" | "height"> & {
+    shape?: "line" | "block" | "circle";
+    width?: string | number;
+    height?: string | number;
+    size?: string | number;
+    sx?: StyleArg;
+};
+export declare function Skeleton({ shape, width, height, size, sx, ...props }: SkeletonProps): import("react").JSX.Element;
+export type SkeletonGroupProps = ComponentProps<"div"> & {
+    label: string;
+    sx?: StyleArg;
+};
+export declare function SkeletonGroup({ label, children, sx, ...props }: SkeletonGroupProps): import("react").JSX.Element;
+export type ThreadSkeletonProps = {
+    messages?: number;
+    label?: string;
+};
+export declare function ThreadSkeleton({ messages, label }: ThreadSkeletonProps): import("react").JSX.Element;

package/dist/components/skeleton/Skeleton.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { color, radius, space } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const shimmer = stylex.keyframes({
+    from: { backgroundPosition: "180% 0" },
+    to: { backgroundPosition: "-80% 0" },
+});
+const styles = stylex.create({
+    bone: {
+        backgroundColor: color.bone,
+        borderRadius: radius.sm,
+        backgroundImage: {
+            default: `linear-gradient(100deg, transparent 30%, ${color.sheen} 50%, transparent 70%)`,
+            [REDUCED]: "none",
+        },
+        backgroundSize: "220% 100%",
+        animationName: { default: shimmer, [REDUCED]: "none" },
+        animationDuration: { default: "1.6s", [REDUCED]: "2.4s" },
+        animationTimingFunction: { default: "linear", [REDUCED]: "ease-in-out" },
+        animationIterationCount: "infinite",
+    },
+    line: { height: "0.8rem" },
+    circle: { borderRadius: radius.full },
+    size: (width, height) => ({ width, height }),
+    group: { display: "grid", gap: space.xxs },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+});
+export function Skeleton({ shape = "line", width, height, size, sx, ...props }) {
+    const resolvedWidth = shape === "circle" ? (size ?? width ?? "2.25rem") : (width ?? "100%");
+    const resolvedHeight = shape === "circle" ? (size ?? height ?? "2.25rem") : (height ?? "");
+    return (_jsx("div", { "aria-hidden": "true", ...props, ...styled(props, styles.bone, shape === "line" && styles.line, shape === "circle" && styles.circle, styles.size(resolvedWidth, resolvedHeight || null), sx) }));
+}
+export function SkeletonGroup({ label, children, sx, ...props }) {
+    return (_jsxs("div", { role: "status", "aria-label": label, ...props, ...styled(props, styles.group, sx), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: label }), children] }));
+}
+export function ThreadSkeleton({ messages = 2, label = "thread 載入中" }) {
+    return (_jsx(SkeletonGroup, { label: label, sx: threadStyles.thread, children: Array.from({ length: messages }, (_, index) => (_jsxs("div", { ...stylex.props(threadStyles.turn), children: [_jsx(Skeleton, { sx: threadStyles.userBubble, width: "55%", height: "2.4rem" }), _jsxs("div", { ...stylex.props(threadStyles.assistant), children: [_jsx(Skeleton, { shape: "circle", size: "1.6rem" }), _jsxs("div", { ...stylex.props(threadStyles.stack), children: [_jsx(Skeleton, { width: "96%" }), _jsx(Skeleton, { width: "88%" }), _jsx(Skeleton, { width: "47%" })] })] })] }, index))) }));
+}
+const threadStyles = stylex.create({
+    thread: { display: "grid", gap: space.sm },
+    turn: { display: "grid", gap: space.sm },
+    userBubble: { justifySelf: "end", borderRadius: `${radius.lg} ${radius.lg} ${radius.sm} ${radius.lg}` },
+    assistant: { display: "flex", gap: space.xs, alignItems: "flex-start" },
+    stack: { display: "grid", gap: space.xxs, flex: 1 },
+});

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps, type ReactNode } from "react";
+export type SwitchProps = Omit<ComponentProps<"input">, "type" | "role" | "children"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    onCheckedChange?: (checked: boolean) => void;
+};
+export declare function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/components/switch/Switch.js

@@ -0,0 +1,108 @@
+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 { 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",
+        gap: space.sm,
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        cursor: { default: "pointer", ":has(:disabled)": "not-allowed" },
+        opacity: { default: 1, ":has(:disabled)": 0.5 },
+        fontFamily: font.body,
+    },
+    input: { position: "absolute", opacity: 0, width: "2.75rem", height: "1.4rem", margin: 0 },
+    track: {
+        flex: "none",
+        width: "2.75rem",
+        height: "1.4rem",
+        marginTop: "0.1rem",
+        borderRadius: radius.full,
+        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 },
+    thumb: {
+        fill: color.bg,
+        stroke: color.borderStrong,
+        strokeWidth: 1.6,
+        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)",
+    },
+    thumbOn: { translate: "22px 0", fill: color.surface, stroke: color.accent },
+    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, ...props }) {
+    const clipId = useSvgId("ak-weave");
+    const base = useId();
+    const labelId = `${base}label`;
+    const descriptionId = `${base}description`;
+    const { invalid, ...field } = useFieldControl(props);
+    const describedBy = [description != null ? descriptionId : null, field["aria-describedby"]]
+        .filter(Boolean)
+        .join(" ");
+    const [isOn, setOn] = useControllableState(checked, defaultChecked ?? false, onCheckedChange);
+    return (_jsxs("label", { ...stylex.props(styles.root), 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) => {
+                            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) })] })] })] }));
+}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export type TabsProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: "underline" | "pills";
+    className?: string;
+    children: ReactNode;
+};
+export declare function Tabs({ variant, children, ...props }: TabsProps): import("react").JSX.Element;
+export type TabsListProps = {
+    "aria-label": string;
+    className?: string;
+    children: ReactNode;
+};
+export declare function TabsList({ children, ...rest }: TabsListProps): import("react").JSX.Element;
+export type TabsTabProps = {
+    value: string;
+    disabled?: boolean;
+    children: ReactNode;
+};
+export declare function TabsTab({ children, ...rest }: TabsTabProps): import("react").JSX.Element;
+export type TabsPanelProps = {
+    value: string;
+    children: ReactNode;
+    className?: string;
+};
+export declare function TabsPanel({ children, ...rest }: TabsPanelProps): import("react").JSX.Element;

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, useCallback, useContext, useMemo, useState } 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, yarnSubtle } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const VariantContext = createContext("underline");
+const styles = stylex.create({
+    root: { display: "grid", gap: space.xs },
+    list: { display: "flex", gap: space.xxs, position: "relative" },
+    underlineList: {
+        borderBottomWidth: 1,
+        borderBottomStyle: "solid",
+        borderBottomColor: color.border,
+    },
+    pillsList: {
+        // 只包住自己的 pills:整條拉滿時,4px 的內距在一大片空白旁邊會看起來像沒有間距
+        width: "fit-content",
+        maxWidth: "100%",
+        backgroundColor: color.surface,
+        borderWidth: 1,
+        borderStyle: "solid",
+        borderColor: color.border,
+        borderRadius: radius.md,
+        padding: space.xxs,
+        gap: "0.15rem",
+    },
+    tab: {
+        backgroundColor: "transparent",
+        borderWidth: 0,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        color: { default: color.textMuted, ":hover": color.text },
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        borderRadius: radius.sm,
+        cursor: "pointer",
+        transitionProperty: "color, background-color",
+        transitionDuration: { default: motion.fast, [REDUCED]: "0s" },
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+    tabDisabled: { opacity: 0.4, cursor: "not-allowed", color: color.textFaint },
+    tabSelectedUnderline: { color: color.accent },
+    tabSelectedPills: { color: color.accent },
+    pillTab: { zIndex: 1 },
+    indicator: {
+        position: "absolute",
+        bottom: -1,
+        insetInlineStart: 0,
+        height: 2,
+        width: "var(--active-tab-width)",
+        translate: "var(--active-tab-left)",
+        backgroundColor: color.accent,
+        transitionProperty: "translate, width",
+        transitionDuration: { default: "240ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    // pills:布織滿整條 tablist,選取的高亮是一個取景窗(clip rect)滑到選中的 tab —
+    // 窗動、布不動,透出的織紋是連續的同一塊布(TEXTURE-GUIDE §3、tabs/NOTES.md)。
+    // Indicator 只當 --active-tab-* 的載體,鋪滿整條 list、自己不動。
+    pillLayer: { position: "absolute", inset: 0, pointerEvents: "none" },
+    pillSvg: { display: "block", width: "100%", height: "100%" },
+    pillWindow: {
+        x: "var(--active-tab-left)",
+        y: "var(--active-tab-top)",
+        width: "var(--active-tab-width)",
+        height: "var(--active-tab-height)",
+        rx: radius.sm,
+        transitionProperty: "x, width",
+        transitionDuration: { default: "240ms", [REDUCED]: "0s" },
+        transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    },
+    cloth: { fill: "none", strokeLinecap: "round" },
+    un: { stroke: yarnSubtle.un },
+    sh: { stroke: yarnSubtle.sh, opacity: 0.5 },
+    y0: { stroke: yarnSubtle.y0 },
+    y1: { stroke: yarnSubtle.y1 },
+    y2: { stroke: yarnSubtle.y2 },
+    y3: { stroke: yarnSubtle.y3 },
+    y4: { stroke: yarnSubtle.y4 },
+    hi: { stroke: yarnSubtle.hi, opacity: 0.45 },
+    panel: {
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.textMuted,
+        paddingBlock: space.xxs,
+        borderRadius: radius.sm,
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+        outlineOffset: 2,
+    },
+});
+export function Tabs({ variant = "underline", children, ...props }) {
+    return (_jsx(VariantContext, { value: variant, children: _jsx(BaseTabs.Root, { ...props, ...styled(props, styles.root), children: children }) }));
+}
+const BUCKETS = [styles.y0, styles.y1, styles.y2, styles.y3, styles.y4];
+function PillCloth({ w, h }) {
+    const clipId = useSvgId("ak-pill");
+    const cloth = useMemo(() => buildWeave({ w, h }, weaveRand()), [w, h]);
+    return (_jsxs("svg", { viewBox: `0 0 ${w} ${h}`, "aria-hidden": "true", ...stylex.props(styles.pillSvg), children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { ...stylex.props(styles.pillWindow) }) }) }), _jsxs("g", { clipPath: `url(#${clipId})`, ...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))) })] })] }));
+}
+export function TabsList({ children, ...rest }) {
+    const variant = useContext(VariantContext);
+    const [size, setSize] = useState(null);
+    // 要織滿 tablist 就得先量它:ref callback + ResizeObserver(不用 effect,SSR 上零副作用)。
+    // 同尺寸 early return,resize 才重織。
+    const measure = useCallback((node) => {
+        if (!node)
+            return;
+        const read = () => setSize((current) => {
+            const w = node.clientWidth;
+            const h = node.clientHeight;
+            return current != null && current.w === w && current.h === h ? current : { w, h };
+        });
+        read();
+        const ro = new ResizeObserver(read);
+        ro.observe(node);
+        return () => ro.disconnect();
+    }, []);
+    return (_jsxs(BaseTabs.List, { ...rest, ref: variant === "pills" ? measure : undefined, ...styled(rest, styles.list, variant === "underline" ? styles.underlineList : styles.pillsList), children: [children, variant === "underline" && _jsx(BaseTabs.Indicator, { ...stylex.props(styles.indicator) }), variant === "pills" && size != null && size.w > 0 && (_jsx(BaseTabs.Indicator, { ...stylex.props(styles.pillLayer), children: _jsx(PillCloth, { w: size.w, h: size.h }) }))] }));
+}
+export function TabsTab({ children, ...rest }) {
+    const variant = useContext(VariantContext);
+    return (_jsx(BaseTabs.Tab, { ...rest, className: (state) => stylex.props(styles.tab, variant === "pills" && styles.pillTab, state.disabled && styles.tabDisabled, state.active && (variant === "underline" ? styles.tabSelectedUnderline : styles.tabSelectedPills)).className ?? "", children: children }));
+}
+export function TabsPanel({ children, ...rest }) {
+    return (_jsx(BaseTabs.Panel, { ...rest, ...styled(rest, styles.panel), children: children }));
+}

package/dist/components/text/Text.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps, ElementType } from "react";
+type TextProps = ComponentProps<"p"> & {
+    as?: ElementType;
+    variant?: "display" | "title" | "body" | "caption" | "mono";
+};
+export declare function Text({ as: Tag, variant, ...props }: TextProps): import("react").JSX.Element;
+export {};

package/dist/components/text/Text.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { color, font, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    base: {
+        margin: 0,
+        fontFamily: font.body,
+        color: color.text,
+        lineHeight: text.leadingNormal,
+    },
+    display: {
+        fontFamily: font.display,
+        fontSize: text.display,
+        fontWeight: 500,
+        lineHeight: text.leadingTight,
+        letterSpacing: "-0.01em",
+    },
+    title: {
+        fontFamily: font.display,
+        fontSize: text.xl,
+        fontWeight: 500,
+        lineHeight: text.leadingTight,
+    },
+    body: { fontSize: text.base },
+    caption: { fontSize: text.sm, color: color.textMuted },
+    mono: { fontFamily: font.mono, fontSize: text.sm },
+});
+export function Text({ as: Tag = "p", variant = "body", ...props }) {
+    return _jsx(Tag, { ...props, ...styled(props, styles.base, styles[variant]) });
+}

package/dist/components/textarea/Textarea.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+export type TextareaProps = ComponentProps<"textarea"> & {
+    autoGrow?: boolean;
+    maxRows?: number;
+    invalid?: boolean;
+};
+export declare function Textarea({ autoGrow, maxRows, invalid, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { space, text } from "../../tokens.stylex.js";
+import { controlStyles } from "../input/Input.js";
+import { useFieldControl } from "../label/fieldContext.js";
+const styles = stylex.create({
+    base: {
+        minHeight: "4.5rem",
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        lineHeight: text.leadingRelaxed,
+        resize: "vertical",
+    },
+    autoGrow: {
+        fieldSizing: "content",
+        resize: { default: "vertical", "@supports (field-sizing: content)": "none" },
+    },
+    maxRows: (rows) => ({ maxHeight: `calc(${rows} * 1.6em + ${space.md})` }),
+});
+export function Textarea({ autoGrow, maxRows, invalid, ...props }) {
+    const { invalid: fieldInvalid, ...field } = useFieldControl(props);
+    const isInvalid = invalid ?? fieldInvalid;
+    return (_jsx("textarea", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, styles.base, autoGrow && styles.autoGrow, maxRows != null && styles.maxRows(maxRows), isInvalid && controlStyles.invalid) }));
+}