@optiaxiom/react 1.8.0 → 1.8.1

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

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/text/Text.css.ts.vanilla-BMSaHeIw.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'},'_1o4wrg0','_114rnlb','fzvul3'],'2':[undefined,'_1o4wrg0','_114rnlb','_9md0dw'],'3':[undefined,'_1o4wrg0','_114rnlb','rvvts'],'4':[undefined,'_1o4wrg0','_114rnlb','_1nhdtw8']},truncate:{true:[undefined,'_1o4wrg0',{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-DRA_4QUJ.css';
-import './../../../../assets/src/textarea/TextareaAutosize.css.ts.vanilla-Dn0qWeYW.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:['wzviym','_1kvnxuc']});
-var textarea = recipeRuntime({base:['wzviym','_1xlu7so'],variants:{resize:{auto:{overflow:'hidden'},none:{},vertical:{}}}});
-var wrapper = recipeRuntime({base:{display:'grid',flex:'auto',overflow:'auto'},variants:{maxRows:{'1':['xf1mpr','_19k9cma'],'2':['xf1mpr','nm49jf'],'3':['xf1mpr','clft62'],'4':['xf1mpr','_1arvjus'],'5':['xf1mpr','_1pgqinm']},resize:{auto:{},none:{},vertical:'_1uyn56'}}});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-Dv7-57mz.css';
-import './../../../../assets/src/toast/Toast.css.ts.vanilla-D0swb0Zd.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'},'laqs5j']});
-var offsetVar = 'var(--_1yrcrtr)';
-var root = recipeRuntime({base:['oty80l',{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']},'_1nr1e57'],variants:{intent:{danger:'_1g1qg5w',information:'pqautw',neutral:'_1c1wvkm',success:'_13wndy2',warning:'_4p7btq'}}});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/toast/ToastProvider.css.ts.vanilla-Dv7-57mz.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:[{flexDirection:'column',gap:'16',maxH:'full',overflowX:'hidden',overflowY:'auto',p:'24',w:['full','384'],z:'toast'},'_1r12ehs'],variants:{position:{bottom:'x25g50','bottom-left':'_3f5cqs','bottom-right':['right-scroll-bar-position','_4v844j'],top:'cfdaz8','top-left':'_8p03fc','top-right':['right-scroll-bar-position','_1ekvdqw']}}});
+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/toggle-input/ToggleInput-css.js

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.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:['_1ia1l0t',{alignItems:'start',display:'inline-flex',gap:'8'},'fpafac']});
+var toggleInput = recipeRuntime({base:['tml7bk',{alignItems:'start',display:'inline-flex',gap:'8'},'ashl6a']});
 
 export { toggleInput };

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

@@ -1,9 +1,9 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DR0szHMw.css';
-import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-dC7qxTbj.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:['_9kodlb']});
+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-DRA_4QUJ.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-De3mPKgV.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-BoMtptzi.css';
 
-var className = '_13ggu1q';
+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",

package/dist/esm/packages/react/src/tooltip/TooltipContent-css.js

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
 var content = recipeRuntime({base:[{bg:'bg.default.inverse',color:'fg.default.inverse',maxW:'xs',px:'12',py:'8',rounded:'md',z:'tooltip'}],variants:{disableHoverableContent:{false:{},true:{pointerEvents:'none'}}}});

package/dist/esm/packages/react/src/transition/Transition-css.js

@@ -1,7 +1,7 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DRA_4QUJ.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-Dv7qhrb8.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-BqIfkBSM.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-Dvx-EaPa.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'e2o6fp',variants:{duration:{sm:'_52htvo',md:'_1dqucss',lg:'xz28nd'}}});
+var transition = recipeRuntime({base:'_1hba547',variants:{duration:{sm:'haav6j',md:'_1i2wl4a',lg:'iawyzk'}}});
 
 export { transition };

package/dist/esm/unstable.js

