@timmbr/ui 1.0.0-beta → 1.1.0

package/dist/components/LinkButton/LinkButton.styles.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const linkButtonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "subtle" | "primary" | "secondary" | "muted" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LinkButtonVariants = VariantProps<typeof linkButtonVariants>;
+//# sourceMappingURL=LinkButton.styles.d.ts.map

package/dist/components/LinkButton/LinkButton.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.styles.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,kBAAkB;;;;8EAiE9B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/LinkButton/LinkButton.styles.js

@@ -0,0 +1,61 @@
+import { cva } from 'class-variance-authority';
+
+const linkButtonVariants = cva(
+  "inline-flex items-center justify-center font-sans transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 select-none no-underline",
+  {
+    variants: {
+      variant: {
+        default: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
+        link: "text-primary underline-offset-4 hover:underline font-medium p-0 h-auto active:scale-100",
+        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-bg-subtle hover:brightness-105 active:bg-secondary-foreground/10 active:brightness-95 shadow-xs hover:shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600 active:scale-[0.98] font-semibold whitespace-nowrap",
+        ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 active:scale-[0.98] font-semibold whitespace-nowrap",
+        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm active:scale-[0.98] font-semibold whitespace-nowrap",
+        muted: "text-grey-600 dark:text-grey-400 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100",
+        subtle: "text-foreground/80 hover:text-foreground underline-offset-4 hover:underline font-normal p-0 h-auto active:scale-100"
+      },
+      size: {
+        sm: "text-xs gap-1",
+        default: "text-sm gap-1.5",
+        md: "text-sm gap-1.5",
+        lg: "text-base gap-2",
+        icon: "p-1 shrink-0"
+      },
+      disabled: {
+        true: "pointer-events-none opacity-50 cursor-not-allowed",
+        false: "cursor-pointer"
+      }
+    },
+    compoundVariants: [
+      // Button sizing variants when rendered with button appearance
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "sm",
+        className: "h-9 px-3 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: ["default", "md"],
+        className: "h-11 px-5 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "lg",
+        className: "h-[52px] px-6 rounded-[2px] gap-2"
+      },
+      {
+        variant: ["primary", "secondary", "outline", "ghost", "destructive"],
+        size: "icon",
+        className: "h-10 w-10 p-0 rounded-[2px]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      disabled: false
+    }
+  }
+);
+
+export { linkButtonVariants };

package/dist/components/LinkButton/LinkButton.types.d.ts

@@ -0,0 +1,60 @@
+import type * as React from 'react';
+import type { LinkButtonVariants } from './LinkButton.styles';
+import type { MotionProp } from '../../types/motion';
+export interface LinkButtonProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>, Omit<LinkButtonVariants, 'disabled'> {
+    /**
+     * Destination URL or path.
+     */
+    href?: string;
+    /**
+     * Target zone key corresponding to TimmbrConfigProvider zones (e.g. 'docs', 'app').
+     * If provided and resolves to a different zone from config.currentZone, automatically treats navigation as cross-zone.
+     */
+    zone?: string;
+    /**
+     * If true, forces hard navigation across zone boundaries using CrossZoneLink, bypassing next/link.
+     * ARCHITECTURAL RULE: NEVER use `next/link` for navigation across zone boundaries. Always use `CrossZoneLink` from `@timmbr/ui`.
+     */
+    crossZone?: boolean;
+    /**
+     * Next.js prefetching toggle. Defaults to true when using next/link.
+     */
+    prefetch?: boolean;
+    /**
+     * Next.js route replacement toggle.
+     */
+    replace?: boolean;
+    /**
+     * Scroll to the top of the page after navigation. Defaults to true in Next.js.
+     */
+    scroll?: boolean;
+    /**
+     * If true, LinkButton renders as Radix UI Slot to merge props onto a custom element.
+     */
+    asChild?: boolean;
+    /**
+     * Local toggle to enable/disable button motion transitions, or configure motion primitives.
+     */
+    motion?: MotionProp;
+    /**
+     * Leading icon element rendered before button children.
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Trailing icon element rendered after button children.
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Displays an animated loading spinner and disables interactive states.
+     */
+    loading?: boolean;
+    /**
+     * Optional loading text displayed alongside spinner.
+     */
+    loadingText?: string;
+    /**
+     * Disables the anchor element visually and functionally (aria-disabled, tabIndex=-1, pointer-events-none).
+     */
+    disabled?: boolean;
+}
+//# sourceMappingURL=LinkButton.types.d.ts.map

