@timmbr/ui 1.0.0-beta → 1.1.0

package/dist/components/SideBarNavigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarBranding.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SidebarBrandingConfig } from '../SideBarNavigation.types';
+export interface SidebarBrandingProps {
+    branding?: SidebarBrandingConfig;
+    collapsed: boolean;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarBranding: React.FC<SidebarBrandingProps>;
+//# sourceMappingURL=SidebarBranding.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarBranding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarBranding.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarBranding.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGxE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAuE1D,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarBranding.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion, sidebarContentFadeVariants } from '@timmbr/motion';
+import { cn } from '@timmbr/utils';
+import { useSidebarContext } from '../SideBarNavigation.context.js';
+
+const SidebarBranding = ({
+  branding,
+  collapsed,
+  linkComponent: LinkComponent
+}) => {
+  const { shouldAnimate } = useSidebarContext();
+  const defaultPlaceholder = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "sidebar-logo-placeholder",
+      className: "size-8 rounded-lg border border-grey-300 bg-grey-100 flex items-center justify-center shrink-0 text-grey-400 text-xs font-semibold",
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Logo" })
+    }
+  );
+  const activeLogo = collapsed ? branding?.collapsedLogo || branding?.logo || defaultPlaceholder : branding?.logo || defaultPlaceholder;
+  const content = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center overflow-hidden transition-all duration-200",
+        collapsed ? "justify-center py-4 px-2" : "gap-3 px-4 pt-4 pb-2.5"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 flex items-center justify-center", children: activeLogo }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: shouldAnimate ? "hidden" : false,
+            animate: shouldAnimate ? "visible" : void 0,
+            exit: shouldAnimate ? "exit" : void 0,
+            variants: shouldAnimate ? sidebarContentFadeVariants : void 0,
+            className: "flex flex-col min-w-0 overflow-hidden whitespace-nowrap",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "font-sans font-bold text-base text-grey-900 truncate tracking-tight", children: branding?.title || "Timmbr Console" }),
+              branding?.subtitle && /* @__PURE__ */ jsx("span", { className: "font-sans text-xs text-grey-500 truncate", children: branding.subtitle })
+            ]
+          },
+          "sidebar-branding-text"
+        ) })
+      ]
+    }
+  );
+  if (branding?.href) {
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsx(LinkComponent, { href: branding.href, className: "block focus-visible:outline-none", children: content });
+    }
+    return /* @__PURE__ */ jsx("a", { href: branding.href, className: "block focus-visible:outline-none", children: content });
+  }
+  return content;
+};
+
+export { SidebarBranding };

package/dist/components/SideBarNavigation/subcomponents/SidebarFooter.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface SidebarFooterProps {
+    footer?: React.ReactNode | ((props: {
+        collapsed: boolean;
+    }) => React.ReactNode);
+    collapsed: boolean;
+    className?: string;
+}
+export declare const SidebarFooter: React.FC<SidebarFooterProps>;
+//# sourceMappingURL=SidebarFooter.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarFooter.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarFooter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAChF,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBtD,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarFooter.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+
+const SidebarFooter = ({
+  footer,
+  collapsed,
+  className
+}) => {
+  if (!footer) return null;
+  const content = typeof footer === "function" ? footer({ collapsed }) : footer;
+  if (!content) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "sidebar-footer",
+      className: cn(
+        "mt-auto border-t border-grey-100 bg-white shrink-0 overflow-hidden",
+        collapsed ? "p-2 flex flex-col items-center gap-1" : "p-3",
+        className
+      ),
+      children: content
+    }
+  );
+};
+
+export { SidebarFooter };

