@rockshin/tao-ui 0.0.1

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+import { type TaoSize, type TaoVariant } from '../../provider/tao-provider';
+import './select.css';
+export interface SelectOption {
+    label: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    size?: TaoSize;
+    variant?: TaoVariant;
+    disabled?: boolean;
+    /** 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;
+    /** Show loading spinner */
+    loading?: boolean;
+    /** Content when no options match */
+    notFoundContent?: ReactNode;
+    /** Prefix icon/element */
+    prefix?: ReactNode;
+    /** Force mobile mode (bottom sheet) regardless of screen size */
+    mobile?: boolean;
+}
+export declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/select/select.js

@@ -0,0 +1,532 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { useTaoConfig } from "../../provider/tao-provider.js";
+import { MobileSelectDrawer } from "./mobile-select.js";
+import "./select.css";
+import { useIsMobile } from "./use-is-mobile.js";
+import * as __rspack_external__radix_ui_react_select_36a82244 from "@radix-ui/react-select";
+const defaultFilter = (input, option)=>{
+    const label = 'string' == typeof option.label ? option.label : String(option.label);
+    return label.toLowerCase().includes(input.toLowerCase());
+};
+function Select(props) {
+    const $ = c(95);
+    const { options, value, onChange, placeholder, size, variant, disabled, showSearch, filterOption, allowClear, loading, notFoundContent: t0, prefix, mobile } = props;
+    const notFoundContent = void 0 === t0 ? "No results" : t0;
+    const ctx = useTaoConfig();
+    const resolvedSize = size ?? ctx.size;
+    const resolvedVariant = variant ?? ctx.variant;
+    const resolvedDisabled = disabled ?? ctx.disabled;
+    const autoMobile = useIsMobile();
+    const isMobile = mobile ?? autoMobile;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const [hovering, setHovering] = useState(false);
+    let t1;
+    bb0: {
+        if (!showSearch || !search) {
+            t1 = options;
+            break bb0;
+        }
+        const fn = filterOption ?? defaultFilter;
+        let t2;
+        if ($[0] !== fn || $[1] !== options || $[2] !== search) {
+            let t3;
+            if ($[4] !== fn || $[5] !== search) {
+                t3 = (o)=>fn(search, o);
+                $[4] = fn;
+                $[5] = search;
+                $[6] = t3;
+            } else t3 = $[6];
+            t2 = options.filter(t3);
+            $[0] = fn;
+            $[1] = options;
+            $[2] = search;
+            $[3] = t2;
+        } else t2 = $[3];
+        t1 = t2;
+    }
+    const filteredOptions = t1;
+    let t2;
+    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = (nextOpen)=>{
+            setOpen(nextOpen);
+            if (!nextOpen) setSearch("");
+        };
+        $[7] = t2;
+    } else t2 = $[7];
+    const handleOpenChange = t2;
+    let t3;
+    if ($[8] !== onChange) {
+        t3 = (e)=>{
+            e.stopPropagation();
+            onChange?.("");
+        };
+        $[8] = onChange;
+        $[9] = t3;
+    } else t3 = $[9];
+    const handleClear = t3;
+    const showClearBtn = allowClear && value && !resolvedDisabled;
+    let t4;
+    if ($[10] !== options || $[11] !== value) {
+        let t5;
+        if ($[13] !== value) {
+            t5 = (o_0)=>o_0.value === value;
+            $[13] = value;
+            $[14] = t5;
+        } else t5 = $[14];
+        t4 = options.find(t5);
+        $[10] = options;
+        $[11] = value;
+        $[12] = t4;
+    } else t4 = $[12];
+    const selectedOption = t4;
+    if (isMobile) {
+        const t5 = resolvedDisabled || void 0;
+        let t6;
+        let t7;
+        let t8;
+        if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+            t6 = ()=>setOpen(true);
+            t7 = ()=>setHovering(true);
+            t8 = ()=>setHovering(false);
+            $[15] = t6;
+            $[16] = t7;
+            $[17] = t8;
+        } else {
+            t6 = $[15];
+            t7 = $[16];
+            t8 = $[17];
+        }
+        let t9;
+        if ($[18] !== prefix) {
+            t9 = null != prefix && /*#__PURE__*/ jsx("span", {
+                "data-tao-select-prefix": "",
+                children: prefix
+            });
+            $[18] = prefix;
+            $[19] = t9;
+        } else t9 = $[19];
+        let t10;
+        if ($[20] !== placeholder || $[21] !== selectedOption) {
+            t10 = selectedOption ? selectedOption.label : /*#__PURE__*/ jsx("span", {
+                "data-tao-select-placeholder": "",
+                children: placeholder
+            });
+            $[20] = placeholder;
+            $[21] = selectedOption;
+            $[22] = t10;
+        } else t10 = $[22];
+        let t11;
+        if ($[23] !== t10) {
+            t11 = /*#__PURE__*/ jsx("span", {
+                "data-tao-select-value": "",
+                children: t10
+            });
+            $[23] = t10;
+            $[24] = t11;
+        } else t11 = $[24];
+        let t12;
+        if ($[25] !== loading) {
+            t12 = loading && /*#__PURE__*/ jsx(LoadingIcon, {});
+            $[25] = loading;
+            $[26] = t12;
+        } else t12 = $[26];
+        let t13;
+        if ($[27] !== handleClear || $[28] !== hovering || $[29] !== showClearBtn) {
+            t13 = showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
+                "data-tao-select-clear": "",
+                onClick: handleClear,
+                role: "button",
+                "aria-label": "Clear",
+                children: /*#__PURE__*/ jsx(CloseIcon, {})
+            }) : /*#__PURE__*/ jsx("span", {
+                "data-tao-select-icon": "",
+                children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+            });
+            $[27] = handleClear;
+            $[28] = hovering;
+            $[29] = showClearBtn;
+            $[30] = t13;
+        } else t13 = $[30];
+        let t14;
+        if ($[31] !== t12 || $[32] !== t13) {
+            t14 = /*#__PURE__*/ jsxs("span", {
+                "data-tao-select-icons": "",
+                children: [
+                    t12,
+                    t13
+                ]
+            });
+            $[31] = t12;
+            $[32] = t13;
+            $[33] = t14;
+        } else t14 = $[33];
+        let t15;
+        if ($[34] !== resolvedDisabled || $[35] !== resolvedSize || $[36] !== resolvedVariant || $[37] !== t11 || $[38] !== t14 || $[39] !== t5 || $[40] !== t9) {
+            t15 = /*#__PURE__*/ jsxs("button", {
+                type: "button",
+                "data-tao-control": "",
+                "data-tao-select": "",
+                "data-tao-size": resolvedSize,
+                "data-tao-variant": resolvedVariant,
+                "data-tao-disabled": t5,
+                disabled: resolvedDisabled,
+                onClick: t6,
+                onMouseEnter: t7,
+                onMouseLeave: t8,
+                children: [
+                    t9,
+                    t11,
+                    t14
+                ]
+            });
+            $[34] = resolvedDisabled;
+            $[35] = resolvedSize;
+            $[36] = resolvedVariant;
+            $[37] = t11;
+            $[38] = t14;
+            $[39] = t5;
+            $[40] = t9;
+            $[41] = t15;
+        } else t15 = $[41];
+        let t16;
+        if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+            t16 = ()=>handleOpenChange(false);
+            $[42] = t16;
+        } else t16 = $[42];
+        let t17;
+        if ($[43] !== filterOption || $[44] !== notFoundContent || $[45] !== onChange || $[46] !== open || $[47] !== options || $[48] !== placeholder || $[49] !== showSearch || $[50] !== value) {
+            t17 = /*#__PURE__*/ jsx(MobileSelectDrawer, {
+                open: open,
+                onClose: t16,
+                options: options,
+                value: value,
+                onChange: onChange,
+                placeholder: placeholder,
+                showSearch: showSearch,
+                filterOption: filterOption,
+                notFoundContent: notFoundContent
+            });
+            $[43] = filterOption;
+            $[44] = notFoundContent;
+            $[45] = onChange;
+            $[46] = open;
+            $[47] = options;
+            $[48] = placeholder;
+            $[49] = showSearch;
+            $[50] = value;
+            $[51] = t17;
+        } else t17 = $[51];
+        let t18;
+        if ($[52] !== t15 || $[53] !== t17) {
+            t18 = /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    t15,
+                    t17
+                ]
+            });
+            $[52] = t15;
+            $[53] = t17;
+            $[54] = t18;
+        } else t18 = $[54];
+        return t18;
+    }
+    const t5 = resolvedDisabled || void 0;
+    let t6;
+    let t7;
+    if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = ()=>setHovering(true);
+        t7 = ()=>setHovering(false);
+        $[55] = t6;
+        $[56] = t7;
+    } else {
+        t6 = $[55];
+        t7 = $[56];
+    }
+    let t8;
+    if ($[57] !== prefix) {
+        t8 = null != prefix && /*#__PURE__*/ jsx("span", {
+            "data-tao-select-prefix": "",
+            children: prefix
+        });
+        $[57] = prefix;
+        $[58] = t8;
+    } else t8 = $[58];
+    let t9;
+    if ($[59] !== placeholder) {
+        t9 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Value, {
+            placeholder: placeholder
+        });
+        $[59] = placeholder;
+        $[60] = t9;
+    } else t9 = $[60];
+    let t10;
+    if ($[61] !== loading) {
+        t10 = loading && /*#__PURE__*/ jsx(LoadingIcon, {});
+        $[61] = loading;
+        $[62] = t10;
+    } else t10 = $[62];
+    let t11;
+    if ($[63] !== handleClear || $[64] !== hovering || $[65] !== showClearBtn) {
+        t11 = showClearBtn && hovering ? /*#__PURE__*/ jsx("span", {
+            "data-tao-select-clear": "",
+            onClick: handleClear,
+            role: "button",
+            "aria-label": "Clear",
+            children: /*#__PURE__*/ jsx(CloseIcon, {})
+        }) : /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Icon, {
+            "data-tao-select-icon": "",
+            children: /*#__PURE__*/ jsx(ChevronDownIcon, {})
+        });
+        $[63] = handleClear;
+        $[64] = hovering;
+        $[65] = showClearBtn;
+        $[66] = t11;
+    } else t11 = $[66];
+    let t12;
+    if ($[67] !== t10 || $[68] !== t11) {
+        t12 = /*#__PURE__*/ jsxs("span", {
+            "data-tao-select-icons": "",
+            children: [
+                t10,
+                t11
+            ]
+        });
+        $[67] = t10;
+        $[68] = t11;
+        $[69] = t12;
+    } else t12 = $[69];
+    let t13;
+    if ($[70] !== resolvedSize || $[71] !== resolvedVariant || $[72] !== t12 || $[73] !== t5 || $[74] !== t8 || $[75] !== t9) {
+        t13 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Trigger, {
+            "data-tao-control": "",
+            "data-tao-select": "",
+            "data-tao-size": resolvedSize,
+            "data-tao-variant": resolvedVariant,
+            "data-tao-disabled": t5,
+            onMouseEnter: t6,
+            onMouseLeave: t7,
+            children: [
+                t8,
+                t9,
+                t12
+            ]
+        });
+        $[70] = resolvedSize;
+        $[71] = resolvedVariant;
+        $[72] = t12;
+        $[73] = t5;
+        $[74] = t8;
+        $[75] = t9;
+        $[76] = t13;
+    } else t13 = $[76];
+    let t14;
+    if ($[77] !== search || $[78] !== showSearch) {
+        t14 = showSearch && /*#__PURE__*/ jsxs("div", {
+            "data-tao-select-search": "",
+            children: [
+                /*#__PURE__*/ jsx(SearchIcon, {}),
+                /*#__PURE__*/ jsx("input", {
+                    "data-tao-select-search-input": "",
+                    value: search,
+                    onChange: (e_0)=>setSearch(e_0.target.value),
+                    placeholder: "Search...",
+                    autoFocus: true
+                })
+            ]
+        });
+        $[77] = search;
+        $[78] = showSearch;
+        $[79] = t14;
+    } else t14 = $[79];
+    let t15;
+    if ($[80] !== filteredOptions || $[81] !== notFoundContent) {
+        t15 = filteredOptions.length > 0 ? filteredOptions.map(_temp) : /*#__PURE__*/ jsx("div", {
+            "data-tao-select-empty": "",
+            children: notFoundContent
+        });
+        $[80] = filteredOptions;
+        $[81] = notFoundContent;
+        $[82] = t15;
+    } else t15 = $[82];
+    let t16;
+    if ($[83] !== t15) {
+        t16 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Viewport, {
+            "data-tao-select-viewport": "",
+            children: t15
+        });
+        $[83] = t15;
+        $[84] = t16;
+    } else t16 = $[84];
+    let t17;
+    if ($[85] !== t14 || $[86] !== t16) {
+        t17 = /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.Portal, {
+            children: /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Content, {
+                "data-tao-select-content": "",
+                position: "popper",
+                sideOffset: 4,
+                children: [
+                    t14,
+                    t16
+                ]
+            })
+        });
+        $[85] = t14;
+        $[86] = t16;
+        $[87] = t17;
+    } else t17 = $[87];
+    let t18;
+    if ($[88] !== onChange || $[89] !== open || $[90] !== resolvedDisabled || $[91] !== t13 || $[92] !== t17 || $[93] !== value) {
+        t18 = /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Root, {
+            value: value,
+            onValueChange: onChange,
+            disabled: resolvedDisabled,
+            open: open,
+            onOpenChange: handleOpenChange,
+            children: [
+                t13,
+                t17
+            ]
+        });
+        $[88] = onChange;
+        $[89] = open;
+        $[90] = resolvedDisabled;
+        $[91] = t13;
+        $[92] = t17;
+        $[93] = value;
+        $[94] = t18;
+    } else t18 = $[94];
+    return t18;
+}
+function _temp(opt) {
+    return /*#__PURE__*/ jsxs(__rspack_external__radix_ui_react_select_36a82244.Item, {
+        value: opt.value,
+        disabled: opt.disabled,
+        "data-tao-select-item": "",
+        children: [
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemText, {
+                children: opt.label
+            }),
+            /*#__PURE__*/ jsx(__rspack_external__radix_ui_react_select_36a82244.ItemIndicator, {
+                "data-tao-select-check": "",
+                children: /*#__PURE__*/ jsx(CheckIcon, {})
+            })
+        ]
+    }, opt.value);
+}
+function ChevronDownIcon() {
+    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",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "m6 9 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",
+            children: /*#__PURE__*/ jsx("polyline", {
+                points: "20 6 9 17 4 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function CloseIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M18 6 6 18M6 6l12 12"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function SearchIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsxs("svg", {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+                /*#__PURE__*/ jsx("circle", {
+                    cx: "11",
+                    cy: "11",
+                    r: "8"
+                }),
+                /*#__PURE__*/ jsx("path", {
+                    d: "m21 21-4.3-4.3"
+                })
+            ]
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+function LoadingIcon() {
+    const $ = c(1);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx("svg", {
+            "data-tao-select-loading": "",
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /*#__PURE__*/ jsx("path", {
+                d: "M21 12a9 9 0 1 1-6.219-8.56"
+            })
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    return t0;
+}
+export { Select };

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

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

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

@@ -0,0 +1,30 @@
+import { c } from "react/compiler-runtime";
+import { useEffect, useState } from "react";
+const MOBILE_QUERY = '(max-width: 479px)';
+function useIsMobile() {
+    const $ = c(2);
+    const [isMobile, setIsMobile] = useState(_temp);
+    let t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = ()=>{
+            const mql = window.matchMedia(MOBILE_QUERY);
+            const handler = (e)=>setIsMobile(e.matches);
+            mql.addEventListener("change", handler);
+            return ()=>mql.removeEventListener("change", handler);
+        };
+        t1 = [];
+        $[0] = t0;
+        $[1] = t1;
+    } else {
+        t0 = $[0];
+        t1 = $[1];
+    }
+    useEffect(t0, t1);
+    return isMobile;
+}
+function _temp() {
+    if ("u" < typeof window) return false;
+    return window.matchMedia(MOBILE_QUERY).matches;
+}
+export { useIsMobile };