antd-solid 0.0.11 → 0.0.13

package/es/Modal/warning.js

@@ -0,0 +1,43 @@
+import { render, createComponent, mergeProps, insert, template } from 'solid-js/web';
+import Modal from './index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
+function warning(props) {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const dispose = render(() => createComponent(Modal, mergeProps({
+    width: "416px",
+    maskClosable: false,
+    closeIcon: false
+  }, props, {
+    get title() {
+      return (() => {
+        var _el$ = _tmpl$();
+          _el$.firstChild;
+        insert(_el$, () => props.title, null);
+        return _el$;
+      })();
+    },
+    get children() {
+      return (() => {
+        var _el$3 = _tmpl$2();
+        insert(_el$3, () => props.children);
+        return _el$3;
+      })();
+    },
+    defaultOpen: true,
+    onOk: () => {
+      document.body.removeChild(div);
+      dispose();
+      props.onOk?.();
+    },
+    onCancel: () => {
+      document.body.removeChild(div);
+      dispose();
+      props.onCancel?.();
+    }
+  })), div);
+}
+
+export { warning as default };

package/es/{Popconfirm.d.ts → Popconfirm/index.d.ts}

@@ -1,6 +1,6 @@
 import { type Component, type JSXElement } from 'solid-js';
-import { type TooltipProps } from './Tooltip';
-interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow'> {
+import { type TooltipProps } from '../Tooltip';
+export interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow' | 'getPopupContainer'> {
     title?: JSXElement;
     content?: JSXElement;
     children: JSXElement;

package/es/Popconfirm/index.js

@@ -0,0 +1,62 @@
+import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
+import Button from '../Button/index.js';
+import Tooltip from '../Tooltip/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<div><div class="mb-8px flex items-center"><span class="i-ant-design:exclamation-circle-fill text-#faad14"></span><span class="ml-8px font-600"></span></div><div class="ml-22px mb-8px"></div><div class=text-right>`);
+const Popconfirm = props => {
+  const mergedProps = mergeProps({
+    okText: '确定',
+    cancelText: '取消'
+  }, props);
+  const [tooltipProps] = splitProps(props, ['placement', 'arrow', 'getPopupContainer']);
+  const [open, setOpen] = createSignal(false);
+  return createComponent(Tooltip, mergeProps$1({
+    plain: true,
+    trigger: "click",
+    get open() {
+      return open();
+    },
+    onOpenChange: setOpen,
+    content: () => (() => {
+      var _el$ = _tmpl$(),
+        _el$2 = _el$.firstChild,
+        _el$3 = _el$2.firstChild,
+        _el$4 = _el$3.nextSibling,
+        _el$5 = _el$2.nextSibling,
+        _el$6 = _el$5.nextSibling;
+      insert(_el$4, () => mergedProps.title);
+      insert(_el$5, () => mergedProps.content);
+      insert(_el$6, createComponent(Button, {
+        "class": "ml-8px",
+        size: "small",
+        onClick: () => {
+          setOpen(false);
+          untrack(() => mergedProps.onCancel?.());
+        },
+        get children() {
+          return mergedProps.cancelText;
+        }
+      }), null);
+      insert(_el$6, createComponent(Button, {
+        "class": "ml-8px",
+        type: "primary",
+        size: "small",
+        onClick: () => {
+          setOpen(false);
+          untrack(() => mergedProps.onConfirm?.());
+        },
+        get children() {
+          return mergedProps.okText;
+        }
+      }), null);
+      return _el$;
+    })()
+  }, tooltipProps, {
+    get children() {
+      return mergedProps.children;
+    }
+  }));
+};
+
+export { Popconfirm as default };

package/es/{Popover.d.ts → Popover/index.d.ts}

@@ -1,6 +1,6 @@
 import { type Component, type JSXElement } from 'solid-js';
