@optiaxiom/react 0.3.4 → 0.4.0

package/dist/src/{side-nav/SideNav.js → sidenav/Sidenav.js}

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef, useState, useRef, useEffect } from 'react';
 import { Flex } from '../flex/Flex.js';
-import { SideNavContextProvider } from '../side-nav-context/SideNavContext.js';
+import { SidenavContextProvider } from '../sidenav-context/SidenavContext.js';
 
-const SideNav = forwardRef(
+const Sidenav = forwardRef(
   ({
     addonAfter,
     addonBefore,
@@ -25,7 +25,7 @@ const SideNav = forwardRef(
       timerRef.current = window.setTimeout(() => setAnimations(false), 300);
     }, [animations]);
     return /* @__PURE__ */ jsx(
-      SideNavContextProvider,
+      SidenavContextProvider,
       {
         animations,
         expanded,
@@ -70,6 +70,6 @@ const SideNav = forwardRef(
     );
   }
 );
-SideNav.displayName = "@optiaxiom/react/SideNav";
+Sidenav.displayName = "@optiaxiom/react/Sidenav";
 
-export { SideNav };
+export { Sidenav };

package/dist/src/{side-nav-account-item/SideNavAccountItem.js → sidenav-account-item/SidenavAccountItem.js}

@@ -1,14 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
-import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
+import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
 import { Text } from '../text/Text.js';
 import { Transition } from '../transition/Transition.js';
 
-const SideNavAccountItem = forwardRef(({ avatar, name, organization, ...props }, ref) => {
-  const { animations, expanded } = useSideNavContext("SideNavAccountItem");
+const SidenavAccountItem = forwardRef(({ avatar, name, organization, ...props }, ref) => {
+  const { animations, expanded } = useSidenavContext("SidenavAccountItem");
   return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "xs", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
     Flex,
     {
@@ -20,7 +20,7 @@ const SideNavAccountItem = forwardRef(({ avatar, name, organization, ...props },
       textAlign: "start",
       ...props,
       children: /* @__PURE__ */ jsxs("button", { ref, children: [
-        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", children: isValidElement(avatar) && cloneElement(avatar, { rounded: "sm" }) }),
+        /* @__PURE__ */ jsx(Box, { asChild: true, flex: "none", my: "2", rounded: "sm", children: avatar }),
         expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "xs", overflowX: "hidden", children: [
           /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "0", overflowX: "hidden", children: [
             /* @__PURE__ */ jsx(Text, { color: "fg.default", fontWeight: "500", truncate: true, children: name }),
@@ -32,6 +32,6 @@ const SideNavAccountItem = forwardRef(({ avatar, name, organization, ...props },
     }
   ) }) });
 });
-SideNavAccountItem.displayName = "@optiaxiom/react/SideNavAccountItem";
+SidenavAccountItem.displayName = "@optiaxiom/react/SidenavAccountItem";
 
-export { SideNavAccountItem };
+export { SidenavAccountItem };

package/dist/src/sidenav-context/SidenavContext.js

@@ -0,0 +1,5 @@
+import { createContext } from '@radix-ui/react-context';
+
+const [SidenavContextProvider, useSidenavContext] = createContext("Sidenav");
+
+export { SidenavContextProvider, useSidenavContext };

package/dist/src/sidenav-item/SidenavItem-css.js

@@ -0,0 +1,9 @@
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/table-row/TableRow.css.ts.vanilla-g1JsQVd4.css';
+import './../../assets/src/button-base/ButtonBase.css.ts.vanilla-Cdep1j3a.css';
+import './../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-BQWU_ImM.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_1yhtbjl']});
+
+export { item };

package/dist/src/{side-nav-item/SideNavItem.js → sidenav-item/SidenavItem.js}

@@ -3,14 +3,16 @@ import { forwardRef, isValidElement, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
-import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
+import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
 import { Transition } from '../transition/Transition.js';
-import { item } from './SideNavItem-css.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { item } from './SidenavItem-css.js';
 
-const SideNavItem = forwardRef(
+const SidenavItem = forwardRef(
   ({ active, addonAfter, asChild, children, className, ...props }, ref) => {
-    const { animations, expanded } = useSideNavContext("SideNavItem");
+    const { animations, expanded } = useSidenavContext("SidenavItem");
     let tooltip = children;
     if (asChild) {
       const newElement = isValidElement(children) ? children : null;
@@ -18,10 +20,10 @@ const SideNavItem = forwardRef(
       children = newElement ? cloneElement(
         newElement,
         void 0,
-        expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) }) })
+        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children: newElement.props.children }) })
       ) : children;
     } else {
-      children = expanded && /* @__PURE__ */ jsx(Flex, { flex: "1", children: /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) }) });
+      children = expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsx(Box, { whiteSpace: "nowrap", children }) });
     }
     return /* @__PURE__ */ jsx(Flex, { asChild: true, children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
       Tooltip,
@@ -31,7 +33,7 @@ const SideNavItem = forwardRef(
         children: /* @__PURE__ */ jsx(
           Button,
           {
-            addonAfter: expanded && addonAfter,
+            addonAfter: expanded && /* @__PURE__ */ jsx(Box, { asChild: true, ml: "auto", children: fallbackSpan(addonAfter) }),
             appearance: "subtle",
             asChild,
             "data-state": active ? "active" : void 0,
@@ -48,6 +50,6 @@ const SideNavItem = forwardRef(
     ) }) });
   }
 );
-SideNavItem.displayName = "@optiaxiom/react/SideNavItem";
+SidenavItem.displayName = "@optiaxiom/react/SidenavItem";
 
-export { SideNavItem };
+export { SidenavItem };

package/dist/src/{side-nav-toggle/SideNavToggle.js → sidenav-toggle/SidenavToggle.js}

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useSideNavContext } from '../side-nav-context/SideNavContext.js';
-import { SideNavItem } from '../side-nav-item/SideNavItem.js';
+import { useSidenavContext } from '../sidenav-context/SidenavContext.js';
+import { SidenavItem } from '../sidenav-item/SidenavItem.js';
 
-const SideNavToggle = forwardRef(
+const SidenavToggle = forwardRef(
   ({ "aria-label": ariaLabel, children, ...props }, ref) => {
-    const { expanded, onExpandedChange } = useSideNavContext("SideNavToggle");
+    const { expanded, onExpandedChange } = useSidenavContext("SidenavToggle");
     return /* @__PURE__ */ jsx(
-      SideNavItem,
+      SidenavItem,
       {
         "aria-label": ariaLabel || (expanded ? "Collapse" : "Expand"),
         fontWeight: "400",
@@ -19,6 +19,6 @@ const SideNavToggle = forwardRef(
     );
   }
 );
-SideNavToggle.displayName = "@optiaxiom/react/SideNavToggle";
+SidenavToggle.displayName = "@optiaxiom/react/SidenavToggle";
 
-export { SideNavToggle };
+export { SidenavToggle };

package/dist/src/skeleton/Skeleton-css.js

@@ -1,7 +1,7 @@
-import './../../assets/src/layers/layers.css.ts.vanilla-DQSmpGQ1.css';
-import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-CPctgLR_.css';
+import './../../assets/src/layers/layers.css.ts.vanilla-B76KCQ9u.css';
+import './../../assets/src/skeleton/Skeleton.css.ts.vanilla-Chu8YOX_.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_13qat10']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1su3isi']});
 
 export { skeleton };