@optiaxiom/react 0.12.0 → 0.12.2

package/dist/packages/react/src/drawer-description/DrawerDescription-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-DqTs1HtP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/drawer-description/DrawerDescription.css.ts.vanilla-CpnN-kRO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_17gnxpz']});
+var description = recipeRuntime({base:[{color:'fg.secondary',fontWeight:'400',w:'full'},'_2p3pmp']});
 
 export { description };

package/dist/packages/react/src/drawer-title/DrawerTitle-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CabUD-PB.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-C013ajcv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_13zi4gg']});
+var title = recipeRuntime({base:[{flex:'1'},'uglnyu']});
 
 export { title };

package/dist/packages/react/src/dropdown-menu-trigger/DropdownMenuTrigger.js

@@ -2,10 +2,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
-import { MenuButton } from '../menu-button/MenuButton.js';
+import { AngleMenuButton } from '../angle-menu-button/AngleMenuButton.js';
 
 const DropdownMenuTrigger = forwardRef(({ asChild, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(MenuButton, { children }) });
+  return /* @__PURE__ */ jsx(RadixMenu.Trigger, { asChild: true, ref, ...props, children: asChild ? children : /* @__PURE__ */ jsx(AngleMenuButton, { children }) });
 });
 DropdownMenuTrigger.displayName = "@optiaxiom/react/DropdownMenuTrigger";
 

package/dist/packages/react/src/ellipsis-menu-button/EllipsisMenuButton.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Button } from '../button/Button.js';
+import { IconEllipsisSolid } from '../icons/IconEllipsisSolid.js';
+
+const EllipsisMenuButton = forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      icon: /* @__PURE__ */ jsx(IconEllipsisSolid, {}),
+      iconPosition: "end",
+      ref,
+      ...props,
+      children
+    }
+  );
+});
+EllipsisMenuButton.displayName = "@optiaxiom/react/EllipsisMenuButton";
+
+export { EllipsisMenuButton };

package/dist/packages/react/src/field/Field.js

@@ -21,13 +21,14 @@ const Field = forwardRef(
     info,
     inputId: inputIdProp,
     label,
+    labelId: labelIdProp,
     required,
     ...props
   }, ref) => {
     const inputId = useId(inputIdProp);
     const descriptionId = useId();
     const errorId = useId();
-    const labelId = useId();
+    const labelId = useId(labelIdProp);
     return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: "4", ref, ...props, children: [
       label && /* @__PURE__ */ jsx(
         FieldLabel,

package/dist/packages/react/src/highlight/Highlight-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-D93q02Fj.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-ArrfUFmX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1nxwyzw'});
+var mark = recipeRuntime({base:'_1k36yb2'});
 
 export { mark };

package/dist/packages/react/src/icons/IconCalendar.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconCalendar = withIcon(
+  {
+    name: "IconCalendar"
+  },
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      clipRule: "evenodd",
+      d: "M13.5 0.5C13.5 0.223858 13.2761 0 13 0C12.7239 0 12.5 0.223858 12.5 0.5V2H7.5V0.5C7.5 0.223858 7.27614 0 7 0C6.72386 0 6.5 0.223858 6.5 0.5V2H5.33333C4.04467 2 3 3.04467 3 4.33333V13.6667C3 14.9553 4.04467 16 5.33333 16H14.6667C15.9553 16 17 14.9553 17 13.6667V4.33333C17 3.04467 15.9553 2 14.6667 2H13.5V0.5ZM5.33333 3H7H13H14.6667C15.403 3 16 3.59695 16 4.33333V5.16666H4V4.33333C4 3.59695 4.59695 3 5.33333 3ZM4 6.16666V13.6667C4 14.403 4.59695 15 5.33333 15H14.6667C15.403 15 16 14.403 16 13.6667V6.16666H4Z",
+      fill: "currentColor",
+      fillRule: "evenodd"
+    }
+  )
+);
+
+export { IconCalendar };

package/dist/packages/react/src/icons/IconEllipsisSolid.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { withIcon } from './withIcon.js';
+
+const IconEllipsisSolid = withIcon(
+  {
+    name: "IconEllipsisSolid",
+    viewBox: "0 0 448 512"
+  },
+  // <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z",
+      fill: "currentColor"
+    }
+  )
+);
+
+export { IconEllipsisSolid };

