@bioturing/components 0.16.0 → 0.17.1

package/dist/components/IconButton/component.js

@@ -1,50 +1,62 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { Tooltip as x } from "antd";
+import { forwardRef as w } from "react";
+import { useRender as N } from "@base-ui-components/react/use-render";
 import './style.css';/* empty css          */
-import { useCls as y, useAntdCssVarClassname as N } from "../utils/antdUtils.js";
-const V = (u, d) => {
-  const {
-    label: e,
-    size: p = "medium",
-    negativeMargin: f = !0,
-    children: b,
-    className: v,
-    tooltipProps: C = {},
-    as: g,
-    href: o,
-    // Extract anchor-specific props
-    target: s,
-    rel: r,
-    download: a,
-    hrefLang: i,
-    referrerPolicy: l,
-    ...h
-  } = u, t = y(), P = N(), w = [
-    t("icon-button"),
-    t(`icon-button-${p}`),
-    t(f ? "icon-button-negative-margin" : ""),
-    P,
-    v
-  ].filter(Boolean).join(" "), n = g || (o ? "a" : "button"), B = n === "a" ? {
-    ...s !== void 0 && { target: s },
-    ...r !== void 0 && { rel: r },
-    ...a !== void 0 && { download: a },
-    ...i !== void 0 && { hrefLang: i },
-    ...l !== void 0 && { referrerPolicy: l }
-  } : {}, I = {
+import { Tooltip as S } from "../Tooltip/component.js";
+import { Spin as T } from "../Spin/component.js";
+import { useCls as $ } from "../utils/antdUtils.js";
+import { clsx as k } from "../utils/cn.js";
+const q = ({
+  label: s,
+  size: l = "medium",
+  negativeMargin: b = !0,
+  children: v,
+  className: f,
+  tooltipProps: x = {},
+  as: C,
+  href: o,
+  // Extract anchor-specific props
+  target: r,
+  rel: e,
+  download: c,
+  hrefLang: p,
+  referrerPolicy: u,
+  loading: t,
+  render: I,
+  ...B
+}, d) => {
+  const n = $(), R = k(
+    n("icon-button"),
+    n(`icon-button-${l}`),
+    n(b ? "icon-button-negative-margin" : ""),
+    f
+  ), i = C || (o ? "a" : "button"), j = {
     ref: d,
-    className: w,
-    ...n === "button" && { type: "button" },
-    ...o && { href: o },
-    ...B,
-    ...h
-  }, c = /* @__PURE__ */ m(n, { ...I, children: b });
-  return e ? /* @__PURE__ */ m(x, { title: e, arrow: !1, ...C, children: c }) : c;
-}, T = j(V);
+    className: R,
+    ...i === "button" && { type: "button" },
+    ...i === "a" ? {
+      ...o && { href: o },
+      ...r !== void 0 && { target: r },
+      ...e !== void 0 && { rel: e },
+      ...c !== void 0 && { download: c },
+      ...p !== void 0 && { hrefLang: p },
+      ...u !== void 0 && { referrerPolicy: u }
+    } : {},
+    "data-loading": t,
+    children: t ? /* @__PURE__ */ m(T, {}) : v,
+    ...B
+  }, a = N({
+    ref: d,
+    render: I || /* @__PURE__ */ m(i, {}),
+    props: j,
+    state: {
+      loading: t
+    }
+  });
+  return s ? /* @__PURE__ */ m(S, { title: s, arrow: !1, ...x, children: a }) : a;
+}, J = w(q);
 export {
-  T as IconButton,
-  T as default
+  J as IconButton
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/IconButton/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  type AnchorHTMLAttributes,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip } from \"antd\";\nimport { useCls, useAntdCssVarClassname } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\ntype IconButtonBaseProps = {\n  label?: React.ReactNode;\n  size?: \"small\" | \"medium\";\n  negativeMargin?: boolean;\n  tooltipProps?: React.ComponentProps<typeof Tooltip>;\n};\n\n// Extract anchor-specific props we want to automatically handle\ntype AnchorSpecificProps = Pick<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"target\" | \"rel\" | \"download\" | \"hrefLang\" | \"referrerPolicy\"\n>;\n\n// Props when href is provided - as defaults to 'a' and includes anchor-specific props\ntype WithHrefProps<E extends ElementType = \"a\"> = IconButtonBaseProps & {\n  href: string;\n  as?: E;\n} & AnchorSpecificProps;\n\n// Props when href is not provided - as defaults to 'button'\ntype WithoutHrefProps<E extends ElementType = \"button\"> =\n  IconButtonBaseProps & {\n    href?: undefined;\n    as?: E;\n  } & {\n    [K in keyof AnchorSpecificProps]?: never;\n  };\n\n// Combined props type with conditional behavior\ntype IconButtonOwnProps<E extends ElementType = ElementType> =\n  | WithHrefProps<E>\n  | WithoutHrefProps<E>;\n\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  IconButtonOwnProps<E> &\n    Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;\n\n/**\n * A type-safe polymorphic component pattern\n */\ninterface PolymorphicComponentProps<E extends ElementType = \"button\"> {\n  as?: E;\n  href?: string;\n}\n\n/**\n * Type for wrapping the forwardRef implementation\n */\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReactElement;\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  props: IconButtonProps<E> & PolymorphicComponentProps<E>,\n  ref: Ref<Element>\n) => {\n  const {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    ...rest\n  } = props;\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const buttonClasses = [\n    cls(\"icon-button\"),\n    cls(`icon-button-${size}`),\n    cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n    antdCssVarClassname,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  // Collect anchor-specific props only if they're defined\n  const anchorProps =\n    Component === \"a\"\n      ? {\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {};\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(href && { href }),\n    ...anchorProps,\n    ...rest,\n  };\n\n  const element = <Component {...elementProps}>{children}</Component>;\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as IconButtonComponent;\n\nexport default IconButton;\n"],"names":["IconButtonImpl","props","ref","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","rest","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","buttonClasses","Component","anchorProps","elementProps","element","jsx","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;AAwEA,MAAMA,IAAiB,CACrBC,GACAC,MACG;AACG,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC,IAAe,CAAC;AAAA,IAChB,IAAAC;AAAA,IACA,MAAAC;AAAA;AAAA,IAEA,QAAAC;AAAA,IACA,KAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACEgB,IAAMC,EAAO,GACbC,IAAsBC,EAAuB,GAC7CC,IAAgB;AAAA,IACpBJ,EAAI,aAAa;AAAA,IACjBA,EAAI,eAAeb,CAAI,EAAE;AAAA,IACzBa,EAAIZ,IAAiB,gCAAgC,EAAE;AAAA,IACvDc;AAAA,IACAZ;AAAA,EAEC,EAAA,OAAO,OAAO,EACd,KAAK,GAAG,GAGLe,IAAab,MAAOC,IAAO,MAAM,WAGjCa,IACJD,MAAc,MACV;AAAA,IACE,GAAIX,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,IACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,IAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,IACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,IACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,EAAA,IAEvD,CAAC,GAEDS,IAAe;AAAA,IACnB,KAAAtB;AAAA,IACA,WAAWmB;AAAA,IACX,GAAIC,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIZ,KAAQ,EAAE,MAAAA,EAAK;AAAA,IACnB,GAAGa;AAAA,IACH,GAAGP;AAAA,EACL,GAEMS,IAAU,gBAAAC,EAACJ,GAAW,EAAA,GAAGE,GAAe,UAAAlB,GAAS;AAEhD,SAAAH,IACJ,gBAAAuB,EAAAC,GAAA,EAAQ,OAAOxB,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAiB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW7B,CAAc;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/IconButton/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type Ref,\n  type AnchorHTMLAttributes,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../Tooltip\";\nimport { useCls, clsx } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Spin } from \"../Spin\";\n\n// Base props without href/as handling\ntype IconButtonBaseProps = {\n  /**\n   * Label text or element to display within tooltip\n   * @default undefined\n   */\n  label?: React.ReactNode;\n  /**\n   * Size of the icon button: small (1.25rem) or medium (1.5rem)\n   * @default medium\n   */\n  size?: \"small\" | \"medium\";\n  /**\n   * Whether to apply negative margin for better visual alignment\n   * @default true\n   */\n  negativeMargin?: boolean;\n  /**\n   * Whether to show loading state\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Props to pass to the Tooltip component when wrapping the button\n   */\n  tooltipProps?: TooltipProps;\n  /**\n   * Custom render function for the button\n   */\n  render?: useRender.RenderProp<{ loading: boolean }>;\n};\n\n// Extract anchor-specific props we want to automatically handle\ntype AnchorSpecificProps = Pick<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"target\" | \"rel\" | \"download\" | \"hrefLang\" | \"referrerPolicy\"\n>;\n\n// Props when href is provided - as defaults to 'a' and includes anchor-specific props\ntype WithHrefProps<E extends ElementType = \"a\"> = IconButtonBaseProps & {\n  href: string;\n  as?: E;\n} & AnchorSpecificProps;\n\n// Props when href is not provided - as defaults to 'button'\ntype WithoutHrefProps<E extends ElementType = \"button\"> =\n  IconButtonBaseProps & {\n    href?: undefined;\n    as?: E;\n  } & {\n    [K in keyof AnchorSpecificProps]?: never;\n  };\n\n// Combined props type with conditional behavior\ntype IconButtonOwnProps<E extends ElementType = ElementType> =\n  | WithHrefProps<E>\n  | WithoutHrefProps<E>;\n\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  IconButtonOwnProps<E> &\n    Omit<ComponentPropsWithoutRef<E>, keyof IconButtonOwnProps<E>>;\n\n/**\n * A type-safe polymorphic component pattern\n */\ninterface PolymorphicComponentProps<E extends ElementType = \"button\"> {\n  as?: E;\n  href?: string;\n}\n\n/**\n * Type for wrapping the forwardRef implementation\n */\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReactElement;\n\n/**\n * Implementation of the IconButton component\n */\nconst IconButtonImpl = <E extends ElementType = \"button\">(\n  {\n    label,\n    size = \"medium\",\n    negativeMargin = true,\n    children,\n    className,\n    tooltipProps = {},\n    as,\n    href,\n    // Extract anchor-specific props\n    target,\n    rel,\n    download,\n    hrefLang,\n    referrerPolicy,\n    loading,\n    render,\n    ...rest\n  }: IconButtonProps<E> & PolymorphicComponentProps<E>,\n  ref: Ref<Element>\n) => {\n  const cls = useCls();\n  const buttonClasses = clsx(\n    cls(\"icon-button\"),\n    cls(`icon-button-${size}`),\n    cls(negativeMargin ? \"icon-button-negative-margin\" : \"\"),\n    className\n  );\n\n  // Use a type assertion for the component to avoid TypeScript errors\n  const Component = (as || (href ? \"a\" : \"button\")) as ElementType;\n\n  const elementProps = {\n    ref,\n    className: buttonClasses,\n    ...(Component === \"button\" && { type: \"button\" }),\n    ...(Component === \"a\"\n      ? {\n          ...(href && { href }),\n          ...(target !== undefined && { target }),\n          ...(rel !== undefined && { rel }),\n          ...(download !== undefined && { download }),\n          ...(hrefLang !== undefined && { hrefLang }),\n          ...(referrerPolicy !== undefined && { referrerPolicy }),\n        }\n      : {}),\n    \"data-loading\": loading,\n    children: loading ? <Spin /> : children,\n    ...rest,\n  };\n\n  const element = useRender({\n    ref,\n    render: render || <Component />,\n    props: elementProps,\n    state: {\n      loading,\n    },\n  });\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as IconButtonComponent;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","useRender","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAkGA,MAAMA,IAAiB,CACrB;AAAA,EACE,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC,IAAe,CAAC;AAAA,EAChB,IAAAC;AAAA,EACA,MAAAC;AAAA;AAAA,EAEA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAgBC;AAAA,IACpBH,EAAI,aAAa;AAAA,IACjBA,EAAI,eAAehB,CAAI,EAAE;AAAA,IACzBgB,EAAIf,IAAiB,gCAAgC,EAAE;AAAA,IACvDE;AAAA,EACF,GAGMiB,IAAaf,MAAOC,IAAO,MAAM,WAEjCe,IAAe;AAAA,IACnB,KAAAN;AAAA,IACA,WAAWG;AAAA,IACX,GAAIE,MAAc,YAAY,EAAE,MAAM,SAAS;AAAA,IAC/C,GAAIA,MAAc,MACd;AAAA,MACE,GAAId,KAAQ,EAAE,MAAAA,EAAK;AAAA,MACnB,GAAIC,MAAW,UAAa,EAAE,QAAAA,EAAO;AAAA,MACrC,GAAIC,MAAQ,UAAa,EAAE,KAAAA,EAAI;AAAA,MAC/B,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAa,UAAa,EAAE,UAAAA,EAAS;AAAA,MACzC,GAAIC,MAAmB,UAAa,EAAE,gBAAAA,EAAe;AAAA,IAAA,IAEvD,CAAC;AAAA,IACL,gBAAgBC;AAAA,IAChB,UAAUA,IAAW,gBAAAU,EAAAC,GAAA,CAAA,CAAK,IAAKrB;AAAA,IAC/B,GAAGY;AAAA,EACL,GAEMU,IAAUC,EAAU;AAAA,IACxB,KAAAV;AAAA,IACA,QAAQF,KAAU,gBAAAS,EAACF,GAAU,CAAA,CAAA;AAAA,IAC7B,OAAOC;AAAA,IACP,OAAO;AAAA,MACL,SAAAT;AAAA,IAAA;AAAA,EACF,CACD;AAEM,SAAAb,IACJ,gBAAAuB,EAAAI,GAAA,EAAQ,OAAO3B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAoB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW9B,CAAc;"}

