@rockshin/tao-ui 0.0.2 → 0.0.3

package/dist/components/pagination/pagination.css

@@ -314,6 +314,9 @@
     --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);
   }

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)=>{

package/dist/components/radio/radio.css

@@ -314,6 +314,9 @@
     --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);
   }

package/dist/components/scroll-area/scroll-area.css

@@ -314,6 +314,9 @@
     --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);
   }

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

@@ -314,6 +314,9 @@
     --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);
   }
@@ -831,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);

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,140 +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);
-                },
-                "data-tao-has-desc": null != opt.description || void 0,
+        }, opt.value);
+    };
+    const renderTree = (opts)=>opts.map((o)=>o.options ? /*#__PURE__*/ jsxs("div", {
+                "data-tao-sheet-group": "",
                 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
-                            })
-                        ]
+                    /*#__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);

package/dist/components/select/select.css

@@ -356,6 +356,9 @@
     --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);
   }
@@ -878,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);
@@ -922,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);
@@ -998,15 +1040,6 @@ button[data-tao-select] {
   border-radius: var(--tao-radius-md);
 }
 
-[data-tao-select] > span:first-of-type {
-  text-align: start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-
 [data-tao-select-prefix] {
   color: var(--tao-color-text-tertiary);
   flex-shrink: 0;
@@ -1058,6 +1091,10 @@ button[data-tao-select] {
   transform: rotate(180deg);
 }
 
+[data-tao-select][data-state="open"] [data-tao-select-icon][data-tao-custom-suffix], [data-tao-select][data-state="open"] [data-tao-select-icon][data-tao-select-loading-slot] {
+  transform: none;
+}
+
 [data-tao-select-clear] {
   color: var(--tao-color-text-quaternary);
   cursor: pointer;
@@ -1069,7 +1106,7 @@ button[data-tao-select] {
 }
 
 [data-tao-select-loading] {
-  color: var(--tao-color-text-quaternary);
+  color: var(--tao-color-text-tertiary);
   animation: .8s linear infinite tao-spin;
 }
 
@@ -1092,7 +1129,7 @@ button[data-tao-select] {
   border: var(--tao-line-width) solid var(--tao-color-border);
   border-radius: var(--tao-radius-lg);
   box-shadow: var(--tao-box-shadow-secondary);
-  z-index: 1000;
+  z-index: var(--tao-z-index-popup);
   min-width: var(--radix-select-trigger-width);
   animation-duration: var(--tao-motion-duration-fast);
   animation-timing-function: var(--tao-motion-ease-out-quint);
@@ -1103,6 +1140,10 @@ button[data-tao-select] {
   animation-name: tao-select-in;
 }
 
+[data-tao-select-content][data-tao-popup-width="content"] {
+  min-width: max-content;
+}
+
 @keyframes tao-select-in {
   0% {
     opacity: 0;
@@ -1144,6 +1185,19 @@ button[data-tao-select] {
   max-height: 256px;
 }
 
+[data-tao-select-group]:not(:first-child) {
+  margin-block-start: var(--tao-padding-xxs);
+}
+
+[data-tao-select-group-label] {
+  padding: var(--tao-padding-xs) var(--tao-padding-sm) var(--tao-padding-xxs);
+  font-size: var(--tao-font-size-xs);
+  font-weight: var(--tao-font-weight-medium);
+  color: var(--tao-color-text-tertiary);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
 [data-tao-select-item] {
   min-height: var(--tao-control-height);
   padding-inline: var(--tao-padding-sm);

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

@@ -1,5 +1,6 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import { type SemanticClassNames, type SemanticStyles } from '../../utils/semantic';
 import './select.css';
 export interface SelectOption {
     label: ReactNode;
@@ -9,28 +10,81 @@ export interface SelectOption {
     icon?: ReactNode;
     /** Secondary description line shown under the label in the option row. */
     description?: ReactNode;
+    /** Nested options turn this entry into a group; `label` becomes the group title. */
+    options?: SelectOption[];
 }
+export type SelectSemanticPart = 'root' | 'prefix' | 'suffix' | 'placeholder' | 'clear' | 'popup' | 'search' | 'group' | 'groupLabel' | 'item' | 'itemIcon' | 'itemLabel' | 'itemDesc' | 'empty';
+export type SelectPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 export interface SelectProps {
     options: SelectOption[];
     value?: string;
-    onChange?: (value: string) => void;
+    defaultValue?: string;
+    /** Fired on selection or clear. `option` is undefined when cleared. */
+    onChange?: (value: string, option?: SelectOption) => void;
+    /** Fired only when an option is picked (not on clear). */
+    onSelect?: (value: string, option: SelectOption) => void;
+    /** Fired when the value is cleared via the clear button. */
+    onClear?: () => void;
     placeholder?: string;
     size?: TaoSize;
     variant?: TaoVariant;
     disabled?: boolean;
+    /** Validation status. */
+    status?: 'error' | 'warning';
     /** Show search input in dropdown */
     showSearch?: boolean;
     /** Custom filter function, default matches label string */
     filterOption?: (input: string, option: SelectOption) => boolean;
-    /** Allow clearing the value */
-    allowClear?: boolean;
+    /** Controlled search text. */
+    searchValue?: string;
+    /** Fired when the search text changes. */
+    onSearch?: (value: string) => void;
+    /** Allow clearing the value; pass an object to customize the clear icon. */
+    allowClear?: boolean | {
+        clearIcon?: ReactNode;
+    };
     /** Show loading spinner */
     loading?: boolean;
+    /** Custom loading icon. */
+    loadingIcon?: ReactNode;
     /** Content when no options match */
     notFoundContent?: ReactNode;
     /** Prefix icon/element */
     prefix?: ReactNode;
+    /** Custom suffix (arrow) icon. */
+    suffixIcon?: ReactNode;
+    autoFocus?: boolean;
+    id?: string;
+    /** Name for hidden form field. */
+    name?: string;
+    /** Controlled open state of the dropdown. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Dropdown position. Defaults to `bottomLeft`. */
+    placement?: SelectPlacement;
+    /** Match popup width to trigger (true), a fixed px width (number), or fit content (false). */
+    popupMatchSelectWidth?: boolean | number;
+    /** Max height of the option list. Defaults to 256. */
+    listHeight?: number;
+    /** Parent node the popup renders into. Defaults to body. */
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+    /** Customize the rendering of each dropdown option. */
+    optionRender?: (option: SelectOption, info: {
+        index: number;
+    }) => ReactNode;
+    /** Customize the selected label shown in the trigger. */
+    labelRender?: (option: SelectOption) => ReactNode;
+    /** Wrap/customize the dropdown content. */
+    popupRender?: (menu: ReactNode) => ReactNode;
     /** Force mobile mode (bottom sheet) regardless of screen size */
     mobile?: boolean;
+    /** Merged onto the trigger root; use to override width etc. */
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SemanticClassNames<SelectSemanticPart>;
+    styles?: SemanticStyles<SelectSemanticPart>;
 }
 export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
+/** Double chevron (↕) for a switcher-style trigger. Pass to `suffixIcon`. */
+export declare function ChevronsUpDownIcon(): import("react/jsx-runtime").JSX.Element;