package/dist/packages/react/src/indicator/Indicator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-BUOjNSvG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-DZM6_QM4.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:'vmpw2j',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'pet06x']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_7w9s9t']}}});
-var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1mew8dw'],variants:{offset:{false:'_4o2wd1',true:{}},position:{'bottom-right':'_1mrg6ew','top-right':'_1m87ixi'}}});
-var indicator = recipeRuntime({base:[{display:'inline-flex'},'if6o0q']});
+var badge = recipeRuntime({base:'uuaf35',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_15meno0']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'_1ew2xft']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_1q0vs0o'],variants:{offset:{false:'_1hz8xeq',true:{}},position:{'bottom-right':'tjcc9i','top-right':'cbu5q1'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'_1ats17g']});
 
 export { badge, floating, indicator };

package/dist/packages/react/src/inline-input/InlineInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DQEAby9t.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-DjFuuB95.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var editor = recipeRuntime({base:'_13zq4ll',variants:{empty:{false:{},true:'tvrgci'}}});
-var input = recipeRuntime({base:'_1r1kto8'});
+var editor = recipeRuntime({base:'_1xr50kt',variants:{empty:{false:{},true:'_1qm9151'}}});
+var input = recipeRuntime({base:'wu1su9'});
 
 export { editor, input };

package/dist/packages/react/src/input/Input-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var addon = recipeRuntime({base:{display:'flex',flex:'none'}});

package/dist/packages/react/src/input-control/InputControl-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-D0ivfH9I.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-vlrSoyZz.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['dfoyyk',{bg:'transparent',flex:'auto',w:'full'},'_6489ma','_1e3qepf'],variants:{size:{md:{},lg:{},xl:['_1rslxar']}}});
+var control = recipeRuntime({base:['_9dp126',{bg:'transparent',flex:'auto',w:'full'},'no6ecr','_59jklb'],variants:{size:{md:{},lg:{},xl:['drhbml']}}});
 
 export { control };

package/dist/packages/react/src/input-root/InputRoot-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
-import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-D0ivfH9I.css';
-import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-BBF49P4Q.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-vlrSoyZz.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-Do36JkwD.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'ed6meb']});
+var root = recipeRuntime({base:[{flexDirection:'row',gap:'0'},'_1mex7gj']});
 
 export { root };

package/dist/packages/react/src/kbd/Kbd-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-CcgEcPxm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-t6uP70zy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'_1by386q'],variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
-var keys = recipeRuntime({base:'_1hb1nzj',variants:{variant:{outline:'i69vkc',subtle:{}}}});
+var kbd = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',display:'inline-flex',flexDirection:'row',px:'4',rounded:'sm',whiteSpace:'nowrap'},'bpao34'],variants:{variant:{outline:{border:'1',borderB:'2',fontWeight:'600',gap:'4'},subtle:{bg:'transparent',color:'fg.secondary',fontFamily:'sans',gap:'2',px:'0'}}}});
+var keys = recipeRuntime({base:'_1ahajfp',variants:{variant:{outline:'fb51ya',subtle:{}}}});
 
 export { kbd, keys };

package/dist/packages/react/src/layers/layers-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._5obs4g';
-var reset = 'optiaxiom._16i5hvn';
+var components = 'optiaxiom.smxc2x';
+var reset = 'optiaxiom._11wmm7m';
 var theme = 'optiaxiom.theme';
 
 export { axiom, base, components, reset, theme };

package/dist/packages/react/src/link/Link-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/link/Link.css.ts.vanilla-D0s7UoMe.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-Dy_qgnbO.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1terp0f']});
-var link = recipeRuntime({base:['ijn6p0'],variants:{appearance:{'default':'pshqeh',inverse:'_1nf1ju9',subtle:'_1a7h5r4'},overlay:{false:{},true:'_14de5d7'}}});
+var icon = recipeRuntime({base:[{display:'inline-flex',ml:'4'},'_1t4apt3']});
+var link = recipeRuntime({base:['_1jkzxxu','z70bam'],variants:{appearance:{'default':'q1xucq',inverse:'rr12yu',subtle:'_3qgfr0'},overlay:{false:{},true:'z744nf'}}});
 
 export { icon, link };

package/dist/packages/react/src/link/Link.js

@@ -34,6 +34,7 @@ const Link = forwardRef(
           {
             "aria-disabled": disabled,
             "data-disabled": disabled ? "" : undefined,
+            "data-overlay": overlay ? "" : undefined,
             href,
             ref,
             ...external && { rel: "noopener noreferrer", target: "_blank" },

package/dist/packages/react/src/listbox-item/ListboxItem-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-WI-slBQP.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-DeD2Vr_j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var description = recipeRuntime({base:[{fontSize:'sm'},'ssf5qa']});
-var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'qlyxbd'],variants:{intent:{danger:'_1omnrqy',neutral:'xntdf9'}}});
-var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1vlxegp']});
+var description = recipeRuntime({base:[{fontSize:'sm'},'_1kslncq']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'_1vbdm9u'],variants:{intent:{danger:'bzt1hh',neutral:'ss16bd'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'de0qkj']});
 
 export { description, item, title };

