antd-solid 0.0.12 → 0.0.14

package/es/Alert/index.d.ts

@@ -0,0 +1,10 @@
+import { type ParentProps, type Component } from 'solid-js';
+export interface AlertProps extends ParentProps {
+    /**
+     * 指定警告提示的样式，有四种选择 success、info、warning、error
+     * 默认 'info'
+     */
+    type?: 'success' | 'info' | 'warning' | 'error';
+}
+declare const Alert: Component<AlertProps>;
+export default Alert;

package/es/Alert/index.js

@@ -0,0 +1,26 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps } from 'solid-js';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+
+const TypeClassDict = {
+  success: 'bg-[var(--ant-color-success-bg)] [border:var(--ant-line-width)_var(--ant-line-type)_var(--ant-color-success-border)]',
+  info: 'bg-[var(--ant-color-info-bg)] [border:var(--ant-line-width)_var(--ant-line-type)_var(--ant-color-info-border)]',
+  warning: 'bg-[var(--ant-color-warning-bg)] [border:var(--ant-line-width)_var(--ant-line-type)_var(--ant-color-warning-border)]',
+  error: 'bg-[var(--ant-color-error-bg)] [border:var(--ant-line-width)_var(--ant-line-type)_var(--ant-color-error-border)]'
+};
+const Alert = _props => {
+  const props = mergeProps({
+    type: 'info'
+  }, _props);
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs('p-[var(--ant-alert-default-padding)] rounded-[var(--ant-border-radius-lg)] [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', TypeClassDict[props.type]);
+    },
+    get children() {
+      return props.children;
+    }
+  });
+};
+
+export { Alert as default };

package/es/Button/index.d.ts

@@ -1,20 +1,32 @@
 import { type Component, type ParentProps, type JSX } from 'solid-js';
 import './index.scss';
-interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement> {
+import { type StringOrJSXElement } from '../types';
+export interface ButtonProps extends ParentProps, JSX.CustomAttributes<HTMLButtonElement>, JSX.HTMLAttributes<HTMLButtonElement> {
     type?: 'default' | 'primary' | 'dashed' | 'text' | 'link';
     onClick?: ((e: MouseEvent) => void) | ((e: MouseEvent) => Promise<unknown>);
-    'on:click'?: (e: MouseEvent) => void;
     /**
      * 默认: middle
      */
-    size?: 'large' | 'middle' | 'small';
+    size?: 'small' | 'middle' | 'large';
     class?: string;
     style?: JSX.CSSProperties;
-    loading?: boolean;
+    /**
+     * 按钮加载中状态
+     * 'auto' 代表开启自动 loading，当按钮 click 事件返回 promise 对象时，会自动开启 loading 状态
+     */
+    loading?: boolean | 'auto';
     /**
      * 设置危险按钮
      */
     danger?: boolean;
+    disabled?: boolean;
+    /**
+     * 将按钮宽度调整为其父宽度的选项
+     */
+    block?: boolean;
+    contentClass?: string;
+    contentStyle?: JSX.CSSProperties;
+    icon?: StringOrJSXElement;
 }
 declare const Button: Component<ButtonProps>;
 export default Button;

package/es/Button/index.js

@@ -1,75 +1,123 @@
-import { delegateEvents, use, insert, createComponent, effect, className, style, template } from 'solid-js/web';
-import { mergeProps, createSignal, createMemo, untrack, Show } from 'solid-js';
+import { createComponent, mergeProps as mergeProps$1, insert, effect, className, style, template } from 'solid-js/web';
+import { onMount, mergeProps, splitProps, createSignal, createMemo, children, Show } from 'solid-js';
 import cs from 'classnames';
-import Compact from '../Compact/index.js';
 import './index.scss.js';
+import { wave } from '../utils/animation.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:loading ant-[vertical-align:-0.125em] keyframes-spin ant-[animation:spin_1s_linear_infinite] ant-mr-8px">`),
-  _tmpl$2 = /*#__PURE__*/template(`<button><span>`);
+var _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:loading [vertical-align:-0.125em] keyframes-spin [animation:spin_1s_linear_infinite]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<span>`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="inline-block leading-inherit">`);
 const sizeClassMap = {
-  large: 'ant-px-15px ant-py-6px ant-h-40px ant-rounded-8px',
-  middle: 'ant-px-15px ant-py-4px ant-h-32px ant-rounded-6px',
-  small: 'ant-px-7px ant-h-24px ant-rounded-4px'
+  large: 'px-15px py-7px h-40px leading-24px',
+  middle: 'px-15px py-4px h-32px leading-22px',
+  small: 'px-7px h-24px leading-22px'
 };
