@rockshin/tao-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
+import { type MenuProps, type MenuSemanticPart } from '../menu/menu-render';
+import './context-menu.css';
+export type ContextMenuSemanticPart = MenuSemanticPart;
+export interface ContextMenuProps {
+    menu: MenuProps;
+    /** Element whose right-click (long-press on touch) opens the menu. */
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Merged onto the floating content. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<ContextMenuSemanticPart>;
+    styles?: SemanticStyles<ContextMenuSemanticPart>;
+}
+export declare function ContextMenu({ menu, children, open, onOpenChange, disabled, className, style, classNames, styles, }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { cx } from "../../utils/semantic.js";
+import { useMenuController } from "../menu/menu-render.js";
+import "./context-menu.css";
+import * as __rspack_external__radix_ui_react_context_menu_293d36e3 from "@radix-ui/react-context-menu";
+const CM = {
+    Item: __rspack_external__radix_ui_react_context_menu_293d36e3.Item,
+    CheckboxItem: __rspack_external__radix_ui_react_context_menu_293d36e3.CheckboxItem,
+    RadioGroup: __rspack_external__radix_ui_react_context_menu_293d36e3.RadioGroup,
+    RadioItem: __rspack_external__radix_ui_react_context_menu_293d36e3.RadioItem,
+    Label: __rspack_external__radix_ui_react_context_menu_293d36e3.Label,
+    Separator: __rspack_external__radix_ui_react_context_menu_293d36e3.Separator,
+    Group: __rspack_external__radix_ui_react_context_menu_293d36e3.Group,
+    Sub: __rspack_external__radix_ui_react_context_menu_293d36e3.Sub,
+    SubTrigger: __rspack_external__radix_ui_react_context_menu_293d36e3.SubTrigger,
+    SubContent: __rspack_external__radix_ui_react_context_menu_293d36e3.SubContent,
+    Portal: __rspack_external__radix_ui_react_context_menu_293d36e3.Portal,
+    ItemIndicator: __rspack_external__radix_ui_react_context_menu_293d36e3.ItemIndicator
+};
+function ContextMenu(t0) {
+    const $ = c(22);
+    const { menu, children, open, onOpenChange, disabled, className, style, classNames, styles } = t0;
+    const { size, disabled: ctxDisabled } = useTaoConfig();
+    const resolvedDisabled = disabled ?? ctxDisabled;
+    let t1;
+    if ($[0] !== classNames || $[1] !== styles) {
+        t1 = {
+            classNames,
+            styles
+        };
+        $[0] = classNames;
+        $[1] = styles;
+        $[2] = t1;
+    } else t1 = $[2];
+    const content = useMenuController(menu, CM, t1);
+    let t2;
+    if ($[3] !== children || $[4] !== resolvedDisabled) {
+        t2 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Trigger, {
+            disabled: resolvedDisabled,
+            "data-tao-context-menu-trigger": "",
+            children: children
+        });
+        $[3] = children;
+        $[4] = resolvedDisabled;
+        $[5] = t2;
+    } else t2 = $[5];
+    const t3 = classNames?.content;
+    let t4;
+    if ($[6] !== className || $[7] !== t3) {
+        t4 = cx(t3, className);
+        $[6] = className;
+        $[7] = t3;
+        $[8] = t4;
+    } else t4 = $[8];
+    const t5 = styles?.content;
+    let t6;
+    if ($[9] !== style || $[10] !== t5) {
+        t6 = {
+            ...t5,
+            ...style
+        };
+        $[9] = style;
+        $[10] = t5;
+        $[11] = t6;
+    } else t6 = $[11];
+    let t7;
+    if ($[12] !== content || $[13] !== size || $[14] !== t4 || $[15] !== t6) {
+        t7 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Portal, {
+            children: /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_context_menu_293d36e3.Content, {
+                "data-tao-menu-content": "",
+                "data-tao-context-menu": "",
+                "data-tao-size": size,
+                className: t4,
+                style: t6,
+                children: content
+            })
+        });
+        $[12] = content;
+        $[13] = size;
+        $[14] = t4;
+        $[15] = t6;
+        $[16] = t7;
+    } else t7 = $[16];
+    let t8;
+    if ($[17] !== onOpenChange || $[18] !== open || $[19] !== t2 || $[20] !== t7) {
+        t8 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_context_menu_293d36e3.Root, {
+            open: open,
+            onOpenChange: onOpenChange,
+            children: [
+                t2,
+                t7
+            ]
+        });
+        $[17] = onOpenChange;
+        $[18] = open;
+        $[19] = t2;
+        $[20] = t7;
+        $[21] = t8;
+    } else t8 = $[21];
+    return t8;
+}
+export { ContextMenu };

