antd-solid 0.0.6 → 0.0.8

package/es/Input.js

@@ -0,0 +1,144 @@
+import { createComponent, Dynamic, mergeProps, insert, effect, className, style, template } from 'solid-js/web';
+import { isNil, omit } from 'lodash-es';
+import { splitProps, createMemo, Show } from 'solid-js';
+import cs from 'classnames';
+import createControllableValue from './hooks/createControllableValue.js';
+import Compact from './Compact.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div>`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-mr-4px">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-ml-4px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div class="ant-[display:var(--input-after-display)] ant-absolute ant-top-0 ant-bottom-0 ant-right-0 ant-h-[calc(100%-2px)] ant-translate-y-1px -ant-translate-x-1px">`);
+const statusClassDict = {
+  default: disabled => cs('ant-[border:1px_solid_var(--ant-color-border)]', !disabled && 'hover:ant-border-[var(--primary-color)] focus-within:ant-border-[var(--primary-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(5,145,255,0.1)]'),
+  error: disabled => cs('ant-[border:1px_solid_var(--ant-color-error)]', !disabled && 'hover:ant-border-[var(--light-error-color)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,38,5,.06)]'),
+  warning: disabled => cs('ant-[border:1px_solid_var(--warning-color)]', !disabled && 'hover:ant-border-[var(--color-warning-border-hover)] focus-within:ant-[box-shadow:0_0_0_2px_rgba(255,215,5,.1)]')
+};
+function CommonInput(props) {
+  const [{
+    style: style$1,
+    onChange,
+    onPressEnter,
+    onKeyDown
+  }, inputProps] = splitProps(props, ['defaultValue', 'value', 'class', 'addonBefore', 'addonAfter', 'suffix', 'onChange', 'onPressEnter', 'onKeyDown', 'actions', 'style']);
+  const [_, controllableProps] = splitProps(props, ['onChange']);
+  const [value, setValue] = createControllableValue(controllableProps);
+  const inputWrapClass = createMemo(() => cs('ant-px-11px ant-py-4px ant-rounded-6px', !props.textarea && 'ant-h-32px', props.addonBefore ? 'ant-rounded-l-0' : Compact.compactItemRoundedLeftClass, props.addonAfter ? 'ant-rounded-r-0' : Compact.compactItemRoundedRightClass, statusClassDict[props.status ?? 'default'](!!inputProps.disabled), Compact.compactItemRounded0Class, Compact.compactItemZIndexClass));
+  const hasPrefixOrSuffix = createMemo(() => !isNil(props.prefix) || !isNil(props.suffix) || !isNil(props.actions));
+  const inputJSX = createComponent(Dynamic, mergeProps({
+    get component() {
+      return props.textarea ? 'textarea' : 'input';
+    }
+  }, inputProps, {
+    get ["class"]() {
+      return cs('ant-w-full ant-[outline:none] ant-text-14px', !hasPrefixOrSuffix() && inputWrapClass(), inputProps.disabled && 'ant-bg-[var(--ant-color-bg-container-disabled)] ant-cursor-not-allowed');
+    },
+    get value() {
+      return value() ?? '';
+    },
+    onInput: e => {
+      setValue(e.target.value);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onChange?.(e);
+      if (Object.keys(props).includes('value')) {
+        e.target.value = value();
+      }
+    },
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        onPressEnter?.(e);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      onKeyDown?.(e);
+    }
+  }));
+  return (() => {
+    const _el$ = _tmpl$();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.addonBefore;
+      },
+      get children() {
+        const _el$2 = _tmpl$();
+        insert(_el$2, () => props.addonBefore);
+        effect(() => className(_el$2, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-r-0 ant-rounded-l-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedLeftClass)));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return hasPrefixOrSuffix();
+      },
+      fallback: inputJSX,
+      get children() {
+        const _el$3 = _tmpl$();
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.prefix;
+          },
+          get children() {
+            const _el$4 = _tmpl$2();
+            insert(_el$4, () => props.prefix);
+            return _el$4;
+          }
+        }), null);
+        insert(_el$3, inputJSX, null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.suffix;
+          },
+          get children() {
+            const _el$5 = _tmpl$3();
+            insert(_el$5, () => props.suffix);
+            return _el$5;
+          }
+        }), null);
+        insert(_el$3, createComponent(Show, {
+          get when() {
+            return props.actions;
+          },
+          get children() {
+            const _el$6 = _tmpl$4();
+            insert(_el$6, () => props.actions);
+            return _el$6;
+          }
+        }), null);
+        effect(() => className(_el$3, cs('ant-flex ant-items-center ant-w-full ant-relative ant-[--input-after-display:none] hover:ant-[--input-after-display:block] p:hover-child[input]:ant-border-[var(--primary-color)]', inputWrapClass())));
+        return _el$3;
+      }
+    }), null);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return props.addonAfter;
+      },
+      get children() {
+        const _el$7 = _tmpl$();
+        insert(_el$7, () => props.addonAfter);
+        effect(() => className(_el$7, cs('ant-shrink-0 ant-flex ant-justify-center ant-items-center ant-px-11px ant-bg-[rgba(0,0,0,.02)] ant-[border:1px_solid_var(--ant-color-border)] ant-border-l-0 ant-rounded-r-6px ant-text-14px', Compact.compactItemRounded0Class, Compact.compactItemRoundedRightClass)));
+        return _el$7;
+      }
+    }), null);
+    effect(_p$ => {
+      const _v$ = cs('ant-flex ant-w-full', Compact.compactItemClass),
+        _v$2 = style$1;
+      _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$;
+  })();
+}
+const Input = props => {
+  return createComponent(CommonInput, mergeProps(() => omit(props, ['actions'])));
+};
+Input.TextArea = props => {
+  return createComponent(CommonInput, mergeProps({
+    textarea: true
+  }, () => omit(props, ['prefix', 'suffix', 'actions'])));
+};
+
+export { CommonInput, Input as default };