package/dist/packages/react/src/menu-listbox/MenuListbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-BXN-FR8J.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Dh7YGbc2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'rdl8hv'],variants:{maxH:{xs:'g1416y',sm:'_1ecsz61',md:'_1a46pry',lg:'er6hrh',full:{}},minW:{'0':{},trigger:'_1wef7yr'},provider:{'dropdown-menu':'cvfi0h',popover:'_1agmc19',popper:'_192s0id'}}});
+var listbox = recipeRuntime({base:[{maxW:'xs',p:'4'},'_9td1ne'],variants:{maxH:{xs:'ughdor',sm:'_1297zvi',md:'rrza1p',lg:'_1vqdca1',full:{}},minW:{'0':{},trigger:'_1855il9'},provider:{'dropdown-menu':'_1ig3vxf',popover:'oq3n3i',popper:'ce9r5w'}}});
 
 export { listbox };

package/dist/packages/react/src/nav/Nav-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-CsSUlLzu.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var nav = recipeRuntime({base:[{bg:'bg.default',flex:'1',gap:'0',overflow:'hidden',pb:'8',pt:'16'},'_1vps1a4']});
+
+export { nav };

package/dist/packages/react/src/nav/Nav.js

@@ -3,25 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
 import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+import { nav } from './Nav-css.js';
 
 const Nav = forwardRef(
   ({ children, ...props }, ref) => {
-    const { animations, expanded } = useSidebarContext("Nav");
-    return /* @__PURE__ */ jsx(Flex, { borderR: "1", h: "full", ref, w: "fit", ...props, children: /* @__PURE__ */ jsx(
-      Flex,
-      {
-        asChild: true,
-        bg: "bg.default",
-        flex: "1",
-        gap: "0",
-        overflow: "hidden",
-        pb: "8",
-        pt: "16",
-        transition: animations ? "all" : undefined,
-        w: expanded ? "224" : "56",
-        children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", children })
-      }
-    ) });
+    const { expanded, navId } = useSidebarContext("Nav");
+    return /* @__PURE__ */ jsx(Flex, { borderR: "1", h: "full", ref, w: "fit", ...props, children: /* @__PURE__ */ jsx(Flex, { asChild: true, id: navId, w: expanded ? "224" : "56", ...nav(), children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", children }) }) });
   }
 );
 Nav.displayName = "@optiaxiom/react/Nav";

package/dist/packages/react/src/nav-account-item/NavAccountItem-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-BdwRoS9p.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:{flex:'1',flexDirection:'row',gap:'8',overflowX:'hidden',transition:'opacity'},variants:{expanded:{false:'_104x0e3',true:'_1idvla4'}}});
+
+export { item };

package/dist/packages/react/src/nav-account-item/NavAccountItem.js

@@ -9,17 +9,16 @@ import { Flex } from '../flex/Flex.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
 import { Text } from '../text/Text.js';
-import { Transition } from '../transition/Transition.js';
+import { item } from './NavAccountItem-css.js';
 
 const NavAccountItem = forwardRef(({ name, organization, src, ...props }, ref) => {
-  const { animations, expanded } = useSidebarContext("NavAccountItem");
-  return /* @__PURE__ */ jsx(Flex, { my: "8", role: "listitem", children: /* @__PURE__ */ jsx(
+  const { expanded } = useSidebarContext("NavAccountItem");
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
     Flex,
     {
       asChild: true,
       flexDirection: "row",
       gap: "8",
-      mx: "8",
       p: "4",
       textAlign: "start",
       ...props,
@@ -35,16 +34,16 @@ const NavAccountItem = forwardRef(({ name, organization, src, ...props }, ref) =
             src
           }
         ),
-        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "8", overflowX: "hidden", children: [
+        /* @__PURE__ */ jsxs(Flex, { ...item({ expanded: Boolean(expanded) }), children: [
           /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
             /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
             /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })
           ] }),
           /* @__PURE__ */ jsx(Box, { asChild: true, children: /* @__PURE__ */ jsx(IconEllipsis, {}) })
-        ] }) })
+        ] })
       ] })
     }
-  ) });
+  ) }) });
 });
 NavAccountItem.displayName = "@optiaxiom/react/NavAccountItem";
 

