@optiaxiom/react 1.7.13 → 1.8.1

package/dist/esm/packages/react/src/suggestion/SuggestionPopover.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import '../avatar/AvatarGroup.js';
+import { Button } from '../button/Button.js';
+import '../button/ButtonGroup.js';
+import { Heading } from '../heading/Heading.js';
+import { IconCheck } from '../icons/IconCheck.js';
+import { Popover } from '../popover/Popover.js';
+import '../popover/PopoverAnchor.js';
+import { PopoverContent } from '../popover/PopoverContent.js';
+import { PopoverTrigger } from '../popover/PopoverTrigger.js';
+import { Separator } from '../separator/Separator.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
+import { useSuggestions } from '../surface/useSuggestions.js';
+import { Text } from '../text/Text.js';
+
+const SuggestionPopover = forwardRef(({ currentValue, ...props }, ref) => {
+  const surface = useSurface();
+  useEffect(() => {
+    return surface?.suggestionPopover.register();
+  }, [surface]);
+  const suggestions = useSuggestions("value");
+  const suggestion = suggestions?.find((s) => s.value !== currentValue);
+  if (!suggestion || currentValue === void 0) {
+    return null;
+  }
+  const text = surface?.renderSuggestionValue ? surface.renderSuggestionValue(suggestion.value) : String(suggestion.value);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        appearance: "subtle",
+        "aria-label": "Opal suggestion",
+        icon: /* @__PURE__ */ jsx(Avatar, { fallback: "opal", size: "2xs" }),
+        ref,
+        size: "sm",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { "aria-label": "Suggestion", fontSize: "sm", gap: "4", p: "12", children: [
+      /* @__PURE__ */ jsx(Text, { children: text }),
+      suggestion.reason && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { my: "8" }),
+        /* @__PURE__ */ jsx(Heading, { fontSize: "sm", level: "4", children: "Why this was suggested" }),
+        /* @__PURE__ */ jsx(Text, { color: "fg.secondary", children: suggestion.reason })
+      ] }),
+      /* @__PURE__ */ jsx(Separator, { my: "8" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          icon: /* @__PURE__ */ jsx(IconCheck, {}),
+          justifyContent: "center",
+          onClick: () => {
+            surface?.accept(suggestion.id);
+          },
+          size: "sm",
+          children: "Accept"
+        }
+      )
+    ] })
+  ] });
+});
+SuggestionPopover.displayName = "@optiaxiom/react/SuggestionPopover";
+
+export { SuggestionPopover };

package/dist/esm/packages/react/src/surface/buildSurfacePath.js

@@ -0,0 +1,5 @@
+const buildSurfacePath = (basePath, surface) => {
+  return `${basePath ? `${basePath}/` : ""}${surface.type}<${surface.name}>`;
+};
+
+export { buildSurfacePath };

package/dist/esm/packages/react/src/surface/filterSuggestionsBySurface.js

@@ -0,0 +1,11 @@
+import { buildSurfacePath } from './buildSurfacePath.js';
+
+function filterSuggestionsBySurface(suggestions, path, surfaces) {
+  if (!suggestions || !surfaces?.length) {
+    return suggestions;
+  }
+  const targetPath = surfaces.reduce(buildSurfacePath, path ?? "");
+  return suggestions.filter((s) => s.surface === targetPath);
+}
+
+export { filterSuggestionsBySurface };

package/dist/esm/packages/react/src/surface/useDebouncedTrack.js

@@ -0,0 +1,15 @@
+import { useSurface } from './useSurface.js';
+import { useDebouncedCallback } from '../../../../node_modules/.pnpm/@mantine_hooks@8.2.5_react@18.3.1/node_modules/@mantine/hooks/esm/use-debounced-callback/use-debounced-callback.js';
+
+function useDebouncedTrack() {
+  const { track } = useSurface() ?? {};
+  const debouncedTrack = useDebouncedCallback(
+    (interaction) => {
+      track?.(interaction);
+    },
+    300
+  );
+  return track ? debouncedTrack : void 0;
+}
+
+export { useDebouncedTrack };

package/dist/esm/packages/react/src/surface/useSuggestions.js

@@ -0,0 +1,17 @@
+import { useSurface } from './useSurface.js';
+
+function useSuggestions(type) {
+  const surface = useSurface();
+  if (!surface?.suggestions) {
+    return void 0;
+  }
+  const filtered = surface.suggestions.filter(
+    (s) => s.surface === surface.path
+  );
+  if (!type) {
+    return filtered;
+  }
+  return filtered.filter((s) => s.type === type);
+}
+
+export { useSuggestions };