package/dist/components/SideBarNavigation/subcomponents/SidebarNavItem.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { NavItem } from '../SideBarNavigation.types';
+export interface SidebarNavItemProps {
+    item: NavItem;
+    collapsed: boolean;
+    activePath?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarNavItem: React.FC<SidebarNavItemProps>;
+//# sourceMappingURL=SidebarNavItem.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarNavItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavItem.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarNavItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAO1D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+KxD,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarNavItem.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { ChevronDown } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { AnimatePresence, motion, sidebarAccordionVariants } from '@timmbr/motion';
+import { isNavItemActive, isRouteActive } from '../SideBarNavigation.helpers.js';
+import { navBadgeVariants, navItemVariants } from '../SideBarNavigation.styles.js';
+import { useSidebarContext } from '../SideBarNavigation.context.js';
+import { SidebarSubItem } from './SidebarSubItem.js';
+import { SidebarPopoverMenu } from './SidebarPopoverMenu.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+
+const SidebarNavItem = ({
+  item,
+  collapsed,
+  activePath,
+  linkComponent: LinkComponent
+}) => {
+  const { shouldAnimate } = useSidebarContext();
+  const hasSubItems = Boolean(item.items && item.items.length > 0);
+  const isActive = isNavItemActive(item, activePath);
+  const isDirectActive = isRouteActive(item.href, activePath);
+  const [userExpanded, setUserExpanded] = React.useState(null);
+  const isExpanded = userExpanded !== null ? userExpanded : isActive;
+  if (collapsed) {
+    if (hasSubItems) {
+      return /* @__PURE__ */ jsx(
+        SidebarPopoverMenu,
+        {
+          item,
+          activePath,
+          linkComponent: LinkComponent
+        }
+      );
+    }
+    const collapsedButton = /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled: item.disabled,
+        className: navItemVariants({ active: isDirectActive, collapsed: true }),
+        "aria-label": item.label,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "size-5 flex items-center justify-center shrink-0", children: item.icon }),
+          item.badge !== void 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: navBadgeVariants({
+                variant: item.badgeVariant,
+                collapsed: true
+              }),
+              children: item.badge
+            }
+          )
+        ]
+      }
+    );
+    const buttonWithLink = item.href ? LinkComponent ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: "block w-full", children: collapsedButton }) : /* @__PURE__ */ jsx("a", { href: item.href, className: "block w-full", children: collapsedButton }) : collapsedButton;
+    return /* @__PURE__ */ jsx(Tooltip, { content: item.label, side: "right", children: buttonWithLink });
+  }
+  if (hasSubItems) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setUserExpanded(!isExpanded),
+          disabled: item.disabled,
+          className: navItemVariants({
+            active: isActive && !isExpanded,
+            collapsed: false
+          }),
+          "aria-expanded": isExpanded,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-5 flex items-center justify-center shrink-0", children: item.icon }),
+            /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-left", children: item.label }),
+            item.badge !== void 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: navBadgeVariants({
+                  variant: item.badgeVariant,
+                  collapsed: false
+                }),
+                children: item.badge
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "size-4 shrink-0 text-current opacity-70",
+                  shouldAnimate ? "transition-transform duration-200" : "transition-none",
+                  isExpanded && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isExpanded && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          initial: shouldAnimate ? "hidden" : false,
+          animate: shouldAnimate ? "visible" : void 0,
+          exit: shouldAnimate ? "exit" : void 0,
+          variants: shouldAnimate ? sidebarAccordionVariants : void 0,
+          className: "pl-6 pr-1 py-1 space-y-0.5 border-l border-grey-200 ml-5 my-0.5 overflow-hidden",
+          children: item.items?.map((sub) => /* @__PURE__ */ jsx(
+            SidebarSubItem,
+            {
+              item: sub,
+              activePath,
+              linkComponent: LinkComponent
+            },
+            sub.id || sub.href
+          ))
+        },
+        "sidebar-sub-items"
+      ) })
+    ] });
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "size-5 flex items-center justify-center shrink-0", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-left", children: item.label }),
+    item.badge !== void 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: navBadgeVariants({
+          variant: item.badgeVariant,
+          collapsed: false
+        }),
+        children: item.badge
+      }
+    )
+  ] });
+  const className = navItemVariants({ active: isDirectActive, collapsed: false });
+  if (item.href) {
+    if (LinkComponent) {
+      return /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className, children: content });
+    }
+    return /* @__PURE__ */ jsx("a", { href: item.href, className, children: content });
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", disabled: item.disabled, className, children: content });
+};
+
+export { SidebarNavItem };

