@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/input/input.css

@@ -87,7 +87,6 @@
       --tao-color-fill-quaternary: color-mix(in oklch, var(--tao-color-text-base) 3%, var(--tao-color-bg-base));
       --tao-color-bg-layout: color-mix(in oklch, var(--tao-color-text-base) 4%, var(--tao-color-bg-base));
       --tao-color-border: color-mix(in oklch, var(--tao-color-text-base) 18%, var(--tao-color-bg-base));
-      --tao-color-border-secondary: color-mix(in oklch, var(--tao-color-text-base) 10%, var(--tao-color-bg-base));
       --tao-control-outline: color-mix(in oklch, var(--tao-color-primary) 10%, transparent);
       --tao-color-error-outline: color-mix(in oklch, var(--tao-color-error) 10%, transparent);
       --tao-color-warning-outline: color-mix(in oklch, var(--tao-color-warning) 10%, transparent);
@@ -350,11 +349,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);
   }
@@ -572,8 +576,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);
   }
 
@@ -584,16 +588,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);
@@ -676,6 +671,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -758,6 +757,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -770,6 +773,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;
   }
@@ -785,6 +792,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);
@@ -814,6 +829,24 @@
     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-control] {
+  box-sizing: border-box;
+  width: var(--tao-control-width);
+}
+
+[data-tao-control][data-tao-range-trigger] {
+  width: var(--tao-control-range-width);
+}
+
+[data-tao-form-field] [data-tao-control] {
+  width: 100%;
 }
 
 [data-tao-control] {
@@ -821,8 +854,8 @@
 }
 
 [data-tao-control][data-tao-variant="outlined"] {
-  background: var(--tao-color-bg-container);
   border: var(--tao-line-width) solid var(--tao-color-border);
+  background: none;
 }
 
 [data-tao-control][data-tao-variant="outlined"]:hover:not([data-disabled]):not(:focus-within):not([data-state="open"]) {
@@ -848,6 +881,25 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning] {
+  border-color: var(--tao-warning);
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  border-color: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="outlined"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    border-color: color-mix(in oklch, var(--tao-color-warning) 80%, white);
+  }
+}
+
+[data-tao-control][data-tao-variant="outlined"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="outlined"][data-tao-warning][data-state="open"] {
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="outlined"][data-disabled], [data-tao-control][data-tao-variant="outlined"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);
@@ -892,6 +944,26 @@
   box-shadow: 0 0 0 2px var(--tao-color-error-outline);
 }
 