+// 有边框按钮的 disabled 样式
+const disabledWithBorderClass = '[border:1px_solid_var(--ant-button-border-color-disabled)] bg-[var(--ant-color-bg-container-disabled)] text-[var(--ant-color-text-disabled)]';
+// 无边框按钮的 disabled 样式
+const disabledWithNoBorderClass = 'text-[var(--ant-color-text-disabled)]';
 const typeClassMap = {
-  default: danger => cs('ant-bg-white', danger ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_solid_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]'),
-  primary: danger => cs('ant-text-white', danger ? 'ant-[border:1px_solid_var(--ant-color-error)] ant-bg-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-bg-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-bg-[var(--dark-error-color)]' : 'ant-[border:1px_solid_var(--ant-color-primary)] ant-bg-[var(--ant-color-primary)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-bg-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-bg-[var(--ant-color-primary-active)]'),
-  dashed: danger => cs(' ant-bg-white', danger ? 'ant-[border:1px_dashed_var(--ant-color-error)] ant-text-[var(--ant-color-error)] hover:ant-[border-color:var(--light-error-color)] hover:ant-text-[var(--light-error-color)] active:ant-[border-color:var(--dark-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-[border:1px_dashed_var(--ant-color-border)] ant-text-[var(--dark-color)] hover:ant-[border-color:var(--ant-color-primary-hover)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-[border-color:var(--ant-color-primary-active)] active:ant-text-[var(--ant-color-primary-active)]'),
-  text: danger => cs('ant-border-none ant-bg-transparent', danger ? 'ant-text-[var(--ant-color-error)] hover:ant-bg-[var(--error-bg-color)] active:ant-bg-[var(--error-bg-color)]' : 'ant-text-[var(--dark-color)] hover:ant-bg-[rgba(0,0,0,0.06)] active:ant-bg-[rgba(0,0,0,.15)]'),
-  link: danger => cs('ant-border-none ant-bg-transparent', danger ? 'ant-text-[var(--ant-color-error)] hover:ant-text-[var(--light-error-color)] active:ant-text-[var(--dark-error-color)]' : 'ant-text-[var(--ant-color-primary)] hover:ant-text-[var(--ant-color-primary-hover)] active:ant-text-[var(--ant-color-primary-active)]')
+  default: (danger, disabled) => disabled ? disabledWithBorderClass : cs('bg-[var(--ant-button-default-bg)]', danger ? '[border:1px_solid_var(--ant-color-error)] text-[var(--ant-color-error)] hover:[border-color:var(--ant-color-error-border-hover)] hover:text-[var(--ant-color-error-border-hover)] active:[border-color:var(--ant-color-error-active)] active:text-[var(--ant-color-error-active)]' : '[border:1px_solid_var(--ant-color-border)] text-[var(--ant-button-default-color)] hover:[border-color:var(--ant-color-primary-hover)] hover:text-[var(--ant-color-primary-hover)] active:[border-color:var(--ant-color-primary-active)] active:text-[var(--ant-color-primary-active)]'),
+  primary: (danger, disabled) => disabled ? disabledWithBorderClass : cs('text-white', danger ? '[border:1px_solid_var(--ant-color-error)] bg-[var(--ant-color-error)] hover:[border-color:var(--ant-color-error-border-hover)] hover:bg-[var(--ant-color-error-border-hover)] active:[border-color:var(--ant-color-error-active)] active:bg-[var(--ant-color-error-active)]' : '[border:1px_solid_var(--ant-color-primary)] bg-[var(--ant-color-primary)] hover:[border-color:var(--ant-color-primary-hover)] hover:bg-[var(--ant-color-primary-hover)] active:[border-color:var(--ant-color-primary-active)] active:bg-[var(--ant-color-primary-active)]'),
+  dashed: (danger, disabled) => disabled ? disabledWithBorderClass : cs(' bg-[var(--ant-button-default-bg)]', danger ? '[border:1px_dashed_var(--ant-color-error)] text-[var(--ant-color-error)] hover:[border-color:var(--ant-color-error-border-hover)] hover:text-[var(--ant-color-error-border-hover)] active:[border-color:var(--ant-color-error-active)] active:text-[var(--ant-color-error-active)]' : '[border:1px_dashed_var(--ant-color-border)] text-[var(--ant-button-default-color)] hover:[border-color:var(--ant-color-primary-hover)] hover:text-[var(--ant-color-primary-hover)] active:[border-color:var(--ant-color-primary-active)] active:text-[var(--ant-color-primary-active)]'),
+  text: (danger, disabled) => disabled ? disabledWithNoBorderClass : cs('border-none bg-transparent', danger ? 'text-[var(--ant-color-error)] hover:bg-[var(--ant-color-error-bg)] active:bg-[var(--ant-color-error-bg)]' : 'text-[var(--ant-color-text)] hover:bg-[var(--ant-color-bg-text-hover)] active:bg-[var(--ant-color-bg-text-active)]'),
+  link: (danger, disabled) => disabled ? disabledWithNoBorderClass : cs('border-none bg-transparent', danger ? 'text-[var(--ant-color-error)] hover:text-[var(--ant-color-error-border-hover)] active:text-[var(--ant-color-error-active)]' : 'text-[var(--ant-color-primary)] hover:text-[var(--ant-color-primary-hover)] active:text-[var(--ant-color-primary-active)]')
 };
