@bioturing/components 0.20.0 → 0.20.2

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type 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\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\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;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/icon-button/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  forwardRef,\n  type ElementType,\n  type ReactElement,\n  type Ref,\n  ComponentPropsWithRef,\n} from \"react\";\nimport { Tooltip, TooltipProps } from \"../tooltip\";\nimport {\n  useCls,\n  clsx,\n  WithRenderPropProps,\n  WithRenderProp,\n  ElementTypeToDOMType,\n} from \"../utils\";\nimport { Spin } from \"../spin\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Base props without href/as handling\nexport type IconButtonProps<E extends ElementType = \"button\"> =\n  WithRenderPropProps<E, { loading: boolean }> & {\n    /**\n     * Label text or element to display within tooltip\n     * @default undefined\n     */\n    label?: React.ReactNode;\n    /**\n     * Size of the icon button: small (1.25rem) or medium (1.5rem)\n     * @default medium\n     */\n    size?: \"small\" | \"medium\";\n    /**\n     * Whether to apply negative margin for better visual alignment\n     * @default true\n     */\n    negativeMargin?: boolean;\n    /**\n     * Whether to show loading state\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Props to pass to the Tooltip component when wrapping the button\n     */\n    tooltipProps?: TooltipProps;\n  };\n\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>,\n  ref: Ref<ElementTypeToDOMType<E>>\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 = (\n    <WithRenderProp\n      as={Component}\n      render={render}\n      {...elementProps}\n      state={{\n        loading,\n      }}\n    />\n  );\n\n  return label ? (\n    <Tooltip title={label} arrow={false} {...tooltipProps}>\n      {element}\n    </Tooltip>\n  ) : (\n    element\n  );\n};\n\n// Export with correct typing\nexport const IconButton = forwardRef(IconButtonImpl) as <\n  E extends ElementType = \"button\"\n>(\n  props: IconButtonProps<E> & { ref?: ComponentPropsWithRef<E>[\"ref\"] }\n) => ReturnType<typeof IconButtonImpl>;\n"],"names":["IconButtonImpl","label","size","negativeMargin","children","className","tooltipProps","as","href","target","rel","download","hrefLang","referrerPolicy","loading","render","rest","ref","cls","useCls","buttonClasses","clsx","Component","elementProps","jsx","Spin","element","WithRenderProp","Tooltip","IconButton","forwardRef"],"mappings":";;;;;;;;;AAqDA,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,IACJ,gBAAAF;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,IAAIL;AAAA,MACJ,QAAAP;AAAA,MACC,GAAGQ;AAAA,MACJ,OAAO;AAAA,QACL,SAAAT;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAGK,SAAAb,IACJ,gBAAAuB,EAAAI,GAAA,EAAQ,OAAO3B,GAAO,OAAO,IAAQ,GAAGK,GACtC,UAAAoB,EAAA,CACH,IAEAA;AAEJ,GAGaG,IAAaC,EAAW9B,CAAc;"}

package/dist/components/nav/group.js

@@ -1,16 +1,31 @@
 "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 }) });
+import { forwardRef as s } from "react";
+import { NavGroupContext as u } from "./context.js";
+import { useCls as l } from "../utils/antdUtils.js";
+import { clsx as n } from "../utils/cn.js";
+const v = s(
+  ({
+    children: m,
+    size: r = "medium",
+    collapsible: e,
+    className: t,
+    ...a
+  }, p) => {
+    const i = l();
+    return /* @__PURE__ */ o(u.Provider, { value: { size: r, collapsible: e }, children: /* @__PURE__ */ o(
+      "div",
+      {
+        className: n(i("nav-group", `nav-${r}`), t),
+        ref: p,
+        ...a,
+        children: m
+      }
+    ) });
   }
 );
