@optiaxiom/react 1.7.13 → 1.8.1

package/dist/esm/packages/react/src/calendar/Calendar.js

@@ -8,7 +8,7 @@ import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { Clock } from '../clock/Clock.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { usePopoverContentContext } from '../popover/PopoverContentContext.js';
 import '../popover/PopoverContext.js';
 import { Text } from '../text/Text.js';
@@ -93,14 +93,15 @@ const Calendar = forwardRef(
         setView,
         view,
         children: /* @__PURE__ */ jsxs(
-          Flex,
+          Group,
           {
             bg: "bg.default",
             color: "fg.default",
+            flexDirection: "column",
             fontSize: "md",
             gap: "4",
-            ref,
             ...props,
+            ref,
             children: [
               /* @__PURE__ */ jsx(Box, { asChild: true, ...picker({ side }), children: mode === "single" ? /* @__PURE__ */ jsx(
                 DayPicker,
@@ -169,7 +170,7 @@ const Calendar = forwardRef(
                   today
                 }
               ) }),
-              type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Flex, { gap: "8", mt: "8", children: [
+              type === "datetime-local" && mode == "single" && /* @__PURE__ */ jsxs(Group, { flexDirection: "column", gap: "8", mt: "8", children: [
                 /* @__PURE__ */ jsx(
                   Clock,
                   {

package/dist/esm/packages/react/src/calendar/CalendarDayButton-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-3XOtsElU.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarDayButton.css.ts.vanilla-DQvNx7tA.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'rb6n69'],variants:{appearance:{'default':'_12tbs1i',holiday:[{color:'fg.error'},'hbs6ji'],range_middle:'_927cs3',selected:[{color:'fg.white'},'ty54hh'],weekend:[{color:'fg.tertiary'},'bv5lsk']},range:{end:['_18ui53u'],middle:['_1uamn19'],start:['pt5l4w']}}});
-var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'a7ijod']});
+var button = recipeRuntime({base:[{color:'fg.default',fontSize:'md',size:'md',transition:'colors'},'_1jugbj6'],variants:{appearance:{'default':'apzmtc',holiday:[{color:'fg.error'},'ha0flv'],range_middle:'ej2fd0',selected:[{color:'fg.white'},'_1dszu1b'],weekend:[{color:'fg.tertiary'},'srzdbh']},range:{end:['_2k7bn9'],middle:['_1d8ldm'],start:['_1p9jd6t']}}});
+var today = recipeRuntime({base:[{bg:'bg.accent',mx:'auto',rounded:'full'},'r1nnso']});
 
 export { button, today };

package/dist/esm/packages/react/src/calendar/CalendarGrid-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-OdTHHjog.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarGrid.css.ts.vanilla-BrudO6CI.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'hl9hjf']});
+var grid = recipeRuntime({base:[{display:'flex',flexDirection:'column',gap:'2'},'_1cv8n04']});
 
 export { grid };

package/dist/esm/packages/react/src/calendar/CalendarMonths-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-B5DUmXkm.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarMonths.css.ts.vanilla-zMAPAF3B.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var months = recipeRuntime({base:[{alignItems:'start',flexDirection:'row'},'zfh6se']});
+var months = recipeRuntime({base:[{alignItems:'start',gap:'16'},'lgbywt']});
 
 export { months };

package/dist/esm/packages/react/src/calendar/CalendarMonths.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Months } from 'react-day-picker';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { months } from './CalendarMonths-css.js';
 
 function CalendarMonths({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Flex, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
+  return /* @__PURE__ */ jsx(Group, { asChild: true, ...months(), children: /* @__PURE__ */ jsx(Months, { ...props, children }) });
 }
 CalendarMonths.displayName = "@optiaxiom/react/CalendarMonths";
 

package/dist/esm/packages/react/src/calendar/CalendarNextMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-Wfpn5Fkc.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarNextMonthButton.css.ts.vanilla-DJWNq4a-.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'jlr8ix'});
+var button = recipeRuntime({base:'_9mr1dn'});
 
 export { button };

package/dist/esm/packages/react/src/calendar/CalendarPreviousMonthButton-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-iXXrhens.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/calendar/CalendarPreviousMonthButton.css.ts.vanilla-BEXFVZCa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var button = recipeRuntime({base:'_15gsr4s'});
+var button = recipeRuntime({base:'tafzum'});
 
 export { button };