+[data-tao-control][data-tao-variant="filled"][data-tao-warning] {
+  background: var(--tao-warning-bg);
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+  background: var(--tao-color-warning);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-control][data-tao-variant="filled"][data-tao-warning]:hover:not([data-disabled]):not(:focus-within) {
+    background: color-mix(in oklch, var(--tao-color-warning) 10%, var(--tao-color-bg-base));
+  }
+}
+
+[data-tao-control][data-tao-variant="filled"][data-tao-warning]:focus-within, [data-tao-control][data-tao-variant="filled"][data-tao-warning][data-state="open"] {
+  background: var(--tao-color-bg-container);
+  border-color: var(--tao-warning);
+  box-shadow: 0 0 0 2px var(--tao-color-warning-outline);
+}
+
 [data-tao-control][data-tao-variant="filled"][data-disabled], [data-tao-control][data-tao-variant="filled"]:has(input:disabled) {
   background: var(--tao-color-bg-disabled);
   border-color: var(--tao-color-border);

package/dist/components/menu/menu-render.d.ts

@@ -0,0 +1,89 @@
+import { type ComponentType, type ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import './menu.css';
+export type MenuSemanticPart = 'root' | 'content' | 'item' | 'itemIcon' | 'itemLabel' | 'itemExtra' | 'divider' | 'groupLabel' | 'subTrigger' | 'subContent';
+export interface MenuItemType {
+    key: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    /** Right-aligned extra content, e.g. a keyboard shortcut. */
+    extra?: ReactNode;
+    onClick?: (info: {
+        key: string;
+    }) => void;
+    /** Nested submenu. */
+    children?: MenuItemType[];
+}
+export interface MenuDividerType {
+    type: 'divider';
+}
+export interface MenuGroupType {
+    type: 'group';
+    key?: string;
+    label?: ReactNode;
+    children: MenuItemType[];
+}
+export type MenuItem = MenuItemType | MenuDividerType | MenuGroupType;
+export interface MenuProps {
+    items: MenuItem[];
+    onClick?: (info: {
+        key: string;
+    }) => void;
+    /** Render items as checkbox/radio entries. */
+    selectable?: boolean;
+    /** Multi-select (checkbox) when selectable. Otherwise single (radio). */
+    multiple?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelect?: (info: {
+        key: string;
+        selectedKeys: string[];
+    }) => void;
+}
+/**
+ * Radix `react-dropdown-menu` and `react-context-menu` expose parallel
+ * sub-components with identical names. We render an antd-style `items` array
+ * against whichever set is passed in, so Dropdown and ContextMenu share one
+ * renderer.
+ */
+type AnyComp = ComponentType<any>;
+export interface MenuPrimitives {
+    Item: AnyComp;
+    CheckboxItem: AnyComp;
+    RadioGroup: AnyComp;
+    RadioItem: AnyComp;
+    Label: AnyComp;
+    Separator: AnyComp;
+    Group: AnyComp;
+    Sub: AnyComp;
+    SubTrigger: AnyComp;
+    SubContent: AnyComp;
+    Portal: AnyComp;
+    ItemIndicator: AnyComp;
+}
+export interface RenderCtx {
+    P: MenuPrimitives;
+    classNames?: SemanticClassNames<MenuSemanticPart>;
+    styles?: SemanticStyles<MenuSemanticPart>;
+    /** Fire item.onClick + menu.onClick for a plain action item. */
+    onAction: (item: MenuItemType) => void;
+    /** Multi-select: current keys + toggler. */
+    selectedKeys: string[];
+    multiple: boolean;
+    selectable: boolean;
+    onToggle: (key: string) => void;
+}
+export declare function renderMenuItems(items: MenuItem[], ctx: RenderCtx): ReactNode;
+/**
+ * Encapsulates a menu's selection state (controlled / uncontrolled), the
+ * item-click dispatch (`item.onClick` → `menu.onClick`), and rendering of the
+ * item tree (wrapping in a RadioGroup for single-select). Returns the ready
+ * content node. Shared by Dropdown and ContextMenu.
+ */
+export declare function useMenuController(menu: MenuProps, P: MenuPrimitives, semantic: {
+    classNames?: SemanticClassNames<MenuSemanticPart>;
+    styles?: SemanticStyles<MenuSemanticPart>;
+}): ReactNode;
+export {};

package/dist/components/menu/menu-render.js

@@ -0,0 +1,379 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { TaoPortalScope } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import "./menu.css";
+function ChevronRightIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-menu-sub-icon": "",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m9 18 6-6-6-6"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function CheckIcon() {
+    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.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("polyline", {
+                points: "20 6 9 17 4 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function DotIcon() {
+    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: "currentColor",
+            "aria-hidden": true,
+            children: /*#__PURE__*/ jsx("circle", {
+                cx: "12",
+                cy: "12",
+                r: "4"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function ItemBody(t0) {
+    const $ = c(18);
+    const { icon, label, extra, ctx } = t0;
+    let t1;
+    if ($[0] !== ctx.classNames?.itemIcon || $[1] !== ctx.styles?.itemIcon || $[2] !== icon) {
+        t1 = null != icon && /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-icon": "",
+            className: cx(ctx.classNames?.itemIcon),
+            style: ctx.styles?.itemIcon,
+            children: icon
+        });
+        $[0] = ctx.classNames?.itemIcon;
+        $[1] = ctx.styles?.itemIcon;
+        $[2] = icon;
+        $[3] = t1;
+    } else t1 = $[3];
+    const t2 = ctx.classNames?.itemLabel;
+    let t3;
+    if ($[4] !== t2) {
+        t3 = cx(t2);
+        $[4] = t2;
+        $[5] = t3;
+    } else t3 = $[5];
+    const t4 = ctx.styles?.itemLabel;
+    let t5;
+    if ($[6] !== label || $[7] !== t3 || $[8] !== t4) {
+        t5 = /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-label": "",
+            className: t3,
+            style: t4,
+            children: label
+        });
+        $[6] = label;
+        $[7] = t3;
+        $[8] = t4;
+        $[9] = t5;
+    } else t5 = $[9];
+    let t6;
+    if ($[10] !== ctx.classNames?.itemExtra || $[11] !== ctx.styles?.itemExtra || $[12] !== extra) {
+        t6 = null != extra && /*#__PURE__*/ jsx("span", {
+            "data-tao-menu-item-extra": "",
+            className: cx(ctx.classNames?.itemExtra),
+            style: ctx.styles?.itemExtra,
+            children: extra
+        });
+        $[10] = ctx.classNames?.itemExtra;
+        $[11] = ctx.styles?.itemExtra;
+        $[12] = extra;
+        $[13] = t6;
+    } else t6 = $[13];
+    let t7;
+    if ($[14] !== t1 || $[15] !== t5 || $[16] !== t6) {
+        t7 = /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                t1,
+                t5,
+                t6
+            ]
+        });
+        $[14] = t1;
+        $[15] = t5;
+        $[16] = t6;
+        $[17] = t7;
+    } else t7 = $[17];
+    return t7;
+}
+function renderMenuItems(items, ctx) {
+    const { P } = ctx;
+    return items.map((item, index)=>{
+        if ('type' in item && 'divider' === item.type) return /*#__PURE__*/ jsx(P.Separator, {
+            "data-tao-menu-divider": "",
+            className: cx(ctx.classNames?.divider),
+            style: ctx.styles?.divider
+        }, `divider-${index}`);
+        if ('type' in item && 'group' === item.type) return /*#__PURE__*/ jsxs(P.Group, {
+            "data-tao-menu-group": "",
+            children: [
+                null != item.label && /*#__PURE__*/ jsx(P.Label, {
+                    "data-tao-menu-group-label": "",
+                    className: cx(ctx.classNames?.groupLabel),
+                    style: ctx.styles?.groupLabel,
+                    children: item.label
+                }),
+                renderMenuItems(item.children, ctx)
+            ]
+        }, item.key ?? `group-${index}`);
+        if (item.children && item.children.length > 0) return /*#__PURE__*/ jsxs(P.Sub, {
+            children: [
+                /*#__PURE__*/ jsxs(P.SubTrigger, {
+                    disabled: item.disabled,
+                    "data-tao-menu-item": "",
+                    "data-tao-menu-sub-trigger": "",
+                    "data-tao-danger": item.danger || void 0,
+                    className: cx(ctx.classNames?.item, ctx.classNames?.subTrigger),
+                    style: {
+                        ...ctx.styles?.item,
+                        ...ctx.styles?.subTrigger
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(ItemBody, {
+                            icon: item.icon,
+                            label: item.label,
+                            extra: item.extra,
+                            ctx: ctx
+                        }),
+                        /*#__PURE__*/ jsx(ChevronRightIcon, {})
+                    ]
+                }),
+                /*#__PURE__*/ jsx(P.Portal, {
+                    children: /*#__PURE__*/ jsx(TaoPortalScope, {
+                        children: /*#__PURE__*/ jsx(P.SubContent, {
+                            "data-tao-menu-content": "",
+                            "data-tao-menu-sub-content": "",
+                            className: cx(ctx.classNames?.subContent),
+                            style: ctx.styles?.subContent,
+                            sideOffset: 2,
+                            alignOffset: -4,
+                            children: renderMenuItems(item.children, ctx)
+                        })
+                    })
+                })
+            ]
+        }, item.key);
+        if (ctx.selectable) {
+            if (ctx.multiple) return /*#__PURE__*/ jsxs(P.CheckboxItem, {
+                disabled: item.disabled,
+                checked: ctx.selectedKeys.includes(item.key),
+                onCheckedChange: ()=>{
+                    ctx.onToggle(item.key);
+                    ctx.onAction(item);
+                },
+                "data-tao-menu-item": "",
+                "data-tao-menu-selectable": "",
+                "data-tao-danger": item.danger || void 0,
+                className: cx(ctx.classNames?.item),
+                style: ctx.styles?.item,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-menu-item-indicator": "",
+                        children: /*#__PURE__*/ jsx(P.ItemIndicator, {
+                            children: /*#__PURE__*/ jsx(CheckIcon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ItemBody, {
+                        icon: item.icon,
+                        label: item.label,
+                        extra: item.extra,
+                        ctx: ctx
+                    })
+                ]
+            }, item.key);
+            return /*#__PURE__*/ jsxs(P.RadioItem, {
+                value: item.key,
+                disabled: item.disabled,
+                onSelect: ()=>ctx.onAction(item),
+                "data-tao-menu-item": "",
+                "data-tao-menu-selectable": "",
+                "data-tao-danger": item.danger || void 0,
+                className: cx(ctx.classNames?.item),
+                style: ctx.styles?.item,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        "data-tao-menu-item-indicator": "",
+                        children: /*#__PURE__*/ jsx(P.ItemIndicator, {
+                            children: /*#__PURE__*/ jsx(DotIcon, {})
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ItemBody, {
+                        icon: item.icon,
+                        label: item.label,
+                        extra: item.extra,
+                        ctx: ctx
+                    })
+                ]
+            }, item.key);
+        }
+        return /*#__PURE__*/ jsx(P.Item, {
+            disabled: item.disabled,
+            onSelect: ()=>ctx.onAction(item),
+            "data-tao-menu-item": "",
+            "data-tao-danger": item.danger || void 0,
+            className: cx(ctx.classNames?.item),
+            style: ctx.styles?.item,
+            children: /*#__PURE__*/ jsx(ItemBody, {
+                icon: item.icon,
+                label: item.label,
+                extra: item.extra,
+                ctx: ctx
+            })
+        }, item.key);
+    });
+}
+function useMenuController(menu, P, semantic) {
+    const $ = c(31);
+    const selectable = !!menu.selectable;
+    const multiple = !!menu.multiple;
+    const isSelControlled = null != menu.selectedKeys;
+    let t0;
+    if ($[0] !== menu.defaultSelectedKeys) {
+        t0 = menu.defaultSelectedKeys ?? [];
+        $[0] = menu.defaultSelectedKeys;
+        $[1] = t0;
+    } else t0 = $[1];
+    const [selInternal, setSelInternal] = useState(t0);
+    let t1;
+    if ($[2] !== isSelControlled || $[3] !== menu.selectedKeys || $[4] !== selInternal) {
+        t1 = isSelControlled ? menu.selectedKeys ?? [] : selInternal;
+        $[2] = isSelControlled;
+        $[3] = menu.selectedKeys;
+        $[4] = selInternal;
+        $[5] = t1;
+    } else t1 = $[5];
+    const selectedKeys = t1;
+    let t2;
+    if ($[6] !== isSelControlled || $[7] !== menu) {
+        t2 = (next, changedKey)=>{
+            if (!isSelControlled) setSelInternal(next);
+            menu.onSelect?.({
+                key: changedKey,
+                selectedKeys: next
+            });
+        };
+        $[6] = isSelControlled;
+        $[7] = menu;
+        $[8] = t2;
+    } else t2 = $[8];
+    const commitSel = t2;
+    let t3;
+    if ($[9] !== commitSel || $[10] !== selectedKeys) {
+        t3 = (key)=>{
+            const next_0 = selectedKeys.includes(key) ? selectedKeys.filter((k)=>k !== key) : [
+                ...selectedKeys,
+                key
+            ];
+            commitSel(next_0, key);
+        };
+        $[9] = commitSel;
+        $[10] = selectedKeys;
+        $[11] = t3;
+    } else t3 = $[11];
+    const toggleKey = t3;
+    let t4;
+    if ($[12] !== commitSel) {
+        t4 = (key_0)=>commitSel([
+                key_0
+            ], key_0);
+        $[12] = commitSel;
+        $[13] = t4;
+    } else t4 = $[13];
+    const radioChange = t4;
+    let t5;
+    if ($[14] !== menu) {
+        t5 = (item)=>{
+            item.onClick?.({
+                key: item.key
+            });
+            menu.onClick?.({
+                key: item.key
+            });
+        };
+        $[14] = menu;
+        $[15] = t5;
+    } else t5 = $[15];
+    const onAction = t5;
+    let t6;
+    if ($[16] !== P || $[17] !== menu.items || $[18] !== multiple || $[19] !== onAction || $[20] !== selectable || $[21] !== selectedKeys || $[22] !== semantic.classNames || $[23] !== semantic.styles || $[24] !== toggleKey) {
+        const ctx = {
+            P,
+            classNames: semantic.classNames,
+            styles: semantic.styles,
+            onAction,
+            selectedKeys,
+            multiple,
+            selectable,
+            onToggle: toggleKey
+        };
+        t6 = renderMenuItems(menu.items, ctx);
+        $[16] = P;
+        $[17] = menu.items;
+        $[18] = multiple;
+        $[19] = onAction;
+        $[20] = selectable;
+        $[21] = selectedKeys;
+        $[22] = semantic.classNames;
+        $[23] = semantic.styles;
+        $[24] = toggleKey;
+        $[25] = t6;
+    } else t6 = $[25];
+    const body = t6;
+    if (selectable && !multiple) {
+        let t7;
+        if ($[26] !== P.RadioGroup || $[27] !== body || $[28] !== radioChange || $[29] !== selectedKeys[0]) {
+            t7 = /*#__PURE__*/ jsx(P.RadioGroup, {
+                value: selectedKeys[0],
+                onValueChange: radioChange,
+                children: body
+            });
+            $[26] = P.RadioGroup;
+            $[27] = body;
+            $[28] = radioChange;
+            $[29] = selectedKeys[0];
+            $[30] = t7;
+        } else t7 = $[30];
+        return t7;
+    }
+    return body;
+}
+export { renderMenuItems, useMenuController };