@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.5

package/dist/components/drawer-context/drawer-context.d.ts

@@ -0,0 +1,46 @@
+import { DrawerProviderProps, DrawerSize, DrawerState } from '../drawerx/drawer.types';
+export interface DrawerContextProps {
+    /**
+     * ID of selected item.
+     */
+    selectedItemId?: string;
+    /**
+     * Item size.
+     */
+    size: DrawerSize;
+    /**
+     * Current drawer state.
+     */
+    state: DrawerState;
+    /**
+     * Drawer width in pixels.
+     */
+    drawerWidth: number;
+    /**
+     * Whether drawer is clipped.
+     */
+    clipped: boolean;
+    /**
+     * Link component used for navigations.
+     */
+    LinkComponent?: DrawerProviderProps["LinkComponent"];
+    /**
+     * Toggle drawer state.
+     */
+    switchState(): void;
+    /**
+     * Close drawer.
+     */
+    close(): void;
+    /**
+     * Open drawer.
+     */
+    open(): void;
+    /**
+     * Set arbitrary drawer state.
+     */
+    setState: (state: DrawerState) => void;
+}
+export declare const DrawerContext: import('react').Context<DrawerContextProps | undefined>;
+export declare const UndefinedProvider: Error;
+export declare const useDrawer: () => DrawerContextProps;

package/dist/components/drawer-context/drawer-context.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=drawer-context.mjs.map

package/dist/components/drawer-context/drawer-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-context.mjs","sources":["../../../src/components/drawer-context/drawer-context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type {\n  DrawerProviderProps,\n  DrawerSize,\n  DrawerState,\n} from \"@/components/drawerx/drawer.types\";\n\nexport interface DrawerContextProps {\n  /**\n   * ID of selected item.\n   */\n  selectedItemId?: string;\n  /**\n   * Item size.\n   */\n  size: DrawerSize;\n  /**\n   * Current drawer state.\n   */\n  state: DrawerState;\n  /**\n   * Drawer width in pixels.\n   */\n  drawerWidth: number;\n  /**\n   * Whether drawer is clipped.\n   */\n  clipped: boolean;\n  /**\n   * Link component used for navigations.\n   */\n  LinkComponent?: DrawerProviderProps[\"LinkComponent\"];\n  /**\n   * Toggle drawer state.\n   */\n  switchState(): void;\n  /**\n   * Close drawer.\n   */\n  close(): void;\n  /**\n   * Open drawer.\n   */\n  open(): void;\n  /**\n   * Set arbitrary drawer state.\n   */\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":";AAkDO,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/components/drawer-context/drawer-provider.d.ts

@@ -0,0 +1,6 @@
+import { DrawerProviderProps } from '../drawerx/drawer.types';
+export declare const drawerWidth = 240;
+/**
+ * Provider for drawer state and interactions.
+ */
+export declare const DrawerProvider: ({ children, initialState, size, drawerWidth: drawerWidthProp, clipped, selectedItemId, LinkComponent, onStateChange, }: DrawerProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-context/drawer-provider.mjs

@@ -0,0 +1,41 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as w } from "react";
+import { SidebarProvider as u } from "../ui/sidebar.mjs";
+import { DrawerContext as S } from "./drawer-context.mjs";
+const f = 240, W = ({
+  children: n,
+  initialState: a,
+  size: s = "medium",
+  drawerWidth: i = f,
+  clipped: d = !0,
+  selectedItemId: p,
+  LinkComponent: c = "a",
+  onStateChange: m = () => null
+}) => {
+  const [r, l] = w(a === "open"), h = r ? "open" : "close", e = (t) => {
+    m(t ? "open" : "close"), l(t);
+  };
+  return /* @__PURE__ */ o(u, { open: r, onOpenChange: e, children: /* @__PURE__ */ o(
+    S.Provider,
+    {
+      value: {
+        state: h,
+        size: s,
+        selectedItemId: p,
+        clipped: d,
+        drawerWidth: i,
+        LinkComponent: c,
+        switchState: () => e(!r),
+        close: () => e(!1),
+        open: () => e(!0),
+        setState: (t) => e(t === "open")
+      },
+      children: n
+    }
+  ) });
+};
+export {
+  W as DrawerProvider,
+  f as drawerWidth
+};
+//# sourceMappingURL=drawer-provider.mjs.map

