@bioturing/components 0.20.2 → 0.21.0

package/dist/components/form/item.js

@@ -1,31 +1,44 @@
 "use client";
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import { isValidElement as l } from "react";
-import a from "antd/es/form/FormItem";
+import { jsx as e } from "react/jsx-runtime";
+import { isValidElement as a } from "react";
+import i from "antd/es/form/FormItem";
 import { Question as c } from "@bioturing/assets";
 import { useCls as f } from "../utils/antdUtils.js";
-import { IconButton as d } from "../icon-button/component.js";
-const N = ({
-  tooltip: e,
-  label: o,
-  optionalMark: m,
-  ...s
+import { IconButton as p } from "../icon-button/component.js";
+const y = ({
+  tooltip: o,
+  label: t,
+  optionalMark: n,
+  requiredMark: m = !0,
+  ...r
 }) => {
-  const n = f(), i = e || m ? /* @__PURE__ */ t("span", { className: n("form-item-label-inner"), children: [
-    o,
-    e && /* @__PURE__ */ r(
-      d,
-      {
-        className: n("form-item-explaination-icon"),
-        label: typeof e == "string" || l(e) ? e : void 0,
-        children: /* @__PURE__ */ r(c, {})
-      }
-    ),
-    m && /* @__PURE__ */ r("span", { className: n("form-item-label-optional-mark"), children: typeof m == "boolean" ? "(optional)" : m })
-  ] }) : o;
-  return /* @__PURE__ */ r(a, { label: i, ...s });
+  const l = f();
+  console.log(m);
+  const s = /* @__PURE__ */ e(
+    "span",
+    {
+      className: l(
+        "form-item-label-inner",
+        m && "form-item-label-with-required-mark"
+      ),
+      children: [
+        t,
+        o && /* @__PURE__ */ e(
+          p,
+          {
+            className: l("form-item-explaination-icon"),
+            label: typeof o == "string" || a(o) ? o : void 0,
+            children: /* @__PURE__ */ e(c, {})
+          }
+        ),
+        n && /* @__PURE__ */ e("span", { className: l("form-item-label-optional-mark"), children: typeof n == "boolean" ? "(optional)" : n }),
+        m !== !1 && /* @__PURE__ */ e("span", { className: l("form-item-label-required-mark"), children: typeof m == "boolean" ? "*" : m })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(i, { label: s, ...r });
 };
 export {
-  N as FormItem
+  y 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 } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } 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\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n  const renderedLabel =\n    tooltip || optionalMark ? (\n      <span className={cls(\"form-item-label-inner\")}>\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            <Question />\n          </IconButton>\n        )}\n        {optionalMark && (\n          <span className={cls(\"form-item-label-optional-mark\")}>\n            {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n          </span>\n        )}\n      </span>\n    ) : (\n      label\n    );\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;AAoBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } 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  console.log(requiredMark);\n  const renderedLabel = (\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            <Question />\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  );\n\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","cls","useCls","renderedLabel","jsx","IconButton","isValidElement","Question","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;AAEnB,UAAQ,IAAIH,CAAY;AACxB,QAAMI,IACJ,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH;AAAA,QACT;AAAA,QACAF,KAAgB;AAAA,MAClB;AAAA,MAEC,UAAA;AAAA,QACCF;AAAA,QACAD,KACE,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,WAAWJ,EAAI,6BAA6B;AAAA,YAC5C,OACE,OAAOL,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,YAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QAEFT,KACG,gBAAAM,EAAA,QAAA,EAAK,WAAWH,EAAI,+BAA+B,GACjD,UAAO,OAAAH,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,QAEFC,MAAiB,MACd,gBAAAK,EAAA,QAAA,EAAK,WAAWH,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,MAAMA,EAC5C,CAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAGF,SAAQ,gBAAAK,EAAAI,GAAA,EAAa,OAAOL,GAAgB,GAAGH,GAAM;AACvD;"}

package/dist/components/form/style.css

@@ -1 +1 @@
-@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}}
+@layer components{.ds-form-item-label-inner{display:inline-flex;align-items:center;gap:.25rem}.ds-form-item-label-optional-mark{color:var(--ds-color-text-tertiary)}.ds-form-item-label-required-mark{display:none}:is(.ds-form-item .ds-form-item-label>label.ds-form-item-required):after{display:none}:is(.ds-form-item .ds-form-item-label>label.ds-form-item-required):before{display:none}:is(:is(.ds-form-item .ds-form-item-label>label.ds-form-item-required) .ds-form-item-label-inner.ds-form-item-label-with-required-mark) .ds-form-item-label-required-mark{display:inline-block;color:var(--ds-form-label-required-mark-color);font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item .ds-form-item-label>label:after{display:none}.ds-form-horizontal .ds-form-item .ds-form-item-label .ds-form-item-label-inner:after{content:":";position:relative;margin-block:0;margin-inline-start:var(--ds-form-label-colon-margin-inline-start);margin-inline-end:var(--ds-form-label-colon-margin-inline-end)}}

package/dist/components/transition/component.js

@@ -1,57 +1,63 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { useRef as v, useEffect as x, isValidElement as N } from "react";
-import { useRender as j } from "@base-ui-components/react/use-render";
-import { mergeProps as w } from "@base-ui-components/react/merge-props";
-import { useTransitionStatus as A } from "@base-ui-components/react/utils";
-import { useLatestRef as F, useAnimationsFinished as T } from "../hooks/base-ui.js";
-import { clsx as k } from "../utils/cn.js";
-function q(c) {
-  const {
-    children: n = /* @__PURE__ */ m("div", {}),
-    className: l,
-    starting: r,
-    ending: i,
-    show: t = !0,
-    keepMounted: o = !1,
-    onTransitionComplete: s,
-    listenToChildAnimations: p = !1,
-    asChild: g = !0,
-    ...h
-  } = c, { mounted: y, setMounted: a, transitionStatus: e } = A(t), u = F(t), R = k(
-    l,
-    e === "starting" && typeof r == "string" && r,
-    e === "ending" && typeof i == "string" && i
-  ), d = v(null), f = T(d, {
+import { jsx as d } from "react/jsx-runtime";
+import { useRef as x, useEffect as j, isValidElement as F } from "react";
+import { useRender as N } from "@base-ui-components/react/use-render";
+import { mergeProps as A } from "@base-ui-components/react/merge-props";
+import { useTransitionStatus as E } from "@base-ui-components/react/utils";
+import './style.css';/* empty css          */
+import { useLatestRef as S, useAnimationsFinished as D } from "../hooks/base-ui.js";
+import { useCls as L } from "../utils/antdUtils.js";
+import { clsx as O } from "../utils/cn.js";
+function Q({
+  children: r = /* @__PURE__ */ d("div", {}),
+  className: p,
+  starting: s,
+  ending: i,
+  show: t = !0,
+  keepMounted: n = !1,
+  onTransitionComplete: o,
+  listenToChildAnimations: l = !1,
+  asChild: g = !0,
+  ...y
+}) {
+  const { mounted: f, setMounted: u, transitionStatus: e } = E(t), m = S(t), R = L(), v = O(
+    p,
+    e === "starting" && typeof s == "string" && s,
+    e === "ending" && typeof i == "string" && i,
+    // hide by display: none when not mounted and keepMounted is true
+    f == !1 && n ? R("transition-hidden") : void 0
+  );
+  console.log(Date.now(), e, f, n);
+  const a = x(null), c = D(a, {
     waitForNextTick: t,
-    subtree: p
-  }), b = j({
-    render: typeof n == "function" || g && N(n) ? n : /* @__PURE__ */ m("div", { children: n }),
-    props: w(h, {
-      ref: d,
-      className: R,
+    subtree: l
+  }), b = N({
+    render: typeof r == "function" || g && F(r) ? r : /* @__PURE__ */ d("div", { children: r }),
+    props: A(y, {
+      ref: a,
+      className: v,
       "data-starting": e === "starting" ? "true" : void 0,
       "data-ending": e === "ending" ? "true" : void 0,
       style: {
-        ...e === "starting" && typeof r == "object" ? r : {},
+        ...e === "starting" && typeof s == "object" ? s : {},
         ...e === "ending" && typeof i == "object" ? i : {}
       }
     })
   });
-  return x(() => {
-    f(() => {
-      t === u.current && (o || a(t), s == null || s(t));
+  return j(() => {
+    c(() => {
+      t === m.current && (u(t), o == null || o(t));
     });
   }, [
     t,
-    o,
-    f,
-    a,
+    n,
+    c,
     u,
-    s
-  ]), y ? b : null;
+    m,
+    o
+  ]), f || n ? b : null;
 }
 export {
-  q as Transition
+  Q as Transition
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/transition/component.tsx"],"sourcesContent":["\"use client\";\nimport { CSSProperties, isValidElement, useEffect, useRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { useTransitionStatus } from \"@base-ui-components/react/utils\";\nimport { clsx } from \"../utils\";\nimport { useAnimationsFinished, useLatestRef } from \"../hooks\";\n\nexport type TransitionProps = Omit<\n  useRender.ComponentProps<\"div\">,\n  \"render\" | \"children\"\n> & {\n  /** Whether the component should be shown */\n  show?: boolean;\n  /** CSS classes to apply when the component is opened */\n  starting?: string | CSSProperties;\n  /** CSS classes to apply when the component is closed */\n  ending?: string | CSSProperties;\n  /** CSS classes to apply to the component */\n  className?: string;\n  /** Keep mounted */\n  keepMounted?: boolean;\n  /**\n   * Callback function to be called when the transition ends\n   */\n  onTransitionComplete?: (show?: boolean) => void;\n  /**\n   * Whether to listen for animations in child elements\n   */\n  listenToChildAnimations?: boolean;\n  /**\n   * Whether to render the child as a child element\n   * @default true\n   */\n  asChild?: boolean;\n  children?: React.ReactNode | useRender.ComponentProps<\"div\">[\"render\"];\n};\n\nexport function Transition(props: TransitionProps) {\n  const {\n    children = <div />,\n    className,\n    starting,\n    ending,\n    show = true,\n    keepMounted = false,\n    onTransitionComplete,\n    listenToChildAnimations = false,\n    asChild = true,\n    ...otherProps\n  } = props;\n\n  const { mounted, setMounted, transitionStatus } = useTransitionStatus(show);\n  const showRef = useLatestRef(show);\n\n  const combinedClassName = clsx(\n    className,\n    transitionStatus === \"starting\" && typeof starting == \"string\" && starting,\n    transitionStatus === \"ending\" && typeof ending == \"string\" && ending\n  );\n\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: show,\n    subtree: listenToChildAnimations,\n  });\n\n  const getRender = () => {\n    if (typeof children === \"function\") {\n      return children;\n    }\n    if (asChild && isValidElement(children)) {\n      return children;\n    }\n    return <div>{children}</div>;\n  };\n\n  const rendered = useRender({\n    render: getRender(),\n    props: mergeProps<\"div\">(otherProps, {\n      ref,\n      className: combinedClassName,\n      ...{\n        \"data-starting\": transitionStatus === \"starting\" ? \"true\" : undefined,\n        \"data-ending\": transitionStatus === \"ending\" ? \"true\" : undefined,\n      },\n      style: {\n        ...(transitionStatus === \"starting\" && typeof starting === \"object\"\n          ? starting\n          : {}),\n        ...(transitionStatus === \"ending\" && typeof ending === \"object\"\n          ? ending\n          : {}),\n      },\n    }),\n  });\n\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      if (show === showRef.current) {\n        if (!keepMounted) setMounted(show);\n        onTransitionComplete?.(show);\n      }\n    });\n  }, [\n    show,\n    keepMounted,\n    runOnceAnimationsFinish,\n    setMounted,\n    showRef,\n    onTransitionComplete,\n  ]);\n\n  return mounted ? rendered : null;\n}\n"],"names":["Transition","props","children","className","starting","ending","show","keepMounted","onTransitionComplete","listenToChildAnimations","asChild","otherProps","mounted","setMounted","transitionStatus","useTransitionStatus","showRef","useLatestRef","combinedClassName","clsx","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","rendered","useRender","isValidElement","jsx","mergeProps","useEffect"],"mappings":";;;;;;;;AAsCO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IACJ,UAAAC,sBAAY,OAAI,EAAA;AAAA,IAChB,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC,IAAc;AAAA,IACd,sBAAAC;AAAA,IACA,yBAAAC,IAA0B;AAAA,IAC1B,SAAAC,IAAU;AAAA,IACV,GAAGC;AAAA,EAAA,IACDV,GAEE,EAAE,SAAAW,GAAS,YAAAC,GAAY,kBAAAC,EAAiB,IAAIC,EAAoBT,CAAI,GACpEU,IAAUC,EAAaX,CAAI,GAE3BY,IAAoBC;AAAA,IACxBhB;AAAA,IACAW,MAAqB,cAAc,OAAOV,KAAY,YAAYA;AAAA,IAClEU,MAAqB,YAAY,OAAOT,KAAU,YAAYA;AAAA,EAChE,GAEMe,IAAMC,EAAuB,IAAI,GACjCC,IAA0BC,EAAsBH,GAAK;AAAA,IACzD,iBAAiBd;AAAA,IACjB,SAASG;AAAA,EAAA,CACV,GAYKe,IAAWC,EAAU;AAAA,IACzB,QAVI,OAAOvB,KAAa,cAGpBQ,KAAWgB,EAAexB,CAAQ,IAC7BA,IAEF,gBAAAyB,EAAC,SAAK,UAAAzB,GAAS;AAAA,IAKtB,OAAO0B,EAAkBjB,GAAY;AAAA,MACnC,KAAAS;AAAA,MACA,WAAWF;AAAA,MAET,iBAAiBJ,MAAqB,aAAa,SAAS;AAAA,MAC5D,eAAeA,MAAqB,WAAW,SAAS;AAAA,MAE1D,OAAO;AAAA,QACL,GAAIA,MAAqB,cAAc,OAAOV,KAAa,WACvDA,IACA,CAAC;AAAA,QACL,GAAIU,MAAqB,YAAY,OAAOT,KAAW,WACnDA,IACA,CAAA;AAAA,MAAC;AAAA,IAER,CAAA;AAAA,EAAA,CACF;AAED,SAAAwB,EAAU,MAAM;AACd,IAAAP,EAAwB,MAAM;AACxB,MAAAhB,MAASU,EAAQ,YACdT,KAAaM,EAAWP,CAAI,GACjCE,KAAA,QAAAA,EAAuBF;AAAA,IACzB,CACD;AAAA,EAAA,GACA;AAAA,IACDA;AAAA,IACAC;AAAA,IACAe;AAAA,IACAT;AAAA,IACAG;AAAA,IACAR;AAAA,EAAA,CACD,GAEMI,IAAUY,IAAW;AAC9B;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/transition/component.tsx"],"sourcesContent":["\"use client\";\nimport { CSSProperties, isValidElement, useEffect, useRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { useTransitionStatus } from \"@base-ui-components/react/utils\";\nimport { clsx, useCls } from \"../utils\";\nimport { useAnimationsFinished, useLatestRef } from \"../hooks\";\n\nimport \"./style.css\";\n\nexport type TransitionProps = Omit<\n  useRender.ComponentProps<\"div\">,\n  \"render\" | \"children\"\n> & {\n  /** Whether the component should be shown */\n  show?: boolean;\n  /** CSS classes to apply when the component is opened */\n  starting?: string | CSSProperties;\n  /** CSS classes to apply when the component is closed */\n  ending?: string | CSSProperties;\n  /** CSS classes to apply to the component */\n  className?: string;\n  /** Keep mounted */\n  keepMounted?: boolean;\n  /**\n   * Callback function to be called when the transition ends\n   */\n  onTransitionComplete?: (show?: boolean) => void;\n  /**\n   * Whether to listen for animations in child elements\n   */\n  listenToChildAnimations?: boolean;\n  /**\n   * Whether to render the child as a child element\n   * @default true\n   */\n  asChild?: boolean;\n  children?: React.ReactNode | useRender.ComponentProps<\"div\">[\"render\"];\n};\n\nexport function Transition({\n  children = <div />,\n  className,\n  starting,\n  ending,\n  show = true,\n  keepMounted = false,\n  onTransitionComplete,\n  listenToChildAnimations = false,\n  asChild = true,\n  ...otherProps\n}: TransitionProps) {\n  const { mounted, setMounted, transitionStatus } = useTransitionStatus(show);\n  const showRef = useLatestRef(show);\n\n  const cls = useCls();\n\n  const combinedClassName = clsx(\n    className,\n    transitionStatus === \"starting\" && typeof starting == \"string\" && starting,\n    transitionStatus === \"ending\" && typeof ending == \"string\" && ending,\n    // hide by display: none when not mounted and keepMounted is true\n    mounted == false && keepMounted ? cls(\"transition-hidden\") : undefined\n  );\n\n  console.log(Date.now(), transitionStatus, mounted, keepMounted);\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: show,\n    subtree: listenToChildAnimations,\n  });\n\n  const getRender = () => {\n    if (typeof children === \"function\") {\n      return children;\n    }\n    if (asChild && isValidElement(children)) {\n      return children;\n    }\n    return <div>{children}</div>;\n  };\n\n  const rendered = useRender({\n    render: getRender(),\n    props: mergeProps<\"div\">(otherProps, {\n      ref,\n      className: combinedClassName,\n      ...{\n        \"data-starting\": transitionStatus === \"starting\" ? \"true\" : undefined,\n        \"data-ending\": transitionStatus === \"ending\" ? \"true\" : undefined,\n      },\n      style: {\n        ...(transitionStatus === \"starting\" && typeof starting === \"object\"\n          ? starting\n          : {}),\n        ...(transitionStatus === \"ending\" && typeof ending === \"object\"\n          ? ending\n          : {}),\n      },\n    }),\n  });\n\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      if (show === showRef.current) {\n        setMounted(show);\n        onTransitionComplete?.(show);\n      }\n    });\n  }, [\n    show,\n    keepMounted,\n    runOnceAnimationsFinish,\n    setMounted,\n    showRef,\n    onTransitionComplete,\n  ]);\n\n  return mounted || keepMounted ? rendered : null;\n}\n"],"names":["Transition","children","className","starting","ending","show","keepMounted","onTransitionComplete","listenToChildAnimations","asChild","otherProps","mounted","setMounted","transitionStatus","useTransitionStatus","showRef","useLatestRef","cls","useCls","combinedClassName","clsx","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","rendered","useRender","isValidElement","jsx","mergeProps","useEffect"],"mappings":";;;;;;;;;;AAwCO,SAASA,EAAW;AAAA,EACzB,UAAAC,sBAAY,OAAI,EAAA;AAAA,EAChB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,sBAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,GAAoB;AAClB,QAAM,EAAE,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAiB,IAAIC,EAAoBT,CAAI,GACpEU,IAAUC,EAAaX,CAAI,GAE3BY,IAAMC,EAAO,GAEbC,IAAoBC;AAAA,IACxBlB;AAAA,IACAW,MAAqB,cAAc,OAAOV,KAAY,YAAYA;AAAA,IAClEU,MAAqB,YAAY,OAAOT,KAAU,YAAYA;AAAA;AAAA,IAE9DO,KAAW,MAASL,IAAcW,EAAI,mBAAmB,IAAI;AAAA,EAC/D;AAEA,UAAQ,IAAI,KAAK,IAAO,GAAAJ,GAAkBF,GAASL,CAAW;AACxD,QAAAe,IAAMC,EAAuB,IAAI,GACjCC,IAA0BC,EAAsBH,GAAK;AAAA,IACzD,iBAAiBhB;AAAA,IACjB,SAASG;AAAA,EAAA,CACV,GAYKiB,IAAWC,EAAU;AAAA,IACzB,QAVI,OAAOzB,KAAa,cAGpBQ,KAAWkB,EAAe1B,CAAQ,IAC7BA,IAEF,gBAAA2B,EAAC,SAAK,UAAA3B,GAAS;AAAA,IAKtB,OAAO4B,EAAkBnB,GAAY;AAAA,MACnC,KAAAW;AAAA,MACA,WAAWF;AAAA,MAET,iBAAiBN,MAAqB,aAAa,SAAS;AAAA,MAC5D,eAAeA,MAAqB,WAAW,SAAS;AAAA,MAE1D,OAAO;AAAA,QACL,GAAIA,MAAqB,cAAc,OAAOV,KAAa,WACvDA,IACA,CAAC;AAAA,QACL,GAAIU,MAAqB,YAAY,OAAOT,KAAW,WACnDA,IACA,CAAA;AAAA,MAAC;AAAA,IAER,CAAA;AAAA,EAAA,CACF;AAED,SAAA0B,EAAU,MAAM;AACd,IAAAP,EAAwB,MAAM;AACxB,MAAAlB,MAASU,EAAQ,YACnBH,EAAWP,CAAI,GACfE,KAAA,QAAAA,EAAuBF;AAAA,IACzB,CACD;AAAA,EAAA,GACA;AAAA,IACDA;AAAA,IACAC;AAAA,IACAiB;AAAA,IACAX;AAAA,IACAG;AAAA,IACAR;AAAA,EAAA,CACD,GAEMI,KAAWL,IAAcmB,IAAW;AAC7C;"}

package/dist/components/transition/style.css

@@ -0,0 +1 @@
+@layer components{.ds-transition-hidden{display:none}}

package/dist/index.d.ts

@@ -1718,7 +1718,7 @@ export declare const Form: (<Values = any>({ ...rest }: InternalFormProps<Values
     useForm: typeof useForm;
     useFormInstance: typeof default_9;
     useWatch: typeof useWatch;
-    Item: <Values = unknown>({ tooltip, label, optionalMark, ...rest }: FormItemProps<Values>) => JSX.Element;
+    Item: <Values = unknown>({ tooltip, label, optionalMark, requiredMark, ...rest }: FormItemProps<Values>) => JSX.Element;
     List: React_2.FC<FormListProps>;
     ErrorList: React_2.FC<ErrorListProps>;
     Provider: React_2.FC<FormProviderProps>;
@@ -1732,6 +1732,11 @@ export declare interface FormItemProps<Values = unknown> extends FormItemProps_2
      * @default false
      */
     optionalMark?: boolean | React.ReactNode;
+    /**
+     * Whether show the asterisk when the field is required
+     * @default true
+     */
+    requiredMark?: boolean | React.ReactNode;
 }
 
 export { FormListFieldData }
@@ -3247,7 +3252,7 @@ export { Transfer }
 
 export { TransferProps }
 
-export declare function Transition(props: TransitionProps): null;
+export declare function Transition({ children, className, starting, ending, show, keepMounted, onTransitionComplete, listenToChildAnimations, asChild, ...otherProps }: TransitionProps): null;
 
 export declare type TransitionProps = Omit<useRender.ComponentProps<"div">, "render" | "children"> & {
     /** Whether the component should be shown */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "type": "module",
   "module": "./dist/index.js",
   "main": "./dist/index.js",