@optiaxiom/react 0.7.8 → 0.8.0

package/dist/packages/react/src/progress/Progress.js

@@ -3,36 +3,25 @@ import { jsx } from 'react/jsx-runtime';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { indicator } from './Progress-css.js';
+import { progress, indicator } from './Progress-css.js';
 
 const Progress = forwardRef(
-  ({ intent = "primary", ...props }, ref) => {
+  ({ className, intent = "primary", ...props }, ref) => {
     const widthPercentage = (props.value ?? 0) / (props.max ?? DEFAULT_MAX) * 100;
     const isValidValue = typeof props.value !== "undefined" && props.value !== null && props.value >= 0 && props.value <= (props.max ?? DEFAULT_MAX);
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...progress({}, className), ...props, children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
       Box,
       {
         asChild: true,
-        bg: "bg.tertiary",
-        h: "8",
-        overflow: "hidden",
-        rounded: "full",
-        ...props,
-        children: /* @__PURE__ */ jsx(ProgressPrimitive.Root, { ref, children: isValidValue && /* @__PURE__ */ jsx(
-          Box,
-          {
-            asChild: true,
-            style: {
-              width: `${widthPercentage}%`
-            },
-            ...indicator({
-              intent
-            }),
-            children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
-          }
-        ) })
+        style: {
+          width: `${widthPercentage}%`
+        },
+        ...indicator({
+          intent
+        }),
+        children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {})
       }
-    );
+    ) }) });
   }
 );
 const DEFAULT_MAX = 100;

package/dist/packages/react/src/radio/Radio-css.js

