@optiaxiom/react 0.12.0 → 0.12.1

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-xcn_ZlL-.css';
+import './../../../../assets/src/drawer-title/DrawerTitle.css.ts.vanilla-CLGLl0zi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var title = recipeRuntime({base:[{flex:'1'},'_13zi4gg']});
+var title = recipeRuntime({base:[{flex:'1'},'t6btdz']});
 
 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/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-xcn_ZlL-.css';
+import './../../../../assets/src/highlight/Highlight.css.ts.vanilla-_aRp6QYI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var mark = recipeRuntime({base:'_1nxwyzw'});
+var mark = recipeRuntime({base:'efems8'});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/indicator/Indicator.css.ts.vanilla-CjtvQEZ9.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:'_1jvcf48',variants:{offset:{false:{px:'0',py:'0'},true:[{px:'4',py:'0'},'_15hmahz']},ping:{false:{},true:[{animation:'ping',color:'transparent',pointerEvents:'none'},'pnlh7y']}}});
+var floating = recipeRuntime({base:[{display:'inline-flex',pointerEvents:'none',z:'10'},'_182xg32'],variants:{offset:{false:'_1nwqezg',true:{}},position:{'bottom-right':'wiv9cj','top-right':'_1qact43'}}});
+var indicator = recipeRuntime({base:[{display:'inline-flex'},'kmn00p']});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/inline-input/InlineInput.css.ts.vanilla-Bd4TmVBe.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:'_4vc6o9',variants:{empty:{false:{},true:'_13v0v1o'}}});
+var input = recipeRuntime({base:'vbfnqu'});
 
 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-xcn_ZlL-.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-xcn_ZlL-.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjmvJlqC.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:['rol9wp',{bg:'transparent',flex:'auto',w:'full'},'_1evr2uj','_1dao1w6'],variants:{size:{md:{},lg:{},xl:['_1i754vp']}}});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BgJJG2w1.css';
+import './../../../../assets/src/input-control/InputControl.css.ts.vanilla-CjmvJlqC.css';
+import './../../../../assets/src/input-root/InputRoot.css.ts.vanilla-DsBa61rD.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'},'_7u59zh']});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/kbd/Kbd.css.ts.vanilla-DUl9pW_8.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'},'u13l8f'],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:'_19e0g9s',variants:{variant:{outline:'r2ju4l',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-xcn_ZlL-.css';
 
 var axiom = 'optiaxiom';
 var base = 'optiaxiom.base';
-var components = 'optiaxiom._5obs4g';
-var reset = 'optiaxiom._16i5hvn';
+var components = 'optiaxiom._107fbc8';
+var reset = 'optiaxiom._1h1dwjo';
 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-xcn_ZlL-.css';
+import './../../../../assets/src/link/Link.css.ts.vanilla-CN29HUK1.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'},'aaqfdv']});
+var link = recipeRuntime({base:['_13lrn0z','_10xnmih'],variants:{appearance:{'default':'o4qd3c',inverse:'_1vv0his',subtle:'_1r3cner'},overlay:{false:{},true:'_1bqb832'}}});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/listbox-item/ListboxItem.css.ts.vanilla-CYmLxt0f.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'},'tbf96a']});
+var item = recipeRuntime({base:[{flexDirection:'row',fontSize:'md',gap:'8',p:'8',rounded:'sm',transition:'colors'},'vfddon'],variants:{intent:{danger:'_1h6h8pr',neutral:'_1h3i82w'}}});
+var title = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',gap:'8'},'_1pz0bou']});
 
 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-xcn_ZlL-.css';