package/dist/esm/packages/react/src/surface/useSurface.js

@@ -0,0 +1,11 @@
+import { unstable_useSurfaceContext } from '@optiaxiom/globals';
+
+function useSurface(type) {
+  const surface = unstable_useSurfaceContext("@optiaxiom/react/useSurface");
+  if (surface && (!type || surface.type === type)) {
+    return surface;
+  }
+  return void 0;
+}
+
+export { useSurface };

package/dist/esm/packages/react/src/switch/Switch-css.js

@@ -1,12 +1,12 @@
-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/switch/Switch.css.ts.vanilla-amh3c1Uk.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/switch/Switch.css.ts.vanilla-DMtVZw_m.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:[{px:'12',py:'2',rounded:'full',transition:'colors'},'e5mxx5']});
-var input = recipeRuntime({base:'_1vgubbb'});
-var root = recipeRuntime({base:['_1gx72zf','_1ydi6rm']});
-var thumb = recipeRuntime({base:[{display:'block',rounded:'full',transition:'all'},'eexs9d'],variants:{size:{md:'_1bklipr',lg:'_20xk3n'}}});
+var control = recipeRuntime({base:[{px:'12',py:'2',rounded:'full',transition:'colors'},'_1jsef53']});
+var input = recipeRuntime({base:'a3308x'});
+var root = recipeRuntime({base:['_59f3ci','_1e9wxep']});
+var thumb = recipeRuntime({base:[{display:'block',rounded:'full',transition:'all'},'_1hti7pp'],variants:{size:{md:'twepzm',lg:'_18s810s'}}});
 
 export { control, input, root, thumb };

package/dist/esm/packages/react/src/switch/Switch.js

@@ -3,6 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
+import '../suggestion/Suggestion.js';
+import { SuggestionPopover } from '../suggestion/SuggestionPopover.js';
 import { ToggleInput } from '../toggle-input/ToggleInput.js';
 import { ToggleInputContent } from '../toggle-input/ToggleInputContent.js';
 import { ToggleInputControl } from '../toggle-input/ToggleInputControl.js';
@@ -28,7 +30,8 @@ const Switch = forwardRef(
       (children || description) && /* @__PURE__ */ jsxs(ToggleInputContent, { pt: size === "lg" ? "2" : "0", children: [
         children && /* @__PURE__ */ jsx(ToggleInputLabel, { children }),
         description && /* @__PURE__ */ jsx(ToggleInputDescription, { children: description })
-      ] })
+      ] }),
+      props.checked !== void 0 && /* @__PURE__ */ jsx(SuggestionPopover, { currentValue: props.checked })
     ] });
   }
 );

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/Table.css.ts.vanilla-nBnoN9Wy.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/Table.css.ts.vanilla-CWSCJWeT.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var table = recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'bfo0zq'],variants:{layout:{auto:['c6v18t'],fixed:[{display:'grid'},'xvnouo']}}});
-var wrapper = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'vl4ods']});
+var table = recipeRuntime({base:[{color:'fg.default',fontSize:'md',w:'full'},'it7393'],variants:{layout:{auto:['_1ddnubk'],fixed:[{display:'grid'},'mvamcs']}}});
+var wrapper = recipeRuntime({base:[{bg:'bg.default',border:'1',borderColor:'border.tertiary',maxW:'full',overflow:'auto',rounded:'lg'},'va4v9q']});
 
 export { table, wrapper };

package/dist/esm/packages/react/src/table/Table.js

@@ -2,22 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
+import '../sprinkles/sprinkles.js';
+import '../sprinkles/sprinklesMerge.js';
 import { wrapper, table } from './Table-css.js';
 
 const Table = forwardRef(
-  ({ children, className, layout = "auto", style, ...props }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        style,
-        ...wrapper({}, className),
-        ...boxProps,
-        children: /* @__PURE__ */ jsx(Box, { asChild: true, ...table({ layout }), ...restProps, children: /* @__PURE__ */ jsx("table", { children }) })
-      }
-    );
+  ({ children, className, layout = "auto", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Box, { ref, ...wrapper({}, className), ...props, children: /* @__PURE__ */ jsx(Box, { asChild: true, ...table({ layout }), children: /* @__PURE__ */ jsx("table", { children }) }) });
   }
 );
 Table.displayName = "@optiaxiom/react/Table";

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableBody.css.ts.vanilla-Di6LAh0-.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableBody.css.ts.vanilla-Bp2vHi5A.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var body = recipeRuntime({base:['_2wgbdp']});
+var body = recipeRuntime({base:['_1qsmq1t']});
 
 export { body };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-B0oL7CJL.css';