package/dist/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { NavItem } from '../SideBarNavigation.types';
+export interface SidebarPopoverMenuProps {
+    item: NavItem;
+    activePath?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarPopoverMenu: React.FC<SidebarPopoverMenuProps>;
+//# sourceMappingURL=SidebarPopoverMenu.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarPopoverMenu.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAM1D,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuGhE,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarPopoverMenu.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '@timmbr/utils';
+import { isNavItemActive } from '../SideBarNavigation.helpers.js';
+import { navBadgeVariants, navItemVariants } from '../SideBarNavigation.styles.js';
+import { useSidebarContext } from '../SideBarNavigation.context.js';
+import { SidebarSubItem } from './SidebarSubItem.js';
+
+const SidebarPopoverMenu = ({
+  item,
+  activePath,
+  linkComponent
+}) => {
+  const { shouldAnimate } = useSidebarContext();
+  const [open, setOpen] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+  const handleMouseEnter = () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => {
+      setOpen(false);
+    }, 150);
+  };
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const isActive = isNavItemActive(item, activePath);
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: "relative flex justify-center",
+      children: [
+        /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: navItemVariants({ active: isActive, collapsed: true }),
+            "aria-expanded": open,
+            "aria-label": item.label,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "size-5 flex items-center justify-center shrink-0", children: item.icon }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: navBadgeVariants({
+                    variant: item.badgeVariant,
+                    collapsed: true
+                  }),
+                  children: item.badge
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+          PopoverPrimitive.Content,
+          {
+            side: "right",
+            align: "start",
+            sideOffset: 12,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            className: cn(
+              "z-50 min-w-48 rounded-lg bg-white p-2 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+              !shouldAnimate && "animate-none transition-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 border-b border-grey-100 mb-1 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 tracking-tight", children: item.label }),
+                item.badge !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
+                      item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-100 text-grey-800"
+                    ),
+                    children: item.badge
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-0.5", children: item.items?.map((sub) => /* @__PURE__ */ jsx(
+                SidebarSubItem,
+                {
+                  item: sub,
+                  activePath,
+                  linkComponent
+                },
+                sub.id || sub.href
+              )) })
+            ]
+          }
+        ) })
+      ]
+    }
+  ) });
+};
+
+export { SidebarPopoverMenu };

package/dist/components/SideBarNavigation/subcomponents/SidebarProfile.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { SidebarProfileConfig } from '../SideBarNavigation.types';
+export interface SidebarProfileProps {
+    profile?: SidebarProfileConfig;
+    collapsed: boolean;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarProfile: React.FC<SidebarProfileProps>;
+//# sourceMappingURL=SidebarProfile.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarProfile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarProfile.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarProfile.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAIvE,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkMxD,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarProfile.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ChevronsUpDown } from '@timmbr/icons';
+import { cn } from '@timmbr/utils';
+import { AnimatePresence, motion, sidebarContentFadeVariants } from '@timmbr/motion';
+import { useSidebarContext } from '../SideBarNavigation.context.js';
+import { Tooltip } from '../../Tooltip/Tooltip.js';
+
+const SidebarProfile = ({
+  profile,
+  collapsed,
+  linkComponent: LinkComponent
+}) => {
+  const { shouldAnimate } = useSidebarContext();
+  if (!profile) return null;
+  const fallbackInitials = profile.fallback || profile.name.split(" ").map((part) => part[0]).join("").slice(0, 2).toUpperCase();
+  const avatarElement = profile.avatar ? /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full overflow-hidden shrink-0 flex items-center justify-center", children: profile.avatar }) : /* @__PURE__ */ jsx("div", { className: "size-8 rounded-full bg-grey-200 border border-grey-300 flex items-center justify-center shrink-0 font-medium text-xs text-grey-700", children: fallbackInitials });
+  const hasItems = Boolean(profile.items && profile.items.length > 0);
+  const menuContent = hasItems && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.Content,
+    {
+      side: collapsed ? "right" : "top",
+      align: collapsed ? "end" : "center",
+      sideOffset: collapsed ? 12 : 8,
+      className: cn(
+        "z-50 min-w-56 rounded-lg bg-white p-1.5 text-grey-900 shadow-md border border-grey-200 outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        !shouldAnimate && "animate-none transition-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-2.5 py-2 border-b border-grey-100 mb-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
+          profile.email && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-grey-500 truncate mt-0.5", children: profile.email })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: profile.items?.map((item) => {
+          const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 size-4 flex items-center justify-center", children: item.icon }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+          ] });
+          const itemClass = cn(
+            "flex items-center gap-2.5 w-full rounded-md px-2.5 py-1.5 text-xs transition-colors duration-150 select-none cursor-pointer outline-none focus-visible:bg-grey-100",
+            item.destructive ? "text-red-600 hover:bg-red-50 hover:text-red-700" : "text-grey-700 hover:bg-grey-100 hover:text-grey-900",
+            item.disabled && "opacity-50 pointer-events-none"
+          );
+          if (item.href) {
+            return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { asChild: true, children: LinkComponent ? /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className: itemClass, children: itemContent }) : /* @__PURE__ */ jsx("a", { href: item.href, className: itemClass, children: itemContent }) }, item.id || item.href);
+          }
+          return /* @__PURE__ */ jsx(
+            DropdownMenuPrimitive.Item,
+            {
+              onSelect: item.onClick,
+              disabled: item.disabled,
+              className: itemClass,
+              children: itemContent
+            },
+            item.id || item.label
+          );
+        }) })
+      ]
+    }
+  ) });
+  if (collapsed) {
+    const collapsedTrigger = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-testid": "sidebar-profile-btn",
+        onClick: !hasItems ? profile.onClick : void 0,
+        className: "size-9 rounded-full flex items-center justify-center hover:ring-2 hover:ring-primary/20 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+        "aria-label": profile.name,
+        children: avatarElement
+      }
+    );
+    if (hasItems) {
+      return /* @__PURE__ */ jsx("div", { className: "py-2 flex justify-center border-t border-grey-200", children: /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: collapsedTrigger }),
+        menuContent
+      ] }) });
+    }
+    return /* @__PURE__ */ jsx("div", { className: "py-2 flex justify-center border-t border-grey-200", children: /* @__PURE__ */ jsx(Tooltip, { content: profile.name, side: "right", children: collapsedTrigger }) });
+  }
+  const expandedTrigger = /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-testid": "sidebar-profile-btn",
+      onClick: !hasItems ? profile.onClick : void 0,
+      className: "flex items-center gap-3 w-full p-2 rounded-lg text-left hover:bg-grey-100 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary overflow-hidden",
+      children: [
+        avatarElement,
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !collapsed && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            initial: shouldAnimate ? "hidden" : false,
+            animate: shouldAnimate ? "visible" : void 0,
+            exit: shouldAnimate ? "exit" : void 0,
+            variants: shouldAnimate ? sidebarContentFadeVariants : void 0,
+            className: "flex items-center min-w-0 flex-1 overflow-hidden",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1 overflow-hidden", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold text-xs text-grey-900 truncate", children: profile.name }),
+                profile.email && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-grey-500 truncate block", children: profile.email })
+              ] }),
+              hasItems && /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 text-grey-400 shrink-0 ml-auto" })
+            ]
+          },
+          "profile-text-details"
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { className: "p-3 border-t border-grey-200 bg-white shrink-0 overflow-hidden", children: hasItems ? /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { asChild: true, children: expandedTrigger }),
+    menuContent
+  ] }) : expandedTrigger });
+};
+
+export { SidebarProfile };