package/dist/components/drawer-context/drawer-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-provider.mjs","sources":["../../../src/components/drawer-context/drawer-provider.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type {\n  DrawerProviderProps,\n  DrawerState,\n} from \"@/components/drawerx/drawer.types\";\nimport { SidebarProvider } from \"@/components/ui/sidebar\";\nimport { DrawerContext } from \"./drawer-context\";\n\nexport const drawerWidth = 240;\n\n/**\n * Provider for drawer state and interactions.\n */\nexport const DrawerProvider = ({\n  children,\n  initialState,\n  size = \"medium\",\n  drawerWidth: drawerWidthProp = drawerWidth,\n  clipped = true,\n  selectedItemId,\n  LinkComponent = \"a\",\n  onStateChange = () => null,\n}: DrawerProviderProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(initialState === \"open\");\n  const state: DrawerState = isOpen ? \"open\" : \"close\";\n\n  const handleChangeState = (open: boolean) => {\n    const newState: DrawerState = open ? \"open\" : \"close\";\n    onStateChange(newState);\n    setIsOpen(open);\n  };\n\n  return (\n    <SidebarProvider open={isOpen} onOpenChange={handleChangeState}>\n      <DrawerContext.Provider\n        value={{\n          state,\n          size,\n          selectedItemId,\n          clipped,\n          drawerWidth: drawerWidthProp,\n          LinkComponent,\n          switchState: () => handleChangeState(!isOpen),\n          close: () => handleChangeState(false),\n          open: () => handleChangeState(true),\n          setState: (newState) => handleChangeState(newState === \"open\"),\n        }}\n      >\n        {children}\n      </DrawerContext.Provider>\n    </SidebarProvider>\n  );\n};\n"],"names":["drawerWidth","DrawerProvider","children","initialState","size","drawerWidthProp","clipped","selectedItemId","LinkComponent","onStateChange","isOpen","setIsOpen","useState","state","handleChangeState","open","jsx","SidebarProvider","DrawerContext","newState"],"mappings":";;;;AAQO,MAAMA,IAAc,KAKdC,IAAiB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAaC,IAAkBL;AAAA,EAC/B,SAAAM,IAAU;AAAA,EACV,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB,MAAM;AACxB,MAA2B;AACzB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAkBT,MAAiB,MAAM,GAC/DU,IAAqBH,IAAS,SAAS,SAEvCI,IAAoB,CAACC,MAAkB;AAE3C,IAAAN,EAD8BM,IAAO,SAAS,OACxB,GACtBJ,EAAUI,CAAI;AAAA,EAChB;AAEA,SACE,gBAAAC,EAACC,GAAA,EAAgB,MAAMP,GAAQ,cAAcI,GAC3C,UAAA,gBAAAE;AAAA,IAACE,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,OAAAL;AAAA,QACA,MAAAT;AAAA,QACA,gBAAAG;AAAA,QACA,SAAAD;AAAA,QACA,aAAaD;AAAA,QACb,eAAAG;AAAA,QACA,aAAa,MAAMM,EAAkB,CAACJ,CAAM;AAAA,QAC5C,OAAO,MAAMI,EAAkB,EAAK;AAAA,QACpC,MAAM,MAAMA,EAAkB,EAAI;AAAA,QAClC,UAAU,CAACK,MAAaL,EAAkBK,MAAa,MAAM;AAAA,MAAA;AAAA,MAG9D,UAAAjB;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;"}

package/dist/components/drawer-context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './drawer-context';
+export * from './drawer-provider';