-import './../../../../assets/src/table/TableCell.css.ts.vanilla-B1wGoNFv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-D6fsQ5U9.css';
+import './../../../../assets/src/table/TableCell.css.ts.vanilla-HxTef6QV.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'_1hstzfr'],variants:{pinned:{false:'_23zsvp',true:'hinbz2'}}});
+var cell = recipeRuntime({base:[{borderColor:'border.tertiary',p:'16'},'yadliw'],variants:{pinned:{false:'_1tt73zf',true:'_1p8pb3p'}}});
 
 export { cell };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableHeader.css.ts.vanilla-xaFM2plv.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableHeader.css.ts.vanilla-Ciefr5In.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var header = recipeRuntime({variants:{pinned:{false:{},true:'_7pqc4n'}}});
+var header = recipeRuntime({variants:{pinned:{false:{},true:'_1v2g1sg'}}});
 
 export { header };

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableHeaderCell.css.ts.vanilla-CuR6Aqrk.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableHeaderCell.css.ts.vanilla-TsZaV5Jv.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var cell = recipeRuntime({base:[{borderColor:'border.tertiary'},'y09pbf'],variants:{pinned:{false:'_1w8tohm',true:'ft7qko'}}});
-var content = recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_1ujso8c']});
+var cell = recipeRuntime({base:[{borderColor:'border.tertiary'},'nohy0f'],variants:{pinned:{false:'anc10b',true:'_1rvl47i'}}});
+var content = recipeRuntime({base:[{alignItems:'center',bg:'bg.default',color:'fg.tertiary',display:'flex',fontSize:'sm',fontWeight:'400',size:'full'},'_17cmv9o']});
 
 export { cell, content };

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/table/TableRow.css.ts.vanilla-B0oL7CJL.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/table/TableRow.css.ts.vanilla-D6fsQ5U9.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var row = recipeRuntime({base:['_1c1djxv',{transition:'colors',w:'full'},'_24ueu7']});
+var row = recipeRuntime({base:['k8n4sx',{transition:'colors',w:'full'},'c0rf7f']});
 
 export { row };

package/dist/esm/packages/react/src/tabs/Tabs-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-Uke4EcLY.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/tabs/Tabs.css.ts.vanilla-BzUbbfKJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var tabs = recipeRuntime({base:[{display:'flex'},'_606gky']});
+var tabs = recipeRuntime({base:[{display:'flex'},'_1cmekhh']});
 
 export { tabs };

package/dist/esm/packages/react/src/tabs/Tabs.js

@@ -1,15 +1,42 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import * as RadixTabs from '@radix-ui/react-tabs';
-import { forwardRef } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
+import { useEffectEvent } from '../hooks/useEffectEvent.js';
+import '../field/FieldContext.js';
+import '../utils/conditions.js';
+import '../utils/isHoverSupported.js';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
 import { tabs } from './Tabs-css.js';
 
 const Tabs = forwardRef(
-  ({ children, className, ...props }, ref) => {
+  ({ children, className, onValueChange, ...props }, ref) => {
     const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...tabs({}, className), ...boxProps, children: /* @__PURE__ */ jsx(RadixTabs.Root, { ref, ...restProps, children }) });
+    const surface = useSurface("tab");
+    const { track } = surface ?? {};
+    const trackStable = useEffectEvent(track ?? (() => {
+    }));
+    const [initialValue] = useState(props.value);
+    useEffect(() => {
+      if (initialValue) {
+        trackStable({ id: initialValue, name: "viewed" });
+      }
+    }, [initialValue, trackStable]);
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...tabs({}, className), ...boxProps, children: /* @__PURE__ */ jsx(
+      RadixTabs.Root,
+      {
+        onValueChange: (value) => {
+          onValueChange?.(value);
+          track?.({ id: value, name: "viewed" });
+        },
+        ref,
+        ...restProps,
+        children
+      }
+    ) });
   }
 );
 Tabs.displayName = "@optiaxiom/react/Tabs";