@@ -32,3 +32,5 @@ export { SortableItem } from './packages/react/src/sortable/SortableItem.js';
 export { Spotlight } from './packages/react/src/spotlight/Spotlight.js';
 export { SpotlightContent } from './packages/react/src/spotlight/SpotlightContent.js';
 export { SpotlightTrigger } from './packages/react/src/spotlight/SpotlightTrigger.js';
+export { unstable_SurfaceProvider as SurfaceProvider } from '@optiaxiom/globals';
+export { useSurface } from './packages/react/src/surface/useSurface.js';

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ComponentPropsWithRef, ReactNode, ComponentPropsWithoutRef, ElementType, RefObject, FocusEventHandler, ChangeEventHandler, ReactElement } from 'react';
-import { R as RecipeVariants, B as BoxProps, S as Sprinkles, a as ButtonProps, E as ExcludeProps, G as Group, b as Button, d as dialogkit, c as ExtendProps, C as Calendar, e as CalendarProps, f as Box, g as ResponsiveArray, P as PopoverContent, h as PopoverContentProps, i as PopoverTrigger, M as ModalListbox, j as ButtonRoot } from './MenuTrigger-ByYy6TIu.js';
-export { k as DialogContent, D as DialogContentProps, l as GroupProps, L as LonghandProps, o as Menu, q as MenuContent, p as MenuContentProps, m as MenuOption, n as MenuProps, s as MenuTrigger, r as MenuTriggerProps, t as PopoverTriggerProps, y as TableHeaderCell, T as TableHeaderCellProps, w as mapResponsiveValue, x as normalizeResponsiveValue, u as sprinkles, v as vars } from './MenuTrigger-ByYy6TIu.js';
+import { R as RecipeVariants, B as BoxProps, S as Sprinkles, a as ButtonProps, E as ExcludeProps, G as Group, b as Button, d as dialogkit, c as ExtendProps, C as Calendar, e as CalendarProps, f as Box, g as ResponsiveArray, P as PopoverContent, h as PopoverContentProps, i as PopoverTrigger, M as ModalListbox, j as ButtonRoot } from './MenuTrigger-BdRBHys6.js';
+export { k as DialogContent, D as DialogContentProps, l as GroupProps, L as LonghandProps, o as Menu, q as MenuContent, p as MenuContentProps, m as MenuOption, n as MenuProps, s as MenuTrigger, r as MenuTriggerProps, t as PopoverTriggerProps, y as TableHeaderCell, T as TableHeaderCellProps, w as mapResponsiveValue, x as normalizeResponsiveValue, u as sprinkles, v as vars } from './MenuTrigger-BdRBHys6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { createToaster } from '@optiaxiom/globals';
@@ -10,7 +10,7 @@ import * as RadixPortal from '@radix-ui/react-portal';
 import * as RadixToast from '@radix-ui/react-toast';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import { Table as Table$1 } from '@tanstack/table-core';
-import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import * as RadixMenu from '@radix-ui/react-dropdown-menu';
 import * as RadixSeparator from '@radix-ui/react-separator';
@@ -1498,7 +1498,7 @@ type DateInputProps = ExtendProps<ComponentPropsWithoutRef<typeof Input>, Pick<C
  * @category date
  * @since 1.4.0
  */