package/dist/packages/react/src/nav-body/NavBody-css.js

@@ -0,0 +1,6 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'start',overflowX:'hidden',py:'8',w:'full'}],variants:{expanded:{false:{overflowY:'hidden'},true:{overflowY:'auto'}}}});
+
+export { body };

package/dist/packages/react/src/nav-body/NavBody.js

@@ -2,21 +2,18 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
+import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+import { body } from './NavBody-css.js';
 
 const NavBody = forwardRef(
-  ({ children, ...props }, ref) => {
+  ({ children, className, ...props }, ref) => {
+    const { expanded, spacing } = useSidebarContext("NavBody");
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        flex: "1",
-        gap: "4",
-        justifyContent: "start",
-        overflowX: "hidden",
-        overflowY: "auto",
-        py: "8",
+        px: spacing,
         ref,
-        role: "list",
-        w: "full",
+        ...body({ expanded }, className),
         ...props,
         children
       }

package/dist/packages/react/src/nav-footer/NavFooter.js

@@ -2,18 +2,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
+import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
 
 const NavFooter = forwardRef(
   ({ children, ...props }, ref) => {
+    const { spacing } = useSidebarContext("NavFooter");
     return /* @__PURE__ */ jsx(
       Flex,
       {
         gap: "8",
         mt: "auto",
         overflowX: "hidden",
+        px: spacing,
         py: "8",
         ref,
-        role: "list",
         ...props,
         children
       }

package/dist/packages/react/src/nav-group/NavGroup.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
+import { forwardRef } from 'react';
+import { Disclosure } from '../disclosure/Disclosure.js';
+import { NavGroupContextProvider } from '../nav-group-context/NavGroupContext.js';
+
+const NavGroup = forwardRef(
+  ({ children, ...props }, ref) => {
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(NavGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        alignItems: "stretch",
+        "aria-labelledby": props["aria-label"] ? undefined : groupId,
+        asChild: true,
+        defaultOpen: true,
+        display: "flex",
+        flexDirection: "column",
+        ...props,
+        children: /* @__PURE__ */ jsx("li", { ref, children })
+      }
+    ) });
+  }
+);
+NavGroup.displayName = "@optiaxiom/react/NavGroup";
+
+export { NavGroup };

package/dist/packages/react/src/nav-group-context/NavGroupContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from '@radix-ui/react-context';
+
+const [NavGroupContextProvider, useNavGroupContext] = createContext("NavGroup", { id: undefined });
+
+export { NavGroupContextProvider, useNavGroupContext };

package/dist/packages/react/src/nav-group-label/NavGroupLabel.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DisclosureTrigger } from '../disclosure-trigger/DisclosureTrigger.js';
+import { useNavGroupContext } from '../nav-group-context/NavGroupContext.js';
+
+const NavGroupLabel = forwardRef(
+  ({ children, ...props }, ref) => {
+    const { id } = useNavGroupContext("NavGroupLabel");
+    return /* @__PURE__ */ jsx(
+      DisclosureTrigger,
+      {
+        chevronPosition: "end",
+        color: "fg.tertiary",
+        fontSize: "sm",
+        id,
+        mb: "4",
+        mt: "8",
+        px: "12",
+        py: "4",
+        ref,
+        w: "auto",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavGroupLabel.displayName = "@optiaxiom/react/NavGroupLabel";
+
+export { NavGroupLabel };

package/dist/packages/react/src/nav-header/NavHeader.js

@@ -2,10 +2,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Flex } from '../flex/Flex.js';
+import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
 
 const NavHeader = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { ref, role: "list", ...props, children });
+    const { spacing } = useSidebarContext("NavHeader");
+    return /* @__PURE__ */ jsx(Flex, { px: spacing, ref, ...props, children });
   }
 );
 NavHeader.displayName = "@optiaxiom/react/NavHeader";

package/dist/packages/react/src/nav-item/NavItem-css.js

@@ -1,9 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BxCgGwKO.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DasptH10.css';
-import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-VGI0LCrr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-NRNXWe4M.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-Df83DDkl.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-RaqyOKA9.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-XsYKaDce.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'8',textAlign:'start'},'_1qewzk1']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',fontWeight:'500',h:'lg',justifyContent:'start',rounded:'md',textAlign:'start',transition:'colors'},'_3p6q5g']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',mr:'10',overflow:'hidden'},'ymm6il'],variants:{expanded:{false:'ml2uz',true:'_905lo1'}}});
 
-export { item };
+export { item, label };