package/dist/esm/packages/react/src/card/Card-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CmnHkNLK.css';
-import './../../../../assets/src/card/Card.css.ts.vanilla-Cka8vu_w.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-UTrcK4Fi.css';
+import './../../../../assets/src/card/Card.css.ts.vanilla-CSbxEpUk.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var card = recipeRuntime({base:['mz1hvu',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',fontSize:'md',gap:'8',p:'16'},'_1286h4']});
+var card = recipeRuntime({base:['_1fc1j8q',{alignItems:'start',bg:'bg.default',border:'1',borderColor:'border.tertiary',color:'fg.default',flexDirection:'column',fontSize:'md',gap:'8',p:'16'},'_1wnd2hv']});
 
 export { card };

package/dist/esm/packages/react/src/card/Card.js

@@ -4,7 +4,7 @@ import { useId } from '@radix-ui/react-id';
 import { forwardRef } from 'react';
 import '../actions/ActionsContent.js';
 import { ActionsRoot } from '../actions/ActionsRoot.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { card } from './Card-css.js';
 import { CardProvider } from './CardContext.js';
 
@@ -12,7 +12,7 @@ const Card = forwardRef(
   ({ children, className, ...props }, ref) => {
     const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Flex, { ref, ...card({}, className), ...props, children }) }) });
+    return /* @__PURE__ */ jsx(CardProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(ActionsRoot, { asChild: true, children: /* @__PURE__ */ jsx(Group, { ref, ...card({}, className), ...props, children }) }) });
   }
 );
 Card.displayName = "@optiaxiom/react/Card";

package/dist/esm/packages/react/src/card/CardCheckbox-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-bAKNcI_h.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardCheckbox.css.ts.vanilla-_R6ZH1Ik.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var checkbox = recipeRuntime({base:['_15wumcg']});
+var checkbox = recipeRuntime({base:['_13gmzz3']});
 
 export { checkbox };

package/dist/esm/packages/react/src/card/CardHeader-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardHeader.css.ts.vanilla-C2AqvXW8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardHeader.css.ts.vanilla-nHVA2Bhp.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var addon = recipeRuntime({base:[{flex:'none',flexDirection:'row',gap:'8'}],variants:{slot:{after:'ftl8h3',before:'zznslz'}}});
-var content = recipeRuntime({base:[{flex:'1'},'_1k258gj']});
-var header = recipeRuntime({base:[{alignSelf:'stretch',flexDirection:'row',gap:'12',justifyContent:'space-between'},'mt2n56']});
+var addon = recipeRuntime({base:[{flex:'none',gap:'8'}],variants:{slot:{after:'_3qjrwu',before:'_1vl31w4'}}});
+var content = recipeRuntime({base:[{flex:'1'},'vftqbf']});
+var header = recipeRuntime({base:[{alignSelf:'stretch',gap:'12',justifyContent:'space-between'},'_12oqg9w']});
 
 export { addon, content, header };

package/dist/esm/packages/react/src/card/CardHeader.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Heading } from '../heading/Heading.js';
 import { useCardContext } from './CardContext.js';
 import { header, content, addon } from './CardHeader-css.js';
@@ -14,13 +14,13 @@ const CardHeader = forwardRef(
     const { descriptionId, labelId } = useCardContext(
       "@optiaxiom/react/CardHeader"
     );
-    return /* @__PURE__ */ jsxs(Flex, { ref, ...header({}, className), ...props, children: [
+    return /* @__PURE__ */ jsxs(Group, { ref, ...header({}, className), ...props, children: [
       /* @__PURE__ */ jsxs(Box, { ...content(), children: [
         /* @__PURE__ */ jsx(Heading, { fontSize: "md", fontWeight: "500", id: labelId, level: "2", children }),
         description && /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", fontSize: "sm", id: descriptionId, children: description })
       ] }),
-      addonBefore && /* @__PURE__ */ jsx(Flex, { ...addon({ slot: "before" }), children: addonBefore }),
-      addonAfter && /* @__PURE__ */ jsx(Flex, { ...addon({ slot: "after" }), children: addonAfter })
+      addonBefore && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "before" }), children: addonBefore }),
+      addonAfter && /* @__PURE__ */ jsx(Group, { ...addon({ slot: "after" }), children: addonAfter })
     ] });
   }
 );

