@bioturing/components 0.24.0 → 0.25.0

package/dist/components/drag-drop/droppable.js

@@ -1,88 +1,95 @@
 "use client";
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { memo as y, useCallback as x, useMemo as D } from "react";
-import { useDroppable as B } from "./hooks.js";
-import { ArrowsOutCardinalIcon as F } from "@bioturing/assets";
-import { useRender as G } from "@base-ui-components/react/use-render";
-import { Value as H } from "./value.js";
-import { uniqWith as I, isEqual as J } from "es-toolkit";
-import { useCls as K } from "../utils/antdUtils.js";
-import { clsx as Q } from "../utils/cn.js";
-const S = ({
-  id: d,
-  children: i,
-  className: E,
-  disabled: O = !1,
+import { jsxs as P, jsx as n } from "react/jsx-runtime";
+import { memo as W, useCallback as x, useMemo as D } from "react";
+import { useDroppable as h } from "./hooks.js";
+import { ArrowsOutCardinalIcon as B } from "@bioturing/assets";
+import { useRender as F } from "@base-ui-components/react/use-render";
+import { Value as G } from "./value.js";
+import { uniqWith as H, isEqual as I } from "es-toolkit";
+import { useCls as J } from "../utils/antdUtils.js";
+import { clsx as K } from "../utils/cn.js";
+const Q = ({
+  id: c,
+  children: d,
+  className: A,
+  disabled: E = !1,
   placeholder: m = "Drop items here",
-  icon: f = /* @__PURE__ */ n(F, {}),
-  render: R,
-  onDrop: c,
-  validate: j,
-  multiple: s,
+  icon: f = /* @__PURE__ */ n(B, {}),
+  render: O,
+  onDrop: i,
+  validate: R,
+  multiple: o,
   value: r,
-  onChange: o,
+  onChange: s,
   maxItems: p,
   renderValueLabel: a,
-  renderValueIcon: N,
-  ...q
+  renderValueIcon: l,
+  ...j
 }) => {
-  const e = K(), k = x(
+  const e = J(), q = x(
     (t) => {
-      c && c(t), o && o(
-        s ? I([...r, t.data], J) : t.data
+      i && i(t), s && s(
+        o ? H([...r, t.data], I) : t.data
       );
     },
-    [c, o, s, r]
-  ), { isOver: w, setNodeRef: A, attributes: M, listeners: P } = B({
-    id: d,
-    disabled: O,
-    onDrop: k,
-    validate: j
-  }), l = D(
+    [i, s, o, r]
+  ), { isOver: y, setNodeRef: k, attributes: u, listeners: w } = h({
+    id: c,
+    disabled: E,
+    onDrop: q,
+    validate: R
+  }), N = D(
     () => ({
       value: r,
-      onChange: o,
-      multiple: s,
+      onChange: s,
+      multiple: o,
       renderValueLabel: a,
-      renderValueIcon: N,
+      renderValueIcon: l,
       maxItems: p
     }),
-    [r, o, s, a, N, p]
+    [r, s, o, a, l, p]
   ), z = D(
-    () => i || /* @__PURE__ */ h("div", { className: e("drop-zone-content"), children: [
+    () => d || /* @__PURE__ */ P("div", { className: e("drop-zone-content"), children: [
       /* @__PURE__ */ n("div", { className: e("drop-zone-icon"), children: f }),
       /* @__PURE__ */ n("div", { className: e("drop-zone-text"), children: m })
     ] }),
-    [i, e, f, m]
-  ), W = x(
-    ({ className: t, ...b }) => !s && r || s && r.length ? /* @__PURE__ */ n(
-      H,
+    [d, e, f, m]
+  ), M = x(
+    ({ className: t, ...b }) => !r || o && Array.isArray(r) && !r.length ? /* @__PURE__ */ n(
+      "div",
       {
-        ...l,
+        className: K(e("drop-zone"), t),
+        ...b,
+        children: z
+      }
+    ) : /* @__PURE__ */ n(
+      G,
+      {
+        ...N,
         className: t,
         ...b
       }
-    ) : /* @__PURE__ */ n("div", { className: Q(e("drop-zone"), t), ...b, children: z }),
-    [r, s, l, z, e]
+    ),
+    [r, o, N, z, e]
   );
-  return G({
-    render: R ?? W,
-    ref: A,
+  return F({
+    render: O ?? M,
+    ref: k,
     props: {
-      className: E,
-      ...M,
-      ...P,
-      ...q
+      className: A,
+      ...u,
+      ...w,
+      ...j
     },
     state: {
-      isOver: w,
+      isOver: y,
       value: r,
-      onChange: o,
-      id: d
+      onChange: s,
+      id: c
     }
   });
-}, V = y(S);
+}, v = W(Q);
 export {
-  V as Droppable
+  v as Droppable
 };
 //# sourceMappingURL=droppable.js.map

package/dist/components/drag-drop/droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) =>\n      (!multiple && value) || (multiple && (value as T[]).length) ? (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      ) : (\n        <div className={clsx(cls(\"drop-zone\"), className as string)} {...props}>\n          {dropzoneContent}\n        </div>\n      ),\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","Value","clsx","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,sBAAQC,GAAsB,EAAA;AAAA,EAC9B,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAO,GACbC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIb,KACFA,EAAOa,CAAI,GAETT,KAECA;AAAA,QADCF,IAEAY,EAAS,CAAC,GAAIX,GAAeU,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAFtC;AAAA,IAKN;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,EAAE,QAAAa,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAV;AAAA,EAAA,CACD,GAGKoB,IAAaC;AAAA,IACjB,OAAO;AAAA,MACL,OAAAnB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,MACA,kBAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,IAEF,CAACF,GAAOC,GAAUF,GAAUI,GAAkBC,GAAiBF,CAAQ;AAAA,EACzE,GAGMkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAWhB,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,EACd,MAAA,CAACzB,KAAYC,KAAWD,KAAaC,EAAc,SAClD,gBAAAsB;AAAA,MAACG;AAAA,MAAA;AAAA,QACE,GAAGP;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IAGN,IAAA,gBAAAF,EAAC,OAAI,EAAA,WAAWI,EAAKpB,EAAI,WAAW,GAAGf,CAAmB,GAAI,GAAGiC,GAC9D,UACHJ,EAAA,CAAA;AAAA,IAEJ,CAACpB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBqB,EAAU;AAAA,IAChC,QAAQ/B,KAAU2B;AAAA,IAClB,KAAKT;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}
+{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) => {\n      if (!value || (multiple && Array.isArray(value) && !value.length)) {\n        return (\n          <div\n            className={clsx(cls(\"drop-zone\"), className as string)}\n            {...props}\n          >\n            {dropzoneContent}\n          </div>\n        );\n      }\n      // return value when there is a value\n      return (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      );\n    },\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","clsx","Value","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,sBAAQC,GAAsB,EAAA;AAAA,EAC9B,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAO,GACbC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIb,KACFA,EAAOa,CAAI,GAETT,KAECA;AAAA,QADCF,IAEAY,EAAS,CAAC,GAAIX,GAAeU,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAFtC;AAAA,IAKN;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,EAAE,QAAAa,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAV;AAAA,EAAA,CACD,GAGKoB,IAAaC;AAAA,IACjB,OAAO;AAAA,MACL,OAAAnB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,MACA,kBAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,IAEF,CAACF,GAAOC,GAAUF,GAAUI,GAAkBC,GAAiBF,CAAQ;AAAA,EACzE,GAGMkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAWhB,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,QACX,CAACxB,KAAUD,KAAY,MAAM,QAAQC,CAAK,KAAK,CAACA,EAAM,SAEtD,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,EAAKnB,EAAI,WAAW,GAAGf,CAAmB;AAAA,QACpD,GAAGiC;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IACH,IAKF,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IACN;AAAA,IAGJ,CAACxB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBqB,EAAU;AAAA,IAChC,QAAQ/B,KAAU2B;AAAA,IAClB,KAAKT;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}

package/dist/components/drag-drop/style.css

@@ -1 +1 @@
-.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value.ds-dropzone-value-multiple{padding:.625rem}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag{max-width:100%;flex-shrink:0;margin:0}:is(.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag) .ds-tag-close-icon{flex-shrink:0}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.5rem;flex-shrink:0}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}
+.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value.ds-dropzone-value-multiple{padding:.625rem}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag{max-width:100%;flex-shrink:0;margin:0}:is(.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag) .ds-tag-close-icon{flex-shrink:0}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.25rem;flex-shrink:0}.ds-dropzone-value-icon.ds-tag-icon{font-size:1rem}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}

package/dist/components/form/item.js

@@ -1,30 +1,40 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import p from "antd/es/form/FormItem";
+import { jsx as e } from "react/jsx-runtime";
+import f from "antd/es/form/FormItem";
 import { FormLabel as s } from "./label.js";
-const f = ({
-  tooltip: m,
-  label: o,
-  optionalMark: t,
-  requiredMark: e = !0,
-  ...n
-}) => /* @__PURE__ */ r(
-  p,
-  {
-    label: /* @__PURE__ */ r(
-      s,
-      {
-        label: o,
-        tooltip: m,
-        optionalMark: t,
-        requiredMark: e,
-        as: "span"
-      }
-    ),
-    ...n
-  }
-);
+import { isPlainObject as c } from "es-toolkit";
+const k = ({
+  tooltip: n,
+  label: t,
+  optionalMark: a = !1,
+  requiredMark: p = !0,
+  required: i,
+  rules: o,
+  ...d
+}) => {
+  const m = i || (o == null ? void 0 : o.some(
+    (r) => c(r) && "required" in r && r.required
+  ));
+  return /* @__PURE__ */ e(
+    f,
+    {
+      required: i,
+      label: t ? /* @__PURE__ */ e(
+        s,
+        {
+          label: t,
+          tooltip: n,
+          optionalMark: !m && a,
+          requiredMark: m && p,
+          as: "span"
+        }
+      ) : void 0,
+      rules: o,
+      ...d
+    }
+  );
+};
 export {
-  f as FormItem
+  k 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 {\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;"}
+{"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\";\nimport { isPlainObject } from \"es-toolkit\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether show the optional mark. By default, optional item will not show the optional mark.\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 = false,\n  requiredMark = true,\n  required,\n  rules,\n  ...rest\n}: FormItemProps<Values>) => {\n  const isRequired =\n    required ||\n    rules?.some(\n      (rule) => isPlainObject(rule) && \"required\" in rule && rule.required\n    );\n  return (\n    <AntdFormItem\n      required={required}\n      label={\n        label ? (\n          <FormLabel\n            label={label}\n            tooltip={tooltip}\n            optionalMark={!isRequired && optionalMark}\n            requiredMark={isRequired && requiredMark}\n            as=\"span\"\n          />\n        ) : undefined\n      }\n      rules={rules}\n      {...rest}\n    />\n  );\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","required","rules","rest","isRequired","rule","isPlainObject","jsx","AntdFormItem","FormLabel"],"mappings":";;;;;AAuBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AAAA,EACf,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AACrB,QAAAC,IACJH,MACAC,KAAA,gBAAAA,EAAO;AAAA,IACL,CAACG,MAASC,EAAcD,CAAI,KAAK,cAAcA,KAAQA,EAAK;AAAA;AAG9D,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAP;AAAA,MACA,OACEH,IACE,gBAAAS;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAAX;AAAA,UACA,SAAAD;AAAA,UACA,cAAc,CAACO,KAAcL;AAAA,UAC7B,cAAcK,KAAcJ;AAAA,UAC5B,IAAG;AAAA,QAAA;AAAA,MAAA,IAEH;AAAA,MAEN,OAAAE;AAAA,MACC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ;"}

package/dist/components/form/label.js

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

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

@@ -1 +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;"}
+{"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,\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 && (\n      <span\n        key=\"required\"\n        className={cls(\n          \"form-item-label-required-mark\",\n          typeof requiredMark === \"boolean\"\n            ? \"form-item-label-required-mark-asterisk\"\n            : \"\"\n        )}\n      >\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;AAAA,EACA,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,KACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWH;AAAA,UACT;AAAA,UACA,OAAON,KAAiB,YACpB,2CACA;AAAA,QACN;AAAA,QAEC,UAAA,OAAOA,KAAiB,YAAY,MAAMA;AAAA,MAAA;AAAA,MARvC;AAAA,IAAA;AAAA,EAWV,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/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)}.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)}}
+@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)}:is(.ds-form-item-label>label.ds-form-item-required):after{display:none}:is(.ds-form-item-label>label.ds-form-item-required):before{display:none}.ds-form-item-label-required-mark{display:inline-block;font-size:var(--ds-font-size);font-family:Inter,sans-serif;line-height:1;content:"*"}.ds-form-item-label-required-mark.ds-form-item-label-required-mark-asterisk{color:var(--ds-form-label-required-mark-color)}.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)}.ds-form-item-explain{margin-top:.25rem}.ds-form-item-margin-offset{margin:0!important}}

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: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}}
+@layer components{.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/components/status-icon/component.js

@@ -0,0 +1,34 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { CircleNotchIcon as a, InfoIcon as I, WarningIcon as f, XCircleIcon as u, CheckCircleIcon as l } from "@bioturing/assets";
+import './style.css';/* empty css          */
+import { useCls as p } from "../utils/antdUtils.js";
+const C = {
+  success: l,
+  error: u,
+  warning: f,
+  info: I,
+  processing: a
+}, g = m(
+  ({ status: o = "info", size: c = "medium", weight: r = "regular", ...n }, s) => {
+    const t = p(), i = C[o];
+    return /* @__PURE__ */ e(
+      i,
+      {
+        ref: s,
+        className: t(
+          "status-icon",
+          `status-icon-${o}`,
+          `status-icon-${c}`
+        ),
+        weight: r,
+        ...n
+      }
+    );
+  }
+);
+g.displayName = "StatusIcon";
+export {
+  g as StatusIcon
+};
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/status-icon/component.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  CheckCircleIcon,\n  XCircleIcon,\n  WarningIcon,\n  InfoIcon,\n  CircleNotchIcon,\n} from \"@bioturing/assets\";\nimport { useCls } from \"../utils\";\n\nimport \"./style.css\";\n\nexport interface StatusIconProps extends React.ComponentPropsWithoutRef<\"svg\"> {\n  /**\n   * Status of the icon\n   * @default info\n   */\n  status?: \"success\" | \"error\" | \"warning\" | \"info\" | \"processing\";\n  /**\n   * Size of the icon\n   * - small: 12px\n   * - medium: 16px\n   * - large: 20px\n   * - xlarge: 24px\n   * - xxlarge: 28px\n   * @default medium\n   */\n  size?: \"small\" | \"medium\" | \"large\" | \"xlarge\";\n  /**\n   * Weight of the icon\n   */\n  weight?: \"regular\" | \"bold\" | \"fill\" | \"duotone\";\n}\n\nconst STATUS_ICON_MAP = {\n  success: CheckCircleIcon,\n  error: XCircleIcon,\n  warning: WarningIcon,\n  info: InfoIcon,\n  processing: CircleNotchIcon,\n};\n\nexport const StatusIcon = forwardRef<SVGSVGElement, StatusIconProps>(\n  ({ status = \"info\", size = \"medium\", weight = \"regular\", ...props }, ref) => {\n    const cls = useCls();\n    const Icon = STATUS_ICON_MAP[status];\n    return (\n      <Icon\n        ref={ref}\n        className={cls(\n          \"status-icon\",\n          `status-icon-${status}`,\n          `status-icon-${size}`\n        )}\n        weight={weight}\n        {...props}\n      />\n    );\n  }\n);\n\nStatusIcon.displayName = \"StatusIcon\";\n"],"names":["STATUS_ICON_MAP","CheckCircleIcon","XCircleIcon","WarningIcon","InfoIcon","CircleNotchIcon","StatusIcon","forwardRef","status","size","weight","props","ref","cls","useCls","Icon","jsx"],"mappings":";;;;;AAkCA,MAAMA,IAAkB;AAAA,EACtB,SAASC;AAAA,EACT,OAAOC;AAAA,EACP,SAASC;AAAA,EACT,MAAMC;AAAA,EACN,YAAYC;AACd,GAEaC,IAAaC;AAAA,EACxB,CAAC,EAAE,QAAAC,IAAS,QAAQ,MAAAC,IAAO,UAAU,QAAAC,IAAS,WAAW,GAAGC,EAAM,GAAGC,MAAQ;AAC3E,UAAMC,IAAMC,EAAO,GACbC,IAAOf,EAAgBQ,CAAM;AAEjC,WAAA,gBAAAQ;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWC;AAAA,UACT;AAAA,UACA,eAAeL,CAAM;AAAA,UACrB,eAAeC,CAAI;AAAA,QACrB;AAAA,QACA,QAAAC;AAAA,QACC,GAAGC;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEAL,EAAW,cAAc;"}

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

@@ -0,0 +1 @@
+@layer components{.ds-status-icon{flex-shrink:0;flex-grow:0}.ds-status-icon-small{font-size:.75rem}.ds-status-icon-medium{font-size:1rem}.ds-status-icon-large{font-size:1.25rem}.ds-status-icon-xlarge{font-size:1.5rem}.ds-status-icon-xxlarge{font-size:1.75rem}.ds-status-icon-success{color:var(--ds-color-success)}.ds-status-icon-error{color:var(--ds-color-error)}.ds-status-icon-warning{color:var(--ds-color-warning)}.ds-status-icon-info{color:var(--ds-color-primary)}.ds-status-icon-processing{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}}

package/dist/components/theme-provider/style.css

@@ -1 +1 @@
-@layer components{.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-input-color-border-active: var(--ds-color-primary);--ds-input-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-input-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-input-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider{--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}
+@layer components{@keyframes ds-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.ds-theme-provider{--ds-modal-padding: 24px;--ds-modal-edge-padding: 16px;--ds-popup-panel-padding: 16px;--ds-scrollbar-width: auto;--ds-scrollbar-width-legacy: 15;--ds-box-shadow-popover-arrow: 0px 0px 1px 0px var(--ds-modal-color-border), 2px 2px 5px rgba(0, 0, 0, .05);--ds-input-color-border-active: var(--ds-color-primary);--ds-input-shadow-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-primary) 20%, transparent);--ds-form-label-required-mark-color: var(--ds-color-error);--ds-input-shadow-error-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-error) 20%, transparent);--ds-input-shadow-warning-active: 0 0 0 2px color-mix(in oklab, var(--ds-color-warning) 20%, transparent);--ds-inter: "Inter", Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ds-animate-spin: ds-spin 1s linear infinite}@supports (font-variation-settings: normal){.ds-theme-provider{--ds-inter: "InterVariable", Inter, Helvetica, Arial, sans-serif;--ds-roboto-mono: "Roboto Mono Variable", Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-optical-sizing:auto}}.ds-theme-provider{--ds-segment-color-bg-active: #ffffff;--ds-scrollbar-color-thumb: rgba(0, 0, 0, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #000000;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 10%);--ds-modal-color-border: rgba(0, 0, 0, .24)}.ds-theme-provider.dark{--ds-modal-color-border: rgba(255, 255, 255, .55);--ds-segment-color-bg-active: #424248;--ds-scrollbar-color-thumb: rgba(255, 255, 255, .2);--ds-scrollbar-color-track: rgba(0, 0, 0, 0);--ds-color-base-solid: #ffffff;--ds-color-table-fixed-column-shadow: rgb(0 0 0 / 20%)}}

package/dist/index.d.ts

@@ -1311,6 +1311,14 @@ export declare const componentMetadata: {
         originalDocUrl: string;
         description: string;
     };
+    StatusIcon: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Feedback";
+        description: string;
+    };
     VerticalCollapsiblePanel: {
         name: string;
         link: string;
@@ -1740,7 +1748,7 @@ export declare const Form: (<Values = unknown>({ ...rest }: InternalFormProps<Va
     useForm: typeof useForm;
     useFormInstance: typeof default_9;
     useWatch: typeof useWatch;
-    Item: <Values = unknown>({ tooltip, label, optionalMark, requiredMark, ...rest }: FormItemProps<Values>) => JSX.Element;
+    Item: <Values = unknown>({ tooltip, label, optionalMark, requiredMark, required, rules, ...rest }: FormItemProps<Values>) => JSX.Element;
     List: React_2.FC<FormListProps>;
     ErrorList: React_2.FC<ErrorListProps>;
     Provider: React_2.FC<FormProviderProps>;
@@ -1753,7 +1761,7 @@ export { FormInstance }
 
 export declare interface FormItemProps<Values = unknown> extends FormItemProps_2<Values> {
     /**
-     * Whether the field is optional. If true, the label will be marked as optional.
+     * Whether show the optional mark. By default, optional item will not show the optional mark.
      * @default false
      */
     optionalMark?: boolean | React.ReactNode;
@@ -3113,6 +3121,30 @@ export { Statistic }
 
 export { StatisticProps }
 
+export declare const StatusIcon: ForwardRefExoticComponent<StatusIconProps & RefAttributes<SVGSVGElement>>;
+
+export declare interface StatusIconProps extends React.ComponentPropsWithoutRef<"svg"> {
+    /**
+     * Status of the icon
+     * @default info
+     */
+    status?: "success" | "error" | "warning" | "info" | "processing";
+    /**
+     * Size of the icon
+     * - small: 12px
+     * - medium: 16px
+     * - large: 20px
+     * - xlarge: 24px
+     * - xxlarge: 28px
+     * @default medium
+     */
+    size?: "small" | "medium" | "large" | "xlarge";
+    /**
+     * Weight of the icon
+     */
+    weight?: "regular" | "bold" | "fill" | "duotone";
+}
+
 export { StepProps }
 
 export { Steps }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { componentMetadata as e, getComponentsByCategory as t } from "./metadata.js";
-import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as l, Avatar as n, BackTop as x, Calendar as i, Card as C, Carousel as c, Cascader as T, Col as u, ColorPicker as d, ConfigProvider as S, DatePicker as g, Descriptions as h, Divider as A, Drawer as E, Dropdown as P, Flex as k, FloatButton as D, Grid as R, InputNumber as L, Layout as I, List as b, Mentions as O, Menu as y, Pagination as B, Popconfirm as N, Progress as v, QRCode as M, Rate as _, Result as U, Row as F, Skeleton as W, Space as w, Statistic as V, Steps as q, Tabs as G, TimePicker as K, Timeline as Q, Transfer as H, TreeSelect as j, Typography as z, Watermark as J, message as X, notification as Y, theme as Z, unstableSetRender as $, version as oo } from "antd";
+import { Affix as p, Alert as m, Anchor as s, App as f, AutoComplete as l, Avatar as n, BackTop as x, Calendar as i, Card as C, Carousel as c, Cascader as T, Col as u, ColorPicker as d, ConfigProvider as S, DatePicker as g, Descriptions as h, Divider as A, Drawer as E, Dropdown as P, Flex as k, FloatButton as D, Grid as R, InputNumber as I, Layout as L, List as b, Mentions as O, Menu as y, Pagination as B, Popconfirm as N, Progress as v, QRCode as M, Rate as _, Result as U, Row as F, Skeleton as W, Space as w, Statistic as V, Steps as q, Tabs as G, TimePicker as K, Timeline as Q, Transfer as H, TreeSelect as j, Typography as z, Watermark as J, message as X, notification as Y, theme as Z, unstableSetRender as $, version as oo } from "antd";
 import { Select as eo } from "./components/select/component.js";
 import { Modal as ao } from "./components/modal/index.js";
 import { IconButton as mo } from "./components/icon-button/component.js";
@@ -12,7 +12,7 @@ import { ThemeProvider as go } from "./components/theme-provider/component.js";
 import { Split as Ao, Splitter as Eo } from "./components/splitter/component.js";
 import { Truncate as ko } from "./components/truncate/component.js";
 import { DropdownMenu as Ro } from "./components/dropdown-menu/component.js";
-import { clsx as Io, cn as bo, cx as Oo } from "./components/utils/cn.js";
+import { clsx as Lo, cn as bo, cx as Oo } from "./components/utils/cn.js";
 import { reactNodeToString as Bo } from "./components/utils/reactToString.js";
 import { isTracebackError as vo } from "./components/utils/isTracebackError.js";
 import { isValidHexColor as _o } from "./components/utils/colors.js";
@@ -34,7 +34,7 @@ import { useUniqueKeysTree as dr } from "./components/tree/useUniqueKeysTree.js"
 import { getUniqueKeysFromOriginals as gr, processTreeData as hr } from "./components/tree/helpers.js";
 import { Tree as Er } from "./components/tree/components.js";
 import { Spin as kr } from "./components/spin/component.js";
-import { Empty as Rr, EmptyIcon as Lr } from "./components/empty/component.js";
+import { Empty as Rr, EmptyIcon as Ir } from "./components/empty/component.js";
 import { Form as br } from "./components/form/component.js";
 import { Field as yr } from "./components/field/component.js";
 import { Tour as Nr } from "./components/tour/component.js";
@@ -56,19 +56,20 @@ import { DragDrop as ie, DragDropRoot as Ce } from "./components/drag-drop/index
 import { ColorSelect as Te } from "./components/color-select/component.js";
 import { Nav as de } from "./components/nav/index.js";
 import { ChoiceList as ge } from "./components/choice-list/component.js";
-import { useForm as Ae, useWatch as Ee } from "antd/es/form/Form";
-import { useBreakpoint as ke, useMessage as De, useModal as Re, useToken as Le } from "./components/hooks/antd.js";
-import { default as be } from "antd/es/app/useApp";
-import { useAnimationsFinished as ye, useEnhancedEffect as Be, useEventCallback as Ne, useLatestRef as ve } from "./components/hooks/base-ui.js";
-import { useControlledState as _e } from "./components/hooks/useControlledState.js";
-import { useCharts as Fe } from "./components/hooks/useCharts.js";
-import { useCSSVariables as we } from "./components/hooks/useCSSVariables.js";
-import { antdColorTokens as qe, darkTheme as Ge, lightTheme as Ke } from "./tokens/and-theme/tokens.js";
-import { categoricalChartColorKeys as He, categoricalChartColorTokens as je, categoricalChartsColors as ze, chartColorTokens as Je, rawChartColorTokens as Xe } from "./tokens/charts/palettes/cloudscape.js";
-import { COLORBREWER as Ze } from "./tokens/charts/palettes/colorbrewer.js";
-import { tab10 as ot, tab20 as rt, tab20b as et, tab20c as tt } from "./tokens/charts/palettes/tableau.js";
-import { CATEGORICAL_PALETTES as pt, CATEGORICAL_PALETTE_NAMES as mt, SEQUENTIAL_PALETTES as st, SEQUENTIAL_PALETTE_NAMES as ft, getAllCategoricalChartColors as lt, getAllSequentialChartColors as nt, getCategoricalChartColors as xt, getSequentialChartColors as it } from "./tokens/charts/palettes/index.js";
-import { getColorsByTheme as ct, getTokensByTheme as Tt, resolveColorTokens as ut } from "./tokens/utils.js";
+import { StatusIcon as Ae } from "./components/status-icon/component.js";
+import { useForm as Pe, useWatch as ke } from "antd/es/form/Form";
+import { useBreakpoint as Re, useMessage as Ie, useModal as Le, useToken as be } from "./components/hooks/antd.js";
+import { default as ye } from "antd/es/app/useApp";
+import { useAnimationsFinished as Ne, useEnhancedEffect as ve, useEventCallback as Me, useLatestRef as _e } from "./components/hooks/base-ui.js";
+import { useControlledState as Fe } from "./components/hooks/useControlledState.js";
+import { useCharts as we } from "./components/hooks/useCharts.js";
+import { useCSSVariables as qe } from "./components/hooks/useCSSVariables.js";
+import { antdColorTokens as Ke, darkTheme as Qe, lightTheme as He } from "./tokens/and-theme/tokens.js";
+import { categoricalChartColorKeys as ze, categoricalChartColorTokens as Je, categoricalChartsColors as Xe, chartColorTokens as Ye, rawChartColorTokens as Ze } from "./tokens/charts/palettes/cloudscape.js";
+import { COLORBREWER as ot } from "./tokens/charts/palettes/colorbrewer.js";
+import { tab10 as et, tab20 as tt, tab20b as at, tab20c as pt } from "./tokens/charts/palettes/tableau.js";
+import { CATEGORICAL_PALETTES as st, CATEGORICAL_PALETTE_NAMES as ft, SEQUENTIAL_PALETTES as lt, SEQUENTIAL_PALETTE_NAMES as nt, getAllCategoricalChartColors as xt, getAllSequentialChartColors as it, getCategoricalChartColors as Ct, getSequentialChartColors as ct } from "./tokens/charts/palettes/index.js";
+import { getColorsByTheme as ut, getTokensByTheme as dt, resolveColorTokens as St } from "./tokens/utils.js";
 export {
   p as Affix,
   m as Alert,
@@ -80,9 +81,9 @@ export {
   oe as Badge,
   Tr as Breadcrumb,
   pe as Button,
-  pt as CATEGORICAL_PALETTES,
-  mt as CATEGORICAL_PALETTE_NAMES,
-  Ze as COLORBREWER,
+  st as CATEGORICAL_PALETTES,
+  ft as CATEGORICAL_PALETTE_NAMES,
+  ot as COLORBREWER,
   i as Calendar,
   C as Card,
   c as Carousel,
@@ -108,7 +109,7 @@ export {
   P as Dropdown,
   Ro as DropdownMenu,
   Rr as Empty,
-  Lr as EmptyIcon,
+  Ir as EmptyIcon,
   yr as Field,
   k as Flex,
   D as FloatButton,
@@ -116,9 +117,9 @@ export {
   R as Grid,
   mo as IconButton,
   Zr as Input,
-  L as InputNumber,
+  I as InputNumber,
   re as InternalBadge,
-  I as Layout,
+  L as Layout,
   b as List,
   O as Mentions,
   y as Menu,
@@ -135,8 +136,8 @@ export {
   _ as Rate,
   U as Result,
   F as Row,
-  st as SEQUENTIAL_PALETTES,
-  ft as SEQUENTIAL_PALETTE_NAMES,
+  lt as SEQUENTIAL_PALETTES,
+  nt as SEQUENTIAL_PALETTE_NAMES,
   sr as ScrollArea,
   io as Segmented,
   eo as Select,
@@ -149,6 +150,7 @@ export {
   zr as Stack,
   Hr as StackChild,
   V as Statistic,
+  Ae as StatusIcon,
   q as Steps,
   fo as Switch,
   co as Table,
@@ -171,64 +173,64 @@ export {
   J as Watermark,
   Qo as WithAntdTokens,
   Fo as WithRenderProp,
-  qe as antdColorTokens,
-  He as categoricalChartColorKeys,
-  je as categoricalChartColorTokens,
-  ze as categoricalChartsColors,
+  Ke as antdColorTokens,
+  ze as categoricalChartColorKeys,
+  Je as categoricalChartColorTokens,
+  Xe as categoricalChartsColors,
   jo as changeThemeWithoutTransition,
-  Je as chartColorTokens,
-  Io as clsx,
+  Ye as chartColorTokens,
+  Lo as clsx,
   bo as cn,
   e as componentMetadata,
   Oo as cx,
-  Ge as darkTheme,
-  lt as getAllCategoricalChartColors,
-  nt as getAllSequentialChartColors,
-  xt as getCategoricalChartColors,
-  ct as getColorsByTheme,
+  Qe as darkTheme,
+  xt as getAllCategoricalChartColors,
+  it as getAllSequentialChartColors,
+  Ct as getCategoricalChartColors,
+  ut as getColorsByTheme,
   t as getComponentsByCategory,
-  it as getSequentialChartColors,
-  Tt as getTokensByTheme,
+  ct as getSequentialChartColors,
+  dt as getTokensByTheme,
   gr as getUniqueKeysFromOriginals,
   vo as isTracebackError,
   _o as isValidHexColor,
-  Ke as lightTheme,
+  He as lightTheme,
   X as message,
   Jo as moveTypingCursorToEnd,
   Y as notification,
   wo as parseAntdPlacement,
   hr as processTreeData,
-  Xe as rawChartColorTokens,
+  Ze as rawChartColorTokens,
   Bo as reactNodeToString,
-  ut as resolveColorTokens,
-  ot as tab10,
-  rt as tab20,
-  et as tab20b,
-  tt as tab20c,
+  St as resolveColorTokens,
+  et as tab10,
+  tt as tab20,
+  at as tab20b,
+  pt as tab20c,
   Z as theme,
   Ur as toast,
   Fr as toastManager,
   $ as unstableSetRender,
-  ye as useAnimationsFinished,
+  Ne as useAnimationsFinished,
   Vo as useAntdCssVarClassname,
-  be as useApp,
-  ke as useBreakpoint,
-  we as useCSSVariables,
-  Fe as useCharts,
+  ye as useApp,
+  Re as useBreakpoint,
+  qe as useCSSVariables,
+  we as useCharts,
   qo as useCls,
-  _e as useControlledState,
+  Fe as useControlledState,
   ne as useDS,
-  Be as useEnhancedEffect,
-  Ne as useEventCallback,
-  Ae as useForm,
+  ve as useEnhancedEffect,
+  Me as useEventCallback,
+  Pe as useForm,
   Go as useGetPrefixCls,
-  ve as useLatestRef,
-  De as useMessage,
-  Re as useModal,
-  Le as useToken,
+  _e as useLatestRef,
+  Ie as useMessage,
+  Le as useModal,
+  be as useToken,
   dr as useUniqueKeysTree,
   pr as useUploadItemRender,
-  Ee as useWatch,
+  ke as useWatch,
   oo as version
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/metadata.js

@@ -511,6 +511,20 @@ const i = {
     originalDocUrl: "https://ant.design/components/upload",
     description: "Allows users to select and upload files."
   },
+  StatusIcon: {
+    name: "StatusIcon",
+    link: "/status-icon",
+    base: "custom",
+    refinements: [
+      "Custom implementation using predefined icons for different status states",
+      "Supports success, error, warning, info, and processing status types",
+      "Provides multiple size options: small (12px), medium (16px), large (20px), xlarge (24px)",
+      "Uses semantic icons from @bioturing/assets for consistent visual language",
+      "Applies BioTuring Design System specific CSS classes for styling"
+    ],
+    category: "Feedback",
+    description: "A component that displays status icons to provide visual feedback for different states and operations."
+  },
   VerticalCollapsiblePanel: {
     name: "Vertical Collapsible Panel",
     link: "/vertical-collapsible-panel",
@@ -532,7 +546,7 @@ const i = {
     // Assuming this kebab-case name for Base UI docs
     description: "A panel that can be collapsed or expanded vertically, often used in sidebars or for sectioning content."
   }
-}, a = () => {
+}, s = () => {
   const e = {
     Actions: [],
     General: [],
@@ -554,6 +568,6 @@ const i = {
 };
 export {
   i as componentMetadata,
-  a as getComponentsByCategory
+  s as getComponentsByCategory
 };
 //# sourceMappingURL=metadata.js.map

package/dist/metadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.js","sources":["../src/metadata.ts"],"sourcesContent":["/**\n * Component metadata for the BioTuring Design System\n * This file provides information about all components including:\n * - name: Component name\n * - link: Documentation link\n * - base: What the component is based on (antd, base-ui, or custom)\n * - refinements: Whether the component has been refined beyond its base\n * - category: Component category for organization\n * - packages: Additional packages used by the component\n */\n\nexport type ComponentMetadata = {\n  name: string;\n  link: string;\n  base: \"antd\" | \"base-ui\" | \"custom\";\n  refinements: string[]; // Renamed from 'customized'\n  category: ComponentCategory;\n  packages?: string[];\n  originalDocUrl?: string;\n  description?: string;\n};\n\nexport type ComponentCategory =\n  | \"Actions\"\n  | \"General\"\n  | \"Layout\"\n  | \"Navigation\"\n  | \"Data Entry\"\n  | \"Data Display\"\n  | \"Feedback\"\n  | \"Overlay\"\n  | \"Utility\";\n\nexport const componentMetadata = {\n  ChoiceList: {\n    name: \"ChoiceList\",\n    link: \"/choice-list\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation based on Command component\",\n      \"Supports single and multiple selection modes\",\n      \"Includes search functionality for filtering options\",\n      \"Renders as radio buttons or checkboxes based on selection mode\",\n      \"Handles controlled and uncontrolled state management\"\n    ],\n    category: \"Data Entry\",\n    description: \"A searchable list of options that can be selected either as single or multiple values.\",\n  },\n  DragDrop: {\n    name: \"DragDrop\",\n    link: \"/drag-drop\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for drag and drop functionality\",\n      \"Type-safe with TypeScript generics\",\n      \"Supports custom styling and rendering\",\n      \"Provides Draggable and Droppable subcomponents\",\n      \"Handles drag events with proper context management\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A component for creating drag and drop interfaces with customizable draggable items and drop zones.\",\n  },\n  Badge: {\n    name: \"Badge\",\n    link: \"/badge\",\n    base: \"antd\",\n    refinements: [\n      \"Applies a BioTuring Design System specific CSS class `ds-badge`.\",\n      \"Applies Ant Design's CSS variable class name to ensure proper theming context.\",\n      \"Sets `display: inline-flex;` on the `ds-badge` class via `./style.css` for consistent layout.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/badge\",\n    description:\n      \"Used for highlighting new or unread items, or to display a status.\",\n  },\n  Breadcrumb: {\n    name: \"Breadcrumb\",\n    link: \"/breadcrumb\",\n    base: \"antd\",\n    refinements: [\n      \"Employs a custom `useItemRender` hook to allow icons (from `item.icon`) to be rendered alongside the title within each breadcrumb link.\",\n      \"Introduces a `noWrap` boolean prop for responsive behavior: when true, breadcrumb items attempt to stay on a single line, with text overflow and ellipsis applied to truncatable items.\",\n      \"Applies BioTuring Design System specific styling via `./style.css` for layout (flexbox-based), item spacing, icon integration, and responsive truncation.\",\n      \"Exports styled `Breadcrumb.Item` and `Breadcrumb.Separator` sub-components.\",\n    ],\n    category: \"Navigation\",\n    originalDocUrl: \"https://ant.design/components/breadcrumb\",\n    description:\n      \"Displays the path of the current page, allowing for easy navigation back to previous levels.\",\n  },\n  Button: {\n    name: \"Button\",\n    link: \"/button\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Actions\",\n    originalDocUrl: \"https://ant.design/components/button\",\n    description: \"A clickable element used to trigger an action.\",\n  },\n  Checkbox: {\n    name: \"Checkbox\",\n    link: \"/checkbox\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/checkbox\",\n    description: \"Allows users to select one or more options from a set.\",\n  },\n  CodeBlock: {\n    name: \"CodeBlock\",\n    link: \"/code-block\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for syntax highlighting using `prism-react-renderer`\",\n    ],\n    category: \"Data Display\",\n    packages: [\"prism-react-renderer\"],\n    description: \"Displays blocks of code with syntax highlighting.\",\n  },\n  Collapse: {\n    name: \"Collapse\",\n    link: \"/collapse\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/collapse\",\n    description: \"A content area that can be expanded or collapsed.\",\n  },\n  DropdownMenu: {\n    name: \"DropdownMenu\",\n    link: \"/dropdown-menu\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Menu components\",\n      \"Provides a customizable dropdown menu experience\",\n    ],\n    category: \"Navigation\",\n    packages: [\n      \"@base-ui-components/react/menu\",\n      \"@base-ui-components/react/utils\",\n    ],\n    originalDocUrl: \"https://base-ui.com/react/components/menu\",\n    description:\n      \"A menu that appears when a user interacts with a button or other control.\",\n  },\n  Nav: {\n    name: \"Nav\",\n    link: \"/nav\",\n    base: \"custom\",\n    refinements: [\n      \"Supports icon and label via a render prop pattern\",\n      \"Manages hover state to reveal label when collapsed\",\n      \"Supports active and collapsed/expanded (currentPanel) states\",\n      \"Uses component-level CSS imports and custom transition classes\",\n    ],\n    category: \"Navigation\",\n    description:\n      \"A navigation item with icon and label, supporting active highlighting and hover reveal.\",\n  },\n  Empty: {\n    name: \"Empty\",\n    link: \"/empty\",\n    base: \"antd\",\n    refinements: [\n      \"Replaces the default Ant Design illustration with a custom SVG icon (`EmptyIcon`) defined within the component.\",\n      \"Introduces a `size` prop (`small`, `medium`, `large`, default `medium`) that controls the font-size of the custom `EmptyIcon`.\",\n      \"Applies specific font-sizes for the icon based on the `size` prop (small: 2rem, medium: 3rem, large: 4rem) via `style.css`.\",\n      \"The `small` size icon also has its color set to `var(--ds-color-base-solid)`.\",\n      \"Adjusts the Ant Design Empty image container height to `auto` via `style.css`.\",\n      \"Applies BioTuring Design System specific styling and CSS classes (e.g., `ds-empty`, `ds-empty-icon`).\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/empty\",\n    description: \"Displays a placeholder when content is empty or unavailable.\",\n  },\n  Field: {\n    name: \"Field\",\n    link: \"/field\",\n    base: \"custom\",\n    refinements: [\n      \"Custom component for form fields, providing layout and validation display\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A custom component to structure form inputs with labels, help text, and validation messages.\",\n  },\n  Form: {\n    name: \"Form\",\n    link: \"/form\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/form\",\n    description:\n      \"Provides structure for data input, including layout, validation, and submission capabilities.\",\n  },\n  IconButton: {\n    name: \"Icon Button\",\n    link: \"/icon-button\",\n    base: \"custom\",\n    refinements: [\n      \"Custom button component focused on displaying an icon\",\n      \"Provides consistent styling for icon-only buttons\",\n    ],\n    category: \"Actions\",\n    description:\n      \"A button that primarily displays an icon, used for compact actions.\",\n  },\n  Input: {\n    name: \"Input\",\n    link: \"/input\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/input\",\n    description: \"A basic text input field for user data entry.\",\n  },\n  Message: {\n    name: \"Message\",\n    link: \"/message\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/message\",\n    description:\n      \"The Message component provides feedback in response to user operations. Unlike notification, messages are simpler and typically auto-dismiss after a short duration.\",\n  },\n  Modal: {\n    name: \"Modal\",\n    link: \"/modal\",\n    base: \"antd\",\n    refinements: [\n      \"Added predefined sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `fullscreen`\",\n      \"Introduced a general `loading` state prop for the modal content\",\n      \"Added `hideOkButton` and `hideCancelButton` props for straightforward visibility control of footer buttons\",\n      \"Added `contentPadding` prop for direct control over modal body padding\",\n      \"Enhanced header customization with `afterTitle`, `beforeCloseButton`, and `afterCloseButton` slots for additional elements or actions\",\n      \"Implemented `defaultFixedHeaderFooter` behavior: header and footer become fixed when content overflows (controlled by internal overflow detection)\",\n      \"Changed `centered` prop to default to `true`\",\n      \"Introduced `type` prop (`default`, `info`, `success`, `error`, `warning`) influencing default behaviors like size\",\n      \"Added `background` prop (`elevated`, `container`) for explicit control over modal background style, with size-dependent defaults\",\n      \"Uses a custom `X` icon from `@bioturing/assets` as the default close button icon\",\n      \"Provides `bodyScrollable` prop (defaults to true) to manage content scroll behavior within the modal body\",\n    ],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/modal\",\n    description:\n      \"A modal dialog that appears in front of the app content to provide critical information or ask for a decision.\",\n  },\n  Popover: {\n    name: \"Popover\",\n    link: \"/popover\",\n    base: \"antd\", // Retains AntD as 'base' because it aims for API compatibility\n    refinements: [],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/popover\", // Original AntD doc for API reference\n    description:\n      \"A floating card popped by clicking or hovering that displays additional information.\",\n  },\n  PopupPanel: {\n    name: \"PopupPanel\",\n    link: \"/popup-panel\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Popover\",\n      \"Resizable panel functionality\",\n      \"Custom styling and behavior for panel-like popups\",\n    ],\n    category: \"Overlay\",\n    packages: [\"react-use-resizable\", \"@base-ui-components/react/popover\"],\n    originalDocUrl: \"https://base-ui.com/react/components/popover\",\n    description:\n      \"A specialized panel that pops up, often resizable, for displaying rich content or tools.\",\n  },\n  Radio: {\n    name: \"Radio\",\n    link: \"/radio\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/radio\",\n    description: \"Allows users to select a single option from a set.\",\n  },\n  ScrollArea: {\n    name: \"ScrollArea\",\n    link: \"/scroll-area\",\n    base: \"base-ui\",\n    refinements: [\n      \"Wraps `@base-ui-components/react/ScrollArea` to integrate with the BioTuring Design System.\",\n      \"Provides consistent `classNames` prop pattern for styling different parts (viewport, scrollbar, thumb).\",\n      \"Applies specific BioTuring Design System CSS classes (e.g., `ds-scroll-area`, `ds-scroll-area-viewport`, `ds-scroll-area-scrollbar`, `ds-scroll-area-thumb`) to Base UI component parts.\",\n      \"Provides extensive custom styling via `./style.css` for the root, viewport (including `focus-visible` styles), scrollbar (opacity transitions on hover/scroll, orientation-based dimensions), and thumb (custom border-radius, background, and border colors using design tokens).\",\n    ],\n    category: \"Layout\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl: \"https://base-ui.com/react/components/scroll-area\",\n    description:\n      \"A scrollable container with custom scrollbars that blend with the design system.\",\n  },\n  Segmented: {\n    name: \"Segmented\",\n    link: \"/segmented\",\n    base: \"antd\",\n    refinements: [\n      \"Structured as a typed `forwardRef` wrapper around the Ant Design Segmented component for type safety and consistency.\",\n      \"Applies custom styles via `./style.css` to ensure proper alignment and sizing of item labels and icons within the segmented control (e.g., flex centering for labels and icons, default icon size).\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/segmented\",\n    description:\n      \"A set of buttons that allows users to switch between different views or options.\",\n  },\n  Select: {\n    name: \"Select\",\n    link: \"/select\",\n    base: \"antd\",\n    refinements: [\n      \"Introduced `enhancePositioner` prop: Utilizes `@floating-ui/react` for robust dropdown positioning, allowing it to break out of overflow containers and intelligently place itself.\",\n      \"Added `popupSize` prop (works with `enhancePositioner`): Controls the dropdown width with predefined sizes (e.g., `small`, `medium`, `large`), pixel values, or `fit-content`.\",\n      \"Replaced default suffix icon with a custom `CaretDown` icon from `@bioturing/assets`.\",\n      \"Customized multiple selection mode: Uses Ant Design `Checkbox` components for indicating selected items in the dropdown.\",\n      \"Applied specific BioTuring Design System styling and CSS classes, including enhanced popup styles when `enhancePositioner` is active.\",\n    ],\n    category: \"Data Entry\",\n    packages: [\"@floating-ui/react\", \"rc-select\"],\n    originalDocUrl: \"https://ant.design/components/select\",\n    description:\n      \"A dropdown selection component for selecting values from a list of options.\",\n  },\n  Slider: {\n    name: \"Slider\",\n    link: \"/slider\",\n    base: \"antd\",\n    refinements: [\n      \"Applies a BioTuring Design System specific CSS class `ds-slider`.\",\n      \"Modifies the default behavior of the slider's tooltip by setting `tooltip.arrow` to `false` by default (Ant Design's default is true).\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/slider\",\n    description:\n      \"Allows users to select a value from a continuous or discrete range.\",\n  },\n  Spin: {\n    name: \"Spin\",\n    link: \"/spin\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/spin\",\n    description: \"Indicates a loading state.\",\n  },\n  Splitter: {\n    name: \"Splitter\",\n    link: \"/splitter\",\n    base: \"antd\", // Assuming it's styled like AntD or uses AntD primitives\n    refinements: [\n      \"Custom component for creating resizable layouts, inspired by Ant Design styling\",\n    ],\n    category: \"Layout\",\n    // originalDocUrl: \"https://ant.design/components/layout\", // AntD Layout could be a loose reference, but no direct 'Splitter' component.\n    description:\n      \"Splitter is used to divide and resize multiple elements in a container.\",\n  },\n  Stack: {\n    name: \"Stack\",\n    link: \"/stack\",\n    base: \"custom\",\n    refinements: [\n      \"Custom component for creating horizontal or vertical layouts with consistent spacing\",\n      \"Uses CSS classes for alignment and justification\",\n      \"Provides StackChild component with useRender hook for flexible item control\",\n    ],\n    category: \"Layout\",\n    description:\n      \"A flexible layout component for arranging items in a row or column with consistent spacing.\",\n  },\n  Switch: {\n    name: \"Switch\",\n    link: \"/switch\",\n    base: \"antd\",\n    refinements: [\n      \"Structured as a typed `forwardRef` wrapper around Ant Design's Switch component.\",\n      \"Applies custom CSS to ensure `checkedChildren` and `unCheckedChildren` (e.g., icons, text) are properly centered within the switch handle.\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/switch\",\n    description:\n      \"A toggle switch for changing between two states, typically on or off.\",\n  },\n  Table: {\n    name: \"Table\",\n    link: \"/table\",\n    base: \"antd\",\n    refinements: [\n      \"Applies BioTuring Design System specific styling via `./style.css`.\",\n      \"Enhances the default Ant Design Table with additional features.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/table\",\n    description:\n      \"A table displays rows of data, supporting features like sorting, filtering, and pagination.\",\n  },\n  Tag: {\n    name: \"Tag\",\n    link: \"/tag\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults to using the `X` icon (bold) from `@bioturing/assets` as the `closeIcon` if the tag is `closable` and no custom icon is provided.\",\n      \"Introduces an `active` boolean prop (defaults to false).\",\n      \"When `active={true}`, applies specific styling (background, border, text color using `--ds-color-primary` tokens) via a `data-active` attribute and `style.css`.\",\n      \"Applies BioTuring Design System specific styling via `./style.css`, including base styles for alignment and consistent close icon coloring (`--ds-color-icon`).\",\n      \"Introduces a `size` prop with options `small`, `medium`, and `large` to control tag dimensions.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/tag\",\n    description:\n      \"Small UI elements for categorization, filtering, or highlighting items.\",\n  },\n  ColorSelect: {\n    name: \"ColorSelect\",\n    link: \"/color-select\",\n    base: \"antd\",\n    refinements: [\n      \"Combines Ant Design `ColorPicker` with a `Select`-like input for color selection.\",\n      \"Supports preset colors via the `presetColors` prop and freeform hex input.\",\n      \"Displays selected colors as closable `Tag`s with color swatches.\",\n      \"Provides controlled/uncontrolled APIs (`value`/`defaultValue`, `open`/`defaultOpen`).\",\n      \"Emits a `toast` notification on invalid color entries.\",\n      \"Uses `Stack` for layout and `style.css` for BioTuring styling.\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A combined color picker and selector allowing preset and custom color selection with tag display.\",\n  },\n  ThemeProvider: {\n    name: \"ThemeProvider\",\n    link: \"/theme-provider\",\n    base: \"custom\",\n    refinements: [\n      \"Custom utility for managing application-wide themes\",\n      \"Provides context for styling consistency\",\n    ],\n    category: \"Utility\",\n    description:\n      \"A utility component for providing theme context to its children, enabling consistent styling across the application.\",\n  },\n  Toast: {\n    name: \"Toast\",\n    link: \"/toast\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Toast components\",\n      \"Customizable appearance and behavior for notifications\",\n    ],\n    category: \"Feedback\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl: \"https://base-ui.com/react/components/toast\",\n    description:\n      \"Displays brief, auto-expiring messages to provide feedback or alerts, similar to notifications but often less intrusive.\",\n  },\n  Tooltip: {\n    name: \"Tooltip\",\n    link: \"/tooltip\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults the `arrow` prop to `false`, hiding the tooltip arrow by default (Ant Design's default shows an arrow).\",\n      \"Applies a BioTuring Design System specific CSS class `ds-tooltip`.\",\n      \"Custom CSS sets `min-height: auto;` for the inner content, allowing tooltips to be shorter than Ant Design's default minimum height.\",\n    ],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/tooltip\",\n    description:\n      \"A simple text popup tip that appears when a user hovers over an element.\",\n  },\n  Tour: {\n    name: \"Tour\",\n    link: \"/tour\",\n    base: \"antd\",\n    refinements: [\n      \"Provides a custom default rendering for step indicators (`indicatorsRender`) if none is supplied. This includes a `current / total` text and visual dots for steps.\",\n      \"Applies BioTuring Design System specific CSS classes (e.g., `ds-tour`) for extensive styling.\",\n      \"Customizes typography for title, description, and indicator text using design system tokens.\",\n      \"Adjusts layout and spacing for header, footer, and content within the tour description (paragraphs, lists, icons).\",\n      \"Includes specific styling for the appearance of the custom default indicators (wrapper, summary text, active/inactive dots).\",\n    ],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/tour\",\n    description:\n      \"A guided tour interface that leads users through specific features of an application.\",\n  },\n  Transition: {\n    name: \"Transition\",\n    link: \"/transition\",\n    base: \"base-ui\",\n    refinements: [\n      \"Wraps Base UI utilities (e.g., `useTransitionStatus`, `useRender`) and custom hooks (e.g., `useAnimationsFinished`) to manage element enter/leave transitions.\",\n      \"Accepts `starting` and `ending` props, which can be CSS class strings (for Tailwind) or style objects, to define transition states.\",\n      \"Dynamically applies `starting`/`ending` styles and sets `data-starting`/`data-ending` attributes on the child element based on transition phase.\",\n      \"Manages mounting/unmounting of children post-animation, with a `keepMounted` option, using a custom `useAnimationsFinished` hook.\",\n      \"Provides a declarative API for CSS-based transitions.\",\n    ],\n    category: \"Utility\",\n    packages: [\n      \"@base-ui-components/react/use-render\",\n      \"@base-ui-components/react/merge-props\",\n      \"@base-ui-components/react/utils\",\n    ],\n    originalDocUrl: \"https://base-ui.com/react/components\", // General Base UI components link as specific utility pages might vary\n    description:\n      \"Provides utilities for applying CSS transitions and animations to components.\",\n  },\n  Typography: {\n    name: \"Typography\",\n    link: \"/typography\",\n    base: \"antd\",\n    refinements: [\n      \"Extends Ant Design Typography with custom styles or additional text utilities\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/typography\",\n    description:\n      \"Typography is a component that provides a set of tools for working with text, including text alignment, font size, and font weight.\",\n  },\n  Tree: {\n    name: \"Tree\",\n    link: \"/tree\",\n    base: \"antd\",\n    refinements: [\n      \"Utilizes rc-tree for core functionality\",\n      \"Enhanced features like custom node rendering, drag-and-drop, or advanced filtering\",\n    ],\n    category: \"Data Display\",\n    packages: [\"rc-tree\"],\n    originalDocUrl: \"https://ant.design/components/tree\",\n    description:\n      \"A hierarchical list structure component that presents nested data clearly.\",\n  },\n  Truncate: {\n    name: \"Truncate\",\n    link: \"/truncate\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for text truncation\",\n      \"Supports middle and end truncation\",\n      \"Configurable ellipsis and tooltip on hover\",\n      \"Multi-line truncation with configurable number of lines\",\n      \"Auto-height truncation that adapts to parent container size\",\n    ],\n    category: \"Data Display\",\n    description:\n      \"The Truncate component helps manage text overflow by truncating text elegantly and displaying an ellipsis. It supports truncation at the middle or end of the text.\",\n  },\n  Upload: {\n    name: \"Upload\",\n    link: \"/upload\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults to a custom `itemRender` function that utilizes a bespoke `UploadItem` component for the file list.\",\n      \"`UploadItem` component features: file type icon, middle-truncated file name (using Truncate component), progress bar with status mapping, and a remove button.\",\n      \"Added `showRemoveButton` prop (defaults to true) on the `Upload` component to control visibility of the remove action in `UploadItem`.\",\n      \"`UploadItem` includes a slot for `extraActions` allowing additional custom controls per file.\",\n      \"Provides a default `Button` with `CloudArrowUp` icon and 'Upload Files' text if no children are passed to `Upload`.\",\n      \"Includes `Upload.Dragger` for drag-and-drop functionality, styled for the design system.\",\n      \"Exports `Upload.Item` (the UploadItem component) for potential direct use.\",\n      \"Applies BioTuring Design System specific styling and CSS classes.\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/upload\",\n    description: \"Allows users to select and upload files.\",\n  },\n  VerticalCollapsiblePanel: {\n    name: \"Vertical Collapsible Panel\",\n    link: \"/vertical-collapsible-panel\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built upon `@base-ui-components/react` Collapsible components (`Collapsible.Root`, `Collapsible.Panel`).\",\n      \"Manages open/closed state with a custom `useControlledState` hook for controlled/uncontrolled behavior.\",\n      \"Features custom expand/collapse trigger icons (`MinusCircle`, `PlusCircle` from `@bioturing/assets`) via IconButton.\",\n      \"Automatically truncates string titles using the `Truncate` component.\",\n      \"Provides `afterTitle` and `actions` slots in the header for additional UI elements, visible when open.\",\n      \"Integrates the BioTuring `Transition` component for smooth open/close animations of the panel body, managed with `useAnimationsFinished` hook.\",\n      \"Offers a `contentPadding` prop (default `16px`) for customizable body padding via CSS variable `--ds-content-padding`.\",\n      \"Extensive custom CSS for layout, typography, and a unique feature: header text displays vertically (`writing-mode: vertical-rl`) when collapsed.\",\n      \"Supports `keepMounted` prop and applies Ant Design CSS variables for theming.\",\n    ],\n    category: \"Layout\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl:\n      \"https://base-ui.com/react/components/vertical-collapsible-panel\", // Assuming this kebab-case name for Base UI docs\n    description:\n      \"A panel that can be collapsed or expanded vertically, often used in sidebars or for sectioning content.\",\n  },\n} satisfies Record<string, ComponentMetadata>;\n\n/**\n * Get all components by category\n */\nexport const getComponentsByCategory = (): Record<\n  ComponentCategory,\n  ComponentMetadata[]\n> => {\n  const categories: Record<ComponentCategory, ComponentMetadata[]> = {\n    Actions: [],\n    General: [],\n    Layout: [],\n    Navigation: [],\n    \"Data Entry\": [],\n    \"Data Display\": [],\n    Feedback: [],\n    Overlay: [],\n    Utility: [],\n  };\n\n  Object.values(componentMetadata).forEach((component) => {\n    categories[component.category].push(component);\n  });\n\n  // Sort components alphabetically within each category\n  Object.keys(categories).forEach((category) => {\n    categories[category as ComponentCategory].sort((a, b) =>\n      a.name.localeCompare(b.name)\n    );\n  });\n\n  return categories;\n};\n"],"names":["componentMetadata","getComponentsByCategory","categories","component","category","a","b"],"mappings":"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"}
+{"version":3,"file":"metadata.js","sources":["../src/metadata.ts"],"sourcesContent":["/**\n * Component metadata for the BioTuring Design System\n * This file provides information about all components including:\n * - name: Component name\n * - link: Documentation link\n * - base: What the component is based on (antd, base-ui, or custom)\n * - refinements: Whether the component has been refined beyond its base\n * - category: Component category for organization\n * - packages: Additional packages used by the component\n */\n\nexport type ComponentMetadata = {\n  name: string;\n  link: string;\n  base: \"antd\" | \"base-ui\" | \"custom\";\n  refinements: string[]; // Renamed from 'customized'\n  category: ComponentCategory;\n  packages?: string[];\n  originalDocUrl?: string;\n  description?: string;\n};\n\nexport type ComponentCategory =\n  | \"Actions\"\n  | \"General\"\n  | \"Layout\"\n  | \"Navigation\"\n  | \"Data Entry\"\n  | \"Data Display\"\n  | \"Feedback\"\n  | \"Overlay\"\n  | \"Utility\";\n\nexport const componentMetadata = {\n  ChoiceList: {\n    name: \"ChoiceList\",\n    link: \"/choice-list\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation based on Command component\",\n      \"Supports single and multiple selection modes\",\n      \"Includes search functionality for filtering options\",\n      \"Renders as radio buttons or checkboxes based on selection mode\",\n      \"Handles controlled and uncontrolled state management\"\n    ],\n    category: \"Data Entry\",\n    description: \"A searchable list of options that can be selected either as single or multiple values.\",\n  },\n  DragDrop: {\n    name: \"DragDrop\",\n    link: \"/drag-drop\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for drag and drop functionality\",\n      \"Type-safe with TypeScript generics\",\n      \"Supports custom styling and rendering\",\n      \"Provides Draggable and Droppable subcomponents\",\n      \"Handles drag events with proper context management\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A component for creating drag and drop interfaces with customizable draggable items and drop zones.\",\n  },\n  Badge: {\n    name: \"Badge\",\n    link: \"/badge\",\n    base: \"antd\",\n    refinements: [\n      \"Applies a BioTuring Design System specific CSS class `ds-badge`.\",\n      \"Applies Ant Design's CSS variable class name to ensure proper theming context.\",\n      \"Sets `display: inline-flex;` on the `ds-badge` class via `./style.css` for consistent layout.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/badge\",\n    description:\n      \"Used for highlighting new or unread items, or to display a status.\",\n  },\n  Breadcrumb: {\n    name: \"Breadcrumb\",\n    link: \"/breadcrumb\",\n    base: \"antd\",\n    refinements: [\n      \"Employs a custom `useItemRender` hook to allow icons (from `item.icon`) to be rendered alongside the title within each breadcrumb link.\",\n      \"Introduces a `noWrap` boolean prop for responsive behavior: when true, breadcrumb items attempt to stay on a single line, with text overflow and ellipsis applied to truncatable items.\",\n      \"Applies BioTuring Design System specific styling via `./style.css` for layout (flexbox-based), item spacing, icon integration, and responsive truncation.\",\n      \"Exports styled `Breadcrumb.Item` and `Breadcrumb.Separator` sub-components.\",\n    ],\n    category: \"Navigation\",\n    originalDocUrl: \"https://ant.design/components/breadcrumb\",\n    description:\n      \"Displays the path of the current page, allowing for easy navigation back to previous levels.\",\n  },\n  Button: {\n    name: \"Button\",\n    link: \"/button\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Actions\",\n    originalDocUrl: \"https://ant.design/components/button\",\n    description: \"A clickable element used to trigger an action.\",\n  },\n  Checkbox: {\n    name: \"Checkbox\",\n    link: \"/checkbox\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/checkbox\",\n    description: \"Allows users to select one or more options from a set.\",\n  },\n  CodeBlock: {\n    name: \"CodeBlock\",\n    link: \"/code-block\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for syntax highlighting using `prism-react-renderer`\",\n    ],\n    category: \"Data Display\",\n    packages: [\"prism-react-renderer\"],\n    description: \"Displays blocks of code with syntax highlighting.\",\n  },\n  Collapse: {\n    name: \"Collapse\",\n    link: \"/collapse\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/collapse\",\n    description: \"A content area that can be expanded or collapsed.\",\n  },\n  DropdownMenu: {\n    name: \"DropdownMenu\",\n    link: \"/dropdown-menu\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Menu components\",\n      \"Provides a customizable dropdown menu experience\",\n    ],\n    category: \"Navigation\",\n    packages: [\n      \"@base-ui-components/react/menu\",\n      \"@base-ui-components/react/utils\",\n    ],\n    originalDocUrl: \"https://base-ui.com/react/components/menu\",\n    description:\n      \"A menu that appears when a user interacts with a button or other control.\",\n  },\n  Nav: {\n    name: \"Nav\",\n    link: \"/nav\",\n    base: \"custom\",\n    refinements: [\n      \"Supports icon and label via a render prop pattern\",\n      \"Manages hover state to reveal label when collapsed\",\n      \"Supports active and collapsed/expanded (currentPanel) states\",\n      \"Uses component-level CSS imports and custom transition classes\",\n    ],\n    category: \"Navigation\",\n    description:\n      \"A navigation item with icon and label, supporting active highlighting and hover reveal.\",\n  },\n  Empty: {\n    name: \"Empty\",\n    link: \"/empty\",\n    base: \"antd\",\n    refinements: [\n      \"Replaces the default Ant Design illustration with a custom SVG icon (`EmptyIcon`) defined within the component.\",\n      \"Introduces a `size` prop (`small`, `medium`, `large`, default `medium`) that controls the font-size of the custom `EmptyIcon`.\",\n      \"Applies specific font-sizes for the icon based on the `size` prop (small: 2rem, medium: 3rem, large: 4rem) via `style.css`.\",\n      \"The `small` size icon also has its color set to `var(--ds-color-base-solid)`.\",\n      \"Adjusts the Ant Design Empty image container height to `auto` via `style.css`.\",\n      \"Applies BioTuring Design System specific styling and CSS classes (e.g., `ds-empty`, `ds-empty-icon`).\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/empty\",\n    description: \"Displays a placeholder when content is empty or unavailable.\",\n  },\n  Field: {\n    name: \"Field\",\n    link: \"/field\",\n    base: \"custom\",\n    refinements: [\n      \"Custom component for form fields, providing layout and validation display\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A custom component to structure form inputs with labels, help text, and validation messages.\",\n  },\n  Form: {\n    name: \"Form\",\n    link: \"/form\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/form\",\n    description:\n      \"Provides structure for data input, including layout, validation, and submission capabilities.\",\n  },\n  IconButton: {\n    name: \"Icon Button\",\n    link: \"/icon-button\",\n    base: \"custom\",\n    refinements: [\n      \"Custom button component focused on displaying an icon\",\n      \"Provides consistent styling for icon-only buttons\",\n    ],\n    category: \"Actions\",\n    description:\n      \"A button that primarily displays an icon, used for compact actions.\",\n  },\n  Input: {\n    name: \"Input\",\n    link: \"/input\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/input\",\n    description: \"A basic text input field for user data entry.\",\n  },\n  Message: {\n    name: \"Message\",\n    link: \"/message\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/message\",\n    description:\n      \"The Message component provides feedback in response to user operations. Unlike notification, messages are simpler and typically auto-dismiss after a short duration.\",\n  },\n  Modal: {\n    name: \"Modal\",\n    link: \"/modal\",\n    base: \"antd\",\n    refinements: [\n      \"Added predefined sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`, `fullscreen`\",\n      \"Introduced a general `loading` state prop for the modal content\",\n      \"Added `hideOkButton` and `hideCancelButton` props for straightforward visibility control of footer buttons\",\n      \"Added `contentPadding` prop for direct control over modal body padding\",\n      \"Enhanced header customization with `afterTitle`, `beforeCloseButton`, and `afterCloseButton` slots for additional elements or actions\",\n      \"Implemented `defaultFixedHeaderFooter` behavior: header and footer become fixed when content overflows (controlled by internal overflow detection)\",\n      \"Changed `centered` prop to default to `true`\",\n      \"Introduced `type` prop (`default`, `info`, `success`, `error`, `warning`) influencing default behaviors like size\",\n      \"Added `background` prop (`elevated`, `container`) for explicit control over modal background style, with size-dependent defaults\",\n      \"Uses a custom `X` icon from `@bioturing/assets` as the default close button icon\",\n      \"Provides `bodyScrollable` prop (defaults to true) to manage content scroll behavior within the modal body\",\n    ],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/modal\",\n    description:\n      \"A modal dialog that appears in front of the app content to provide critical information or ask for a decision.\",\n  },\n  Popover: {\n    name: \"Popover\",\n    link: \"/popover\",\n    base: \"antd\", // Retains AntD as 'base' because it aims for API compatibility\n    refinements: [],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/popover\", // Original AntD doc for API reference\n    description:\n      \"A floating card popped by clicking or hovering that displays additional information.\",\n  },\n  PopupPanel: {\n    name: \"PopupPanel\",\n    link: \"/popup-panel\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Popover\",\n      \"Resizable panel functionality\",\n      \"Custom styling and behavior for panel-like popups\",\n    ],\n    category: \"Overlay\",\n    packages: [\"react-use-resizable\", \"@base-ui-components/react/popover\"],\n    originalDocUrl: \"https://base-ui.com/react/components/popover\",\n    description:\n      \"A specialized panel that pops up, often resizable, for displaying rich content or tools.\",\n  },\n  Radio: {\n    name: \"Radio\",\n    link: \"/radio\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/radio\",\n    description: \"Allows users to select a single option from a set.\",\n  },\n  ScrollArea: {\n    name: \"ScrollArea\",\n    link: \"/scroll-area\",\n    base: \"base-ui\",\n    refinements: [\n      \"Wraps `@base-ui-components/react/ScrollArea` to integrate with the BioTuring Design System.\",\n      \"Provides consistent `classNames` prop pattern for styling different parts (viewport, scrollbar, thumb).\",\n      \"Applies specific BioTuring Design System CSS classes (e.g., `ds-scroll-area`, `ds-scroll-area-viewport`, `ds-scroll-area-scrollbar`, `ds-scroll-area-thumb`) to Base UI component parts.\",\n      \"Provides extensive custom styling via `./style.css` for the root, viewport (including `focus-visible` styles), scrollbar (opacity transitions on hover/scroll, orientation-based dimensions), and thumb (custom border-radius, background, and border colors using design tokens).\",\n    ],\n    category: \"Layout\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl: \"https://base-ui.com/react/components/scroll-area\",\n    description:\n      \"A scrollable container with custom scrollbars that blend with the design system.\",\n  },\n  Segmented: {\n    name: \"Segmented\",\n    link: \"/segmented\",\n    base: \"antd\",\n    refinements: [\n      \"Structured as a typed `forwardRef` wrapper around the Ant Design Segmented component for type safety and consistency.\",\n      \"Applies custom styles via `./style.css` to ensure proper alignment and sizing of item labels and icons within the segmented control (e.g., flex centering for labels and icons, default icon size).\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/segmented\",\n    description:\n      \"A set of buttons that allows users to switch between different views or options.\",\n  },\n  Select: {\n    name: \"Select\",\n    link: \"/select\",\n    base: \"antd\",\n    refinements: [\n      \"Introduced `enhancePositioner` prop: Utilizes `@floating-ui/react` for robust dropdown positioning, allowing it to break out of overflow containers and intelligently place itself.\",\n      \"Added `popupSize` prop (works with `enhancePositioner`): Controls the dropdown width with predefined sizes (e.g., `small`, `medium`, `large`), pixel values, or `fit-content`.\",\n      \"Replaced default suffix icon with a custom `CaretDown` icon from `@bioturing/assets`.\",\n      \"Customized multiple selection mode: Uses Ant Design `Checkbox` components for indicating selected items in the dropdown.\",\n      \"Applied specific BioTuring Design System styling and CSS classes, including enhanced popup styles when `enhancePositioner` is active.\",\n    ],\n    category: \"Data Entry\",\n    packages: [\"@floating-ui/react\", \"rc-select\"],\n    originalDocUrl: \"https://ant.design/components/select\",\n    description:\n      \"A dropdown selection component for selecting values from a list of options.\",\n  },\n  Slider: {\n    name: \"Slider\",\n    link: \"/slider\",\n    base: \"antd\",\n    refinements: [\n      \"Applies a BioTuring Design System specific CSS class `ds-slider`.\",\n      \"Modifies the default behavior of the slider's tooltip by setting `tooltip.arrow` to `false` by default (Ant Design's default is true).\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/slider\",\n    description:\n      \"Allows users to select a value from a continuous or discrete range.\",\n  },\n  Spin: {\n    name: \"Spin\",\n    link: \"/spin\",\n    base: \"antd\",\n    refinements: [],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/spin\",\n    description: \"Indicates a loading state.\",\n  },\n  Splitter: {\n    name: \"Splitter\",\n    link: \"/splitter\",\n    base: \"antd\", // Assuming it's styled like AntD or uses AntD primitives\n    refinements: [\n      \"Custom component for creating resizable layouts, inspired by Ant Design styling\",\n    ],\n    category: \"Layout\",\n    // originalDocUrl: \"https://ant.design/components/layout\", // AntD Layout could be a loose reference, but no direct 'Splitter' component.\n    description:\n      \"Splitter is used to divide and resize multiple elements in a container.\",\n  },\n  Stack: {\n    name: \"Stack\",\n    link: \"/stack\",\n    base: \"custom\",\n    refinements: [\n      \"Custom component for creating horizontal or vertical layouts with consistent spacing\",\n      \"Uses CSS classes for alignment and justification\",\n      \"Provides StackChild component with useRender hook for flexible item control\",\n    ],\n    category: \"Layout\",\n    description:\n      \"A flexible layout component for arranging items in a row or column with consistent spacing.\",\n  },\n  Switch: {\n    name: \"Switch\",\n    link: \"/switch\",\n    base: \"antd\",\n    refinements: [\n      \"Structured as a typed `forwardRef` wrapper around Ant Design's Switch component.\",\n      \"Applies custom CSS to ensure `checkedChildren` and `unCheckedChildren` (e.g., icons, text) are properly centered within the switch handle.\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/switch\",\n    description:\n      \"A toggle switch for changing between two states, typically on or off.\",\n  },\n  Table: {\n    name: \"Table\",\n    link: \"/table\",\n    base: \"antd\",\n    refinements: [\n      \"Applies BioTuring Design System specific styling via `./style.css`.\",\n      \"Enhances the default Ant Design Table with additional features.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/table\",\n    description:\n      \"A table displays rows of data, supporting features like sorting, filtering, and pagination.\",\n  },\n  Tag: {\n    name: \"Tag\",\n    link: \"/tag\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults to using the `X` icon (bold) from `@bioturing/assets` as the `closeIcon` if the tag is `closable` and no custom icon is provided.\",\n      \"Introduces an `active` boolean prop (defaults to false).\",\n      \"When `active={true}`, applies specific styling (background, border, text color using `--ds-color-primary` tokens) via a `data-active` attribute and `style.css`.\",\n      \"Applies BioTuring Design System specific styling via `./style.css`, including base styles for alignment and consistent close icon coloring (`--ds-color-icon`).\",\n      \"Introduces a `size` prop with options `small`, `medium`, and `large` to control tag dimensions.\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/tag\",\n    description:\n      \"Small UI elements for categorization, filtering, or highlighting items.\",\n  },\n  ColorSelect: {\n    name: \"ColorSelect\",\n    link: \"/color-select\",\n    base: \"antd\",\n    refinements: [\n      \"Combines Ant Design `ColorPicker` with a `Select`-like input for color selection.\",\n      \"Supports preset colors via the `presetColors` prop and freeform hex input.\",\n      \"Displays selected colors as closable `Tag`s with color swatches.\",\n      \"Provides controlled/uncontrolled APIs (`value`/`defaultValue`, `open`/`defaultOpen`).\",\n      \"Emits a `toast` notification on invalid color entries.\",\n      \"Uses `Stack` for layout and `style.css` for BioTuring styling.\",\n    ],\n    category: \"Data Entry\",\n    description:\n      \"A combined color picker and selector allowing preset and custom color selection with tag display.\",\n  },\n  ThemeProvider: {\n    name: \"ThemeProvider\",\n    link: \"/theme-provider\",\n    base: \"custom\",\n    refinements: [\n      \"Custom utility for managing application-wide themes\",\n      \"Provides context for styling consistency\",\n    ],\n    category: \"Utility\",\n    description:\n      \"A utility component for providing theme context to its children, enabling consistent styling across the application.\",\n  },\n  Toast: {\n    name: \"Toast\",\n    link: \"/toast\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built with Base UI Toast components\",\n      \"Customizable appearance and behavior for notifications\",\n    ],\n    category: \"Feedback\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl: \"https://base-ui.com/react/components/toast\",\n    description:\n      \"Displays brief, auto-expiring messages to provide feedback or alerts, similar to notifications but often less intrusive.\",\n  },\n  Tooltip: {\n    name: \"Tooltip\",\n    link: \"/tooltip\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults the `arrow` prop to `false`, hiding the tooltip arrow by default (Ant Design's default shows an arrow).\",\n      \"Applies a BioTuring Design System specific CSS class `ds-tooltip`.\",\n      \"Custom CSS sets `min-height: auto;` for the inner content, allowing tooltips to be shorter than Ant Design's default minimum height.\",\n    ],\n    category: \"Overlay\",\n    originalDocUrl: \"https://ant.design/components/tooltip\",\n    description:\n      \"A simple text popup tip that appears when a user hovers over an element.\",\n  },\n  Tour: {\n    name: \"Tour\",\n    link: \"/tour\",\n    base: \"antd\",\n    refinements: [\n      \"Provides a custom default rendering for step indicators (`indicatorsRender`) if none is supplied. This includes a `current / total` text and visual dots for steps.\",\n      \"Applies BioTuring Design System specific CSS classes (e.g., `ds-tour`) for extensive styling.\",\n      \"Customizes typography for title, description, and indicator text using design system tokens.\",\n      \"Adjusts layout and spacing for header, footer, and content within the tour description (paragraphs, lists, icons).\",\n      \"Includes specific styling for the appearance of the custom default indicators (wrapper, summary text, active/inactive dots).\",\n    ],\n    category: \"Feedback\",\n    originalDocUrl: \"https://ant.design/components/tour\",\n    description:\n      \"A guided tour interface that leads users through specific features of an application.\",\n  },\n  Transition: {\n    name: \"Transition\",\n    link: \"/transition\",\n    base: \"base-ui\",\n    refinements: [\n      \"Wraps Base UI utilities (e.g., `useTransitionStatus`, `useRender`) and custom hooks (e.g., `useAnimationsFinished`) to manage element enter/leave transitions.\",\n      \"Accepts `starting` and `ending` props, which can be CSS class strings (for Tailwind) or style objects, to define transition states.\",\n      \"Dynamically applies `starting`/`ending` styles and sets `data-starting`/`data-ending` attributes on the child element based on transition phase.\",\n      \"Manages mounting/unmounting of children post-animation, with a `keepMounted` option, using a custom `useAnimationsFinished` hook.\",\n      \"Provides a declarative API for CSS-based transitions.\",\n    ],\n    category: \"Utility\",\n    packages: [\n      \"@base-ui-components/react/use-render\",\n      \"@base-ui-components/react/merge-props\",\n      \"@base-ui-components/react/utils\",\n    ],\n    originalDocUrl: \"https://base-ui.com/react/components\", // General Base UI components link as specific utility pages might vary\n    description:\n      \"Provides utilities for applying CSS transitions and animations to components.\",\n  },\n  Typography: {\n    name: \"Typography\",\n    link: \"/typography\",\n    base: \"antd\",\n    refinements: [\n      \"Extends Ant Design Typography with custom styles or additional text utilities\",\n    ],\n    category: \"Data Display\",\n    originalDocUrl: \"https://ant.design/components/typography\",\n    description:\n      \"Typography is a component that provides a set of tools for working with text, including text alignment, font size, and font weight.\",\n  },\n  Tree: {\n    name: \"Tree\",\n    link: \"/tree\",\n    base: \"antd\",\n    refinements: [\n      \"Utilizes rc-tree for core functionality\",\n      \"Enhanced features like custom node rendering, drag-and-drop, or advanced filtering\",\n    ],\n    category: \"Data Display\",\n    packages: [\"rc-tree\"],\n    originalDocUrl: \"https://ant.design/components/tree\",\n    description:\n      \"A hierarchical list structure component that presents nested data clearly.\",\n  },\n  Truncate: {\n    name: \"Truncate\",\n    link: \"/truncate\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation for text truncation\",\n      \"Supports middle and end truncation\",\n      \"Configurable ellipsis and tooltip on hover\",\n      \"Multi-line truncation with configurable number of lines\",\n      \"Auto-height truncation that adapts to parent container size\",\n    ],\n    category: \"Data Display\",\n    description:\n      \"The Truncate component helps manage text overflow by truncating text elegantly and displaying an ellipsis. It supports truncation at the middle or end of the text.\",\n  },\n  Upload: {\n    name: \"Upload\",\n    link: \"/upload\",\n    base: \"antd\",\n    refinements: [\n      \"Defaults to a custom `itemRender` function that utilizes a bespoke `UploadItem` component for the file list.\",\n      \"`UploadItem` component features: file type icon, middle-truncated file name (using Truncate component), progress bar with status mapping, and a remove button.\",\n      \"Added `showRemoveButton` prop (defaults to true) on the `Upload` component to control visibility of the remove action in `UploadItem`.\",\n      \"`UploadItem` includes a slot for `extraActions` allowing additional custom controls per file.\",\n      \"Provides a default `Button` with `CloudArrowUp` icon and 'Upload Files' text if no children are passed to `Upload`.\",\n      \"Includes `Upload.Dragger` for drag-and-drop functionality, styled for the design system.\",\n      \"Exports `Upload.Item` (the UploadItem component) for potential direct use.\",\n      \"Applies BioTuring Design System specific styling and CSS classes.\",\n    ],\n    category: \"Data Entry\",\n    originalDocUrl: \"https://ant.design/components/upload\",\n    description: \"Allows users to select and upload files.\",\n  },\n  StatusIcon: {\n    name: \"StatusIcon\",\n    link: \"/status-icon\",\n    base: \"custom\",\n    refinements: [\n      \"Custom implementation using predefined icons for different status states\",\n      \"Supports success, error, warning, info, and processing status types\",\n      \"Provides multiple size options: small (12px), medium (16px), large (20px), xlarge (24px)\",\n      \"Uses semantic icons from @bioturing/assets for consistent visual language\",\n      \"Applies BioTuring Design System specific CSS classes for styling\",\n    ],\n    category: \"Feedback\",\n    description:\n      \"A component that displays status icons to provide visual feedback for different states and operations.\",\n  },\n  VerticalCollapsiblePanel: {\n    name: \"Vertical Collapsible Panel\",\n    link: \"/vertical-collapsible-panel\",\n    base: \"base-ui\",\n    refinements: [\n      \"Built upon `@base-ui-components/react` Collapsible components (`Collapsible.Root`, `Collapsible.Panel`).\",\n      \"Manages open/closed state with a custom `useControlledState` hook for controlled/uncontrolled behavior.\",\n      \"Features custom expand/collapse trigger icons (`MinusCircle`, `PlusCircle` from `@bioturing/assets`) via IconButton.\",\n      \"Automatically truncates string titles using the `Truncate` component.\",\n      \"Provides `afterTitle` and `actions` slots in the header for additional UI elements, visible when open.\",\n      \"Integrates the BioTuring `Transition` component for smooth open/close animations of the panel body, managed with `useAnimationsFinished` hook.\",\n      \"Offers a `contentPadding` prop (default `16px`) for customizable body padding via CSS variable `--ds-content-padding`.\",\n      \"Extensive custom CSS for layout, typography, and a unique feature: header text displays vertically (`writing-mode: vertical-rl`) when collapsed.\",\n      \"Supports `keepMounted` prop and applies Ant Design CSS variables for theming.\",\n    ],\n    category: \"Layout\",\n    packages: [\"@base-ui-components/react\"],\n    originalDocUrl:\n      \"https://base-ui.com/react/components/vertical-collapsible-panel\", // Assuming this kebab-case name for Base UI docs\n    description:\n      \"A panel that can be collapsed or expanded vertically, often used in sidebars or for sectioning content.\",\n  },\n} satisfies Record<string, ComponentMetadata>;\n\n/**\n * Get all components by category\n */\nexport const getComponentsByCategory = (): Record<\n  ComponentCategory,\n  ComponentMetadata[]\n> => {\n  const categories: Record<ComponentCategory, ComponentMetadata[]> = {\n    Actions: [],\n    General: [],\n    Layout: [],\n    Navigation: [],\n    \"Data Entry\": [],\n    \"Data Display\": [],\n    Feedback: [],\n    Overlay: [],\n    Utility: [],\n  };\n\n  Object.values(componentMetadata).forEach((component) => {\n    categories[component.category].push(component);\n  });\n\n  // Sort components alphabetically within each category\n  Object.keys(categories).forEach((category) => {\n    categories[category as ComponentCategory].sort((a, b) =>\n      a.name.localeCompare(b.name)\n    );\n  });\n\n  return categories;\n};\n"],"names":["componentMetadata","getComponentsByCategory","categories","component","category","a","b"],"mappings":"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"}

package/package.json

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