-u.displayName = "NavGroup";
+v.displayName = "NavGroup";
 export {
-  u as NavGroup
+  v as NavGroup
 };
 //# sourceMappingURL=group.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"group.js","sources":["../../../src/components/nav/group.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { useCls, clsx } 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    {\n      children,\n      size = \"medium\",\n      collapsible,\n      className,\n      ...rest\n    }: NavGroupProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n  ) => {\n    const cls = useCls();\n    return (\n      <NavGroupContext.Provider value={{ size, collapsible }}>\n        <div\n          className={clsx(cls(\"nav-group\", `nav-${size}`), className)}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </NavGroupContext.Provider>\n    );\n  }\n);\n\nNavGroup.displayName = \"NavGroup\";\n\nexport { NavGroup };\n"],"names":["NavGroup","forwardRef","children","size","collapsible","className","rest","ref","cls","useCls","jsx","NavGroupContext","clsx"],"mappings":";;;;;;AAiBA,MAAMA,IAAWC;AAAA,EACf,CACE;AAAA,IACE,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO;AAEjB,WAAA,gBAAAC,EAACC,EAAgB,UAAhB,EAAyB,OAAO,EAAE,MAAAR,GAAM,aAAAC,KACvC,UAAA,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWE,EAAKJ,EAAI,aAAa,OAAOL,CAAI,EAAE,GAAGE,CAAS;AAAA,QAC1D,KAAAE;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAAA;AAGN;AAEAF,EAAS,cAAc;"}

package/dist/components/nav/item.js

