@bioturing/components 0.22.0 → 0.23.0

package/dist/components/button/style.css

@@ -1 +1 @@
-@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)>span:not(.ds-btn-loading-icon){opacity:0}}
+@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)>*:not(.ds-btn-loading-icon){opacity:0}}

package/dist/components/form/component.js

@@ -6,19 +6,21 @@ import s from "antd/es/form/FormList";
 import { FormProvider as n } from "antd/es/form/context";
 import p from "antd/es/form/hooks/useFormInstance";
 import { FormItem as F } from "./item.js";
+import { FormLabel as f } from "./label.js";
 import './style.css';/* empty css          */
-const f = ({
+const a = ({
   ...r
-}) => /* @__PURE__ */ o(t, { ...r }), v = Object.assign(f, {
+}) => /* @__PURE__ */ o(t, { ...r }), x = Object.assign(a, {
   useForm: i,
   useFormInstance: p,
   useWatch: e,
   Item: F,
   List: s,
   ErrorList: m,
-  Provider: n
+  Provider: n,
+  Label: f
 });
 export {
-  v as Form
+  x as Form
 };
 //# sourceMappingURL=component.js.map

package/dist/components/form/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n  FormProps as AntdFormProps,\n  default as AntdInternalForm,\n  useForm,\n  useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = any> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = any>\n  extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = any,>({\n  ...rest\n}: InternalFormProps<Values>) => {\n  return <AntdInternalForm {...rest} />;\n};\n\nexport const Form = Object.assign(InternalForm, {\n  useForm,\n  useFormInstance,\n  useWatch,\n  Item: FormItem,\n  List: FormList,\n  ErrorList,\n  Provider: FormProvider,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAAe,CAAgB;AAAA,EACnC,GAAGC;AACL,MACS,gBAAAC,EAACC,GAAkB,EAAA,GAAGF,EAAM,CAAA,GAGxBG,IAAO,OAAO,OAAOJ,GAAc;AAAA,EAC9C,SAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAUC;AACZ,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n  FormProps as AntdFormProps,\n  default as AntdInternalForm,\n  useForm,\n  useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\nimport { FormLabel } from \"./label\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = unknown> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = unknown>\n  extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = unknown,>({\n  ...rest\n}: InternalFormProps<Values>) => {\n  return <AntdInternalForm {...rest} />;\n};\n\nexport const Form = Object.assign(InternalForm, {\n  useForm,\n  useFormInstance,\n  useWatch,\n  Item: FormItem,\n  List: FormList,\n  ErrorList,\n  Provider: FormProvider,\n  Label: FormLabel,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider","FormLabel"],"mappings":";;;;;;;;;;AAuBA,MAAMA,IAAe,CAAoB;AAAA,EACvC,GAAGC;AACL,MACS,gBAAAC,EAACC,GAAkB,EAAA,GAAGF,EAAM,CAAA,GAGxBG,IAAO,OAAO,OAAOJ,GAAc;AAAA,EAC9C,SAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAUC;AAAA,EACV,OAAOC;AACT,CAAC;"}

package/dist/components/form/item.js

@@ -1,45 +1,30 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { useMemo as i, isValidElement as a } from "react";
-import c from "antd/es/form/FormItem";
-import { QuestionIcon as f } from "@bioturing/assets";
-import { useCls as p } from "../utils/antdUtils.js";
-import { IconButton as d } from "../icon-button/component.js";
-const y = ({
+import { jsx as r } from "react/jsx-runtime";
+import p from "antd/es/form/FormItem";
+import { FormLabel as s } from "./label.js";
+const f = ({
   tooltip: m,
-  label: r,
-  optionalMark: s,
-  requiredMark: o = !0,
-  ...t
-}) => {
-  const n = p(), l = i(
-    () => r ? /* @__PURE__ */ e(
-      "span",
+  label: o,
+  optionalMark: t,
+  requiredMark: e = !0,
+  ...n
+}) => /* @__PURE__ */ r(
+  p,
+  {
+    label: /* @__PURE__ */ r(
+      s,
       {
-        className: n(
-          "form-item-label-inner",
-          o && "form-item-label-with-required-mark"
-        ),
-        children: [
-          r,
-          m && /* @__PURE__ */ e(
-            d,
-            {
-              className: n("form-item-explaination-icon"),
-              label: typeof m == "string" || a(m) ? m : void 0,
-              children: /* @__PURE__ */ e(f, {})
-            }
-          ),
-          s && /* @__PURE__ */ e("span", { className: n("form-item-label-optional-mark"), children: typeof s == "boolean" ? "(optional)" : s }),
-          o !== !1 && /* @__PURE__ */ e("span", { className: n("form-item-label-required-mark"), children: typeof o == "boolean" ? "*" : o })
-        ]
+        label: o,
+        tooltip: m,
+        optionalMark: t,
+        requiredMark: e,
+        as: "span"
       }
-    ) : void 0,
-    [r, m, s, o, n]
-  );
-  return /* @__PURE__ */ e(c, { label: l, ...t });
-};
+    ),
+    ...n
+  }
+);
 export {
-  y as FormItem
+  f as FormItem
 };
 //# sourceMappingURL=item.js.map

package/dist/components/form/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement, useMemo } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether the field is optional. If true, the label will be marked as optional.\n   * @default false\n   */\n  optionalMark?: boolean | React.ReactNode;\n  /**\n   * Whether show the asterisk when the field is required\n   * @default true\n   */\n  requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  requiredMark = true,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n\n  // requiredMark is used in the className below\n  const renderedLabel = useMemo(\n    () =>\n      label ? (\n        <span\n          className={cls(\n            \"form-item-label-inner\",\n            requiredMark && \"form-item-label-with-required-mark\"\n          )}\n        >\n          {[\n            label,\n            tooltip && (\n              <IconButton\n                className={cls(\"form-item-explaination-icon\")}\n                label={\n                  typeof tooltip == \"string\" || isValidElement(tooltip)\n                    ? tooltip\n                    : undefined\n                }\n              >\n                <QuestionIcon />\n              </IconButton>\n            ),\n            optionalMark && (\n              <span className={cls(\"form-item-label-optional-mark\")}>\n                {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n              </span>\n            ),\n            requiredMark !== false && (\n              <span className={cls(\"form-item-label-required-mark\")}>\n                {typeof requiredMark == \"boolean\" ? \"*\" : requiredMark}\n              </span>\n            ),\n          ]}\n        </span>\n      ) : undefined,\n    [label, tooltip, optionalMark, requiredMark, cls]\n  );\n\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","cls","useCls","renderedLabel","useMemo","jsx","IconButton","isValidElement","QuestionIcon","AntdFormItem"],"mappings":";;;;;;;AAyBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GAGbC,IAAgBC;AAAA,IACpB,MACEP,IACE,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACT;AAAA,UACAF,KAAgB;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,UACCF;AAAA,UACAD,KACE,gBAAAS;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWL,EAAI,6BAA6B;AAAA,cAC5C,OACE,OAAOL,KAAW,YAAYW,EAAeX,CAAO,IAChDA,IACA;AAAA,cAGN,4BAACY,GAAa,CAAA,CAAA;AAAA,YAAA;AAAA,UAChB;AAAA,UAEFV,KACG,gBAAAO,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAH,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,UAEFC,MAAiB,MACd,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,MAAMA,EAC5C,CAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAEA;AAAA,IACN,CAACF,GAAOD,GAASE,GAAcC,GAAcE,CAAG;AAAA,EAClD;AAEA,SAAQ,gBAAAI,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { FormLabel } from \"./label\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether the field is optional. If true, the label will be marked as optional.\n   * @default false\n   */\n  optionalMark?: boolean | React.ReactNode;\n  /**\n   * Whether show the asterisk when the field is required\n   * @default true\n   */\n  requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  requiredMark = true,\n  ...rest\n}: FormItemProps<Values>) => {\n  return (\n    <AntdFormItem\n      label={\n        <FormLabel\n          label={label}\n          tooltip={tooltip}\n          optionalMark={optionalMark}\n          requiredMark={requiredMark}\n          as=\"span\"\n        />\n      }\n      {...rest}\n    />\n  );\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","jsx","AntdFormItem","FormLabel"],"mappings":";;;;AAsBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OACE,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAN;AAAA,QACA,SAAAD;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,QACA,IAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}

package/dist/components/form/label.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as b, isValidElement as d } from "react";
+import { QuestionIcon as h } from "@bioturing/assets";
+import { useCls as u } from "../utils/antdUtils.js";
+import { IconButton as N } from "../icon-button/component.js";
+import { cn as x } from "../utils/cn.js";
+import { WithRenderProp as y } from "../utils/WithRenderProp.js";
+const I = ({
+  label: l,
+  tooltip: o,
+  optionalMark: n,
+  requiredMark: m = !0,
+  className: t,
+  as: i,
+  render: s,
+  ...a
+}, c) => {
+  const r = u(), f = [
+    l,
+    o && /* @__PURE__ */ e(
+      N,
+      {
+        className: r("form-item-explaination-icon"),
+        label: typeof o == "string" || d(o) ? o : void 0,
+        children: /* @__PURE__ */ e(h, {})
+      },
+      "tooltip"
+    ),
+    n && /* @__PURE__ */ e("span", { className: r("form-item-label-optional-mark"), children: typeof n == "boolean" ? "(optional)" : n }, "optional"),
+    m !== !1 && /* @__PURE__ */ e("span", { className: r("form-item-label-required-mark"), children: typeof m == "boolean" ? "*" : m }, "required")
+  ], p = {
+    ref: c,
+    className: x(
+      r(
+        "form-item-label-inner",
+        m && "form-item-label-with-required-mark"
+      ),
+      t
+    ),
+    children: f,
+    ...a
+  };
+  return /* @__PURE__ */ e(y, { as: i || "span", render: s, ...p });
+}, j = b(I);
+export {
+  j as FormLabel
+};
+//# sourceMappingURL=label.js.map