package/dist/esm/packages/react/src/card/CardImage-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var image = recipeRuntime({base:{objectFit:'cover',rounded:'inherit',size:'full'}});

package/dist/esm/packages/react/src/card/CardPreview-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/card/CardPreview.css.ts.vanilla-CuL8Nhn8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/card/CardPreview.css.ts.vanilla-DwZX_RLV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'wtozru']});
-var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'zum6u8']});
+var overlay = recipeRuntime({base:[{display:'flex',flexWrap:'wrap'},'uu6rrb']});
+var preview = recipeRuntime({base:[{alignSelf:'stretch',display:'grid',placeItems:'center'},'_169b7it']});
 
 export { overlay, preview };

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

@@ -1,12 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { forwardRef, useRef } from 'react';
+import '../suggestion/Suggestion.js';
+import { SuggestionPopover } from '../suggestion/SuggestionPopover.js';
 import { CheckboxContent } from './CheckboxContent.js';
 import { CheckboxControl } from './CheckboxControl.js';
 import { CheckboxRoot } from './CheckboxRoot.js';
 
 const Checkbox = forwardRef(
-  ({ children, description, indeterminate, ...props }, ref) => {
+  ({ children, description, indeterminate, ...props }, outerRef) => {
+    const innerRef = useRef(null);
+    const ref = useComposedRefs(innerRef, outerRef);
     return /* @__PURE__ */ jsxs(
       CheckboxRoot,
       {
@@ -21,7 +26,14 @@ const Checkbox = forwardRef(
               shift: Boolean(children)
             }
           ),
-          (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children })
+          (children || description) && /* @__PURE__ */ jsx(CheckboxContent, { description, children }),
+          props.checked !== void 0 && /* @__PURE__ */ jsx(
+            SuggestionPopover,
+            {
+              currentValue: props.checked,
+              style: { marginTop: -2 }
+            }
+          )
         ]
       }
     );

package/dist/esm/packages/react/src/checkbox/CheckboxControl-css.js

@@ -1,11 +1,11 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-BRtfBAek.css';
-import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-DN6T6NfM.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CzOv6YKg.css';
+import './../../../../assets/src/checkbox/CheckboxControl.css.ts.vanilla-B_1qvg20.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_1bb9u38'],variants:{shift:{false:{},true:{mt:'2'}}}});
-var icon = recipeRuntime({base:[{transition:'all'},'_1imwipg']});
+var control = recipeRuntime({base:[{color:'fg.default.inverse',display:'grid',rounded:'xs',size:'2xs'},'_17ettn3'],variants:{shift:{false:{},true:{mt:'2'}}}});
+var icon = recipeRuntime({base:[{transition:'all'},'_1wjzp77']});
 var indicator = recipeRuntime({base:[{alignItems:'center',display:'flex',justifyContent:'center',p:'2',size:'full'}]});
 
 export { control, icon, indicator };

package/dist/esm/packages/react/src/clock/Clock.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Select } from '../select/Select.js';
 import { SelectContent } from '../select/SelectContent.js';
 import { SelectTrigger } from '../select/SelectTrigger.js';
@@ -29,7 +29,7 @@ const Clock = forwardRef(
       (minute) => minute.padStart(2, "0")
     );
     const periods = ["AM", "PM"];
