@wandelbots/mui 1.0.0 → 1.1.0

package/README.md

@@ -8,6 +8,11 @@ building blocks are defined **once** here and reused consistently across apps.
 **This is the only package that ships a MUI theme.** `@wandelbots/design-tokens` stays
 framework-agnostic (values only); the theme composes those values into MUI shape here.
 
+**Pick `@wandelbots/mui` *or* `@wandelbots/hui` — never both.** The two are alternatives,
+not companions: they cover the same primitives from the same design tokens through two
+different styling systems. MUI apps take this package; headless / non-MUI apps take
+`@wandelbots/hui`.
+
 **Non-goals:** no domain logic, no data fetching, no API/WebSocket code, no robot/motion
 knowledge. Those live in `wandelbots-js-react-components` (separate repo).
 

package/dist/components/AdornedTextField/AdornedAutocomplete.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),a=require("@mui/material/Autocomplete"),b=require("./AdornedTextField.cjs"),j=({label:t,placeholder:u,adornedSize:i="medium",error:r,helperText:c,slotProps:e,...m})=>d.jsx(a,{freeSolo:!0,...m,renderInput:({InputProps:n,InputLabelProps:A,...x})=>d.jsx(b.AdornedTextField,{...x,label:t,placeholder:u,adornedSize:i,error:r,helperText:c,slotProps:{...e,input:{...n,...e==null?void 0:e.input,endAdornment:n.endAdornment},inputLabel:{...A,...e==null?void 0:e.inputLabel}}})});exports.AdornedAutocomplete=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),b=require("@mui/material/Autocomplete"),j=require("./AdornedTextField.cjs"),o=({label:t,placeholder:u,adornedSize:i="medium",error:r,helperText:c,slotProps:e,freeSolo:m,...A})=>d.jsx(b,{freeSolo:m??!0,...A,renderInput:({InputProps:n,InputLabelProps:x,...a})=>d.jsx(j.AdornedTextField,{...a,label:t,placeholder:u,adornedSize:i,error:r,helperText:c,slotProps:{...e,input:{...n,...e==null?void 0:e.input,endAdornment:n.endAdornment},inputLabel:{...x,...e==null?void 0:e.inputLabel}}})});exports.AdornedAutocomplete=o;

package/dist/components/AdornedTextField/AdornedAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteProps } from "@mui/material/Autocomplete";
 import type { ReactNode } from "react";
 import type { AdornedTextFieldProps, AdornedTextFieldSize } from "./AdornedTextField";
