@optiaxiom/react 0.1.0-next.11 → 0.1.0-next.13

package/dist/assets/src/styles/{theme.css.ts.vanilla-Eou6ov6w.css → theme.css.ts.vanilla-EbjT5N3_.css}

@@ -77,7 +77,7 @@
   --ax-colors-neutral-500: #868FA4;
   --ax-colors-neutral-600: #626A81;
   --ax-colors-neutral-700: #4F576E;
-  --ax-colors-neutral-800: #303645;
+  --ax-colors-neutral-800: #2E3442;
   --ax-colors-neutral-900: #262B37;
   --ax-colors-neutral-1000: #1C2029;
   --ax-colors-neutral-1100: #171A23;
@@ -100,7 +100,7 @@
   --ax-colors-red-50: #FFF7F7;
   --ax-colors-red-100: #FCD6D6;
   --ax-colors-red-200: #F9ACAC;
-  --ax-colors-red-300: #F45959;
+  --ax-colors-red-300: #FC8B8B;
   --ax-colors-red-400: #E31818;
   --ax-colors-red-500: #CC1616;
   --ax-colors-red-600: #B21313;
@@ -140,6 +140,8 @@
   --ax-colors-bg-information-solid: #1668AC;
   --ax-colors-bg-input-disabled: #091E420D;
   --ax-colors-bg-neutral: #F5F6FA;
+  --ax-colors-bg-neutral-inverse: #2E3442;
+  --ax-colors-bg-neutral-inverse-hover: #262B37;
   --ax-colors-bg-neutral-solid: #CACFDC;
   --ax-colors-bg-neutral-solid-hover: #b8becb;
   --ax-colors-bg-success: #E9F7F1;
@@ -163,7 +165,7 @@
   --ax-colors-fg-accent-purple: #4A297F;
   --ax-colors-fg-accent-red: #CC1616;
   --ax-colors-fg-brand: #002894;
-  --ax-colors-fg-default: #262B37;
+  --ax-colors-fg-default: #2E3442;
   --ax-colors-fg-default-inverse: #FFFFFF;
   --ax-colors-fg-disabled: #091E4252;
   --ax-colors-fg-error: #911D1D;
@@ -292,7 +294,8 @@
   --ax-size-sm: 1.5rem;
   --ax-size-md: 2rem;
   --ax-size-lg: 2.5rem;
-  --ax-size-xl: 4rem;
+  --ax-size-xl: 3rem;
+  --ax-size-5xl: 5rem;
   --ax-size-1-2: 50%;
   --ax-size-1-3: 33.333333%;
   --ax-size-2-3: 66.666666%;
@@ -330,8 +333,8 @@
   --ax-zIndex-40: 40;
   --ax-zIndex-50: 50;
   --ax-zIndex-auto: auto;
