@anyknown/ui 0.3.0 → 0.4.1

package/dist/components/badge/Badge.d.ts

@@ -1,5 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 declare const DOT_TONES: {
     readonly accent: Readonly<{
         readonly color: stylex.StyleXClassNameFor<"color", string>;
@@ -18,8 +19,9 @@ export type BadgeProps = Omit<ComponentProps<"span">, "color"> & {
     variant?: "neutral" | "accent" | "success" | "danger" | "outline" | "mono";
     dot?: keyof typeof DOT_TONES;
     count?: number;
+    sx?: StyleArg;
 };
-export declare function Badge({ variant, dot, count, children, ...props }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ variant, dot, count, children, sx, ...props }: BadgeProps): import("react").JSX.Element;
 export type ChipProps = BadgeProps & {
     onRemove?: () => void;
     removeLabel: string;

package/dist/components/badge/Badge.js

@@ -71,8 +71,8 @@ const DOT_TONES = {
     danger: styles.dotDanger,
     warning: styles.dotWarning,
 };
-export function Badge({ variant = "neutral", dot, count, children, ...props }) {
-    return (_jsxs("span", { ...props, ...styled(props, styles.base, styles[variant]), 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 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" }) }) }))] }));

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

@@ -1,7 +1,11 @@
 import { type ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 type ButtonProps = ComponentProps<"button"> & {
     variant?: "primary" | "secondary" | "ghost" | "danger" | "dangerGhost";
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
+    /** Square, no side padding — for a button whose whole label is one icon. */
+    icon?: boolean;
+    sx?: StyleArg;
 };
-export declare function Button({ variant, size, children, ref, ...props }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, size, icon, children, ref, sx, ...props }: ButtonProps): import("react").JSX.Element;
 export {};

package/dist/components/button/Button.js

@@ -40,6 +40,17 @@ const styles = stylex.create({
         minHeight: "1.75rem",
         fontSize: text.xs,
     },
+    xs: {
+        paddingBlock: 0,
+        paddingInline: space.xs,
+        minHeight: "1.5rem",
+        fontSize: text.xs,
+        gap: space.xxs,
+    },
+    // 圖示鈕:正方,邊長跟著該階的高,沒有左右內距
+    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 },
@@ -69,7 +80,8 @@ const SILK = {
     danger: { palette: palette(yarnDanger), bandMax: 0.75 },
     dangerGhost: { palette: palette(yarnGhost), ghost: true, bandMax: 0.5 },
 };
-export function Button({ variant = "primary", size = "md", children, ref, ...props }) {
+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) => {
@@ -82,5 +94,5 @@ export function Button({ variant = "primary", size = "md", children, ref, ...pro
         });
         return () => body.destroy();
     }, [variant]);
-    return (_jsxs("button", { type: "button", ...props, ref: (element) => assignRef(ref, element), ...styled(props, styles.base, styles[size], styles[variant]), children: [_jsx("svg", { ref: silk, "aria-hidden": "true", ...stylex.props(styles.silk) }), _jsx("span", { ...stylex.props(styles.label), children: children })] }));
+    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 })] }));
 }

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,8 +1,10 @@
 import { type ComponentProps, type ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type CheckboxProps = Omit<ComponentProps<"input">, "type" | "children"> & {
     indeterminate?: boolean;
     label?: ReactNode;
     description?: ReactNode;
     onCheckedChange?: (checked: boolean) => void;
+    sx?: StyleArg;
 };
-export declare function Checkbox({ indeterminate, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, ...props }: CheckboxProps): import("react").JSX.Element;
+export declare function Checkbox({ indeterminate, label, description, onCheckedChange, checked, defaultChecked, onChange, ref, sx, ...props }: CheckboxProps): import("react").JSX.Element;

package/dist/components/checkbox/Checkbox.js

@@ -77,7 +77,7 @@ const styles = stylex.create({
     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, ...props }) {
+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`;
@@ -95,7 +95,7 @@ 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), 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), 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 }))] }))] }));

package/dist/components/dialog/Dialog.js

@@ -3,6 +3,7 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import * as stylex from "@stylexjs/stylex";
 import { useRef } from "react";
+import { layerStyles } from "../../lib/popup.js";
 import { color, font, radius, shadow, space, text } from "../../tokens.stylex.js";
 import { Button } from "../button/Button.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
@@ -14,14 +15,12 @@ const styles = stylex.create({
     backdrop: {
         position: "fixed",
         inset: 0,
-        zIndex: 70,
         backgroundColor: "rgba(24, 22, 19, 0.35)",
         backdropFilter: "blur(2px)",
     },
     viewport: {
         position: "fixed",
         inset: 0,
-        zIndex: 71,
         display: "grid",
         placeItems: "center",
         padding: space.md,
@@ -69,9 +68,9 @@ export function DialogActions({ children }) {
     return _jsx("div", { ...stylex.props(styles.actions), children: children });
 }
 export function DialogContent({ title, description, children }) {
-    return (_jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { ...stylex.props(styles.backdrop) }), _jsx(BaseDialog.Viewport, { ...stylex.props(styles.viewport), children: _jsxs(BaseDialog.Popup, { ...stylex.props(styles.popup), children: [_jsx(BaseDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(BaseDialog.Description, { ...stylex.props(styles.description), children: description })), children] }) })] }));
+    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), children: [_jsx(BaseDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(BaseDialog.Description, { ...stylex.props(styles.description), children: description })), children] }) })] }));
 }
 export function ConfirmDialog({ trigger, title, description, danger = false, confirmLabel = "確認", cancelLabel = "取消", onConfirm, ...props }) {
     const cancelRef = useRef(null);
-    return (_jsxs(AlertDialog.Root, { ...props, children: [trigger != null && _jsx(AlertDialog.Trigger, { render: trigger }), _jsxs(AlertDialog.Portal, { children: [_jsx(AlertDialog.Backdrop, { ...stylex.props(styles.backdrop) }), _jsx(AlertDialog.Viewport, { ...stylex.props(styles.viewport), children: _jsxs(AlertDialog.Popup, { initialFocus: danger ? cancelRef : undefined, ...stylex.props(styles.popup), children: [_jsx(AlertDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(AlertDialog.Description, { ...stylex.props(styles.description), children: description })), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsx(AlertDialog.Close, { render: _jsx(Button, { ref: cancelRef, variant: "ghost" }), children: cancelLabel }), _jsx(AlertDialog.Close, { render: _jsx(Button, { variant: danger ? "danger" : "primary" }), onClick: onConfirm, children: confirmLabel })] })] }) })] })] }));
+    return (_jsxs(AlertDialog.Root, { ...props, children: [trigger != null && _jsx(AlertDialog.Trigger, { render: trigger }), _jsxs(AlertDialog.Portal, { children: [_jsx(AlertDialog.Backdrop, { ...stylex.props(layerStyles.dialogBackdrop, styles.backdrop) }), _jsx(AlertDialog.Viewport, { ...stylex.props(layerStyles.dialog, styles.viewport), children: _jsxs(AlertDialog.Popup, { initialFocus: danger ? cancelRef : undefined, ...stylex.props(styles.popup), children: [_jsx(AlertDialog.Title, { ...stylex.props(styles.title), children: title }), description != null && (_jsx(AlertDialog.Description, { ...stylex.props(styles.description), children: description })), _jsxs("div", { ...stylex.props(styles.actions), children: [_jsx(AlertDialog.Close, { render: _jsx(Button, { ref: cancelRef, variant: "ghost" }), children: cancelLabel }), _jsx(AlertDialog.Close, { render: _jsx(Button, { variant: danger ? "danger" : "primary" }), onClick: onConfirm, children: confirmLabel })] })] }) })] })] }));
 }

package/dist/components/input/Input.d.ts

@@ -1,5 +1,6 @@
 import * as stylex from "@stylexjs/stylex";
 import type { ComponentProps, ReactNode } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export declare const controlStyles: Readonly<{
     readonly base: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", "100%">;
@@ -44,5 +45,6 @@ export type InputProps = Omit<ComponentProps<"input">, "size"> & {
     size?: "sm" | "md";
     invalid?: boolean;
     leadingIcon?: ReactNode;
+    sx?: StyleArg;
 };
-export declare function Input({ size, invalid, leadingIcon, ...props }: InputProps): import("react").JSX.Element;
+export declare function Input({ size, invalid, leadingIcon, sx, ...props }: InputProps): import("react").JSX.Element;

package/dist/components/input/Input.js

@@ -54,10 +54,10 @@ const styles = stylex.create({
     withIconMd: { paddingInlineStart: space.xl },
     withIconSm: { paddingInlineStart: space.lg },
 });
-export function Input({ size = "md", invalid, leadingIcon, ...props }) {
+export function Input({ size = "md", invalid, leadingIcon, sx, ...props }) {
     const { invalid: fieldInvalid, ...field } = useFieldControl(props);
     const isInvalid = invalid ?? fieldInvalid;
-    const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd)) }));
+    const input = (_jsx("input", { ...props, ...field, "aria-invalid": isInvalid || undefined, ...styled(props, controlStyles.base, controlStyles[size], isInvalid && controlStyles.invalid, Boolean(leadingIcon) && (size === "sm" ? styles.withIconSm : styles.withIconMd), sx) }));
     if (!leadingIcon)
         return input;
     return (_jsxs("span", { ...stylex.props(styles.affix), children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.icon), children: leadingIcon }), input] }));

package/dist/components/label/Label.d.ts

@@ -1,7 +1,9 @@
 import type { ComponentProps } from "react";
+import { type StyleArg } from "../../lib/styled.js";
 export type LabelProps = ComponentProps<"label"> & {
     required?: boolean;
     optional?: boolean;
     optionalLabel?: string;
+    sx?: StyleArg;
 };
-export declare function Label({ required, optional, optionalLabel, children, ...props }: LabelProps): import("react").JSX.Element;
+export declare function Label({ required, optional, optionalLabel, children, sx, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/label/Label.js

@@ -16,6 +16,6 @@ const styles = stylex.create({
     required: { color: color.danger },
     optional: { fontWeight: 400, fontSize: text.xs, color: color.textFaint },
 });
-export function Label({ required, optional, optionalLabel = "選填", children, ...props }) {
-    return (_jsxs("label", { ...props, ...styled(props, styles.base), children: [children, required && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.required), children: "*" })), optional && _jsxs("span", { ...stylex.props(styles.optional), children: [" ", optionalLabel] })] }));
+export function Label({ required, optional, optionalLabel = "選填", children, sx, ...props }) {
+    return (_jsxs("label", { ...props, ...styled(props, styles.base, sx), children: [children, required && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.required), children: "*" })), optional && _jsxs("span", { ...stylex.props(styles.optional), children: [" ", optionalLabel] })] }));
 }

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

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

package/dist/components/switch/Switch.js

@@ -91,7 +91,7 @@ const styles = stylex.create({
     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 }) {
+export function Switch({ label, description, onCheckedChange, checked, defaultChecked, onChange, sx, ...props }) {
     const clipId = useSvgId("ak-weave");
     const base = useId();
     const labelId = `${base}label`;
@@ -101,7 +101,7 @@ 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), 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), 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/textarea/Textarea.d.ts

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

package/dist/components/textarea/Textarea.js

@@ -18,8 +18,8 @@ const styles = stylex.create({
     },
     maxRows: (rows) => ({ maxHeight: `calc(${rows} * 1.6em + ${space.md})` }),
 });
-export function Textarea({ autoGrow, maxRows, invalid, ...props }) {
+export function Textarea({ autoGrow, maxRows, invalid, sx, ...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) }));
+    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, sx) }));
 }

package/dist/components/toast/Toast.js

@@ -5,6 +5,7 @@ import { createContext, useContext, useState } from "react";
 import { reset } from "../../lib/styled.js";
 import { usePrefersReducedMotion } from "../../lib/motion.js";
 import { UNWEAVE_PATH } from "../../lib/paths.js";
+import { layerStyles } from "../../lib/popup.js";
 import { color, font, motion, radius, shadow, space, text } from "../../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
 const DEFAULT_TIMEOUT = 5000;
@@ -19,7 +20,6 @@ const unweave = stylex.keyframes({
 const styles = stylex.create({
     viewport: {
         position: "fixed",
-        zIndex: 80,
         display: "flex",
         gap: space.xs,
         width: "min(20rem, calc(100vw - 2.5rem))",
@@ -161,7 +161,7 @@ export function Toaster({ position = "bottom-right", timeout = DEFAULT_TIMEOUT,
     const [api] = useState(() => makeApi(() => own));
     const [paused, setPaused] = useState(false);
     const fromBottom = position.startsWith("bottom");
-    return (_jsx(ToastApiContext, { value: api, children: _jsx(BaseToast.Provider, { toastManager: own, timeout: timeout, limit: limit, children: _jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), ...stylex.props(styles.viewport, fromBottom ? styles.fromBottom : styles.fromTop, POSITIONS[position]), children: _jsx(ToastList, { fallbackTimeout: timeout, paused: paused }) }) }) }) }));
+    return (_jsx(ToastApiContext, { value: api, children: _jsx(BaseToast.Provider, { toastManager: own, timeout: timeout, limit: limit, children: _jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onFocus: () => setPaused(true), onBlur: () => setPaused(false), ...stylex.props(layerStyles.toast, styles.viewport, fromBottom ? styles.fromBottom : styles.fromTop, POSITIONS[position]), children: _jsx(ToastList, { fallbackTimeout: timeout, paused: paused }) }) }) }) }));
 }
 function ToastList({ fallbackTimeout, paused }) {
     const { toasts } = BaseToast.useToastManager();

package/dist/components/tooltip/Tooltip.js

@@ -3,12 +3,12 @@ import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import * as stylex from "@stylexjs/stylex";
 import { useId, useState } from "react";
 import { usePrefersReducedMotion } from "../../lib/motion.js";
+import { layerStyles } from "../../lib/popup.js";
 import { color, font, motion, radius, space, text } from "../../tokens.stylex.js";
 import { KbdToneContext } from "../kbd/Kbd.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
 const fade = stylex.keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
 const styles = stylex.create({
-    positioner: { zIndex: 60 },
     bubble: {
         display: "inline-flex",
         alignItems: "center",
@@ -34,5 +34,5 @@ export function Tooltip({ content, shortcut, side = "top", align = "center", del
     const [open, setOpen] = useState(false);
     if (disabled)
         return children;
-    return (_jsxs(BaseTooltip.Root, { open: open, onOpenChange: setOpen, children: [_jsx(BaseTooltip.Trigger, { delay: reduced ? 0 : delay, "aria-describedby": open ? id : undefined, render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: 6, ...stylex.props(styles.positioner), children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", ...stylex.props(styles.bubble), children: _jsxs(KbdToneContext, { value: "inverted", children: [content, shortcut] }) }) }) })] }));
+    return (_jsxs(BaseTooltip.Root, { open: open, onOpenChange: setOpen, children: [_jsx(BaseTooltip.Trigger, { delay: reduced ? 0 : delay, "aria-describedby": open ? id : undefined, render: children }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, align: align, sideOffset: 6, ...stylex.props(layerStyles.tooltip), children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", ...stylex.props(styles.bubble), children: _jsxs(KbdToneContext, { value: "inverted", children: [content, shortcut] }) }) }) })] }));
 }

package/dist/lib/popup.d.ts

@@ -1,4 +1,39 @@
 import * as stylex from "@stylexjs/stylex";
+/**
+ * 全站疊層表。Base UI 的浮層一律 portal 到 body,跟 dialog / toast 同在一層比 z-index,
+ * 各元件各寫一個數字就會出現「dialog 裡的 select 打不開」這種洞,所以值集中在這裡。
+ *
+ * 順序的理由:popup 壓過 dialog(浮層是當下互動的最上層);tooltip 壓過 popup
+ * (popup 裡的元素也能有 tooltip);toast 永遠最上(非阻斷通知不能被 modal 蓋掉)。
+ */
+export declare const layer: {
+    readonly dialogBackdrop: 70;
+    readonly dialog: 71;
+    readonly popup: 75;
+    readonly tooltip: 78;
+    readonly toast: 80;
+};
+/**
+ * `layer` 的 stylex 版。跨檔案 import 的值在 `stylex.create()` 裡不能靜態求值,
+ * 所以疊層要以「做好的樣式」而不是數字提供給其他元件。
+ */
+export declare const layerStyles: Readonly<{
+    readonly dialogBackdrop: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 70>;
+    }>;
+    readonly dialog: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 71>;
+    }>;
+    readonly popup: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 75>;
+    }>;
+    readonly tooltip: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 78>;
+    }>;
+    readonly toast: Readonly<{
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 80>;
+    }>;
+}>;
 export declare const growIn: string;
 export declare const popupStyles: Readonly<{
     readonly surface: Readonly<{
@@ -23,7 +58,7 @@ export declare const popupStyles: Readonly<{
         readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "var(--available-height)">;
     }>;
     readonly positioner: Readonly<{
-        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 40>;
+        readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 75>;
         readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
     }>;
 }>;

package/dist/lib/popup.js

@@ -1,6 +1,31 @@
 import * as stylex from "@stylexjs/stylex";
 import { color, radius, shadow } from "../tokens.stylex.js";
 const REDUCED = "@media (prefers-reduced-motion: reduce)";
+/**
+ * 全站疊層表。Base UI 的浮層一律 portal 到 body,跟 dialog / toast 同在一層比 z-index,
+ * 各元件各寫一個數字就會出現「dialog 裡的 select 打不開」這種洞,所以值集中在這裡。
+ *
+ * 順序的理由:popup 壓過 dialog(浮層是當下互動的最上層);tooltip 壓過 popup
+ * (popup 裡的元素也能有 tooltip);toast 永遠最上(非阻斷通知不能被 modal 蓋掉)。
+ */
+export const layer = {
+    dialogBackdrop: 70,
+    dialog: 71,
+    popup: 75,
+    tooltip: 78,
+    toast: 80,
+};
+/**
+ * `layer` 的 stylex 版。跨檔案 import 的值在 `stylex.create()` 裡不能靜態求值,
+ * 所以疊層要以「做好的樣式」而不是數字提供給其他元件。
+ */
+export const layerStyles = stylex.create({
+    dialogBackdrop: { zIndex: layer.dialogBackdrop },
+    dialog: { zIndex: layer.dialog },
+    popup: { zIndex: layer.popup },
+    tooltip: { zIndex: layer.tooltip },
+    toast: { zIndex: layer.toast },
+});
 export const growIn = stylex.keyframes({
     from: { opacity: 0, scale: "1 0.97" },
     to: { opacity: 1, scale: "1 1" },
@@ -23,5 +48,5 @@ export const popupStyles = stylex.create({
     },
     anchorWidth: { width: "var(--anchor-width)" },
     availableHeight: { maxHeight: "var(--available-height)" },
-    positioner: { zIndex: 40, outline: "none" },
+    positioner: { zIndex: layer.popup, outline: "none" },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anyknown/ui",
-	"version": "0.3.0",
+	"version": "0.4.1",
 	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
 	"homepage": "https://ui.anyknown.com",
 	"bugs": {