package/dist/components/LinkButton/LinkButton.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/LinkButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/components/LinkButton/index.d.ts

@@ -0,0 +1,4 @@
+export * from './LinkButton';
+export * from './LinkButton.styles';
+export * from './LinkButton.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LinkButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/components/Progress/Progress.styles.d.ts

@@ -3,7 +3,7 @@ export declare const progressRootVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressIndicatorVariants: (props?: ({
-    variant?: "default" | "primary" | "destructive" | "success" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "primary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ProgressVariants = VariantProps<typeof progressIndicatorVariants> & VariantProps<typeof progressRootVariants>;
 //# sourceMappingURL=Progress.styles.d.ts.map

package/dist/components/Radio/Radio.js

@@ -110,12 +110,12 @@ const RadioGroup = React.forwardRef(
         "p",
         {
           className: cn(
-            "text-xs mt-0.5 flex items-center gap-1.5",
+            "text-xs mt-0.5 flex items-start gap-1.5",
             isError ? "text-destructive font-medium" : "text-muted"
           ),
           children: [
-            isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
-            /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+            isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "leading-tight", children: errorMessage || helperText })
           ]
         }
       )

package/dist/components/Select/Select.js

@@ -101,12 +101,12 @@ const Select = React.forwardRef(
             "p",
             {
               className: cn(
-                "text-xs mt-0.5 flex items-center gap-1.5",
+                "text-xs mt-0.5 flex items-start gap-1.5",
                 isError ? "text-destructive font-medium" : "text-muted"
               ),
               children: [
-                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 mt-0.5", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "leading-tight", children: errorMessage || helperText })
               ]
             }
           )

package/dist/components/Select/Select.styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const selectTriggerVariants: (props?: ({
-    variant?: "outline" | "filled" | null | undefined;
+    variant?: "filled" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | "md" | null | undefined;
     isError?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/SideBarNavigation/SideBarNavigation.context.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export interface SidebarContextValue {
+    collapsed: boolean;
+    shouldAnimate: boolean;
+    motionClass?: string;
+    activePath?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+}
+export declare const SidebarContext: React.Context<SidebarContextValue>;
+export declare const useSidebarContext: () => SidebarContextValue;
+//# sourceMappingURL=SideBarNavigation.context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarNavigation.context.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/SideBarNavigation.context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,oCAGzB,CAAC;AAEH,eAAO,MAAM,iBAAiB,2BAAyC,CAAC"}

package/dist/components/SideBarNavigation/SideBarNavigation.context.js

@@ -0,0 +1,10 @@
+"use client";
+import * as React from 'react';
+
+const SidebarContext = React.createContext({
+  collapsed: false,
+  shouldAnimate: true
+});
+const useSidebarContext = () => React.useContext(SidebarContext);
+
+export { SidebarContext, useSidebarContext };

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SideBarNavigationProps } from './SideBarNavigation.types';
+export declare const SideBarNavigation: React.FC<SideBarNavigationProps>;
+//# sourceMappingURL=SideBarNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/SideBarNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAUxE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsH9D,CAAC"}

package/dist/components/SideBarNavigation/SideBarNavigation.helpers.d.ts

@@ -0,0 +1,19 @@
+import type { NavItem } from './SideBarNavigation.types';
+export declare const DEFAULT_STORAGE_KEY = "timmbr_sidebar_collapsed";
+/**
+ * Checks if a specific route matches the current activePath.
+ */
+export declare function isRouteActive(href?: string, activePath?: string): boolean;
+/**
+ * Checks if a NavItem or any of its nested children are active.
+ */
+export declare function isNavItemActive(item: NavItem, activePath?: string): boolean;
+/**
+ * Reads the stored collapsed state from localStorage (guarded against SSR).
+ */
+export declare function readStoredCollapsed(storageKey: string | false, fallback: boolean): boolean;
+/**
+ * Persists the collapsed state to both localStorage and a lightweight document cookie.
+ */
+export declare function writeStoredCollapsed(storageKey: string | false, isCollapsed: boolean): void;
+//# sourceMappingURL=SideBarNavigation.helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarNavigation.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/SideBarNavigation.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAc,MAAM,2BAA2B,CAAC;AAErE,eAAO,MAAM,mBAAmB,6BAA6B,CAAC;AAE9D;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAiBzE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAU3E;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,OAAO,GAAG,OAAO,CAe1F;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,EAAE,WAAW,EAAE,OAAO,GAAG,IAAI,CAY3F"}

package/dist/components/SideBarNavigation/SideBarNavigation.helpers.js

@@ -0,0 +1,48 @@
+const DEFAULT_STORAGE_KEY = "timmbr_sidebar_collapsed";
+function isRouteActive(href, activePath) {
+  let path = activePath;
+  if (!path && typeof window !== "undefined") {
+    path = window.location.pathname;
+  }
+  if (!href || !path) return false;
+  const cleanHref = href.length > 1 && href.endsWith("/") ? href.slice(0, -1) : href;
+  const cleanActive = path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+  if (cleanHref === "/" || cleanHref === "") {
+    return cleanActive === "/" || cleanActive === "";
+  }
+  return cleanActive === cleanHref || cleanActive.startsWith(`${cleanHref}/`);
+}
+function isNavItemActive(item, activePath) {
+  if (item.href && isRouteActive(item.href, activePath)) {
+    return true;
+  }
+  if (item.items && item.items.length > 0) {
+    return item.items.some((sub) => isRouteActive(sub.href, activePath));
+  }
+  return false;
+}
+function readStoredCollapsed(storageKey, fallback) {
+  if (typeof window === "undefined" || storageKey === false) {
+    return fallback;
+  }
+  try {
+    const item = window.localStorage.getItem(storageKey);
+    if (item !== null) {
+      return item === "true";
+    }
+  } catch {
+  }
+  return fallback;
+}
+function writeStoredCollapsed(storageKey, isCollapsed) {
+  if (typeof window === "undefined" || storageKey === false) {
+    return;
+  }
+  try {
+    window.localStorage.setItem(storageKey, String(isCollapsed));
+    document.cookie = `${storageKey}=${isCollapsed}; path=/; max-age=31536000; SameSite=Lax`;
+  } catch {
+  }
+}
+
+export { DEFAULT_STORAGE_KEY, isNavItemActive, isRouteActive, readStoredCollapsed, writeStoredCollapsed };

package/dist/components/SideBarNavigation/SideBarNavigation.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { motion, sidebarContainerMotionVariants } from '@timmbr/motion';
+import { resolveMotion } from '../../types/motion.js';
+import { DEFAULT_STORAGE_KEY, readStoredCollapsed, writeStoredCollapsed } from './SideBarNavigation.helpers.js';
+import { sidebarContainerVariants } from './SideBarNavigation.styles.js';
+import { SidebarContext } from './SideBarNavigation.context.js';
+import { SidebarBranding } from './subcomponents/SidebarBranding.js';
+import { SidebarToggle } from './subcomponents/SidebarToggle.js';
+import { SidebarNavItem } from './subcomponents/SidebarNavItem.js';
+import { SidebarFooter } from './subcomponents/SidebarFooter.js';
+import { SidebarProfile } from './subcomponents/SidebarProfile.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const SideBarNavigation = ({
+  items,
+  activePath,
+  branding,
+  footer,
+  profile,
+  showProfile = true,
+  collapsed: controlledCollapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey = DEFAULT_STORAGE_KEY,
+  linkComponent,
+  motion: motionProp,
+  className,
+  style
+}) => {
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate, motionClass, dataAttributes } = resolveMotion(motionProp, globalMotion);
+  const isControlled = controlledCollapsed !== void 0;
+  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);
+  React.useEffect(() => {
+    if (!isControlled && storageKey !== false) {
+      const stored = readStoredCollapsed(storageKey, defaultCollapsed);
+      if (stored !== internalCollapsed) {
+        setInternalCollapsed(stored);
+      }
+    }
+  }, [isControlled, storageKey, defaultCollapsed]);
+  const isCollapsed = isControlled ? controlledCollapsed : internalCollapsed;
+  const handleToggle = React.useCallback(() => {
+    const nextState = !isCollapsed;
+    if (!isControlled) {
+      setInternalCollapsed(nextState);
+      if (storageKey !== false) {
+        writeStoredCollapsed(storageKey, nextState);
+      }
+    }
+    onCollapsedChange?.(nextState);
+  }, [isCollapsed, isControlled, storageKey, onCollapsedChange]);
+  return /* @__PURE__ */ jsx(
+    SidebarContext.Provider,
+    {
+      value: {
+        collapsed: isCollapsed,
+        shouldAnimate,
+        motionClass,
+        activePath,
+        linkComponent
+      },
+      children: /* @__PURE__ */ jsxs(
+        motion.aside,
+        {
+          "data-slot": "sidebar-navigation",
+          "data-collapsed": isCollapsed,
+          ...dataAttributes,
+          initial: false,
+          animate: shouldAnimate ? isCollapsed ? "collapsed" : "expanded" : void 0,
+          variants: shouldAnimate ? sidebarContainerMotionVariants : void 0,
+          className: cn(
+            sidebarContainerVariants({
+              collapsed: isCollapsed,
+              shouldAnimate,
+              cssFallback: !shouldAnimate,
+              className
+            }),
+            motionClass
+          ),
+          style,
+          children: [
+            /* @__PURE__ */ jsx(SidebarToggle, { collapsed: isCollapsed, onToggle: handleToggle }),
+            /* @__PURE__ */ jsx(
+              SidebarBranding,
+              {
+                branding,
+                collapsed: isCollapsed,
+                linkComponent
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "nav",
+              {
+                "aria-label": "Sidebar Navigation",
+                className: cn(
+                  "flex-1 overflow-y-auto overflow-x-hidden pt-1 pb-2 space-y-1",
+                  isCollapsed ? "px-2" : "px-3"
+                ),
+                children: items.map((item) => /* @__PURE__ */ jsx(
+                  SidebarNavItem,
+                  {
+                    item,
+                    collapsed: isCollapsed,
+                    activePath,
+                    linkComponent
+                  },
+                  item.id || item.href || item.label
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(SidebarFooter, { footer, collapsed: isCollapsed }),
+            showProfile && profile && /* @__PURE__ */ jsx(
+              SidebarProfile,
+              {
+                profile,
+                collapsed: isCollapsed,
+                linkComponent
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+SideBarNavigation.displayName = "SideBarNavigation";
+
+export { SideBarNavigation };

package/dist/components/SideBarNavigation/SideBarNavigation.styles.d.ts

@@ -0,0 +1,18 @@
+export declare const sidebarContainerVariants: (props?: ({
+    collapsed?: boolean | null | undefined;
+    shouldAnimate?: boolean | null | undefined;
+    cssFallback?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sidebarToggleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const navItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+    collapsed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const navBadgeVariants: (props?: ({
+    variant?: "destructive" | "outline" | "primary" | "secondary" | null | undefined;
+    collapsed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const subItemVariants: (props?: ({
+    active?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=SideBarNavigation.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarNavigation.styles.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/SideBarNavigation.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB;;;;8EAuBpC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,eAAe;;;8EAkB3B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;8EAoB5B,CAAC;AAEF,eAAO,MAAM,eAAe;;8EAa3B,CAAC"}

package/dist/components/SideBarNavigation/SideBarNavigation.styles.js

@@ -0,0 +1,85 @@
+import { cva } from 'class-variance-authority';
+
+const sidebarContainerVariants = cva(
+  "relative flex flex-col h-screen max-h-screen bg-white border-r border-grey-200 select-none",
+  {
+    variants: {
+      collapsed: {
+        true: "w-[72px]",
+        false: "w-64"
+      },
+      shouldAnimate: {
+        true: "",
+        false: "transition-none"
+      },
+      cssFallback: {
+        true: "transition-all duration-300 ease-in-out",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      collapsed: false,
+      shouldAnimate: true,
+      cssFallback: false
+    }
+  }
+);
+const sidebarToggleVariants = cva(
+  "absolute -right-3.5 top-6 z-30 flex size-7 items-center justify-center rounded-full bg-white border border-grey-200 text-grey-600 shadow-xs hover:bg-grey-50 hover:text-grey-900 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer transition-all duration-150"
+);
+const navItemVariants = cva(
+  "group relative flex items-center gap-3 rounded-lg text-sm transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer select-none",
+  {
+    variants: {
+      active: {
+        true: "bg-primary text-white shadow-xs font-medium",
+        false: "text-grey-700 hover:bg-grey-100 hover:text-grey-900"
+      },
+      collapsed: {
+        true: "justify-center size-10 mx-auto p-0",
+        false: "w-full px-3.5 py-2.5"
+      }
+    },
+    defaultVariants: {
+      active: false,
+      collapsed: false
+    }
+  }
+);
+const navBadgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full text-xs font-semibold shrink-0 transition-colors",
+  {
+    variants: {
+      variant: {
+        destructive: "bg-red-500 text-white px-2 py-0.5",
+        primary: "bg-primary-100 text-primary-800 px-2 py-0.5",
+        secondary: "bg-grey-100 text-grey-700 px-2 py-0.5",
+        outline: "border border-grey-200 text-grey-700 px-1.5 py-0.5"
+      },
+      collapsed: {
+        true: "absolute -top-1 -right-1 size-4 p-0 text-[10px] leading-none",
+        false: "ml-auto"
+      }
+    },
+    defaultVariants: {
+      variant: "destructive",
+      collapsed: false
+    }
+  }
+);
+const subItemVariants = cva(
+  "flex items-center gap-2.5 w-full rounded-md px-3 py-2 text-xs transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
+  {
+    variants: {
+      active: {
+        true: "bg-primary/10 text-primary-700 font-semibold",
+        false: "text-grey-600 hover:bg-grey-100 hover:text-grey-900"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+
+export { navBadgeVariants, navItemVariants, sidebarContainerVariants, sidebarToggleVariants, subItemVariants };

package/dist/components/SideBarNavigation/SideBarNavigation.types.d.ts

@@ -0,0 +1,69 @@
+import type * as React from 'react';
+import type { MotionProps } from '../../types/motion';
+export type NavBadgeVariant = 'primary' | 'secondary' | 'outline' | 'destructive';
+export interface NavSubItem {
+    id?: string;
+    label: string;
+    href: string;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode | number | string;
+    badgeVariant?: NavBadgeVariant;
+    disabled?: boolean;
+}
+export interface NavItem {
+    id?: string;
+    label: string;
+    href?: string;
+    icon: React.ReactNode;
+    badge?: React.ReactNode | number | string;
+    badgeVariant?: NavBadgeVariant;
+    items?: NavSubItem[];
+    disabled?: boolean;
+}
+export interface SidebarBrandingConfig {
+    logo?: React.ReactNode;
+    collapsedLogo?: React.ReactNode;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    href?: string;
+}
+export interface SidebarProfileItem {
+    id?: string;
+    label: string;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    destructive?: boolean;
+    disabled?: boolean;
+}
+export interface SidebarProfileConfig {
+    name: string;
+    role?: string;
+    email?: string;
+    avatar?: React.ReactNode;
+    fallback?: string;
+    items?: SidebarProfileItem[];
+    onClick?: () => void;
+}
+export interface SideBarNavigationProps extends MotionProps {
+    items: NavItem[];
+    activePath?: string;
+    branding?: SidebarBrandingConfig;
+    footer?: React.ReactNode | ((props: {
+        collapsed: boolean;
+    }) => React.ReactNode);
+    profile?: SidebarProfileConfig;
+    showProfile?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    storageKey?: string | false;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    className?: string;
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=SideBarNavigation.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarNavigation.types.d.ts","sourceRoot":"","sources":["../../../src/components/SideBarNavigation/SideBarNavigation.types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+export * from './SideBarNavigation';
+export * from './SideBarNavigation.types';
+export * from './SideBarNavigation.styles';
+export * from './SideBarNavigation.helpers';
+export * from './SideBarNavigation.context';
+export * from './subcomponents/SidebarBranding';
+export * from './subcomponents/SidebarToggle';
+export * from './subcomponents/SidebarNavItem';
+export * from './subcomponents/SidebarSubItem';
+export * from './subcomponents/SidebarPopoverMenu';
+export * from './subcomponents/SidebarFooter';
+export * from './subcomponents/SidebarProfile';
+//# sourceMappingURL=index.d.ts.map