package/dist/components/drawer-item/drawer-item-link.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement, ReactNode } from 'react';
+import { DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel } from '../drawerx/drawer.types';
+export interface DrawerItemLinkProps {
+    /**
+     * Text displayed inside the item.
+     */
+    text: string;
+    /**
+     * Url where the user is redirected.
+     */
+    href: string;
+    /**
+     * Icon displayed to the left.
+     */
+    icon?: ReactElement;
+    /**
+     * Avatar displayed to the left.
+     */
+    avatar?: DrawerItemAvatar;
+    /**
+     * Label shown at the right.
+     */
+    label?: DrawerItemLabel;
+    /**
+     * Bullet shown at the right.
+     */
+    bullet?: DrawerItemBullet;
+    /**
+     * Selected state.
+     */
+    selected?: boolean;
+    /**
+     * Item nesting level.
+     */
+    level: number;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+    /**
+     * Optional action element displayed alongside the item.
+     */
+    action?: ReactNode;
+}
+/**
+ * Clickable drawer link item.
+ */
+export declare const DrawerItemLink: ({ text, icon, avatar, label, bullet, href, selected, level, className, action, }: DrawerItemLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-item/drawer-item-link.mjs

@@ -0,0 +1,80 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { Badge as f } from "../badge/badge.mjs";
+import { Bullet as h } from "../bullet/bullet.mjs";
+import { useDrawer as j } from "../drawer-context/drawer-context.mjs";
+import "react";
+import { SidebarMenuSubItem as z, SidebarMenuSubButton as B, SidebarMenuItem as M, SidebarMenuButton as b } from "../ui/sidebar.mjs";
+import { cn as v } from "../../lib/utils.mjs";
+const T = ({
+  text: e,
+  icon: a,
+  avatar: n,
+  label: i,
+  bullet: t,
+  href: o,
+  selected: c,
+  level: S,
+  className: u,
+  action: w
+}) => {
+  const { state: N, size: s, LinkComponent: g } = j(), d = g ?? "a", m = N === "close", p = s === "small" ? "sm" : "default";
+  return S > 0 ? /* @__PURE__ */ r(z, { children: /* @__PURE__ */ l(
+    B,
+    {
+      render: /* @__PURE__ */ r(d, { href: o, "aria-label": e }),
+      isActive: c,
+      className: u,
+      size: p === "sm" ? "sm" : "md",
+      children: [
+        a,
+        n ? /* @__PURE__ */ r(
+          "img",
+          {
+            alt: n.alt,
+            src: n.src,
+            className: v(
+              "rounded-full object-cover",
+              s === "small" ? "h-5 w-5" : "h-6 w-6"
+            )
+          }
+        ) : null,
+        /* @__PURE__ */ r("span", { children: e }),
+        i ? /* @__PURE__ */ r(f, { text: i.text, variant: i.variant, className: "ml-2" }) : null,
+        t ? /* @__PURE__ */ r(h, { variant: t.variant, className: "ml-2" }) : null
+      ]
+    }
+  ) }) : /* @__PURE__ */ l(M, { children: [
+    /* @__PURE__ */ l(
+      b,
+      {
+        render: /* @__PURE__ */ r(d, { href: o, "aria-label": e }),
+        isActive: c,
+        tooltip: e,
+        size: p,
+        className: u,
+        children: [
+          a,
+          n ? /* @__PURE__ */ r(
+            "img",
+            {
+              alt: n.alt,
+              src: n.src,
+              className: v(
+                "rounded-full object-cover",
+                s === "small" ? "h-6 w-6" : "h-7 w-7"
+              )
+            }
+          ) : null,
+          m ? null : /* @__PURE__ */ r("span", { children: e }),
+          !m && i ? /* @__PURE__ */ r(f, { text: i.text, variant: i.variant, className: "ml-2" }) : null,
+          !m && t ? /* @__PURE__ */ r(h, { variant: t.variant, className: "ml-2" }) : null
+        ]
+      }
+    ),
+    w
+  ] });
+};
+export {
+  T as DrawerItemLink
+};
+//# sourceMappingURL=drawer-item-link.mjs.map

package/dist/components/drawer-item/drawer-item-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item-link.mjs","sources":["../../../src/components/drawer-item/drawer-item-link.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport Badge from \"@/components/badge\";\nimport Bullet from \"@/components/bullet\";\nimport { useDrawer } from \"@/components/drawer-context\";\nimport type {\n  DrawerItemAvatar,\n  DrawerItemBullet,\n  DrawerItemLabel,\n} from \"@/components/drawerx/drawer.types\";\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DrawerItemLinkProps {\n  /**\n   * Text displayed inside the item.\n   */\n  text: string;\n  /**\n   * Url where the user is redirected.\n   */\n  href: string;\n  /**\n   * Icon displayed to the left.\n   */\n  icon?: ReactElement;\n  /**\n   * Avatar displayed to the left.\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Label shown at the right.\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Bullet shown at the right.\n   */\n  bullet?: DrawerItemBullet;\n  /**\n   * Selected state.\n   */\n  selected?: boolean;\n  /**\n   * Item nesting level.\n   */\n  level: number;\n  /**\n   * Additional classes.\n   */\n  className?: string;\n  /**\n   * Optional action element displayed alongside the item.\n   */\n  action?: ReactNode;\n}\n\n/**\n * Clickable drawer link item.\n */\nexport const DrawerItemLink = ({\n  text,\n  icon,\n  avatar,\n  label,\n  bullet,\n  href,\n  selected,\n  level,\n  className,\n  action,\n}: DrawerItemLinkProps) => {\n  const { state, size, LinkComponent } = useDrawer();\n  const LinkTag = (LinkComponent ?? \"a\") as any;\n  const mini = state === \"close\";\n  const buttonSize = size === \"small\" ? \"sm\" : \"default\";\n\n  if (level > 0) {\n    return (\n      <SidebarMenuSubItem>\n        <SidebarMenuSubButton\n          render={<LinkTag href={href} aria-label={text} />}\n          isActive={selected}\n          className={className}\n          size={buttonSize === \"sm\" ? \"sm\" : \"md\"}\n        >\n          {icon}\n          {avatar ? (\n            <img\n              alt={avatar.alt}\n              src={avatar.src}\n              className={cn(\n                \"rounded-full object-cover\",\n                size === \"small\" ? \"h-5 w-5\" : \"h-6 w-6\",\n              )}\n            />\n          ) : null}\n          <span>{text}</span>\n          {label ? (\n            <Badge text={label.text} variant={label.variant} className=\"ml-2\" />\n          ) : null}\n          {bullet ? <Bullet variant={bullet.variant} className=\"ml-2\" /> : null}\n        </SidebarMenuSubButton>\n      </SidebarMenuSubItem>\n    );\n  }\n\n  return (\n    <SidebarMenuItem>\n      <SidebarMenuButton\n        render={<LinkTag href={href} aria-label={text} />}\n        isActive={selected}\n        tooltip={text}\n        size={buttonSize}\n        className={className}\n      >\n        {icon}\n        {avatar ? (\n          <img\n            alt={avatar.alt}\n            src={avatar.src}\n            className={cn(\n              \"rounded-full object-cover\",\n              size === \"small\" ? \"h-6 w-6\" : \"h-7 w-7\",\n            )}\n          />\n        ) : null}\n        {!mini ? <span>{text}</span> : null}\n        {!mini && label ? (\n          <Badge text={label.text} variant={label.variant} className=\"ml-2\" />\n        ) : null}\n        {!mini && bullet ? (\n          <Bullet variant={bullet.variant} className=\"ml-2\" />\n        ) : null}\n      </SidebarMenuButton>\n      {action}\n    </SidebarMenuItem>\n  );\n};\n"],"names":["DrawerItemLink","text","icon","avatar","label","bullet","href","selected","level","className","action","state","size","LinkComponent","useDrawer","LinkTag","mini","buttonSize","SidebarMenuSubItem","jsxs","SidebarMenuSubButton","jsx","cn","Badge","Bullet","SidebarMenuItem","SidebarMenuButton"],"mappings":";;;;;;;AA+DO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AACF,MAA2B;AACzB,QAAM,EAAE,OAAAC,GAAO,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA,GACjCC,IAAWF,KAAiB,KAC5BG,IAAOL,MAAU,SACjBM,IAAaL,MAAS,UAAU,OAAO;AAE7C,SAAIJ,IAAQ,sBAEPU,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ,gBAAAC,EAACN,GAAA,EAAQ,MAAAT,GAAY,cAAYL,GAAM;AAAA,MAC/C,UAAUM;AAAA,MACV,WAAAE;AAAA,MACA,MAAMQ,MAAe,OAAO,OAAO;AAAA,MAElC,UAAA;AAAA,QAAAf;AAAA,QACAC,IACC,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKlB,EAAO;AAAA,YACZ,KAAKA,EAAO;AAAA,YACZ,WAAWmB;AAAA,cACT;AAAA,cACAV,MAAS,UAAU,YAAY;AAAA,YAAA;AAAA,UACjC;AAAA,QAAA,IAEA;AAAA,QACJ,gBAAAS,EAAC,UAAM,UAAApB,EAAA,CAAK;AAAA,QACXG,IACC,gBAAAiB,EAACE,GAAA,EAAM,MAAMnB,EAAM,MAAM,SAASA,EAAM,SAAS,WAAU,OAAA,CAAO,IAChE;AAAA,QACHC,sBAAUmB,GAAA,EAAO,SAASnB,EAAO,SAAS,WAAU,QAAO,IAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAErE,sBAKDoB,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN;AAAA,MAACO;AAAA,MAAA;AAAA,QACC,QAAQ,gBAAAL,EAACN,GAAA,EAAQ,MAAAT,GAAY,cAAYL,GAAM;AAAA,QAC/C,UAAUM;AAAA,QACV,SAASN;AAAA,QACT,MAAMgB;AAAA,QACN,WAAAR;AAAA,QAEC,UAAA;AAAA,UAAAP;AAAA,UACAC,IACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAKlB,EAAO;AAAA,cACZ,KAAKA,EAAO;AAAA,cACZ,WAAWmB;AAAA,gBACT;AAAA,gBACAV,MAAS,UAAU,YAAY;AAAA,cAAA;AAAA,YACjC;AAAA,UAAA,IAEA;AAAA,UACFI,IAA6B,OAAtB,gBAAAK,EAAC,QAAA,EAAM,aAAK;AAAA,UACpB,CAACL,KAAQZ,IACR,gBAAAiB,EAACE,GAAA,EAAM,MAAMnB,EAAM,MAAM,SAASA,EAAM,SAAS,WAAU,QAAO,IAChE;AAAA,UACH,CAACY,KAAQX,IACR,gBAAAgB,EAACG,GAAA,EAAO,SAASnB,EAAO,SAAS,WAAU,OAAA,CAAO,IAChD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAELK;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/drawer-item/drawer-item.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { DrawerNavigationItem } from '../drawerx/drawer.types';
+export interface DrawerItemProps {
+    /**
+     * Data to render.
+     */
+    item: DrawerNavigationItem;
+    /**
+     * Nesting level inside submenus.
+     */
+    level?: number;
+    /**
+     * Optional action element displayed alongside the item.
+     */
+    action?: ReactNode;
+}
+/**
+ * Drawer navigation item renderer.
+ */
+export default function DrawerItem({ item, level, action, }: DrawerItemProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/drawer-item/drawer-item.mjs

@@ -0,0 +1,49 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useDrawer as D } from "../drawer-context/drawer-context.mjs";
+import "react";
+import { SidebarGroupLabel as I } from "../ui/sidebar.mjs";
+import { DrawerItemLink as L } from "./drawer-item-link.mjs";
+import { DrawerMenuItem as S } from "./drawer-menu-item.mjs";
+function A({
+  item: e,
+  level: i = 0,
+  action: n
+}) {
+  const { selectedItemId: r, state: d } = D();
+  if (e.kind === "collapsable") {
+    const { id: x, text: b, icon: h, items: l } = e, k = l.some((t) => t.kind === "collapsable" ? t.items.some(
+      (w) => w.id === r
+    ) : t.id === r);
+    return /* @__PURE__ */ o(
+      S,
+      {
+        selected: x === r || k,
+        text: b,
+        icon: h,
+        items: l,
+        level: i
+      }
+    );
+  }
+  if (e.kind === "header")
+    return d === "open" ? /* @__PURE__ */ o(I, { role: "heading", "aria-level": 2, children: e.text }) : null;
+  const { id: a, text: c, icon: s, avatar: m, label: u, bullet: f, href: p } = e;
+  return /* @__PURE__ */ o(
+    L,
+    {
+      selected: a === r,
+      text: c,
+      icon: s,
+      avatar: m,
+      label: u,
+      bullet: f,
+      href: p,
+      level: i,
+      action: n
+    }
+  );
+}
+export {
+  A as default
+};
+//# sourceMappingURL=drawer-item.mjs.map