-declare const DateInput: react.ForwardRefExoticComponent<Pick<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>>, "placeholder" | "holiday" | "weekend"> & {
+declare const DateInput: react.ForwardRefExoticComponent<Pick<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>>, "holiday" | "placeholder" | "weekend"> & {
     /**
      * The default date and time to use in the calendar picker when no value has
      * been selected.
@@ -1544,7 +1544,7 @@ declare const DateInput: react.ForwardRefExoticComponent<Pick<ComponentPropsWith
 }>, "size"> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "color" | "disabled" | "className"> & react.RefAttributes<HTMLInputElement>, "ref">, "type" | "placeholder"> & react.RefAttributes<HTMLInputElement>>;
+}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "color" | "disabled" | "className"> & react.RefAttributes<HTMLInputElement>, "ref">, "placeholder" | "type"> & react.RefAttributes<HTMLInputElement>>;
 
 type PopoverProps = {
     children?: React.ReactNode;
@@ -2015,7 +2015,7 @@ declare const DateRangePickerTrigger: react.ForwardRefExoticComponent<Omit<Omit<
 }>, never> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & {
     /**
      * Provide a custom date range formatter.
      */
@@ -3351,11 +3351,15 @@ type SelectOption = {
     /**
      * Add secondary text after the label.
      */
-    description?: string;
+    description?: ReactNode;
+    /**
+     * Secondary text displayed next to the label.
+     */
+    detail?: ReactNode;
     /**
      * Provide a reason why item needs to be marked as disabled and skipped from keyboard navigation.
      */
-    disabledReason?: string;
+    disabledReason?: (() => string) | string;
     /**
      * Provide an optional group that item belongs to.
      */
@@ -3378,6 +3382,11 @@ type SelectOptionGroup = {
      * The label group.
      */
     label: string;
+    /**
+     * The sorting priority of the group (default: 0).
+     * Groups with higher priority are sorted first.
+     */
+    priority?: number;
     /**
      * Whether to display a separator before this group.
      */

package/dist/unstable.d.ts

@@ -1,12 +1,14 @@
-import { B as BoxProps, y as TableHeaderCell, S as Sprinkles, f as Box, G as Group, a as ButtonProps, E as ExcludeProps, R as RecipeVariants, o as Menu, n as MenuProps, q as MenuContent, p as MenuContentProps, s as MenuTrigger } from './MenuTrigger-ByYy6TIu.js';
-export { C as Calendar, e as CalendarProps, z as createDialogKit, d as dialogkit } from './MenuTrigger-ByYy6TIu.js';
+import { B as BoxProps, y as TableHeaderCell, S as Sprinkles, f as Box, G as Group, a as ButtonProps, E as ExcludeProps, R as RecipeVariants, o as Menu, n as MenuProps, q as MenuContent, p as MenuContentProps, s as MenuTrigger } from './MenuTrigger-BdRBHys6.js';
+export { C as Calendar, e as CalendarProps, z as createDialogKit, d as dialogkit } from './MenuTrigger-BdRBHys6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { CellContext } from '@tanstack/table-core';
 import * as react from 'react';
 import { ReactNode, ComponentPropsWithRef, ReactElement, ComponentPropsWithoutRef, RefAttributes } from 'react';
 import { Header } from '@tanstack/react-table';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
-import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { unstable_useSurfaceContext } from '@optiaxiom/globals';
+export { unstable_SurfaceProvider as SurfaceProvider } from '@optiaxiom/globals';
 import 'react-day-picker';
 import '@radix-ui/react-dialog';
 
@@ -472,6 +474,12 @@ type PillProps = BoxProps<"button", PillVariants & {
      * Show a close button inside the pill and invoke this callback when the pill is clicked.
      */
     onDismiss?: () => void;
+    /**
+     * When true, the pill is rendered as a non-interactive span element instead
+     * of a button. Use this for display-only pills that don't respond to
+     * clicks.
+     */
+    readOnly?: boolean;
 }>;
 /**
  * A pill is a visual representation of an attribute, usually representing tags or metrics.
@@ -485,6 +493,12 @@ declare const Pill: react.ForwardRefExoticComponent<PillVariants & {
      * Show a close button inside the pill and invoke this callback when the pill is clicked.
      */
     onDismiss?: () => void;
+    /**
+     * When true, the pill is rendered as a non-interactive span element instead
+     * of a button. Use this for display-only pills that don't respond to
+     * clicks.
+     */
+    readOnly?: boolean;
 } & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -525,28 +539,30 @@ type PillMenuContentProps = ComponentPropsWithoutRef<typeof MenuContent>;
  */
 declare const PillMenuContent: react.ForwardRefExoticComponent<Omit<MenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
-type PillMenuTriggerProps = ComponentPropsWithoutRef<typeof MenuTrigger>;
-/**
- * @group PillMenu
- */
-declare const PillMenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<Omit<{
-    addonAfter?: react.ReactNode;
-    addonBefore?: react.ReactNode;
-    icon?: react.ReactNode;
-    iconPosition?: "end" | "start";
-}, never> & Omit<NonNullable<Omit<{
-    intent?: "danger" | "neutral" | "primary" | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    square?: boolean | undefined;
-    variant?: "strong" | "outline" | "outline-opal" | "strong-opal" | "subtle" | undefined;
-}, "intent" | "variant"> & {
-    appearance?: "default" | "danger" | "primary" | "subtle" | "danger-outline" | "default-opal" | "inverse" | "primary-opal";
-    disabled?: boolean;
-    loading?: boolean;
-}>, never> & Omit<NonNullable<Sprinkles & {
+declare const root$1: (props?: {
+    size?: "md" | "lg" | undefined;
+} | undefined, className?: string) => {
+    className: string;
+};
+type RootVariants = RecipeVariants<typeof root$1>;
+
+type PillMenuTriggerProps = BoxProps<"div", RootVariants & {
+    /**
+     * Whether the button is disabled.
+     */
+    readOnly?: boolean;
+}>;
+declare const PillMenuTrigger: react.ForwardRefExoticComponent<{
+    size?: "md" | "lg" | undefined;
+} & {
+    /**
+     * Whether the button is disabled.
+     */
+    readOnly?: boolean;
+} & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const root: (props?: {
     marks?: boolean | undefined;
@@ -829,7 +845,91 @@ declare const SpotlightTrigger: react.ForwardRefExoticComponent<Omit<{
 }>, never> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "backgroundImage" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className" | "addonAfter" | "addonBefore" | "square" | "appearance" | "loading" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
+}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>, "ref">, "animation" | "fontFamily" | "fontSize" | "size" | "backgroundImage" | "borderColor" | "color" | "cursor" | "fontWeight" | "objectFit" | "overflowX" | "overflowY" | "pointerEvents" | "textAlign" | "textTransform" | "transition" | "whiteSpace" | "bg" | "border" | "borderB" | "borderL" | "borderR" | "borderT" | "m" | "mx" | "my" | "mb" | "ml" | "mr" | "mt" | "overflow" | "p" | "px" | "py" | "pb" | "pl" | "pr" | "pt" | "rounded" | "shadow" | "z" | "disabled" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className" | "addonAfter" | "addonBefore" | "square" | "appearance" | "loading" | "icon" | "iconPosition"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { DataTableExpandableCell, DataTableExpandableHeader, DataTableHeaderCell, DetailsPanel, DetailsPanelBody, DetailsPanelFooter, DetailsPanelHeader, FileUpload, FileUploadDropzone, FileUploadTrigger, Highlight, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, Layout, LayoutContent, Pill, PillGroup, PillMenu, PillMenuContent, PillMenuTrigger, Range, Sortable, SortableGroup, SortableHandle, SortableItem, Spotlight, SpotlightContent, SpotlightTrigger, useDialogKit, useFileUploadTrigger };
+/**
+ * Hook to access Surface context with optional type filtering.
+ *
+ * @param type - Optional surface type to filter by. Only returns surface if it matches this type.
+ * @returns Surface context if type matches (or any surface if no type specified), undefined otherwise
+ *
+ * @example
+ * // Only get surface if it's an interaction surface
+ * const surface = useSurface("interaction");
+ *
+ * @example
+ * // Get any surface
+ * const surface = useSurface();
+ */
+declare function useSurface(type?: NonNullable<ReturnType<typeof unstable_useSurfaceContext>>["type"]): {
+    accept: (suggestionId: string) => void;
+    executeTool: (name: string, parameters: unknown) => Promise<void> | void;
+    metadata: Record<string, Omit<{
+        data?: Record<string, unknown> | undefined;
+        name: string;
+        type: "action" | "cards" | "collection" | "page" | "product" | "property" | "resource" | "tab";
+    }, "name">>;
+    name: string;
+    pageViewId: string | undefined;
+    path: string;
+    reject: (suggestionId: string) => void;
+    renderSuggestionValue?: (value: unknown) => React.ReactNode;
+    suggestionPopover: {
+        register: () => () => void;
+        registered: boolean;
+    };
+    suggestions: ({
+        id: string;
+        surface: string;
+    } & ({
+        cards: Array<{
+            data: unknown;
+            id: string;
+            name: string;
+            reason: string;
+        }>;
+        type: "cards";
+    } | {
+        reason: string;
+        type: "value";
+        value: unknown;
+    } | {
+        text: string;
+        tool?: {
+            name: string;
+            parameters: unknown;
+        };
+        type: "message";
+    }))[];
+    track: (interaction: {
+        id?: string;
+    } & ({
+        checked: boolean;
+        name: "toggled";
+    } | {
+        name: "added";
+        value: unknown;
+    } | {
+        name: "blurred";
+    } | {
+        name: "changed";
+        value: unknown;
+    } | {
+        name: "focused";
+    } | {
+        name: "invoked";
+    } | {
+        name: "removed";
+        value: unknown;
+    } | {
+        name: "viewed";
+    }), metadata?: Record<string, Omit<{
+        data?: Record<string, unknown> | undefined;
+        name: string;
+        type: "action" | "cards" | "collection" | "page" | "product" | "property" | "resource" | "tab";
+    }, "name">>) => void;
+    type: "page" | "property" | "resource" | "action" | "cards" | "collection" | "product" | "tab";
+} | undefined;
+
+export { DataTableExpandableCell, DataTableExpandableHeader, DataTableHeaderCell, DetailsPanel, DetailsPanelBody, DetailsPanelFooter, DetailsPanelHeader, FileUpload, FileUploadDropzone, FileUploadTrigger, Highlight, HoverCard, HoverCardContent, HoverCardTrigger, InlineInput, Layout, LayoutContent, Pill, PillGroup, PillMenu, PillMenuContent, PillMenuTrigger, Range, Sortable, SortableGroup, SortableHandle, SortableItem, Spotlight, SpotlightContent, SpotlightTrigger, useDialogKit, useFileUploadTrigger, useSurface };
 export type { DataTableExpandableCellProps, DataTableExpandableHeaderProps, DataTableHeaderCellProps, DetailsPanelBodyProps, DetailsPanelFooterProps, DetailsPanelHeaderProps, DetailsPanelProps, FileUploadDropzoneProps, FileUploadProps, FileUploadTriggerProps, HighlightProps, HoverCardContentProps, HoverCardProps, HoverCardTriggerProps, InlineInputProps, LayoutContentProps, LayoutProps, PillGroupProps, PillMenuContentProps, PillMenuProps, PillMenuTriggerProps, PillProps, RangeProps, SortableGroupProps, SortableHandleProps, SortableItemProps, SortableProps, SpotlightContentProps, SpotlightProps, SpotlightTriggerProps };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "files": [
     "dist/**",
     "LICENSE"
@@ -71,7 +71,7 @@
     "react-remove-scroll": "^2.7.1",
     "react-resizable-panels": "^3.0.4",
     "use-sync-external-store": "^1.5.0",
-    "@optiaxiom/globals": "^1.1.0"
+    "@optiaxiom/globals": "^1.1.1"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",

package/dist/cjs/assets/src/actions/ActionsContent.css.ts.vanilla-CIPKnVwJ.css

@@ -1,22 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  .nsbmik {
-    transition: opacity var(--ax-duration-sm) ease;
-  }
-  ._1i32x9l:not(:has(._1i32x9l)):focus-within .nsbmik, .nsbmik:is(:checked, [data-state=open], :has(:checked, [data-state=open])) {
-    opacity: 1;
-    transition: none;
-  }
-  ._12i0o00 {
-    opacity: 1;
-  }
-  ._1ngayl3 {
-    opacity: 0;
-  }
-  @media (hover: hover) {
-    ._1i32x9l:not(:has(._1i32x9l)):hover .nsbmik {
-      opacity: 1;
-      transition: none;
-    }
-  }
-}

package/dist/cjs/assets/src/alert/Alert.css.ts.vanilla-B2feya8L.css

@@ -1,6 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  ._17ufaog {
-    min-height: var(--ax-size-sm);
-  }
-}

package/dist/cjs/assets/src/alert-dialog/AlertDialogContent.css.ts.vanilla-DbH_XZ1B.css

@@ -1,30 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  ._1ospztu {
-    opacity: 0;
-  }
-  .cthiln {
-    inset: 0;
-    position: fixed;
-  }
-  ._15hffhp {
-    max-height: 50dvh;
-    max-width: calc(100dvw - 2 * 24px);
-    transform: 
-      translateY(calc(1rem * var(--s5u39j)))
-      scale(calc(1 - 0.06 * var(--s5u39j)))
-    ;
-  }
-  ._15hffhp:focus-visible {
-    outline: none;
-  }
-  .qunocg {
-    width: 400px;
-  }
-  .ikxh40 {
-    width: 600px;
-  }
-  .js0mum {
-    width: 800px;
-  }
-}

package/dist/cjs/assets/src/alert-dialog/AlertDialogHeader.css.ts.vanilla-BEeG3LeL.css

@@ -1,7 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  .demxki {
-    position: sticky;
-    top: 0;
-  }
-}

package/dist/cjs/assets/src/badge/Badge.css.ts.vanilla-BRRJVWv8.css

@@ -1,51 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  ._1vuww68 {
-    --_1rgzbl6: var(--ax-colors-fg-white);
-    -webkit-user-select: none;
-            user-select: none;
-  }
-  ._1vuww68:not(:empty) {
-    min-width: var(--ax-size-xs);
-  }
-  ._1utvw63 {
-    --cqrpkj: var(--ax-colors-bg-error);
-    --_1abkbq5: var(--ax-colors-bg-error-subtle);
-    --iutlkp: var(--ax-colors-fg-error-strong);
-  }
-  ._35r64j {
-    --cqrpkj: var(--ax-colors-bg-information);
-    --_1abkbq5: var(--ax-colors-bg-information-subtle);
-    --iutlkp: var(--ax-colors-fg-information-strong);
-  }
-  .qt5a1r {
-    --cqrpkj: var(--ax-colors-bg-tertiary);
-    --_1rgzbl6: var(--ax-colors-fg-default);
-    --_1abkbq5: var(--ax-colors-bg-secondary);
-    --iutlkp: var(--ax-colors-fg-secondary);
-  }
-  ._19dv6p5 {
-    --cqrpkj: var(--ax-colors-bg-accent);
-    --_1abkbq5: var(--ax-colors-bg-accent-subtle);
-    --iutlkp: var(--ax-colors-fg-accent-strong);
-  }
-  .u2f0vs {
-    --cqrpkj: var(--ax-colors-bg-success);
-    --_1abkbq5: var(--ax-colors-bg-success-subtle);
-    --iutlkp: var(--ax-colors-fg-success-strong);
-  }
-  .u8mgsu {
-    --cqrpkj: var(--ax-colors-bg-warning);
-    --_1rgzbl6: var(--ax-colors-fg-warning-inverse);
-    --_1abkbq5: var(--ax-colors-bg-warning-subtle);
-    --iutlkp: var(--ax-colors-fg-warning-strong);
-  }
-  ._1kwqd94 {
-    background-color: var(--cqrpkj);
-    color: var(--_1rgzbl6);
-  }
-  .bi92e9 {
-    background-color: var(--_1abkbq5);
-    color: var(--iutlkp);
-  }
-}

package/dist/cjs/assets/src/banner/Banner.css.ts.vanilla-DizDI6wf.css

@@ -1,6 +0,0 @@
-@layer optiaxiom._1s54dki;
-@layer optiaxiom._1s54dki {
-  ._1vex4dl {
-    min-height: var(--ax-size-sm);
-  }
-}