-  --ax-zIndex-popover: 1500;
-  --ax-zIndex-toast: 1510;
+  --ax-zIndex-popover: 3000;
+  --ax-zIndex-toast: 3010;
 }
 :root.dark {
   --ax-borderRadius-xs: 0.125rem;
@@ -412,7 +415,7 @@
   --ax-colors-neutral-500: #868FA4;
   --ax-colors-neutral-600: #626A81;
   --ax-colors-neutral-700: #4F576E;
-  --ax-colors-neutral-800: #303645;
+  --ax-colors-neutral-800: #2E3442;
   --ax-colors-neutral-900: #262B37;
   --ax-colors-neutral-1000: #1C2029;
   --ax-colors-neutral-1100: #171A23;
@@ -435,7 +438,7 @@
   --ax-colors-red-50: #FFF7F7;
   --ax-colors-red-100: #FCD6D6;
   --ax-colors-red-200: #F9ACAC;
-  --ax-colors-red-300: #F45959;
+  --ax-colors-red-300: #FC8B8B;
   --ax-colors-red-400: #E31818;
   --ax-colors-red-500: #CC1616;
   --ax-colors-red-600: #B21313;
@@ -475,8 +478,10 @@
   --ax-colors-bg-information-solid: #1668AC;
   --ax-colors-bg-input-disabled: #091E420D;
   --ax-colors-bg-neutral: #1e293b;
+  --ax-colors-bg-neutral-inverse: #E9EDF5;
+  --ax-colors-bg-neutral-inverse-hover: #CACFDC;
   --ax-colors-bg-neutral-solid: #E9EDF5;
-  --ax-colors-bg-neutral-solid-hover: #303645;
+  --ax-colors-bg-neutral-solid-hover: #2E3442;
   --ax-colors-bg-success: #082415;
   --ax-colors-bg-success-solid: #03A65D;
   --ax-colors-bg-success-solid-hover: #038047;
@@ -499,7 +504,7 @@
   --ax-colors-fg-accent-red: #F9ACAC;
   --ax-colors-fg-brand: #0037FF;
   --ax-colors-fg-default: #f3f4f6;
-  --ax-colors-fg-default-inverse: #FFFFFF;
+  --ax-colors-fg-default-inverse: #262B37;
   --ax-colors-fg-disabled: #868FA4;
   --ax-colors-fg-error: #CC1616;
   --ax-colors-fg-information: #1668AC;
@@ -627,7 +632,8 @@
   --ax-size-sm: 1.5rem;
   --ax-size-md: 2rem;
   --ax-size-lg: 2.5rem;
-  --ax-size-xl: 4rem;
+  --ax-size-xl: 3rem;
+  --ax-size-5xl: 5rem;
   --ax-size-1-2: 50%;
   --ax-size-1-3: 33.333333%;
   --ax-size-2-3: 66.666666%;
@@ -665,6 +671,6 @@
   --ax-zIndex-40: 40;
   --ax-zIndex-50: 50;
   --ax-zIndex-auto: auto;
-  --ax-zIndex-popover: 1500;
-  --ax-zIndex-toast: 1510;
+  --ax-zIndex-popover: 3000;
+  --ax-zIndex-toast: 3010;
 }

package/dist/assets/src/tabs-list/{TabsList.css.ts.vanilla-CiXRbV1t.css → TabsList.css.ts.vanilla-B8IFbvV2.css}

@@ -1,13 +1,23 @@
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
   ._8mv8n80[data-orientation="horizontal"] {
-    border-bottom-width: 1px;
     flex-direction: row;
-    gap: var(--ax-spacing-lg);
   }
   ._8mv8n80[data-orientation="vertical"] {
-    border-right-width: 1px;
     flex-direction: column;
+  }
+  ._8mv8n81[data-orientation="horizontal"] {
+    border-bottom-width: 1px;
+    gap: var(--ax-spacing-lg);
+  }
+  ._8mv8n81[data-orientation="vertical"] {
+    border-right-width: 1px;
+    gap: var(--ax-spacing-xs);
+  }
+  ._8mv8n82[data-orientation="horizontal"] {
+    gap: var(--ax-spacing-md);
+  }
+  ._8mv8n82[data-orientation="vertical"] {
     gap: var(--ax-spacing-xs);
   }
 }

package/dist/assets/src/toast/{Toast.css.ts.vanilla-DPyqeeIY.css → Toast.css.ts.vanilla-N6bXbnrT.css}

@@ -22,13 +22,18 @@
 }
 @layer optiaxiom._1kfj4ga1;
 @layer optiaxiom._1kfj4ga1 {
-  ._1egjidm5 {
-    border-color: var(--_1egjidm0);
+  ._1egjidm5:focus-visible {
+    outline: 2px solid var(--ax-colors-outline-brand);
+    outline-offset: 1px;
   }
   ._1egjidm5[data-state="closed"] {
     animation: _1egjidm2 100ms ease-in;
     opacity: 0;
   }
+  ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
+    transition: translate 100ms ease-in 100ms;
+    translate: 0 -100%;
+  }
   ._1egjidm5[data-state="open"] {
     animation: _1egjidm3 150ms cubic-bezier(0.16, 1, 0.3, 1);
   }
@@ -58,26 +63,28 @@
   [data-position^="bottom"] ._1egjidm5:first-child {
     margin-bottom: auto;
   }
+  [data-position^="bottom"] ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
+    translate: 0 100%;
+  }
   [data-position^="top"] ._1egjidm5:last-child {
     margin-top: auto;
   }