package/es/InputNumber.d.ts

@@ -0,0 +1,11 @@
+import { type Component } from 'solid-js';
+import { type InputProps } from './Input';
+export interface InputNumberProps extends Omit<InputProps, 'defaultValue' | 'value' | 'onChange' | 'inputAfter' | 'onKeyDown' | 'min' | 'max' | 'suffix'> {
+    defaultValue?: number | null | undefined;
+    value?: number | null | undefined;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+}
+declare const InputNumber: Component<InputNumberProps>;
+export default InputNumber;

package/es/InputNumber.js

@@ -0,0 +1,92 @@
+import { delegateEvents, createComponent, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, untrack, createEffect, on } from 'solid-js';
+import { CommonInput } from './Input.js';
+import { isNil, clamp } from 'lodash-es';
+import { dispatchEventHandlerUnion } from './utils/solid.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div class="ant-flex ant-flex-col ant-h-full ant-w-24px ant-[border-left:1px_solid_var(--ant-color-border)]"><div class="ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:up-outlined"></div></div><div class="ant-[border-top:1px_solid_var(--ant-color-border)] ant-text-12px ant-flex ant-justify-center ant-items-center ant-h-1/2 ant-cursor-pointer ant-opacity-70 hover:ant-h-100% hover:ant-text-[var(--primary-color)] ant-transition-color ant-transition-height ant-transition-duration-500"><div class="i-ant-design:down-outlined">`);
+const isEmptyValue = value => isNil(value) || value === '';
+const InputNumber = _props => {
+  const props = mergeProps({
+    min: -Infinity,
+    max: Infinity
+  }, _props);
+  const [_, inputProps] = splitProps(props, ['defaultValue', 'value', 'onChange', 'onBlur']);
+  const clampValue = v => untrack(() => clamp(v, props.min, props.max));
+  let prev = null;
+  const updatePrev = v => {
+    if (prev === v) return;
+    prev = v;
+    props.onChange?.(prev);
+  };
+  const [value, setValue] = createSignal(untrack(() => props.value ?? props.defaultValue));
+  createEffect(on(() => props.value, () => {
+    setValue(props.value);
+  }, {
+    defer: true
+  }));
+  const add = addon => {
+    let newValue;
+    if (isEmptyValue(value())) {
+      newValue = clampValue(addon);
+    } else {
+      const num = Number(value());
+      newValue = Number.isNaN(num) ? null : clampValue(num + addon);
+    }
+    if (!Object.keys(props).includes('value')) {
+      setValue(newValue);
+    }
+    updatePrev(newValue);
+  };
+  const up = () => {
+    add(1);
+  };
+  const down = () => {
+    add(-1);
+  };
+  return createComponent(CommonInput, mergeProps$1(inputProps, {
+    get actions() {
+      return (() => {
+        const _el$ = _tmpl$(),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.nextSibling;
+        _el$2.$$click = up;
+        _el$3.$$click = down;
+        return _el$;
+      })();
+    },
+    get value() {
+      return `${value() ?? ''}`;
+    },
+    onKeyDown: e => {
+      switch (e.key) {
+        case 'ArrowUp':
+          up();
+          e.preventDefault();
+          return;
+        case 'ArrowDown':
+          down();
+          e.preventDefault();
+      }
+    },
+    onChange: e => {
+      const newValue = e.target.value;
+      setValue(newValue);
+      let newValueNum = Number(newValue);
+      if (Number.isNaN(newValueNum)) return;
+      if (isEmptyValue(newValue)) {
+        newValueNum = null;
+      } else {
+        newValueNum = clampValue(newValueNum);
+      }
+      updatePrev(newValueNum);
+    },
+    onBlur: e => {
+      setValue(props.value ?? prev);
+      dispatchEventHandlerUnion(props.onBlur, e);
+    }
+  }));
+};
+delegateEvents(["click"]);
+
+export { InputNumber as default };