package/dist/components/IconButton/style.css

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

package/dist/components/Nav/context.js

@@ -0,0 +1,7 @@
+"use client";
+import t from "react";
+const o = t.createContext(null);
+export {
+  o as NavGroupContext
+};
+//# sourceMappingURL=context.js.map

package/dist/components/Nav/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/Nav/context.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\n\nexport const NavGroupContext = React.createContext<{\n  size: \"small\" | \"medium\" | \"large\";\n  collapsible?: boolean;\n} | null>(null);\n\nexport const useNavGroupContext = () => {\n  const context = React.useContext(NavGroupContext);\n  if (!context) {\n    throw new Error(\"useNavGroupContext must be used within a NavGroup\");\n  }\n  return context;\n};\n"],"names":["NavGroupContext","React"],"mappings":";;AAIa,MAAAA,IAAkBC,EAAM,cAG3B,IAAI;"}

package/dist/components/Nav/group.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { NavGroupContext as i } from "./context.js";
+import { useCls as s } from "../utils/antdUtils.js";
+const u = p(
+  ({ children: e, size: r = "medium", collapsible: m }, a) => {
+    const t = s();
+    return /* @__PURE__ */ o(i.Provider, { value: { size: r, collapsible: m }, children: /* @__PURE__ */ o("div", { className: t("nav-group", `nav-${r}`), ref: a, children: e }) });
+  }
+);
+u.displayName = "NavGroup";
+export {
+  u as NavGroup
+};
+//# sourceMappingURL=group.js.map