package/dist/components/SideBarNavigation/subcomponents/SidebarSubItem.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { NavSubItem } from '../SideBarNavigation.types';
+export interface SidebarSubItemProps {
+    item: NavSubItem;
+    activePath?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarSubItem: React.FC<SidebarSubItemProps>;
+//# sourceMappingURL=SidebarSubItem.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarSubItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarSubItem.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarSubItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAI7D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC,CAAC;CACJ;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6CxD,CAAC"}

package/dist/components/SideBarNavigation/subcomponents/SidebarSubItem.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { isRouteActive } from '../SideBarNavigation.helpers.js';
+import { subItemVariants } from '../SideBarNavigation.styles.js';
+
+const SidebarSubItem = ({
+  item,
+  activePath,
+  linkComponent: LinkComponent
+}) => {
+  const isActive = isRouteActive(item.href, activePath);
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 size-4 flex items-center justify-center", children: item.icon }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label }),
+    item.badge !== void 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "ml-auto inline-flex items-center justify-center rounded-full px-1.5 py-0.2 text-[10px] font-semibold",
+          item.badgeVariant === "destructive" ? "bg-red-500 text-white" : "bg-grey-200 text-grey-800"
+        ),
+        children: item.badge
+      }
+    )
+  ] });
+  const className = subItemVariants({ active: isActive });
+  if (LinkComponent) {
+    return /* @__PURE__ */ jsx(LinkComponent, { href: item.href, className, children: content });
+  }
+  return /* @__PURE__ */ jsx("a", { href: item.href, className, children: content });
+};
+
+export { SidebarSubItem };

package/dist/components/SideBarNavigation/subcomponents/SidebarToggle.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface SidebarToggleProps {
+    collapsed: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+export declare const SidebarToggle: React.FC<SidebarToggleProps>;
+//# sourceMappingURL=SidebarToggle.d.ts.map

package/dist/components/SideBarNavigation/subcomponents/SidebarToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarToggle.d.ts","sourceRoot":"","sources":["../../../../src/components/SideBarNavigation/subcomponents/SidebarToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4BtD,CAAC"}