@pautena/react-design-system 0.21.0 → 1.0.1

package/dist/{drawerx/drawer.types.d.ts → Drawerx/Drawer.types.d.ts}

@@ -1,43 +1,130 @@
 import { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
 import { Theme } from '@mui/material/styles';
 import { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement } from 'react';
-import { BulletVariant } from '../bullet';
-import { LabelVariant } from '../label';
-import { DrawerAppBarProps } from './drawer-app-bar';
+import { BulletVariant } from '../Bullet';
+import { LabelVariant } from '../Label';
+import { DrawerAppBarProps } from './DrawerAppBar';
+/**
+ * Drawer display variants
+ */
 export type DrawerVariant = "temporary" | "mini" | "persistent";
+/**
+ * Drawer open/close states
+ */
 export type DrawerState = "open" | "collapse" | "close";
+/**
+ * Drawer size variants
+ */
 export type DrawerSize = "small" | "medium";
+/**
+ * Avatar configuration for drawer items
+ */
 export interface DrawerItemAvatar {
+    /**
+     * Avatar image source URL
+     */
     src: string;
+    /**
+     * Alt text for the avatar image
+     */
     alt: string;
 }
+/**
+ * Label configuration for drawer items
+ */
 export interface DrawerItemLabel {
+    /**
+     * Label text content
+     */
     text: string;
+    /**
+     * Label color variant
+     */
     variant: LabelVariant;
 }
+/**
+ * Bullet indicator configuration for drawer items
+ */
 export interface DrawerItemBullet {
+    /**
+     * Bullet color variant
+     */
     variant: BulletVariant;
 }
+/**
+ * Navigation link item in the drawer
+ */
 export interface DrawerNavigationLink {
+    /**
+     * Item type discriminator
+     */
     kind: "link";
+    /**
+     * Unique identifier
+     */
     id: string;
+    /**
+     * Display text
+     */
     text: string;
+    /**
+     * Navigation URL
+     */
     href: string;
+    /**
+     * Optional icon element
+     */
     icon?: ReactElement;
+    /**
+     * Optional avatar configuration
+     */
     avatar?: DrawerItemAvatar;
+    /**
+     * Optional label badge
+     */
     label?: DrawerItemLabel;
+    /**
+     * Optional bullet indicator
+     */
     bullet?: DrawerItemBullet;
 }
+/**
+ * Collapsable navigation group with nested items
+ */
 export type DrawerNavigationCollapsable = Pick<DrawerNavigationLink, "id" | "text" | "icon"> & {
+    /**
+     * Item type discriminator
+     */
     kind: "collapsable";
+    /**
+     * Nested navigation items
+     */
     items: DrawerNavigationItem[];
 };
+/**
+ * Section header in the drawer navigation
+ */
 export interface DrawerNavigationHeader {
+    /**
+     * Item type discriminator
+     */
     kind: "header";
+    /**
+     * Unique identifier
+     */
     id: string;
+    /**
+     * Header text
+     */
     text: string;
 }
+/**
+ * Union of all possible drawer navigation item types
+ */
 export type DrawerNavigationItem = DrawerNavigationLink | DrawerNavigationCollapsable | DrawerNavigationHeader;
+/**
+ * Complete navigation structure for the drawer
+ */
 export type DrawerNavigation = DrawerNavigationItem[];
 export interface DrawerContentProps {
     /**
@@ -45,14 +132,43 @@ export interface DrawerContentProps {
      */
     navigation: DrawerNavigation;
 }
+/**
+ * DrawerContent component type
+ */
 export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
+/**
+ * DrawerContent element type
+ */
 export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
+/**
+ * Props for the Drawer component
+ *
+ * @extends MuiDrawerProps
+ */
 export type DrawerProps = PropsWithChildren<MuiDrawerProps>;
+/**
+ * Drawer component type
+ */
 export type DrawerComponent = FunctionComponent<DrawerProps>;
+/**
+ * Drawer element type
+ */
 export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+/**
+ * Returns color and font weight styles for drawer items based on selection state
+ *
+ * @param theme - MUI theme object
+ * @param selected - Whether the item is selected
+ */
 export declare const getDrawerItemColors: (theme: Theme, selected: boolean | undefined) => {
     color?: string;
     fontWeight: CSSProperties["fontWeight"];
 };
+/**
+ * DrawerAppBar component type
+ */
 export type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
+/**
+ * DrawerAppBar element type
+ */
 export type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;

package/dist/Drawerx/Drawer.types.mjs

@@ -0,0 +1,8 @@
+const r = (o, t) => ({
+  color: t ? o.palette.primary.main : void 0,
+  fontWeight: t ? o.typography.fontWeightBold : o.typography.fontWeightMedium
+});
+export {
+  r as getDrawerItemColors
+};
+//# sourceMappingURL=Drawer.types.mjs.map

package/dist/Drawerx/Drawer.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.types.mjs","sources":["../../src/Drawerx/Drawer.types.ts"],"sourcesContent":["import type { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport type { Theme } from \"@mui/material/styles\";\nimport type {\n  CSSProperties,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport type { BulletVariant } from \"../Bullet\";\nimport type { LabelVariant } from \"../Label\";\nimport type { DrawerAppBarProps } from \"./DrawerAppBar\";\n\n/**\n * Drawer display variants\n */\nexport type DrawerVariant = \"temporary\" | \"mini\" | \"persistent\";\n\n/**\n * Drawer open/close states\n */\nexport type DrawerState = \"open\" | \"collapse\" | \"close\";\n\n/**\n * Drawer size variants\n */\nexport type DrawerSize = \"small\" | \"medium\";\n\n/**\n * Avatar configuration for drawer items\n */\nexport interface DrawerItemAvatar {\n  /**\n   * Avatar image source URL\n   */\n  src: string;\n  /**\n   * Alt text for the avatar image\n   */\n  alt: string;\n}\n\n/**\n * Label configuration for drawer items\n */\nexport interface DrawerItemLabel {\n  /**\n   * Label text content\n   */\n  text: string;\n  /**\n   * Label color variant\n   */\n  variant: LabelVariant;\n}\n\n/**\n * Bullet indicator configuration for drawer items\n */\nexport interface DrawerItemBullet {\n  /**\n   * Bullet color variant\n   */\n  variant: BulletVariant;\n}\n\n/**\n * Navigation link item in the drawer\n */\nexport interface DrawerNavigationLink {\n  /**\n   * Item type discriminator\n   */\n  kind: \"link\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Display text\n   */\n  text: string;\n  /**\n   * Navigation URL\n   */\n  href: string;\n  /**\n   * Optional icon element\n   */\n  icon?: ReactElement;\n  /**\n   * Optional avatar configuration\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Optional label badge\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Optional bullet indicator\n   */\n  bullet?: DrawerItemBullet;\n}\n\n/**\n * Collapsable navigation group with nested items\n */\nexport type DrawerNavigationCollapsable = Pick<\n  DrawerNavigationLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  /**\n   * Item type discriminator\n   */\n  kind: \"collapsable\";\n  /**\n   * Nested navigation items\n   */\n  items: DrawerNavigationItem[];\n};\n\n/**\n * Section header in the drawer navigation\n */\nexport interface DrawerNavigationHeader {\n  /**\n   * Item type discriminator\n   */\n  kind: \"header\";\n  /**\n   * Unique identifier\n   */\n  id: string;\n  /**\n   * Header text\n   */\n  text: string;\n}\n\n/**\n * Union of all possible drawer navigation item types\n */\nexport type DrawerNavigationItem =\n  | DrawerNavigationLink\n  | DrawerNavigationCollapsable\n  | DrawerNavigationHeader;\n\n/**\n * Complete navigation structure for the drawer\n */\nexport type DrawerNavigation = DrawerNavigationItem[];\n\nexport interface DrawerContentProps {\n  /**\n   * Object with the content that has to be rendered\n   */\n  navigation: DrawerNavigation;\n}\n\n/**\n * DrawerContent component type\n */\nexport type DrawerContentComponent = FunctionComponent<DrawerContentProps>;\n\n/**\n * DrawerContent element type\n */\nexport type DrawerContentElement = ReactElement<\n  DrawerContentProps,\n  DrawerContentComponent\n>;\n\n/**\n * Props for the Drawer component\n *\n * @extends MuiDrawerProps\n */\nexport type DrawerProps = PropsWithChildren<MuiDrawerProps>;\n\n/**\n * Drawer component type\n */\nexport type DrawerComponent = FunctionComponent<DrawerProps>;\n\n/**\n * Drawer element type\n */\nexport type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;\n\n/**\n * Returns color and font weight styles for drawer items based on selection state\n *\n * @param theme - MUI theme object\n * @param selected - Whether the item is selected\n */\nexport const getDrawerItemColors = (\n  theme: Theme,\n  selected: boolean | undefined,\n): {\n  color?: string;\n  fontWeight: CSSProperties[\"fontWeight\"];\n} => ({\n  color: selected ? theme.palette.primary.main : undefined,\n  fontWeight: selected\n    ? theme.typography.fontWeightBold\n    : theme.typography.fontWeightMedium,\n});\n\n/**\n * DrawerAppBar component type\n */\nexport type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;\n\n/**\n * DrawerAppBar element type\n */\nexport type DrawerAppBarElement = ReactElement<\n  DrawerAppBarProps,\n  DrawerAppBarComponent\n>;\n"],"names":["getDrawerItemColors","theme","selected"],"mappings":"AAkMO,MAAMA,IAAsB,CACjCC,GACAC,OAII;AAAA,EACJ,OAAOA,IAAWD,EAAM,QAAQ,QAAQ,OAAO;AAAA,EAC/C,YAAYC,IACRD,EAAM,WAAW,iBACjBA,EAAM,WAAW;AACvB;"}