package/dist/components/Nav/group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","sources":["../../../src/components/Nav/group.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { useCls } from \"../utils\";\nimport { NavGroupContext } from \"./context\";\n\nexport interface NavGroupProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Size of the nav\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Weather it's collapsible or not\n   */\n  collapsible?: boolean;\n}\n\nconst NavGroup = forwardRef(\n  (\n    { children, size = \"medium\", collapsible }: NavGroupProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const cls = useCls();\n    return (\n      <NavGroupContext.Provider value={{ size, collapsible }}>\n        <div className={cls(\"nav-group\", `nav-${size}`)} ref={ref}>\n          {children}\n        </div>\n      </NavGroupContext.Provider>\n    );\n  }\n);\n\nNavGroup.displayName = \"NavGroup\";\n\nexport { NavGroup };\n"],"names":["NavGroup","forwardRef","children","size","collapsible","ref","cls","useCls","jsx","NavGroupContext"],"mappings":";;;;;AAiBA,MAAMA,IAAWC;AAAA,EACf,CACE,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAU,aAAAC,EAAA,GAC7BC,MACG;AACH,UAAMC,IAAMC,EAAO;AAEjB,WAAA,gBAAAC,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAAN,GAAM,aAAAC,KACvC,UAAA,gBAAAI,EAAC,SAAI,WAAWF,EAAI,aAAa,OAAOH,CAAI,EAAE,GAAG,KAAAE,GAC9C,UAAAH,EACH,CAAA,GACF;AAAA,EAAA;AAGN;AAEAF,EAAS,cAAc;"}

