@bioturing/components 0.15.5 → 0.17.0

package/dist/components/Stack/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, useCls } from \"../utils\";\n\nexport type StackGap = 0 | 1 | 2 | 4 | 8 | 12 | 16 | 24;\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the stack should hug its content (inline-flex) instead of filling available space\n   * @default false\n   */\n  hug?: boolean;\n\n  /**\n   * Vertical alignment of items within the stack\n   * @default \"flex-start\"\n   */\n  align?: \"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"baseline\";\n\n  /**\n   * Horizontal alignment of items within the stack\n   * @default \"flex-start\"\n   */\n  justify?:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n\n  /**\n   * Whether the stack should render items vertically\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Gap between stack items in pixels\n   * @default 0\n   */\n  gap?: StackGap;\n\n  /**\n   * Wrap items to multiple lines if needed\n   * @default false\n   */\n  wrap?: boolean;\n\n  /**\n   * Children of the stack\n   */\n  children?: React.ReactNode;\n}\n\nexport const Stack: React.FC<StackProps> = ({\n  hug = false,\n  align = \"flex-start\",\n  justify = \"flex-start\",\n  vertical = false,\n  gap = 0,\n  wrap = false,\n  className,\n  children,\n  ...rest\n}) => {\n  const cls = useCls();\n\n  return (\n    <div\n      className={cn(\n        cls(\"stack\"),\n        hug ? cls(\"stack-hug\") : cls(\"stack-fill\"),\n        cls(`stack-gap-${gap}`),\n        vertical ? cls(\"stack-vertical\") : cls(\"stack-horizontal\"),\n        wrap && cls(\"stack-wrap\"),\n        cls(`stack-align-${align}`),\n        cls(`stack-justify-${justify}`),\n        className\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["Stack","hug","align","justify","vertical","gap","wrap","className","children","rest","cls","useCls","jsx","cn"],"mappings":";;;AAsDO,MAAMA,IAA8B,CAAC;AAAA,EAC1C,KAAAC,IAAM;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAO;AAGjB,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTH,EAAI,OAAO;AAAA,QACLA,EAANT,IAAU,cAAmB,YAAR;AAAA,QACrBS,EAAI,aAAaL,CAAG,EAAE;AAAA,QACXK,EAAXN,IAAe,mBAAwB,kBAAR;AAAA,QAC/BE,KAAQI,EAAI,YAAY;AAAA,QACxBA,EAAI,eAAeR,CAAK,EAAE;AAAA,QAC1BQ,EAAI,iBAAiBP,CAAO,EAAE;AAAA,QAC9BI;AAAA,MACF;AAAA,MACC,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { cn, useCls } from \"../utils\";\n\nexport type StackGap = 0 | 1 | 2 | 4 | 8 | 12 | 16 | 24 | 28 | 32 | 40 | 48;\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the stack should hug its content (inline-flex) instead of filling available space\n   * @default false\n   */\n  hug?: boolean;\n\n  /**\n   * Vertical alignment of items within the stack\n   * @default \"flex-start\"\n   */\n  align?: \"flex-start\" | \"flex-end\" | \"center\" | \"stretch\" | \"baseline\";\n\n  /**\n   * Horizontal alignment of items within the stack\n   * @default \"flex-start\"\n   */\n  justify?:\n    | \"flex-start\"\n    | \"flex-end\"\n    | \"center\"\n    | \"space-between\"\n    | \"space-around\"\n    | \"space-evenly\";\n\n  /**\n   * Whether the stack should render items vertically\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * Gap between stack items in pixels\n   * @default 0\n   */\n  gap?: StackGap;\n\n  /**\n   * Wrap items to multiple lines if needed\n   * @default false\n   */\n  wrap?: boolean;\n\n  /**\n   * Children of the stack\n   */\n  children?: React.ReactNode;\n}\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    {\n      hug = false,\n      align = \"flex-start\",\n      justify = \"flex-start\",\n      vertical = false,\n      gap = 0,\n      wrap = false,\n      className,\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const cls = useCls();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          cls(\"stack\"),\n          hug ? cls(\"stack-hug\") : cls(\"stack-fill\"),\n          cls(`stack-gap-${gap}`),\n          vertical ? cls(\"stack-vertical\") : cls(\"stack-horizontal\"),\n          wrap && cls(\"stack-wrap\"),\n          cls(`stack-align-${align}`),\n          cls(`stack-justify-${justify}`),\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nStack.displayName = \"Stack\";\n"],"names":["Stack","forwardRef","hug","align","justify","vertical","gap","wrap","className","children","rest","ref","cls","useCls","jsx","cn"],"mappings":";;;;;AAuDO,MAAMA,IAAQC;AAAA,EACnB,CACE;AAAA,IACE,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO;AAGjB,WAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAH;AAAA,QACA,WAAWI;AAAA,UACTH,EAAI,OAAO;AAAA,UACLA,EAANV,IAAU,cAAmB,YAAR;AAAA,UACrBU,EAAI,aAAaN,CAAG,EAAE;AAAA,UACXM,EAAXP,IAAe,mBAAwB,kBAAR;AAAA,UAC/BE,KAAQK,EAAI,YAAY;AAAA,UACxBA,EAAI,eAAeT,CAAK,EAAE;AAAA,UAC1BS,EAAI,iBAAiBR,CAAO,EAAE;AAAA,UAC9BI;AAAA,QACF;AAAA,QACC,GAAGE;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEAT,EAAM,cAAc;"}

package/dist/components/Stack/StackChild.js