package/dist/components/form/label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.js","sources":["../../../src/components/form/label.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type Ref,\n  ComponentPropsWithRef,\n  isValidElement,\n} from \"react\";\nimport {\n  useCls,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n  cn,\n} from \"../utils\";\nimport { IconButton } from \"../icon-button\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { WrapperTooltipProps } from \"antd/es/form/FormItemLabel\";\n\nexport type FormLabelProps<E extends ElementType = \"label\"> =\n  WithRenderPropProps<E> & {\n    /**\n     * Label content to display\n     */\n    label: React.ReactNode;\n    /**\n     * Optional tooltip to display next to the label\n     */\n    tooltip?: React.ReactNode | WrapperTooltipProps;\n    /**\n     * Whether to show optional mark or custom optional mark content\n     * @default false\n     */\n    optionalMark?: boolean | React.ReactNode;\n    /**\n     * Whether to show required mark or custom required mark content\n     * @default true\n     */\n    requiredMark?: boolean | React.ReactNode;\n  };\n\n/**\n * Implementation of the FormLabel component\n */\nconst FormLabelImpl = <E extends ElementType = \"label\">(\n  {\n    label,\n    tooltip,\n    optionalMark,\n    requiredMark = true,\n    className,\n    as,\n    render,\n    ...rest\n  }: FormLabelProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n\n  const labelContent = [\n    label,\n    tooltip && (\n      <IconButton\n        key=\"tooltip\"\n        className={cls(\"form-item-explaination-icon\")}\n        label={\n          typeof tooltip === \"string\" || isValidElement(tooltip)\n            ? tooltip\n            : undefined\n        }\n      >\n        <QuestionIcon />\n      </IconButton>\n    ),\n    optionalMark && (\n      <span key=\"optional\" className={cls(\"form-item-label-optional-mark\")}>\n        {typeof optionalMark === \"boolean\" ? \"(optional)\" : optionalMark}\n      </span>\n    ),\n    requiredMark !== false && (\n      <span key=\"required\" className={cls(\"form-item-label-required-mark\")}>\n        {typeof requiredMark === \"boolean\" ? \"*\" : requiredMark}\n      </span>\n    ),\n  ];\n\n  const elementProps = {\n    ref,\n    className: cn(\n      cls(\n        \"form-item-label-inner\",\n        requiredMark && \"form-item-label-with-required-mark\"\n      ),\n      className\n    ),\n    children: labelContent,\n    ...rest,\n  };\n\n  return <WithRenderProp as={as || \"span\"} render={render} {...elementProps} />;\n};\n\n// Export with correct typing\nexport const FormLabel = forwardRef(FormLabelImpl) as <\n  E extends ElementType = \"label\"\n>(\n  props: FormLabelProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof FormLabelImpl>;\n"],"names":["FormLabelImpl","label","tooltip","optionalMark","requiredMark","className","as","render","rest","ref","cls","useCls","labelContent","jsx","IconButton","isValidElement","QuestionIcon","elementProps","cn","WithRenderProp","FormLabel","forwardRef"],"mappings":";;;;;;;;AA4CA,MAAMA,IAAgB,CACpB;AAAA,EACE,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAEbC,IAAe;AAAA,IACnBX;AAAA,IACAC,KACE,gBAAAW;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,WAAWJ,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOR,KAAY,YAAYa,EAAeb,CAAO,IACjDA,IACA;AAAA,QAGN,4BAACc,GAAa,CAAA,CAAA;AAAA,MAAA;AAAA,MARV;AAAA,IASN;AAAA,IAEFb,KACE,gBAAAU,EAAC,QAAoB,EAAA,WAAWH,EAAI,+BAA+B,GAChE,UAAA,OAAOP,KAAiB,YAAY,eAAeA,EAAA,GAD5C,UAEV;AAAA,IAEFC,MAAiB,MACd,gBAAAS,EAAA,QAAA,EAAoB,WAAWH,EAAI,+BAA+B,GAChE,UAAO,OAAAN,KAAiB,YAAY,MAAMA,KADnC,UAEV;AAAA,EAEJ,GAEMa,IAAe;AAAA,IACnB,KAAAR;AAAA,IACA,WAAWS;AAAA,MACTR;AAAA,QACE;AAAA,QACAN,KAAgB;AAAA,MAClB;AAAA,MACAC;AAAA,IACF;AAAA,IACA,UAAUO;AAAA,IACV,GAAGJ;AAAA,EACL;AAEA,2BAAQW,GAAe,EAAA,IAAIb,KAAM,QAAQ,QAAAC,GAAiB,GAAGU,GAAc;AAC7E,GAGaG,IAAYC,EAAWrB,CAAa;"}

package/dist/components/icon-button/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n    /**\n     * Whether to show active state\n     * @default false\n     */\n    active?: boolean;\n  };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    active = false,\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\n      \"icon-button\",\n      `icon-button-${size}`,\n      active && \"icon-button-active\",\n      negativeMargin && \"icon-button-negative-margin\"\n    ),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AA0DA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IACpB;AAAA,IACAE;AAAA,EACF,GAGMkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAd,IACJ,gBAAAwB,EAAAI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n    /**\n     * Whether to show active state\n     * @default false\n     */\n    active?: boolean;\n  };\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    active = false,\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E>,\n  ref: Ref<ElementTypeToDOMType<E>>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\n      \"icon-button\",\n      `icon-button-${size}`,\n      active && \"icon-button-active\",\n      negativeMargin && \"icon-button-negative-margin\"\n    ),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","active","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAyDA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,QAAAC,IAAS;AAAA,EACT,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH;AAAA,MACE;AAAA,MACA,eAAejB,CAAI;AAAA,MACnBK,KAAU;AAAA,MACVJ,KAAkB;AAAA,IACpB;AAAA,IACAE;AAAA,EACF,GAGMkB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKtB;AAAA,IAC/B,GAAGa;AAAA,EACL,GAEMU,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAd,IACJ,gBAAAwB,EAAAI,GAAA,EAAQ,OAAO5B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW/B,CAAc;"}

package/dist/components/icon-button/style.css

@@ -1 +1 @@
-@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-icon-button-active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}
+@layer components{.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;background-color:transparent;color:var(--ds-color-icon);transition:all .2s}.ds-icon-button:hover{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-icon-hover)}.ds-icon-button:active,.ds-icon-button.ds-icon-button-active,.ds-icon-button.ds-popover-open{background-color:var(--ds-color-primary-bg);color:var(--ds-color-primary)}.ds-icon-button:focus{outline:none}.ds-icon-button:focus-visible{outline:var(--ds-line-width-focus) solid var(--ds-color-primary-border);outline-offset:1px;transition:outline-offset 0s,outline 0s}.ds-icon-button:disabled{cursor:not-allowed;pointer-events:none;color:var(--ds-color-text-disabled)}.ds-icon-button.ds-icon-button-medium{padding:.25rem;font-size:1.25rem;height:1.75rem;width:1.75rem}.ds-icon-button.ds-icon-button-medium.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button.ds-icon-button-small{padding:.25rem;font-size:1rem;height:1.5rem;width:1.5rem}.ds-icon-button.ds-icon-button-small.ds-icon-button-negative-margin{margin:-.25rem}.ds-icon-button .ds-spin{font-size:.8em;line-height:1;display:flex;align-items:center;justify-content:center}}

