@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/modal/modal.d.ts

@@ -0,0 +1,50 @@
+import { type FC, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import { type ButtonProps } from '../button/button';
+import './modal.css';
+export type ModalSemanticPart = 'root' | 'overlay' | 'header' | 'title' | 'body' | 'footer' | 'close';
+/** Render-prop form of `footer`: receives the default node and the two default button components. */
+export type ModalFooterRender = (originNode: ReactNode, extra: {
+    OkBtn: FC;
+    CancelBtn: FC;
+}) => ReactNode;
+export interface ModalProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    /**
+     * Footer content.
+     * - `undefined` renders default OK/Cancel buttons
+     * - `null` renders no footer
+     * - a function receives `(originNode, { OkBtn, CancelBtn })` to compose around the defaults
+     */
+    footer?: ReactNode | ModalFooterRender | null;
+    onOk?: () => void;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    confirmLoading?: boolean;
+    /** Extra props forwarded to the default OK button. */
+    okButtonProps?: ButtonProps;
+    /** Extra props forwarded to the default Cancel button. */
+    cancelButtonProps?: ButtonProps;
+    width?: number | string;
+    /** Vertically center the dialog. Defaults to true. */
+    centered?: boolean;
+    /** Show the close (×) button. Defaults to true. */
+    closable?: boolean;
+    /** Close when clicking the mask/overlay. Defaults to true. */
+    maskClosable?: boolean;
+    /** Close on Esc key. Defaults to true. */
+    keyboard?: boolean;
+    /** Called after the modal has fully closed (open transitions true → false). */
+    afterClose?: () => void;
+    /**
+     * Unmount children when closed. Defaults to `true`.
+     * Set `false` to keep children mounted and preserve their state across open/close.
+     */
+    destroyOnHidden?: boolean;
+    children?: ReactNode;
+    classNames?: SemanticClassNames<ModalSemanticPart>;
+    styles?: SemanticStyles<ModalSemanticPart>;
+}
+export declare function Modal({ open, onClose, title, footer, onOk, okText, cancelText, confirmLoading, okButtonProps, cancelButtonProps, width, centered, closable, maskClosable, keyboard, afterClose, destroyOnHidden, children, classNames, styles: stylesProp, }: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/modal/modal.js

@@ -0,0 +1,362 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { Button } from "../button/button.js";
+import "./modal.css";
+import * as __rspack_external__radix_ui_react_dialog_6b867f3d from "@radix-ui/react-dialog";
+function Modal(t0) {
+    const $ = c(87);
+    const { open, onClose, title, footer, onOk, okText: t1, cancelText: t2, confirmLoading, okButtonProps, cancelButtonProps, width: t3, centered: t4, closable: t5, maskClosable: t6, keyboard: t7, afterClose, destroyOnHidden: t8, children, classNames, styles: stylesProp } = t0;
+    const okText = void 0 === t1 ? "OK" : t1;
+    const cancelText = void 0 === t2 ? "Cancel" : t2;
+    const width = void 0 === t3 ? 520 : t3;
+    const centered = void 0 === t4 ? true : t4;
+    const closable = void 0 === t5 ? true : t5;
+    const maskClosable = void 0 === t6 ? true : t6;
+    const keyboard = void 0 === t7 ? true : t7;
+    const destroyOnHidden = void 0 === t8 ? true : t8;
+    const prevOpen = useRef(open);
+    let t10;
+    let t9;
+    if ($[0] !== afterClose || $[1] !== open) {
+        t9 = ()=>{
+            if (prevOpen.current && !open) afterClose?.();
+            prevOpen.current = open;
+        };
+        t10 = [
+            open,
+            afterClose
+        ];
+        $[0] = afterClose;
+        $[1] = open;
+        $[2] = t10;
+        $[3] = t9;
+    } else {
+        t10 = $[2];
+        t9 = $[3];
+    }
+    useEffect(t9, t10);
+    const t11 = "number" == typeof width ? `${width}px` : width;
+    const t12 = stylesProp?.root;
+    let t13;
+    if ($[4] !== t11 || $[5] !== t12) {
+        t13 = {
+            width: t11,
+            ...t12
+        };
+        $[4] = t11;
+        $[5] = t12;
+        $[6] = t13;
+    } else t13 = $[6];
+    const contentStyle = t13;
+    let t14;
+    if ($[7] !== cancelButtonProps || $[8] !== cancelText || $[9] !== onClose) {
+        t14 = ()=>/*#__PURE__*/ jsx(Button, {
+                variant: "secondary",
+                onClick: onClose,
+                ...cancelButtonProps,
+                children: cancelText
+            });
+        $[7] = cancelButtonProps;
+        $[8] = cancelText;
+        $[9] = onClose;
+        $[10] = t14;
+    } else t14 = $[10];
+    const CancelBtn = t14;
+    let t15;
+    if ($[11] !== confirmLoading || $[12] !== okButtonProps || $[13] !== okText || $[14] !== onOk) {
+        t15 = ()=>/*#__PURE__*/ jsx(Button, {
+                variant: "primary",
+                loading: confirmLoading,
+                onClick: onOk,
+                ...okButtonProps,
+                children: okText
+            });
+        $[11] = confirmLoading;
+        $[12] = okButtonProps;
+        $[13] = okText;
+        $[14] = onOk;
+        $[15] = t15;
+    } else t15 = $[15];
+    const OkBtn = t15;
+    let t16;
+    if ($[16] !== CancelBtn) {
+        t16 = /*#__PURE__*/ jsx(CancelBtn, {});
+        $[16] = CancelBtn;
+        $[17] = t16;
+    } else t16 = $[17];
+    let t17;
+    if ($[18] !== OkBtn) {
+        t17 = /*#__PURE__*/ jsx(OkBtn, {});
+        $[18] = OkBtn;
+        $[19] = t17;
+    } else t17 = $[19];
+    let t18;
+    if ($[20] !== t16 || $[21] !== t17) {
+        t18 = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                t16,
+                t17
+            ]
+        });
+        $[20] = t16;
+        $[21] = t17;
+        $[22] = t18;
+    } else t18 = $[22];
+    const defaultFooter = t18;
+    let footerContent;
+    if (void 0 === footer) footerContent = defaultFooter;
+    else if ("function" == typeof footer) {
+        let t19;
+        if ($[23] !== CancelBtn || $[24] !== OkBtn || $[25] !== defaultFooter || $[26] !== footer) {
+            t19 = footer(defaultFooter, {
+                OkBtn,
+                CancelBtn
+            });
+            $[23] = CancelBtn;
+            $[24] = OkBtn;
+            $[25] = defaultFooter;
+            $[26] = footer;
+            $[27] = t19;
+        } else t19 = $[27];
+        footerContent = t19;
+    } else footerContent = footer;
+    const keepAlive = !destroyOnHidden;
+    const forceMount = keepAlive ? true : void 0;
+    let t19;
+    if ($[28] !== onClose) {
+        t19 = (v)=>{
+            if (!v) onClose?.();
+        };
+        $[28] = onClose;
+        $[29] = t19;
+    } else t19 = $[29];
+    const t20 = classNames?.overlay;
+    let t21;
+    if ($[30] !== t20) {
+        t21 = cx(t20);
+        $[30] = t20;
+        $[31] = t21;
+    } else t21 = $[31];
+    const t22 = stylesProp?.overlay;
+    let t23;
+    if ($[32] !== forceMount || $[33] !== t21 || $[34] !== t22) {
+        t23 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Overlay, {
+            forceMount: forceMount,
+            "data-tao-modal-overlay": "",
+            className: t21,
+            style: t22
+        });
+        $[32] = forceMount;
+        $[33] = t21;
+        $[34] = t22;
+        $[35] = t23;
+    } else t23 = $[35];
+    const t24 = centered ? "" : void 0;
+    const t25 = open ? "" : void 0;
+    const t26 = classNames?.root;
+    let t27;
+    if ($[36] !== t26) {
+        t27 = cx(t26);
+        $[36] = t26;
+        $[37] = t27;
+    } else t27 = $[37];
+    let t28;
+    if ($[38] !== keyboard) {
+        t28 = (e)=>{
+            if (!keyboard) e.preventDefault();
+        };
+        $[38] = keyboard;
+        $[39] = t28;
+    } else t28 = $[39];
+    let t29;
+    let t30;
+    if ($[40] !== maskClosable) {
+        t29 = (e_0)=>{
+            if (!maskClosable) e_0.preventDefault();
+        };
+        t30 = (e_1)=>{
+            if (!maskClosable) e_1.preventDefault();
+        };
+        $[40] = maskClosable;
+        $[41] = t29;
+        $[42] = t30;
+    } else {
+        t29 = $[41];
+        t30 = $[42];
+    }
+    let t31;
+    if ($[43] !== classNames?.close || $[44] !== classNames?.header || $[45] !== classNames?.title || $[46] !== closable || $[47] !== onClose || $[48] !== stylesProp?.close || $[49] !== stylesProp?.header || $[50] !== stylesProp?.title || $[51] !== title) {
+        t31 = (null != title || closable) && /*#__PURE__*/ jsxs("div", {
+            "data-tao-modal-header": "",
+            className: cx(classNames?.header),
+            style: stylesProp?.header,
+            children: [
+                null != title ? /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
+                    "data-tao-modal-title": "",
+                    className: cx(classNames?.title),
+                    style: stylesProp?.title,
+                    children: title
+                }) : /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Title, {
+                    "data-tao-modal-title": "",
+                    style: {
+                        display: "none"
+                    }
+                }),
+                closable && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    "data-tao-modal-close": "",
+                    className: cx(classNames?.close),
+                    style: stylesProp?.close,
+                    onClick: onClose,
+                    "aria-label": "Close",
+                    children: /*#__PURE__*/ jsx(CloseIcon, {})
+                })
+            ]
+        });
+        $[43] = classNames?.close;
+        $[44] = classNames?.header;
+        $[45] = classNames?.title;
+        $[46] = closable;
+        $[47] = onClose;
+        $[48] = stylesProp?.close;
+        $[49] = stylesProp?.header;
+        $[50] = stylesProp?.title;
+        $[51] = title;
+        $[52] = t31;
+    } else t31 = $[52];
+    const t32 = classNames?.body;
+    let t33;
+    if ($[53] !== t32) {
+        t33 = cx(t32);
+        $[53] = t32;
+        $[54] = t33;
+    } else t33 = $[54];
+    const t34 = stylesProp?.body;
+    let t35;
+    if ($[55] !== children || $[56] !== t33 || $[57] !== t34) {
+        t35 = /*#__PURE__*/ jsx("div", {
+            "data-tao-modal-body": "",
+            className: t33,
+            style: t34,
+            children: children
+        });
+        $[55] = children;
+        $[56] = t33;
+        $[57] = t34;
+        $[58] = t35;
+    } else t35 = $[58];
+    let t36;
+    if ($[59] !== classNames?.footer || $[60] !== footerContent || $[61] !== stylesProp?.footer) {
+        t36 = null != footerContent && /*#__PURE__*/ jsx("div", {
+            "data-tao-modal-footer": "",
+            className: cx(classNames?.footer),
+            style: stylesProp?.footer,
+            children: footerContent
+        });
+        $[59] = classNames?.footer;
+        $[60] = footerContent;
+        $[61] = stylesProp?.footer;
+        $[62] = t36;
+    } else t36 = $[62];
+    let t37;
+    if ($[63] !== contentStyle || $[64] !== forceMount || $[65] !== t27 || $[66] !== t28 || $[67] !== t29 || $[68] !== t30 || $[69] !== t31 || $[70] !== t35 || $[71] !== t36) {
+        t37 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dialog_6b867f3d.Content, {
+            forceMount: forceMount,
+            "data-tao-modal": "",
+            style: contentStyle,
+            className: t27,
+            "aria-describedby": void 0,
+            onEscapeKeyDown: t28,
+            onPointerDownOutside: t29,
+            onInteractOutside: t30,
+            children: [
+                t31,
+                t35,
+                t36
+            ]
+        });
+        $[63] = contentStyle;
+        $[64] = forceMount;
+        $[65] = t27;
+        $[66] = t28;
+        $[67] = t29;
+        $[68] = t30;
+        $[69] = t31;
+        $[70] = t35;
+        $[71] = t36;
+        $[72] = t37;
+    } else t37 = $[72];
+    let t38;
+    if ($[73] !== t24 || $[74] !== t25 || $[75] !== t37) {
+        t38 = /*#__PURE__*/ jsx("div", {
+            "data-tao-modal-wrap": "",
+            "data-tao-centered": t24,
+            "data-tao-open": t25,
+            children: t37
+        });
+        $[73] = t24;
+        $[74] = t25;
+        $[75] = t37;
+        $[76] = t38;
+    } else t38 = $[76];
+    let t39;
+    if ($[77] !== t23 || $[78] !== t38) {
+        t39 = /*#__PURE__*/ jsxs(TaoPortalScope, {
+            children: [
+                t23,
+                t38
+            ]
+        });
+        $[77] = t23;
+        $[78] = t38;
+        $[79] = t39;
+    } else t39 = $[79];
+    let t40;
+    if ($[80] !== forceMount || $[81] !== t39) {
+        t40 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Portal, {
+            forceMount: forceMount,
+            children: t39
+        });
+        $[80] = forceMount;
+        $[81] = t39;
+        $[82] = t40;
+    } else t40 = $[82];
+    let t41;
+    if ($[83] !== open || $[84] !== t19 || $[85] !== t40) {
+        t41 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dialog_6b867f3d.Root, {
+            open: open,
+            onOpenChange: t19,
+            children: t40
+        });
+        $[83] = open;
+        $[84] = t19;
+        $[85] = t40;
+        $[86] = t41;
+    } else t41 = $[86];
+    return t41;
+}
+function CloseIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M18 6 6 18M6 6l12 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Modal };

