antd-solid 0.0.12 → 0.0.13

package/es/Radio/index.js

@@ -0,0 +1,68 @@
+import { delegateEvents, createComponent, effect, className, insert, template } from 'solid-js/web';
+import { Show } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Button from './Button.js';
+import Group from './Group.js';
+import { wave } from '../utils/animation.js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=radio><span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class=px-8px>`);
+const Radio = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: null
+  });
+  return createComponent(Element, {
+    tag: "label",
+    get ["class"]() {
+      return cs('inline-flex cursor-pointer inline-flex items-center', props.disabled && 'text-[var(--ant-color-text-disabled)] cursor-not-allowed');
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$.$$click = e => {
+          wave(e.currentTarget, 'var(--ant-color-primary)');
+        };
+        _el$2.$$input = e => {
+          setChecked(e.target.checked);
+          props.onChange?.(e);
+        };
+        effect(_p$ => {
+          var _v$ = cs('relative w-16px h-16px rounded-50%'),
+            _v$2 = props.disabled,
+            _v$3 = cs('absolute inset-0 rounded-inherit [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container)]', checked() && (props.disabled ? 'flex justify-center items-center before:content-empty before:block before:w-8px before:h-8px before:bg-[var(--ant-radio-dot-color-disabled)] before:rounded-50%' : '[border:5px_solid_var(--ant-color-primary)]'), props.disabled && 'bg-[var(--ant-color-bg-container-disabled)]');
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && (_el$2.disabled = _p$.t = _v$2);
+          _v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
+        effect(() => _el$2.checked = checked());
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return props.children;
+        },
+        get children() {
+          var _el$4 = _tmpl$2();
+          insert(_el$4, () => props.children);
+          return _el$4;
+        }
+      })];
+    }
+  });
+};
+Radio.Button = Button;
+Radio.Group = Group;
+delegateEvents(["click", "input"]);
+
+export { Radio as default };

package/es/RangeInput/index.d.ts

@@ -0,0 +1,23 @@
+import { type JSXElement, type JSX, type Accessor } from 'solid-js';
+export interface RangeInputProps<T> {
+    multiple?: boolean;
+    defaultValue?: T[] | undefined | null;
+    value?: T[] | undefined | null;
+    onChange?: (value: T[]) => void;
+    optionLabelRender?: (v: T) => JSXElement;
+    placeholder?: [string?, string?];
+    allowClear?: boolean;
+    disabled?: boolean;
+    class?: string;
+    content: (options: {
+        currentFocusType: Accessor<'start' | 'end'>;
+        tempValue: Accessor<Array<T | undefined>>;
+        setSingleValue: (value: T) => void;
+    }) => JSXElement;
+    /**
+     * 设置校验状态
+     */
+    status?: 'error' | 'warning';
+}
+declare function RangeInput<T = string>(props: RangeInputProps<T>): JSX.Element;
+export default RangeInput;

package/es/RangeInput/index.js