@@ -1,12 +1,12 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-ulBg-QS9.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CZbdcPZG.css';
-import './../../../../assets/src/radio/Radio.css.ts.vanilla-75zEMYQk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DQf8X4KK.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BgZ4qGHG.css';
+import './../../../../assets/src/radio/Radio.css.ts.vanilla-dPxC1ZT8.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'16'},'_1al2025'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'y5aqfv']});
-var input = recipeRuntime({base:'_1wy7yhb'});
-var radio = recipeRuntime({base:'_1q81mwc'});
+var control = recipeRuntime({base:[{bg:'bg.default',border:'1',p:'2',rounded:'full',size:'2xs'},'rsvqp1'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var indicator = recipeRuntime({base:[{rounded:'inherit',size:'full'},'_1t693me']});
+var input = recipeRuntime({base:'luj9wy'});
+var radio = recipeRuntime({base:'sxr1tr'});
 
 export { control, indicator, input, radio };

package/dist/packages/react/src/radio-group/RadioGroup.js

@@ -7,10 +7,10 @@ import { mapResponsiveValue } from '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 
 const mapGapToOrientation = {
-  column: "sm",
-  "column-reverse": "sm",
-  row: "md",
-  "row-reverse": "md"
+  column: "12",
+  "column-reverse": "12",
+  row: "16",
+  "row-reverse": "16"
 };
 const RadioGroup = forwardRef(
   ({

package/dist/packages/react/src/search-input/SearchInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-bEHnI2w3.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/search-input/SearchInput.css.ts.vanilla-By--5a52.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var clear = recipeRuntime({base:[{my:'-2',size:'sm'},'_51dghh']});
-var search = recipeRuntime({base:'_10xlvra'});
+var clear = recipeRuntime({base:[{size:'sm'},'uggr39']});
+var search = recipeRuntime({base:'_1v9akx0'});
 
 export { clear, search };

package/dist/packages/react/src/select-content/SelectContent-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-Dj_xmITF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/select-content/SelectContent.css.ts.vanilla-BNDxClit.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:['_1qlxchd']});
+var content = recipeRuntime({base:['_1e6kdyf']});
 
 export { content };

package/dist/packages/react/src/select-content/SelectContent.js

@@ -12,7 +12,7 @@ import { SelectContentImpl } from './SelectContentImpl.js';
 const SelectContent = forwardRef(
   ({ children, loading, ...props }, ref) => {
     const { isOpen } = useSelectContext("SelectContent");
-    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "md", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) });
+    return isOpen && /* @__PURE__ */ jsx(Portal, { asChild: true, children: /* @__PURE__ */ jsx(ModalLayer, { children: /* @__PURE__ */ jsx(MenuListbox, { asChild: true, provider: "popper", children: /* @__PURE__ */ jsx(SelectContentImpl, { ref, ...props, children: loading ? /* @__PURE__ */ jsx(Box, { display: "flex", justifyContent: "center", p: "16", children: /* @__PURE__ */ jsx(Spinner, {}) }) : children }) }) }) });
   }
 );
 SelectContent.displayName = "@optiaxiom/react/SelectContent";

package/dist/packages/react/src/separator/Separator-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/separator/Separator.css.ts.vanilla-DIpzv9hK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/separator/Separator.css.ts.vanilla-yVJAd9DI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 import { createSprinkles } from '../../../../node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.3_patch_hash_eh2tyazhmaumpwivglvpekok3e_@vanilla-extract_css@1_wytlbii6gxwkkass3c6wfp66jm/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js';
 
-var base = recipeRuntime({base:{bg:'border.default'}});
-var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','lg','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'qrwr73',md:'_1lmrpci',lg:'_12ab0k2',base:'g8qsqm'},defaultClass:'g8qsqm'},vertical:{conditions:{sm:'_1dsyn27',md:'_1u1n6ur',lg:'hyb63w',base:'_1cjpjs1'},defaultClass:'_1cjpjs1'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
+var base = recipeRuntime({base:{bg:'bg.tertiary.hovered'}});
+var separator = createSprinkles((function(){var x={conditions:{defaultCondition:'base',conditionNames:['sm','md','base'],responsiveArray:['base','sm','md']},styles:{orientation:{values:{horizontal:{conditions:{sm:'_1q7hcxh',md:'_1qj0qb0',base:'_1y44xsf'},defaultClass:'_1y44xsf'},vertical:{conditions:{sm:'_1rj39q1',md:'_5eq2io',base:'ut8f99'},defaultClass:'ut8f99'}},responsiveArray:undefined}}};x.styles.orientation.responsiveArray=x.conditions.responsiveArray;return x;}()));
 
 export { base, separator };

package/dist/packages/react/src/sidenav/Sidenav.js

@@ -41,8 +41,8 @@ const Sidenav = forwardRef(
             flex: "1",
             gap: "0",
             overflow: "hidden",
-            pb: "xs",
-            pt: "md",
+            pb: "8",
+            pt: "16",
             transition: animations ? "all" : void 0,
             w: expanded ? "224" : "56",
             children: /* @__PURE__ */ jsx("nav", { "aria-label": "Main", ref, children })

package/dist/packages/react/src/sidenav-account-item/SidenavAccountItem.js

@@ -10,19 +10,19 @@ import { Transition } from '../transition/Transition.js';
 
 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(
+  return /* @__PURE__ */ jsx(Flex, { asChild: true, my: "8", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
     Flex,
     {
       asChild: true,
       flexDirection: "row",
-      gap: "xs",
-      mx: "xs",
+      gap: "8",
+      mx: "8",
       p: "4",
       textAlign: "start",
       ...props,
       children: /* @__PURE__ */ jsxs("button", { ref, children: [
         /* @__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: [
+        expanded && /* @__PURE__ */ jsx(Transition, { skipAnimations: !animations, children: /* @__PURE__ */ jsxs(Flex, { flex: "1", flexDirection: "row", gap: "8", 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 }),
             /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", fontSize: "sm", truncate: true, children: organization })

package/dist/packages/react/src/sidenav-body/SidenavBody.js

@@ -18,7 +18,7 @@ const SidenavBody = forwardRef(
         justifyContent: "start",
         overflowX: "hidden",
         overflowY: "auto",
-        py: "xs",
+        py: "8",
         w: "full",
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })

package/dist/packages/react/src/sidenav-footer/SidenavFooter.js

@@ -13,10 +13,10 @@ const SidenavFooter = forwardRef(
       Flex,
       {
         asChild: true,
-        gap: "xs",
+        gap: "8",
         mt: "auto",
         overflowX: "hidden",
-        py: "xs",
+        py: "8",
         ...sprinkleProps,
         children: /* @__PURE__ */ jsx("ul", { ref, ...restProps, children })
       }

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-ulBg-QS9.css';
-import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DUdGS-Ne.css';
-import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-jzc4nqG6.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/table-row/TableRow.css.ts.vanilla-DQf8X4KK.css';
+import './../../../../assets/src/button-base/ButtonBase.css.ts.vanilla-DRakNEUr.css';
+import './../../../../assets/src/sidenav-item/SidenavItem.css.ts.vanilla-QATO8oXy.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'xs',textAlign:'start'},'_1nk9275']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'8',textAlign:'start'},'_1mjrena']});
 
 export { item };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-HE72EUAE.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/skeleton/Skeleton.css.ts.vanilla-Bc7MzQWG.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'bg.default',display:'block'},'_1omknvd']});
+var skeleton = recipeRuntime({base:[{animation:'pulse',bg:'bg.secondary',color:'fg.default.inverse',display:'block'},'cfsajq']});
 
 export { skeleton };

package/dist/packages/react/src/spinner/Spinner-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/spinner/Spinner.css.ts.vanilla-DxcYRSgz.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var track = recipeRuntime({variants:{appearance:{'default':'m36dmt',inverse:'aoidqf'}}});
+
+export { track };

package/dist/packages/react/src/spinner/Spinner.js

@@ -4,14 +4,11 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { Flex } from '../flex/Flex.js';
 import { Transition } from '../transition/Transition.js';
+import { track } from './Spinner-css.js';
 
-const mapAppearanceToBg = {
-  default: "spinner.bg.default",
-  inverse: "spinner.bg.inverse"
-};
 const mapAppearanceToFg = {
-  default: "spinner.fg.default",
-  inverse: "spinner.fg.inverse"
+  default: "fg.spinner.default",
+  inverse: "fg.spinner.inverse"
 };
 const Spinner = forwardRef(
   ({ appearance = "default", children, size = "md", ...props }, ref) => {
@@ -34,7 +31,7 @@ const Spinner = forwardRef(
               width: 16,
               xmlns: "http://www.w3.org/2000/svg",
               children: [
-                /* @__PURE__ */ jsx(Box, { asChild: true, color: mapAppearanceToBg[appearance], children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(Box, { asChild: true, ...track({ appearance }), children: /* @__PURE__ */ jsx(
                   "circle",
                   {
                     cx: "8",

package/dist/packages/react/src/spotlight-content/SpotlightContent.js

@@ -26,7 +26,7 @@ const SpotlightContent = forwardRef(({ "aria-label": ariaLabel, children, size:
       "aria-describedby": void 0,
       gap: "0",
       overflow: "hidden",
-      pb: "lg",
+      pb: "24",
       ref,
       transitionType: "pop",
       ...props,

package/dist/packages/react/src/spotlight-empty/SpotlightEmpty.js

@@ -5,7 +5,7 @@ import { ListboxEmpty } from '../listbox-empty/ListboxEmpty.js';
 
 const SpotlightEmpty = forwardRef(
   (props, ref) => {
-    return /* @__PURE__ */ jsx(ListboxEmpty, { fontSize: "lg", gap: "sm", p: "xl", ref, ...props });
+    return /* @__PURE__ */ jsx(ListboxEmpty, { fontSize: "lg", gap: "12", p: "32", ref, ...props });
   }
 );
 SpotlightEmpty.displayName = "@optiaxiom/react/SpotlightEmpty";

package/dist/packages/react/src/spotlight-input/SpotlightInput-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-UEkxsQce.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/spotlight-input/SpotlightInput.css.ts.vanilla-3EuGOlxI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'obuqyc']});
+var input = recipeRuntime({base:[{border:'0',borderB:'1',borderColor:'border.secondary',rounded:'none'},'dflyoh']});
 
 export { input };

package/dist/packages/react/src/spotlight-input/SpotlightInput.js

@@ -18,7 +18,7 @@ const SpotlightInput = forwardRef(
         ] }),
         addonBefore: /* @__PURE__ */ jsx(IconMagnifyingGlass, {}),
         ref,
-        size: "2xl",
+        size: "xl",
         ...input({}, className),
         ...props
       }

package/dist/packages/react/src/spotlight-label/SpotlightLabel.js

@@ -11,9 +11,9 @@ const SpotlightLabel = forwardRef(
         color: "fg.default",
         fontSize: "lg",
         fontWeight: "600",
-        pb: "sm",
-        pt: "md",
-        px: "lg",
+        pb: "12",
+        pt: "16",
+        px: "24",
         ref,
         ...props,
         children

package/dist/packages/react/src/spotlight-radio-item/SpotlightRadioItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-BisnZ-RI.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/spotlight-radio-item/SpotlightRadioItem.css.ts.vanilla-CeARKmQ3.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{fontWeight:'500',mx:'lg',px:'md',py:'sm'},'o9ekpg']});
+var item = recipeRuntime({base:[{fontWeight:'500',mx:'24',px:'16',py:'12'},'_6f4j89']});
 
 export { item };

package/dist/packages/react/src/spotlight-scroll-area/SpotlightScrollArea.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { ListboxScrollArea } from '../listbox-scroll-area/ListboxScrollArea.js';
 
-const SpotlightScrollArea = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxScrollArea, { gap: "xs", ref, ...props }));
+const SpotlightScrollArea = forwardRef((props, ref) => /* @__PURE__ */ jsx(ListboxScrollArea, { gap: "8", ref, ...props }));
 SpotlightScrollArea.displayName = "@optiaxiom/react/SpotlightScrollArea";
 
 export { SpotlightScrollArea };

package/dist/packages/react/src/spotlight-sub/SpotlightSub.js

@@ -6,7 +6,7 @@ import { Flex } from '../flex/Flex.js';
 
 const SpotlightSub = forwardRef(
   ({ children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "xs", pt: "sm", px: "lg", children }) });
+    return /* @__PURE__ */ jsx(CommandSub, { asChild: true, ref, ...props, children: /* @__PURE__ */ jsx(Flex, { flexDirection: "row", gap: "8", pt: "12", px: "24", children }) });
   }
 );
 SpotlightSub.displayName = "@optiaxiom/react/SpotlightSub";

package/dist/packages/react/src/spotlight-sub-item/SpotlightSubItem-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-BHmPmZ47.css';
-import './../../../../assets/src/badge/Badge.css.ts.vanilla-u1Rwrtq3.css';
-import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-CsQct9zF.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-itR_SjVM.css';
+import './../../../../assets/src/badge/Badge.css.ts.vanilla-CHk_Hm4E.css';
+import './../../../../assets/src/spotlight-sub-item/SpotlightSubItem.css.ts.vanilla-CrbbcLca.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_7a4clf',true:'ymvt6n'}}});
+var item = recipeRuntime({base:[{cursor:'pointer'}],variants:{active:{false:'_1cuc0fp',true:'_1r753dm'}}});
 
 export { item };