package/dist/components/modal/use-modal.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+import type { ModalFuncReturn } from './confirm';
+import { type ModalFuncProps } from './confirm-dialog';
+export interface ModalHookApi {
+    confirm: (config: ModalFuncProps) => ModalFuncReturn;
+    info: (config: ModalFuncProps) => ModalFuncReturn;
+    success: (config: ModalFuncProps) => ModalFuncReturn;
+    error: (config: ModalFuncProps) => ModalFuncReturn;
+    warning: (config: ModalFuncProps) => ModalFuncReturn;
+}
+/**
+ * Context-aware imperative modals. Render `contextHolder` inside your tree so the
+ * dialogs inherit `TaoProvider` config and theme.
+ *
+ * ```tsx
+ * const [modal, contextHolder] = Modal.useModal();
+ * modal.confirm({ title: 'Delete?', onOk });
+ * return <>{contextHolder}</>;
+ * ```
+ */
+export declare function useModal(): [ModalHookApi, ReactElement];

package/dist/components/modal/use-modal.js

@@ -0,0 +1,83 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement, useCallback, useMemo, useState } from "react";
+import { ConfirmDialog } from "./confirm-dialog.js";
+let uuid = 0;
+function useModal() {
+    const [dialogs, setDialogs] = useState([]);
+    const closeDialog = useCallback((key)=>{
+        setDialogs((prev)=>prev.map((d)=>d.key === key ? {
+                    ...d,
+                    open: false
+                } : d));
+    }, []);
+    const destroyDialog = useCallback((key_0)=>{
+        setDialogs((prev_0)=>prev_0.filter((d_0)=>d_0.key !== key_0));
+    }, []);
+    const updateDialog = useCallback((key_1, configUpdate)=>{
+        setDialogs((prev_1)=>prev_1.map((d_1)=>d_1.key === key_1 ? {
+                    ...d_1,
+                    config: 'function' == typeof configUpdate ? configUpdate(d_1.config) : {
+                        ...d_1.config,
+                        ...configUpdate
+                    }
+                } : d_1));
+    }, []);
+    const api = useMemo(()=>{
+        const open = (config, type)=>{
+            const key_2 = `tao-modal-${uuid++}`;
+            setDialogs((prev_2)=>[
+                    ...prev_2,
+                    {
+                        key: key_2,
+                        type,
+                        open: true,
+                        config
+                    }
+                ]);
+            return {
+                destroy: ()=>closeDialog(key_2),
+                update: (configUpdate_0)=>updateDialog(key_2, configUpdate_0)
+            };
+        };
+        return {
+            confirm: (config_0)=>open(config_0, 'confirm'),
+            info: (config_1)=>open({
+                    okCancel: false,
+                    ...config_1
+                }, 'info'),
+            success: (config_2)=>open({
+                    okCancel: false,
+                    ...config_2
+                }, 'success'),
+            error: (config_3)=>open({
+                    okCancel: false,
+                    ...config_3
+                }, 'error'),
+            warning: (config_4)=>open({
+                    okCancel: false,
+                    ...config_4
+                }, 'warning')
+        };
+    }, [
+        closeDialog,
+        updateDialog
+    ]);
+    const contextHolder = /*#__PURE__*/ jsx(Fragment, {
+        children: dialogs.map((d_2)=>/*#__PURE__*/ createElement(ConfirmDialog, {
+                ...d_2.config,
+                key: d_2.key,
+                type: d_2.type,
+                open: d_2.open,
+                close: ()=>closeDialog(d_2.key),
+                afterClose: ()=>{
+                    d_2.config.afterClose?.();
+                    destroyDialog(d_2.key);
+                }
+            }))
+    });
+    return [
+        api,
+        contextHolder
+    ];
+}
+export { useModal };

