@rockshin/tao-ui 0.0.1 → 0.0.3

package/dist/components/radio/radio.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-radio-wrapper] {

package/dist/components/scroll-area/scroll-area.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-scroll-area] {

package/dist/components/select/mobile-select.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-drawer]:has([data-tao-sheet-list]) [data-tao-drawer-body] {
@@ -813,6 +834,13 @@
   overflow-y: auto;
 }
 
+[data-tao-sheet-group-label] {
+  padding: var(--tao-padding-sm) var(--tao-padding) var(--tao-padding-xxs);
+  font-size: var(--tao-font-size-sm);
+  font-weight: var(--tao-font-weight-medium);
+  color: var(--tao-color-text-tertiary);
+}
+
 [data-tao-sheet-item] {
   min-height: 48px;
   padding-inline: var(--tao-padding);
@@ -838,10 +866,44 @@
   cursor: not-allowed;
 }
 
+[data-tao-sheet-item-icon] {
+  border-radius: var(--tao-radius-md);
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  margin-inline-end: var(--tao-padding-sm);
+  display: inline-flex;
+  overflow: hidden;
+}
+
+[data-tao-sheet-item-icon] > * {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+[data-tao-sheet-item-main] {
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+}
+
 [data-tao-sheet-item-label] {
   text-overflow: ellipsis;
   white-space: nowrap;
-  flex: 1;
+  overflow: hidden;
+}
+
+[data-tao-sheet-item-desc] {
+  font-size: var(--tao-font-size-sm);
+  line-height: var(--tao-line-height-sm);
+  color: var(--tao-color-text-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-block-start: 2px;
   overflow: hidden;
 }
 

package/dist/components/select/mobile-select.d.ts

@@ -9,9 +9,12 @@ interface MobileSelectContentProps {
     showSearch?: boolean;
     filterOption?: (input: string, option: SelectOption) => boolean;
     notFoundContent?: ReactNode;
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
     onClose: () => void;
 }
-export declare function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent, onClose, }: MobileSelectContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent, optionRender, onClose, }: MobileSelectContentProps): import("react/jsx-runtime").JSX.Element;
 export interface MobileSelectDrawerProps extends MobileSelectContentProps {
     open: boolean;
 }

package/dist/components/select/mobile-select.js

@@ -1,126 +1,122 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Drawer } from "../drawer/drawer.js";
 import "./mobile-select.css";
 const defaultFilter = (input, option)=>{
     const label = 'string' == typeof option.label ? option.label : String(option.label);
     return label.toLowerCase().includes(input.toLowerCase());
 };