package/dist/esm/packages/react/src/tabs/TabsList-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/tabs/TabsList.css.ts.vanilla-CEEaDjQH.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/tabs/TabsList.css.ts.vanilla-CUAJdij2.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'sxyj0z']});
+var list = recipeRuntime({base:[{borderColor:'border.tertiary',display:'flex'},'nmu5cl']});
 
 export { list };

package/dist/esm/packages/react/src/tabs/TabsTrigger-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/tabs/TabsTrigger.css.ts.vanilla-ufwm0xfS.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/tabs/TabsTrigger.css.ts.vanilla-zcAIQSbX.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var content = recipeRuntime({base:[{flexDirection:'row',gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'_1x10ce1']});
-var trigger = recipeRuntime({base:['dy7lae',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'li7to1']});
+var content = recipeRuntime({base:[{gap:'8',justifyContent:['center','flex-start'],py:'6',rounded:'sm',transition:'colors'},'_1i1dp6l']});
+var trigger = recipeRuntime({base:['_1i5wux2',{flex:['1','initial'],fontSize:'md',fontWeight:'500',py:'4',transition:'colors'},'_1eqfb31']});
 
 export { content, trigger };

package/dist/esm/packages/react/src/tabs/TabsTrigger.js

@@ -5,7 +5,7 @@ import * as RadixTabs from '@radix-ui/react-tabs';
 import { forwardRef } from 'react';
 import { Box } from '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import '../utils/conditions.js';
 import { decorateChildren } from '../utils/decorateChildren.js';
 import '../utils/isHoverSupported.js';
@@ -16,7 +16,7 @@ const TabsTrigger = forwardRef(
   ({ addonAfter, addonBefore, asChild, children, className, value, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const { boxProps, restProps } = extractBoxProps(props);
-    return /* @__PURE__ */ jsx(Box, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { asChild: true, ref, value, ...restProps, children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Flex, { ...content(), children: [
+    return /* @__PURE__ */ jsx(Box, { asChild: true, ...trigger({}, className), ...boxProps, children: /* @__PURE__ */ jsx(RadixTabs.Trigger, { asChild: true, ref, value, ...restProps, children: /* @__PURE__ */ jsx(Comp, { children: decorateChildren({ asChild, children }, (children2) => /* @__PURE__ */ jsxs(Group, { ...content(), children: [
       addonBefore,
       children2,
       addonAfter

package/dist/esm/packages/react/src/text/Text-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/text/Text.css.ts.vanilla-DKnKo9mG.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/text/Text.css.ts.vanilla-Co0Dm9Je.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var text = recipeRuntime((function(){var x={variants:{lineClamp:{'1':[{overflow:'hidden'},'ewjrrl','qu6e2a','_188oey0'],'2':[undefined,'ewjrrl','qu6e2a','_17qh09h'],'3':[undefined,'ewjrrl','qu6e2a','o287ji'],'4':[undefined,'ewjrrl','qu6e2a','_1hwjt60']},truncate:{true:[undefined,'ewjrrl',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
+var text = recipeRuntime((function(){var x={variants:{lineClamp:{'1':[{overflow:'hidden'},'_1pbyqhy','_1acyy6y','o7hui8'],'2':[undefined,'_1pbyqhy','_1acyy6y','_1twusmc'],'3':[undefined,'_1pbyqhy','_1acyy6y','ca19yq'],'4':[undefined,'_1pbyqhy','_1acyy6y','_1ov5smh']},truncate:{true:[undefined,'_1pbyqhy',{whiteSpace:'nowrap'}]}}};x.variants.lineClamp['2'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['3'][0]=x.variants.lineClamp['1'][0];x.variants.lineClamp['4'][0]=x.variants.lineClamp['1'][0];x.variants.truncate.true[0]=x.variants.lineClamp['1'][0];return x;}()));
 
 export { text };

package/dist/esm/packages/react/src/textarea/Textarea-css.js

@@ -0,0 +1,7 @@
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/textarea/Textarea.css.ts.vanilla-Dz_D9brN.css';
+import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
+
+var addon = recipeRuntime({base:'_1vk6tlu'});
+
+export { addon };

package/dist/esm/packages/react/src/textarea/Textarea.js

@@ -4,13 +4,17 @@ import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
+import { Group } from '../group/Group.js';
 import '../input/Input.js';
 import { InputAddon } from '../input/InputAddon.js';
 import { InputControl } from '../input/InputControl.js';
 import { InputRoot } from '../input/InputRoot.js';
+import '../suggestion/Suggestion.js';
+import { SuggestionPopover } from '../suggestion/SuggestionPopover.js';
 import '../utils/conditions.js';
 import { fallbackSpan } from '../utils/fallbackSpan.js';
 import '../utils/isHoverSupported.js';
+import { addon } from './Textarea-css.js';
 import { TextareaAutosize } from './TextareaAutosize.js';
 
 const Slot = createSlot("@optiaxiom/react/Textarea");
@@ -38,7 +42,10 @@ const Textarea = forwardRef(
         children: [
           addonBefore && /* @__PURE__ */ jsx(InputAddon, { asChild: true, children: fallbackSpan(addonBefore) }),
           /* @__PURE__ */ jsx(InputControl, { asChild: true, p: "8", size: "lg", ...restProps, children: /* @__PURE__ */ jsx(TextareaAutosize, { asChild: true, children: /* @__PURE__ */ jsx(Comp, { ref, rows: props.rows ?? 3, children }) }) }),
-          addonAfter && /* @__PURE__ */ jsx(InputAddon, { asChild: true, children: fallbackSpan(addonAfter) })
+          /* @__PURE__ */ jsxs(InputAddon, { ...addon(), children: [
+            props.value !== void 0 && /* @__PURE__ */ jsx(Group, { justifyContent: "end", children: /* @__PURE__ */ jsx(SuggestionPopover, { currentValue: props.value }) }),
+            addonAfter
+          ] })
         ]
       }
     );

package/dist/esm/packages/react/src/textarea/TextareaAutosize-css.js

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/textarea/TextareaAutosize.css.ts.vanilla-BiYN-xob.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/textarea/TextareaAutosize.css.ts.vanilla-DB8jRDBY.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var shadow = recipeRuntime({base:['_1lgk0pw','vybegh']});
-var textarea = recipeRuntime({base:['_1lgk0pw','_19w8h4h'],variants:{resize:{auto:{overflow:'hidden'},none:{},vertical:{}}}});
-var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_19jur3r','_1p8zwp2'],'2':['_19jur3r','h2xfm5'],'3':['_19jur3r','_3lwhwo'],'4':['_19jur3r','kxizoj'],'5':['_19jur3r','_1564tzu']},resize:{auto:{},none:{},vertical:'zjhvk0'}}});
+var shadow = recipeRuntime({base:['_5nxlt0','ctlzv1']});
+var textarea = recipeRuntime({base:['_5nxlt0','_5czp2s'],variants:{resize:{auto:{overflow:'hidden'},none:{},vertical:{}}}});
+var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['_19j9b9p','_69sboz'],'2':['_19j9b9p','tw2i7z'],'3':['_19j9b9p','_13n1skb'],'4':['_19j9b9p','k5nrnw'],'5':['_19j9b9p','_1hmip18']},resize:{auto:{},none:{},vertical:'_1fm8iaf'}}});
 
 export { shadow, textarea, wrapper };

package/dist/esm/packages/react/src/toast/Toast-css.js

@@ -1,10 +1,10 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-CfRFibh4.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-BFK_iiea.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-mYYI-t8A.css';
+import './../../../../assets/src/toast/Toast.css.ts.vanilla-8Fqp2gLJ.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'oxj5lr']});
-var offsetVar = 'var(--_19yw31v)';
-var root = recipeRuntime({base:['_15dyxu5',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'ucg2we'],variants:{intent:{danger:'oy4595',information:'_1f5nqye',neutral:'_1tiaib4',success:'tlhwod',warning:'es308q'}}});
+var icon = recipeRuntime({base:[{alignSelf:'start',mt:'4'},'_15hndhb']});
+var offsetVar = 'var(--_84vd9f)';
+var root = recipeRuntime({base:['_7g0ul9',{alignItems:'center',bg:'bg.default.inverse',color:'fg.default.inverse',display:'flex',fontSize:'md',gap:'8',maxW:'full',p:'12',pl:'16',rounded:'md',shadow:'md',w:['full','max']},'_80e2u4'],variants:{intent:{danger:'ythkex',information:'ikmol8',neutral:'_8az62n',success:'m3jrd7',warning:'_1jnxnnl'}}});
 
 export { icon, offsetVar, root };

package/dist/esm/packages/react/src/toast/ToastProvider-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-CfRFibh4.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-mYYI-t8A.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var gap = '16';
-var viewport = recipeRuntime({base:[{gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1owabey'],variants:{position:{bottom:'_5ojvk7','bottom-left':'nzd72g','bottom-right':['right-scroll-bar-position','_1j0azqh'],top:'_1pkdgza','top-left':'xbbk9z','top-right':['right-scroll-bar-position','_18tsctc']}}});
+var viewport = recipeRuntime({base:[{flexDirection:'column',gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1usmqsi'],variants:{position:{bottom:'_1bbwf9p','bottom-left':'mk6oaq','bottom-right':['right-scroll-bar-position','ax9yg2'],top:'_7ophix','top-left':'y2dc5w','top-right':['right-scroll-bar-position','_1ox990t']}}});
 
 export { gap, viewport };

package/dist/esm/packages/react/src/toast/ToastProvider.js

@@ -7,7 +7,7 @@ import { forwardRef, useRef } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { Portal } from '../portal/Portal.js';
 import { Toast } from './Toast.js';
 import { ToastAction } from './ToastAction.js';
@@ -70,7 +70,7 @@ const ToastProvider = forwardRef(
             id
           )),
           /* @__PURE__ */ jsx(Portal, { asChild: true, ...container && { container }, children: /* @__PURE__ */ jsx(
-            Flex,
+            Group,
             {
               alignItems: position.endsWith("left") ? "start" : position.endsWith("right") ? "end" : "center",
               asChild: true,

package/dist/esm/packages/react/src/toggle-input/ToggleInput-css.js

@@ -1,8 +1,8 @@
-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/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 { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_1im0u7t',{alignItems:'start',display:'inline-flex',flexDirection:'row',gap:'8'},'_1jroeqa']});
+var toggleInput = recipeRuntime({base:['tml7bk',{alignItems:'start',display:'inline-flex',gap:'8'},'ashl6a']});
 
 export { toggleInput };

package/dist/esm/packages/react/src/toggle-input/ToggleInput.js

@@ -5,7 +5,7 @@ import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef } from 'react';
 import '../box/Box.js';
 import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Flex } from '../flex/Flex.js';
+import { Group } from '../group/Group.js';
 import { toggleInput } from './ToggleInput-css.js';
 import { ToggleInputProvider } from './ToggleInputContext.js';
 
@@ -16,7 +16,7 @@ const ToggleInput = forwardRef(
     const { boxProps, restProps } = extractBoxProps(props);
     const descriptionId = useId();
     const labelId = useId();
-    return /* @__PURE__ */ jsx(ToggleInputProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(Flex, { asChild: true, ...toggleInput({}, className), ...boxProps, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ToggleInputProvider, { descriptionId, labelId, children: /* @__PURE__ */ jsx(Group, { asChild: true, ...toggleInput({}, className), ...boxProps, children: /* @__PURE__ */ jsx(
       Comp,
       {
         onMouseDown: (event) => {

package/dist/esm/packages/react/src/toggle-input/ToggleInputControl-css.js

@@ -1,9 +1,9 @@
-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/toggle-input/ToggleInputControl.css.ts.vanilla-DeNOd6Sk.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/toggle-input/ToggleInputControl.css.ts.vanilla-Bh_4Yq14.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_7sgad9']});
+var control = recipeRuntime({base:['jfxb03']});
 
 export { control };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput-css.js

@@ -1,6 +1,6 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-Dql4wsub.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BYdDOR2R.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 
-var className = '_7jdm2k';
+var className = '_1iy6rgu';
 
 export { className };

package/dist/esm/packages/react/src/toggle-input/ToggleInputHiddenInput.js

@@ -2,6 +2,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import '@optiaxiom/globals';
+import { useSurface } from '../surface/useSurface.js';
 import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
 import { useToggleInputContext } from './ToggleInputContext.js';
 import { className } from './ToggleInputHiddenInput-css.js';
@@ -10,6 +12,8 @@ const ToggleInputHiddenInput = forwardRef(({ className: className$1, onChange, o
   const { descriptionId, labelId } = useToggleInputContext(
     "@optiaxiom/react/ToggleInputHiddenInput"
   );
+  const surface = useSurface("property");
+  const { track } = surface ?? {};
   return /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
     "input",
     {
@@ -17,8 +21,13 @@ const ToggleInputHiddenInput = forwardRef(({ className: className$1, onChange, o
       "aria-labelledby": labelId,
       className: clsx(className$1, className),
       onChange: (event) => {
+        const checked = event.target.checked;
         onChange?.(event);
-        onCheckedChange?.(event.target.checked);
+        onCheckedChange?.(checked);
+        track?.({
+          checked,
+          name: "toggled"
+        });
       },
       ref,
       type: "checkbox",