@anyknown/ui 0.4.0 → 0.4.2

package/dist/components/card/Card.d.ts

@@ -1,2 +1,7 @@
 import type { ComponentProps } from "react";
-export declare function Card(props: ComponentProps<"div">): import("react").JSX.Element;
+import { type StyleArg } from "../../lib/styled.js";
+type CardProps = ComponentProps<"div"> & {
+    sx?: StyleArg;
+};
+export declare function Card({ sx, ...props }: CardProps): import("react").JSX.Element;
+export {};

package/dist/components/card/Card.js

@@ -12,6 +12,6 @@ const styles = stylex.create({
         padding: space.lg,
     },
 });
-export function Card(props) {
-    return _jsx("div", { ...props, ...styled(props, styles.base) });
+export function Card({ sx, ...props }) {
+    return _jsx("div", { ...props, ...styled(props, styles.base, sx) });
 }

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/text/Text.d.ts

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

package/dist/components/text/Text.js

@@ -26,6 +26,6 @@ const styles = stylex.create({
     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]) });
+export function Text({ as: Tag = "p", variant = "body", sx, ...props }) {
+    return _jsx(Tag, { ...props, ...styled(props, styles.base, styles[variant], 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.4.0",
+	"version": "0.4.2",
 	"description": "AnyKnown design system — StyleX tokens, themes, and 34 components",
 	"homepage": "https://ui.anyknown.com",
 	"bugs": {