package/es/InputNumber.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/es/InputNumber.test.js

@@ -0,0 +1,42 @@
+import { createComponent } from 'solid-js/web';
+import { describe, it, vi, expect } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
+import InputNumber from './InputNumber.js';
+import '@testing-library/jest-dom';
+
+describe('InputNumber component', () => {
+  it('onChange', () => {
+    const onChange = vi.fn();
+    const {
+      getByPlaceholderText
+    } = render(() => createComponent(InputNumber, {
+      placeholder: "input-number",
+      onChange: onChange
+    }));
+    const input = getByPlaceholderText('input-number');
+    input.value = '123';
+    fireEvent.input(input);
+    expect(onChange).toHaveBeenLastCalledWith(123);
+    input.value = '1234';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    expect(onChange).toHaveBeenLastCalledWith(1234);
+    input.value = '1234';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.0';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(2);
+    input.value = '1234.01';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(3);
+    input.value = '123x';
+    fireEvent.input(input);
+    expect(onChange).toBeCalledTimes(3);
+    fireEvent.blur(input);
+    expect(onChange).toBeCalledTimes(3);
+  });
+});

package/es/Modal.d.ts

@@ -0,0 +1,47 @@
+import { type JSXElement, type Ref } from 'solid-js';
+export interface ModalInstance {
+    open: () => void;
+    close: () => void;
+}
+export interface ModalProps {
+    ref?: Ref<ModalInstance>;
+    title?: JSXElement;
+    defaultOpen?: boolean;
+    width?: string;
+    height?: string;
+    children?: JSXElement;
+    /**
+     * 垂直居中展示 Modal
+     */
+    centered?: boolean;
+    /**
+     * 点击蒙层是否允许关闭
+     * 默认 true
+     */
+    maskClosable?: boolean;
+    /**
+     * 设置为 false 时隐藏关闭按钮
+     */
+    closeIcon?: boolean;
+    footer?: boolean | ((modal: ModalInstance) => JSXElement);
+    /**
+     * 关闭时销毁 Modal 里的子元素
+     */
+    destroyOnClose?: boolean;
+    /**
+     * 返回 true，会自动关闭 modal
+     */
+    onOk?: () => boolean | Promise<boolean>;
+    afterClose?: () => void;
+    /**
+     * 自定义渲染对话框
+     */
+    modalRender?: () => JSXElement;
+}
+export interface MethodProps extends Pick<ModalProps, 'title' | 'children' | 'onOk' | 'afterClose'> {
+}
+declare function Modal(_props: ModalProps): import("solid-js").JSX.Element;
+declare namespace Modal {
+    var warning: (props: MethodProps) => void;
+}
+export default Modal;

package/es/Modal.js