+import './../../../../assets/src/menu-listbox/MenuListbox.css.ts.vanilla-Df9sANNY.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'},'_1lm7fcp'],variants:{maxH:{xs:'_1irfjrz',sm:'exwlj9',md:'_1bt9c3l',lg:'q0ba9n',full:{}},minW:{'0':{},trigger:'covmd1'},provider:{'dropdown-menu':'_16tjstw',popover:'_17opktc',popper:'ounbht'}}});
 
 export { listbox };

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/nav/Nav.css.ts.vanilla-DdDIoa3G.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'},'_1gycjx1']});
+
+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 } = useSidebarContext("Nav");
+    return /* @__PURE__ */ jsx(Flex, { borderR: "1", h: "full", ref, w: "fit", ...props, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...nav(), w: expanded ? "224" : "56", 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-xcn_ZlL-.css';
+import './../../../../assets/src/nav-account-item/NavAccountItem.css.ts.vanilla-Cbg3QYdp.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:'_1hoxi9o',true:'_1cl122b'}}});
+
+export { item };

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

@@ -9,10 +9,10 @@ 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");
+  const { expanded } = useSidebarContext("NavAccountItem");
   return /* @__PURE__ */ jsx(Flex, { my: "8", role: "listitem", children: /* @__PURE__ */ jsx(
     Flex,
     {
@@ -35,13 +35,13 @@ 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, {}) })
-        ] }) })
+        ] })
       ] })
     }
   ) });

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

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/nav-body/NavBody.css.ts.vanilla-BuCKcvv7.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var body = recipeRuntime({base:[{flex:'1',gap:'4',justifyContent:'start',overflowX:'hidden',overflowY:'auto',py:'8',w:'full'},'_1yjpwd2']});
+
+export { body };

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

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

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

@@ -0,0 +1,30 @@
+"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, defaultOpen = true, ...props }, ref) => {
+    const groupId = useId();
+    return /* @__PURE__ */ jsx(NavGroupContextProvider, { id: groupId, children: /* @__PURE__ */ jsx(
+      Disclosure,
+      {
+        alignItems: "stretch",
+        "aria-labelledby": groupId,
+        asChild: true,
+        defaultOpen,
+        display: "flex",
+        flexDirection: "column",
+        ref,
+        role: "group",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+NavGroup.displayName = "@optiaxiom/react/NavGroup";
+
+export { NavGroup };

package/dist/packages/react/src/nav-group-content/NavGroupContent.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DisclosureContent } from '../disclosure-content/DisclosureContent.js';
+
+const NavGroupContent = forwardRef(
+  ({ children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      DisclosureContent,
+      {
+        display: "flex",
+        flexDirection: "column",
+        gap: "4",
+        p: "0",
+        pt: "4",
+        ref,
+        role: "list",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavGroupContent.displayName = "@optiaxiom/react/NavGroupContent";
+
+export { NavGroupContent };

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,
+        mt: "8",
+        mx: "8",
+        px: "12",
+        py: "4",
+        ref,
+        w: "auto",
+        ...props,
+        children
+      }
+    );
+  }
+);
+NavGroupLabel.displayName = "@optiaxiom/react/NavGroupLabel";
+
+export { NavGroupLabel };

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-xcn_ZlL-.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-BgJJG2w1.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-CX-cT960.css';
+import './../../../../assets/src/nav-item/NavItem.css.ts.vanilla-brz7ryuC.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',mx:'8',pr:'10',rounded:'md',textAlign:'start',transition:'colors'},'_5vs0of']});
+var label = recipeRuntime({base:[{alignItems:'center',display:'flex',flex:'1',gap:'10',justifyContent:'space-between',overflow:'hidden'},'_9nqrtc'],variants:{expanded:{false:'_129voux',true:'_8c975q'}}});
 
-export { item };
+export { item, label };

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

@@ -1,45 +1,59 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Button } from '../button/Button.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Flex } from '../flex/Flex.js';
+import { Icon } from '../icon/Icon.js';
 import { useSidebarContext } from '../sidebar-context/SidebarContext.js';