-function MobileSelectContent(t0) {
-    const $ = c(23);
-    const { options, value, onChange, showSearch, filterOption, notFoundContent: t1, onClose } = t0;
-    const notFoundContent = void 0 === t1 ? "No results" : t1;
-    const [search, setSearch] = useState("");
-    let t2;
-    bb0: {
-        if (!showSearch || !search) {
-            t2 = options;
-            break bb0;
-        }
+function filterTree(options, fn, input) {
+    const result = [];
+    for (const o of options)if (o.options) {
+        const kids = filterTree(o.options, fn, input);
+        if (kids.length) result.push({
+            ...o,
+            options: kids
+        });
+    } else if (fn(input, o)) result.push(o);
+    return result;
+}
+function countLeaves(options) {
+    return options.reduce((n, o)=>n + (o.options ? countLeaves(o.options) : 1), 0);
+}
+function MobileSelectContent({ options, value, onChange, showSearch, filterOption, notFoundContent = 'No results', optionRender, onClose }) {
+    const [search, setSearch] = useState('');
+    const filteredOptions = useMemo(()=>{
+        if (!showSearch || !search) return options;
         const fn = filterOption ?? defaultFilter;
-        let t3;
-        if ($[0] !== fn || $[1] !== options || $[2] !== search) {
-            let t4;
-            if ($[4] !== fn || $[5] !== search) {
-                t4 = (o)=>fn(search, o);
-                $[4] = fn;
-                $[5] = search;
-                $[6] = t4;
-            } else t4 = $[6];
-            t3 = options.filter(t4);
-            $[0] = fn;
-            $[1] = options;
-            $[2] = search;
-            $[3] = t3;
-        } else t3 = $[3];
-        t2 = t3;
-    }
-    const filteredOptions = t2;
-    let t3;
-    if ($[7] !== onChange || $[8] !== onClose) {
-        t3 = (optValue)=>{
-            onChange?.(optValue);
-            onClose();
-        };
-        $[7] = onChange;
-        $[8] = onClose;
-        $[9] = t3;
-    } else t3 = $[9];
-    const handleSelect = t3;
-    let t4;
-    if ($[10] !== search || $[11] !== showSearch) {
-        t4 = showSearch && /*#__PURE__*/ jsxs("div", {
-            "data-tao-sheet-search": "",
+        return filterTree(options, fn, search);
+    }, [
+        options,
+        search,
+        showSearch,
+        filterOption
+    ]);
+    const handleSelect = useCallback((optValue)=>{
+        onChange?.(optValue);
+        onClose();
+    }, [
+        onChange,
+        onClose
+    ]);
+    let optIndex = 0;
+    const renderItem = (opt)=>{
+        const index = optIndex++;
+        const isSelected = opt.value === value;
+        return /*#__PURE__*/ jsxs("div", {
+            "data-tao-sheet-item": "",
+            "data-tao-selected": isSelected || void 0,
+            "data-tao-disabled": opt.disabled || void 0,
+            onClick: ()=>{
+                if (!opt.disabled) handleSelect(opt.value);
+            },
+            "data-tao-has-desc": null != opt.description || void 0,
             children: [
-                /*#__PURE__*/ jsx(SearchIcon, {}),
-                /*#__PURE__*/ jsx("input", {
-                    "data-tao-sheet-search-input": "",
-                    value: search,
-                    onChange: (e)=>setSearch(e.target.value),
-                    placeholder: "Search...",
-                    autoFocus: true
+                optionRender ? optionRender(opt, {
+                    index
+                }) : /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        null != opt.icon && /*#__PURE__*/ jsx("span", {
+                            "data-tao-sheet-item-icon": "",
+                            children: opt.icon
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            "data-tao-sheet-item-main": "",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    "data-tao-sheet-item-label": "",
+                                    children: opt.label
+                                }),
+                                null != opt.description && /*#__PURE__*/ jsx("span", {
+                                    "data-tao-sheet-item-desc": "",
+                                    children: opt.description
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                isSelected && /*#__PURE__*/ jsx("span", {
+                    "data-tao-sheet-item-check": "",
+                    children: /*#__PURE__*/ jsx(CheckIcon, {})
                 })
             ]
-        });
-        $[10] = search;
-        $[11] = showSearch;
-        $[12] = t4;
-    } else t4 = $[12];
-    let t5;
-    if ($[13] !== filteredOptions || $[14] !== handleSelect || $[15] !== notFoundContent || $[16] !== value) {
-        t5 = filteredOptions.length > 0 ? filteredOptions.map((opt)=>{
-            const isSelected = opt.value === value;
-            return /*#__PURE__*/ jsxs("div", {
-                "data-tao-sheet-item": "",
-                "data-tao-selected": isSelected || void 0,
-                "data-tao-disabled": opt.disabled || void 0,
-                onClick: ()=>{
-                    if (!opt.disabled) handleSelect(opt.value);
-                },
+        }, opt.value);
+    };
+    const renderTree = (opts)=>opts.map((o)=>o.options ? /*#__PURE__*/ jsxs("div", {
+                "data-tao-sheet-group": "",
                 children: [
-                    /*#__PURE__*/ jsx("span", {
-                        "data-tao-sheet-item-label": "",
-                        children: opt.label
+                    /*#__PURE__*/ jsx("div", {
+                        "data-tao-sheet-group-label": "",
+                        children: o.label
                     }),
-                    isSelected && /*#__PURE__*/ jsx("span", {
-                        "data-tao-sheet-item-check": "",
-                        children: /*#__PURE__*/ jsx(CheckIcon, {})
+                    o.options.map(renderItem)
+                ]
+            }, o.value) : renderItem(o));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            showSearch && /*#__PURE__*/ jsxs("div", {
+                "data-tao-sheet-search": "",
+                children: [
+                    /*#__PURE__*/ jsx(SearchIcon, {}),
+                    /*#__PURE__*/ jsx("input", {
+                        "data-tao-sheet-search-input": "",
+                        value: search,
+                        onChange: (e)=>setSearch(e.target.value),
+                        placeholder: "Search...",
+                        autoFocus: true
                     })
                 ]
-            }, opt.value);
-        }) : /*#__PURE__*/ jsx("div", {
-            "data-tao-sheet-empty": "",
-            children: notFoundContent
-        });
-        $[13] = filteredOptions;
-        $[14] = handleSelect;
-        $[15] = notFoundContent;
-        $[16] = value;
-        $[17] = t5;
-    } else t5 = $[17];
-    let t6;
-    if ($[18] !== t5) {
-        t6 = /*#__PURE__*/ jsx("div", {
-            "data-tao-sheet-list": "",
-            children: t5
-        });
-        $[18] = t5;
-        $[19] = t6;
-    } else t6 = $[19];
-    let t7;
-    if ($[20] !== t4 || $[21] !== t6) {
-        t7 = /*#__PURE__*/ jsxs(Fragment, {
-            children: [
-                t4,
-                t6
-            ]
-        });
-        $[20] = t4;
-        $[21] = t6;
-        $[22] = t7;
-    } else t7 = $[22];
-    return t7;
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-tao-sheet-list": "",
+                children: countLeaves(filteredOptions) > 0 ? renderTree(filteredOptions) : /*#__PURE__*/ jsx("div", {
+                    "data-tao-sheet-empty": "",
+                    children: notFoundContent
+                })
+            })
+        ]
+    });
 }
 function MobileSelectDrawer(t0) {
     const $ = c(14);