-    return /* @__PURE__ */ jsxs(Flex, { flexDirection: "row", gap: "4", ref, ...props, children: [
+    return /* @__PURE__ */ jsxs(Group, { gap: "4", ref, ...props, children: [
       /* @__PURE__ */ jsxs(
         Select,
         {

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/code/Code.css.ts.vanilla-TOc_I2h0.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/code/Code.css.ts.vanilla-WpaSI5Z1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var code = recipeRuntime({base:[{fontWeight:'600'},'a8xv8i']});
+var code = recipeRuntime({base:[{fontWeight:'600'},'_1s3k2vc']});
 
 export { code };

package/dist/esm/packages/react/src/command/CommandItem-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/command/CommandItem.css.ts.vanilla-B6j8sj5c.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/command/CommandItem.css.ts.vanilla-BWEtopw1.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var detail = recipeRuntime({base:[{color:'fg.secondary'},'lto7v3']});
+var detail = recipeRuntime({base:[{color:'fg.secondary'},'_10d0b3r']});
 
 export { detail };

package/dist/esm/packages/react/src/command/CommandItem.js

@@ -2,10 +2,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { forwardRef } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
 import { Box } from '../box/Box.js';
 import '../sprinkles/sprinkles.js';
 import '../sprinkles/sprinklesMerge.js';
 import { IconAngleRight } from '../icons/IconAngleRight.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
 import { Text } from '../text/Text.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
@@ -40,6 +45,22 @@ const CommandItem = forwardRef(
       highlightedItem === item ? highlightedItemRef : void 0,
       outerRef
     );
+    const surface = useSurface();
+    const itemSuggestions = item.surface?.type === "property" ? filterSuggestionsBySurface(
+      surface?.suggestions.filter((s) => s.type === "value"),
+      surface?.path,
+      [
+        {
+          name: item.surface.name,
+          type: "property"
+        }
+      ]
+    ) : void 0;
+    const isSuggested = item.surface?.type === "property" && itemSuggestions?.some((s) => {
+      if (item.surface?.type !== "property")
+        return false;
+      return s.value === item.surface.value;
+    }) && !resolveItemProperty(item.selected);
     const itemProps = downshift.getItemProps({
       "aria-posinset": index + 1,
       "aria-selected": selected ?? resolveItemProperty(item.selected),
@@ -119,6 +140,7 @@ const CommandItem = forwardRef(
               /* @__PURE__ */ jsx(Box, { asChild: true, h: "10", w: "auto", children: /* @__PURE__ */ jsx(IconAngleRight, {}) })
             ] }),
             resolveItemProperty(item.label, { inputValue }),
+            isSuggested && /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
             detail$1 && /* @__PURE__ */ jsx(Text, { asChild: true, truncate: true, ...detail(), children: fallbackSpan(detail$1) })
           ] })
         )

package/dist/esm/packages/react/src/command/useCommandItems.js

@@ -4,6 +4,10 @@ import '../field/FieldContext.js';
 import '../utils/conditions.js';
 import 'react/jsx-runtime';
 import '../utils/isHoverSupported.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { buildSurfacePath } from '../surface/buildSurfacePath.js';
+import { filterSuggestionsBySurface } from '../surface/filterSuggestionsBySurface.js';
 import { resolveItemProperty } from './CommandContext.js';
 import { fuzzysearch, score } from './fuzzysearch.js';
 
@@ -17,8 +21,34 @@ const useCommandItems = ({
     }).normalize();
     return "visible" in item ? resolveItemProperty(item.visible, { inputValue: inputValue2 }) : inputValue2 ? fuzzysearch(string, inputValue2) || item.keywords && fuzzysearch(item.keywords, inputValue2) : true;
   });
+  const surface = useSurface();
+  const suggestions = surface?.suggestions.filter((s) => s.type === "value");
   return useMemo(() => {
     const substring = (inputValue ?? "").normalize();
+    const processedSurfaces = /* @__PURE__ */ new Set();
+    const suggestedValues = /* @__PURE__ */ new Map();
+    for (const option of options) {
+      if (option.surface?.type === "property") {
+        const optionSurface = option.surface;
+        const key = option.surface.name;
+        if (processedSurfaces.has(key)) {
+          continue;
+        }
+        processedSurfaces.add(key);
+        filterSuggestionsBySurface(suggestions, surface?.path, [
+          {
+            name: option.surface.name,
+            type: "property"
+          }
+        ])?.forEach((s) => {
+          const path = buildSurfacePath(surface?.path, {
+            name: optionSurface.name,
+            type: optionSurface.type
+          });
+          suggestedValues.set(path, s.value);
+        });
+      }
+    }
     const callback = (parentOption) => (item) => {
       return item.subOptions && substring ? resolveItemProperty(item.subOptions, { inputValue }).flatMap(
         callback(item)
@@ -36,9 +66,13 @@ const useCommandItems = ({
       ] : [];
     };
     return options.flatMap(callback()).sort((a, b) => {
-      return (b.group?.priority ?? 0) + score(b, substring) - ((a.group?.priority ?? 0) + score(a, substring));
+      const aIsSuggested = a.surface?.type === "property" && suggestedValues.get(buildSurfacePath(surface?.path, a.surface)) === a.surface.value;
+      const bIsSuggested = b.surface?.type === "property" && suggestedValues.get(buildSurfacePath(surface?.path, b.surface)) === b.surface.value;
+      const aScore = score(a, substring) + (aIsSuggested ? 1e3 : 0);
+      const bScore = score(b, substring) + (bIsSuggested ? 1e3 : 0);
+      return (b.group?.priority ?? 0) + bScore - ((a.group?.priority ?? 0) + aScore);
     });
-  }, [options, filterFn, inputValue]);
+  }, [options, filterFn, inputValue, suggestions, surface?.path]);
 };
 
 export { useCommandItems };

package/dist/esm/packages/react/src/cover/Cover-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/cover/Cover.css.ts.vanilla-CmnHkNLK.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/cover/Cover.css.ts.vanilla-UTrcK4Fi.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cover = recipeRuntime({variants:{disabled:{false:['_15gqmg3','nxlo92'],true:{}},inset:{false:'_1sxl4b3',true:'_4rpvlc'}}});
+var cover = recipeRuntime({variants:{disabled:{false:['hgnber','_383dvj'],true:{}},inset:{false:'_1rx0rsn',true:'ilnmz0'}}});
 
 export { cover };

package/dist/esm/packages/react/src/data-table/DataTable.js

@@ -1,21 +1,32 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState } from 'react';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { DataTableProvider } from './DataTableContext.js';
 
 const DataTable = forwardRef(
   ({ children, table, ...props }, ref) => {
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    return /* @__PURE__ */ jsx(Flex, { gap: "8", maxH: "full", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsx(
-      DataTableProvider,
+    return /* @__PURE__ */ jsx(
+      Group,
       {
-        highlightedIndex,
-        setHighlightedIndex,
-        table,
-        children
+        flexDirection: "column",
+        gap: "8",
+        maxH: "full",
+        maxW: "full",
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          DataTableProvider,
+          {
+            highlightedIndex,
+            setHighlightedIndex,
+            table,
+            children
+          }
+        )
       }
-    ) });
+    );
   }
 );
 DataTable.displayName = "@optiaxiom/react/DataTable";