@@ -1,57 +1,65 @@
-import { jsx as a } from "react/jsx-runtime";
-import g from "react";
-import { useRender as N } from "@base-ui-components/react/use-render";
-import { mergeProps as v } from "@base-ui-components/react/merge-props";
-import { Stack as E } from "./Stack.js";
-import { useCls as P } from "../utils/antdUtils.js";
-import { cn as R } from "../utils/cn.js";
-const B = ({
-  flex: s,
-  grow: l = !1,
-  shrink: c = !1,
-  children: e,
-  style: m,
-  stack: f = !1,
-  // stack props
-  hug: i = !1,
-  align: n = "flex-start",
-  justify: p = "flex-start",
-  vertical: d = !1,
-  gap: k = 0,
-  wrap: u = !1,
-  className: x,
-  ...h
-}) => {
-  const t = P(), y = {
-    hug: i,
-    align: n,
-    justify: p,
-    vertical: d,
-    gap: k,
-    wrap: u
-  };
-  let o = "";
-  typeof s == "boolean" && (o = t(s ? "stack-child-flex-1" : "stack-child-flex-0"));
-  const r = R(
-    t("stack-child"),
-    l && t("stack-child-grow"),
-    c && t("stack-child-shrink"),
-    o,
-    x
-  ), C = typeof s == "string" || typeof s == "number" ? s : void 0, { renderElement: b } = N({
-    render: () => g.isValidElement(e) ? e : /* @__PURE__ */ a("div", { children: e }),
-    props: v({
-      className: r,
-      style: {
-        ...m,
-        flex: C
-      },
-      ...h
-    })
-  });
-  return f ? /* @__PURE__ */ a(E, { ...y, className: r, children: e }) : b();
-};
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import b, { forwardRef as g } from "react";
+import { useRender as R } from "@base-ui-components/react/use-render";
+import { mergeProps as S } from "@base-ui-components/react/merge-props";
+import { Stack as V } from "./Stack.js";
+import { useCls as v } from "../utils/antdUtils.js";
+import { cn as w } from "../utils/cn.js";
+const E = g(
+  ({
+    flex: e,
+    grow: l = !1,
+    shrink: c = !1,
+    children: t,
+    style: f,
+    stack: m = !1,
+    // stack props
+    hug: i = !1,
+    align: n = "flex-start",
+    justify: p = "flex-start",
+    vertical: d = !1,
+    gap: k = 0,
+    wrap: u = !1,
+    className: x,
+    ...h
+  }, y) => {
+    const s = v(), C = {
+      hug: i,
+      align: n,
+      justify: p,
+      vertical: d,
+      gap: k,
+      wrap: u
+    };
+    let o = "";
+    typeof e == "boolean" && (o = s(e ? "stack-child-flex-1" : "stack-child-flex-0"));
+    const a = w(
+      s("stack-child"),
+      l && s("stack-child-grow"),
+      c && s("stack-child-shrink"),
+      o,
+      x
+    ), N = R({
+      render: () => b.isValidElement(t) ? t : /* @__PURE__ */ r("div", { children: t }),
+      ref: y,
+      props: S(
+        {
+          className: a,
+          style: {
+            ...f,
+            flex: typeof e == "string" || typeof e == "number" ? e : void 0
+          },
+          ...h
+        },
+        {}
+      )
+    });
+    return m ? /* @__PURE__ */ r(V, { ...C, className: a, children: t }) : N;
+  }
+);
+E.displayName = "StackChild";
 export {
-  B as StackChild
+  E as StackChild
 };
 //# sourceMappingURL=StackChild.js.map