@@ -0,0 +1,208 @@
+import { delegateEvents, createComponent, use, insert, effect, setAttribute, className, style, template } from 'solid-js/web';
+import { useContext, createSignal, createEffect, on, createMemo, Show } from 'solid-js';
+import cs from 'classnames';
+import { compact, isNil } from 'lodash-es';
+import Tooltip from '../Tooltip/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import useClickAway from '../hooks/useClickAway.js';
+import Element from '../Element/index.js';
+import CompactContext from '../Compact/context.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled cursor-pointer text-[var(--ant-color-text-quaternary)] hover:text-[var(--ant-color-text-tertiary)] active:text-[var(--ant-color-text)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div tabindex=0><div class=truncate></div><span class="i-ant-design:swap-right-outlined w-32px"></span><div class=truncate></div><div aria-label=active-bar class="h-1px bg-[var(--ant-color-primary)] absolute bottom-0 transition-left"></div><div class="absolute top-0 bottom-0 right-11px flex items-center">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="w-200px max-h-400px overflow-auto">`),
+  _tmpl$4 = /*#__PURE__*/template(`<input class="h-30px [outline:none] bg-inherit placeholder-text-[var(--ant-color-text-placeholder)]"readonly>`),
+  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined text-[var(--ant-color-text-quaternary)]">`);
+const statusClassDict = {
+  default: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:border-[var(--ant-color-primary)] focus-within:border-[var(--ant-color-primary)] focus-within:[box-shadow:0_0_0_2px_var(--ant-control-outline)]', focus && 'border-[var(--ant-color-primary)] [box-shadow:0_0_0_2px_var(--ant-control-outline)]'),
+  error: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:border-[var(--ant-color-error-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]', focus && '[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+  warning: (disabled, focus) => cs('[border:1px_solid_var(--ant-color-warning)]', !disabled && 'hover:border-[var(--ant-color-warning-border-hover)] focus-within:[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]', focus && '[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+};
+function RangeInput(props) {
+  let container;
+  let startDom;
+  let endDom;
+  let tooltipContent;
+  const {
+    compact: isCompact
+  } = useContext(CompactContext);
+  const [currentFocusType, setCurrentFocusType] = createSignal('start');
+  const [value, setValue] = createControllableValue(props, {
+    defaultValue: []
+  });
+  // 用于统计聚焦后的设置次数，大于等于 2 时退出聚焦
+  let setSingleValueCount = 0;
+  const [tempValue, setTempValue] = createSignal([]);
+  createEffect(() => {
+    setTempValue(value() ?? []);
+  });
+  const setSingleValue = v => {
+    setSingleValueCount++;
+    if (currentFocusType() === 'start') {
+      setTempValue(arr => [v, arr[1]]);
+      if (setSingleValueCount > 1) {
+        setOpen(false);
+      } else {
+        setCurrentFocusType('end');
+      }
+    } else {
+      setTempValue(arr => [arr[0], v]);
+      if (setSingleValueCount > 1) {
+        setOpen(false);
+      } else {
+        setCurrentFocusType('start');
+      }
+    }
+  };
+  const [open, setOpen] = createSignal(false);
+  useClickAway(() => setOpen(false), () => compact([container, tooltipContent]));
+  createEffect(on(open, input => {
+    setSingleValueCount = 0;
+    if (!input) {
+      const [start, end] = tempValue();
+      if (!isNil(start) && !isNil(end)) {
+        setValue(tempValue());
+      } else {
+        setTempValue(value() ?? []);
+      }
+    }
+  }, {
+    defer: true
+  }));
+  const [width, setWidth] = createSignal(0);
+  const [hover, setHover] = createSignal(false);
+  const showClearBtn = createMemo(() => props.allowClear && hover() && tempValue().length > 0);
+  const [activeBarStyle, setActiveBarStyle] = createSignal();
+  const setActiveBarStyleByDom = dom => {
+    setActiveBarStyle({
+      left: `${dom.offsetLeft}px`,
+      width: `${dom.clientWidth}px`
+    });
+  };
+  createEffect(() => {
+    if (!open()) return;
+    if (currentFocusType() === 'start') {
+      setActiveBarStyleByDom(startDom);
+    } else {
+      setActiveBarStyleByDom(endDom);
+    }
+  });
+  const optionLabelRender = v => props.optionLabelRender ? props.optionLabelRender(v) : String(v);
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs('rounded-6px', isCompact && 'ant-compact-item', props.class, props.disabled && 'cursor-not-allowed');
+    },
+    get children() {
+      return createComponent(Tooltip, {
+        plain: true,
+        get open() {
+          return open();
+        },
+        onOpenChange: setOpen,
+        trigger: false,
+        placement: "bottomLeft",
+        arrow: false,
+        contentStyle: {
+          padding: 0
+        },
+        content: () => (() => {
+          var _el$8 = _tmpl$3();
+          var _ref$4 = tooltipContent;
+          typeof _ref$4 === "function" ? use(_ref$4, _el$8) : tooltipContent = _el$8;
+          insert(_el$8, () => props.content({
+            currentFocusType,
+            tempValue,
+            setSingleValue
+          }));
+          effect(() => `${width()}px` != null ? _el$8.style.setProperty("width", `${width()}px`) : _el$8.style.removeProperty("width"));
+          return _el$8;
+        })(),
+        get children() {
+          var _el$ = _tmpl$2(),
+            _el$2 = _el$.firstChild,
+            _el$3 = _el$2.nextSibling,
+            _el$4 = _el$3.nextSibling,
+            _el$5 = _el$4.nextSibling,
+            _el$6 = _el$5.nextSibling;
+          _el$.addEventListener("mouseleave", () => setHover(false));
+          _el$.addEventListener("mouseenter", () => setHover(true));
+          _el$.$$click = e => {
+            setOpen(true);
+            setWidth(e.currentTarget.offsetWidth);
+            setCurrentFocusType(e.target !== endDom ? 'start' : 'end');
+          };
+          var _ref$ = container;
+          typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
+          var _ref$2 = startDom;
+          typeof _ref$2 === "function" ? use(_ref$2, _el$2) : startDom = _el$2;
+          insert(_el$2, createComponent(Show, {
+            get when() {
+              return !isNil(tempValue()[0]);
+            },
+            get fallback() {
+              return (() => {
+                var _el$9 = _tmpl$4();
+                effect(() => setAttribute(_el$9, "placeholder", props.placeholder?.[0]));
+                return _el$9;
+              })();
+            },
+            get children() {
+              return optionLabelRender(tempValue()[0]);
+            }
+          }));
+          var _ref$3 = endDom;
+          typeof _ref$3 === "function" ? use(_ref$3, _el$4) : endDom = _el$4;
+          insert(_el$4, createComponent(Show, {
+            get when() {
+              return !isNil(tempValue()[1]);
+            },
+            get fallback() {
+              return (() => {
+                var _el$10 = _tmpl$4();
+                effect(() => setAttribute(_el$10, "placeholder", props.placeholder?.[1]));
+                return _el$10;
+              })();
+            },
+            get children() {
+              return optionLabelRender(tempValue()[1]);
+            }
+          }));
+          insert(_el$6, createComponent(Show, {
+            get when() {
+              return showClearBtn();
+            },
+            get fallback() {
+              return _tmpl$5();
+            },
+            get children() {
+              var _el$7 = _tmpl$();
+              _el$7.$$click = e => {
+                e.stopPropagation();
+                setValue([]);
+                setOpen(false);
+              };
+              return _el$7;
+            }
+          }));
+          effect(_p$ => {
+            var _v$ = cs('relative min-h-32px pr-25px rounded-inherit grid [grid-template-columns:1fr_auto_1fr] items-center', tempValue().length && props.multiple ? 'pl-4px' : 'pl-11px', props.multiple && 'py-1px', props.disabled && '[pointer-events:none] bg-[var(--ant-color-bg-container-disabled)] color-[var(--ant-color-text-disabled)]', statusClassDict[props.status ?? 'default'](!!props.disabled, open())),
+              _v$2 = {
+                display: open() ? 'block' : 'none',
+                ...activeBarStyle()
+              };
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _p$.t = style(_el$5, _v$2, _p$.t);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+delegateEvents(["click"]);
+
+export { RangeInput as default };

package/es/Result/index.js

@@ -0,0 +1,49 @@
+import { createComponent, effect, className, insert, template } from 'solid-js/web';
+import { mergeProps } from 'solid-js';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class=mb-24px><span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="my-8px text-[--ant-color-text-heading] text-24px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="text-[--ant-color-text-description] text-14px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class=mt-24px>`);
+const statusIconMap = {
+  success: '!text-[--ant-color-success] i-ant-design:check-circle-filled',
+  info: '!text-[--ant-color-primary] i-ant-design:exclamation-circle-filled',
+  warning: '!text-[--ant-color-warning] i-ant-design:warning-filled',
+  error: '!text-[--ant-color-error] i-ant-design:close-circle-filled'
+};
+const Result = _props => {
+  const props = mergeProps({
+    status: 'info'
+  }, _props);
+  return createComponent(Element, {
+    "class": "text-center px-32px py-48px [font-size:var(--ant-font-size)] text-[--ant-color-text] leading-[--ant-line-height]",
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild;
+        effect(() => className(_el$2, cs(statusIconMap[props.status], 'text-72px')));
+        return _el$;
+      })(), (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => props.title);
+        return _el$3;
+      })(), (() => {
+        var _el$4 = _tmpl$3();
+        insert(_el$4, () => props.subTitle);
+        return _el$4;
+      })(), (() => {
+        var _el$5 = _tmpl$4();
+        insert(_el$5, () => props.extra);
+        return _el$5;
+      })(), (() => {
+        var _el$6 = _tmpl$4();
+        insert(_el$6, () => props.children);
+        return _el$6;
+      })()];
+    }
+  });
+};
+
+export { Result as default };

package/es/Segmented/index.d.ts

@@ -1,11 +1,11 @@
-import { type Component, type JSX } from 'solid-js';
-import { type StringOrJSXElement, type Key } from '../types';
-export interface SegmentedProps {
+import { type Component } from 'solid-js';
+import { type StringOrJSXElement, type Key, type ComponentSize, type StyleProps } from '../types';
+export interface SegmentedProps extends StyleProps {
     block?: boolean;
     disabled?: boolean;
-    options: Array<string | number | {
+    options: Array<Key | {
         label: StringOrJSXElement;
-        value: string;
+        value: Key;
         disabled?: boolean;
         onClick?: (e: MouseEvent & {
             currentTarget: HTMLDivElement;
@@ -14,8 +14,11 @@ export interface SegmentedProps {
     }>;
     value?: Key;
     onChange?: (value: Key) => void;
-    class?: string;
-    style?: JSX.CSSProperties;
+    /**
+     * 大小，提供 large middle 和 small 三种大小
+     * 默认 'middle'
+     */
+    size?: ComponentSize;
 }
 declare const Segmented: Component<SegmentedProps>;
 export default Segmented;

package/es/Segmented/index.js

@@ -1,71 +1,72 @@
-import { delegateEvents, insert, createComponent, effect, className, style, template } from 'solid-js/web';
+import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
 import { createSelector, For, Show } from 'solid-js';
 import cs from 'classnames';
 import createControllableValue from '../hooks/createControllableValue.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div>`);
+var _tmpl$ = /*#__PURE__*/template(`<div><div>`);
 const unWarpValue = value => typeof value === 'object' ? value.value : value;
 const Segmented = props => {
   const [value, setValue] = createControllableValue(props, {
     defaultValue: unWarpValue(props.options[0])
   });
   const isSelected = createSelector(value);
+  const size = useComponentSize(() => props.size);
   const isDisabledValue = v => {
     if (props.disabled) return true;
     return typeof v === 'object' ? v.disabled : false;
   };
-  return (() => {
-    const _el$ = _tmpl$();
-    insert(_el$, createComponent(For, {
-      get each() {
-        return props.options;
-      },
-      children: item => (() => {
-        const _el$2 = _tmpl$2(),
-          _el$3 = _el$2.firstChild;
-        _el$3.$$click = e => {
-          setValue(unWarpValue(item));
-          typeof item === 'object' && item.onClick?.(e);
-        };
-        insert(_el$3, createComponent(Show, {
-          when: typeof item !== 'object',
-          get fallback() {
-            return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
-          },
-          children: item
-        }));
-        effect(_p$ => {
-          const _v$3 = cs(props.block && 'ant-basis-0 ant-grow-1', isDisabledValue(item) && 'ant-cursor-not-allowed'),
-            _v$4 = cs('ant-rounded-[var(--ant-border-radius-sm)] ant-px-[var(--ant-padding-sm)] where:ant-cursor-pointer ant-leading-28px where:hover:ant-bg-[var(--ant-segmented-item-hover-bg)] where:active:ant-bg-[var(--ant-segmented-item-active-bg)]', isSelected(unWarpValue(item)) && 'ant-bg-white ant-shadow-[var(--ant-box-shadow-tertiary)]', props.block && 'ant-flex ant-justify-center', isDisabledValue(item) && 'ant-[pointer-events:none] ant-text-[var(--ant-color-text-disabled)]');
-          _v$3 !== _p$._v$3 && className(_el$2, _p$._v$3 = _v$3);
-          _v$4 !== _p$._v$4 && className(_el$3, _p$._v$4 = _v$4);
-          return _p$;
-        }, {
-          _v$3: undefined,
-          _v$4: undefined
-        });
-        return _el$2;
-      })()
-    }));
-    effect(_p$ => {
-      const _v$ = cs('ant-bg-[var(--ant-color-bg-layout)] ant-rounded-[var(--ant-border-radius)] ant-p-2px', props.block ? 'ant-flex' : 'ant-inline-flex', props.class),
-        _v$2 = {
-          '--ant-segmented-item-color': 'rgba(0, 0, 0, 0.65)',
-          '--ant-segmented-item-hover-bg': 'rgba(0, 0, 0, 0.06)',
-          '--ant-segmented-item-active-bg': 'rgba(0, 0, 0, 0.15)',
-          ...props.style
-        };
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined
-    });
-    return _el$;
-  })();
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs('bg-[var(--ant-color-bg-layout)] rounded-[var(--ant-border-radius)] p-2px text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', props.block ? 'flex' : 'inline-flex', props.class, {
+        small: '[font-size:var(--ant-font-size)]',
+        middle: '[font-size:var(--ant-font-size)]',
+        large: '[font-size:var(--ant-font-size-lg)]'
+      }[size()]);
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: item => (() => {
+          var _el$ = _tmpl$(),
+            _el$2 = _el$.firstChild;
+          _el$2.$$click = e => {
+            setValue(unWarpValue(item));
+            typeof item === 'object' && item.onClick?.(e);
+          };
+          insert(_el$2, createComponent(Show, {
+            when: typeof item !== 'object',
+            get fallback() {
+              return typeof item === 'object' && unwrapStringOrJSXElement(item.label);
+            },
+            children: item
+          }));
+          effect(_p$ => {
+            var _v$ = cs(props.block && 'basis-0 grow-1', isDisabledValue(item) && 'cursor-not-allowed'),
+              _v$2 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-sm)] cursor-pointer [white-space:nowrap]', isSelected(unWarpValue(item)) && 'bg-[var(--ant-segmented-item-selected-bg)]', isDisabledValue(item) ? '[pointer-events:none] text-[var(--ant-color-text-disabled)]' : isSelected(unWarpValue(item)) ? 'shadow-[var(--ant-box-shadow-tertiary)] text-[var(--ant-segmented-item-selected-color)]' : 'text-[var(--ant-segmented-item-color)] hover:text-[var(--ant-segmented-item-hover-color)] hover:bg-[var(--ant-segmented-item-hover-bg)] active:bg-[var(--ant-segmented-item-active-bg)]', props.block && 'flex justify-center', {
+                small: 'leading-20px',
+                middle: 'leading-28px',
+                large: 'leading-36px'
+              }[size()]);
+            _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+            _v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$;
+        })()
+      });
+    }
+  });
 };
 delegateEvents(["click"]);
 

package/es/Select/index.d.ts

@@ -0,0 +1,17 @@
+import { type JSXElement } from 'solid-js';
+import { type StringOrJSXElement, type Key } from '../types';
+import { type SelectInputProps } from '../SelectInput';
+export interface SelectOption<T = Key> {
+    label: StringOrJSXElement;
+    value: T;
+    class?: string;
+}
+export interface SelectProps<T = Key> extends Pick<SelectInputProps<T>, 'multiple' | 'allowClear' | 'class' | 'style' | 'disabled' | 'placeholder' | 'status' | 'size' | 'variant' | 'suffixIcon' | 'placement' | 'getPopupContainer' | 'defaultOpen' | 'open' | 'onOpenChange'> {
+    defaultValue?: T | T[] | null;
+    value?: T | T[] | null;
+    onChange?: (value: T | T[] | undefined) => void;
+    options?: Array<SelectOption<T>>;
+    labelRender?: (options: SelectOption<T> | undefined, value: T | undefined) => JSXElement;
+}
+declare function Select<T = Key>(props: SelectProps<T>): import("solid-js").JSX.Element;
+export default Select;

package/es/Select/index.js

@@ -0,0 +1,75 @@
+import { delegateEvents, createComponent, mergeProps, insert, effect, className, setAttribute, template } from 'solid-js/web';
+import { splitProps, createMemo, createSelector, Show, For } from 'solid-js';
+import cs from 'classnames';
+import { isEmpty } from 'lodash-es';
+import createControllableValue from '../hooks/createControllableValue.js';
+import { toArray } from '../utils/array.js';
+import SelectInput from '../SelectInput/index.js';
+import Empty from '../Empty/index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class=p-2px>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div>`);
+function Select(props) {
+  const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'style', 'disabled', 'placeholder', 'status', 'size', 'variant', 'suffixIcon', 'placement', 'getPopupContainer']);
+  const [value, setValue] = createControllableValue(props);
+  const valueArr = createMemo(() => toArray(value(), false));
+  const selectedValue = createSelector(() => new Map(valueArr().map(v => [v, true])), (a, b) => b.has(a));
+  const optionDict = createMemo(() => new Map(props.options?.map(o => [o.value, o])));
+  return createComponent(SelectInput, mergeProps(selectInputProps, {
+    labelRender: v => props.labelRender ? props.labelRender(optionDict().get(v), v) : unwrapStringOrJSXElement(optionDict().get(v)?.label) ?? v,
+    get value() {
+      return valueArr();
+    },
+    onChange: v => {
+      setValue(props.multiple ? v : v[0]);
+    },
+    content: close => createComponent(Show, {
+      get when() {
+        return !isEmpty(props.options);
+      },
+      get fallback() {
+        return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
+      },
+      get children() {
+        var _el$ = _tmpl$();
+        insert(_el$, createComponent(For, {
+          get each() {
+            return props.options;
+          },
+          children: item => (() => {
+            var _el$2 = _tmpl$2();
+            _el$2.$$click = () => {
+              if (!props.multiple) {
+                setValue(item.value);
+                close();
+                return;
+              }
+              if (valueArr().includes(item.value)) {
+                setValue(valueArr().filter(v => v !== item.value));
+              } else {
+                setValue([...valueArr(), item.value]);
+              }
+            };
+            insert(_el$2, () => unwrapStringOrJSXElement(item.label));
+            effect(_p$ => {
+              var _v$ = cs('ellipsis box-content px-12px py-5px min-h-22px leading-22px hover:bg-[var(--ant-select-option-active-bg)] cursor-pointer rounded-[var(--ant-border-radius-sm)]', selectedValue(item.value) ? '!bg-[var(--ant-select-option-selected-bg)]' : '', item.class),
+                _v$2 = typeof item.label === 'string' || typeof item.label === 'number' ? item.label.toString() : undefined;
+              _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+              _v$2 !== _p$.t && setAttribute(_el$2, "title", _p$.t = _v$2);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$2;
+          })()
+        }));
+        return _el$;
+      }
+    })
+  }));
+}
+delegateEvents(["click"]);
+
+export { Select as default };

package/es/SelectInput/index.d.ts

@@ -0,0 +1,39 @@
+import { type JSXElement, type JSX } from 'solid-js';
+import { type TooltipProps } from '../Tooltip';
+export interface SelectInputProps<T> extends Pick<TooltipProps, 'getPopupContainer' | 'defaultOpen' | 'open' | 'onOpenChange'> {
+    multiple?: boolean;
+    defaultValue?: T[] | null;
+    value?: T[] | null;
+    onChange?: (value: T[]) => void;
+    labelRender?: (value: T) => JSXElement;
+    placeholder?: string;
+    allowClear?: boolean;
+    disabled?: boolean;
+    class?: string;
+    style?: JSX.CSSProperties;
+    content: (close: () => void) => JSXElement;
+    /**
+     * 设置校验状态
+     */
+    status?: 'error' | 'warning';
+    /**
+     * 默认: middle
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * 形态变体
+     * 默认 'outlined'
+     */
+    variant?: 'outlined' | 'borderless' | 'filled';
+    /**
+     * 自定义的选择框后缀图标
+     */
+    suffixIcon?: JSXElement;
+    /**
+     * 选择框弹出的位置
+     * 默认 'bottomLeft'
+     */
+    placement?: 'bottomLeft' | 'bottom' | 'bottomRight' | 'topLeft' | 'top' | 'topRight';
+}
+declare function SelectInput<T>(_props: SelectInputProps<T>): JSX.Element;
+export default SelectInput;