antd-solid 0.0.11 → 0.0.13

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

@@ -0,0 +1,32 @@
+import { type Component, type ParentProps, type JSX } from 'solid-js';
+import './index.scss';
+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>);
+    /**
+     * 默认: middle
+     */
+    size?: 'small' | 'middle' | 'large';
+    class?: string;
+    style?: JSX.CSSProperties;
+    /**
+     * 按钮加载中状态
+     * '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

@@ -0,0 +1,123 @@
+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 './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';
+
+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: '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, 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 => {
+  console.log('onMount button before');
+  onMount(() => {
+    console.log('onMount button');
+  });
+  console.log('onMount button after');
+  const props = mergeProps({
+    type: 'default',
+    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(() => 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 (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)');
+      }
+    },
+    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;
+        }
+      })];
+    }
+  }));
+};
+
+export { Button as default };

package/es/Button/index.scss.js

@@ -0,0 +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-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;

package/es/Collapse/Item.js

@@ -0,0 +1,130 @@
+import { delegateEvents, createComponent, Dynamic, insert, effect, className, style, template, memo } from 'solid-js/web';
+import { mergeProps, useContext, Show } from 'solid-js';
+import cs from 'classnames';
+import { Transition } from 'solid-transition-group';
+import { unwrapStringOrJSXElement } from '../utils/solid.js';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Element from '../Element/index.js';
+import CollapseContext from './context.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+import { getElementClass, getElementCssVariables } from './utils.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<span>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><span class="inline-flex items-center gap-[--ant-margin-sm]"></span><span class="inline-flex items-center gap-[--ant-margin-sm]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class=overflow-hidden><div>`);
+const CollapseItem = _props => {
+  const props = mergeProps({
+    type: 'line',
+    bordered: true,
+    expandIconPosition: 'left'
+  }, _props);
+  const {
+    list
+  } = useContext(CollapseContext);
+  const size = useComponentSize(() => props.size);
+  const [open, setOpen] = createControllableValue(props, {
+    defaultValuePropName: 'defaultOpen',
+    valuePropName: 'open',
+    trigger: 'onOpenChange'
+  });
+  const getExpandIcon = position => {
+    return createComponent(Show, {
+      get when() {
+        return !props.disabledChildren && props.expandIcon !== false && props.expandIconPosition === position;
+      },
+      get children() {
+        return memo(() => typeof props.expandIcon === 'function')() ? props.expandIcon({
+          isActive: () => !!open()
+        }) : (() => {
+          var _el$ = _tmpl$();
+          effect(() => className(_el$, cs('i-ant-design:right-outlined', 'duration-.3s', open() && 'rotate-[90deg]')));
+          return _el$;
+        })();
+      }
+    });
+  };
+  return createComponent(Dynamic, {
+    component: list ? 'div' : Element,
+    get ["class"]() {
+      return list ? props.class : cs(getElementClass(props.type), props.class);
+    },
+    get style() {
+      return {
+        ...(list ? {} : getElementCssVariables(props.type, size())),
+        ...props.style
+      };
+    },
+    get children() {
+      return [(() => {
+        var _el$2 = _tmpl$2(),
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$3.nextSibling;
+        _el$2.$$click = () => {
+          if (props.disabledChildren) return;
+          setOpen(!open());
+        };
+        insert(_el$3, () => getExpandIcon('left'), null);
+        insert(_el$3, () => unwrapStringOrJSXElement(props.label), null);
+        insert(_el$3, () => getExpandIcon('right'), null);
+        insert(_el$4, () => unwrapStringOrJSXElement(props.extra), null);
+        insert(_el$4, () => getExpandIcon('end'), null);
+        effect(_p$ => {
+          var _v$ = cs('text-[--ant-color-text-heading] flex justify-between items-center cursor-pointer', props.type === 'card' && 'bg-[var(--ant-collapse-header-bg)] p-[--ant-collapse-header-padding]'),
+            _v$2 = props.headerStyle;
+          _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;
+      })(), createComponent(Transition, {
+        onEnter: (el, done) => {
+          el.animate([{
+            height: '0px'
+          }, {
+            height: `${el.scrollHeight}px`
+          }], {
+            duration: 300
+          }).finished.finally(done);
+        },
+        onExit: (el, done) => {
+          el.animate([{
+            height: `${el.scrollHeight}px`
+          }, {
+            height: '0px'
+          }], {
+            duration: 300
+          }).finished.finally(done);
+        },
+        get children() {
+          return createComponent(Show, {
+            get when() {
+              return open();
+            },
+            get children() {
+              var _el$5 = _tmpl$3(),
+                _el$6 = _el$5.firstChild;
+              insert(_el$6, () => props.children);
+              effect(_p$ => {
+                var _v$3 = cs('p-[--ant-collapse-content-padding]', props.type === 'card' && '[border-top:1px_solid_var(--ant-color-border)]'),
+                  _v$4 = props.bodyStyle;
+                _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
+                _p$.t = style(_el$6, _v$4, _p$.t);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
+              return _el$5;
+            }
+          });
+        }
+      })];
+    }
+  });
+};
+delegateEvents(["click"]);
+
+export { CollapseItem as default };

package/es/Collapse/context.d.ts

@@ -0,0 +1,5 @@
+declare const CollapseContext: import("solid-js").Context<{
+    /** 是否时手风琴列表 */
+    list: boolean;
+}>;
+export default CollapseContext;

package/es/Collapse/context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'solid-js';
+
+const CollapseContext = createContext({
+  /** 是否时手风琴列表 */
+  list: false
+});
+
+export { CollapseContext as default };