-const Button = props => {
-  const mergedProps = mergeProps({
+const Button = _props => {
+  console.log('onMount button before');
+  onMount(() => {
+    console.log('onMount button');
+  });
+  console.log('onMount button after');
+  const props = mergeProps({
     type: 'default',
-    size: 'middle'
-  }, props);
+    danger: false,
+    disabled: false
+  }, _props);
+  const size = useComponentSize(() => props.size);
+  const [, buttonElementProps] = splitProps(props, ['type', 'size', 'loading', 'danger']);
   const [innerLoading, setLoading] = createSignal(false);
-  const loading = createMemo(() => props.loading ?? innerLoading());
-  return (() => {
-    const _el$ = _tmpl$2(),
-      _el$3 = _el$.firstChild;
-    _el$.$$click = e => {
-      const res = mergedProps.onClick?.(e);
-      if (res instanceof Promise) {
+  const loading = createMemo(() => typeof props.loading === 'boolean' ? props.loading : innerLoading());
+  const resolvedChildren = children(() => props.children);
+  const resolvedIcon = children(() => unwrapStringOrJSXElement(props.icon));
+  return createComponent(Element, mergeProps$1({
+    tag: "button"
+  }, buttonElementProps, {
+    ref(r$) {
+      var _ref$ = props.ref;
+      typeof _ref$ === "function" ? _ref$(r$) : props.ref = r$;
+    },
+    get ["class"]() {
+      return cs(`ant-btn ant-btn-${props.type}`, 'inline-flex justify-center items-center gap-8px', 'relative cursor-pointer [font-size:var(--ant-font-size)] rounded-[--ant-button-border-radius]', 'focus-visible:[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:[outline-offset:1px]', props.block && 'block w-full', props.class, sizeClassMap[size()], props.disabled && 'cursor-not-allowed', typeClassMap[props.type](props.danger, props.disabled), loading() && 'opacity-65');
+    },
+    get style() {
+      return {
+        '--ant-button-border-radius': {
+          small: 'var(--ant-border-radius-sm)',
+          middle: 'var(--ant-border-radius)',
+          large: 'var(--ant-border-radius-lg)'
+        }[size()],
+        ...props.style
+      };
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    onClick: e => {
+      const res = props.onClick?.(e);
+      if (props.loading === 'auto' && res instanceof Promise) {
         setLoading(true);
         res.finally(() => setLoading(false));
       }
-      if (mergedProps.type === 'default' || mergedProps.type === 'primary' || mergedProps.type === 'dashed') {
-        const div = document.createElement('div');
-        div.className = cs(props.danger ? 'ant-[--color:var(--light-error-color)]' : 'ant-[--color:var(--ant-color-primary-hover)]', 'ant-absolute ant-inset-0 ant-rounded-inherit ant-[background:radial-gradient(var(--color),rgba(0,0,0,0))] ant-z--1 ant-keyframes-button-border[inset:0px][inset:-6px] ant-[animation:button-border_ease-out_0.3s]');
-        const onAnimationEnd = () => {
-          div.remove();
-          div.removeEventListener('animationend', onAnimationEnd);
-        };
-        div.addEventListener('animationend', onAnimationEnd);
-        e.currentTarget.insertBefore(div, e.currentTarget.childNodes[0]);
+      if (props.type === 'default' || props.type === 'primary' || props.type === 'dashed') {
+        wave(e.currentTarget, props.danger ? 'var(--ant-color-error-border-hover)' : 'var(--ant-color-primary-hover)');
       }
-    };
-    const _ref$ = mergedProps.ref;
-    typeof _ref$ === "function" ? use(_ref$, _el$) : mergedProps.ref = _el$;
-    _el$.addEventListener("click", untrack(() => props['on:click']));
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return loading();
-      },
-      get children() {
-        return _tmpl$();
-      }
-    }), _el$3);
-    insert(_el$3, () => mergedProps.children);
-    effect(_p$ => {
-      const _v$ = cs(`ant-btn ant-btn-${mergedProps.type}`, 'ant-relative ant-cursor-pointer', 'focus-visible:ant-[outline:4px_solid_var(--ant-color-primary-border)] focus-visible:ant-[outline-offset:1px]', mergedProps.class, sizeClassMap[mergedProps.size], typeClassMap[mergedProps.type](props.danger ?? false), loading() && 'ant-opacity-65', 'ant-[--color:--ant-color-primary-hover]', Compact.compactItemRounded0Class, Compact.compactItemZIndexClass, Compact.compactItemClass),
-        _v$2 = mergedProps.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$;
-  })();
+    },
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return loading();
+        },
+        get fallback() {
+          return createComponent(Show, {
+            get when() {
+              return resolvedIcon();
+            },
+            get children() {
+              var _el$3 = _tmpl$3();
+              insert(_el$3, resolvedIcon);
+              return _el$3;
+            }
+          });
+        },
+        get children() {
+          return _tmpl$();
+        }
+      }), createComponent(Show, {
+        get when() {
+          return resolvedChildren();
+        },
+        get children() {
+          var _el$2 = _tmpl$2();
+          insert(_el$2, resolvedChildren);
+          effect(_p$ => {
+            var _v$ = cs('inline-block leading-inherit', props.contentClass),
+              _v$2 = props.contentStyle;
+            _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+            _p$.t = style(_el$2, _v$2, _p$.t);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$2;
+        }
+      })];
+    }
+  }));
 };