package/dist/components/Stack/StackChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackChild.js","sources":["../../../src/components/Stack/StackChild.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n  /**\n   * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n   * When boolean: true = 1, false = 0\n   * @default undefined\n   */\n  flex?: string | number | boolean;\n\n  /**\n   * Whether this child should grow to fill available space\n   * @default false\n   */\n  grow?: boolean;\n\n  /**\n   * Whether this child should shrink if necessary\n   * @default false\n   */\n  shrink?: boolean;\n\n  /**\n   * Children of the stack child\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether to render the child with a stack wrapper\n   * @default false\n   */\n  stack?: boolean;\n}\n\nexport const StackChild: React.FC<StackChildProps> = ({\n  flex,\n  grow = false,\n  shrink = false,\n  children,\n  style,\n  stack = false,\n  // stack props\n  hug = false,\n  align = \"flex-start\",\n  justify = \"flex-start\",\n  vertical = false,\n  gap = 0,\n  wrap = false,\n\n  className,\n  ...rest\n}) => {\n  const cls = useCls();\n  const stackProps = {\n    hug,\n    align,\n    justify,\n    vertical,\n    gap,\n    wrap,\n  };\n\n  // Determine flex class based on flex prop type\n  let flexClass = \"\";\n  if (typeof flex === \"boolean\") {\n    flexClass = flex ? cls(\"stack-child-flex-1\") : cls(\"stack-child-flex-0\");\n  }\n\n  // Calculate the combined className\n  const combinedClassName = cn(\n    cls(\"stack-child\"),\n    grow && cls(\"stack-child-grow\"),\n    shrink && cls(\"stack-child-shrink\"),\n    flexClass,\n    className\n  );\n\n  // Calculate the flex style value\n  const flexValue =\n    typeof flex === \"string\" || typeof flex === \"number\" ? flex : undefined;\n\n  // Use useRender to apply props directly to the child without creating a wrapper\n  const { renderElement } = useRender({\n    render: () =>\n      React.isValidElement(children) ? children : <div>{children}</div>,\n    props: mergeProps<\"div\">({\n      className: combinedClassName,\n      style: {\n        ...style,\n        flex: flexValue,\n      },\n      ...rest,\n    }),\n  });\n\n  return stack ? (\n    <Stack {...stackProps} className={combinedClassName}>\n      {children}\n    </Stack>\n  ) : (\n    renderElement()\n  );\n};\n"],"names":["StackChild","flex","grow","shrink","children","style","stack","hug","align","justify","vertical","gap","wrap","className","rest","cls","useCls","stackProps","flexClass","combinedClassName","cn","flexValue","renderElement","useRender","React","jsx","mergeProps","Stack"],"mappings":";;;;;;;AAqCO,MAAMA,IAAwC,CAAC;AAAA,EACpD,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA;AAAA,EAER,KAAAC,IAAM;AAAA,EACN,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EAEP,WAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAMC,EAAO,GACbC,IAAa;AAAA,IACjB,KAAAV;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,KAAAC;AAAA,IACA,MAAAC;AAAA,EACF;AAGA,MAAIM,IAAY;AACZ,EAAA,OAAOjB,KAAS,cAClBiB,IAAmBH,EAAPd,IAAW,uBAA4B,oBAAR;AAI7C,QAAMkB,IAAoBC;AAAA,IACxBL,EAAI,aAAa;AAAA,IACjBb,KAAQa,EAAI,kBAAkB;AAAA,IAC9BZ,KAAUY,EAAI,oBAAoB;AAAA,IAClCG;AAAA,IACAL;AAAA,EACF,GAGMQ,IACJ,OAAOpB,KAAS,YAAY,OAAOA,KAAS,WAAWA,IAAO,QAG1D,EAAE,eAAAqB,EAAc,IAAIC,EAAU;AAAA,IAClC,QAAQ,MACNC,EAAM,eAAepB,CAAQ,IAAIA,IAAY,gBAAAqB,EAAA,OAAA,EAAK,UAAArB,GAAS;AAAA,IAC7D,OAAOsB,EAAkB;AAAA,MACvB,WAAWP;AAAA,MACX,OAAO;AAAA,QACL,GAAGd;AAAA,QACH,MAAMgB;AAAA,MACR;AAAA,MACA,GAAGP;AAAA,IACJ,CAAA;AAAA,EAAA,CACF;AAEM,SAAAR,sBACJqB,GAAO,EAAA,GAAGV,GAAY,WAAWE,GAC/B,UAAAf,GACH,IAEAkB,EAAc;AAElB;"}
+{"version":3,"file":"StackChild.js","sources":["../../../src/components/Stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n  /**\n   * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n   * When boolean: true = 1, false = 0\n   * @default undefined\n   */\n  flex?: string | number | boolean;\n\n  /**\n   * Whether this child should grow to fill available space\n   * @default false\n   */\n  grow?: boolean;\n\n  /**\n   * Whether this child should shrink if necessary\n   * @default false\n   */\n  shrink?: boolean;\n\n  /**\n   * Children of the stack child\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether to render the child with a stack wrapper\n   * @default false\n   */\n  stack?: boolean;\n}\n\nexport const StackChild = forwardRef<HTMLDivElement, StackChildProps>(\n  (\n    {\n      flex,\n      grow = false,\n      shrink = false,\n      children,\n      style,\n      stack = false,\n      // stack props\n      hug = false,\n      align = \"flex-start\",\n      justify = \"flex-start\",\n      vertical = false,\n      gap = 0,\n      wrap = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const cls = useCls();\n    const stackProps = {\n      hug,\n      align,\n      justify,\n      vertical,\n      gap,\n      wrap,\n    };\n\n    // Determine flex class based on flex prop type\n    let flexClass = \"\";\n    if (typeof flex === \"boolean\") {\n      flexClass = flex ? cls(\"stack-child-flex-1\") : cls(\"stack-child-flex-0\");\n    }\n\n    // Calculate the combined className\n    const combinedClassName = cn(\n      cls(\"stack-child\"),\n      grow && cls(\"stack-child-grow\"),\n      shrink && cls(\"stack-child-shrink\"),\n      flexClass,\n      className\n    );\n\n    // Calculate the flex style value\n    const flexValue =\n      typeof flex === \"string\" || typeof flex === \"number\" ? flex : undefined;\n\n    // Use useRender to apply props directly to the child without creating a wrapper\n    const renderedElement = useRender({\n      render: () =>\n        React.isValidElement(children) ? children : <div>{children}</div>,\n      ref,\n      props: mergeProps<\"div\">(\n        {\n          className: combinedClassName,\n          style: {\n            ...style,\n            flex: flexValue,\n          },\n          ...rest,\n        },\n        {}\n      ),\n    });\n\n    return stack ? (\n      <Stack {...stackProps} className={combinedClassName}>\n        {children}\n      </Stack>\n    ) : (\n      renderedElement\n    );\n  }\n);\n\nStackChild.displayName = \"StackChild\";\n"],"names":["StackChild","forwardRef","flex","grow","shrink","children","style","stack","hug","align","justify","vertical","gap","wrap","className","rest","ref","cls","useCls","stackProps","flexClass","combinedClassName","cn","renderedElement","useRender","React","jsx","mergeProps","Stack"],"mappings":";;;;;;;;AAsCO,MAAMA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA;AAAA,IAER,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO,GACbC,IAAa;AAAA,MACjB,KAAAX;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,IACF;AAGA,QAAIO,IAAY;AACZ,IAAA,OAAOlB,KAAS,cAClBkB,IAAmBH,EAAPf,IAAW,uBAA4B,oBAAR;AAI7C,UAAMmB,IAAoBC;AAAA,MACxBL,EAAI,aAAa;AAAA,MACjBd,KAAQc,EAAI,kBAAkB;AAAA,MAC9Bb,KAAUa,EAAI,oBAAoB;AAAA,MAClCG;AAAA,MACAN;AAAA,IACF,GAOMS,IAAkBC,EAAU;AAAA,MAChC,QAAQ,MACNC,EAAM,eAAepB,CAAQ,IAAIA,IAAY,gBAAAqB,EAAA,OAAA,EAAK,UAAArB,GAAS;AAAA,MAC7D,KAAAW;AAAA,MACA,OAAOW;AAAA,QACL;AAAA,UACE,WAAWN;AAAA,UACX,OAAO;AAAA,YACL,GAAGf;AAAA,YACH,MAZN,OAAOJ,KAAS,YAAY,OAAOA,KAAS,WAAWA,IAAO;AAAA,UAa1D;AAAA,UACA,GAAGa;AAAA,QACL;AAAA,QACA,CAAA;AAAA,MAAC;AAAA,IACH,CACD;AAEM,WAAAR,sBACJqB,GAAO,EAAA,GAAGT,GAAY,WAAWE,GAC/B,UAAAhB,EACH,CAAA,IAEAkB;AAAA,EAAA;AAGN;AAEAvB,EAAW,cAAc;"}

package/dist/components/Stack/style.css

@@ -1 +1 @@
-@layer components{.ds-stack{display:flex}.ds-stack-hug{display:inline-flex}.ds-stack-horizontal{flex-direction:row}.ds-stack-vertical{flex-direction:column}.ds-stack-fill.ds-stack-vertical{height:100%}.ds-stack-fill.ds-stack-horizontal{width:100%}.ds-stack-wrap{flex-wrap:wrap}.ds-stack-gap-0{gap:0}.ds-stack-gap-1{gap:1px}.ds-stack-gap-2{gap:2px}.ds-stack-gap-4{gap:4px}.ds-stack-gap-8{gap:8px}.ds-stack-gap-12{gap:12px}.ds-stack-gap-16{gap:16px}.ds-stack-gap-24,.ds-stack-gap-32{gap:24px}.ds-stack-align-flex-start{align-items:flex-start}.ds-stack-align-flex-end{align-items:flex-end}.ds-stack-align-center{align-items:center}.ds-stack-align-stretch{align-items:stretch}.ds-stack-align-baseline{align-items:baseline}.ds-stack-justify-flex-start{justify-content:flex-start}.ds-stack-justify-flex-end{justify-content:flex-end}.ds-stack-justify-center{justify-content:center}.ds-stack-justify-space-between{justify-content:space-between}.ds-stack-justify-space-around{justify-content:space-around}.ds-stack-justify-space-evenly{justify-content:space-evenly}.ds-stack-child{min-width:0;min-height:0}.ds-stack-child-flex-0{flex:0}.ds-stack-child-flex-1{flex:1}.ds-stack-child-grow{flex-grow:1}.ds-stack-child-shrink{flex-shrink:1}}
+@layer components{.ds-stack{display:flex}.ds-stack-hug{display:inline-flex}.ds-stack-horizontal{flex-direction:row}.ds-stack-vertical{flex-direction:column}.ds-stack-fill.ds-stack-vertical{height:100%}.ds-stack-fill.ds-stack-horizontal{width:100%}.ds-stack-wrap{flex-wrap:wrap}.ds-stack-gap-0{gap:0}.ds-stack-gap-1{gap:1px}.ds-stack-gap-2{gap:2px}.ds-stack-gap-4{gap:4px}.ds-stack-gap-8{gap:8px}.ds-stack-gap-12{gap:12px}.ds-stack-gap-16{gap:16px}.ds-stack-gap-24{gap:24px}.ds-stack-gap-28{gap:28px}.ds-stack-gap-32{gap:32px}.ds-stack-gap-40{gap:40px}.ds-stack-gap-48{gap:48px}.ds-stack-align-flex-start{align-items:flex-start}.ds-stack-align-flex-end{align-items:flex-end}.ds-stack-align-center{align-items:center}.ds-stack-align-stretch{align-items:stretch}.ds-stack-align-baseline{align-items:baseline}.ds-stack-justify-flex-start{justify-content:flex-start}.ds-stack-justify-flex-end{justify-content:flex-end}.ds-stack-justify-center{justify-content:center}.ds-stack-justify-space-between{justify-content:space-between}.ds-stack-justify-space-around{justify-content:space-around}.ds-stack-justify-space-evenly{justify-content:space-evenly}.ds-stack-child{min-width:0;min-height:0}.ds-stack-child-flex-0{flex:0}.ds-stack-child-flex-1{flex:1}.ds-stack-child-grow{flex-grow:1}.ds-stack-child-shrink{flex-shrink:1}}

package/dist/components/Table/component.js

@@ -1,98 +1,102 @@
-import { jsx as t, jsxs as j, Fragment as x } from "react/jsx-runtime";
+"use client";
+import { jsx as t, jsxs as U, Fragment as z } from "react/jsx-runtime";
 import o from "antd/es/table";
-import { FunnelIcon as A, CaretUpIcon as g, CaretDownIcon as L } from "@bioturing/assets";
-import { Empty as U } from "../Empty/component.js";
-import { forwardRef as H, useState as M, useRef as R, useEffect as D, useCallback as P } from "react";
+import { FunnelIcon as H, CaretUpIcon as g, CaretDownIcon as L } from "@bioturing/assets";
+import { Empty as M } from "../Empty/component.js";
+import { forwardRef as P, useState as R, useRef as b, useEffect as D, useCallback as $ } from "react";
 import './style.css';/* empty css          */
-import { useCls as $ } from "../utils/antdUtils.js";
-const k = ({
+import { useCls as k } from "../utils/antdUtils.js";
+import { clsx as q } from "../utils/cn.js";
+const F = ({
   columns: N,
   locale: S,
   emptyDescription: T,
-  loading: c,
-  virtual: s,
+  loading: s,
+  virtual: i,
   scroll: d = {},
-  ...y
-}, r) => {
-  const i = $(), [O, b] = M(
-    s ? {} : {
+  className: y,
+  variant: O,
+  ...h
+}, c) => {
+  const r = k(), [_, w] = R(
+    i ? {} : {
       x: "fit-content"
     }
-  ), a = R(null);
+  ), m = b(null), C = b(0);
   D(() => {
     var I;
-    if (!a.current || !s) return;
-    const e = (I = a.current) == null ? void 0 : I.nativeElement, n = e == null ? void 0 : e.parentElement;
+    if (!m.current || !i) return;
+    const e = (I = m.current) == null ? void 0 : I.nativeElement, n = e == null ? void 0 : e.parentElement;
     if (!n) return;
     const l = e == null ? void 0 : e.querySelector(
-      `.${i("table-thead")}`
-    ), m = e == null ? void 0 : e.querySelector(
-      `.${i("table-pagination")}`
+      `.${r("table-thead")}`
+    ), a = e == null ? void 0 : e.querySelector(
+      `.${r("table-pagination")}`
     );
-    let C = 0;
-    if (m) {
-      const p = getComputedStyle(m).marginTop, u = getComputedStyle(m).marginBottom;
-      C = m.offsetHeight + parseInt(p) + parseInt(u);
+    if (a) {
+      const p = getComputedStyle(a).marginTop, u = getComputedStyle(a).marginBottom;
+      C.current = a.offsetHeight + parseInt(p) + parseInt(u);
     }
     const E = new ResizeObserver((p) => {
       for (const u of p)
-        u.target && b({
-          y: n.offsetHeight - (l ? l == null ? void 0 : l.offsetHeight : 0) - C
+        u.target && w({
+          y: n.offsetHeight - (l ? l == null ? void 0 : l.offsetHeight : 0) - C.current
         });
     });
-    return n && s && E.observe(n), () => {
-      n && s && E.disconnect();
+    return n && i && E.observe(n), () => {
+      n && i && E.disconnect();
     };
-  }, [s, i]);
-  const h = N ? N.map((e) => ({
+  }, [i, r]);
+  const x = N ? N.map((e) => ({
     sortIcon: ({ sortOrder: n }) => /* @__PURE__ */ t(
       "span",
       {
-        className: i(
+        className: r(
           "table-column-sort-icon",
           n ? `table-column-sort-icon-${n}` : "table-column-sort-icon-none"
         ),
-        children: n ? n === "ascend" ? /* @__PURE__ */ t(g, { weight: "fill" }) : /* @__PURE__ */ t(L, { weight: "fill" }) : /* @__PURE__ */ j(x, { children: [
+        children: n ? n === "ascend" ? /* @__PURE__ */ t(g, { weight: "fill" }) : /* @__PURE__ */ t(L, { weight: "fill" }) : /* @__PURE__ */ U(z, { children: [
           /* @__PURE__ */ t(g, { weight: "fill" }),
           " ",
           /* @__PURE__ */ t(L, { weight: "fill" })
         ] })
       }
     ),
-    filterIcon: (n) => /* @__PURE__ */ t("span", { className: i("table-column-filter-icon"), children: /* @__PURE__ */ t(A, { weight: "fill" }) }),
+    filterIcon: (n) => /* @__PURE__ */ t("span", { className: r("table-column-filter-icon"), children: /* @__PURE__ */ t(H, { weight: "fill" }) }),
     ...e
-  })) : void 0, _ = {
-    emptyText: /* @__PURE__ */ t(U, { description: T }),
+  })) : void 0, j = {
+    emptyText: /* @__PURE__ */ t(M, { description: T }),
     ...S
   };
   let f;
-  typeof c == "boolean" ? f = {
-    spinning: c,
-    indicator: /* @__PURE__ */ t("span", { className: i("spin-loader") })
-  } : typeof c == "object" && (f = {
+  typeof s == "boolean" ? f = {
+    spinning: s,
+    indicator: /* @__PURE__ */ t("span", { className: r("spin-loader") })
+  } : typeof s == "object" && (f = {
     spinning: !0,
-    indicator: /* @__PURE__ */ t("span", { className: i("spin-loader") }),
-    ...c
+    indicator: /* @__PURE__ */ t("span", { className: r("spin-loader") }),
+    ...s
   });
-  const w = P(
+  const A = $(
     (e) => {
-      e && (typeof r == "function" && r(e), r && typeof r == "object" && "current" in r && (r.current = e), a.current = e);
+      e && (typeof c == "function" && c(e), c && typeof c == "object" && "current" in c && (c.current = e), m.current = e);
     },
-    [r]
+    [c]
   );
   return /* @__PURE__ */ t(
     o,
     {
-      ref: w,
-      columns: h,
+      ref: A,
+      columns: x,
       loading: f,
-      locale: _,
-      virtual: s,
-      scroll: { ...O, ...d },
-      ...y
+      locale: j,
+      virtual: i,
+      scroll: { ..._, ...d },
+      className: q(O === "zebra" ? r("table-zebra") : "", y),
+      ...h
     }
   );
-}, q = H(k), J = Object.assign(q, {
+}, G = P(F), Y = Object.assign(G, {
   Column: o.Column,
   ColumnGroup: o.ColumnGroup,
   SELECTION_COLUMN: o.SELECTION_COLUMN,
@@ -103,6 +107,6 @@ const k = ({
   Summary: o.Summary
 });
 export {
-  J as Table
+  Y as Table
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Table/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n  type TableRef,\n} from \"antd/es/table\";\nimport { CaretDownIcon, CaretUpIcon, FunnelIcon } from \"@bioturing/assets\";\nimport { useCls } from \"../utils\";\nimport Empty from \"../Empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\nimport {\n  useState,\n  useEffect,\n  forwardRef,\n  Ref,\n  ForwardedRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n  /**\n   * Table ref\n   */\n  tableRef?: React.Ref<HTMLDivElement>;\n}\n\n// Simple wrapper component with proper generics\nconst InnerInternalTable = <RecordType extends object = object>(\n  {\n    columns,\n    locale,\n    emptyDescription,\n    loading,\n    virtual,\n    scroll: scrollProp = {},\n    ...rest\n  }: TableProps<RecordType>,\n  ref: Ref<TableRef>\n) => {\n  const cls = useCls();\n  const [scroll, setScroll] = useState<TableProps[\"scroll\"]>(\n    virtual\n      ? {}\n      : {\n          x: \"fit-content\",\n        }\n  );\n\n  const innerRef = useRef<TableRef>(null);\n\n  useEffect(() => {\n    if (!innerRef.current || !virtual) return;\n    const tableEl = innerRef.current?.nativeElement;\n    const parentEl = tableEl?.parentElement;\n    if (!parentEl) return;\n    const thead = tableEl?.querySelector(\n      `.${cls(\"table-thead\")}`\n    ) as HTMLElement;\n    const tpagination = tableEl?.querySelector(\n      `.${cls(\"table-pagination\")}`\n    ) as HTMLElement;\n    let tpaginationHeight = 0;\n    if (tpagination) {\n      const mt = getComputedStyle(tpagination).marginTop;\n      const mb = getComputedStyle(tpagination).marginBottom;\n      tpaginationHeight =\n        tpagination.offsetHeight + parseInt(mt) + parseInt(mb);\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target) {\n          setScroll({\n            y:\n              parentEl.offsetHeight -\n              (thead ? thead?.offsetHeight : 0) -\n              tpaginationHeight,\n          });\n        }\n      }\n    });\n    if (parentEl && virtual) {\n      resizeObserver.observe(parentEl);\n    }\n    return () => {\n      if (parentEl && virtual) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [virtual, cls]);\n\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUpIcon weight=\"fill\" />{\" \"}\n                    <CaretDownIcon weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUpIcon weight=\"fill\" />\n                ) : (\n                  <CaretDownIcon weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <FunnelIcon weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  const callbackRef = useCallback(\n    (tableRef: TableRef) => {\n      if (tableRef) {\n        if (typeof ref === \"function\") {\n          ref(tableRef);\n        }\n        if (ref && typeof ref === \"object\" && \"current\" in ref) {\n          ref.current = tableRef;\n        }\n        innerRef.current = tableRef;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <AntTable\n      ref={callbackRef}\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      virtual={virtual}\n      scroll={{ ...scroll, ...scrollProp }}\n      {...rest}\n    />\n  );\n};\n\nconst InternalTable = forwardRef(InnerInternalTable) as <\n  RecordType extends object = object\n>(\n  props: TableProps<RecordType> & { ref?: ForwardedRef<TableRef> }\n) => ReturnType<typeof InnerInternalTable>;\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n"],"names":["InnerInternalTable","columns","locale","emptyDescription","loading","virtual","scrollProp","rest","ref","cls","useCls","scroll","setScroll","useState","innerRef","useRef","useEffect","tableEl","_a","parentEl","thead","tpagination","tpaginationHeight","mt","mb","resizeObserver","entries","entry","modifiedColumns","column","sortOrder","jsx","CaretUpIcon","CaretDownIcon","jsxs","Fragment","_filtered","FunnelIcon","modifiedLocale","Empty","spinProps","callbackRef","useCallback","tableRef","AntTable","InternalTable","forwardRef","Table"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Table/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTable,\n  type ColumnType,\n  type TableProps as AntTableProps,\n  type TableRef,\n} from \"antd/es/table\";\nimport { CaretDownIcon, CaretUpIcon, FunnelIcon } from \"@bioturing/assets\";\nimport { clsx, useCls } from \"../utils\";\nimport Empty from \"../Empty/component\";\nimport { SpinProps } from \"antd/es/spin\";\nimport {\n  useState,\n  useEffect,\n  forwardRef,\n  Ref,\n  ForwardedRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define interface with all the generic type parameters from AntTable without any\nexport interface TableProps<RecordType extends object = object>\n  extends AntTableProps<RecordType> {\n  /**\n   * Add empty description for the table\n   */\n  emptyDescription?: React.ReactNode;\n  /**\n   * Table ref\n   */\n  tableRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Table style\n   */\n  variant?: \"default\" | \"zebra\";\n}\n\n// Simple wrapper component with proper generics\nconst InnerInternalTable = <RecordType extends object = object>(\n  {\n    columns,\n    locale,\n    emptyDescription,\n    loading,\n    virtual,\n    scroll: scrollProp = {},\n    className,\n    variant,\n    ...rest\n  }: TableProps<RecordType>,\n  ref: Ref<TableRef>\n) => {\n  const cls = useCls();\n  const [scroll, setScroll] = useState<TableProps[\"scroll\"]>(\n    virtual\n      ? {}\n      : {\n          x: \"fit-content\",\n        }\n  );\n\n  const innerRef = useRef<TableRef>(null);\n  const tablePaginationHeight = useRef<number>(0);\n\n  useEffect(() => {\n    if (!innerRef.current || !virtual) return;\n    const tableEl = innerRef.current?.nativeElement;\n    const parentEl = tableEl?.parentElement;\n    if (!parentEl) return;\n    const thead = tableEl?.querySelector(\n      `.${cls(\"table-thead\")}`\n    ) as HTMLElement;\n    const tpagination = tableEl?.querySelector(\n      `.${cls(\"table-pagination\")}`\n    ) as HTMLElement;\n    if (tpagination) {\n      const mt = getComputedStyle(tpagination).marginTop;\n      const mb = getComputedStyle(tpagination).marginBottom;\n      tablePaginationHeight.current =\n        tpagination.offsetHeight + parseInt(mt) + parseInt(mb);\n    }\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.target) {\n          setScroll({\n            y:\n              parentEl.offsetHeight -\n              (thead ? thead?.offsetHeight : 0) -\n              tablePaginationHeight.current,\n          });\n        }\n      }\n    });\n    if (parentEl && virtual) {\n      resizeObserver.observe(parentEl);\n    }\n    return () => {\n      if (parentEl && virtual) {\n        resizeObserver.disconnect();\n      }\n    };\n  }, [virtual, cls]);\n\n  const modifiedColumns = columns\n    ? columns.map((column: ColumnType<RecordType>): ColumnType<RecordType> => {\n        return {\n          sortIcon: ({ sortOrder }) => {\n            return (\n              <span\n                className={cls(\n                  \"table-column-sort-icon\",\n                  sortOrder\n                    ? `table-column-sort-icon-${sortOrder}`\n                    : `table-column-sort-icon-none`\n                )}\n              >\n                {!sortOrder ? (\n                  <>\n                    <CaretUpIcon weight=\"fill\" />{\" \"}\n                    <CaretDownIcon weight=\"fill\" />\n                  </>\n                ) : sortOrder === \"ascend\" ? (\n                  <CaretUpIcon weight=\"fill\" />\n                ) : (\n                  <CaretDownIcon weight=\"fill\" />\n                )}\n              </span>\n            );\n          },\n          filterIcon: (_filtered) => {\n            return (\n              <span className={cls(\"table-column-filter-icon\")}>\n                <FunnelIcon weight=\"fill\" />\n              </span>\n            );\n          },\n          ...column,\n        };\n      })\n    : undefined;\n  const modifiedLocale = {\n    emptyText: <Empty description={emptyDescription} />,\n    ...locale,\n  };\n  let spinProps: SpinProps | undefined;\n  if (typeof loading === \"boolean\") {\n    spinProps = {\n      spinning: loading,\n      indicator: <span className={cls(\"spin-loader\")} />,\n    };\n  } else if (typeof loading === \"object\") {\n    spinProps = {\n      spinning: true,\n      indicator: <span className={cls(\"spin-loader\")} />,\n      ...loading,\n    };\n  }\n  const callbackRef = useCallback(\n    (tableRef: TableRef) => {\n      if (tableRef) {\n        if (typeof ref === \"function\") {\n          ref(tableRef);\n        }\n        if (ref && typeof ref === \"object\" && \"current\" in ref) {\n          ref.current = tableRef;\n        }\n        innerRef.current = tableRef;\n      }\n    },\n    [ref]\n  );\n\n  return (\n    <AntTable\n      ref={callbackRef}\n      columns={modifiedColumns}\n      loading={spinProps}\n      locale={modifiedLocale}\n      virtual={virtual}\n      scroll={{ ...scroll, ...scrollProp }}\n      className={clsx(variant === \"zebra\" ? cls(\"table-zebra\") : \"\", className)}\n      {...rest}\n    />\n  );\n};\n\nconst InternalTable = forwardRef(InnerInternalTable) as <\n  RecordType extends object = object\n>(\n  props: TableProps<RecordType> & { ref?: ForwardedRef<TableRef> }\n) => ReturnType<typeof InnerInternalTable>;\n\n// Create the final component with all static properties\nexport const Table = Object.assign(InternalTable, {\n  Column: AntTable.Column,\n  ColumnGroup: AntTable.ColumnGroup,\n  SELECTION_COLUMN: AntTable.SELECTION_COLUMN,\n  EXPAND_COLUMN: AntTable.EXPAND_COLUMN,\n  SELECTION_ALL: AntTable.SELECTION_ALL,\n  SELECTION_INVERT: AntTable.SELECTION_INVERT,\n  SELECTION_NONE: AntTable.SELECTION_NONE,\n  Summary: AntTable.Summary,\n}) as typeof InternalTable & {\n  Column: typeof AntTable.Column;\n  ColumnGroup: typeof AntTable.ColumnGroup;\n  SELECTION_COLUMN: typeof AntTable.SELECTION_COLUMN;\n  EXPAND_COLUMN: typeof AntTable.EXPAND_COLUMN;\n  SELECTION_ALL: typeof AntTable.SELECTION_ALL;\n  SELECTION_INVERT: typeof AntTable.SELECTION_INVERT;\n  SELECTION_NONE: typeof AntTable.SELECTION_NONE;\n  Summary: typeof AntTable.Summary;\n};\n"],"names":["InnerInternalTable","columns","locale","emptyDescription","loading","virtual","scrollProp","className","variant","rest","ref","cls","useCls","scroll","setScroll","useState","innerRef","useRef","tablePaginationHeight","useEffect","tableEl","_a","parentEl","thead","tpagination","mt","mb","resizeObserver","entries","entry","modifiedColumns","column","sortOrder","jsx","CaretUpIcon","CaretDownIcon","jsxs","Fragment","_filtered","FunnelIcon","modifiedLocale","Empty","spinProps","callbackRef","useCallback","tableRef","AntTable","clsx","InternalTable","forwardRef","Table"],"mappings":"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"}

package/dist/components/Table/style.css

@@ -1 +1 @@
-@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}}
+@layer components{.ds-table-column-sort-icon{display:flex;flex-direction:column}.ds-table-column-sort-icon svg{color:var(--ds-color-text-disabled);font-size:1rem}:is(.ds-table-column-sort-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-sort-icon.ds-table-column-sort-icon-none svg{font-size:.75rem}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:first-child{margin-bottom:-2px}.ds-table-column-sort-icon.ds-table-column-sort-icon-none>svg:last-child{margin-top:-2px}.ds-table-column-filter-icon{display:flex;flex-direction:column}.ds-table-column-filter-icon svg{color:var(--ds-color-text-disabled);font-size:.875rem}:is(.ds-table-column-filter-icon svg):hover{color:var(--ds-color-text-secondary)}.ds-table-column-filter-icon.ds-table-column-filter-icon-active svg{color:var(--ds-color-primary)}.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-first:after,.ds-table-wrapper .ds-table-ping-left .ds-table-cell-fix-left-last:after{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-first:after,.ds-table-wrapper .ds-table-ping-right .ds-table-cell-fix-right-last:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-right:not(.ds-table-has-fix-right) .ds-table-container:after{box-shadow:inset -10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper .ds-table-ping-left:not(.ds-table-has-fix-left) .ds-table-container:before{box-shadow:inset 10px 0 8px -8px var(--ds-color-table-fixed-column-shadow)}.ds-table-wrapper{display:flex;flex-direction:column}.ds-table-wrapper .ds-spin-nested-loading,.ds-table-wrapper .ds-spin-container{display:flex;flex-direction:column;flex-shrink:1;flex-grow:1;min-height:0}:is(.ds-table-wrapper .ds-spin-container) .ds-table{flex-shrink:1;flex-grow:1;min-height:0}.ds-table{display:flex;flex-direction:column}.ds-table-container{flex-shrink:1;min-height:0;display:flex;flex-direction:column}.ds-table-header{flex-shrink:0}.ds-table-body{flex-shrink:1;min-height:0;min-width:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td{background:transparent}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-thead>tr>td,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>th,:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td{border-bottom:0}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell{background-color:var(--ds-color-fill-tertiary)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):first-child{border-top-left-radius:var(--ds-border-radius);border-bottom-left-radius:var(--ds-border-radius)}:is(:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n) .ds-table-cell):last-child{border-top-right-radius:var(--ds-border-radius);border-bottom-right-radius:var(--ds-border-radius)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>.ds-table-row:nth-child(2n)>.ds-table-cell-row-hover{background-color:var(--ds-color-fill-secondary)}:is(.ds-table-zebra>.ds-spin-nested-loading>.ds-spin-container>.ds-table>.ds-table-container>.ds-table-content>table)>.ds-table-tbody>tr>td.ds-table-column-sort{background-color:unset}}

package/dist/components/Tag/component.js

@@ -1,30 +1,66 @@
-import { jsx as o } from "react/jsx-runtime";
-import { X as d } from "@bioturing/assets";
-import r from "antd/es/tag";
+"use client";
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { XIcon as C } from "@bioturing/assets";
+import g from "antd/es/tag";
 import './style.css';/* empty css          */
-const g = ({
-  className: t,
-  active: n = !1,
-  color: a,
-  style: c,
-  closeIcon: s,
-  closable: e,
-  ...i
-}) => /* @__PURE__ */ o(
-  r,
-  {
-    className: t,
-    color: a,
-    style: c,
-    closable: e,
-    closeIcon: e ? s || /* @__PURE__ */ o(d, { weight: "bold" }) : void 0,
-    ...n ? { "data-active": "true" } : {},
-    ...i
+import { useCls as i } from "../utils/antdUtils.js";
+import { clsx as p } from "../utils/cn.js";
+const I = l(
+  ({
+    className: a,
+    active: e = !1,
+    color: o,
+    style: s,
+    closeIcon: r,
+    closable: t,
+    size: f = "small",
+    children: n,
+    ...u
+  }, T) => {
+    const d = /* @__PURE__ */ c(C, { weight: "bold" }), m = i();
+    return /* @__PURE__ */ c(
+      g,
+      {
+        ref: T,
+        className: p(
+          m("tag"),
+          m(`tag-${f}`),
+          !n && m("tag-empty"),
+          a
+        ),
+        color: o,
+        style: s,
+        closable: t,
+        closeIcon: t ? r || d : void 0,
+        ...e ? { "data-active": "true" } : {},
+        ...u,
+        children: n
+      }
+    );
   }
-), C = Object.assign(g, {
-  CheckableTag: r.CheckableTag
+), b = l(
+  ({ className: a, size: e = "small", children: o, ...s }, r) => {
+    const t = i();
+    return /* @__PURE__ */ c(
+      g.CheckableTag,
+      {
+        ref: r,
+        className: p(
+          t("tag"),
+          t(`tag-${e}`),
+          !o && t("tag-empty"),
+          a
+        ),
+        ...s,
+        children: o
+      }
+    );
+  }
+), $ = Object.assign(I, {
+  CheckableTag: b
 });
 export {
-  C as Tag
+  $ as Tag
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Tag/component.tsx"],"sourcesContent":["\"use client\";\nimport { X } from \"@bioturing/assets\";\nimport {\n  default as AntTag,\n  type TagProps as AntTagProps,\n  type TagType,\n} from \"antd/es/tag\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n  /**\n   * Indicates if the tag is active\n   * @default false\n   */\n  active?: boolean;\n}\n\n// Create Tag component\nconst InternalTag = ({\n  className,\n  active = false,\n  color,\n  style,\n  closeIcon,\n  closable,\n  ...rest\n}: TagProps) => {\n  const renderedCloseIcon = <X weight=\"bold\" />;\n  return (\n    <AntTag\n      className={className}\n      color={color}\n      style={style}\n      closable={closable}\n      closeIcon={closable ? closeIcon || renderedCloseIcon : undefined}\n      {...(active ? { \"data-active\": \"true\" } : {})}\n      {...rest}\n    />\n  );\n};\n\nexport const Tag = Object.assign(InternalTag, {\n  CheckableTag: AntTag.CheckableTag,\n});\n"],"names":["InternalTag","className","active","color","style","closeIcon","closable","rest","jsx","AntTag","X","Tag"],"mappings":";;;;AAuBA,MAAMA,IAAc,CAAC;AAAA,EACnB,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAGI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAAR;AAAA,IACA,OAAAE;AAAA,IACA,OAAAC;AAAA,IACA,UAAAE;AAAA,IACA,WAAWA,IAAWD,KAPA,gBAAAG,EAACE,GAAE,EAAA,QAAO,OAAO,CAAA,IAOgB;AAAA,IACtD,GAAIR,IAAS,EAAE,eAAe,WAAW,CAAC;AAAA,IAC1C,GAAGK;AAAA,EAAA;AACN,GAISI,IAAM,OAAO,OAAOX,GAAa;AAAA,EAC5C,cAAcS,EAAO;AACvB,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Tag/component.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { XIcon } from \"@bioturing/assets\";\nimport {\n  default as AntTag,\n  type CheckableTagProps as AntCheckableTagProps,\n  type TagProps as AntTagProps,\n  type TagType,\n} from \"antd/es/tag\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n  /**\n   * Indicates if the tag is active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Size of the tag\n   * @default \"small\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface CheckableTagProps extends AntCheckableTagProps {\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\n// Create Tag component\nconst InternalTag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      className,\n      active = false,\n      color,\n      style,\n      closeIcon,\n      closable,\n      size = \"small\",\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const renderedCloseIcon = <XIcon weight=\"bold\" />;\n    const cls = useCls();\n    return (\n      <AntTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        color={color}\n        style={style}\n        closable={closable}\n        closeIcon={closable ? closeIcon || renderedCloseIcon : undefined}\n        {...(active ? { \"data-active\": \"true\" } : {})}\n        {...rest}\n      >\n        {children}\n      </AntTag>\n    );\n  }\n);\n\nconst CheckableTag = forwardRef<HTMLSpanElement, CheckableTagProps>(\n  ({ className, size = \"small\", children, ...rest }, ref) => {\n    const cls = useCls();\n    return (\n      <AntTag.CheckableTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </AntTag.CheckableTag>\n    );\n  }\n);\n\nexport const Tag = Object.assign(InternalTag, {\n  CheckableTag,\n});\n"],"names":["InternalTag","forwardRef","className","active","color","style","closeIcon","closable","size","children","rest","ref","renderedCloseIcon","jsx","XIcon","cls","useCls","AntTag","clsx","CheckableTag","Tag"],"mappings":";;;;;;;;AAmCA,MAAMA,IAAcC;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAoB,gBAAAC,EAACC,GAAM,EAAA,QAAO,OAAO,CAAA,GACzCC,IAAMC,EAAO;AAEjB,WAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,WAAWO;AAAA,UACTH,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOP,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYM,EAAI,WAAW;AAAA,UAC5Bb;AAAA,QACF;AAAA,QACA,OAAAE;AAAA,QACA,OAAAC;AAAA,QACA,UAAAE;AAAA,QACA,WAAWA,IAAWD,KAAaM,IAAoB;AAAA,QACtD,GAAIT,IAAS,EAAE,eAAe,WAAW,CAAC;AAAA,QAC1C,GAAGO;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEMU,IAAelB;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,MAAAM,IAAO,SAAS,UAAAC,GAAU,GAAGC,EAAK,GAAGC,MAAQ;AACzD,UAAMI,IAAMC,EAAO;AAEjB,WAAA,gBAAAH;AAAA,MAACI,EAAO;AAAA,MAAP;AAAA,QACC,KAAAN;AAAA,QACA,WAAWO;AAAA,UACTH,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOP,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYM,EAAI,WAAW;AAAA,UAC5Bb;AAAA,QACF;AAAA,QACC,GAAGQ;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEaW,IAAM,OAAO,OAAOpB,GAAa;AAAA,EAC5C,cAAAmB;AACF,CAAC;"}

package/dist/components/Tag/style.css

@@ -1 +1 @@
-@layer components{.ds-tag{display:inline-flex;align-items:center}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}}
+@layer components{.ds-tag{display:inline-flex;align-items:center;font-size:var(--ds-font-size-sm);padding:.0625rem .4375rem}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}.ds-tag.ds-tag-medium{padding:.1875rem .4375rem}.ds-tag.ds-tag-large{font-size:var(--ds-font-size);padding:.1875rem .4375rem}.ds-tag:is(.ds-tag-magenta,.ds-tag-red,.ds-tag-volcano,.ds-tag-orange,.ds-tag-gold,.ds-tag-lime,.ds-tag-green,.ds-tag-cyan,.ds-tag-blue,.ds-tag-geekblue,.ds-tag-purple) .ds-tag-close-icon{color:currentColor}.ds-tag.ds-tag-empty .ds-tag-close-icon{margin-left:0}}

package/dist/components/ThemeProvider/component.js

@@ -1,38 +1,39 @@
-import { jsx as s } from "react/jsx-runtime";
-import n from "antd/es/config-provider";
-import { useLayoutEffect as f, Children as u, isValidElement as p, cloneElement as a } from "react";
-import { lightTheme as d, darkTheme as v } from "../../tokens/and-theme/tokens.js";
-import { StyleProvider as g } from "@ant-design/cssinjs";
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import f from "antd/es/config-provider";
+import { useLayoutEffect as u, Children as a, isValidElement as p, cloneElement as d } from "react";
+import { lightTheme as v, darkTheme as g } from "../../tokens/and-theme/tokens.js";
+import { StyleProvider as h } from "@ant-design/cssinjs";
 import './style.css';/* empty css          */
-import { useCls as h } from "../utils/antdUtils.js";
-import { clsx as c } from "../utils/cn.js";
-const y = ({
-  children: e,
-  theme: m,
+import { useCls as y, useAntdCssVarClassname as x } from "../utils/antdUtils.js";
+import { clsx as n } from "../utils/cn.js";
+const S = ({
+  children: t,
+  theme: s,
   appendClassesTo: r
 }) => {
-  const l = h(), i = c(l("theme-provider"), m.toString());
-  return f(() => {
-    const t = i.split(" "), o = typeof r == "string" ? document.querySelector(r) : r;
-    return o && o.classList.add(...t), () => {
-      o && o.classList.remove(...t);
+  const c = y(), l = x(), m = n(c("theme-provider"), s.toString(), l);
+  return u(() => {
+    const e = m.split(" "), o = typeof r == "string" ? document.querySelector(r) : r;
+    return o && o.classList.add(...e), () => {
+      o && o.classList.remove(...e);
     };
-  }, [r, i]), r === void 0 ? u.map(e, (t) => p(t) ? a(t, {
-    className: c(
-      t.props.className,
-      i
+  }, [r, m]), r === void 0 ? a.map(t, (e) => p(e) ? d(e, {
+    className: n(
+      e.props.className,
+      m
     )
-  }) : t) : e;
+  }) : e) : t;
 }, q = ({
-  theme: e,
-  appendClassesTo: m,
+  theme: t,
+  appendClassesTo: s,
   children: r
-}) => /* @__PURE__ */ s(g, { layer: !0, children: /* @__PURE__ */ s(
-  n,
+}) => /* @__PURE__ */ i(h, { layer: !0, children: /* @__PURE__ */ i(
+  f,
   {
-    theme: e == "light" ? d : v,
+    theme: t == "light" ? v : g,
     prefixCls: "ds",
-    children: /* @__PURE__ */ s(y, { theme: e, appendClassesTo: m, children: r })
+    children: /* @__PURE__ */ i(S, { theme: t, appendClassesTo: s, children: r })
   }
 ) });
 export {