package/dist/components/Nav/heading.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { useCls as t } from "../utils/antdUtils.js";
+import { clsx as o } from "../utils/cn.js";
+const l = ({
+  children: a,
+  className: n,
+  ...r
+}) => {
+  const s = t();
+  return /* @__PURE__ */ e("h3", { className: o(s("nav-heading"), n), ...r, children: /* @__PURE__ */ e("span", { className: s("nav-heading-text"), children: a }) });
+};
+export {
+  l as NavHeading
+};
+//# sourceMappingURL=heading.js.map

package/dist/components/Nav/heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading.js","sources":["../../../src/components/Nav/heading.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport { clsx, useCls } from \"../utils\";\n\nexport interface NavHeadingProps\n  extends React.HTMLAttributes<HTMLHeadingElement> {\n  children: React.ReactNode;\n}\n\nexport const NavHeading = ({\n  children,\n  className,\n  ...rest\n}: NavHeadingProps) => {\n  const cls = useCls();\n  return (\n    <h3 className={clsx(cls(\"nav-heading\"), className)} {...rest}>\n      <span className={cls(\"nav-heading-text\")}>{children}</span>\n    </h3>\n  );\n};\n"],"names":["NavHeading","children","className","rest","cls","useCls","clsx"],"mappings":";;;;AASO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAAuB;AACrB,QAAMC,IAAMC,EAAO;AACnB,2BACG,MAAG,EAAA,WAAWC,EAAKF,EAAI,aAAa,GAAGF,CAAS,GAAI,GAAGC,GACtD,4BAAC,QAAK,EAAA,WAAWC,EAAI,kBAAkB,GAAI,UAAAH,EAAS,CAAA,GACtD;AAEJ;"}