-delegateEvents(["click"]);
 
 export { Button as default };

package/es/Button/index.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".ant-compact .ant-btn-primary:not(:first-child) {\n  border-left: 1px solid white;\n}\n.ant-compact .ant-btn-primary:not(:last-child) {\n  border-right: 1px solid white;\n}";
+var css_248z = ".ant-compact-horizontal .ant-btn {\n  border-radius: 0;\n}\n.ant-compact-horizontal > :first-child.ant-btn, .ant-compact-horizontal > :first-child .ant-btn {\n  border-top-left-radius: var(--ant-button-border-radius);\n  border-bottom-left-radius: var(--ant-button-border-radius);\n}\n.ant-compact-horizontal > :last-child.ant-btn, .ant-compact-horizontal > :last-child .ant-btn {\n  border-top-right-radius: var(--ant-button-border-radius);\n  border-bottom-right-radius: var(--ant-button-border-radius);\n}\n.ant-compact-horizontal > :not(:first-child).ant-btn-primary, .ant-compact-horizontal > :not(:first-child) .ant-btn-primary {\n  border-left: 1px solid white;\n}\n.ant-compact-horizontal > :not(:last-child).ant-btn-primary, .ant-compact-horizontal > :not(:last-child) .ant-btn-primary {\n  border-right: 1px solid white;\n}\n\n.ant-compact-vertical .ant-btn {\n  border-radius: 0;\n}\n.ant-compact-vertical > :first-child.ant-btn, .ant-compact-vertical > :first-child .ant-btn {\n  border-top-left-radius: var(--ant-button-border-radius);\n  border-top-right-radius: var(--ant-button-border-radius);\n}\n.ant-compact-vertical > :last-child.ant-btn, .ant-compact-vertical > :last-child .ant-btn {\n  border-bottom-left-radius: var(--ant-button-border-radius);\n  border-bottom-right-radius: var(--ant-button-border-radius);\n}\n.ant-compact-vertical > :not(:first-child).ant-btn-primary, .ant-compact-vertical > :not(:first-child) .ant-btn-primary {\n  border-top: 1px solid white;\n}\n.ant-compact-vertical > :not(:last-child).ant-btn-primary, .ant-compact-vertical > :not(:last-child) .ant-btn-primary {\n  border-bottom: 1px solid white;\n}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/es/Checkbox/Group.d.ts