package/dist/{drawerx/drawer-app-bar/drawer-app-bar.d.ts → Drawerx/DrawerAppBar/DrawerAppBar.d.ts}

@@ -8,4 +8,4 @@ export interface DrawerAppBarProps extends MuiAppBarProps {
 /**
  * DrawerAppBar component that renders an AppBar adapted to work inside a Drawer context.
  */
-export declare const DrawerAppBar: ({ title, sx, children, ...rest }: DrawerAppBarProps) => import("react/jsx-runtime").JSX.Element;
+export default function DrawerAppBar({ title, sx, children, ...rest }: DrawerAppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/Drawerx/DrawerAppBar/DrawerAppBar.mjs

@@ -0,0 +1,93 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/icons-material/ChevronLeft";
+import f from "@mui/icons-material/Menu";
+import g from "@mui/icons-material/MenuOpen";
+import w from "@mui/material/AppBar";
+import x from "@mui/material/IconButton";
+import { styled as v, useTheme as y } from "@mui/material/styles";
+import I from "@mui/material/Toolbar";
+import b from "@mui/material/Typography";
+import "@mui/material";
+import "react";
+import { useDrawer as B } from "../DrawerContext/DrawerContext.mjs";
+const M = v(w)(({ theme: r }) => ({
+  borderWidth: 0,
+  borderBottomWidth: 1,
+  borderStyle: "solid",
+  borderColor: r.palette.divider,
+  boxShadow: "none",
+  zIndex: r.zIndex.drawer + 1
+})), S = {
+  temporary: !1,
+  mini: !0,
+  persistent: !0
+}, W = {
+  temporary: () => !0,
+  mini: (r) => r !== "open",
+  persistent: () => !0
+};
+function E({
+  title: r,
+  sx: s,
+  children: p,
+  ...d
+}) {
+  const t = y(), { state: i, variant: n, switchState: m, drawerWidth: a, clipped: e } = B(), c = S[n] && !e && {
+    transition: t.transitions.create(["width", "margin"], {
+      easing: t.transitions.easing.sharp,
+      duration: t.transitions.duration.leavingScreen
+    }),
+    ...i === "open" && {
+      marginLeft: a,
+      width: `calc(100% - ${a}px)`,
+      transition: t.transitions.create(["width", "margin"], {
+        easing: t.transitions.easing.sharp,
+        duration: t.transitions.duration.enteringScreen
+      })
+    }
+  } || {};
+  return /* @__PURE__ */ o(
+    M,
+    {
+      position: e ? "fixed" : void 0,
+      ...d,
+      sx: {
+        ...s,
+        ...c,
+        zIndex: (h) => h.zIndex.drawer + (e ? 1 : 0)
+      },
+      children: /* @__PURE__ */ l(I, { children: [
+        /* @__PURE__ */ o(
+          x,
+          {
+            color: "inherit",
+            "aria-label": "open drawer",
+            onClick: m,
+            edge: "start",
+            sx: {
+              marginRight: t.spacing(2),
+              display: e || W[n](i) ? void 0 : "none"
+            },
+            children: i === "open" ? n === "mini" ? /* @__PURE__ */ o(g, {}) : /* @__PURE__ */ o(u, {}) : /* @__PURE__ */ o(f, {})
+          }
+        ),
+        r && /* @__PURE__ */ o(
+          b,
+          {
+            variant: "h6",
+            component: "h1",
+            role: "heading",
+            "aria-level": 1,
+            noWrap: !0,
+            children: r
+          }
+        ),
+        p
+      ] })
+    }
+  );
+}
+export {
+  E as default
+};
+//# sourceMappingURL=DrawerAppBar.mjs.map

package/dist/Drawerx/DrawerAppBar/DrawerAppBar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerAppBar.mjs","sources":["../../../src/Drawerx/DrawerAppBar/DrawerAppBar.tsx"],"sourcesContent":["import ChevronLeftIcon from \"@mui/icons-material/ChevronLeft\";\nimport MenuIcon from \"@mui/icons-material/Menu\";\nimport MenuOpenIcon from \"@mui/icons-material/MenuOpen\";\nimport type { AppBarProps as MuiAppBarProps } from \"@mui/material\";\nimport MuiAppBar from \"@mui/material/AppBar\";\nimport IconButton from \"@mui/material/IconButton\";\nimport { styled, type Theme, useTheme } from \"@mui/material/styles\";\nimport Toolbar from \"@mui/material/Toolbar\";\nimport Typography from \"@mui/material/Typography\";\nimport type { DrawerState, DrawerVariant } from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\n\nconst MyMuiAppBar = styled(MuiAppBar)(({ theme }) => ({\n  borderWidth: 0,\n  borderBottomWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: theme.palette.divider,\n  boxShadow: \"none\",\n  zIndex: theme.zIndex.drawer + 1,\n}));\n\nconst moveWithDrawer: Record<DrawerVariant, boolean> = {\n  temporary: false,\n  mini: true,\n  persistent: true,\n};\n\nconst showMenuButton: Record<DrawerVariant, (state: DrawerState) => boolean> = {\n  temporary: () => true,\n  mini: (state) => state !== \"open\",\n  persistent: () => true,\n};\n\nexport interface DrawerAppBarProps extends MuiAppBarProps {\n  /**\n   * Title to display in the AppBar.\n   */\n  title?: string;\n}\n\n/**\n * DrawerAppBar component that renders an AppBar adapted to work inside a Drawer context.\n */\nexport default function DrawerAppBar({\n  title,\n  sx,\n  children,\n  ...rest\n}: DrawerAppBarProps) {\n  const theme = useTheme();\n  const { state, variant, switchState, drawerWidth, clipped } = useDrawer();\n\n  const rootSx =\n    (moveWithDrawer[variant] &&\n      !clipped && {\n        transition: theme.transitions.create([\"width\", \"margin\"], {\n          easing: theme.transitions.easing.sharp,\n          duration: theme.transitions.duration.leavingScreen,\n        }),\n        ...(state === \"open\" && {\n          marginLeft: drawerWidth,\n          width: `calc(100% - ${drawerWidth}px)`,\n          transition: theme.transitions.create([\"width\", \"margin\"], {\n            easing: theme.transitions.easing.sharp,\n            duration: theme.transitions.duration.enteringScreen,\n          }),\n        }),\n      }) ||\n    {};\n\n  return (\n    <MyMuiAppBar\n      position={clipped ? \"fixed\" : undefined}\n      {...rest}\n      sx={{\n        ...sx,\n        ...rootSx,\n        zIndex: (theme: Theme) => theme.zIndex.drawer + (clipped ? 1 : 0),\n      }}\n    >\n      <Toolbar>\n        <IconButton\n          color=\"inherit\"\n          aria-label=\"open drawer\"\n          onClick={switchState}\n          edge=\"start\"\n          sx={{\n            marginRight: theme.spacing(2),\n            display:\n              clipped || showMenuButton[variant](state) ? undefined : \"none\",\n          }}\n        >\n          {state === \"open\" ? (\n            variant === \"mini\" ? (\n              <MenuOpenIcon />\n            ) : (\n              <ChevronLeftIcon />\n            )\n          ) : (\n            <MenuIcon />\n          )}\n        </IconButton>\n        {title && (\n          <Typography\n            variant=\"h6\"\n            component=\"h1\"\n            role=\"heading\"\n            aria-level={1}\n            noWrap\n          >\n            {title}\n          </Typography>\n        )}\n        {children}\n      </Toolbar>\n    </MyMuiAppBar>\n  );\n}\n"],"names":["MyMuiAppBar","styled","MuiAppBar","theme","moveWithDrawer","showMenuButton","state","DrawerAppBar","title","sx","children","rest","useTheme","variant","switchState","drawerWidth","clipped","useDrawer","rootSx","jsx","Toolbar","IconButton","MenuOpenIcon","ChevronLeftIcon","MenuIcon","Typography"],"mappings":";;;;;;;;;;;;AAYA,MAAMA,IAAcC,EAAOC,CAAS,EAAE,CAAC,EAAE,OAAAC,SAAa;AAAA,EACpD,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,aAAaA,EAAM,QAAQ;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQA,EAAM,OAAO,SAAS;AAChC,EAAE,GAEIC,IAAiD;AAAA,EACrD,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd,GAEMC,IAAyE;AAAA,EAC7E,WAAW,MAAM;AAAA,EACjB,MAAM,CAACC,MAAUA,MAAU;AAAA,EAC3B,YAAY,MAAM;AACpB;AAYA,SAAwBC,EAAa;AAAA,EACnC,OAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMR,IAAQS,EAAA,GACR,EAAE,OAAAN,GAAO,SAAAO,GAAS,aAAAC,GAAa,aAAAC,GAAa,SAAAC,EAAA,IAAYC,EAAA,GAExDC,IACHd,EAAeS,CAAO,KACrB,CAACG,KAAW;AAAA,IACV,YAAYb,EAAM,YAAY,OAAO,CAAC,SAAS,QAAQ,GAAG;AAAA,MACxD,QAAQA,EAAM,YAAY,OAAO;AAAA,MACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,IAAA,CACtC;AAAA,IACD,GAAIG,MAAU,UAAU;AAAA,MACtB,YAAYS;AAAA,MACZ,OAAO,eAAeA,CAAW;AAAA,MACjC,YAAYZ,EAAM,YAAY,OAAO,CAAC,SAAS,QAAQ,GAAG;AAAA,QACxD,QAAQA,EAAM,YAAY,OAAO;AAAA,QACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,MAAA,CACtC;AAAA,IAAA;AAAA,EACH,KAEJ,CAAA;AAEF,SACE,gBAAAgB;AAAA,IAACnB;AAAA,IAAA;AAAA,MACC,UAAUgB,IAAU,UAAU;AAAA,MAC7B,GAAGL;AAAA,MACJ,IAAI;AAAA,QACF,GAAGF;AAAA,QACH,GAAGS;AAAA,QACH,QAAQ,CAACf,MAAiBA,EAAM,OAAO,UAAUa,IAAU,IAAI;AAAA,MAAA;AAAA,MAGjE,4BAACI,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,cAAW;AAAA,YACX,SAASP;AAAA,YACT,MAAK;AAAA,YACL,IAAI;AAAA,cACF,aAAaX,EAAM,QAAQ,CAAC;AAAA,cAC5B,SACEa,KAAWX,EAAeQ,CAAO,EAAEP,CAAK,IAAI,SAAY;AAAA,YAAA;AAAA,YAG3D,UAAAA,MAAU,SACTO,MAAY,SACV,gBAAAM,EAACG,GAAA,CAAA,CAAa,IAEd,gBAAAH,EAACI,GAAA,CAAA,CAAgB,IAGnB,gBAAAJ,EAACK,GAAA,CAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGbhB,KACC,gBAAAW;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY;AAAA,YACZ,QAAM;AAAA,YAEL,UAAAjB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGJE;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/Drawerx/DrawerAppBar/index.d.ts

@@ -0,0 +1,2 @@
+export type { DrawerAppBarProps } from './DrawerAppBar';
+export { default, default as DrawerAppBar } from './DrawerAppBar';

package/dist/Drawerx/DrawerContent/DrawerContent.d.ts

@@ -0,0 +1,5 @@
+import { DrawerContentProps } from '../Drawer.types';
+/**
+ * Content to be shown inside a navigation
+ */
+export default function DrawerContent({ navigation }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/Drawerx/DrawerContent/DrawerContent.mjs

@@ -0,0 +1,35 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useTheme as p, List as e } from "@mui/material";
+import "react";
+import { useDrawer as s } from "../DrawerContext/DrawerContext.mjs";
+import a from "../DrawerItem/DrawerItem.mjs";
+import "@mui/material/Avatar";
+import "@mui/material/ListItemAvatar";
+import "@mui/material/ListItemButton";
+import "@mui/material/ListItemIcon";
+import "@mui/material/ListItemText";
+import "@mui/material/styles";
+import "@mui/material/Badge";
+import "@mui/material/Box";
+import "@mui/icons-material/ChevronRight";
+import "@mui/icons-material/ExpandMore";
+import "@mui/material/Collapse";
+import "@mui/material/List";
+import "@mui/material/Popover";
+function X({ navigation: m }) {
+  const { size: o } = s(), { spacing: r } = p();
+  return /* @__PURE__ */ i(
+    e,
+    {
+      sx: {
+        paddingTop: o === "small" ? r(0.5) : void 0,
+        paddingX: r(o === "small" ? 0.5 : 1)
+      },
+      children: m.map((t) => /* @__PURE__ */ i(a, { item: t }, t.id))
+    }
+  );
+}
+export {
+  X as default
+};
+//# sourceMappingURL=DrawerContent.mjs.map

package/dist/Drawerx/DrawerContent/DrawerContent.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.mjs","sources":["../../../src/Drawerx/DrawerContent/DrawerContent.tsx"],"sourcesContent":["import { List, useTheme } from \"@mui/material\";\nimport type { DrawerContentProps } from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\nimport DrawerItem from \"../DrawerItem\";\n\n/**\n * Content to be shown inside a navigation\n */\nexport default function DrawerContent({ navigation }: DrawerContentProps) {\n  const { size } = useDrawer();\n  const { spacing } = useTheme();\n\n  return (\n    <List\n      sx={{\n        paddingTop: size === \"small\" ? spacing(0.5) : undefined,\n        paddingX: size === \"small\" ? spacing(0.5) : spacing(1),\n      }}\n    >\n      {navigation.map((item) => (\n        <DrawerItem key={item.id} item={item} />\n      ))}\n    </List>\n  );\n}\n"],"names":["DrawerContent","navigation","size","useDrawer","spacing","useTheme","jsx","List","item","DrawerItem"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,SAAwBA,EAAc,EAAE,YAAAC,KAAkC;AACxE,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA,GACX,EAAE,SAAAC,EAAA,IAAYC,EAAA;AAEpB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,YAAYL,MAAS,UAAUE,EAAQ,GAAG,IAAI;AAAA,QAC9C,UAA6BA,EAAnBF,MAAS,UAAkB,MAAe,CAAZ;AAAA,MAAa;AAAA,MAGtD,UAAAD,EAAW,IAAI,CAACO,wBACdC,GAAA,EAAyB,MAAAD,EAAA,GAATA,EAAK,EAAgB,CACvC;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/Drawerx/DrawerContent/index.d.ts

@@ -0,0 +1 @@
+export { default, default as DrawerContent } from './DrawerContent';

package/dist/Drawerx/DrawerContext/Drawer.provider.d.ts

@@ -0,0 +1,45 @@
+import { PropsWithChildren, ElementType } from 'react';
+import { DrawerSize, DrawerState, DrawerVariant } from '../Drawer.types';
+export interface DrawerProviderProps extends PropsWithChildren {
+    /**
+     * Initial state of the drawer
+     */
+    initialState?: DrawerState;
+    /**
+     * Size of the drawer
+     * @default "medium"
+     */
+    size?: DrawerSize;
+    /**
+     * Whether the drawer is clipped under the app bar
+     * @default true
+     */
+    clipped?: boolean;
+    /**
+     * Width of the drawer in pixels
+     */
+    drawerWidth?: number;
+    /**
+     * Variant of the drawer behavior
+     * - temporary: slides over content, closes on backdrop click
+     * - persistent: pushes content when open
+     * - mini: shows icons only when collapsed
+     * @default "temporary"
+     */
+    variant?: DrawerVariant;
+    /**
+     * ID of the currently selected navigation item
+     */
+    selectedItemId?: string;
+    /**
+     * The component used to render a link when the `href` prop is provided.
+     * @default 'a'
+     */
+    LinkComponent?: ElementType;
+    /**
+     * Callback fired when the drawer state changes
+     * @param newState - The new drawer state
+     */
+    onStateChange?: (newState: DrawerState) => void;
+}
+export declare const DrawerProvider: ({ children, initialState: initialStateProp, variant, size, drawerWidth: drawerWidthProp, clipped, selectedItemId, LinkComponent, onStateChange, }: DrawerProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Drawerx/DrawerContext/Drawer.provider.mjs

@@ -0,0 +1,54 @@
+import { jsx as h } from "react/jsx-runtime";
+import { Link as u } from "@mui/material";
+import { useState as S } from "react";
+import { DrawerContext as f } from "./DrawerContext.mjs";
+import { drawerWidth as w } from "./DrawerMixins.mjs";
+const x = {
+  temporary: "close",
+  mini: "collapse",
+  persistent: "close"
+}, y = {
+  temporary: ["close", "open"],
+  mini: ["collapse", "open"],
+  persistent: ["close", "open"]
+}, j = ({
+  children: i,
+  initialState: a,
+  variant: t = "temporary",
+  size: p = "medium",
+  drawerWidth: l = w,
+  clipped: n = !0,
+  selectedItemId: m,
+  LinkComponent: c = u,
+  onStateChange: d = () => null
+}) => {
+  const [o, r] = S(
+    a || x[t]
+  ), e = (s) => {
+    d(s), r(s);
+  };
+  return /* @__PURE__ */ h(
+    f.Provider,
+    {
+      value: {
+        state: o,
+        size: p,
+        variant: t,
+        selectedItemId: m,
+        clipped: n,
+        drawerWidth: l,
+        LinkComponent: c,
+        switchState: () => e(y[t][o === "open" ? 0 : 1]),
+        collapse: () => e("collapse"),
+        close: () => e("close"),
+        open: () => e("open"),
+        setState: r
+      },
+      children: i
+    }
+  );
+};
+export {
+  j as DrawerProvider
+};
+//# sourceMappingURL=Drawer.provider.mjs.map

package/dist/Drawerx/DrawerContext/Drawer.provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.provider.mjs","sources":["../../../src/Drawerx/DrawerContext/Drawer.provider.tsx"],"sourcesContent":["import { Link } from \"@mui/material\";\nimport type { PropsWithChildren } from \"react\";\nimport { type ElementType, useState } from \"react\";\nimport type { DrawerSize, DrawerState, DrawerVariant } from \"../Drawer.types\";\nimport { DrawerContext } from \"./DrawerContext\";\nimport { drawerWidth } from \"./DrawerMixins\";\n\nconst initialState: Record<DrawerVariant, DrawerState> = {\n  temporary: \"close\",\n  mini: \"collapse\",\n  persistent: \"close\",\n};\n\nconst targetStates: Record<DrawerVariant, [DrawerState, DrawerState]> = {\n  temporary: [\"close\", \"open\"],\n  mini: [\"collapse\", \"open\"],\n  persistent: [\"close\", \"open\"],\n};\n\nexport interface DrawerProviderProps extends PropsWithChildren {\n  /**\n   * Initial state of the drawer\n   */\n  initialState?: DrawerState;\n  /**\n   * Size of the drawer\n   * @default \"medium\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether the drawer is clipped under the app bar\n   * @default true\n   */\n  clipped?: boolean;\n  /**\n   * Width of the drawer in pixels\n   */\n  drawerWidth?: number;\n  /**\n   * Variant of the drawer behavior\n   * - temporary: slides over content, closes on backdrop click\n   * - persistent: pushes content when open\n   * - mini: shows icons only when collapsed\n   * @default \"temporary\"\n   */\n  variant?: DrawerVariant;\n  /**\n   * ID of the currently selected navigation item\n   */\n  selectedItemId?: string;\n  /**\n   * The component used to render a link when the `href` prop is provided.\n   * @default 'a'\n   */\n  LinkComponent?: ElementType;\n  /**\n   * Callback fired when the drawer state changes\n   * @param newState - The new drawer state\n   */\n  onStateChange?: (newState: DrawerState) => void;\n}\n\nexport const DrawerProvider = ({\n  children,\n  initialState: initialStateProp,\n  variant = \"temporary\",\n  size = \"medium\",\n  drawerWidth: drawerWidthProp = drawerWidth,\n  clipped = true,\n  selectedItemId,\n  LinkComponent = Link,\n  onStateChange = () => null,\n}: DrawerProviderProps) => {\n  const [state, setState] = useState<DrawerState>(\n    initialStateProp || initialState[variant],\n  );\n\n  const handleChangeState = (newState: DrawerState) => {\n    onStateChange(newState);\n    setState(newState);\n  };\n\n  return (\n    <DrawerContext.Provider\n      value={{\n        state,\n        size,\n        variant,\n        selectedItemId,\n        clipped,\n        drawerWidth: drawerWidthProp,\n        LinkComponent,\n        switchState: () =>\n          handleChangeState(targetStates[variant][state === \"open\" ? 0 : 1]),\n        collapse: () => handleChangeState(\"collapse\"),\n        close: () => handleChangeState(\"close\"),\n        open: () => handleChangeState(\"open\"),\n        setState,\n      }}\n    >\n      {children}\n    </DrawerContext.Provider>\n  );\n};\n"],"names":["initialState","targetStates","DrawerProvider","children","initialStateProp","variant","size","drawerWidthProp","drawerWidth","clipped","selectedItemId","LinkComponent","Link","onStateChange","state","setState","useState","handleChangeState","newState","jsx","DrawerContext"],"mappings":";;;;;AAOA,MAAMA,IAAmD;AAAA,EACvD,WAAW;AAAA,EACX,MAAM;AAAA,EACN,YAAY;AACd,GAEMC,IAAkE;AAAA,EACtE,WAAW,CAAC,SAAS,MAAM;AAAA,EAC3B,MAAM,CAAC,YAAY,MAAM;AAAA,EACzB,YAAY,CAAC,SAAS,MAAM;AAC9B,GA6CaC,IAAiB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,aAAaC,IAAkBC;AAAA,EAC/B,SAAAC,IAAU;AAAA,EACV,gBAAAC;AAAA,EACA,eAAAC,IAAgBC;AAAA,EAChB,eAAAC,IAAgB,MAAM;AACxB,MAA2B;AACzB,QAAM,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxBZ,KAAoBJ,EAAaK,CAAO;AAAA,EAAA,GAGpCY,IAAoB,CAACC,MAA0B;AACnD,IAAAL,EAAcK,CAAQ,GACtBH,EAASG,CAAQ;AAAA,EACnB;AAEA,SACE,gBAAAC;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,OAAAN;AAAA,QACA,MAAAR;AAAA,QACA,SAAAD;AAAA,QACA,gBAAAK;AAAA,QACA,SAAAD;AAAA,QACA,aAAaF;AAAA,QACb,eAAAI;AAAA,QACA,aAAa,MACXM,EAAkBhB,EAAaI,CAAO,EAAES,MAAU,SAAS,IAAI,CAAC,CAAC;AAAA,QACnE,UAAU,MAAMG,EAAkB,UAAU;AAAA,QAC5C,OAAO,MAAMA,EAAkB,OAAO;AAAA,QACtC,MAAM,MAAMA,EAAkB,MAAM;AAAA,QACpC,UAAAF;AAAA,MAAA;AAAA,MAGD,UAAAZ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/{drawerx/drawer-context/drawer-context.d.ts → Drawerx/DrawerContext/DrawerContext.d.ts}

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { DrawerSize, DrawerState, DrawerVariant } from '../drawer.types';
+import { DrawerSize, DrawerState, DrawerVariant } from '../Drawer.types';
 export interface DrawerContextProps {
     selectedItemId?: string;
     /**

package/dist/Drawerx/DrawerContext/DrawerContext.mjs

@@ -0,0 +1,17 @@
+import { createContext as r, useContext as t } from "react";
+const o = r(
+  void 0
+), n = new Error(
+  "DrawerContext.Provider is required and was undefined"
+), i = () => {
+  const e = t(o);
+  if (e === void 0)
+    throw n;
+  return e;
+};
+export {
+  o as DrawerContext,
+  n as UndefinedProvider,
+  i as useDrawer
+};
+//# sourceMappingURL=DrawerContext.mjs.map

package/dist/Drawerx/DrawerContext/DrawerContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.mjs","sources":["../../../src/Drawerx/DrawerContext/DrawerContext.ts"],"sourcesContent":["import { createContext, type ElementType, useContext } from \"react\";\nimport type { DrawerSize, DrawerState, DrawerVariant } from \"../Drawer.types\";\n\nexport interface DrawerContextProps {\n  selectedItemId?: string;\n  /**\n   * Item size. default to medium\n   */\n  size: DrawerSize;\n  state: DrawerState;\n  variant: DrawerVariant;\n  drawerWidth: number;\n  clipped: boolean;\n  /**\n   * The component used to render a link when the `href` prop is provided.\n   * @default 'a'\n   */\n  LinkComponent?: ElementType;\n  switchState(): void;\n  close(): void;\n  collapse(): void;\n  open(): void;\n  setState: (state: DrawerState) => void;\n}\n\nexport const DrawerContext = createContext<DrawerContextProps | undefined>(\n  undefined,\n);\nexport const UndefinedProvider = new Error(\n  \"DrawerContext.Provider is required and was undefined\",\n);\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext);\n\n  if (context === undefined) {\n    throw UndefinedProvider;\n  }\n\n  return context;\n};\n"],"names":["DrawerContext","createContext","UndefinedProvider","useDrawer","context","useContext"],"mappings":";AAyBO,MAAMA,IAAgBC;AAAA,EAC3B;AACF,GACaC,IAAoB,IAAI;AAAA,EACnC;AACF,GAEaC,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAWL,CAAa;AAExC,MAAII,MAAY;AACd,UAAMF;AAGR,SAAOE;AACT;"}