@@ -0,0 +1,195 @@
+import { delegateEvents, createComponent, Portal, insert, memo, effect, className, render, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { mergeProps, createSignal, untrack, Show } from 'solid-js';
+import Button from './Button.js';
+import cs from 'classnames';
+
+const _tmpl$ = /*#__PURE__*/template(`<span class="i-ant-design:close-outlined">`),
+  _tmpl$2 = /*#__PURE__*/template(`<div class="ant-flex ant-gap-8px ant-justify-end">`),
+  _tmpl$3 = /*#__PURE__*/template(`<div class="ant-mt-12px">`),
+  _tmpl$4 = /*#__PURE__*/template(`<div><div class="ant-text-[rgba(0,0,0,.88)] ant-text-16px ant-font-600 ant-mb-8px"></div><div class="ant-grow">`),
+  _tmpl$5 = /*#__PURE__*/template(`<div>`),
+  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle ant-text-22px ant-mr-12px ant-text-[var(--warning-color)]">`),
+  _tmpl$7 = /*#__PURE__*/template(`<div class="ant-ml-34px">`);
+function Modal(_props) {
+  const props = mergeProps({
+    footer: true
+  }, _props);
+  const [open, setOpen] = createSignal(props.defaultOpen ?? false);
+  const [hide, setHide] = createSignal(false);
+  const instance = {
+    open() {
+      setOpen(true);
+      setHide(false);
+    },
+    close() {
+      untrack(() => {
+        if (props.destroyOnClose) {
+          setOpen(false);
+        } else {
+          setHide(true);
+        }
+      });
+    }
+  };
+  untrack(() => {
+    if (typeof props.ref === 'function') {
+      props.ref?.(instance);
+    }
+  });
+  const close = () => {
+    instance.close();
+    props.afterClose?.();
+  };
+  const [confirmLoading, setConfirmLoading] = createSignal(false);
+  return createComponent(Show, {
+    get when() {
+      return open();
+    },
+    get children() {
+      return createComponent(Portal, {
+        get children() {
+          const _el$ = _tmpl$5();
+          _el$.$$click = () => {
+            if (props.maskClosable ?? true) {
+              close();
+            }
+          };
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return typeof props.modalRender !== 'function';
+            },
+            get fallback() {
+              return props.modalRender();
+            },
+            get children() {
+              const _el$2 = _tmpl$4(),
+                _el$4 = _el$2.firstChild,
+                _el$5 = _el$4.nextSibling;
+              _el$2.$$click = e => {
+                e.stopPropagation();
+              };
+              insert(_el$2, createComponent(Show, {
+                get when() {
+                  return props.closeIcon !== false;
+                },
+                get children() {
+                  return createComponent(Button, {
+                    type: "text",
+                    get ["class"]() {
+                      return cs('ant-rm-size-btn !ant-w-22px !ant-h-22px !ant-flex !ant-justify-center !ant-items-center ant-text-center ant-text-18px !ant-absolute !ant-top-16px !ant-right-16px ant-z-1000 ant-text-[rgba(0,0,0,.45)] hover:!ant-text-[rgba(0,0,0,.88)]');
+                    },
+                    onClick: close,
+                    get children() {
+                      return _tmpl$();
+                    }
+                  });
+                }
+              }), _el$4);
+              insert(_el$4, () => props.title);
+              insert(_el$5, () => props.children);
+              insert(_el$2, createComponent(Show, {
+                get when() {
+                  return props.footer !== false;
+                },
+                get children() {
+                  const _el$6 = _tmpl$3();
+                  insert(_el$6, createComponent(Show, {
+                    get when() {
+                      return typeof props.footer !== 'function';
+                    },
+                    get fallback() {
+                      return memo(() => typeof props.footer === 'function')() && props.footer(instance);
+                    },
+                    get children() {
+                      const _el$7 = _tmpl$2();
+                      insert(_el$7, createComponent(Button, {
+                        onClick: close,
+                        children: "\u53D6\u6D88"
+                      }), null);
+                      insert(_el$7, createComponent(Button, {
+                        type: "primary",
+                        get loading() {
+                          return confirmLoading();
+                        },
+                        onClick: async () => {
+                          if (!props.onOk) return;
+                          let res = props.onOk?.();
+                          if (res instanceof Promise) {
+                            setConfirmLoading(true);
+                            res = await res.finally(() => setConfirmLoading(false));
+                          }
+                          if (res) {
+                            instance.close();
+                          }
+                        },
+                        children: "\u786E\u5B9A"
+                      }), null);
+                      return _el$7;
+                    }
+                  }));
+                  return _el$6;
+                }
+              }), null);
+              effect(_p$ => {
+                const _v$ = cs('ant-absolute ant-px-24px ant-py-20px ant-rounded-8px ant-overflow-hidden ant-bg-white ant-flex ant-flex-col',
+                  // '!ant-[animation-duration:.5s]',
+                  !props.centered && 'ant-top-100px'),
+                  _v$2 = props.width ?? '520px',
+                  _v$3 = props.height;
+                _v$ !== _p$._v$ && className(_el$2, _p$._v$ = _v$);
+                _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
+                _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
+                return _p$;
+              }, {
+                _v$: undefined,
+                _v$2: undefined,
+                _v$3: undefined
+              });
+              return _el$2;
+            }
+          }));
+          effect(_p$ => {
+            const _v$4 = cs('ant-fixed ant-justify-center ant-inset-0 ant-bg-[rgba(0,0,0,.45)] ant-flex ant-z-1000', props.centered && 'ant-items-center'),
+              _v$5 = hide() ? 'none' : undefined;
+            _v$4 !== _p$._v$4 && className(_el$, _p$._v$4 = _v$4);
+            _v$5 !== _p$._v$5 && ((_p$._v$5 = _v$5) != null ? _el$.style.setProperty("display", _v$5) : _el$.style.removeProperty("display"));
+            return _p$;
+          }, {
+            _v$4: undefined,
+            _v$5: undefined
+          });
+          return _el$;
+        }
+      });
+    }
+  });
+}
+Modal.warning = props => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  const dispose = render(() => createComponent(Modal, mergeProps$1({
+    width: "416px",
+    maskClosable: false,
+    closeIcon: false
+  }, props, {
+    get title() {
+      return [_tmpl$6(), memo(() => props.title)];
+    },
+    get children() {
+      return (() => {
+        const _el$9 = _tmpl$7();
+        insert(_el$9, () => props.children);
+        return _el$9;
+      })();
+    },
+    defaultOpen: true,
+    afterClose: () => {
+      document.body.removeChild(div);
+      dispose();
+      props.afterClose?.();
+    }
+  })), div);
+};
+delegateEvents(["click"]);
+
+export { Modal as default };