+  [data-position^="top"] ._1egjidm5[data-state="closed"] ~ ._1egjidm5 {
+    translate: 0 -100%;
+  }
   ._1egjidm6 {
-    --_1egjidm0: var(--ax-colors-border-brand);
+    --_1egjidm0: var(--ax-colors-red-300);
   }
   ._1egjidm7 {
-    --_1egjidm0: var(--ax-colors-border-error);
+    --_1egjidm0: var(--ax-colors-fg-default-inverse);
   }
   ._1egjidm8 {
-    --_1egjidm0: var(--ax-colors-border-active);
+    --_1egjidm0: var(--ax-colors-green-400);
   }
   ._1egjidm9 {
-    --_1egjidm0: var(--ax-colors-border-success);
+    --_1egjidm0: var(--ax-colors-yellow-300);
   }
   ._1egjidma {
-    --_1egjidm0: var(--ax-colors-border-warning);
-  }
-  ._1egjidmb {
-    align-self: start;
     color: var(--_1egjidm0);
   }
 }

package/dist/assets/src/toast-provider/{ToastProvider.css.ts.vanilla-iuWIkpzW.css → ToastProvider.css.ts.vanilla-C2Olq0Jl.css}

@@ -3,37 +3,32 @@
   .kzhil00 {
     outline: none;
     position: fixed;
-    width: 100%;
+    scrollbar-gutter: stable;
   }
-  .kzhil02 {
+  .kzhil01 {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
   }
-  .kzhil03 {
+  .kzhil02 {
     bottom: 0;
     left: 0;
   }
-  .kzhil04 {
+  .kzhil03 {
     bottom: 0;
     right: 0;
   }
-  .kzhil05 {
+  .kzhil04 {
     left: 50%;
     top: 0;
     transform: translateX(-50%);
   }
-  .kzhil06 {
+  .kzhil05 {
     left: 0;
     top: 0;
   }
-  .kzhil07 {
+  .kzhil06 {
     right: 0;
     top: 0;
   }
-  @media screen and (min-width: 37.5rem) {
-    .kzhil01 {
-      width: 384px;
-    }
-  }
 }

package/dist/avatar/Avatar-css.js

@@ -1,8 +1,11 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/avatar/Avatar.css.ts.vanilla-CihLlW6Z.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/avatar/Avatar.css.ts.vanilla-DxtsIDr-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',justifyContent:'center',overflow:'hidden',rounded:'full'},'t64xwp0'],variants:{colorScheme:{blue:{bg:'blue.50',color:'blue.500'},brand:{bg:'brand.50',color:'brand.500'},dark:{bg:'dark.50',color:'dark.500'},gray:{bg:'gray.50',color:'gray.500'},green:{bg:'green.50',color:'green.500'},magenta:{bg:'magenta.50',color:'magenta.500'},neutral:{bg:'neutral.50',color:'neutral.500'},orange:{bg:'orange.50',color:'orange.500'},purple:{bg:'purple.50',color:'purple.500'},red:{bg:'red.50',color:'red.500'},slate:{bg:'slate.50',color:'slate.500'},yellow:{bg:'yellow.50',color:'yellow.500'}},size:{xs:{fontSize:'xs',size:'xs'},sm:{fontSize:'sm',size:'sm'},md:{fontSize:'md',size:'md'},lg:{fontSize:'lg',size:'lg'},xl:{fontSize:'xl',size:'xl'}}}});
-var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'},variants:{size:{xs:{px:'4'},sm:{px:'6'},md:{px:'8'},lg:{px:'10'},xl:{px:'20'}}}});
+var avatar = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',fontWeight:'500',justifyContent:'center',overflow:'hidden',rounded:'full'},'t64xwp0'],variants:{colorScheme:{blue:{bg:'blue.500',color:'white'},brand:{bg:'brand.500',color:'white'},dark:{bg:'dark.500',color:'white'},gray:{bg:'gray.500',color:'white'},green:{bg:'green.500',color:'white'},magenta:{bg:'magenta.500',color:'white'},neutral:{bg:'neutral.150',color:'bg.neutral.inverse'},orange:{bg:'orange.500',color:'white'},purple:{bg:'purple.500',color:'white'},red:{bg:'red.500',color:'white'},slate:{bg:'slate.500',color:'white'},yellow:{bg:'yellow.500',color:'white'}},size:{xs:[{fontSize:'xs',fontWeight:'400',size:'xs'},'t64xwp1'],sm:[{fontSize:'xs',size:'sm'},'t64xwp2'],md:[{fontSize:'md',size:'md'},'t64xwp3'],xl:[{fontSize:'2xl',size:'xl'},'t64xwp4'],'5xl':[{fontSize:'4xl',size:'5xl'},'t64xwp5']}}});
+var fallback = recipeRuntime({base:{alignItems:'center',display:'flex',justifyContent:'center',rounded:'inherit',size:'full',textTransform:'uppercase'}});
+var icon = recipeRuntime({base:[{h:'auto'}],variants:{size:{xs:{w:'12'},sm:{w:'12'},md:{w:'16'},xl:{w:'20'},'5xl':{w:'32'}}}});
 
-export { avatar, fallback };
+export { avatar, fallback, icon };

package/dist/avatar/Avatar.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import { forwardRef } from 'react';
+import { forwardRef, useContext } from 'react';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
 import { Box } from '../box/Box.js';
-import { avatar, fallback } from './Avatar-css.js';
+import { avatar, fallback, icon } from './Avatar-css.js';
 
 const FALLBACK_DELAY_IN_MS = 600;
 function getInitialsFromName(name) {
@@ -16,12 +17,14 @@ const Avatar = forwardRef(
     children,
     className,
     colorScheme = "neutral",
-    icon,
+    icon: icon$1,
     name,
-    size = "md",
+    size: sizeProp,
     src,
     ...props
   }, ref) => {
+    const context = useContext(AvatarContext);
+    const size = sizeProp || context?.size || "md";
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -30,7 +33,7 @@ const Avatar = forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs(RadixAvatar.Root, { ref, children: [
           /* @__PURE__ */ jsx(Box, { asChild: true, objectFit: "cover", rounded: "inherit", size: "full", children: /* @__PURE__ */ jsx(RadixAvatar.Image, { alt: name, src }) }),
-          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({ size }), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon ? icon : name ? getInitialsFromName(name) : children }) })
+          /* @__PURE__ */ jsx(Box, { asChild: true, ...fallback({}), children: /* @__PURE__ */ jsx(RadixAvatar.Fallback, { delayMs: FALLBACK_DELAY_IN_MS, children: icon$1 ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : name ? getInitialsFromName(name) : children }) })
         ] })
       }
     );