@@ -21,11 +21,11 @@ const R = (e) => N(e), j = ({
       "data-active": r || void 0,
       "aria-expanded": n["aria-expanded"],
       className: void 0,
-      ...n,
       children: /* @__PURE__ */ p(c, { children: [
         /* @__PURE__ */ a("span", { className: t("nav-item-icon"), children: i }),
         /* @__PURE__ */ a("span", { className: t("nav-item-content"), children: l })
-      ] })
+      ] }),
+      ...n
     },
     state: { active: r, icon: e }
   });

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

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  useState,\n  type MouseEvent,\n  forwardRef,\n  isValidElement,\n  useMemo,\n} 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  /**\n   * The icon to display in the nav item\n   */\n  icon?: React.ReactNode;\n  /**\n   * Whether the nav item is active\n   */\n  active?: boolean;\n  /**\n   * The render prop to render the nav item\n   */\n  render?: useRender.RenderProp<{\n    active: boolean;\n    icon?: React.ReactNode;\n  }>;\n  /**\n   * The size of the nav item\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Whether to change the icon weight on active state\n   * @default true\n   */\n  changeIconWeightOnActive?: boolean;\n}\n\n// Define a type for elements that can have a weight prop\ntype ElementWithWeight = React.ReactElement<{ weight?: string }>;\n\n// Type guard to check if an element can accept a weight prop\nconst canHaveWeightProp = (el: React.ReactNode): el is ElementWithWeight => {\n  return isValidElement(el);\n};\n\nconst NavItemImpl = <T extends HTMLElement>(\n  {\n    icon,\n    active = false,\n    render,\n    className,\n    children,\n    changeIconWeightOnActive = true,\n    ...rest\n  }: NavItemProps,\n  ref: React.Ref<T>\n) => {\n  const cls = useCls();\n\n  // Apply weight prop only if the element can accept it\n  const renderedIcon = useMemo(() => {\n    if (!changeIconWeightOnActive || !active || !canHaveWeightProp(icon)) {\n      return icon;\n    }\n    return React.cloneElement(icon, { weight: \"fill\" });\n  }, [icon, changeIconWeightOnActive, active]);\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\")}>{renderedIcon}</span>\n          <span className={cls(\"nav-item-content\")}>{children}</span>\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":["canHaveWeightProp","el","isValidElement","NavItemImpl","icon","active","render","className","children","changeIconWeightOnActive","rest","ref","cls","useCls","renderedIcon","useMemo","React","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AA6CA,MAAMA,IAAoB,CAACC,MAClBC,EAAeD,CAAE,GAGpBE,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAGbC,IAAeC,EAAQ,MACvB,CAACN,KAA4B,CAACJ,KAAU,CAACL,EAAkBI,CAAI,IAC1DA,IAEFY,EAAM,aAAaZ,GAAM,EAAE,QAAQ,QAAQ,GACjD,CAACA,GAAMK,GAA0BJ,CAAM,CAAC;AAE3C,SAAOY,EAAU;AAAA,IACf,QAAQX,KAAU,gBAAAY,EAAC,UAAO,EAAA,WAAWC,EAAKP,EAAI,UAAU,GAAGL,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAI;AAAA,IACA,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,GAAGA;AAAA,MACH,UAEI,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWN,EAAI,eAAe,GAAI,UAAaE,GAAA;AAAA,0BACpD,QAAK,EAAA,WAAWF,EAAI,kBAAkB,GAAI,UAAAJ,EAAS,CAAA;AAAA,MAAA,EACtD,CAAA;AAAA,IAEJ;AAAA,IACA,OAAO,EAAE,QAAAH,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMkB,IAAUC,EAAWpB,CAAW;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, isValidElement, useMemo } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\nexport interface NavItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The icon to display in the nav item\n   */\n  icon?: React.ReactNode;\n  /**\n   * Whether the nav item is active\n   */\n  active?: boolean;\n  /**\n   * The render prop to render the nav item\n   */\n  render?: useRender.RenderProp<{\n    active: boolean;\n    icon?: React.ReactNode;\n  }>;\n  /**\n   * The size of the nav item\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Whether to change the icon weight on active state\n   * @default true\n   */\n  changeIconWeightOnActive?: boolean;\n}\n\n// Define a type for elements that can have a weight prop\ntype ElementWithWeight = React.ReactElement<{ weight?: string }>;\n\n// Type guard to check if an element can accept a weight prop\nconst canHaveWeightProp = (el: React.ReactNode): el is ElementWithWeight => {\n  return isValidElement(el);\n};\n\nconst NavItemImpl = <T extends HTMLElement>(\n  {\n    icon,\n    active = false,\n    render,\n    className,\n    children,\n    changeIconWeightOnActive = true,\n    ...rest\n  }: NavItemProps,\n  ref: React.Ref<T>\n) => {\n  const cls = useCls();\n\n  // Apply weight prop only if the element can accept it\n  const renderedIcon = useMemo(() => {\n    if (!changeIconWeightOnActive || !active || !canHaveWeightProp(icon)) {\n      return icon;\n    }\n    return React.cloneElement(icon, { weight: \"fill\" });\n  }, [icon, changeIconWeightOnActive, active]);\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      children: (\n        <>\n          <span className={cls(\"nav-item-icon\")}>{renderedIcon}</span>\n          <span className={cls(\"nav-item-content\")}>{children}</span>\n        </>\n      ),\n      ...rest,\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":["canHaveWeightProp","el","isValidElement","NavItemImpl","icon","active","render","className","children","changeIconWeightOnActive","rest","ref","cls","useCls","renderedIcon","useMemo","React","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AAsCA,MAAMA,IAAoB,CAACC,MAClBC,EAAeD,CAAE,GAGpBE,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAGbC,IAAeC,EAAQ,MACvB,CAACN,KAA4B,CAACJ,KAAU,CAACL,EAAkBI,CAAI,IAC1DA,IAEFY,EAAM,aAAaZ,GAAM,EAAE,QAAQ,QAAQ,GACjD,CAACA,GAAMK,GAA0BJ,CAAM,CAAC;AAE3C,SAAOY,EAAU;AAAA,IACf,QAAQX,KAAU,gBAAAY,EAAC,UAAO,EAAA,WAAWC,EAAKP,EAAI,UAAU,GAAGL,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAI;AAAA,IACA,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,UAEI,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWN,EAAI,eAAe,GAAI,UAAaE,GAAA;AAAA,0BACpD,QAAK,EAAA,WAAWF,EAAI,kBAAkB,GAAI,UAAAJ,EAAS,CAAA;AAAA,MAAA,GACtD;AAAA,MAEF,GAAGE;AAAA,IACL;AAAA,IACA,OAAO,EAAE,QAAAL,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMkB,IAAUC,EAAWpB,CAAW;"}