+import { Text } from '../text/Text.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { Transition } from '../transition/Transition.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
-import { item } from './NavItem-css.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { item, label } from './NavItem-css.js';
 
 const NavItem = forwardRef(
-  ({ active, addonAfter, asChild, children, className, ...props }, ref) => {
-    const { animations, expanded } = useSidebarContext("NavItem");
+  ({
+    active,
+    addonAfter,
+    asChild,
+    children,
+    className,
+    disabled,
+    icon,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const { boxProps, restProps } = extractBoxProps(props);
+    const { expanded } = useSidebarContext("NavItem");
     let tooltip = null;
     children = decorateChildren({ asChild, children }, (children2) => {
       tooltip = children2;
-      return expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: children2 }) });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Box, { display: "grid", flex: "none", placeItems: "center", size: "lg", children: /* @__PURE__ */ jsx(Icon, { asChild: true, children: icon }) }),
+        /* @__PURE__ */ jsxs(Box, { ...label({ expanded: Boolean(expanded) }), children: [
+          /* @__PURE__ */ jsx(Text, { truncate: true, children: children2 }),
+          addonAfter && /* @__PURE__ */ jsx(Box, { asChild: true, display: "flex", flex: "none", children: fallbackSpan(addonAfter) })
+        ] })
+      ] });
     });
     return /* @__PURE__ */ jsx(Flex, { role: "listitem", children: /* @__PURE__ */ jsx(
       Tooltip,
       {
-        content: !expanded && (props["aria-label"] || tooltip),
+        content: props["aria-label"] || tooltip,
+        disabled: expanded,
         side: "right",
         children: /* @__PURE__ */ jsx(
-          Button,
+          Box,
           {
-            addonAfter: expanded && addonAfter,
-            appearance: "subtle",
-            asChild,
+            asChild: true,
+            "data-disabled": disabled ? "" : undefined,
             "data-state": active ? "active" : undefined,
-            justifyContent: expanded ? "start" : "center",
-            ref,
-            size: "lg",
-            transition: animations ? "colors" : undefined,
             ...item({}, className),
-            ...props,
-            children
+            ...boxProps,
+            children: /* @__PURE__ */ jsx(Comp, { disabled, ref, ...restProps, children })
           }
         )
       }

package/dist/packages/react/src/nav-separator/NavSeparator.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Separator } from '../separator/Separator.js';
+
+const NavSeparator = forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx(Separator, { flex: "none", mx: "20", my: "8", ref, ...props })
+);
+NavSeparator.displayName = "@optiaxiom/react/NavSeparator";
+
+export { NavSeparator };

package/dist/packages/react/src/pagination/Pagination-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-B-b4u8-T.css';
-import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DuMOgkJU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-xcn_ZlL-.css';
+import './../../../../assets/src/pagination/Pagination.css.ts.vanilla-DPYZaMsb.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{justifyContent:'center'},'_1whx4et']});
-var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'kh9cjw'],variants:{animation:{false:{},true:{transition:'transform'}}}});
-var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'_13r19y6']});
+var button = recipeRuntime({base:[{justifyContent:'center'},'nbifgp']});
+var cursor = recipeRuntime({base:[{justifyContent:'center',z:'10'},'_5ib7cy'],variants:{animation:{false:{},true:{transition:'transform'}}}});
+var list = recipeRuntime({base:[{flexDirection:'row',gap:'2'},'omzx87']});
 
 export { button, cursor, list };

package/dist/packages/react/src/pagination/Pagination.js

@@ -15,7 +15,7 @@ import { IconAngleRight } from '../icons/IconAngleRight.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { list, cursor, button } from './Pagination-css.js';
-import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.15.3_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
+import { usePagination } from '../../../../node_modules/.pnpm/@mantine_hooks@7.16.2_react@18.3.1/node_modules/@mantine/hooks/esm/use-pagination/use-pagination.js';
 
 const Pagination = forwardRef(
   ({ defaultPage, disabled, onPageChange, page: pageProp, total, ...props }, ref) => {

package/dist/packages/react/src/paper/Paper-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-xcn_ZlL-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var paper = recipeRuntime({base:{bg:'bg.default',color:'fg.default',shadow:'md',z:'popover'},variants:{elevation:{dialog:{rounded:'lg'},drawer:{},menu:{border:'1',borderColor:'border.secondary',rounded:'lg'}}}});