package/dist/avatar-context/AvatarContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const AvatarContext = createContext({
+  size: void 0
+});
+
+export { AvatarContext };

package/dist/avatar-group/AvatarGroup-css.js

@@ -0,0 +1,7 @@
+import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
+import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var avatarGroup = recipeRuntime({base:['_11600940',{display:'flex'}]});
+
+export { avatarGroup };

package/dist/avatar-group/AvatarGroup.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { AvatarContext } from '../avatar-context/AvatarContext.js';
+import { Box } from '../box/Box.js';
+import { avatarGroup } from './AvatarGroup-css.js';
+
+const AvatarGroup = forwardRef(
+  ({ children, className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...avatarGroup({}, className), ...props, children: /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { size }, children }) });
+  }
+);
+AvatarGroup.displayName = "@optiaxiom/react/AvatarGroup";
+
+export { AvatarGroup };

package/dist/axiom-provider/AxiomProvider.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+
+const AxiomProvider = ({ children, tooltip }) => /* @__PURE__ */ jsx(RadixTooltip.Provider, { ...tooltip, children });
+AxiomProvider.displayName = "@optiaxiom/react/AxiomProvider";
+
+export { AxiomProvider };

package/dist/badge/Badge-css.js

@@ -1,8 +1,8 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
-import './../assets/src/badge/Badge.css.ts.vanilla-DcRGjqhS.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/badge/Badge.css.ts.vanilla-D5YRrHke.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',leading:'none',rounded:'full'},'diw4ub4'],variants:{colorScheme:{danger:'diw4ub5',information:'diw4ub6',neutral:'diw4ub7',primary:'diw4ub8',success:'diw4ub9',warning:'diw4uba'},variant:{light:'diw4ubb',solid:'diw4ubc',white:'diw4ubd'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',leading:'none',rounded:'full'},'diw4ub4'],variants:{colorScheme:{danger:'diw4ub5',information:'diw4ub6',neutral:'diw4ub7',primary:'diw4ub8',success:'diw4ub9',warning:'diw4uba'},variant:{light:'diw4ubb',solid:'diw4ubc'}}});
 
 export { badge };

package/dist/box/Box-css.js

@@ -1,6 +1,6 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
-import './../assets/src/box/Box.css.ts.vanilla-Be3pFtBa.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/box/Box.css.ts.vanilla-D1mbecuN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var box = recipeRuntime({base:'_1jn0ep0'});

package/dist/box/Box.js

@@ -3,23 +3,32 @@ import '@fontsource-variable/fira-code';
 import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import 'inter-ui/inter-variable.css';
-import { forwardRef } from 'react';
+import { createContext, forwardRef, useContext } from 'react';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import { sprinkles } from '../sprinkles/sprinkles-css.js';
 import { box } from './Box-css.js';
 
+const SprinklesContext = createContext(void 0);
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
     const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(
+    const outerSprinkleProps = useContext(SprinklesContext);
+    if (className && outerSprinkleProps) {
+      for (const [key, value] of Object.entries(outerSprinkleProps)) {
+        if (key in sprinkleProps) {
+          className = (" " + className + " ").replace(" " + sprinkles({ [key]: value }) + " ", " ").trim();
+        }
+      }
+    }
+    return /* @__PURE__ */ jsx(SprinklesContext.Provider, { value: asChild ? sprinkleProps : void 0, children: /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
         ...box({}, clsx(className, sprinkles(sprinkleProps))),
         ...restProps
       }
-    );
+    ) });
   }
 );
 Box.displayName = "@optiaxiom/react/Box";