package/dist/Drawerx/DrawerContext/DrawerMixins.mjs

@@ -0,0 +1,27 @@
+const n = 240, s = (i) => ({
+  width: 240,
+  [i.breakpoints.down("sm")]: {
+    width: 1
+  },
+  transition: i.transitions.create("width", {
+    easing: i.transitions.easing.sharp,
+    duration: i.transitions.duration.enteringScreen
+  }),
+  overflowX: "hidden"
+}), a = (i) => ({
+  transition: i.transitions.create("width", {
+    easing: i.transitions.easing.sharp,
+    duration: i.transitions.duration.leavingScreen
+  }),
+  overflowX: "hidden",
+  width: `calc(${i.spacing(7)} + 1px)`,
+  [i.breakpoints.up("sm")]: {
+    width: `calc(${i.spacing(8)} + 1px)`
+  }
+});
+export {
+  a as closedMixin,
+  n as drawerWidth,
+  s as openedMixin
+};
+//# sourceMappingURL=DrawerMixins.mjs.map

package/dist/Drawerx/DrawerContext/DrawerMixins.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerMixins.mjs","sources":["../../../src/Drawerx/DrawerContext/DrawerMixins.ts"],"sourcesContent":["import type { CSSObject, Theme } from \"@mui/material/styles\";\n\nexport const drawerWidth = 240;\n\nexport const openedMixin = (theme: Theme): CSSObject => ({\n  width: drawerWidth,\n  [theme.breakpoints.down(\"sm\")]: {\n    width: 1,\n  },\n  transition: theme.transitions.create(\"width\", {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.enteringScreen,\n  }),\n  overflowX: \"hidden\",\n});\n\nexport const closedMixin = (theme: Theme): CSSObject => ({\n  transition: theme.transitions.create(\"width\", {\n    easing: theme.transitions.easing.sharp,\n    duration: theme.transitions.duration.leavingScreen,\n  }),\n  overflowX: \"hidden\",\n  width: `calc(${theme.spacing(7)} + 1px)`,\n  [theme.breakpoints.up(\"sm\")]: {\n    width: `calc(${theme.spacing(8)} + 1px)`,\n  },\n});\n"],"names":["drawerWidth","openedMixin","theme","closedMixin"],"mappings":"AAEO,MAAMA,IAAc,KAEdC,IAAc,CAACC,OAA6B;AAAA,EACvD,OAAO;AAAA,EACP,CAACA,EAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,IAC9B,OAAO;AAAA,EAAA;AAAA,EAET,YAAYA,EAAM,YAAY,OAAO,SAAS;AAAA,IAC5C,QAAQA,EAAM,YAAY,OAAO;AAAA,IACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,EAAA,CACtC;AAAA,EACD,WAAW;AACb,IAEaC,IAAc,CAACD,OAA6B;AAAA,EACvD,YAAYA,EAAM,YAAY,OAAO,SAAS;AAAA,IAC5C,QAAQA,EAAM,YAAY,OAAO;AAAA,IACjC,UAAUA,EAAM,YAAY,SAAS;AAAA,EAAA,CACtC;AAAA,EACD,WAAW;AAAA,EACX,OAAO,QAAQA,EAAM,QAAQ,CAAC,CAAC;AAAA,EAC/B,CAACA,EAAM,YAAY,GAAG,IAAI,CAAC,GAAG;AAAA,IAC5B,OAAO,QAAQA,EAAM,QAAQ,CAAC,CAAC;AAAA,EAAA;AAEnC;"}