@@ -0,0 +1,19 @@
+import type { Component, JSX } from 'solid-js';
+import { type StringOrJSXElement, type Key } from '../types';
+interface CheckboxOption {
+    label: StringOrJSXElement;
+    value: Key;
+    disabled?: boolean;
+}
+export interface CheckboxGroupProps {
+    defaultValue?: Key[];
+    value?: Key[];
+    onChange?: (values: Key[]) => void;
+    options: string[] | number[] | CheckboxOption[];
+    block?: boolean;
+    class?: string;
+    style?: JSX.CSSProperties;
+    disabled?: boolean;
+}
+declare const Group: Component<CheckboxGroupProps>;
+export default Group;

package/es/Checkbox/Group.js

@@ -0,0 +1,49 @@
+import { createComponent, memo } from 'solid-js/web';
+import { For } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Checkbox from './index.js';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import Element from '../Element/index.js';
+
+const getOptionValue = option => typeof option === 'object' ? option.value : option;
+const Group = props => {
+  const [value, setValue] = createControllableValue(props, {
+    defaultValue: []
+  });
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs(props.block ? 'flex' : 'inline-flex', props.class);
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: option => createComponent(Checkbox, {
+          get checked() {
+            return value().includes(getOptionValue(option));
+          },
+          onChange: e => {
+            if (e.target.checked) {
+              setValue(l => [...l, getOptionValue(option)]);
+            } else {
+              setValue(l => l.filter(v => getOptionValue(v) !== getOptionValue(option)));
+            }
+          },
+          get disabled() {
+            return props.disabled;
+          },
+          get children() {
+            return [memo(() => typeof option === 'object' ? unwrapStringOrJSXElement(option.label) : option), ' '];
+          }
+        })
+      });
+    }
+  });
+};
+
+export { Group as default };

package/es/Checkbox/index.d.ts

@@ -0,0 +1,15 @@
+import { type ParentProps, type Component, type JSX } from 'solid-js';
+import Group from './Group';
+export interface CheckboxProps extends ParentProps {
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    checked?: boolean;
+    onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>;
+    class?: string;
+    style?: JSX.CSSProperties;
+    disabled?: boolean;
+}
+declare const Checkbox: Component<CheckboxProps> & {
+    Group: typeof Group;
+};
+export default Checkbox;

package/es/Checkbox/index.js

@@ -0,0 +1,60 @@
+import { 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 Group from './Group.js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span><input class="m-0 hidden"type=checkbox>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span>`);
+const Checkbox = props => {
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: false
+  });
+  return createComponent(Element, {
+    tag: "label",
+    get ["class"]() {
+      return cs('inline-flex cursor-pointer inline-flex items-center [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', props.class, props.disabled && 'cursor-not-allowed');
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild;
+        _el$2.addEventListener("change", e => {
+          if (props.disabled) return;
+          e.target.checked = setChecked(v => !v);
+          props.onChange?.(e);
+        });
+        effect(() => className(_el$, cs('w-16px h-16px rounded-[var(--ant-border-radius-sm)] relative', (() => {
+          if (checked()) {
+            return ['after:content-empty after:block after:absolute after:top-[calc(50%-1px)] after:left-1/2 after:-translate-1/2 after:-rotate-45 after:w-10px after:h-6px', 'after:border-solid after:border-2px after:border-t-0px after:border-r-0px', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)] [border:1px_solid_var(--ant-color-border)] after:border-[var(--ant-color-text-disabled)]' : 'bg-[var(--ant-color-primary)] after:border-white'];
+          }
+          if (props.indeterminate) {
+            return ['[border:1px_solid_var(--ant-color-border)]', 'after:content-empty after:block after:absolute after:top-1/2 after:left-1/2 after:-translate-1/2 after:w-8px after:h-8px', props.disabled ? 'after:bg-[var(--ant-color-text-disabled)]' : 'after:bg-[var(--ant-color-primary)]'];
+          }
+          return ['[border:1px_solid_var(--ant-color-border)]', props.disabled ? 'bg-[var(--ant-color-bg-container-disabled)]' : 'bg-[--ant-color-bg-container]'];
+        })())));
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return props.children;
+        },
+        get children() {
+          var _el$3 = _tmpl$2();
+          insert(_el$3, () => props.children);
+          effect(() => className(_el$3, cs('px-8px', props.disabled && 'text-[var(--ant-color-text-disabled)]')));
+          return _el$3;
+        }
+      })];
+    }
+  });
+};
+Checkbox.Group = Group;
+
+export { Checkbox as default };