package/es/Popconfirm.d.ts

@@ -0,0 +1,21 @@
+import { type Component, type JSXElement } from 'solid-js';
+import { type TooltipProps } from './Tooltip';
+interface PopconfirmProps extends Pick<TooltipProps, 'placement' | 'arrow'> {
+    title?: JSXElement;
+    content?: JSXElement;
+    children: JSXElement;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /**
+     * 确认按钮文字
+     * 默认：确定
+     */
+    okText?: string;
+    /**
+     * 取消按钮文字
+     * 默认：取消
+     */
+    cancelText?: string;
+}
+declare const Popconfirm: Component<PopconfirmProps>;
+export default Popconfirm;

package/es/Popconfirm.js

@@ -0,0 +1,64 @@
+import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
+import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
+import Button from './Button.js';
+import Tooltip from './Tooltip.js';
+
+const _tmpl$ = /*#__PURE__*/template(`<div><div class="ant-mb-8px ant-flex ant-items-center"><span class="i-ant-design:exclamation-circle-fill ant-text-#faad14"></span><span class="ant-ml-8px ant-text-[rgba(0,0,0,0.88)] ant-font-600"></span></div><div class="ant-ml-22px ant-mb-8px ant-text-[rgba(0,0,0,0.88)]"></div><div class="ant-text-right">`);
+const Popconfirm = props => {
+  const mergedProps = mergeProps({
+    okText: '确定',
+    cancelText: '取消'
+  }, props);
+  const [tooltipProps] = splitProps(props, ['placement', 'arrow']);
+  const [open, setOpen] = createSignal(false);
+  return createComponent(Tooltip, mergeProps$1({
+    mode: "light",
+    trigger: "click",
+    get open() {
+      return open();
+    },
+    onOpenChange: setOpen,
+    get content() {
+      return (() => {
+        const _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": "ant-ml-8px",
+          size: "small",
+          onClick: () => {
+            setOpen(false);
+            untrack(() => mergedProps.onCancel?.());
+          },
+          get children() {
+            return mergedProps.cancelText;
+          }
+        }), null);
+        insert(_el$6, createComponent(Button, {
+          "class": "ant-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

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

package/es/Popover.js

@@ -0,0 +1,36 @@
+import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { Show } from 'solid-js';
+import Tooltip, { Content } from './Tooltip.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)]">`);
+const Popover = props => {
+  return createComponent(Tooltip, mergeProps({
+    mode: "light"
+  }, props, {
+    content: close => (() => {
+      const _el$ = _tmpl$2(),
+        _el$4 = _el$.firstChild;
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return props.title;
+        },
+        get children() {
+          const _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
+      }));
+      return _el$;
+    })()
+  }));
+};
+
+export { Popover as default };

package/es/Progress.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: import("solid-js").Component<Omit<Omit<import("antd").ProgressProps & import("react").RefAttributes<HTMLDivElement>, "className"> & {
+    class?: string | undefined;
+}, "children"> & {
+    children?: import("solid-js").JSX.Element;
+}>;
+export default _default;