package/dist/esm/packages/react/src/data-table/DataTableBody-css.js

@@ -1,13 +1,14 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-B0oL7CJL.css';
-import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-XFsfUWCO.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-D6fsQ5U9.css';
+import './../../../../assets/src/data-table/DataTableBody.css.ts.vanilla-FVKHyEMH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_1vll2xw'],variants:{pinned:{left:'lz10qw',right:'_1u02suo'},pinnedType:{body:'_7xoinc',header:{}}}});
-var cellOffsetVar = 'var(--_19ll4fd)';
-var cellSizeVar = 'var(--bd9v4x)';
-var leftTotalSizeVar = 'var(--_1ysrcnn)';
-var rightTotalSizeVar = 'var(--_1wvt30t)';
-var totalSizeVar = 'var(--_1x73i60)';
+var cell = recipeRuntime({base:[{alignItems:'start',display:'flex'},'_15md1we'],variants:{pinned:{left:'bql7ow',right:'nl4mnl'},pinnedType:{body:'_1vx779r',header:{}},resizable:{false:{},true:'_1rdkkse'}}});
+var cellOffsetVar = 'var(--_1re8nwu)';
+var cellSizeVar = 'var(--_1uk4wp7)';
+var leftTotalSizeVar = 'var(--_1keu7hm)';
+var rightTotalSizeVar = 'var(--ly03ek)';
+var root = recipeRuntime({base:[{display:'flex',flexDirection:'column',maxW:'full',overflow:'hidden',rounded:'lg'},'_86qqqc']});
+var totalSizeVar = 'var(--ffi1i4)';
 
-export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, totalSizeVar };
+export { cell, cellOffsetVar, cellSizeVar, leftTotalSizeVar, rightTotalSizeVar, root, totalSizeVar };