package/dist/Drawerx/DrawerContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Drawer.provider';
+export * from './DrawerContext';

package/dist/{drawerx/drawer-item/drawer-item.d.ts → Drawerx/DrawerItem/DrawerItem.d.ts}

@@ -1,4 +1,4 @@
-import { DrawerNavigationItem } from '../drawer.types';
+import { DrawerNavigationItem } from '../Drawer.types';
 export interface DrawerItemProps {
     /**
      * Data to be rendered
@@ -12,4 +12,4 @@ export interface DrawerItemProps {
 /**
  * Component representing a drawer item in the navigation drawer.
  */
-export declare const DrawerItem: ({ item, level }: DrawerItemProps) => false | import("react/jsx-runtime").JSX.Element;
+export default function DrawerItem({ item, level }: DrawerItemProps): false | import("react/jsx-runtime").JSX.Element;

package/dist/Drawerx/DrawerItem/DrawerItem.mjs

@@ -0,0 +1,43 @@
+import { jsx as t } from "react/jsx-runtime";
+import "@mui/material";
+import "react";
+import { useDrawer as D } from "../DrawerContext/DrawerContext.mjs";
+import I from "../DrawerSubheader/DrawerSubheader.mjs";
+import { DrawerItemLink as b } from "./DrawerItemLink.mjs";
+import { DrawerMenuItem as k } from "./DrawerMenuItem.mjs";
+function y({ item: e, level: o = 0 }) {
+  const { selectedItemId: r, state: n } = D();
+  if (e.kind === "collapsable") {
+    const { id: p, text: u, icon: x, items: i } = e, h = i.some((w) => w.id === r);
+    return /* @__PURE__ */ t(
+      k,
+      {
+        selected: p === r || h,
+        text: u,
+        icon: x,
+        items: i,
+        level: o
+      }
+    );
+  }
+  if (e.kind === "header")
+    return n === "open" && /* @__PURE__ */ t(I, { role: "heading", children: e.text });
+  const { id: a, text: d, icon: c, avatar: m, label: s, bullet: l, href: f } = e;
+  return /* @__PURE__ */ t(
+    b,
+    {
+      selected: a === r,
+      text: d,
+      icon: c,
+      avatar: m,
+      label: s,
+      bullet: l,
+      href: f,
+      level: o
+    }
+  );
+}
+export {
+  y as default
+};
+//# sourceMappingURL=DrawerItem.mjs.map

package/dist/Drawerx/DrawerItem/DrawerItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerItem.mjs","sources":["../../../src/Drawerx/DrawerItem/DrawerItem.tsx"],"sourcesContent":["import type { DrawerNavigationItem } from \"../Drawer.types\";\nimport { useDrawer } from \"../DrawerContext\";\nimport DrawerSubheader from \"../DrawerSubheader\";\nimport { DrawerItemLink } from \"./DrawerItemLink\";\nimport { DrawerMenuItem } from \"./DrawerMenuItem\";\n\nexport interface DrawerItemProps {\n  /**\n   * Data to be rendered\n   */\n  item: DrawerNavigationItem;\n  /**\n   * Deep level of this item inside the submenus\n   */\n  level?: number;\n}\n\n/**\n * Component representing a drawer item in the navigation drawer.\n */\nexport default function DrawerItem({ item, level = 0 }: DrawerItemProps) {\n  const { selectedItemId, state } = useDrawer();\n  if (item.kind === \"collapsable\") {\n    const { id, text, icon, items } = item;\n    const childrenSelected = items.some((item) => item.id === selectedItemId);\n    return (\n      <DrawerMenuItem\n        selected={id === selectedItemId || childrenSelected}\n        text={text}\n        icon={icon}\n        items={items}\n        level={level}\n      />\n    );\n  }\n  if (item.kind === \"header\") {\n    return (\n      state === \"open\" && (\n        <DrawerSubheader role=\"heading\">{item.text}</DrawerSubheader>\n      )\n    );\n  }\n  const { id, text, icon, avatar, label, bullet, href } = item;\n  return (\n    <DrawerItemLink\n      selected={id === selectedItemId}\n      text={text}\n      icon={icon}\n      avatar={avatar}\n      label={label}\n      bullet={bullet}\n      href={href}\n      level={level}\n    />\n  );\n}\n"],"names":["DrawerItem","item","level","selectedItemId","state","useDrawer","id","text","icon","items","childrenSelected","jsx","DrawerMenuItem","DrawerSubheader","avatar","label","bullet","href","DrawerItemLink"],"mappings":";;;;;;;AAoBA,SAAwBA,EAAW,EAAE,MAAAC,GAAM,OAAAC,IAAQ,KAAsB;AACvE,QAAM,EAAE,gBAAAC,GAAgB,OAAAC,EAAA,IAAUC,EAAA;AAClC,MAAIJ,EAAK,SAAS,eAAe;AAC/B,UAAM,EAAE,IAAAK,GAAI,MAAAC,GAAM,MAAAC,GAAM,OAAAC,MAAUR,GAC5BS,IAAmBD,EAAM,KAAK,CAACR,MAASA,EAAK,OAAOE,CAAc;AACxE,WACE,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUN,MAAOH,KAAkBO;AAAA,QACnC,MAAMH;AAAAA,QACN,MAAMC;AAAAA,QACN,OAAAC;AAAA,QACA,OAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACA,MAAID,EAAK,SAAS;AAChB,WACEG,MAAU,UACR,gBAAAO,EAACE,KAAgB,MAAK,WAAW,YAAK,MAAK;AAIjD,QAAM,EAAE,IAAAP,GAAI,MAAAC,GAAM,MAAAC,GAAM,QAAAM,GAAQ,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,MAAShB;AACxD,SACE,gBAAAU;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,UAAUZ,MAAOH;AAAA,MACjB,MAAAI;AAAA,MACA,MAAAC;AAAA,MACA,QAAAM;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAf;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/{drawerx/drawer-item/drawer-item-link.d.ts → Drawerx/DrawerItem/DrawerItemLink.d.ts}

@@ -1,6 +1,6 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import { ReactElement } from 'react';
-import { DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel } from '../drawer.types';
+import { DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel } from '../Drawer.types';
 export interface DrawerItemLinkProps {
     /**
      * Text displayed inside the item