package/dist/breadcrumb-item/BreadcrumbItem.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { Link } from '../link/Link.js';
+
+const BreadcrumbItem = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Link, { alignItems: "center", display: "flex", ...props, children });
+};
+
+export { BreadcrumbItem };

package/dist/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box.js';
+import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
+import '../sprinkles/sprinkles-css.js';
+import { useBreadcrumbItems } from './useBreadcrumbItems.js';
+
+const Breadcrumbs = forwardRef(
+  ({ children, maxItems, separator = "/", ...props }, ref) => {
+    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const visibleItems = useBreadcrumbItems(children, maxItems, separator);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...sprinkleProps, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsx(Box, { alignItems: "center", asChild: true, display: "flex", gap: "xs", children: /* @__PURE__ */ jsx("ol", { children: visibleItems }) }) }) });
+  }
+);
+Breadcrumbs.displayName = "@optiaxiom/react/Breadcrumbs";
+
+export { Breadcrumbs };

package/dist/breadcrumbs/useBreadcrumbItems.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, Children, isValidElement } from 'react';
+import { BreadcrumbItem } from '../breadcrumb-item/BreadcrumbItem.js';
+import { Menu } from '../menu/Menu.js';
+import { MenuContent } from '../menu-content/MenuContent.js';
+import { MenuItem } from '../menu-item/MenuItem.js';
+import { MenuTrigger } from '../menu-trigger/MenuTrigger.js';
+
+const useBreadcrumbItems = (children, maxItems, separator) => {
+  const visibleItems = useMemo(() => {
+    const childrenArray = Children.toArray(children).filter((child) => isValidElement(child)).filter((child) => child.type === BreadcrumbItem);
+    if (!maxItems || childrenArray.length <= maxItems) {
+      return childrenArray;
+    }
+    const leftItems = Math.floor(maxItems / 2);
+    const rightItems = Math.ceil(maxItems / 2);
+    return [
+      ...childrenArray.slice(0, leftItems),
+      /* @__PURE__ */ jsxs(Menu, { children: [
+        /* @__PURE__ */ jsx(MenuTrigger, { appearance: "secondary", icon: void 0, size: "sm", children: "..." }),
+        /* @__PURE__ */ jsx(MenuContent, { side: "bottom", children: childrenArray.slice(leftItems, -rightItems).map((item, index) => /* @__PURE__ */ jsx(MenuItem, { children: item }, item.props.href || index)) })
+      ] }, "ellipsis"),
+      ...childrenArray.slice(childrenArray.length - rightItems)
+    ];
+  }, [children, maxItems]);
+  return visibleItems.reduce((acc, item, index) => {
+    if (index !== 0) {
+      acc.push(separator);
+    }
+    acc.push(item);
+    return acc;
+  }, []);
+};
+
+export { useBreadcrumbItems };