-export type AdornedAutocompleteProps = Omit<AutocompleteProps<string, false, false, true>, "renderInput" | "slotProps" | "freeSolo"> & {
+export type AdornedAutocompleteProps<T = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = true> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, "renderInput" | "slotProps"> & {
     label?: string;
     placeholder?: string;
     adornedSize?: AdornedTextFieldSize;
@@ -11,9 +11,11 @@ export type AdornedAutocompleteProps = Omit<AutocompleteProps<string, false, fal
     slotProps?: AdornedTextFieldProps["slotProps"];
 };
 /**
- * Free-solo string `Autocomplete` styled like `AdornedTextField` (outlined
- * look, `secondary.dark` background, 10px radius). Accepts all MUI
- * `AutocompleteProps<string, false, false, true>` (minus `renderInput`).
+ * `Autocomplete` styled like `AdornedTextField` (outlined look,
+ * `secondary.dark` background, 10px radius). Accepts all MUI
+ * `AutocompleteProps` (minus `renderInput`) — `T`, `multiple`,
+ * `disableClearable` and `freeSolo` are all open; `freeSolo` defaults to
+ * `true` to match this component's original free-text behavior.
  */
-export declare const AdornedAutocomplete: ({ label, placeholder, adornedSize, error, helperText, slotProps, ...props }: AdornedAutocompleteProps) => import("react").JSX.Element;
+export declare const AdornedAutocomplete: <T = string, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = true>({ label, placeholder, adornedSize, error, helperText, slotProps, freeSolo, ...props }: AdornedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => import("react").JSX.Element;
 //# sourceMappingURL=AdornedAutocomplete.d.ts.map

package/dist/components/AdornedTextField/AdornedAutocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdornedAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedTextField/AdornedAutocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,oBAAoB,CAAA;AAG3B,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,iBAAiB,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,EAC7C,aAAa,GAAG,WAAW,GAAG,UAAU,CACzC,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;CAC/C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,6EAQjC,wBAAwB,gCA8B1B,CAAA"}
+{"version":3,"file":"AdornedAutocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/AdornedTextField/AdornedAutocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EACV,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,oBAAoB,CAAA;AAQ3B,MAAM,MAAM,wBAAwB,CAClC,CAAC,GAAG,MAAM,EACV,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,IAAI,IACzC,IAAI,CACN,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAC1D,aAAa,GAAG,WAAW,CAC5B,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;CAC/C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC9B,CAAC,GAAG,MAAM,EACV,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EAC5C,gBAAgB,SAAS,OAAO,GAAG,SAAS,GAAG,KAAK,EACpD,QAAQ,SAAS,OAAO,GAAG,SAAS,GAAG,IAAI,EAC3C,uFASC,wBAAwB,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,QAAQ,CAAC,gCA8BnE,CAAA"}

package/dist/components/AdornedTextField/AdornedAutocomplete.js

@@ -1,24 +1,25 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
-import x from "@mui/material/Autocomplete";
-import { AdornedTextField as a } from "./AdornedTextField.js";
-const F = ({
+import a from "@mui/material/Autocomplete";
+import { AdornedTextField as b } from "./AdornedTextField.js";
+const S = ({
   label: d,
   placeholder: i,
   adornedSize: t = "medium",
   error: u,
   helperText: r,
   slotProps: e,
-  ...A
+  freeSolo: A,
+  ...f
 }) => /* @__PURE__ */ m(
-  x,
+  a,
   {
-    freeSolo: !0,
-    ...A,
-    renderInput: ({ InputProps: n, InputLabelProps: f, ...c }) => /* @__PURE__ */ m(
-      a,
+    freeSolo: A ?? !0,
+    ...f,
+    renderInput: ({ InputProps: n, InputLabelProps: c, ...x }) => /* @__PURE__ */ m(
+      b,
       {
-        ...c,
+        ...x,
         label: d,
         placeholder: i,
         adornedSize: t,
@@ -35,12 +36,12 @@ const F = ({
             // legacy InputProps it's built from when both are present).
             endAdornment: n.endAdornment
           },
-          inputLabel: { ...f, ...e == null ? void 0 : e.inputLabel }
+          inputLabel: { ...c, ...e == null ? void 0 : e.inputLabel }
         }
       }
     )
   }
 );
 export {
-  F as AdornedAutocomplete
+  S as AdornedAutocomplete
 };

package/dist/components/ElevationCard/ElevationCard.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),u=require("@mui/material/Box"),c={surface:5,raised:8};function l({elevation:a="surface",bordered:o=!0,children:i,sx:e,"data-testid":d}){const n=c[a];return s.jsx(u,{"data-testid":d,sx:[{borderRadius:"12px",backgroundColor:r=>{var t;return(t=r.palette.backgroundPaperElevation)==null?void 0:t[n]},...o&&{border:r=>`1px solid ${r.palette.divider}`}},...Array.isArray(e)?e:[e]],children:i})}exports.ElevationCard=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("@mui/material/Box"),b={surface:5,raised:8};function p({elevation:d="surface",bordered:i=!0,children:o,sx:r,"data-testid":s,component:t,ref:n}){const u=b[d];return l.jsx(c,{ref:n,...t?{component:t}:{},"data-testid":s,sx:[{borderRadius:e=>`${e.shape.borderRadius}px`,backgroundColor:e=>{var a;return(a=e.palette.backgroundPaperElevation)==null?void 0:a[u]},...i&&{border:e=>`1px solid ${e.palette.divider}`}},...Array.isArray(r)?r:[r]],children:o})}exports.ElevationCard=p;

package/dist/components/ElevationCard/ElevationCard.d.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import type { ReactNode } from "react";
+import type { ElementType, ReactNode, Ref } from "react";
 /**
  * Semantic elevation levels for cards.
  *
@@ -19,6 +19,9 @@ export interface ElevationCardProps {
     sx?: SxProps<Theme>;
     /** Optional test ID for e2e selectors. */
     "data-testid"?: string;
+    /** Root element/component, e.g. "li" for list semantics (default: "div"). */
+    component?: ElementType;
+    ref?: Ref<HTMLElement>;
 }
 /**
  * A reusable card primitive
@@ -32,5 +35,5 @@ export interface ElevationCardProps {
  * </ElevationCard>
  * ```
  */
-export declare function ElevationCard({ elevation, bordered, children, sx, "data-testid": dataTestId, }: ElevationCardProps): import("react").JSX.Element;
+export declare function ElevationCard({ elevation, bordered, children, sx, "data-testid": dataTestId, component, ref, }: ElevationCardProps): import("react").JSX.Element;
 //# sourceMappingURL=ElevationCard.d.ts.map

package/dist/components/ElevationCard/ElevationCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../src/components/ElevationCard/ElevationCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAA;AAOjD,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAWD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAqB,EACrB,QAAe,EACf,QAAQ,EACR,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,kBAAkB,+BAqBpB"}
+{"version":3,"file":"ElevationCard.d.ts","sourceRoot":"","sources":["../../../src/components/ElevationCard/ElevationCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAExD;;;;;;;;GAQG;AACH,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAA;AAOjD,MAAM,WAAW,kBAAkB;IACjC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,6EAA6E;IAC7E,SAAS,CAAC,EAAE,WAAW,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CACvB;AAWD;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAqB,EACrB,QAAe,EACf,QAAQ,EACR,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,SAAS,EACT,GAAG,GACJ,EAAE,kBAAkB,+BAuBpB"}

package/dist/components/ElevationCard/ElevationCard.js

@@ -1,39 +1,43 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import p from "@mui/material/Box";
-const u = {
+import { jsx as u } from "react/jsx-runtime";
+import l from "@mui/material/Box";
+const c = {
   surface: 5,
   raised: 8
 };
-function x({
-  elevation: a = "surface",
+function f({
+  elevation: d = "surface",
   bordered: o = !0,
-  children: d,
-  sx: r,
-  "data-testid": i
+  children: i,
+  sx: a,
+  "data-testid": s,
+  component: e,
+  ref: n
 }) {
-  const n = u[a];
-  return /* @__PURE__ */ s(
-    p,
+  const p = c[d];
+  return /* @__PURE__ */ u(
+    l,
     {
-      "data-testid": i,
+      ref: n,
+      ...e ? { component: e } : {},
+      "data-testid": s,
       sx: [
         {
-          borderRadius: "12px",
-          backgroundColor: (e) => {
+          borderRadius: (r) => `${r.shape.borderRadius}px`,
+          backgroundColor: (r) => {
             var t;
-            return (t = e.palette.backgroundPaperElevation) == null ? void 0 : t[n];
+            return (t = r.palette.backgroundPaperElevation) == null ? void 0 : t[p];
           },
           ...o && {
-            border: (e) => `1px solid ${e.palette.divider}`
+            border: (r) => `1px solid ${r.palette.divider}`
           }
         },
-        ...Array.isArray(r) ? r : [r]
+        ...Array.isArray(a) ? a : [a]
       ],
-      children: d
+      children: i
     }
   );
 }
 export {
-  x as ElevationCard
+  f as ElevationCard
 };

package/dist/components/RoundedIconButton/RoundedIconButton.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("@mui/material/IconButton");function p({icon:a,onClick:d,bgColor:e,isActive:n,disabled:u,dataTestId:i,ariaLabel:c}){return s.jsx(l,{onClick:d,disabled:u,sx:t=>{var o,r;return{backgroundColor:n!==void 0?n?e??((o=t.palette.backgroundPaperElevation)==null?void 0:o[11]):"transparent":e??((r=t.palette.backgroundPaperElevation)==null?void 0:r[11]),borderRadius:`${t.shape.borderRadius}px`,width:"30px",height:"30px"}},"data-testid":i,"aria-label":c,children:a})}exports.RoundedIconButton=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),R=require("@mui/material/IconButton");function x({icon:u,onClick:i,bgColor:e,isActive:n,disabled:c,dataTestId:l,ariaLabel:p,href:a,size:s,sx:t,ref:b}){return g.jsx(R,{ref:b,...a?{href:a}:{},size:s,onClick:i,disabled:c,sx:[r=>{var o,d;return{backgroundColor:n!==void 0?n?e??((o=r.palette.backgroundPaperElevation)==null?void 0:o[11]):"transparent":e??((d=r.palette.backgroundPaperElevation)==null?void 0:d[11]),borderRadius:`${r.shape.borderRadius}px`,width:"30px",height:"30px"}},...Array.isArray(t)?t:[t]],"data-testid":l,"aria-label":p,children:u})}exports.RoundedIconButton=x;

package/dist/components/RoundedIconButton/RoundedIconButton.d.ts

@@ -1,7 +1,10 @@
-import type { ReactNode } from "react";
+import type { IconButtonProps } from "@mui/material/IconButton";
+import type { SxProps, Theme } from "@mui/material/styles";
+import type { MouseEventHandler, ReactNode, Ref } from "react";
 export type RoundedIconButtonProps = {
     icon: ReactNode;
-    onClick?: () => void;
+    /** Covers both render modes: a `<button>`, or an `<a>` when `href` is set. */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
     /** Overrides the default background (`backgroundPaperElevation[11]`). */
     bgColor?: string;
     /**
@@ -12,10 +15,16 @@ export type RoundedIconButtonProps = {
     disabled?: boolean;
     dataTestId?: string;
     ariaLabel?: string;
+    /** Renders the button as a link (forwarded to the underlying `IconButton`/`ButtonBase`). */
+    href?: string;
+    /** MUI's own size scale, affects icon padding — the 30×30 root size is unaffected. */
+    size?: IconButtonProps["size"];
+    sx?: SxProps<Theme>;
+    ref?: Ref<HTMLButtonElement>;
 };
 /**
  * Small square (30×30) icon button with rounded corners on an elevated
  * background, styled to NovaDeck's canonical look.
  */
-export declare function RoundedIconButton({ icon, onClick, bgColor, isActive, disabled, dataTestId, ariaLabel, }: RoundedIconButtonProps): import("react").JSX.Element;
+export declare function RoundedIconButton({ icon, onClick, bgColor, isActive, disabled, dataTestId, ariaLabel, href, size, sx, ref, }: RoundedIconButtonProps): import("react").JSX.Element;
 //# sourceMappingURL=RoundedIconButton.d.ts.map

package/dist/components/RoundedIconButton/RoundedIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RoundedIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/RoundedIconButton/RoundedIconButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAWD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,GACV,EAAE,sBAAsB,+BAsBxB"}
+{"version":3,"file":"RoundedIconButton.d.ts","sourceRoot":"","sources":["../../../src/components/RoundedIconButton/RoundedIconButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAC1D,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE9D,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,8EAA8E;IAC9E,OAAO,CAAC,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAA;IAClE,yEAAyE;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4FAA4F;IAC5F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sFAAsF;IACtF,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAA;IAC9B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AAYD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,GAAG,GACJ,EAAE,sBAAsB,+BA4BxB"}

package/dist/components/RoundedIconButton/RoundedIconButton.js

@@ -1,35 +1,45 @@
 "use client";
-import { jsx as l } from "react/jsx-runtime";
-import c from "@mui/material/IconButton";
-function b({
-  icon: d,
-  onClick: e,
-  bgColor: a,
-  isActive: o,
-  disabled: p,
-  dataTestId: i,
-  ariaLabel: u
+import { jsx as x } from "react/jsx-runtime";
+import g from "@mui/material/IconButton";
+function f({
+  icon: i,
+  onClick: p,
+  bgColor: o,
+  isActive: t,
+  disabled: u,
+  dataTestId: l,
+  ariaLabel: c,
+  href: n,
+  size: b,
+  sx: r,
+  ref: s
 }) {
-  return /* @__PURE__ */ l(
-    c,
+  return /* @__PURE__ */ x(
+    g,
     {
-      onClick: e,
-      disabled: p,
-      sx: (r) => {
-        var t, n;
-        return {
-          backgroundColor: o !== void 0 ? o ? a ?? ((t = r.palette.backgroundPaperElevation) == null ? void 0 : t[11]) : "transparent" : a ?? ((n = r.palette.backgroundPaperElevation) == null ? void 0 : n[11]),
-          borderRadius: `${r.shape.borderRadius}px`,
-          width: "30px",
-          height: "30px"
-        };
-      },
-      "data-testid": i,
-      "aria-label": u,
-      children: d
+      ref: s,
+      ...n ? { href: n } : {},
+      size: b,
+      onClick: p,
+      disabled: u,
+      sx: [
+        (a) => {
+          var d, e;
+          return {
+            backgroundColor: t !== void 0 ? t ? o ?? ((d = a.palette.backgroundPaperElevation) == null ? void 0 : d[11]) : "transparent" : o ?? ((e = a.palette.backgroundPaperElevation) == null ? void 0 : e[11]),
+            borderRadius: `${a.shape.borderRadius}px`,
+            width: "30px",
+            height: "30px"
+          };
+        },
+        ...Array.isArray(r) ? r : [r]
+      ],
+      "data-testid": l,
+      "aria-label": c,
+      children: i
     }
   );
 }
 export {
-  b as RoundedIconButton
+  f as RoundedIconButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/mui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Wandelbots Nova MUI layer: dark-mode MUI-7 theme (createNovaMuiTheme) + presentational React components and input validators.",
   "type": "module",
   "sideEffects": [
@@ -59,7 +59,7 @@
     "react-dom": "^19"
   },
   "dependencies": {
-    "@wandelbots/design-tokens": "2.0.0"
+    "@wandelbots/design-tokens": "2.1.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",