@optiaxiom/react 0.8.2 → 0.10.0

package/dist/packages/react/src/backdrop/Backdrop-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-CZ0R8IPm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/backdrop/Backdrop.css.ts.vanilla-B336xgNM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'xpq40n']});
+var backdrop = recipeRuntime({base:[{bg:'bg.overlay',z:'popover'},'_1aeqqde']});
 
 export { backdrop };

package/dist/packages/react/src/backdrop/Backdrop.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { backdrop } from './Backdrop-css.js';
 
 const Backdrop = forwardRef(

package/dist/packages/react/src/badge/Badge-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-CxenIwSA.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-CSfWmPBg.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_8mfgdr'],variants:{intent:{danger:'_1ke76c',information:'_1o5izzo',neutral:'_6nygeo',primary:'_32os2t',success:'_127nqwh',warning:'_1l8m6tk'},variant:{light:'_1fi9ab3',solid:'_1ks8jp2'}}});
+var badge = recipeRuntime({base:[{display:'inline-flex',fontSize:'sm',fontWeight:'500',justifyContent:'center',px:'8',py:'2',rounded:'full'},'_1eu3xkm'],variants:{intent:{danger:'bngqxc',information:'_1rz7hlw',neutral:'_12tljc0',primary:'hjieqq',success:'_4mci0',warning:'ere56o'},variant:{light:'_1etewrt',solid:'_1votx80'}}});
 
 export { badge };

package/dist/packages/react/src/banner/Banner-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var banner = recipeRuntime({base:[{alignItems:'start',color:'fg.default',flexDirection:'row',fontSize:'md',fontWeight:'500',gap:'12',justifyContent:'space-between',px:'24',py:'12'}],variants:{intent:{danger:{bg:'bg.error.light'},information:{bg:'bg.information.light'},neutral:{bg:'bg.tertiary'},success:{bg:'bg.success.light'},warning:{bg:'bg.warning.light'}}}});

package/dist/packages/react/src/banner/Banner.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useId } from '../../../../node_modules/.pnpm/@reach_auto-id@0.18.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@reach/auto-id/dist/reach-auto-id.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from '@radix-ui/react-id';
 import { forwardRef, createElement } from 'react';
-import { BannerContextProvider } from '../banner-context/BannerContext.js';
 import { Button } from '../button/Button.js';
 import { Flex } from '../flex/Flex.js';
 import { Icon } from '../icon/Icon.js';
@@ -22,12 +21,10 @@ const mapIntentToIcon = {
 };
 const Banner = forwardRef(
   ({ children, className, intent = "neutral", onClose, ...props }, ref) => {
-    const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(BannerContextProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs(
       Flex,
       {
-        "aria-describedby": descriptionId,
         "aria-labelledby": labelId,
         ref,
         role: "alert",
@@ -35,7 +32,7 @@ const Banner = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsx(Icon, { asChild: true, ...icon({ intent }), children: createElement(mapIntentToIcon[intent]) }),
-          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", my: "2", children }),
+          /* @__PURE__ */ jsx(Flex, { flex: "1", gap: "8", id: labelId, my: "2", children }),
           !!onClose && /* @__PURE__ */ jsx(
             Button,
             {
@@ -50,7 +47,7 @@ const Banner = forwardRef(
           )
         ]
       }
-    ) });
+    );
   }
 );
 Banner.displayName = "@optiaxiom/react/Banner";

package/dist/packages/react/src/box/Box-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/box/Box.css.ts.vanilla-CxlsAoSo.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/box/Box.css.ts.vanilla-hYfQOcLk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var box = recipeRuntime({base:'eb02mt'});
+var box = recipeRuntime({base:'_10t1zjp'});
 
 export { box };

package/dist/packages/react/src/box/Box.js

@@ -4,21 +4,21 @@ import '@optiaxiom/globals/fonts';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { version } from '../../package.json.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
 import { sprinkles } from '../sprinkles/sprinkles.js';
 import { sprinklesMerge } from '../sprinkles/sprinklesMerge.js';
 import { box } from './Box-css.js';