-import { type TooltipProps } from './Tooltip';
-interface PopoverProps extends TooltipProps {
+import { type TooltipProps } from '../Tooltip';
+export interface PopoverProps extends TooltipProps {
     title?: JSXElement;
 }
 declare const Popover: Component<PopoverProps>;

package/es/{Popover.js → Popover/index.js}

@@ -1,33 +1,28 @@
 import { createComponent, mergeProps, insert, template } from 'solid-js/web';
 import { Show } from 'solid-js';
-import Tooltip, { Content } from './Tooltip.js';
+import Tooltip, { unwrapContent } from '../Tooltip/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<div class="ant-mb-8px ant-flex ant-items-center"><span class="ant-text-[rgba(0,0,0,0.88)] ant-font-600">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,0.88)]">`);
+var _tmpl$ = /*#__PURE__*/template(`<div class="mb-8px flex items-center"><span class=font-600>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div><div>`);
 const Popover = props => {
   return createComponent(Tooltip, mergeProps({
-    mode: "light"
+    plain: true
   }, props, {
     content: close => (() => {
-      const _el$ = _tmpl$2(),
+      var _el$ = _tmpl$2(),
         _el$4 = _el$.firstChild;
       insert(_el$, createComponent(Show, {
         get when() {
           return props.title;
         },
         get children() {
-          const _el$2 = _tmpl$(),
+          var _el$2 = _tmpl$(),
             _el$3 = _el$2.firstChild;
           insert(_el$3, () => props.title);
           return _el$2;
         }
       }), _el$4);
-      insert(_el$4, createComponent(Content, {
-        get content() {
-          return props.content;
-        },
-        close: close
-      }));
+      insert(_el$4, () => unwrapContent(props.content, close));
       return _el$;
     })()
   }));

package/es/Progress/Circle.d.ts

@@ -0,0 +1,16 @@
+import { type Component } from 'solid-js';
+import { type ProgressProps } from '.';
+export interface CircleProps extends Omit<ProgressProps, 'type' | 'height'> {
+    /**
+     * 圆形进度条线的宽度，单位是进度条画布宽度的百分比
+     * 默认 6
+     */
+    strokeWidth?: number;
+    /**
+     * 进度条的高度
+     * 默认 120px
+     */
+    height?: string;
+}
+declare const Circle: Component<CircleProps>;
+export default Circle;

package/es/Progress/Circle.js

@@ -0,0 +1,122 @@
+import { createComponent, effect, setAttribute, insert, template } from 'solid-js/web';
+import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
+import 'lodash-es';
+import useSize from '../hooks/useSize.js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 100 100"role=presentation><circle cx=50 cy=50 stroke-linecap=round></circle><circle cx=50 cy=50 stroke-linecap=round opacity=1>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:check-outlined text-[var(--ant-color-success)] text-1.1667em">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined text-[var(--ant-color-error)] text-1.1667em">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="shrink-0 text-center text-1em absolute top-1/2 left-1/2 -translate-1/2">`);
+const Circle = _props => {
+  let ref;
+  const props = mergeProps({
+    percent: 0,
+    height: '120px',
+    showInfo: true,
+    strokeWidth: 6
+  }, _props);
+  const status = createMemo(() => {
+    if (props.status) return props.status;
+    return props.percent >= 100 ? 'success' : 'normal';
+  });
+  const radius = createMemo(() => 50 - props.strokeWidth / 2);
+  const perimeter = createMemo(() => radius() * 2 * Math.PI);
+  const size = useSize(() => ref);
+  return createComponent(Element, {
+    ref(r$) {
+      var _ref$ = ref;
+      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
+    },
+    "class": "flex items-center relative",
+    get style() {
+      return {
+        height: props.height,
+        width: typeof size()?.height === 'number' ? `${size().height}px` : undefined,
+        'font-size': typeof size()?.height === 'number' ? `${size().height / 5}px` : undefined
+      };
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.style.setProperty("stroke", "var(--ant-progress-remaining-color)");
+        _el$2.style.setProperty("stroke-dashoffset", "0");
+        _el$2.style.setProperty("transform", "rotate(-90deg)");
+        _el$2.style.setProperty("transform-origin", "50px 50px");
+        _el$2.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity 0.3s ease 0s");
+        _el$2.style.setProperty("fill-opacity", "0");
+        _el$3.style.setProperty("transform", "rotate(-90deg)");
+        _el$3.style.setProperty("transform-origin", "50px 50px");
+        _el$3.style.setProperty("transition", "stroke-dashoffset 0.3s ease 0s, stroke-dasharray 0.3s ease 0s, stroke 0.3s ease 0s, stroke-width 0.06s ease 0.3s, opacity ease 0s");
+        _el$3.style.setProperty("fill-opacity", "0");
+        effect(_p$ => {
+          var _v$ = radius(),
+            _v$2 = props.strokeWidth,
+            _v$3 = `${perimeter()}px, ${perimeter()}px`,
+            _v$4 = radius(),
+            _v$5 = props.strokeWidth,
+            _v$6 = {
+              normal: 'var(--ant-color-primary)',
+              success: 'var(--ant-color-success)',
+              error: 'var(--ant-color-error)'
+            }[status()],
+            _v$7 = `${perimeter()}px, ${perimeter()}px`,
+            _v$8 = `${perimeter() * (100 - props.percent) / 100}px`;
+          _v$ !== _p$.e && setAttribute(_el$2, "r", _p$.e = _v$);
+          _v$2 !== _p$.t && setAttribute(_el$2, "stroke-width", _p$.t = _v$2);
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("stroke-dasharray", _v$3) : _el$2.style.removeProperty("stroke-dasharray"));
+          _v$4 !== _p$.o && setAttribute(_el$3, "r", _p$.o = _v$4);
+          _v$5 !== _p$.i && setAttribute(_el$3, "stroke-width", _p$.i = _v$5);
+          _v$6 !== _p$.n && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("stroke", _v$6) : _el$3.style.removeProperty("stroke"));
+          _v$7 !== _p$.s && ((_p$.s = _v$7) != null ? _el$3.style.setProperty("stroke-dasharray", _v$7) : _el$3.style.removeProperty("stroke-dasharray"));
+          _v$8 !== _p$.h && ((_p$.h = _v$8) != null ? _el$3.style.setProperty("stroke-dashoffset", _v$8) : _el$3.style.removeProperty("stroke-dashoffset"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined,
+          n: undefined,
+          s: undefined,
+          h: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return props.showInfo;
+        },
+        get children() {
+          var _el$4 = _tmpl$4();
+          insert(_el$4, createComponent(Switch, {
+            get fallback() {
+              return `${props.percent}%`;
+            },
+            get children() {
+              return [createComponent(Match, {
+                get when() {
+                  return status() === 'success';
+                },
+                get children() {
+                  return _tmpl$2();
+                }
+              }), createComponent(Match, {
+                get when() {
+                  return status() === 'error';
+                },
+                get children() {
+                  return _tmpl$3();
+                }
+              })];
+            }
+          }));
+          return _el$4;
+        }
+      })];
+    }
+  });
+};
+
+export { Circle as default };