package/es/CodeInput/index.d.ts

@@ -0,0 +1,18 @@
+import { type Component } from 'solid-js';
+import { type StyleProps } from '../types';
+export interface CodeInputProps extends StyleProps {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    /**
+     * 验证码输入完全触发
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * 验证码长度
+     * 默认：6
+     */
+    length?: number;
+}
+declare const CodeInput: Component<CodeInputProps>;
+export default CodeInput;

package/es/CodeInput/index.js

@@ -0,0 +1,72 @@
+import { createComponent } from 'solid-js/web';
+import { mergeProps, createMemo, createEffect, on, For, onCleanup } from 'solid-js';
+import { unset } from 'lodash-es';
+import cs from 'classnames';
+import Element from '../Element/index.js';
+import Input from '../Input/index.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+
+const CodeInput = _props => {
+  const props = mergeProps({
+    length: 6
+  }, _props);
+  const [_value, setValue] = createControllableValue(props);
+  const value = createMemo(() => _value() ?? '');
+  createEffect(on(value, () => {
+    onFocus();
+  }, {
+    defer: true
+  }));
+  const inputRefDict = {};
+  const onFocus = () => {
+    const index = Math.min(value().length, props.length - 1);
+    inputRefDict[index].focus();
+  };
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs(props.class, 'flex gap-[--ant-margin-sm] cursor-text');
+    },
+    get style() {
+      return props.style;
+    },
+    tabIndex: 0,
+    onFocus: onFocus,
+    onKeyDown: e => {
+      if (e.code !== 'Backspace') return;
+      setValue(e.metaKey ? '' : value().slice(0, -1));
+    },
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return Array(props.length).fill(0).map((_, i) => i);
+        },
+        children: item => {
+          onCleanup(() => {
+            unset(inputRefDict, item);
+          });
+          return createComponent(Input, {
+            ref: el => {
+              inputRefDict[item] = el;
+            },
+            "class": "!w-32px !text-center",
+            get value() {
+              return value()[item];
+            },
+            onChange: e => {
+              const v = e.target.value;
+              if (!v || value().length >= props.length) return;
+              const newValue = `${value()}${v}`.replace(/\D/g, '');
+              if (newValue.length === props.length) {
+                props.onComplete?.(newValue);
+              }
+              setValue(newValue.slice(0, props.length));
+            },
+            onFocus: onFocus
+          });
+        }
+      });
+    }
+  });
+};
+
+export { CodeInput as default };

package/es/Collapse/Item.d.ts

@@ -0,0 +1,46 @@
+import { type Accessor, type Component, type JSX, type ParentProps } from 'solid-js';
+import { type StyleProps, type StringOrJSXElement } from '../types';
+export interface CollapseItemProps extends ParentProps, StyleProps {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    label: StringOrJSXElement;
+    /**
+     * 类型
+     * 默认 'line'
+     */
+    type?: 'line' | 'card';
+    bordered?: boolean;
+    /**
+     * 设置折叠面板大小
+     * 默认 'middle'
+     */
+    size?: 'small' | 'middle' | 'large';
+    /**
+     * 自定义渲染每个面板右上角的内容
+     */
+    extra?: StringOrJSXElement;
+    /**
+     * 是否禁用 children
+     */
+    disabledChildren?: boolean;
+    /**
+     * 自定义切换图标
+     * 为 false 代表不显示图标
+     */
+    expandIcon?: boolean | ((options: {
+        isActive: Accessor<boolean>;
+    }) => JSX.Element);
+    /**
+     * 设置图标位置
+     * 默认 'left'
+     */
+    expandIconPosition?: 'left' | 'right' | 'end';
+    /**
+     * collapse header style
+     */
+    headerStyle?: JSX.CSSProperties;
+    bodyStyle?: JSX.CSSProperties;
+}
+declare const CollapseItem: Component<CollapseItemProps>;
+export default CollapseItem;