+import { extractBoxProps } from './extractBoxProps.js';
 
 const Box = forwardRef(
   ({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsx(
       Comp,
       {
         "data-axiom": version,
         ref,
-        ...box({}, sprinklesMerge(className, sprinkles(sprinkleProps))),
+        ...box({}, sprinklesMerge(className, sprinkles(boxProps))),
         ...restProps
       }
     );

package/dist/packages/react/src/box/extractBoxProps.js

@@ -0,0 +1,19 @@
+import { sprinkles } from '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
+
+function extractBoxProps(props) {
+  const boxProps = {};
+  const restProps = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (sprinkles.properties.has(name)) {
+      if (value !== null && value !== undefined) {
+        boxProps[name] = value;
+      }
+    } else {
+      restProps[name] = value;
+    }
+  }
+  return { boxProps, restProps };
+}
+
+export { extractBoxProps };

package/dist/packages/react/src/breadcrumb/Breadcrumb.js

@@ -2,14 +2,12 @@
 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.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 
 const Breadcrumb = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    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: "8", children: /* @__PURE__ */ jsx("ol", { children }) }) }) });
+  ({ children, className, ...props }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, className, ...boxProps, children: /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", ref, ...restProps, children: /* @__PURE__ */ jsx(Box, { alignItems: "center", asChild: true, display: "flex", gap: "8", children: /* @__PURE__ */ jsx("ol", { children }) }) }) });
   }
 );
 Breadcrumb.displayName = "@optiaxiom/react/Breadcrumb";

package/dist/packages/react/src/breadcrumb-ellipsis/BreadcrumbEllipsis.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { IconEllipsis } from '../icons/IconEllipsis.js';
 
 function BreadcrumbEllipsis({ ...props }) {

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-BCwJOq95.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/breadcrumb-item/BreadcrumbItem.css.ts.vanilla-Cc_-J6NJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'_12phx7h']});
+var item = recipeRuntime({base:[{alignItems:'center',display:'inline-flex'},'m3sti2']});
 
 export { item };

package/dist/packages/react/src/breadcrumb-item/BreadcrumbItem.js

@@ -2,15 +2,13 @@
 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.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { item } from './BreadcrumbItem-css.js';
 
 const BreadcrumbItem = forwardRef(
-  ({ children, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item(), ...sprinkleProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
+  ({ children, className, ...props }, ref) => {
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...item({}, className), ...boxProps, children: /* @__PURE__ */ jsx("li", { ref, ...restProps, children }) });
   }
 );
 BreadcrumbItem.displayName = "@optiaxiom/react/BreadcrumbItem";

package/dist/packages/react/src/breadcrumb-link/BreadcrumbLink-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-CYyMTcl3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/breadcrumb-link/BreadcrumbLink.css.ts.vanilla-Cs1yFXdN.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'_2vnwpj']});
+var link = recipeRuntime({base:[{alignItems:'center',display:'flex',fontSize:'md',h:'md',rounded:'md'},'efdfcm']});
 
 export { link };