package/es/Progress/index.d.ts

@@ -1,4 +1,5 @@
 import { type Component } from 'solid-js';
+import Circle from './Circle';
 export interface ProgressProps {
     /**
      * 百分比
@@ -7,11 +8,10 @@ export interface ProgressProps {
     percent?: number;
     /**
      * 状态
-     * 默认 'default'
      */
-    status?: 'default' | 'success' | 'error';
+    status?: 'normal' | 'success' | 'error';
     /**
-     * 'line' 类型进度条的高度
+     * 进度条的高度
      * 默认 8
      */
     height?: number;
@@ -21,5 +21,7 @@ export interface ProgressProps {
      */
     showInfo?: boolean;
 }
-declare const Progress: Component<ProgressProps>;
+declare const Progress: Component<ProgressProps> & {
+    Circle: typeof Circle;
+};
 export default Progress;

package/es/Progress/index.js

@@ -1,71 +1,86 @@
-import { insert, createComponent, effect, className, template } from 'solid-js/web';
-import { mergeProps, Show, Switch, Match } from 'solid-js';
+import { createComponent, effect, className, insert, template } from 'solid-js/web';
+import { mergeProps, createMemo, Show, Switch, Match } from 'solid-js';
 import cs from 'classnames';
+import Circle from './Circle.js';
+import Element from '../Element/index.js';
 
-const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled ant-text-[var(--primary-color)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled ant-text-[var(--ant-color-error)]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class="ant-shrink-0 ant-min-w-40px ant-ml-8px ant-text-center">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-flex ant-items-center"><div>`);
+var _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[var(--ant-color-success)]">`),
+  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[var(--ant-color-error)]">`),
+  _tmpl$4 = /*#__PURE__*/template(`<span class="shrink-0 ml-8px text-center">`);
 const Progress = _props => {
   const props = mergeProps({
     percent: 0,
-    status: 'default',
     height: 8,
     showInfo: true
   }, _props);
-  return (() => {
-    const _el$ = _tmpl$4(),
-      _el$2 = _el$.firstChild;
-    _el$.style.setProperty("--ant-progress-remaining-color", "rgba(0, 0, 0, 0.06)");
-    insert(_el$, createComponent(Show, {
-      get when() {
-        return props.showInfo;
-      },
-      get children() {
-        const _el$3 = _tmpl$3();
-        insert(_el$3, createComponent(Switch, {
-          get fallback() {
-            return `${props.percent}%`;
-          },
-          get children() {
-            return [createComponent(Match, {
-              get when() {
-                return props.status === 'success' || props.percent >= 100;
-              },
-              get children() {
-                return _tmpl$();
-              }
-            }), createComponent(Match, {
-              get when() {
-                return props.status === 'error';
-              },
-              get children() {
-                return _tmpl$2();
-              }
-            })];
-          }
-        }));
-        return _el$3;
-      }
-    }), null);
-    effect(_p$ => {
-      const _v$ = cs('ant-w-full ant-bg-[var(--ant-progress-remaining-color)]', 'before:ant-content-empty before:ant-block before:ant-bg-[var(--primary-color)] before:ant-w-[var(--percent)] before:ant-h-full before:ant-rounded-inherit'),
-        _v$2 = `${props.height}px`,
-        _v$3 = `${props.height / 2}px`,
-        _v$4 = `${props.percent}%`;
-      _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("height", _v$2) : _el$2.style.removeProperty("height"));
-      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("border-radius", _v$3) : _el$2.style.removeProperty("border-radius"));
-      _v$4 !== _p$._v$4 && ((_p$._v$4 = _v$4) != null ? _el$2.style.setProperty("--percent", _v$4) : _el$2.style.removeProperty("--percent"));
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-    return _el$;
-  })();
+  const status = createMemo(() => {
+    if (props.status) return props.status;
+    return props.percent >= 100 ? 'success' : 'normal';
+  });
+  return createComponent(Element, {
+    "class": "flex items-center",
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        effect(_p$ => {
+          var _v$ = cs('w-full bg-[var(--ant-progress-remaining-color)]', 'before:content-empty before:block before:bg-[var(--color)] before:w-[var(--percent)] before:h-full before:rounded-inherit'),
+            _v$2 = `${props.height}px`,
+            _v$3 = `${props.height / 2}px`,
+            _v$4 = `${props.percent}%`,
+            _v$5 = {
+              normal: 'var(--ant-color-primary)',
+              success: 'var(--ant-color-success)',
+              error: 'var(--ant-color-error)'
+            }[status()];
+          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("height", _v$2) : _el$.style.removeProperty("height"));
+          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$.style.setProperty("border-radius", _v$3) : _el$.style.removeProperty("border-radius"));
+          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$.style.setProperty("--percent", _v$4) : _el$.style.removeProperty("--percent"));
+          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$.style.setProperty("--color", _v$5) : _el$.style.removeProperty("--color"));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined,
+          i: undefined
+        });
+        return _el$;
+      })(), createComponent(Show, {
+        get when() {
+          return props.showInfo;
+        },
+        get children() {
+          var _el$2 = _tmpl$4();
+          insert(_el$2, createComponent(Switch, {
+            get fallback() {
+              return `${props.percent}%`;
+            },
+            get children() {
+              return [createComponent(Match, {
+                get when() {
+                  return status() === 'success';
+                },
+                get children() {
+                  return _tmpl$2();
+                }
+              }), createComponent(Match, {
+                get when() {
+                  return status() === 'error';
+                },
+                get children() {
+                  return _tmpl$3();
+                }
+              })];
+            }
+          }));
+          return _el$2;
+        }
+      })];
+    }
+  });
 };