package/dist/components/nav/style.css

@@ -1 +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}
+@layer components{.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=true]{background-color:var(--ds-color-fill-secondary);color:var(--ds-color-text);font-weight:500}.ds-nav-item[aria-expanded=true]{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/stack/StackChild.js

@@ -1,65 +1,62 @@
 "use client";
-import { jsx as c } 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(
+import { jsx as l } from "react/jsx-runtime";
+import S, { forwardRef as g, useMemo as v } from "react";
+import { useRender as w } from "@base-ui-components/react/use-render";
+import { mergeProps as E } from "@base-ui-components/react/merge-props";
+import { Stack as P } from "./Stack.js";
+import { useCls as V } from "../utils/antdUtils.js";
+import { cn as j } from "../utils/cn.js";
+const x = g(
   ({
     flex: s,
     grow: m = !1,
-    shrink: f = !1,
-    children: t,
-    style: i,
-    stack: n = !1,
+    shrink: i = !1,
+    children: e,
+    style: n,
+    stack: f = !1,
     // stack props
     hug: p = !1,
     align: d = "flex-start",
     justify: k = "flex-start",
     vertical: u = !1,
-    gap: x = 0,
-    wrap: h = !1,
+    gap: h = 0,
+    wrap: C = !1,
     className: y,
     ...o
   }, a) => {
-    const e = v(), C = {
+    const t = V(), N = {
       hug: p,
       align: d,
       justify: k,
       vertical: u,
-      gap: x,
-      wrap: h
-    };
-    let l = "";
-    typeof s == "boolean" && (l = e(s ? "stack-child-flex-1" : "stack-child-flex-0"));
-    const r = w(
-      e("stack-child"),
-      m && e("stack-child-grow"),
-      f && e("stack-child-shrink"),
-      l,
+      gap: h,
+      wrap: C
+    }, r = v(() => typeof s == "boolean" || s === 0 || s === 1 ? t(s === !0 || s === 1 ? "stack-child-flex-1" : "stack-child-flex-0") : "", [s, t]), c = j(
+      t("stack-child"),
+      m && t("stack-child-grow"),
+      i && t("stack-child-shrink"),
+      r,
       y
-    ), N = R({
-      render: () => b.isValidElement(t) ? t : /* @__PURE__ */ c("div", { children: t }),
+    ), b = s && typeof s != "boolean" && !r ? s : void 0, R = w({
+      render: S.isValidElement(e) ? e : /* @__PURE__ */ l("div", { children: e }),
       ref: a,
-      props: S(
+      props: E(
         {
-          className: r,
+          className: c,
           style: {
-            ...i,
-            flex: typeof s == "string" || typeof s == "number" ? s : void 0
+            ...n,
+            flex: b
           },
           ...o
         },
         {}
       )
     });
-    return n ? /* @__PURE__ */ c(V, { ...C, ref: a, className: r, ...o, children: t }) : N;
+    return f ? /* @__PURE__ */ l(P, { ...N, ref: a, className: c, ...o, children: e }) : R;
   }
 );
-E.displayName = "StackChild";
+x.displayName = "StackChild";
 export {
-  E as StackChild
+  x 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":["\"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} ref={ref} className={combinedClassName} {...rest}>\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,IACJ,gBAAAmB,EAAAE,GAAA,EAAO,GAAGT,GAAY,KAAAH,GAAU,WAAWK,GAAoB,GAAGN,GAChE,UAAAV,EAAA,CACH,IAEAkB;AAAA,EAAA;AAGN;AAEAvB,EAAW,cAAc;"}
+{"version":3,"file":"StackChild.js","sources":["../../../src/components/stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef, useMemo } 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    const flexClass = useMemo(() => {\n      if (typeof flex === \"boolean\" || flex === 0 || flex === 1) {\n        return flex === true || flex === 1\n          ? cls(\"stack-child-flex-1\")\n          : cls(\"stack-child-flex-0\");\n      }\n      return \"\";\n    }, [flex, cls]);\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      flex && typeof flex !== \"boolean\" && !flexClass ? flex : undefined;\n\n    // Use useRender to apply props directly to the child without creating a wrapper\n    const renderedElement = useRender({\n      render: 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} ref={ref} className={combinedClassName} {...rest}>\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","useMemo","combinedClassName","cn","flexValue","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,GAGMO,IAAYC,EAAQ,MACpB,OAAOnB,KAAS,aAAaA,MAAS,KAAKA,MAAS,IAElDe,EADGf,MAAS,MAAQA,MAAS,IACzB,uBACA,oBADoB,IAGvB,IACN,CAACA,GAAMe,CAAG,CAAC,GAGRK,IAAoBC;AAAA,MACxBN,EAAI,aAAa;AAAA,MACjBd,KAAQc,EAAI,kBAAkB;AAAA,MAC9Bb,KAAUa,EAAI,oBAAoB;AAAA,MAClCG;AAAA,MACAN;AAAA,IACF,GAGMU,IACJtB,KAAQ,OAAOA,KAAS,aAAa,CAACkB,IAAYlB,IAAO,QAGrDuB,IAAkBC,EAAU;AAAA,MAChC,QAAQC,EAAM,eAAetB,CAAQ,IAAIA,IAAW,gBAAAuB,EAAC,SAAK,UAAAvB,GAAS;AAAA,MACnE,KAAAW;AAAA,MACA,OAAOa;AAAA,QACL;AAAA,UACE,WAAWP;AAAA,UACX,OAAO;AAAA,YACL,GAAGhB;AAAA,YACH,MAAMkB;AAAA,UACR;AAAA,UACA,GAAGT;AAAA,QACL;AAAA,QACA,CAAA;AAAA,MAAC;AAAA,IACH,CACD;AAEM,WAAAR,IACJ,gBAAAqB,EAAAE,GAAA,EAAO,GAAGX,GAAY,KAAAH,GAAU,WAAWM,GAAoB,GAAGP,GAChE,UAAAV,EAAA,CACH,IAEAoB;AAAA,EAAA;AAGN;AAEAzB,EAAW,cAAc;"}

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}: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}}
+@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}.ds-table-zebra .ds-table{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{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/utils/WithRenderProp.js

@@ -1,14 +1,15 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useRender as s } from "@base-ui-components/react/use-render";
-const i = (e, r) => {
-  const { render: n, as: o = "div", ...t } = e;
-  return s({
-    render: n || ((d) => /* @__PURE__ */ m(o, { ...d })),
-    props: t,
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useRender as i } from "@base-ui-components/react/use-render";
+const p = (e, r) => {
+  const { render: t, as: n = "div", ...o } = e;
+  return i({
+    render: t || ((d) => /* @__PURE__ */ s(n, { ...d })),
+    props: o,
+    state: e.state,
     ref: r
   });
-}, h = p(i);
+}, h = m(p);
 export {
   h as WithRenderProp
 };

package/dist/components/utils/WithRenderProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef, JSX } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\n// Utility type to map a tag name to its DOM element type\ntype ElementTypeToDOMType<T extends React.ElementType> =\n  T extends keyof JSX.IntrinsicElements\n    ? JSX.IntrinsicElements[T] extends React.DetailedHTMLProps<\n        infer Props,\n        infer Element\n      >\n      ? Element\n      : never\n    : never;\n\nexport type WithRenderPropProps<T extends React.ElementType = \"div\"> =\n  React.ComponentPropsWithoutRef<T> & {\n    render?: useRender.RenderProp;\n    as?: T;\n  };\n\nconst WithRenderPropInner = <T extends React.ElementType = \"div\">(\n  props: WithRenderPropProps<T>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as: Tag = \"div\", ...etc } = props;\n  const renderedElement = useRender({\n    render: render || ((props) => <Tag {...props} />),\n    props: etc,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\"\n>(\n  props: WithRenderPropProps<T> & { ref?: React.Ref<ElementTypeToDOMType<T>> }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAoBA,MAAMA,IAAsB,CAC1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,GAAGC,MAAQJ;AAMrC,SALiBK,EAAU;AAAA,IAChC,QAAQH,MAAW,CAACF,MAAW,gBAAAM,EAAAH,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOI;AAAA,IACP,KAAAH;AAAA,EAAA,CACD;AAEH,GAEaM,IAAiBC,EAAWT,CAAmB;"}
+{"version":3,"file":"WithRenderProp.js","sources":["../../../src/components/utils/WithRenderProp.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { ElementTypeToDOMType } from \"./types\";\n\nexport type WithRenderPropProps<\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n> = React.ComponentPropsWithoutRef<T> & {\n  render?: useRender.RenderProp<State>;\n  as?: T;\n  state?: State;\n};\n\nconst WithRenderPropInner = <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State>,\n  ref: React.ForwardedRef<T>\n) => {\n  const { render, as: Tag = \"div\", ...etc } = props;\n  const renderedElement = useRender({\n    render: render || ((props) => <Tag {...props} />),\n    props: etc,\n    state: props.state,\n    ref: ref as unknown as React.Ref<ElementTypeToDOMType<T>>,\n  });\n  return renderedElement;\n};\n\nexport const WithRenderProp = forwardRef(WithRenderPropInner) as <\n  T extends React.ElementType = \"div\",\n  State extends Record<string, unknown> = Record<string, unknown>\n>(\n  props: WithRenderPropProps<T, State> & {\n    ref?: React.Ref<ElementTypeToDOMType<T>>;\n  }\n) => ReturnType<typeof WithRenderPropInner>;\n"],"names":["WithRenderPropInner","props","ref","render","Tag","etc","useRender","jsx","WithRenderProp","forwardRef"],"mappings":";;;AAaA,MAAMA,IAAsB,CAI1BC,GACAC,MACG;AACH,QAAM,EAAE,QAAAC,GAAQ,IAAIC,IAAM,OAAO,GAAGC,MAAQJ;AAOrC,SANiBK,EAAU;AAAA,IAChC,QAAQH,MAAW,CAACF,MAAW,gBAAAM,EAAAH,GAAA,EAAK,GAAGH,EAAO,CAAA;AAAA,IAC9C,OAAOI;AAAA,IACP,OAAOJ,EAAM;AAAA,IACb,KAAAC;AAAA,EAAA,CACD;AAEH,GAEaM,IAAiBC,EAAWT,CAAmB;"}

package/dist/components/utils/constants.js

@@ -0,0 +1,10 @@
+const O = {
+  fallbackAxisSide: "none"
+}, A = {
+  fallbackAxisSide: "end"
+};
+export {
+  O as DROPDOWN_COLLISION_AVOIDANCE,
+  A as POPUP_COLLISION_AVOIDANCE
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/utils/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/utils/constants.ts"],"sourcesContent":["/**\n * Used for dropdowns that usually strictly prefer top/bottom placements and\n * use `var(--available-height)` to limit their height.\n */\nexport const DROPDOWN_COLLISION_AVOIDANCE = {\n  fallbackAxisSide: \"none\",\n} as const;\n\n/**\n * Used by regular popups that usually aren't scrollable and are allowed to\n * freely flip to any axis of placement.\n */\nexport const POPUP_COLLISION_AVOIDANCE = {\n  fallbackAxisSide: \"end\",\n} as const;\n"],"names":["DROPDOWN_COLLISION_AVOIDANCE","POPUP_COLLISION_AVOIDANCE"],"mappings":"AAIO,MAAMA,IAA+B;AAAA,EAC1C,kBAAkB;AACpB,GAMaC,IAA4B;AAAA,EACvC,kBAAkB;AACpB;"}