@rockshin/tao-ui 0.0.1 → 0.0.2

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type TaoSize } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import { type ButtonProps } from '../button/button';
+import { type MenuProps, type MenuSemanticPart } from '../menu/menu-render';
+import './dropdown.css';
+export type DropdownSemanticPart = MenuSemanticPart;
+export type { MenuDividerType, MenuGroupType, MenuItem, MenuItemType, MenuProps, } from '../menu/menu-render';
+export type DropdownPlacement = 'bottom' | 'bottomLeft' | 'bottomRight' | 'top' | 'topLeft' | 'topRight';
+export type DropdownTrigger = 'click' | 'hover' | 'contextMenu';
+export interface DropdownProps {
+    menu: MenuProps;
+    /** Trigger element (a single React element). */
+    children: ReactNode;
+    /** How the menu opens. Defaults to `['click']`. */
+    trigger?: DropdownTrigger[];
+    /** Defaults to `'bottomLeft'`. Ignored for `contextMenu`. */
+    placement?: DropdownPlacement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Show a pointing arrow on the menu. Defaults to `false`. */
+    arrow?: boolean;
+    /** Merged onto the floating content. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<DropdownSemanticPart>;
+    styles?: SemanticStyles<DropdownSemanticPart>;
+}
+export interface DropdownButtonProps extends Omit<DropdownProps, 'children'> {
+    /** Main button content. */
+    children?: ReactNode;
+    /** Main button click handler. */
+    onClick?: () => void;
+    /** Icon for the trigger button. Defaults to an ellipsis. */
+    icon?: ReactNode;
+    variant?: ButtonProps['variant'];
+    size?: TaoSize;
+}
+export declare function Dropdown(props: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dropdown {
+    var Button: typeof DropdownButton;
+}
+declare function DropdownButton({ children, onClick, icon, variant, size, menu, ...dropdownRest }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,381 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { isValidElement, useRef, useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { Button } from "../button/button.js";
+import { ContextMenu } from "../context-menu/context-menu.js";
+import { useMenuController } from "../menu/menu-render.js";
+import "./dropdown.css";
+import * as __rspack_external__radix_ui_react_dropdown_menu_dbc6754d from "@radix-ui/react-dropdown-menu";
+const DD = {
+    Item: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Item,
+    CheckboxItem: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.CheckboxItem,
+    RadioGroup: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.RadioGroup,
+    RadioItem: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.RadioItem,
+    Label: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Label,
+    Separator: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Separator,
+    Group: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Group,
+    Sub: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Sub,
+    SubTrigger: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.SubTrigger,
+    SubContent: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.SubContent,
+    Portal: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Portal,
+    ItemIndicator: __rspack_external__radix_ui_react_dropdown_menu_dbc6754d.ItemIndicator
+};
+function parsePlacement(p) {
+    const side = p.startsWith('top') ? 'top' : 'bottom';
+    const align = p.endsWith('Left') ? 'start' : p.endsWith('Right') ? 'end' : 'center';
+    return {
+        side,
+        align
+    };
+}
+function EllipsisIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            "aria-hidden": true,
+            children: [
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "5",
+                    cy: "12",
+                    r: "1.6"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "12",
+                    cy: "12",
+                    r: "1.6"
+                }),
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "19",
+                    cy: "12",
+                    r: "1.6"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function Dropdown(props) {
+    const $ = c(61);
+    const { menu, children, trigger: t0, placement: t1, open, defaultOpen, onOpenChange, disabled, arrow: t2, className, style, classNames, styles } = props;
+    let t3;
+    if ($[0] !== t0) {
+        t3 = void 0 === t0 ? [
+            "click"
+        ] : t0;
+        $[0] = t0;
+        $[1] = t3;
+    } else t3 = $[1];
+    const trigger = t3;
+    const placement = void 0 === t1 ? "bottomLeft" : t1;
+    const arrow = void 0 === t2 ? false : t2;
+    const { size, disabled: ctxDisabled } = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctxDisabled;
+    let t4;
+    if ($[2] !== trigger) {
+        t4 = trigger.includes("contextMenu");
+        $[2] = trigger;
+        $[3] = t4;
+    } else t4 = $[3];
+    const isContext = t4;
+    let t5;
+    if ($[4] !== isContext || $[5] !== trigger) {
+        t5 = !isContext && trigger.includes("hover");
+        $[4] = isContext;
+        $[5] = trigger;
+        $[6] = t5;
+    } else t5 = $[6];
+    const hoverMode = t5;
+    const isOpenControlled = null != open;
+    const [openInternal, setOpenInternal] = useState(defaultOpen ?? false);
+    const realOpen = isOpenControlled ? open : openInternal;
+    let t6;
+    if ($[7] !== isOpenControlled || $[8] !== onOpenChange) {
+        t6 = (next)=>{
+            if (!isOpenControlled) setOpenInternal(next);
+            onOpenChange?.(next);
+        };
+        $[7] = isOpenControlled;
+        $[8] = onOpenChange;
+        $[9] = t6;
+    } else t6 = $[9];
+    const setOpen = t6;
+    const closeTimer = useRef(void 0);
+    let t7;
+    if ($[10] !== setOpen) {
+        t7 = ()=>{
+            clearTimeout(closeTimer.current);
+            setOpen(true);
+        };
+        $[10] = setOpen;
+        $[11] = t7;
+    } else t7 = $[11];
+    const openOnHover = t7;
+    let t8;
+    if ($[12] !== setOpen) {
+        t8 = ()=>{
+            closeTimer.current = setTimeout(()=>setOpen(false), 120);
+        };
+        $[12] = setOpen;
+        $[13] = t8;
+    } else t8 = $[13];
+    const closeOnHover = t8;
+    let t9;
+    if ($[14] !== classNames || $[15] !== styles) {
+        t9 = {
+            classNames,
+            styles
+        };
+        $[14] = classNames;
+        $[15] = styles;
+        $[16] = t9;
+    } else t9 = $[16];
+    const content = useMenuController(menu, DD, t9);
+    let t10;
+    if ($[17] !== children) {
+        t10 = /*#__PURE__*/ isValidElement(children) ? children : /*#__PURE__*/ jsx("span", {
+            children: children
+        });
+        $[17] = children;
+        $[18] = t10;
+    } else t10 = $[18];
+    const triggerChild = t10;
+    if (isContext) {
+        let t11;
+        if ($[19] !== children || $[20] !== className || $[21] !== classNames || $[22] !== disabled || $[23] !== menu || $[24] !== onOpenChange || $[25] !== open || $[26] !== style || $[27] !== styles) {
+            t11 = /*#__PURE__*/ jsx(ContextMenu, {
+                menu: menu,
+                open: open,
+                onOpenChange: onOpenChange,
+                disabled: disabled,
+                className: className,
+                style: style,
+                classNames: classNames,
+                styles: styles,
+                children: children
+            });
+            $[19] = children;
+            $[20] = className;
+            $[21] = classNames;
+            $[22] = disabled;
+            $[23] = menu;
+            $[24] = onOpenChange;
+            $[25] = open;
+            $[26] = style;
+            $[27] = styles;
+            $[28] = t11;
+        } else t11 = $[28];
+        return t11;
+    }
+    let t11;
+    if ($[29] !== placement) {
+        t11 = parsePlacement(placement);
+        $[29] = placement;
+        $[30] = t11;
+    } else t11 = $[30];
+    const { side, align } = t11;
+    let t12;
+    if ($[31] !== closeOnHover || $[32] !== hoverMode || $[33] !== openOnHover) {
+        t12 = hoverMode ? {
+            onPointerEnter: openOnHover,
+            onPointerLeave: closeOnHover
+        } : void 0;
+        $[31] = closeOnHover;
+        $[32] = hoverMode;
+        $[33] = openOnHover;
+        $[34] = t12;
+    } else t12 = $[34];
+    const hoverProps = t12;
+    let t13;
+    if ($[35] !== hoverProps || $[36] !== resolvedDisabled || $[37] !== triggerChild) {
+        t13 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Trigger, {
+            asChild: true,
+            disabled: resolvedDisabled,
+            "data-tao-dropdown-trigger": "",
+            ...hoverProps,
+            children: triggerChild
+        });
+        $[35] = hoverProps;
+        $[36] = resolvedDisabled;
+        $[37] = triggerChild;
+        $[38] = t13;
+    } else t13 = $[38];
+    const t14 = classNames?.content;
+    let t15;
+    if ($[39] !== className || $[40] !== t14) {
+        t15 = cx(t14, className);
+        $[39] = className;
+        $[40] = t14;
+        $[41] = t15;
+    } else t15 = $[41];
+    const t16 = styles?.content;
+    let t17;
+    if ($[42] !== style || $[43] !== t16) {
+        t17 = {
+            ...t16,
+            ...style
+        };
+        $[42] = style;
+        $[43] = t16;
+        $[44] = t17;
+    } else t17 = $[44];
+    let t18;
+    if ($[45] !== arrow) {
+        t18 = arrow && /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Arrow, {
+            "data-tao-dropdown-arrow": "",
+            width: 12,
+            height: 6
+        });
+        $[45] = arrow;
+        $[46] = t18;
+    } else t18 = $[46];
+    let t19;
+    if ($[47] !== align || $[48] !== content || $[49] !== hoverProps || $[50] !== side || $[51] !== size || $[52] !== t15 || $[53] !== t17 || $[54] !== t18) {
+        t19 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Portal, {
+            children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Content, {
+                "data-tao-menu-content": "",
+                "data-tao-dropdown": "",
+                "data-tao-size": size,
+                className: t15,
+                style: t17,
+                side: side,
+                align: align,
+                sideOffset: 4,
+                ...hoverProps,
+                children: [
+                    t18,
+                    content
+                ]
+            })
+        });
+        $[47] = align;
+        $[48] = content;
+        $[49] = hoverProps;
+        $[50] = side;
+        $[51] = size;
+        $[52] = t15;
+        $[53] = t17;
+        $[54] = t18;
+        $[55] = t19;
+    } else t19 = $[55];
+    let t20;
+    if ($[56] !== realOpen || $[57] !== setOpen || $[58] !== t13 || $[59] !== t19) {
+        t20 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_dropdown_menu_dbc6754d.Root, {
+            open: realOpen,
+            onOpenChange: setOpen,
+            modal: false,
+            children: [
+                t13,
+                t19
+            ]
+        });
+        $[56] = realOpen;
+        $[57] = setOpen;
+        $[58] = t13;
+        $[59] = t19;
+        $[60] = t20;
+    } else t20 = $[60];
+    return t20;
+}
+function DropdownButton(t0) {
+    const $ = c(26);
+    let children;
+    let dropdownRest;
+    let icon;
+    let menu;
+    let onClick;
+    let size;
+    let t1;
+    if ($[0] !== t0) {
+        ({ children, onClick, icon, variant: t1, size, menu, ...dropdownRest } = t0);
+        $[0] = t0;
+        $[1] = children;
+        $[2] = dropdownRest;
+        $[3] = icon;
+        $[4] = menu;
+        $[5] = onClick;
+        $[6] = size;
+        $[7] = t1;
+    } else {
+        children = $[1];
+        dropdownRest = $[2];
+        icon = $[3];
+        menu = $[4];
+        onClick = $[5];
+        size = $[6];
+        t1 = $[7];
+    }
+    const variant = void 0 === t1 ? "secondary" : t1;
+    const { size: ctxSize } = useTaoConfig();
+    const resolvedSize = size ?? ctxSize;
+    let t2;
+    if ($[8] !== children || $[9] !== onClick || $[10] !== resolvedSize || $[11] !== variant) {
+        t2 = /*#__PURE__*/ jsx(Button, {
+            variant: variant,
+            size: resolvedSize,
+            onClick: onClick,
+            "data-tao-dropdown-button-main": "",
+            children: children
+        });
+        $[8] = children;
+        $[9] = onClick;
+        $[10] = resolvedSize;
+        $[11] = variant;
+        $[12] = t2;
+    } else t2 = $[12];
+    let t3;
+    if ($[13] !== icon) {
+        t3 = icon ?? /*#__PURE__*/ jsx(EllipsisIcon, {});
+        $[13] = icon;
+        $[14] = t3;
+    } else t3 = $[14];
+    let t4;
+    if ($[15] !== resolvedSize || $[16] !== t3 || $[17] !== variant) {
+        t4 = /*#__PURE__*/ jsx(Button, {
+            variant: variant,
+            size: resolvedSize,
+            "aria-label": "More",
+            "data-tao-dropdown-button-trigger": "",
+            children: t3
+        });
+        $[15] = resolvedSize;
+        $[16] = t3;
+        $[17] = variant;
+        $[18] = t4;
+    } else t4 = $[18];
+    let t5;
+    if ($[19] !== dropdownRest || $[20] !== menu || $[21] !== t4) {
+        t5 = /*#__PURE__*/ jsx(Dropdown, {
+            menu: menu,
+            ...dropdownRest,
+            children: t4
+        });
+        $[19] = dropdownRest;
+        $[20] = menu;
+        $[21] = t4;
+        $[22] = t5;
+    } else t5 = $[22];
+    let t6;
+    if ($[23] !== t2 || $[24] !== t5) {
+        t6 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-dropdown-button-group": "",
+            children: [
+                t2,
+                t5
+            ]
+        });
+        $[23] = t2;
+        $[24] = t5;
+        $[25] = t6;
+    } else t6 = $[25];
+    return t6;
+}
+Dropdown.Button = DropdownButton;
+export { Dropdown };

package/dist/components/form-field/form.css

@@ -307,6 +307,8 @@
     --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;
@@ -529,8 +531,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 +543,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 +626,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -715,6 +712,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -727,6 +728,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 +747,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 +784,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-form-field] {

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,6 +349,8 @@
     --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;
@@ -572,8 +573,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 +585,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 +668,10 @@
     visibility: collapse;
   }
 
+  .visible {
+    visibility: visible;
+  }
+
   .absolute {
     position: absolute;
   }
@@ -758,6 +754,10 @@
     display: inline;
   }
 
+  .inline-flex {
+    display: inline-flex;
+  }
+
   .table {
     display: table;
   }
@@ -770,6 +770,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 +789,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 +826,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 +851,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"]) {