+Progress.Circle = Circle;
 
 export { Progress as default };

package/es/Radio/Button.d.ts

@@ -0,0 +1,7 @@
+import { type Component } from 'solid-js';
+import { type RadioProps } from '.';
+import { type ComponentSize } from '../types';
+declare const Button: Component<RadioProps & {
+    size: ComponentSize;
+}>;
+export default Button;

package/es/Radio/Button.js

@@ -0,0 +1,72 @@
+import { delegateEvents, createComponent, use, effect, insert, template } from 'solid-js/web';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import { wave } from '../utils/animation.js';
+import Element from '../Element/index.js';
+
+var _tmpl$ = /*#__PURE__*/template(`<input class=hidden type=radio>`),
+  _tmpl$2 = /*#__PURE__*/template(`<span>`);
+const Button = props => {
+  let input;
+  const [checked, setChecked] = createControllableValue(props, {
+    defaultValue: false,
+    defaultValuePropName: 'defaultChecked',
+    valuePropName: 'checked',
+    trigger: null
+  });
+  return createComponent(Element, {
+    tag: "label",
+    get ["class"]() {
+      return cs('relative px-[--ant-radio-button-padding] h-[--ant-radio-button-height] [border:1px_solid_var(--ant-color-border)] first:rounded-l-[--ant-radio-button-border-radius] last:rounded-r-[--ant-radio-button-border-radius] cursor-pointer flex-grow not[:first-child]:-ml-1px flex justify-center items-center [font-size:var(--ant-radio-button-font-size)]', checked() && cs(props.disabled ? 'bg-[var(--ant-radio-button-checked-bg-disabled)]' : 'text-[var(--ant-color-primary)] [border:1px_solid_var(--ant-color-primary)] z-1'), props.disabled ? 'cursor-not-allowed [border:1px_solid_var(--ant-color-border)] bg-[var(--ant-color-bg-container-disabled)] text-[var(--ant-color-text-disabled)]' : 'hover:text-[var(--ant-color-primary)]');
+    },
+    onClick: e => {
+      if (e.target === input) return;
+      wave(e.currentTarget, 'var(--ant-color-primary)');
+    },
+    get style() {
+      return {
+        '--ant-radio-button-padding': {
+          small: '7px',
+          middle: '15px',
+          large: '15px'
+        }[props.size],
+        '--ant-radio-button-height': {
+          small: '24px',
+          middle: '32px',
+          large: '40px'
+        }[props.size],
+        '--ant-radio-button-font-size': {
+          small: 'var(--ant-font-size)',
+          middle: 'var(--ant-font-size)',
+          large: 'var(--ant-font-size-lg)'
+        }[props.size],
+        '--ant-radio-button-border-radius': {
+          small: 'var(--ant-border-radius-sm)',
+          middle: 'var(--ant-border-radius)',
+          large: 'var(--ant-border-radius-lg)'
+        }[props.size]
+      };
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _tmpl$();
+        _el$.$$input = e => {
+          setChecked(e.target.checked);
+          props.onChange?.(e);
+        };
+        var _ref$ = input;
+        typeof _ref$ === "function" ? use(_ref$, _el$) : input = _el$;
+        effect(() => _el$.disabled = props.disabled);
+        effect(() => _el$.checked = checked());
+        return _el$;
+      })(), (() => {
+        var _el$2 = _tmpl$2();
+        insert(_el$2, () => props.children);
+        return _el$2;
+      })()];
+    }
+  });
+};
+delegateEvents(["input"]);
+
+export { Button as default };