package/dist/components/pagination/pagination.css

@@ -307,11 +307,16 @@
     --tao-radius: 6px;
     --tao-font-size: 14px;
     --tao-control-height: 36px;
+    --tao-control-width: 200px;
+    --tao-control-range-width: 360px;
     --tao-size-unit: 4px;
     --tao-line-width: 1px;
     --tao-font-family: "Geist Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --tao-font-family-code: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
     --tao-motion-unit: .1s;
+    --tao-z-index-drawer: 1000;
+    --tao-z-index-modal: 1000;
+    --tao-z-index-popup: 1100;
     --tao-primary: var(--tao-color-primary);
     --tao-primary-hover: var(--tao-color-primary);
   }
@@ -529,8 +534,8 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-bg-container: var(--tao-color-bg-base);
-    --tao-color-bg-elevated: var(--tao-color-bg-base);
+    --tao-color-bg-container: oklch(100% 0 0);
+    --tao-color-bg-elevated: oklch(100% 0 0);
     --tao-color-border: var(--tao-color-text-base);
   }
 
@@ -541,16 +546,7 @@
   }
 
   :root, [data-tao-provider] {
-    --tao-color-border-secondary: var(--tao-color-text-base);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    :root, [data-tao-provider] {
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
-    }
-  }
-
-  :root, [data-tao-provider] {
+    --tao-color-border-secondary: #0000170b;
     --tao-radius-xs: 2px;
     --tao-radius-sm: calc(var(--tao-radius) - 2px);
     --tao-radius-md: var(--tao-radius);
@@ -633,6 +629,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +715,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +731,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .resize {
+    resize: both;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -742,6 +750,14 @@
     border-width: 1px;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .underline {
+    text-decoration-line: underline;
+  }
+
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -771,6 +787,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+
+  .select-all {
+    -webkit-user-select: all;
+    user-select: all;
+  }
 }
 
 [data-tao-pagination] {

package/dist/components/pagination/pagination.js

@@ -253,7 +253,9 @@ function Pagination(t0) {
     let t26;
     if ($[52] !== goTo || $[53] !== pageSize || $[54] !== pageSizeOptions || $[55] !== resolvedDisabled || $[56] !== resolvedSize || $[57] !== showSizeChanger) {
         t26 = showSizeChanger && /*#__PURE__*/ jsx(Select, {
-            "data-tao-pagination-sizer": "",
+            style: {
+                width: "auto"
+            },
             options: pageSizeOptions.map(_temp),
             value: String(pageSize),
             onChange: (val)=>{