package/dist/packages/react/src/breadcrumb-page/BreadcrumbPage.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 
 const BreadcrumbPage = forwardRef(
   ({ ...props }, ref) => {

package/dist/packages/react/src/button-addon/ButtonAddon.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { ButtonLoadable } from '../button-loadable/ButtonLoadable.js';
 
 const ButtonAddon = forwardRef(

package/dist/packages/react/src/button-base/ButtonBase-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-qzXyDEAH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonBase = recipeRuntime({base:['_1a820s4',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'_1cz9anp'],variants:{iconOnly:{false:'_19luy0g',true:{}},intent:{danger:'_5ob8g6',neutral:'_113apm',primary:'_112atqi'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'joyknb',solid:'_1m4uza7',subtle:'_16cc87w'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'snm2kl',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_9d3r3w',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'_1koqiat',variants:{iconOnly:false,size:'lg'}}]});
-var spinner = recipeRuntime({base:[{size:'2xs'},'_1ci4rb1']});
+var buttonBase = recipeRuntime({base:['_1iolpjz',{alignItems:'center',display:'inline-flex',flexDirection:'row',justifyContent:'center',transition:'colors'},'ept7i2'],variants:{iconOnly:{false:'_9686hk',true:{}},intent:{danger:'_1clguk5',neutral:'_1wgxrha',primary:'_1eotsq4'},size:{sm:{fontSize:'sm',h:'sm'},md:{fontSize:'md',gap:'2',h:'md'},lg:{fontSize:'md',gap:'4',h:'lg'}},variant:{outline:'_1ubho4s',solid:'inscnx',subtle:'hm058n'}},variantsCompounded:[{style:{w:'sm'},variants:{iconOnly:true,size:'sm'}},{style:'_79wiam',variants:{iconOnly:false,size:'sm'}},{style:{w:'md'},variants:{iconOnly:true,size:'md'}},{style:'_16j6byo',variants:{iconOnly:false,size:'md'}},{style:{w:'lg'},variants:{iconOnly:true,size:'lg'}},{style:'p08xdr',variants:{iconOnly:false,size:'lg'}}]});
+var spinner = recipeRuntime({base:[{size:'2xs'},'npeuev']});
 
 export { buttonBase, spinner };

package/dist/packages/react/src/button-base/ButtonBase.js

@@ -2,12 +2,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
-import { AnimatePresence } from '../animate-presence/AnimatePresence.js';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { Spinner } from '../spinner/Spinner.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { TransitionGroup } from '../transition-group/TransitionGroup.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import { buttonBase, spinner } from './ButtonBase-css.js';
@@ -33,15 +31,15 @@ const ButtonBase = forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot : "button";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     const { intent, variant } = appearances[appearance];
     return /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
         cursor: disabled ? "not-allowed" : "pointer",
-        "data-disabled": disabled ? "" : void 0,
-        "data-loading": loading ? "" : void 0,
+        "data-disabled": disabled ? "" : undefined,
+        "data-loading": loading ? "" : undefined,
         ...buttonBase(
           {
             iconOnly: Boolean(iconOnly),
@@ -51,9 +49,9 @@ const ButtonBase = forwardRef(
           },
           className
         ),
-        ...sprinkleProps,
+        ...boxProps,
         children: /* @__PURE__ */ jsx(Comp, { disabled, ref, ...restProps, children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(AnimatePresence, { children: loading && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(TransitionGroup, { open: loading, children: /* @__PURE__ */ jsx(
             Spinner,
             {
               appearance: variant === "solid" ? "inverse" : "default",

package/dist/packages/react/src/button-group/ButtonGroup-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var buttonGroup = recipeRuntime({base:'p8ymh1'});
+var buttonGroup = recipeRuntime({base:'_9eb4xc'});
 
 export { buttonGroup };

package/dist/packages/react/src/button-group/ButtonGroup.js

@@ -9,7 +9,7 @@ const ButtonGroup = forwardRef(
     return /* @__PURE__ */ jsx(
       Flex,
       {
-        "data-orientation": gap === "0" ? orientation : void 0,
+        "data-orientation": gap === "0" ? orientation : undefined,
         flexDirection: orientation === "vertical" ? "column" : "row",
         gap,
         ref,

package/dist/packages/react/src/button-loadable/ButtonLoadable-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-LB7W6lTK.css';
-import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-C_kf7cXQ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-qzXyDEAH.css';
+import './../../../../assets/src/button-loadable/ButtonLoadable.css.ts.vanilla-BONtxIgP.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var loadable = recipeRuntime({base:[{transition:'opacity'},'qaocdt']});
+var loadable = recipeRuntime({base:[{transition:'opacity'},'_107kkj0']});
 
 export { loadable };

package/dist/packages/react/src/button-loadable/ButtonLoadable.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { loadable } from './ButtonLoadable-css.js';
 
 const ButtonLoadable = forwardRef(

package/dist/packages/react/src/checkbox/Checkbox-css.js

@@ -1,13 +1,13 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-3J4kgLSl.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DaiPcs9V.css';
-import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-DQ-T1a-J.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/avatar-group/AvatarGroup.css.ts.vanilla-B98X-zHI.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CKQ2Aadr.css';
+import './../../../../assets/src/checkbox/Checkbox.css.ts.vanilla-IE-So8FY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:'fgytt2'});
-var control = recipeRuntime({base:[{color:'fg.default.inverse',rounded:'xs',size:'2xs'},'nickw6'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:['_1ia14nw']});
+var checkbox = recipeRuntime({base:'_1y92krz'});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'m8txzz'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'wu70jv']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
-var input = recipeRuntime({base:'_1rmpgid'});
+var input = recipeRuntime({base:'gqvv34'});
 
 export { checkbox, control, icon, indicator, input };

package/dist/packages/react/src/checkbox/Checkbox.js

@@ -2,11 +2,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { CheckboxCheck } from '../icons/CheckboxCheck.js';
 import { IconMinus } from '../icons/IconMinus.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
 import { ToggleInputContent } from '../toggle-input-content/ToggleInputContent.js';
 import { ToggleInputControl } from '../toggle-input-control/ToggleInputControl.js';
@@ -17,13 +15,13 @@ import { checkbox, input, control, indicator, icon } from './Checkbox-css.js';
 
 const Checkbox = forwardRef(
   ({ children, className, description, indeterminate, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+    const { boxProps, restProps } = extractBoxProps(props);
     return /* @__PURE__ */ jsxs(
       ToggleInput,
       {
         description: !!description,
         ...checkbox({}, className),
-        ...sprinkleProps,
+        ...boxProps,
         children: [
           /* @__PURE__ */ jsx(ToggleInputHiddenInput, { ref, ...input(), ...restProps }),
           /* @__PURE__ */ jsx(ToggleInputControl, { ...control({ shift: Boolean(children) }), children: /* @__PURE__ */ jsx(Box, { ...indicator(), children: /* @__PURE__ */ jsx(Box, { asChild: true, ...icon(), children: indeterminate ? /* @__PURE__ */ jsx(IconMinus, {}) : /* @__PURE__ */ jsx(CheckboxCheck, {}) }) }) }),

package/dist/packages/react/src/code/Code-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-BoILKpeG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-Cgm3ea0I.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{bg:'bg.secondary',display:'inline-block',px:'4',rounded:'sm'},'z02nzz']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_4cz0zy']});
 
 export { code };

package/dist/packages/react/src/code/Code.js

@@ -3,16 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
+import { extractBoxProps } from '../box/extractBoxProps.js';
 import { code } from './Code-css.js';
 
 const Code = forwardRef(
   ({ asChild, children, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "code";
-    const { restProps, sprinkleProps } = extractSprinkles(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...code({}, className), ...sprinkleProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) });
+    const { boxProps, restProps } = extractBoxProps(props);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...code({}, className), ...boxProps, children: /* @__PURE__ */ jsx(Comp, { ref, ...restProps, children }) });
   }
 );
 Code.displayName = "@optiaxiom/react/Code";

package/dist/packages/react/src/combobox-content/ComboboxContent.js

@@ -10,7 +10,7 @@ import { useFieldContext } from '../field-context/useFieldContext.js';
 import { useResponsiveMatches } from '../use-responsive-matches/useResponsiveMatches.js';
 
 const ComboboxContent = forwardRef(
-  ({ children, size: _size, ...props }, ref) => {
+  ({ children, ...props }, ref) => {
     const p = useResponsiveMatches({
       base: "8",
       sm: "4"

package/dist/packages/react/src/combobox-dialog-content/ComboboxDialogContent.js

@@ -6,7 +6,7 @@ import { DialogContent } from '../dialog-content/DialogContent.js';
 import { DialogTitle } from '../dialog-title/DialogTitle.js';
 
 const ComboboxDialogContent = forwardRef(({ "aria-label": ariaLabel, children, minW: _minW, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs(DialogContent, { "aria-describedby": void 0, ref, ...props, children: [
+  return /* @__PURE__ */ jsxs(DialogContent, { ref, ...props, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(DialogTitle, { children: ariaLabel }) }),
     children
   ] });

package/dist/packages/react/src/combobox-popover-content/ComboboxPopoverContent.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { PopoverContent } from '../popover-content/PopoverContent.js';
 
 const ComboboxPopoverContent = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(PopoverContent, { minW: "trigger", ref, ...props });
+  return /* @__PURE__ */ jsx(PopoverContent, { maxH: "sm", minW: "trigger", ref, ...props });
 });
 ComboboxPopoverContent.displayName = "@optiaxiom/react/ComboboxPopoverContent";
 

package/dist/packages/react/src/command/Command.js

@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
 import { CommandContextProvider } from '../command-context/CommandContext.js';
 import { usePortalPatch } from '../downshift/usePortalPatch.js';
 
+const isHoverSupported = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
 function Command({
   children,
   inputValue: inputValueProp,
@@ -30,12 +31,12 @@ function Command({
     onChange: onInputValueChange,
     prop: inputValueProp
   });
-  const [lastInteractionSource, setLastInteractionSource] = useState("keyboard");
+  const [lastInteractionSource, setLastInteractionSource] = useState("pointer");
   const [highlightedIndex, setHighlightedIndex] = usePortalPatch(open);
   const [highlightedSubIndex, setHighlightedSubIndex] = useState(-1);
   const downshift = useCombobox({
     ...props,
-    highlightedIndex,
+    highlightedIndex: highlightedIndex === -1 && isHoverSupported ? items.findIndex((item, index) => !isItemDisabled(item, index)) : highlightedIndex,
     inputValue,
     isItemDisabled,
     isOpen: open,
@@ -43,8 +44,10 @@ function Command({
     itemToKey,
     itemToString,
     onHighlightedIndexChange({ highlightedIndex: highlightedIndex2, type }) {
-      setHighlightedIndex(highlightedIndex2);
-      if (type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp) {
+      if (type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
+        setHighlightedIndex(highlightedIndex2);
+      }
+      if (type === useCombobox.stateChangeTypes.InputKeyDownArrowDown || type === useCombobox.stateChangeTypes.InputKeyDownArrowUp || type === useCombobox.stateChangeTypes.InputKeyDownPageDown || type === useCombobox.stateChangeTypes.InputKeyDownPageUp) {
         setLastInteractionSource("keyboard");
       } else {
         setLastInteractionSource("pointer");
@@ -55,8 +58,15 @@ function Command({
         setHighlightedSubIndex(-1);
       }
     },
-    onIsOpenChange({ isOpen }) {
+    onIsOpenChange({ isOpen, type }) {
       onOpenChange?.(isOpen);
+      if (isOpen) {
+        if (type === useCombobox.stateChangeTypes.InputClick) {
+          setLastInteractionSource("pointer");
+        } else {
+          setLastInteractionSource("keyboard");
+        }
+      }
     },
     onSelectedItemChange({ selectedItem, type }) {
       if (type !== useCombobox.stateChangeTypes.InputBlur) {

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DKTSleIR.css';
-import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-CsD5Lm9p.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-D3B1uZ8j.css';
+import './../../../../assets/src/command-focusable-item/CommandFocusableItem.css.ts.vanilla-0wjHxdop.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:'_3k27hl'});
+var item = recipeRuntime({base:'_1ye7bal'});
 
 export { item };

package/dist/packages/react/src/command-focusable-item/CommandFocusableItem.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { item } from './CommandFocusableItem-css.js';
 
@@ -10,7 +12,7 @@ const CommandFocusableItem = forwardRef(({ children, className, ...props }, ref)
   return /* @__PURE__ */ jsx(
     Box,
     {
-      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : void 0,
+      "data-focus-visible": lastInteractionSource === "keyboard" ? "" : undefined,
       ref,
       ...item({}, className),
       ...props,

package/dist/packages/react/src/command-input/CommandInput.js

@@ -4,13 +4,9 @@ import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { IconMagnifyingGlass } from '../icons/IconMagnifyingGlass.js';
 import { Input } from '../input/Input.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandInput = forwardRef(
-  ({ onKeyDown, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ onKeyDown, size, ...props }, ref) => {
     const {
       downshift,
       highlightedItem,
@@ -23,9 +19,9 @@ const CommandInput = forwardRef(
       Input,
       {
         addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
-        ...sprinkleProps,
+        size,
         ...downshift.getInputProps({
-          ...restProps,
+          ...props,
           onChange: (event) => {
             setInputValue("value" in event.target ? event.target.value : "");
           },

package/dist/packages/react/src/command-item/CommandItem.js

@@ -3,27 +3,23 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useCommandContext } from '../command-context/CommandContext.js';
 import { CommandFocusableItem } from '../command-focusable-item/CommandFocusableItem.js';
-import { extractSprinkles } from '../sprinkles/extractSprinkles.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
 
 const CommandItem = forwardRef(
-  ({ children, item, selected, ...props }, ref) => {
-    const { restProps, sprinkleProps } = extractSprinkles(props);
+  ({ children, item, selected, size, ...props }, ref) => {
     const { downshift, highlightedItem, value } = useCommandContext("CommandItem");
     const itemProps = downshift.getItemProps({
       "aria-selected": selected ?? value?.has(item),
       item,
-      ...restProps
+      ...props
     });
     return /* @__PURE__ */ jsx(
       CommandFocusableItem,
       {
-        "data-disabled": itemProps["aria-disabled"] ? "" : void 0,
-        "data-highlighted": highlightedItem === item ? "" : void 0,
+        "data-disabled": itemProps["aria-disabled"] ? "" : undefined,
+        "data-highlighted": highlightedItem === item ? "" : undefined,
         ref,
+        size,
         tabIndex: -1,
-        ...sprinkleProps,
         ...itemProps,
         children
       }