package/dist/components/input/component.js

@@ -1,26 +1,70 @@
 "use client";
-import { jsx as t } from "react/jsx-runtime";
-import { MagnifyingGlass as a, Eye as i, EyeClosed as u } from "@bioturing/assets";
-import { Input as r } from "antd";
-import { forwardRef as o } from "react";
-const m = (n, e) => /* @__PURE__ */ t(r, { ref: e, ...n }), I = (n, e) => {
-  const s = {
-    iconRender: (c) => c ? /* @__PURE__ */ t(i, { size: 16 }) : /* @__PURE__ */ t(u, { size: 16 }),
-    ...n
-  };
-  return /* @__PURE__ */ t(r.Password, { ref: e, ...s });
-}, d = (n, e) => {
-  const s = {
-    enterButton: n.enterButton === !0 ? /* @__PURE__ */ t(a, { size: 16 }) : n.enterButton,
-    ...n
-  };
-  return /* @__PURE__ */ t(r.Search, { ref: e, ...s });
-}, p = (n, e) => /* @__PURE__ */ t(r.TextArea, { ref: e, ...n }), f = o(m), g = o(I), x = o(d), P = o(p), z = Object.assign(f, {
-  Password: g,
-  Search: x,
-  TextArea: P
+import { jsx as r } from "react/jsx-runtime";
+import { MagnifyingGlassIcon as p, EyeIcon as x, EyeClosedIcon as C } from "@bioturing/assets";
+import { Input as n } from "antd";
+import { forwardRef as a, useCallback as d, useMemo as P } from "react";
+import './style.css';/* empty css          */
+import { useCls as g } from "../utils/antdUtils.js";
+import { Spin as z } from "../spin/component.js";
+import { IconButton as M } from "../icon-button/component.js";
+const T = (e, s) => /* @__PURE__ */ r(n, { ref: s, ...e }), y = (e, s) => {
+  const o = P(() => ({
+    iconRender: (t) => /* @__PURE__ */ r(
+      M,
+      {
+        size: "small",
+        label: t ? "Hide password" : "Show password",
+        children: t ? /* @__PURE__ */ r(x, {}) : /* @__PURE__ */ r(C, {})
+      }
+    ),
+    ...e
+  }), [e]);
+  return /* @__PURE__ */ r(n.Password, { ref: s, ...o });
+}, A = ({
+  enterButton: e = !1,
+  onSearch: s,
+  prefix: o,
+  onPressEnter: t,
+  onClear: i,
+  loading: c,
+  ...u
+}, l) => {
+  const I = g(), f = d(
+    (m) => {
+      s == null || s(m.currentTarget.value, m, { source: "input" });
+    },
+    [s]
+  ), w = d(() => {
+    s == null || s("", void 0, { source: "clear" });
+  }, [s]);
+  return e === !1 ? /* @__PURE__ */ r(
+    n,
+    {
+      ref: l,
+      prefix: o || (c ? /* @__PURE__ */ r(z, { size: 16 }) : /* @__PURE__ */ r(p, { size: 16, className: I("input-search-icon") })),
+      onPressEnter: t || f,
+      onClear: i || w,
+      allowClear: !0,
+      ...u
+    }
+  ) : /* @__PURE__ */ r(
+    n.Search,
+    {
+      ref: l,
+      prefix: o,
+      onPressEnter: t,
+      onClear: i,
+      loading: c,
+      enterButton: e === !0 ? /* @__PURE__ */ r(p, { size: 16 }) : e,
+      ...u
+    }
+  );
+}, E = (e, s) => /* @__PURE__ */ r(n.TextArea, { ref: s, ...e }), b = a(T), j = a(y), R = a(A), k = a(E), D = Object.assign(b, {
+  Password: j,
+  Search: R,
+  TextArea: k
 });
 export {
-  z as Input
+  D as Input
 };
 //# sourceMappingURL=component.js.map

package/dist/components/input/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/input/component.tsx"],"sourcesContent":["\"use client\";\nimport { Eye, EyeClosed, MagnifyingGlass } from \"@bioturing/assets\";\nimport {\n  Input as AntInput,\n  type InputProps as AntInputProps,\n  type InputRef,\n} from \"antd\";\nimport { type PasswordProps as AntPasswordProps } from \"antd/es/input\";\nimport { type SearchProps as AntSearchProps } from \"antd/es/input\";\nimport { type TextAreaProps as AntTextAreaProps } from \"antd/es/input\";\nimport { forwardRef } from \"react\";\n\n// Define props interfaces\nexport interface InputProps extends AntInputProps {}\nexport interface PasswordProps extends AntPasswordProps {}\nexport interface TextAreaProps extends AntTextAreaProps {}\nexport interface SearchProps extends AntSearchProps {}\n\n// Create inner function for main Input\nconst MainInputInner = (props: InputProps, ref: React.Ref<InputRef>) => {\n  return <AntInput ref={ref} {...props} />;\n};\n\n// Create inner function for Password\nconst PasswordInner = (props: PasswordProps, ref: React.Ref<InputRef>) => {\n  // Apply default iconRender unless overridden by props\n  const mergedProps = {\n    iconRender: (visible: boolean) =>\n      visible ? <Eye size={16} /> : <EyeClosed size={16} />,\n    ...props,\n  };\n\n  return <AntInput.Password ref={ref} {...mergedProps} />;\n};\n\n// Create inner function for Search\nconst SearchInner = (props: SearchProps, ref: React.Ref<InputRef>) => {\n  // Apply default enterButton unless overridden\n  const mergedProps = {\n    enterButton:\n      props.enterButton === true ? (\n        <MagnifyingGlass size={16} />\n      ) : (\n        props.enterButton\n      ),\n    ...props,\n  };\n\n  return <AntInput.Search ref={ref} {...mergedProps} />;\n};\n\n// Create inner function for TextArea\nconst TextAreaInner = (\n  props: TextAreaProps,\n  ref: React.Ref<HTMLTextAreaElement>\n) => {\n  return <AntInput.TextArea ref={ref} {...props} />;\n};\n\n// Use forwardRef with type assertion for main Input\nconst MainInput = forwardRef(MainInputInner) as (\n  props: InputProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof MainInputInner>;\n\n// Use forwardRef with type assertion for Password\nconst Password = forwardRef(PasswordInner) as (\n  props: PasswordProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof PasswordInner>;\n\n// Use forwardRef with type assertion for Search\nconst Search = forwardRef(SearchInner) as (\n  props: SearchProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof SearchInner>;\n\n// Use forwardRef with type assertion for TextArea\nconst TextArea = forwardRef(TextAreaInner) as (\n  props: TextAreaProps & {\n    ref?: React.ForwardedRef<HTMLTextAreaElement>;\n  }\n) => ReturnType<typeof TextAreaInner>;\n\n// Export the final composed component\nexport const Input = Object.assign(MainInput, {\n  Password,\n  Search,\n  TextArea,\n});\n"],"names":["MainInputInner","props","ref","jsx","AntInput","PasswordInner","mergedProps","visible","Eye","EyeClosed","SearchInner","MagnifyingGlass","TextAreaInner","MainInput","forwardRef","Password","Search","TextArea","Input"],"mappings":";;;;;AAmBA,MAAMA,IAAiB,CAACC,GAAmBC,MACjC,gBAAAC,EAAAC,GAAA,EAAS,KAAAF,GAAW,GAAGD,EAAO,CAAA,GAIlCI,IAAgB,CAACJ,GAAsBC,MAA6B;AAExE,QAAMI,IAAc;AAAA,IAClB,YAAY,CAACC,MACXA,IAAW,gBAAAJ,EAAAK,GAAA,EAAI,MAAM,GAAI,CAAA,IAAK,gBAAAL,EAACM,GAAU,EAAA,MAAM,GAAI,CAAA;AAAA,IACrD,GAAGR;AAAA,EACL;AAEA,2BAAQG,EAAS,UAAT,EAAkB,KAAAF,GAAW,GAAGI,GAAa;AACvD,GAGMI,IAAc,CAACT,GAAoBC,MAA6B;AAEpE,QAAMI,IAAc;AAAA,IAClB,aACEL,EAAM,gBAAgB,uBACnBU,GAAgB,EAAA,MAAM,IAAI,IAE3BV,EAAM;AAAA,IAEV,GAAGA;AAAA,EACL;AAEA,2BAAQG,EAAS,QAAT,EAAgB,KAAAF,GAAW,GAAGI,GAAa;AACrD,GAGMM,IAAgB,CACpBX,GACAC,wBAEQE,EAAS,UAAT,EAAkB,KAAAF,GAAW,GAAGD,GAAO,GAI3CY,IAAYC,EAAWd,CAAc,GAOrCe,IAAWD,EAAWT,CAAa,GAOnCW,IAASF,EAAWJ,CAAW,GAO/BO,IAAWH,EAAWF,CAAa,GAO5BM,IAAQ,OAAO,OAAOL,GAAW;AAAA,EAC5C,UAAAE;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACF,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/input/component.tsx"],"sourcesContent":["\"use client\";\nimport { EyeIcon, EyeClosedIcon, MagnifyingGlassIcon } from \"@bioturing/assets\";\nimport {\n  Input as AntInput,\n  type InputProps as AntInputProps,\n  type InputRef,\n} from \"antd\";\nimport { type PasswordProps as AntPasswordProps } from \"antd/es/input\";\nimport { type SearchProps as AntSearchProps } from \"antd/es/input\";\nimport { type TextAreaProps as AntTextAreaProps } from \"antd/es/input\";\nimport { forwardRef, useCallback, useMemo } from \"react\";\nimport { useCls } from \"../utils\";\nimport { Spin } from \"../spin\";\n\nimport \"./style.css\";\nimport { IconButton } from \"../icon-button\";\n\n// Define props interfaces\nexport interface InputProps extends AntInputProps {}\nexport interface PasswordProps extends AntPasswordProps {}\nexport interface TextAreaProps extends AntTextAreaProps {}\nexport interface SearchProps extends AntSearchProps {}\n\n// Create inner function for main Input\nconst MainInputInner = (props: InputProps, ref: React.Ref<InputRef>) => {\n  return <AntInput ref={ref} {...props} />;\n};\n\n// Create inner function for Password\nconst PasswordInner = (props: PasswordProps, ref: React.Ref<InputRef>) => {\n  // Apply default iconRender unless overridden by props\n  const mergedProps = useMemo(() => {\n    return {\n      iconRender: (visible: boolean) => (\n        <IconButton\n          size=\"small\"\n          label={visible ? \"Hide password\" : \"Show password\"}\n        >\n          {visible ? <EyeIcon /> : <EyeClosedIcon />}\n        </IconButton>\n      ),\n      ...props,\n    };\n  }, [props]);\n\n  return <AntInput.Password ref={ref} {...mergedProps} />;\n};\n\n// Create inner function for Search\nconst SearchInner = (\n  {\n    enterButton = false,\n    onSearch,\n    prefix,\n    onPressEnter,\n    onClear,\n    loading,\n    ...rest\n  }: SearchProps,\n  ref: React.Ref<InputRef>\n) => {\n  const cls = useCls();\n\n  const handlePressEnter = useCallback(\n    (event: React.KeyboardEvent<HTMLInputElement>) => {\n      onSearch?.(event.currentTarget.value, event, { source: \"input\" });\n    },\n    [onSearch]\n  );\n\n  const handleClear = useCallback(() => {\n    onSearch?.(\"\", undefined, { source: \"clear\" });\n  }, [onSearch]);\n\n  return enterButton === false ? (\n    <AntInput\n      ref={ref}\n      prefix={\n        prefix ||\n        (loading ? (\n          <Spin size={16} />\n        ) : (\n          <MagnifyingGlassIcon size={16} className={cls(\"input-search-icon\")} />\n        ))\n      }\n      onPressEnter={onPressEnter || handlePressEnter}\n      onClear={onClear || handleClear}\n      allowClear\n      {...rest}\n    />\n  ) : (\n    <AntInput.Search\n      ref={ref}\n      prefix={prefix}\n      onPressEnter={onPressEnter}\n      onClear={onClear}\n      loading={loading}\n      enterButton={\n        enterButton === true ? <MagnifyingGlassIcon size={16} /> : enterButton\n      }\n      {...rest}\n    />\n  );\n};\n\n// Create inner function for TextArea\nconst TextAreaInner = (\n  props: TextAreaProps,\n  ref: React.Ref<HTMLTextAreaElement>\n) => {\n  return <AntInput.TextArea ref={ref} {...props} />;\n};\n\n// Use forwardRef with type assertion for main Input\nconst MainInput = forwardRef(MainInputInner) as (\n  props: InputProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof MainInputInner>;\n\n// Use forwardRef with type assertion for Password\nconst Password = forwardRef(PasswordInner) as (\n  props: PasswordProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof PasswordInner>;\n\n// Use forwardRef with type assertion for Search\nconst Search = forwardRef(SearchInner) as (\n  props: SearchProps & {\n    ref?: React.ForwardedRef<InputRef>;\n  }\n) => ReturnType<typeof SearchInner>;\n\n// Use forwardRef with type assertion for TextArea\nconst TextArea = forwardRef(TextAreaInner) as (\n  props: TextAreaProps & {\n    ref?: React.ForwardedRef<HTMLTextAreaElement>;\n  }\n) => ReturnType<typeof TextAreaInner>;\n\n// Export the final composed component\nexport const Input = Object.assign(MainInput, {\n  Password,\n  Search,\n  TextArea,\n});\n"],"names":["MainInputInner","props","ref","jsx","AntInput","PasswordInner","mergedProps","useMemo","visible","IconButton","EyeIcon","EyeClosedIcon","SearchInner","enterButton","onSearch","prefix","onPressEnter","onClear","loading","rest","cls","useCls","handlePressEnter","useCallback","event","handleClear","Spin","MagnifyingGlassIcon","TextAreaInner","MainInput","forwardRef","Password","Search","TextArea","Input"],"mappings":";;;;;;;;;AAwBA,MAAMA,IAAiB,CAACC,GAAmBC,MACjC,gBAAAC,EAAAC,GAAA,EAAS,KAAAF,GAAW,GAAGD,EAAO,CAAA,GAIlCI,IAAgB,CAACJ,GAAsBC,MAA6B;AAElE,QAAAI,IAAcC,EAAQ,OACnB;AAAA,IACL,YAAY,CAACC,MACX,gBAAAL;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOD,IAAU,kBAAkB;AAAA,QAElC,UAAUA,IAAA,gBAAAL,EAACO,GAAQ,CAAA,CAAA,sBAAMC,GAAc,CAAA,CAAA;AAAA,MAAA;AAAA,IAC1C;AAAA,IAEF,GAAGV;AAAA,EACL,IACC,CAACA,CAAK,CAAC;AAEV,2BAAQG,EAAS,UAAT,EAAkB,KAAAF,GAAW,GAAGI,GAAa;AACvD,GAGMM,IAAc,CAClB;AAAA,EACE,aAAAC,IAAc;AAAA,EACd,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GACAjB,MACG;AACH,QAAMkB,IAAMC,EAAO,GAEbC,IAAmBC;AAAA,IACvB,CAACC,MAAiD;AAChD,MAAAV,KAAA,QAAAA,EAAWU,EAAM,cAAc,OAAOA,GAAO,EAAE,QAAQ;IACzD;AAAA,IACA,CAACV,CAAQ;AAAA,EACX,GAEMW,IAAcF,EAAY,MAAM;AACpC,IAAAT,KAAA,QAAAA,EAAW,IAAI,QAAW,EAAE,QAAQ;EAAS,GAC5C,CAACA,CAAQ,CAAC;AAEb,SAAOD,MAAgB,KACrB,gBAAAV;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,QACEa,MACCG,IACC,gBAAAf,EAACuB,KAAK,MAAM,IAAI,IAEhB,gBAAAvB,EAACwB,KAAoB,MAAM,IAAI,WAAWP,EAAI,mBAAmB,EAAG,CAAA;AAAA,MAGxE,cAAcJ,KAAgBM;AAAA,MAC9B,SAASL,KAAWQ;AAAA,MACpB,YAAU;AAAA,MACT,GAAGN;AAAA,IAAA;AAAA,EAAA,IAGN,gBAAAhB;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAAF;AAAA,MACA,QAAAa;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,aACEL,MAAgB,uBAAQc,GAAoB,EAAA,MAAM,GAAI,CAAA,IAAKd;AAAA,MAE5D,GAAGM;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMS,IAAgB,CACpB3B,GACAC,wBAEQE,EAAS,UAAT,EAAkB,KAAAF,GAAW,GAAGD,GAAO,GAI3C4B,IAAYC,EAAW9B,CAAc,GAOrC+B,IAAWD,EAAWzB,CAAa,GAOnC2B,IAASF,EAAWlB,CAAW,GAO/BqB,IAAWH,EAAWF,CAAa,GAO5BM,IAAQ,OAAO,OAAOL,GAAW;AAAA,EAC5C,UAAAE;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACF,CAAC;"}