package/dist/components/Nav/index.js

@@ -0,0 +1,13 @@
+import { NavItem as o } from "./item.js";
+import { NavHeading as r } from "./heading.js";
+import { NavGroup as m } from "./group.js";
+import './style.css';/* empty css          */
+const e = {
+  Item: o,
+  Heading: r,
+  Group: m
+};
+export {
+  e as Nav
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Nav/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Nav/index.tsx"],"sourcesContent":["import { NavItem, NavItemProps } from \"./item\";\nimport { NavHeading, NavHeadingProps } from \"./heading\";\nimport { NavGroup, NavGroupProps } from \"./group\";\n\nimport \"./style.css\";\n\nexport const Nav = {\n  Item: NavItem,\n  Heading: NavHeading,\n  Group: NavGroup,\n};\n\nexport type { NavItemProps, NavHeadingProps, NavGroupProps };\n"],"names":["Nav","NavItem","NavHeading","NavGroup"],"mappings":";;;;AAMO,MAAMA,IAAM;AAAA,EACjB,MAAMC;AAAA,EACN,SAASC;AAAA,EACT,OAAOC;AACT;"}

package/dist/components/Nav/item.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsxs as c, jsx as a, Fragment as l } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { useRender as p } from "@base-ui-components/react/use-render";
+import { useCls as f } from "../utils/antdUtils.js";
+import { clsx as v } from "../utils/cn.js";
+const x = ({
+  icon: r,
+  active: s = !1,
+  render: n,
+  onClick: N,
+  className: m,
+  children: o,
+  ...t
+}, i) => {
+  const e = f();
+  return p({
+    render: n ?? /* @__PURE__ */ a("button", { className: v(e("nav-item"), m) }),
+    ref: i,
+    props: {
+      "data-active": s || void 0,
+      "aria-expanded": t["aria-expanded"],
+      className: void 0,
+      ...t,
+      children: /* @__PURE__ */ c(l, { children: [
+        /* @__PURE__ */ a("span", { className: e("nav-item-icon"), children: r }),
+        /* @__PURE__ */ a("span", { className: e("nav-item-content"), children: o })
+      ] })
+    },
+    state: { active: s, icon: r }
+  });
+}, R = d(x);
+export {
+  R as NavItem
+};
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../src/components/Nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, type MouseEvent, forwardRef } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Transition } from \"../Transition\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\nexport interface NavItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n  active?: boolean;\n  render?: useRender.RenderProp<{\n    active: boolean;\n    icon?: React.ReactNode;\n  }>;\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nconst NavItemImpl = <T extends HTMLElement>(\n  {\n    icon,\n    active = false,\n    render,\n    onClick,\n    className,\n    children,\n    ...rest\n  }: NavItemProps,\n  ref: React.Ref<T>\n) => {\n  const cls = useCls();\n\n  return useRender({\n    render: render ?? <button className={clsx(cls(\"nav-item\"), className)} />,\n    ref,\n    props: {\n      \"data-active\": active || undefined,\n      \"aria-expanded\": rest[\"aria-expanded\"],\n      className: undefined,\n      ...rest,\n      children: (\n        <>\n          <span className={cls(\"nav-item-icon\")}>{icon}</span>\n          {/* <Transition\n            starting=\"opacity-0 max-w-[0]\"\n            ending=\"opacity-0 max-w-[0]\"\n            className={cls(\"nav-item-transition\")}\n          > */}\n          <span className={cls(\"nav-item-content\")}>{children}</span>\n          {/* </Transition> */}\n        </>\n      ),\n    },\n    state: { active, icon },\n  });\n};\n\nconst NavItem = forwardRef(NavItemImpl) as <T extends HTMLElement>(\n  props: NavItemProps & { ref?: React.Ref<T> }\n) => ReturnType<typeof NavItemImpl>;\n\nexport { NavItem };\n"],"names":["NavItemImpl","icon","active","render","onClick","className","children","rest","ref","cls","useCls","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AAiBA,MAAMA,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO;AAEnB,SAAOC,EAAU;AAAA,IACf,QAAQR,KAAU,gBAAAS,EAAC,UAAO,EAAA,WAAWC,EAAKJ,EAAI,UAAU,GAAGJ,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAG;AAAA,IACA,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,GAAGA;AAAA,MACH,UAEI,gBAAAO,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWH,EAAI,eAAe,GAAI,UAAKR,GAAA;AAAA,0BAM5C,QAAK,EAAA,WAAWQ,EAAI,kBAAkB,GAAI,UAAAH,EAAS,CAAA;AAAA,MAAA,EAEtD,CAAA;AAAA,IAEJ;AAAA,IACA,OAAO,EAAE,QAAAJ,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMe,IAAUC,EAAWjB,CAAW;"}