package/es/Radio/Group.d.ts

@@ -0,0 +1,18 @@
+import { type Component, type JSX } from 'solid-js';
+import { type StyleProps, type ComponentSize, type Key } from '../types';
+export interface RadioGroupProps extends StyleProps {
+    defaultValue?: Key;
+    value?: Key;
+    onChange?: (e: Parameters<JSX.ChangeEventHandler<HTMLInputElement, Event>>[0], value: Key) => void;
+    optionType?: 'default' | 'button';
+    options: Array<{
+        label: JSX.Element;
+        value: Key;
+        disabled?: boolean;
+    }>;
+    block?: boolean;
+    disabled?: boolean;
+    size?: ComponentSize;
+}
+declare const Group: Component<RadioGroupProps>;
+export default Group;

package/es/Radio/Group.js

@@ -0,0 +1,57 @@
+import { createComponent, Dynamic } from 'solid-js/web';
+import { mergeProps, createSelector, For } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from '../hooks/createControllableValue.js';
+import Radio from './index.js';
+import Element from '../Element/index.js';
+import useComponentSize from '../hooks/useComponentSize.js';
+
+const Group = _props => {
+  const props = mergeProps({
+    optionType: 'default'
+  }, _props);
+  const [value, setValue] = createControllableValue(props, {
+    trigger: null
+  });
+  const isChecked = createSelector(value);
+  const size = useComponentSize(() => props.size);
+  return createComponent(Element, {
+    get ["class"]() {
+      return cs(props.class, props.block ? 'flex' : 'inline-flex', props.optionType === 'default' && 'gap-8px');
+    },
+    get style() {
+      return props.style;
+    },
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: option => createComponent(Dynamic, {
+          get component() {
+            return props.optionType === 'default' ? Radio : Radio.Button;
+          },
+          get disabled() {
+            return option.disabled ?? props.disabled;
+          },
+          get checked() {
+            return isChecked(option.value);
+          },
+          onChange: e => {
+            setValue(option.value);
+            e.target.value = option.value.toString();
+            props.onChange?.(e, option.value);
+          },
+          get size() {
+            return size();
+          },
+          get children() {
+            return option.label;
+          }
+        })
+      });
+    }
+  });
+};
+
+export { Group as default };

package/es/Radio/index.d.ts

@@ -0,0 +1,14 @@
+import { type Component, type ParentProps, type JSX } from 'solid-js';
+import Button from './Button';
+import Group from './Group';
+export interface RadioProps extends ParentProps {
+    defaultChecked?: boolean;
+    checked?: boolean;
+    onChange?: JSX.ChangeEventHandler<HTMLInputElement, Event>;
+    disabled?: boolean;
+}
+declare const Radio: Component<RadioProps> & {
+    Group: typeof Group;
+    Button: typeof Button;
+};
+export default Radio;