package/dist/components/input/style.css

@@ -0,0 +1 @@
+@layer components{.ds-input-search-icon{color:var(--ds-color-icon)}.ds-input-affix-wrapper .ds-input-prefix{margin-inline-end:var(--ds-padding-xs)}.ds-input-affix-wrapper .ds-input-suffix{margin-inline-start:var(--ds-padding-xs)}}

package/dist/components/modal/style.css

@@ -1 +1 @@
-@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}:is(.ds-modal-wrap .ds-modal) .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg)}:is(.ds-modal-wrap .ds-modal) .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}:is(.ds-modal-wrap .ds-modal) .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body{overflow:hidden;display:grid}:is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body)>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}:is(.ds-modal-fixed .ds-modal) .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-close{top:8px}:is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner{margin-top:0}}
+@layer components{.ds-modal-wrap{max-height:100vh}.ds-modal-wrap .ds-modal-close-x{width:100%;display:flex}.ds-modal-wrap .ds-modal{padding-bottom:0;margin-top:0;margin-bottom:0;max-height:100vh;top:0}:is(.ds-modal-wrap .ds-modal) .ds-modal-content{display:flex;flex-direction:column;padding:0;box-shadow:var(--ds-box-shadow-secondary);background:var(--ds-modal-bg, var(--ds-modal-content-bg))}:is(.ds-modal-wrap .ds-modal) .ds-modal-body{padding:var(--ds-modal-content-padding);flex-grow:1;flex-shrink:1;min-height:0;overflow:auto}:is(.ds-modal-wrap .ds-modal) .ds-modal-header{padding:calc(var(--ds-modal-padding) * 2 / 3) var(--ds-modal-padding) 0 var(--ds-modal-padding);margin-bottom:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-footer{padding:0 var(--ds-modal-padding) var(--ds-modal-padding) var(--ds-modal-padding);margin-top:0;background:transparent}:is(.ds-modal-wrap .ds-modal) .ds-modal-close{top:calc(var(--ds-modal-padding) * 2 / 3 - 4px)}.ds-modal-wrap:not(.ds-modal-centered) .ds-modal-inner{margin-top:4rem}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal-content{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2);margin:var(--ds-modal-edge-padding)}.ds-modal-wrap:not(.ds-modal-fullscreen) .ds-modal>div[tabindex="0"]{max-height:calc(100vh - var(--ds-modal-edge-padding) * 2)}.ds-modal-no-body-scroll .ds-modal{max-height:100%}:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body{overflow:hidden;display:grid}:is(:is(.ds-modal-no-body-scroll .ds-modal) .ds-modal-body)>*{min-height:0}.ds-modal-fullscreen .ds-modal>div[tabindex="0"]{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-inner{height:100%}.ds-modal-fullscreen .ds-modal .ds-modal-content{border-radius:0;height:100%;width:100%}:is(.ds-modal-fixed .ds-modal) .ds-modal-footer{border-top:1px solid var(--ds-color-split);margin-top:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-header{border-bottom:1px solid var(--ds-color-split);margin-bottom:0;padding:calc(var(--ds-modal-padding) / 2) var(--ds-modal-padding)}:is(.ds-modal-fixed .ds-modal) .ds-modal-close{top:8px}:is(.ds-modal-content-overflow .ds-modal) .ds-modal-inner{margin-top:0}}

package/dist/components/popup-panel/component.js

@@ -1,58 +1,58 @@
 "use client";
 import { jsx as o, jsxs as d, Fragment as a } from "react/jsx-runtime";
 import { Popover as i } from "@base-ui-components/react/popover";
-import { useState as f, useCallback as k, useEffect as C, useMemo as N } from "react";
+import { useState as f, useCallback as C, useEffect as O, useMemo as N } from "react";
 import s from "antd/es/flex";
 import { X as ee } from "@bioturing/assets";
 import { PopupPanelSize as te } from "./constants.js";
 import { useResizable as oe } from "react-use-resizable";
-import re from "merge-refs";
+import ne from "merge-refs";
 import './style.css';/* empty css          */
-import { useControlledState as ne } from "../hooks/useControlledState.js";
+import { useControlledState as re } from "../hooks/useControlledState.js";
 import { useCls as pe, parseAntdPlacement as ie } from "../utils/antdUtils.js";
-import { clsx as n } from "../utils/cn.js";
+import { clsx as r } from "../utils/cn.js";
 import { IconButton as de } from "../icon-button/component.js";
 const we = ({
-  children: O,
-  placement: S,
-  openOnHover: I = !1,
-  open: D,
-  onOpenChange: W,
-  content: j,
+  children: S,
+  placement: I,
+  openOnHover: D = !1,
+  open: W,
+  onOpenChange: j,
+  content: E,
   title: h,
-  trigger: E = "click",
-  className: F,
-  anchor: V,
+  trigger: F = "click",
+  className: V,
+  anchor: $,
   beforeCloseButton: P,
   afterCloseButton: H,
   afterTitle: c,
   size: g = "medium",
   footer: l,
-  defaultOpen: $,
-  resizable: A = !1,
+  defaultOpen: A,
+  resizable: y = !1,
   classNames: e,
   modal: M = !1,
   closeOnClickOutside: T = !0
 }) => {
-  const [U, y] = ne(
-    D,
+  const [U, b] = re(
     W,
-    $ ?? !1
+    j,
+    A ?? !1
     // Always provide a default value to prevent undefined
-  ), t = pe(), b = ie(S), [v, X] = f(null), [q, G] = f(), [J, K] = f(), L = k((r) => {
-    X(r);
+  ), t = pe(), w = ie(I), [v, X] = f(null), [q, G] = f(), [J, K] = f(), L = C((n) => {
+    X(n);
   }, []);
-  C(() => {
+  O(() => {
     if (!v) return;
-    const r = new ResizeObserver((u) => {
+    const n = new ResizeObserver((u) => {
       for (const p of u)
         G(p.contentRect.width), K(p.contentRect.height);
     });
-    return r.observe(v), () => {
-      r.disconnect();
+    return n.observe(v), () => {
+      n.disconnect();
     };
   }, [v]);
-  const w = N(() => /* @__PURE__ */ o(ee, { size: 16 }), []), Q = k(() => /* @__PURE__ */ d("div", { className: n(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
+  const x = N(() => /* @__PURE__ */ o(ee, { size: 16 }), []), Q = C(() => /* @__PURE__ */ d("div", { className: r(t("popup-panel-header"), e == null ? void 0 : e.header), children: [
     /* @__PURE__ */ d(
       s,
       {
@@ -63,7 +63,7 @@ const we = ({
           /* @__PURE__ */ o(
             i.Title,
             {
-              render: /* @__PURE__ */ o("div", { className: n(t("grow", "truncate"), e == null ? void 0 : e.title), children: h })
+              render: /* @__PURE__ */ o("div", { className: r(t("grow", "truncate"), e == null ? void 0 : e.title), children: h })
             }
           ),
           /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
@@ -71,7 +71,7 @@ const we = ({
             /* @__PURE__ */ o(
               i.Close,
               {
-                render: /* @__PURE__ */ o(de, { children: w })
+                render: /* @__PURE__ */ o(de, { children: x })
               }
             ),
             H
@@ -87,88 +87,88 @@ const we = ({
     t,
     e == null ? void 0 : e.header,
     e == null ? void 0 : e.title,
-    w,
+    x,
     h
-  ]), [z, x] = f(!1), { getRootProps: Y, getHandleProps: R, rootRef: Z } = oe({
+  ]), [R, k] = f(!1), { getRootProps: Y, getHandleProps: z, rootRef: Z } = oe({
     initialWidth: q,
     initialHeight: J,
-    onDragStart: () => x(!0),
-    onDragEnd: () => x(!1)
+    onDragStart: () => k(!0),
+    onDragEnd: () => k(!1)
   });
-  C(() => {
-    z ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
-  }, [z]);
-  const { ref: _, ...B } = Y(), m = (r, u) => {
-    if (!r.current) return;
+  O(() => {
+    R ? document.body.style.userSelect = "none" : document.body.style.userSelect = "";
+  }, [R]);
+  const { ref: _, ...B } = Y(), m = (n, u) => {
+    if (!n.current) return;
     const { widthDiff: p } = u;
-    r.current.style.left = `${parseInt(r.current.style.left || "0") - p}px`;
+    n.current.style.left = `${parseInt(n.current.style.left || "0") - p}px`;
   };
   return /* @__PURE__ */ d(
     i.Root,
     {
-      openOnHover: E === "hover" ? !0 : I,
+      openOnHover: F === "hover" ? !0 : D,
       open: U,
-      onOpenChange: (r, u, p) => {
-        p === "outside-press" && !T || y(r, u, p);
+      onOpenChange: (n, u, p) => {
+        (p === "outside-press" || p === "focus-out") && !T || b(n, u, p);
       },
       modal: M,
       children: [
         /* @__PURE__ */ o(
           i.Trigger,
           {
-            render: O,
-            className: n(t("popup-panel-trigger"), e == null ? void 0 : e.trigger)
+            render: S,
+            className: r(t("popup-panel-trigger"), e == null ? void 0 : e.trigger)
           }
         ),
         /* @__PURE__ */ o(i.Portal, { children: /* @__PURE__ */ o(
           i.Positioner,
           {
-            className: n(t("popup-panel-root"), e == null ? void 0 : e.root),
-            side: b.placement,
-            align: b.align,
+            className: r(t("popup-panel-root"), e == null ? void 0 : e.root),
+            side: w.placement,
+            align: w.align,
             sideOffset: 4,
-            anchor: V,
+            anchor: $,
             style: {
               "--size-width": g ? te[g] : void 0
             },
             children: /* @__PURE__ */ d(
               i.Popup,
               {
-                className: n(
+                className: r(
                   t("popup-panel"),
                   t(`popup-panel-size-${g}`),
-                  F,
+                  V,
                   e == null ? void 0 : e.popup
                 ),
-                ref: re(_, L),
-                ...B,
-                ...z ? { "data-resizing": !0 } : {},
+                ref: ne(_, L),
+                ...y ? B : {},
+                ...R ? { "data-resizing": !0 } : {},
                 children: [
                   h && Q(),
                   /* @__PURE__ */ o(
                     "div",
                     {
-                      className: n(t("popup-panel-content"), e == null ? void 0 : e.content),
-                      children: /* @__PURE__ */ o("div", { className: t("popup-panel-content-inner"), children: j })
+                      className: r(t("popup-panel-content"), e == null ? void 0 : e.content),
+                      children: /* @__PURE__ */ o("div", { className: t("popup-panel-content-inner"), children: E })
                     }
                   ),
                   l && /* @__PURE__ */ o(
                     "div",
                     {
-                      className: n(t("popup-panel-footer"), e == null ? void 0 : e.footer),
-                      children: typeof l == "function" ? l({ close: () => y(!1) }) : l
+                      className: r(t("popup-panel-footer"), e == null ? void 0 : e.footer),
+                      children: typeof l == "function" ? l({ close: () => b(!1) }) : l
                     }
                   ),
-                  A && /* @__PURE__ */ d(a, { children: [
+                  y && /* @__PURE__ */ d(a, { children: [
                     /* @__PURE__ */ o(
                       "div",
                       {
-                        className: n(
+                        className: r(
                           t("popup-panel-resize-handle"),
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "bottom-left",
-                        ...R({
+                        ...z({
                           lockHorizontal: !0
                         })
                       }
@@ -176,27 +176,27 @@ const we = ({
                     /* @__PURE__ */ o(
                       "div",
                       {
-                        className: n(
+                        className: r(
                           t("popup-panel-resize-handle"),
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "top-left",
-                        ...R({
+                        ...z({
                           reverse: !0,
                           lockVertical: !0,
-                          onResize: (r) => m(Z, r)
+                          onResize: (n) => m(Z, n)
                         })
                       }
                     ),
                     /* @__PURE__ */ o(
                       "div",
                       {
-                        className: n(
+                        className: r(
                           t("popup-panel-resize-handle"),
                           e == null ? void 0 : e.resizeHandle
                         ),
                         "data-placement": "top-right",
-                        ...R({
+                        ...z({
                           lockVertical: !0
                         })
                       }

package/dist/components/popup-panel/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx, parseAntdPlacement } from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Flex>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  // const _onReverseHandleChangeVertical = (\n  //   parent: React.RefObject<HTMLDivElement>,\n  //   values: MoveValues\n  // ) => {\n  //   if (!parent.current) return;\n  //   const { heightDiff } = values;\n  //   parent.current.style.top = `${\n  //     parseInt(parent.current.style.top || \"0\") - heightDiff\n  //   }px`;\n  // };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (reason === \"outside-press\" && !closeOnClickOutside) return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            {...rootPropsWithoutRef}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-left\"\n                  {...getHandleProps({\n                    reverse: true,\n                    lockVertical: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeHorizontal(rootRef, values),\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","classNames","modal","closeOnClickOutside","open","setOpen","useControlledState","cls","useCls","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","event","reason","PopupPanelSize","mergeRefs","Fragment"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/popup-panel/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx, parseAntdPlacement } from \"../utils\";\nimport { Popover } from \"@base-ui-components/react/popover\";\n\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useEffect, useMemo, useState } from \"react\";\nimport Flex from \"antd/es/flex\";\nimport { IconButton } from \"../icon-button\";\nimport { X } from \"@bioturing/assets\";\nimport { PopupPanelSize } from \"./constants\";\nimport { useControlledState } from \"../hooks\";\nimport { useResizable, type MoveValues } from \"react-use-resizable\";\nimport mergeRefs from \"merge-refs\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface PopupPanelProps\n  extends Omit<\n    React.ComponentPropsWithRef<\"div\">,\n    \"title\" | \"content\" | \"children\"\n  > {\n  /** The trigger element that opens the popup panel */\n  children?: React.ComponentProps<typeof Popover.Trigger>[\"render\"];\n  /** Placement of the popup panel relative to its trigger */\n  placement?: PopoverProps[\"placement\"];\n  /** Whether to open the popup panel on hover */\n  openOnHover?: boolean;\n  /** Controls the open state of the popup panel */\n  open?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: Popover.Root.Props[\"onOpenChange\"];\n  /** Content to display inside the popup panel */\n  content?: React.ReactNode;\n  /** Title text or element to display in the panel header */\n  title?: React.ReactNode;\n  /** The event that triggers the popup panel */\n  /**\n   * @default \"click\"\n   */\n  trigger?: \"click\" | \"hover\";\n  /** Custom anchor element for positioning the panel */\n  anchor?: Popover.Positioner.Props[\"anchor\"];\n  /** Content to display before the close button */\n  beforeCloseButton?: React.ReactNode;\n  /** Content to display after the close button */\n  afterCloseButton?: React.ReactNode;\n  /** Content to display after the title */\n  afterTitle?: React.ReactNode;\n  /**\n   * Predefined sizes for the popup panel\n   * - xsmall: 320px\n   * - small: 400px\n   * - medium: 480px (default)\n   * - large: 640px\n   * - xlarge: 840px\n   * @default \"medium\" for default type, \"xsmall\" for other types\n   */\n  size?: keyof typeof PopupPanelSize;\n  /**\n   * Footer content for the popup panel\n   * Can be a React node or a function that returns a React node\n   */\n  footer?:\n    | React.ReactNode\n    | ((props: { close: () => void }) => React.ReactNode);\n  /**\n   * Whether the panel should be open by default when uncontrolled\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Whether the panel should be resizable\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Custom class names for different parts of the popup panel\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    header?: string;\n    title?: string;\n    content?: string;\n    footer?: string;\n    resizeHandle?: string;\n  };\n  /**\n   * Whether to close the panel when clicking outside\n   * @default true\n   */\n  closeOnClickOutside?: boolean;\n  /**\n   * Whether to use modal mode\n   * @default false\n   */\n  modal?: Popover.Root.Props[\"modal\"];\n}\n\nexport const PopupPanel = ({\n  children,\n  placement,\n  openOnHover = false,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  content,\n  title,\n  trigger = \"click\",\n  className,\n  anchor,\n  beforeCloseButton,\n  afterCloseButton,\n  afterTitle,\n  size = \"medium\",\n  footer,\n  defaultOpen,\n  resizable = false,\n  classNames,\n  modal = false,\n  closeOnClickOutside = true,\n}: PopupPanelProps) => {\n  // Use controlled state with proper initialization to prevent switching between controlled/uncontrolled\n  const [open, setOpen] = useControlledState(\n    outsideOpen,\n    outsideOnOpenChange,\n    defaultOpen ?? false // Always provide a default value to prevent undefined\n  );\n\n  const cls = useCls();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  // We don't need triggerRef since we're using callbackRef for the popup\n  const [popupRef, setPopupRef] = useState<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState<number>();\n  const [height, setHeight] = useState<number>();\n  const callbackRef = useCallback((node: HTMLDivElement) => {\n    setPopupRef(node);\n  }, []);\n  useEffect(() => {\n    if (!popupRef) return;\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setWidth(entry.contentRect.width);\n        setHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(popupRef);\n    return () => {\n      observer.disconnect();\n    };\n  }, [popupRef]);\n\n  const defaultCloseIcon = useMemo(() => <X size={16} />, []);\n  const renderTitle = useCallback(() => {\n    return (\n      <div className={clsx(cls(\"popup-panel-header\"), classNames?.header)}>\n        <Flex\n          align=\"center\"\n          gap={8}\n          className={cls(\"popup-panel-title-wrapper\")}\n        >\n          <Popover.Title\n            render={\n              <div className={clsx(cls(\"grow\", \"truncate\"), classNames?.title)}>\n                {title}\n              </div>\n            }\n          ></Popover.Title>\n          <div className=\"flex items-center gap-2\">\n            {beforeCloseButton}\n            <Popover.Close\n              render={<IconButton>{defaultCloseIcon}</IconButton>}\n            />\n            {afterCloseButton}\n          </div>\n        </Flex>\n        {afterTitle ? afterTitle : null}\n      </div>\n    );\n  }, [\n    afterCloseButton,\n    afterTitle,\n    beforeCloseButton,\n    cls,\n    classNames?.header,\n    classNames?.title,\n    defaultCloseIcon,\n    title,\n  ]);\n  const [resizing, setResizing] = useState(false);\n  const { getRootProps, getHandleProps, rootRef } = useResizable({\n    initialWidth: width,\n    initialHeight: height,\n    onDragStart: () => setResizing(true),\n    onDragEnd: () => setResizing(false),\n  });\n  useEffect(() => {\n    if (resizing) {\n      document.body.style.userSelect = \"none\";\n    } else {\n      document.body.style.userSelect = \"\";\n    }\n  }, [resizing]);\n  const { ref: rootRefProp, ...rootPropsWithoutRef } = getRootProps();\n  // Handle reverse handle change for vertical resizing\n  // Currently not used but kept for future implementation\n  // const _onReverseHandleChangeVertical = (\n  //   parent: React.RefObject<HTMLDivElement>,\n  //   values: MoveValues\n  // ) => {\n  //   if (!parent.current) return;\n  //   const { heightDiff } = values;\n  //   parent.current.style.top = `${\n  //     parseInt(parent.current.style.top || \"0\") - heightDiff\n  //   }px`;\n  // };\n\n  // Handle reverse handle change\n  const onReverseHandleChangeHorizontal = (\n    parent: React.RefObject<HTMLDivElement>,\n    values: MoveValues\n  ) => {\n    if (!parent.current) return;\n    const { widthDiff } = values;\n    parent.current.style.left = `${\n      parseInt(parent.current.style.left || \"0\") - widthDiff\n    }px`;\n  };\n\n  return (\n    <Popover.Root\n      openOnHover={trigger === \"hover\" ? true : openOnHover}\n      open={open}\n      onOpenChange={(open, event, reason) => {\n        if (\n          (reason === \"outside-press\" || reason === \"focus-out\") &&\n          !closeOnClickOutside\n        )\n          return;\n        setOpen(open, event, reason);\n      }}\n      modal={modal}\n    >\n      <Popover.Trigger\n        render={children}\n        className={clsx(cls(\"popup-panel-trigger\"), classNames?.trigger)}\n      ></Popover.Trigger>\n      <Popover.Portal>\n        <Popover.Positioner\n          className={clsx(cls(\"popup-panel-root\"), classNames?.root)}\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          anchor={anchor}\n          style={\n            {\n              \"--size-width\": size ? PopupPanelSize[size] : undefined,\n            } as React.CSSProperties\n          }\n        >\n          <Popover.Popup\n            className={clsx(\n              cls(\"popup-panel\"),\n              cls(`popup-panel-size-${size}`),\n              className,\n              classNames?.popup\n            )}\n            ref={mergeRefs(rootRefProp, callbackRef)}\n            // resizable props\n            {...(resizable ? rootPropsWithoutRef : {})}\n            {...(resizing ? { \"data-resizing\": true } : {})}\n          >\n            {/* <div ref={popupRef}> */}\n            {title && renderTitle()}\n            <div\n              className={clsx(cls(\"popup-panel-content\"), classNames?.content)}\n            >\n              <div className={cls(\"popup-panel-content-inner\")}>{content}</div>\n            </div>\n            {footer && (\n              <div\n                className={clsx(cls(\"popup-panel-footer\"), classNames?.footer)}\n              >\n                {typeof footer === \"function\"\n                  ? footer({ close: () => setOpen(false) })\n                  : footer}\n              </div>\n            )}\n            {resizable && (\n              <>\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"bottom-left\"\n                  {...getHandleProps({\n                    lockHorizontal: true,\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-left\"\n                  {...getHandleProps({\n                    reverse: true,\n                    lockVertical: true,\n                    onResize: (values) =>\n                      onReverseHandleChangeHorizontal(rootRef, values),\n                  })}\n                />\n                <div\n                  className={clsx(\n                    cls(\"popup-panel-resize-handle\"),\n                    classNames?.resizeHandle\n                  )}\n                  data-placement=\"top-right\"\n                  {...getHandleProps({\n                    lockVertical: true,\n                  })}\n                />\n              </>\n            )}\n          </Popover.Popup>\n        </Popover.Positioner>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["PopupPanel","children","placement","openOnHover","outsideOpen","outsideOnOpenChange","content","title","trigger","className","anchor","beforeCloseButton","afterCloseButton","afterTitle","size","footer","defaultOpen","resizable","classNames","modal","closeOnClickOutside","open","setOpen","useControlledState","cls","useCls","headlessUIPlacement","parseAntdPlacement","popupRef","setPopupRef","useState","width","setWidth","height","setHeight","callbackRef","useCallback","node","useEffect","observer","entries","entry","defaultCloseIcon","useMemo","jsx","X","renderTitle","jsxs","clsx","Flex","Popover","IconButton","resizing","setResizing","getRootProps","getHandleProps","rootRef","useResizable","rootRefProp","rootPropsWithoutRef","onReverseHandleChangeHorizontal","parent","values","widthDiff","event","reason","PopupPanelSize","mergeRefs","Fragment"],"mappings":"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"}

package/dist/components/spin/component.js

@@ -1,13 +1,23 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import i from "antd/es/spin";
 import './style.css';/* empty css          */
-import { useCls as p } from "../utils/antdUtils.js";
-const l = ({ indicator: n, ...r }) => {
-  const s = p(), t = n || /* @__PURE__ */ o("span", { className: s("spin-loader") });
-  return /* @__PURE__ */ o(i, { indicator: t, ...r });
+import { useCls as e } from "../utils/antdUtils.js";
+const d = ({ indicator: n, size: o, ...r }) => {
+  const p = e(), s = n || /* @__PURE__ */ t("span", { className: p("spin-loader") });
+  return /* @__PURE__ */ t(
+    i,
+    {
+      indicator: s,
+      size: typeof o == "number" ? "default" : o,
+      style: {
+        "--spin-size": typeof o == "number" ? `${o}px` : void 0
+      },
+      ...r
+    }
+  );
 };
 export {
-  l as Spin
+  d as Spin
 };
 //# sourceMappingURL=component.js.map

package/dist/components/spin/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/spin/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls } from \"../utils\";\nimport { default as AntdSpin, SpinProps as AntdSpinProps } from \"antd/es/spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type SpinProps = AntdSpinProps;\n\nexport const Spin = ({ indicator, ...rest }: SpinProps) => {\n  const cls = useCls();\n  const spinIndicator = indicator || <span className={cls(\"spin-loader\")} />;\n  return <AntdSpin indicator={spinIndicator} {...rest} />;\n};\n"],"names":["Spin","indicator","rest","cls","useCls","spinIndicator","jsx","AntdSpin"],"mappings":";;;;;AASO,MAAMA,IAAO,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAAsB;AACzD,QAAMC,IAAMC,EAAO,GACbC,IAAgBJ,KAAa,gBAAAK,EAAC,UAAK,WAAWH,EAAI,aAAa,GAAG;AACxE,SAAQ,gBAAAG,EAAAC,GAAA,EAAS,WAAWF,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/spin/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls } from \"../utils\";\nimport { default as AntdSpin, SpinProps as AntdSpinProps } from \"antd/es/spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type SpinProps = Omit<AntdSpinProps, \"size\"> & {\n  size?: \"small\" | \"default\" | \"large\" | number;\n};\n\nexport const Spin = ({ indicator, size, ...rest }: SpinProps) => {\n  const cls = useCls();\n  const spinIndicator = indicator || <span className={cls(\"spin-loader\")} />;\n  return (\n    <AntdSpin\n      indicator={spinIndicator}\n      size={typeof size === \"number\" ? \"default\" : size}\n      style={\n        {\n          \"--spin-size\": typeof size == \"number\" ? `${size}px` : undefined,\n        } as React.CSSProperties\n      }\n      {...rest}\n    />\n  );\n};\n"],"names":["Spin","indicator","size","rest","cls","useCls","spinIndicator","jsx","AntdSpin"],"mappings":";;;;;AAWO,MAAMA,IAAO,CAAC,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,QAAsB;AAC/D,QAAMC,IAAMC,EAAO,GACbC,IAAgBL,KAAa,gBAAAM,EAAC,UAAK,WAAWH,EAAI,aAAa,GAAG;AAEtE,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,MACX,MAAM,OAAOJ,KAAS,WAAW,YAAYA;AAAA,MAC7C,OACE;AAAA,QACE,eAAe,OAAOA,KAAQ,WAAW,GAAGA,CAAI,OAAO;AAAA,MACzD;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/spin/style.css

@@ -1 +1 @@
-@layer components{:root{--ds-animate-spin: ds-spin 1s linear infinite}@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-spin .ds-spin-icon{animation:var(--ds-animate-spin);color:var(--ds-color-icon)}.ds-spin .ds-spin-text{color:var(--ds-color-icon)}.ds-spin-loader{width:1em;height:1em;border:max(2px,.12em) solid var(--ds-color-border);border-bottom-color:var(--ds-color-icon);border-radius:50%;display:inline-block;box-sizing:border-box;animation:spin 1s linear infinite}}
+@layer components{:root{--ds-animate-spin: ds-spin 1s linear infinite}@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-spin .ds-spin-icon{animation:var(--ds-animate-spin);color:var(--ds-color-icon)}.ds-spin .ds-spin-text{color:var(--ds-color-icon)}.ds-spin-loader{width:var(--spin-size, 1em);height:var(--spin-size, 1em);border:max(2px,.12em) solid var(--ds-color-border);border-bottom-color:var(--ds-color-icon);border-radius:50%;display:inline-block;box-sizing:border-box;animation:spin 1s linear infinite}}

package/dist/index.d.ts

@@ -82,6 +82,7 @@ import { Dropdown } from 'antd';
 import { DropDownProps } from 'antd';
 import { DropdownProps } from 'antd';
 import { ElementType } from 'react';
+import { ElementTypeToDOMType as ElementTypeToDOMType_2 } from '..';
 import { EmptyProps as EmptyProps_2 } from 'antd/es/empty';
 import { ErrorListProps } from 'antd/es/form';
 import { EventDataNode } from 'antd/es/tree';
@@ -94,6 +95,7 @@ import { FloatButtonProps } from 'antd';
 import { FloatButtonRef } from 'antd';
 import { FormInstance } from 'antd';
 import { FormItemProps as FormItemProps_2 } from 'antd/es/form/FormItem';
+import { FormLabelProps } from './label';
 import { FormListFieldData } from 'antd';
 import { FormListOperation } from 'antd';
 import { FormListProps } from 'antd/es/form';
@@ -1718,7 +1720,7 @@ export { FloatButtonProps }
 
 export { FloatButtonRef }
 
-export declare const Form: (<Values = any>({ ...rest }: InternalFormProps<Values>) => JSX.Element) & {
+export declare const Form: (<Values = unknown>({ ...rest }: InternalFormProps<Values>) => JSX.Element) & {
     useForm: typeof useForm;
     useFormInstance: typeof default_9;
     useWatch: typeof useWatch;
@@ -1726,6 +1728,9 @@ export declare const Form: (<Values = any>({ ...rest }: InternalFormProps<Values
     List: React_2.FC<FormListProps>;
     ErrorList: React_2.FC<ErrorListProps>;
     Provider: React_2.FC<FormProviderProps>;
+    Label: <E extends React_2.ElementType = "label">(props: FormLabelProps<E> & {
+        ref?: React_2.ComponentPropsWithRef<E>["ref"];
+    }) => ReturnType<(<E_1 extends React_2.ElementType = "label">({ label, tooltip, optionalMark, requiredMark, className, as, render, ...rest }: FormLabelProps<E_1>, ref: React_2.Ref<ElementTypeToDOMType_2<E_1>>) => JSX.Element)>;
 };
 
 export { FormInstance }
@@ -1865,7 +1870,7 @@ export declare interface InputProps extends InputProps_2 {
 
 export declare const InternalBadge: ({ count, showZero, ...rest }: BadgeProps) => JSX.Element;
 
-declare interface InternalFormProps<Values = any> extends React_2.ComponentProps<typeof default_8<Values>> {
+declare interface InternalFormProps<Values = unknown> extends React_2.ComponentProps<typeof default_8<Values>> {
 }
 
 declare const InternalTable: <RecordType extends object = object>(props: TableProps<RecordType> & {
@@ -2934,7 +2939,7 @@ export declare interface ScrollAreaProps {
     orientation?: "vertical" | "horizontal";
 }
 
-declare const SearchInner: (props: SearchProps, ref: React.Ref<InputRef>) => JSX.Element;
+declare const SearchInner: ({ enterButton, onSearch, prefix, onPressEnter, onClear, loading, ...rest }: SearchProps, ref: React.Ref<InputRef>) => JSX.Element;
 
 export declare interface SearchProps extends SearchProps_2 {
 }
@@ -2999,9 +3004,11 @@ export { Space }
 
 export { SpaceProps }
 
-export declare const Spin: ({ indicator, ...rest }: SpinProps) => JSX.Element;
+export declare const Spin: ({ indicator, size, ...rest }: SpinProps) => JSX.Element;
 
-export declare type SpinProps = SpinProps_2;
+export declare type SpinProps = Omit<SpinProps_2, "size"> & {
+    size?: "small" | "default" | "large" | number;
+};
 
 export declare const Split: default_2.FC<SplitterProps> & {
     Panel: default_2.FC<SplitterPanelProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "module": "./dist/index.js",
   "main": "./dist/index.js",
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.23.0",
-    "@base-ui-components/react": "1.0.0-beta.0",
-    "@floating-ui/react": "^0.27.8",
+    "@base-ui-components/react": "1.0.0-beta.1",
+    "@floating-ui/react": "^0.27.13",
     "cmdk": "^1.1.1",
     "es-toolkit": "^1.37.2",
     "merge-refs": "^2.0.0",
@@ -27,7 +27,7 @@
     "rc-table": "^7.50.4",
     "rc-tree": "^5.13.1",
     "react-use-resizable": "^0.2.0",
-    "tailwind-merge": "^3.2.0",
+    "tailwind-merge": "^3.3.1",
     "@bioturing/assets": "0.18.0"
   },
   "peerDependencies": {