package/dist/components/drawer-item/drawer-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-item.mjs","sources":["../../../src/components/drawer-item/drawer-item.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useDrawer } from \"@/components/drawer-context\";\nimport type { DrawerNavigationItem } from \"@/components/drawerx/drawer.types\";\nimport { SidebarGroupLabel } from \"@/components/ui/sidebar\";\nimport { DrawerItemLink } from \"./drawer-item-link\";\nimport { DrawerMenuItem } from \"./drawer-menu-item\";\n\nexport interface DrawerItemProps {\n  /**\n   * Data to render.\n   */\n  item: DrawerNavigationItem;\n  /**\n   * Nesting level inside submenus.\n   */\n  level?: number;\n  /**\n   * Optional action element displayed alongside the item.\n   */\n  action?: ReactNode;\n}\n\n/**\n * Drawer navigation item renderer.\n */\nexport default function DrawerItem({\n  item,\n  level = 0,\n  action,\n}: DrawerItemProps) {\n  const { selectedItemId, state } = useDrawer();\n  if (item.kind === \"collapsable\") {\n    const { id, text, icon, items } = item;\n    const childrenSelected = items.some((navigationItem) => {\n      if (navigationItem.kind === \"collapsable\") {\n        return navigationItem.items.some(\n          (nestedItem) => nestedItem.id === selectedItemId,\n        );\n      }\n\n      return navigationItem.id === selectedItemId;\n    });\n\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\n  if (item.kind === \"header\") {\n    return state === \"open\" ? (\n      <SidebarGroupLabel role=\"heading\" aria-level={2}>\n        {item.text}\n      </SidebarGroupLabel>\n    ) : null;\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      action={action}\n    />\n  );\n}\n"],"names":["DrawerItem","item","level","action","selectedItemId","state","useDrawer","id","text","icon","items","childrenSelected","navigationItem","nestedItem","jsx","DrawerMenuItem","SidebarGroupLabel","avatar","label","bullet","href","DrawerItemLink"],"mappings":";;;;;;AAyBA,SAAwBA,EAAW;AAAA,EACjC,MAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,QAAAC;AACF,GAAoB;AAClB,QAAM,EAAE,gBAAAC,GAAgB,OAAAC,EAAA,IAAUC,EAAA;AAClC,MAAIL,EAAK,SAAS,eAAe;AAC/B,UAAM,EAAE,IAAAM,GAAI,MAAAC,GAAM,MAAAC,GAAM,OAAAC,MAAUT,GAC5BU,IAAmBD,EAAM,KAAK,CAACE,MAC/BA,EAAe,SAAS,gBACnBA,EAAe,MAAM;AAAA,MAC1B,CAACC,MAAeA,EAAW,OAAOT;AAAA,IAAA,IAI/BQ,EAAe,OAAOR,CAC9B;AAED,WACE,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAUR,MAAOH,KAAkBO;AAAA,QACnC,MAAMH;AAAAA,QACN,MAAMC;AAAAA,QACN,OAAAC;AAAA,QACA,OAAAR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AAEA,MAAID,EAAK,SAAS;AAChB,WAAOI,MAAU,SACf,gBAAAS,EAACE,GAAA,EAAkB,MAAK,WAAU,cAAY,GAC3C,UAAAf,EAAK,KAAA,CACR,IACE;AAGN,QAAM,EAAE,IAAAM,GAAI,MAAAC,GAAM,MAAAC,GAAM,QAAAQ,GAAQ,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,MAASnB;AACxD,SACE,gBAAAa;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,UAAUd,MAAOH;AAAA,MACjB,MAAAI;AAAA,MACA,MAAAC;AAAA,MACA,QAAAQ;AAAA,MACA,OAAAC;AAAA,MACA,QAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAlB;AAAA,MACA,QAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/drawer-item/drawer-menu-item.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react';
+import { DrawerNavigationItem } from '../drawerx/drawer.types';
+export interface DrawerMenuItemProps {
+    /**
+     * Text displayed inside the item.
+     */
+    text: string;
+    /**
+     * Icon displayed to the left.
+     */
+    icon?: ReactElement;
+    /**
+     * Selected state.
+     */
+    selected?: boolean;
+    /**
+     * Nested items rendered inside submenu.
+     */
+    items: DrawerNavigationItem[];
+    /**
+     * Item nesting level.
+     */
+    level: number;
+    /**
+     * Additional classes.
+     */
+    className?: string;
+}
+/**
+ * Collapsible drawer menu item.
+ */
+export declare const DrawerMenuItem: ({ text, icon, selected, items, level, className, }: DrawerMenuItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/drawer-item/drawer-menu-item.mjs

@@ -0,0 +1,156 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useState as b, useEffect as B, useMemo as x } from "react";
+import { Badge as A } from "../badge/badge.mjs";
+import { Bullet as T } from "../bullet/bullet.mjs";
+import { useDrawer as j } from "../drawer-context/drawer-context.mjs";
+import { SidebarMenuSub as k, SidebarMenuItem as f, SidebarMenuButton as g, SidebarMenuSubItem as y, SidebarMenuSubButton as E } from "../ui/sidebar.mjs";
+import { Collapsible as R, CollapsibleTrigger as v, CollapsibleContent as w } from "../ui/collapsible.mjs";
+import { DropdownMenu as $, DropdownMenuTrigger as L, DropdownMenuContent as q, DropdownMenuSub as F, DropdownMenuSubTrigger as G, DropdownMenuSubContent as H, DropdownMenuItem as J } from "../ui/dropdown-menu.mjs";
+import K from "./drawer-item.mjs";
+import M from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.mjs";
+import C from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.mjs";
+const D = (n, l, o) => n.filter((r) => r.kind !== "header").map((r) => {
+  if (r.kind === "collapsable")
+    return /* @__PURE__ */ a(F, { children: [
+      /* @__PURE__ */ a(G, { children: [
+        r.icon,
+        /* @__PURE__ */ e("span", { children: r.text })
+      ] }),
+      /* @__PURE__ */ e(H, { children: D(r.items, l, o) })
+    ] }, r.id);
+  const i = o ?? "a", t = r.id === l;
+  return /* @__PURE__ */ e(
+    J,
+    {
+      className: t ? "font-medium text-primary" : void 0,
+      children: /* @__PURE__ */ a(i, { href: r.href, className: "flex w-full items-center gap-2", children: [
+        r.icon,
+        r.avatar ? /* @__PURE__ */ e(
+          "img",
+          {
+            alt: r.avatar.alt,
+            src: r.avatar.src,
+            className: "h-5 w-5 rounded-full object-cover"
+          }
+        ) : null,
+        /* @__PURE__ */ e("span", { children: r.text }),
+        r.label ? /* @__PURE__ */ e(
+          A,
+          {
+            text: r.label.text,
+            variant: r.label.variant,
+            className: "ml-auto"
+          }
+        ) : null,
+        r.bullet ? /* @__PURE__ */ e(T, { variant: r.bullet.variant, className: "ml-auto" }) : null
+      ] })
+    },
+    r.id
+  );
+}), ne = ({
+  text: n,
+  icon: l,
+  selected: o,
+  items: r,
+  level: i,
+  className: t
+}) => {
+  const { state: S, size: I, selectedItemId: N, LinkComponent: O } = j(), s = S === "close", [d, c] = b(
+    () => !!o
+  ), [z, p] = b(!1);
+  B(() => {
+    if (s) {
+      p(!1);
+      return;
+    }
+    o && c(!0);
+  }, [s, o]);
+  const u = I === "small" ? "sm" : "default", m = x(
+    () => /* @__PURE__ */ e(k, { children: r.map((h) => /* @__PURE__ */ e(K, { level: i + 1, item: h }, h.id)) }),
+    [r, i]
+  );
+  return s && i === 0 ? /* @__PURE__ */ e(f, { className: t, children: /* @__PURE__ */ a($, { open: z, onOpenChange: p, children: [
+    /* @__PURE__ */ a(
+      L,
+      {
+        render: /* @__PURE__ */ e(
+          g,
+          {
+            tooltip: n,
+            size: u,
+            isActive: o
+          }
+        ),
+        children: [
+          l,
+          /* @__PURE__ */ e("span", { className: "sr-only", children: n })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(q, { side: "right", align: "start", className: "w-56", children: /* @__PURE__ */ e("div", { role: "region", "aria-label": `${n} popover submenu`, children: D(r, N, O) }) })
+  ] }) }) : /* @__PURE__ */ e(
+    R,
+    {
+      open: d,
+      className: "group/collapsible",
+      onOpenChange: c,
+      children: i > 0 ? /* @__PURE__ */ a(y, { className: t, children: [
+        /* @__PURE__ */ a(
+          v,
+          {
+            render: /* @__PURE__ */ e(
+              E,
+              {
+                render: /* @__PURE__ */ e("button", { type: "button" }),
+                size: u === "sm" ? "sm" : "md",
+                isActive: o
+              }
+            ),
+            children: [
+              l,
+              /* @__PURE__ */ e("span", { children: n }),
+              d ? /* @__PURE__ */ e(M, { "data-testid": "ExpandMoreIcon", className: "ml-auto" }) : /* @__PURE__ */ e(
+                C,
+                {
+                  "data-testid": "ChevronRightIcon",
+                  className: "ml-auto"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { role: "region", "aria-label": `${n} collapse submenu`, children: m }) })
+      ] }) : /* @__PURE__ */ a(f, { className: t, children: [
+        /* @__PURE__ */ a(
+          v,
+          {
+            render: /* @__PURE__ */ e(
+              g,
+              {
+                tooltip: n,
+                size: u,
+                isActive: o
+              }
+            ),
+            children: [
+              l,
+              s ? null : /* @__PURE__ */ e("span", { children: n }),
+              s ? null : d ? /* @__PURE__ */ e(M, { "data-testid": "ExpandMoreIcon", className: "ml-auto" }) : /* @__PURE__ */ e(
+                C,
+                {
+                  "data-testid": "ChevronRightIcon",
+                  className: "ml-auto"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e("div", { role: "region", "aria-label": `${n} collapse submenu`, children: m }) })
+      ] })
+    }
+  );
+};
+export {
+  ne as DrawerMenuItem
+};
+//# sourceMappingURL=drawer-menu-item.mjs.map

package/dist/components/drawer-item/drawer-menu-item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer-menu-item.mjs","sources":["../../../src/components/drawer-item/drawer-menu-item.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from \"lucide-react\";\nimport { type ReactElement, useEffect, useMemo, useState } from \"react\";\nimport Badge from \"@/components/badge\";\nimport Bullet from \"@/components/bullet\";\nimport { useDrawer } from \"@/components/drawer-context\";\nimport type { DrawerNavigationItem } from \"@/components/drawerx/drawer.types\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/components/ui/sidebar\";\nimport DrawerItem from \"./drawer-item\";\n\nexport interface DrawerMenuItemProps {\n  /**\n   * Text displayed inside the item.\n   */\n  text: string;\n  /**\n   * Icon displayed to the left.\n   */\n  icon?: ReactElement;\n  /**\n   * Selected state.\n   */\n  selected?: boolean;\n  /**\n   * Nested items rendered inside submenu.\n   */\n  items: DrawerNavigationItem[];\n  /**\n   * Item nesting level.\n   */\n  level: number;\n  /**\n   * Additional classes.\n   */\n  className?: string;\n}\n\nconst renderDropdownItems = (\n  items: DrawerNavigationItem[],\n  selectedItemId?: string,\n  LinkComponent?: React.ComponentType<any> | string,\n) =>\n  items\n    .filter((item) => item.kind !== \"header\")\n    .map((item) => {\n      if (item.kind === \"collapsable\") {\n        return (\n          <DropdownMenuSub key={item.id}>\n            <DropdownMenuSubTrigger>\n              {item.icon}\n              <span>{item.text}</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              {renderDropdownItems(item.items, selectedItemId, LinkComponent)}\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        );\n      }\n\n      const LinkTag = (LinkComponent ?? \"a\") as any;\n      const isActive = item.id === selectedItemId;\n\n      return (\n        <DropdownMenuItem\n          key={item.id}\n          className={isActive ? \"font-medium text-primary\" : undefined}\n        >\n          <LinkTag href={item.href} className=\"flex w-full items-center gap-2\">\n            {item.icon}\n            {item.avatar ? (\n              <img\n                alt={item.avatar.alt}\n                src={item.avatar.src}\n                className=\"h-5 w-5 rounded-full object-cover\"\n              />\n            ) : null}\n            <span>{item.text}</span>\n            {item.label ? (\n              <Badge\n                text={item.label.text}\n                variant={item.label.variant}\n                className=\"ml-auto\"\n              />\n            ) : null}\n            {item.bullet ? (\n              <Bullet variant={item.bullet.variant} className=\"ml-auto\" />\n            ) : null}\n          </LinkTag>\n        </DropdownMenuItem>\n      );\n    });\n\n/**\n * Collapsible drawer menu item.\n */\nexport const DrawerMenuItem = ({\n  text,\n  icon,\n  selected,\n  items,\n  level,\n  className,\n}: DrawerMenuItemProps) => {\n  const { state, size, selectedItemId, LinkComponent } = useDrawer();\n  const mini = state === \"close\";\n  const [collapsibleOpen, setCollapsibleOpen] = useState(() =>\n    Boolean(selected),\n  );\n  const [dropdownOpen, setDropdownOpen] = useState(false);\n\n  useEffect(() => {\n    if (mini) {\n      setDropdownOpen(false);\n      return;\n    }\n\n    if (selected) {\n      setCollapsibleOpen(true);\n    }\n  }, [mini, selected]);\n  const buttonSize = size === \"small\" ? \"sm\" : \"default\";\n\n  const submenu = useMemo(\n    () => (\n      <SidebarMenuSub>\n        {items.map((item) => (\n          <DrawerItem key={item.id} level={level + 1} item={item} />\n        ))}\n      </SidebarMenuSub>\n    ),\n    [items, level],\n  );\n\n  if (mini && level === 0) {\n    return (\n      <SidebarMenuItem className={className}>\n        <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                tooltip={text}\n                size={buttonSize}\n                isActive={selected}\n              />\n            }\n          >\n            {icon}\n            <span className=\"sr-only\">{text}</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent side=\"right\" align=\"start\" className=\"w-56\">\n            <div role=\"region\" aria-label={`${text} popover submenu`}>\n              {renderDropdownItems(items, selectedItemId, LinkComponent)}\n            </div>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    );\n  }\n\n  return (\n    <Collapsible\n      open={collapsibleOpen}\n      className=\"group/collapsible\"\n      onOpenChange={setCollapsibleOpen}\n    >\n      {level > 0 ? (\n        <SidebarMenuSubItem className={className}>\n          <CollapsibleTrigger\n            render={\n              <SidebarMenuSubButton\n                render={<button type=\"button\" />}\n                size={buttonSize === \"sm\" ? \"sm\" : \"md\"}\n                isActive={selected}\n              />\n            }\n          >\n            {icon}\n            <span>{text}</span>\n            {collapsibleOpen ? (\n              <ChevronDown data-testid=\"ExpandMoreIcon\" className=\"ml-auto\" />\n            ) : (\n              <ChevronRight\n                data-testid=\"ChevronRightIcon\"\n                className=\"ml-auto\"\n              />\n            )}\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <div role=\"region\" aria-label={`${text} collapse submenu`}>\n              {submenu}\n            </div>\n          </CollapsibleContent>\n        </SidebarMenuSubItem>\n      ) : (\n        <SidebarMenuItem className={className}>\n          <CollapsibleTrigger\n            render={\n              <SidebarMenuButton\n                tooltip={text}\n                size={buttonSize}\n                isActive={selected}\n              />\n            }\n          >\n            {icon}\n            {!mini ? <span>{text}</span> : null}\n            {!mini ? (\n              collapsibleOpen ? (\n                <ChevronDown data-testid=\"ExpandMoreIcon\" className=\"ml-auto\" />\n              ) : (\n                <ChevronRight\n                  data-testid=\"ChevronRightIcon\"\n                  className=\"ml-auto\"\n                />\n              )\n            ) : null}\n          </CollapsibleTrigger>\n          <CollapsibleContent>\n            <div role=\"region\" aria-label={`${text} collapse submenu`}>\n              {submenu}\n            </div>\n          </CollapsibleContent>\n        </SidebarMenuItem>\n      )}\n    </Collapsible>\n  );\n};\n"],"names":["renderDropdownItems","items","selectedItemId","LinkComponent","item","DropdownMenuSub","jsxs","DropdownMenuSubTrigger","jsx","DropdownMenuSubContent","LinkTag","isActive","DropdownMenuItem","Badge","Bullet","DrawerMenuItem","text","icon","selected","level","className","state","size","useDrawer","mini","collapsibleOpen","setCollapsibleOpen","useState","dropdownOpen","setDropdownOpen","useEffect","buttonSize","submenu","useMemo","SidebarMenuSub","DrawerItem","SidebarMenuItem","DropdownMenu","DropdownMenuTrigger","SidebarMenuButton","DropdownMenuContent","Collapsible","SidebarMenuSubItem","CollapsibleTrigger","SidebarMenuSubButton","ChevronDown","ChevronRight","CollapsibleContent"],"mappings":"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"}

package/dist/components/drawer-item/index.d.ts

@@ -0,0 +1,4 @@
+export type { DrawerItemProps } from './drawer-item';
+export { default, default as DrawerItem } from './drawer-item';
+export * from './drawer-item-link';
+export * from './drawer-menu-item';

package/dist/components/drawer-layout/drawer-layout.d.ts

@@ -0,0 +1,62 @@
+import { JSXElementConstructor } from 'react';
+import { DrawerAppBarProps } from '../drawer-app-bar';
+import { DrawerContentProps, DrawerNavigation, DrawerProps, DrawerProviderProps } from '../drawerx/drawer.types';
+/**
+ * Slots for DrawerLayout.
+ */
+export interface DrawerLayoutSlots {
+    /**
+     * Slot for DrawerAppBar.
+     */
+    drawerAppBar?: JSXElementConstructor<DrawerAppBarProps>;
+    /**
+     * Slot for Drawer.
+     */
+    drawer?: JSXElementConstructor<DrawerProps>;
+    /**
+     * Slot for DrawerContent.
+     */
+    drawerContent?: JSXElementConstructor<DrawerContentProps>;
+}
+/**
+ * Slot props for DrawerLayout.
+ */
+export interface DrawerLayoutSlotProps {
+    /**
+     * Props for DrawerAppBar slot.
+     */
+    drawerAppBar?: DrawerAppBarProps;
+    /**
+     * Props for Drawer slot.
+     */
+    drawer?: DrawerProps;
+    /**
+     * Props for DrawerContent slot.
+     */
+    drawerContent?: DrawerContentProps;
+}
+/**
+ * Props for DrawerLayout.
+ */
+export interface DrawerLayoutProps extends DrawerProviderProps {
+    /**
+     * Title of the drawer layout.
+     */
+    title: string;
+    /**
+     * Navigation tree.
+     */
+    navigation: DrawerNavigation;
+    /**
+     * Optional slots.
+     */
+    slots?: DrawerLayoutSlots;
+    /**
+     * Optional slot props.
+     */
+    slotsProps?: DrawerLayoutSlotProps;
+}
+/**
+ * Layout structure with drawer and app bar.
+ */
+export default function DrawerLayout({ children, navigation, title, slots, slotsProps, ...rest }: DrawerLayoutProps): import("react/jsx-runtime").JSX.Element;