package/dist/components/Nav/style.css

@@ -0,0 +1 @@
+.ds-nav-group{display:flex;flex-direction:column;gap:.25rem}.ds-nav-item{width:100%;display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;font-size:1.25rem;color:var(--ds-color-icon);background:transparent;border-radius:var(--ds-border-radius);transition:background-color var(--ds-motion-duration-mid),color var(--ds-motion-duration-mid)}.ds-nav-item:hover{background-color:var(--ds-color-fill-tertiary);color:var(--ds-color-icon-hover)}.ds-nav-item[data-active]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text)}.ds-nav-item:disabled{background:transparent;color:var(--ds-color-text-disabled);cursor:not-allowed}.ds-nav-item .ds-nav-item-icon{font-size:1.25rem;line-height:1;transition:all .1s}.ds-nav-item .ds-nav-item-content{flex:1;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-size:.875rem;line-height:1rem;transition:max-width .15s,opacity .15s}.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small{padding:.25rem .5rem}:is(.ds-nav-small .ds-nav-item,.ds-nav-item.ds-nav-item-small) .ds-nav-item-icon{font-size:1rem}.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large{padding:.5rem 1rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-icon{font-size:1.5rem}:is(.ds-nav-large .ds-nav-item,.ds-nav-item.ds-nav-item-large) .ds-nav-item-content{font-size:1rem;line-height:1.5rem}.ds-nav-heading{width:100%;height:.875rem;position:relative;color:var(--ds-color-text-tertiary);text-transform:uppercase;font-weight:500;letter-spacing:.002em;font-size:.75rem;line-height:1rem;margin-bottom:.5rem}.ds-nav-small .ds-nav-heading{font-size:.625rem;line-height:1.4}.ds-nav-heading-text{display:inline-block;overflow:hidden;text-overflow:ellipsis;position:absolute;transition:all .1s;white-space:nowrap}

package/dist/components/PopupPanel/component.js

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