package/dist/components/date-picker/date-picker.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"]) {
@@ -923,7 +953,6 @@
 button[data-tao-picker-trigger] {
   align-items: center;
   gap: var(--tao-padding-xs);
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   appearance: none;
@@ -1451,7 +1480,6 @@ button[data-tao-picker-footer-btn][data-tao-primary]:hover {
 }
 
 button[data-tao-range-trigger] {
-  width: 100%;
   font-family: var(--tao-font-family);
   cursor: pointer;
   appearance: none;

package/dist/components/drawer/drawer.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,16 +784,31 @@
     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-drawer-overlay] {
   z-index: 999;
   animation: tao-fade-in var(--tao-motion-duration-mid) ease-out;
-  background: oklch(0% 0 0 / .4);
+  background: oklch(0% 0 0 / .1);
   position: fixed;
   inset: 0;
 }
 
+@supports (backdrop-filter: blur(4px)) {
+  [data-tao-drawer-overlay] {
+    backdrop-filter: blur(4px);
+  }
+}
+
+[data-tao-drawer][data-state="closed"], [data-tao-drawer-overlay][data-state="closed"] {
+  display: none;
+}
+
 @keyframes tao-fade-in {
   0% {
     opacity: 0;
@@ -894,6 +922,18 @@
   line-height: 1.4;
 }
 
+[data-tao-drawer-actions] {
+  align-items: center;
+  gap: var(--tao-padding-xs);
+  margin-inline-start: auto;
+  display: flex;
+}
+
+[data-tao-drawer-extra] {
+  align-items: center;
+  display: flex;
+}
+
 button[data-tao-drawer-close] {
   border-radius: var(--tao-radius-sm);
   width: 32px;
@@ -928,6 +968,76 @@ button[data-tao-drawer-close]:focus-visible {
   overflow-y: auto;
 }
 
+[data-tao-drawer-dragger] {
+  z-index: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  transition: background-color var(--tao-motion-duration-fast) ease-out;
+  background-color: #0000;
+  position: absolute;
+}
+
+[data-tao-drawer-dragger]:hover {
+  background-color: var(--tao-color-primary);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-drawer-dragger]:hover {
+    background-color: color-mix(in oklch, var(--tao-color-primary) 20%, transparent);
+  }
+}
+
+[data-tao-drawer-dragger]:active {
+  background-color: var(--tao-color-primary);
+}
+
+@supports (color: color-mix(in lab, red, red)) {
+  [data-tao-drawer-dragger]:active {
+    background-color: color-mix(in oklch, var(--tao-color-primary) 30%, transparent);
+  }
+}
+
+[data-tao-drawer-dragger][data-tao-placement="right"], [data-tao-drawer-dragger][data-tao-placement="left"] {
+  cursor: col-resize;
+  width: 4px;
+  top: 0;
+  bottom: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="right"] {
+  left: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="left"] {
+  right: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="bottom"], [data-tao-drawer-dragger][data-tao-placement="top"] {
+  cursor: row-resize;
+  height: 4px;
+  left: 0;
+  right: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="bottom"] {
+  top: 0;
+}
+
+[data-tao-drawer-dragger][data-tao-placement="top"] {
+  bottom: 0;
+}
+
+[data-tao-drawer-footer] {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--tao-padding-xs);
+  padding: var(--tao-padding) var(--tao-padding-lg);
+  border-block-start: var(--tao-line-width) solid var(--tao-color-border-secondary);
+  flex-shrink: 0;
+  display: flex;
+}
+
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false

package/dist/components/drawer/drawer.d.ts

@@ -1,17 +1,50 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './drawer.css';
 export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
-export type DrawerSemanticPart = 'root' | 'header' | 'title' | 'body' | 'overlay';
+export type DrawerSize = 'default' | 'large';
+export type DrawerSemanticPart = 'root' | 'overlay' | 'header' | 'title' | 'extra' | 'body' | 'footer' | 'close' | 'dragger';
+export interface DrawerResizableConfig {
+    onResize?: (size: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+}
 export interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     title?: ReactNode;
+    /** Extra content rendered on the trailing side of the header. */
+    extra?: ReactNode;
+    /** Footer content; renders a bordered footer area when provided. */
+    footer?: ReactNode;
     placement?: DrawerPlacement;
+    /** Preset drawer size: `default` (378) / `large` (736). `width`/`height` override it. */
+    size?: DrawerSize;
     width?: number | string;
     height?: number | string;
+    /** Show the close (×) button. Defaults to true. */
+    closable?: boolean;
+    /** Custom close icon. */
+    closeIcon?: ReactNode;
+    /** Close when clicking the mask. Defaults to true. */
+    maskClosable?: boolean;
+    /** Render the mask/overlay. Defaults to true. */
+    mask?: boolean;
+    /** Close on Esc key. Defaults to true. */
+    keyboard?: boolean;
+    /** Allow resizing by dragging the inner edge. Pass an object for resize callbacks. */
+    resizable?: boolean | DrawerResizableConfig;
+    /** Called after open transitions in either direction. */
+    afterOpenChange?: (open: boolean) => void;
+    /** Called after the drawer has fully closed. */
+    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<DrawerSemanticPart>;
     styles?: SemanticStyles<DrawerSemanticPart>;
 }
-export declare function Drawer({ open, onClose, title, placement, width, height, children, classNames, styles: stylesProp, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ open, onClose, title, extra, footer, placement, size, width, height, closable, closeIcon, maskClosable, mask, keyboard, resizable, afterOpenChange, afterClose, destroyOnHidden, children, classNames, styles: stylesProp, }: DrawerProps): import("react/jsx-runtime").JSX.Element;