package/dist/button/Button-css.js

@@ -1,10 +1,11 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
-import './../assets/src/button-group/ButtonGroup.css.ts.vanilla-4BGjgIuZ.css';
-import './../assets/src/button/Button.css.ts.vanilla--8P13svI.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
+import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/button/Button.css.ts.vanilla-BVWox07Y.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flexDirection:'row',gap:'4',justifyContent:'center',overflow:'hidden',transition:'colors'},'_1gqmi2d6'],variants:{colorScheme:{danger:'_1gqmi2d7',neutral:'_1gqmi2d8',primary:'_1gqmi2d9'},iconOnly:{false:{},true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',h:'md'},lg:{fontSize:'lg',h:'lg'}},variant:{outline:'_1gqmi2da',solid:'_1gqmi2db',subtle:'_1gqmi2dc'}},variantsCompounded:[{style:'_1gqmi2dd',variants:{colorScheme:'neutral',variant:'outline'}},{style:'_1gqmi2de',variants:{iconOnly:true,size:'sm'}},{style:'_1gqmi2df',variants:{iconOnly:false,size:'sm'}},{style:'_1gqmi2dg',variants:{iconOnly:true,size:'md'}},{style:'_1gqmi2dh',variants:{iconOnly:false,size:'md'}},{style:'_1gqmi2di',variants:{iconOnly:true,size:'lg'}},{style:'_1gqmi2dj',variants:{iconOnly:false,size:'lg'}}]});
-var icon = recipeRuntime({variants:{position:{end:{},start:{}},size:{sm:{h:'auto',w:'20'},md:{h:'auto',w:'20'},lg:{h:'auto',w:'20'}}},variantsCompounded:[{style:{ml:'2'},variants:{position:'end',size:'md'}},{style:{mr:'2'},variants:{position:'start',size:'md'}},{style:{ml:'4'},variants:{position:'end',size:'lg'}},{style:{mr:'4'},variants:{position:'start',size:'lg'}}]});
+var button = recipeRuntime({base:[{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1gqmi2d6'],variants:{colorScheme:{danger:'_1gqmi2d7',neutral:'_1gqmi2d8',primary:'_1gqmi2d9'},iconOnly:{false:'_1gqmi2da',true:{}},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1gqmi2db',solid:'_1gqmi2dc',subtle:'_1gqmi2dd'}},variantsCompounded:[{style:'_1gqmi2de',variants:{colorScheme:'neutral',variant:'outline'}},{style:'_1gqmi2df',variants:{iconOnly:true,size:'sm'}},{style:'_1gqmi2dg',variants:{iconOnly:false,size:'sm'}},{style:'_1gqmi2dh',variants:{iconOnly:true,size:'md'}},{style:'_1gqmi2di',variants:{iconOnly:false,size:'md'}},{style:'_1gqmi2dj',variants:{iconOnly:true,size:'lg'}},{style:'_1gqmi2dk',variants:{iconOnly:false,size:'lg'}}]});
+var icon = recipeRuntime({base:{h:'auto',w:'20'}});
+var label = recipeRuntime({base:{flexDirection:'row',gap:'4',mx:'4'}});
 
-export { button, icon };
+export { button, icon, label };

package/dist/button/Button.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slottable, Slot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { Box } from '../box/Box.js';
+import { Flex } from '../flex/Flex.js';
 import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import '../sprinkles/sprinkles-css.js';
-import { button, icon } from './Button-css.js';
+import '../utils/conditions.js';
+import { fallbackSpan } from '../utils/fallbackSpan.js';
+import { icon, label, button } from './Button-css.js';
 
 const appearances = {
   danger: { colorScheme: "danger", variant: "solid" },
@@ -19,22 +22,42 @@ const Button = forwardRef(
     asChild,
     children,
     className,
-    colorScheme,
+    colorScheme: colorSchemeProp,
     disabled,
+    endDecorator,
     icon: icon$1,
     iconPosition = "start",
-    isLoading,
+    loading,
     size = "md",
-    variant,
+    startDecorator,
+    variant: variantProp,
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
     const { restProps, sprinkleProps } = extractSprinkles(props);
     const presetProps = appearances[appearance];
-    const finalColorScheme = colorScheme ?? presetProps.colorScheme;
-    const finalVariant = variant ?? presetProps.variant;
-    const isDisabled = Boolean(disabled || isLoading);
-    const isIconOnly = Boolean(!children && icon$1);
+    const colorScheme = colorSchemeProp ?? presetProps.colorScheme;
+    const variant = variantProp ?? presetProps.variant;
+    const isDisabled = Boolean(disabled || loading);
+    let isIconOnly = Boolean(!children && icon$1);
+    if (asChild) {
+      const newElement = isValidElement(children) ? children : null;
+      isIconOnly = Boolean(!newElement?.props.children && icon$1);
+      children = newElement ? cloneElement(
+        newElement,
+        void 0,
+        isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(newElement.props.children) })
+      ) : children;
+    } else {
+      children = isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 }) : /* @__PURE__ */ jsx(Flex, { asChild: true, ...label(), children: fallbackSpan(children) });
+    }
+    if (icon$1 && !isIconOnly) {
+      if (iconPosition === "start") {
+        startDecorator = /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 });
+      } else if (iconPosition === "end") {
+        endDecorator = /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: icon$1 });
+      }
+    }
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -42,38 +65,18 @@ const Button = forwardRef(
         "data-disabled": isDisabled ? "" : void 0,
         ...button(
           {
-            colorScheme: finalColorScheme,
+            colorScheme,
             iconOnly: isIconOnly,
             size,
-            variant: finalVariant
+            variant
           },
           className
         ),
         ...sprinkleProps,
         children: /* @__PURE__ */ jsxs(Comp, { disabled: isDisabled, ref, ...restProps, children: [
-          !isIconOnly && /* @__PURE__ */ jsx(
-            Box,
-            {
-              asChild: true,
-              ...icon({
-                position: "start",
-                size: icon$1 && iconPosition === "start" ? size : void 0
-              }),
-              children: icon$1 && iconPosition === "start" ? icon$1 : /* @__PURE__ */ jsx("div", {})
-            }
-          ),
-          /* @__PURE__ */ jsx(Slottable, { children: isIconOnly ? /* @__PURE__ */ jsx(Box, { asChild: true, ...icon({ size }), children: icon$1 }) : children }),
-          !isIconOnly && /* @__PURE__ */ jsx(
-            Box,
-            {
-              asChild: true,
-              ...icon({
-                position: "end",
-                size: icon$1 && iconPosition === "end" ? size : void 0
-              }),
-              children: icon$1 && iconPosition === "end" ? icon$1 : /* @__PURE__ */ jsx("div", {})
-            }
-          )
+          startDecorator,
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          endDecorator
         ] })
       }
     );

package/dist/button-group/ButtonGroup-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/button-group/ButtonGroup.css.ts.vanilla-4BGjgIuZ.css';
+import './../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-4BGjgIuZ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var buttonGroup = recipeRuntime({base:'_1sewcgl0'});

package/dist/checkbox/Checkbox-css.js

@@ -1,5 +1,5 @@
 import './../assets/src/styles/layers.css.ts.vanilla-D5zCXZwe.css';
-import './../assets/src/styles/theme.css.ts.vanilla-Eou6ov6w.css';
+import './../assets/src/styles/theme.css.ts.vanilla-EbjT5N3_.css';
 import './../assets/src/control-base/ControlBase.css.ts.vanilla-DGX7Yb9J.css';
 import './../assets/src/checkbox/Checkbox.css.ts.vanilla-w5cdPwHc.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';