@optiaxiom/react 1.7.13 → 1.8.1

package/README.md

@@ -10,6 +10,16 @@ Install the package using your package manager of choice:
 npm install @optiaxiom/react
 ```
 
+## AI Assistant Integration
+
+We provide an MCP server that enables AI assistants like Claude Code and Cursor to access accurate Axiom component metadata, design tokens, and usage examples:
+
+```sh
+npm install -g @optiaxiom/mcp
+```
+
+See the [MCP guide](https://optimizely-axiom.github.io/optiaxiom/guides/mcp) for setup instructions.
+
 ## Getting Started
 
 ### 1. Setup CSS Imports
@@ -33,14 +43,14 @@ export function App() {
 Import and use components in your application:
 
 ```jsx
-import { Button, Input, Box, Flex } from "@optiaxiom/react";
+import { Box, Button, Group, Input } from "@optiaxiom/react";
 
 export function MyComponent() {
   return (
-    <Flex alignItems="start">
+    <Group alignItems="start" flexDirection="column" gap="16">
       <Input placeholder="Enter text..." />
       <Button appearance="primary">Submit</Button>
-    </Flex>
+    </Group>
   );
 }
 ```
@@ -58,11 +68,11 @@ import { Button } from "@optiaxiom/react";
 ### Form with Validation
 
 ```jsx
-import { Field, Input, Button, Flex } from "@optiaxiom/react";
+import { Button, Field, Group, Input } from "@optiaxiom/react";
 
 function LoginForm() {
   return (
-    <Flex alignItems="start">
+    <Group alignItems="start" flexDirection="column" gap="16">
       <Field label="Email">
         <Input placeholder="you@example.com" type="email" />
       </Field>
@@ -70,23 +80,23 @@ function LoginForm() {
         <Input type="password" />
       </Field>
       <Button appearance="primary">Sign In</Button>
-    </Flex>
+    </Group>
   );
 }
 ```
 
-### Layout with Box and Flex
+### Layout with Box and Group
 
 ```jsx
-import { Box, Flex, Heading, Text } from "@optiaxiom/react";
+import { Box, Group, Heading, Text } from "@optiaxiom/react";
 
 function Sample() {
   return (
     <Box bg="bg.default" color="fg.default" p="16" rounded="md" shadow="sm">
-      <Flex>
+      <Group flexDirection="column" gap="16">
         <Heading level="3">Sample Title</Heading>
         <Text>Sample description goes here</Text>
-      </Flex>
+      </Group>
     </Box>
   );
 }

package/dist/{MenuTrigger-DWB6KgSO.d.ts → MenuTrigger-BdRBHys6.d.ts}

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, MouseEvent, ReactElement, ContextType } from 'react';
 import { DayPicker, Matcher } from 'react-day-picker';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as _radix_ui_react_popover from '@radix-ui/react-popover';
+import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixDialog from '@radix-ui/react-dialog';
 
 type ExcludeProps<P, T extends keyof P> = Omit<P, T>;
@@ -2927,7 +2927,7 @@ declare const Button: react.ForwardRefExoticComponent<Omit<{
     className?: string;
 }>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "color" | "disabled" | "className"> & react.RefAttributes<HTMLButtonElement>>;
 
-type FlexProps = BoxProps<"div", {
+type GroupProps = BoxProps<"div", {
     /**
      * Set the element's `align-items` CSS property. Defaults to `center` when
      * `flexDirection='row'`, and `stretch` when `flexDirection='column'`.
@@ -2936,36 +2936,25 @@ type FlexProps = BoxProps<"div", {
     /**
      * Set the element's `flex-direction` CSS property.
      *
-     * ⚠️ DEFAULTS TO 'column' (vertical stacking) - NOT 'row' like standard CSS!
-     *
-     * - Default: 'column'
-     * - For horizontal layouts: explicitly set flexDirection='row'
-     * - When direction is 'row', alignItems defaults to 'center'
-     * - When direction is 'column', alignItems defaults to 'stretch'
+     * Default: 'row' (CSS standard)
      */
     flexDirection?: BoxProps["flexDirection"];
 }>;
 /**
- * Stack items vertically or horizontally in a flex container.
- *
- * 🚨 Use `<Flex>` for vertical stacking and `<Flex flexDirection="row">` for
- * horizontal stacking, as our component does NOT use the standard CSS `row`
- * default.
- *
- * Best Practices:
- * - Use Flex for layout direction (flexDirection, gap, alignment)
- * - Use Box for simpler styling needs (padding, margin, borders, colors)
- * - Box is a lighter primitive; Flex adds flexbox-specific defaults
+ * A flexbox layout component for grouping items horizontally or vertically.
  *
  * Default Props:
- * - flexDirection: 'column' (NOT 'row' like CSS!)
- * - gap: '16'
- * - alignItems: 'stretch' (when column) or 'center' (when row)
+ * - flexDirection: 'row' (CSS standard - horizontal layout)
+ * - alignItems: 'center' (when row) or 'stretch' (when column)
+ *
+ * Common Usage:
+ * - Horizontal button groups: <Group gap="8"><Button /><Button /></Group>
+ * - Vertical forms: <Group flexDirection="column" gap="16"><Input /><Input /></Group>
+ * - Icon + text combos: <Group gap="4" alignItems="center"><Icon /><Text /></Group>
  *
  * @category layout
- * @extends Box
  */
-declare const Flex: react.ForwardRefExoticComponent<{
+declare const Group: react.ForwardRefExoticComponent<{
     /**
      * Set the element's `align-items` CSS property. Defaults to `center` when
      * `flexDirection='row'`, and `stretch` when `flexDirection='column'`.
@@ -2974,12 +2963,7 @@ declare const Flex: react.ForwardRefExoticComponent<{
     /**
      * Set the element's `flex-direction` CSS property.
      *
-     * ⚠️ DEFAULTS TO 'column' (vertical stacking) - NOT 'row' like standard CSS!
-     *
-     * - Default: 'column'
-     * - For horizontal layouts: explicitly set flexDirection='row'
-     * - When direction is 'row', alignItems defaults to 'center'
-     * - When direction is 'column', alignItems defaults to 'stretch'
+     * Default: 'row' (CSS standard)
      */
     flexDirection?: BoxProps["flexDirection"];
 } & Omit<NonNullable<Sprinkles & {
@@ -3136,13 +3120,13 @@ declare const ModalListbox: react.ForwardRefExoticComponent<{
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>, "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" | "gap" | "alignItems" | "alignSelf" | "display" | "flex" | "flexDirection" | "flexWrap" | "gridColumn" | "gridTemplateColumns" | "justifyContent" | "justifyItems" | "placeItems" | "maxH" | "maxW" | "h" | "w" | "asChild" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
-type PopoverContentProps = ExcludeProps<BoxProps<typeof _radix_ui_react_popover.Content, Pick<ComponentPropsWithoutRef<typeof ModalListbox>, "maxH" | "minW">>, "arrowPadding" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "forceMount" | "hideWhenDetached" | "sticky" | "updatePositionStrategy">;
+type PopoverContentProps = ExcludeProps<BoxProps<typeof RadixPopover.Content, Pick<ComponentPropsWithoutRef<typeof ModalListbox>, "maxH" | "minW">>, "arrowPadding" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "forceMount" | "hideWhenDetached" | "sticky" | "updatePositionStrategy">;
 /**
  * @group Popover
  */
 declare const PopoverContent: react.ForwardRefExoticComponent<PopoverContentProps & react.RefAttributes<HTMLDivElement>>;
 
-type PopoverTriggerProps = ButtonProps<typeof _radix_ui_react_popover.Trigger>;
+type PopoverTriggerProps = ButtonProps<typeof RadixPopover.Trigger>;
 /**
  * @extends Button
  * @group Popover
@@ -3164,7 +3148,7 @@ declare const PopoverTrigger: 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>>;
+}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>>;
 
 declare const content: (props?: {
     size?: "sm" | "md" | "lg" | "fullscreen" | undefined;
@@ -3266,6 +3250,33 @@ type CommandOption = {
      * Allow filtering through sub-options independent of the parent menu.
      */
     subOptionsInputVisible?: boolean;
+    /**
+     * Optional Surface tracking configuration for App Companion integration.
+     * When provided, this menu item becomes a trackable surface that emits
+     * interaction events based on the item's behavior.
+     */
+    surface?: {
+        /** Optional metadata about this interaction */
+        data?: Record<string, unknown>;
+        /**
+         * Surface name used in the surface path.
+         * For properties: the property name (e.g., "status", "priority", "assignee")
+         * For interactions: the action name (e.g., "archived", "deleted", "pinned")
+         */
+        name: string;
+    } & ({
+        /** Surface type for custom interactions on parent surface */
+        type: "action";
+    } | {
+        /** Surface type for state changes (selections, toggles) */
+        type: "property";
+        /**
+         * The value this menu item represents.
+         * For radio/select items: The value that gets tracked when this item is selected
+         * For toggles: The value is still required but only used for suggestion matching
+         */
+        value: unknown;
+    });
     /**
      * Whether to show a switch toggle instead of a check mark.
      */
@@ -3289,6 +3300,7 @@ type CommandOptionGroup = {
     label: string;
     /**
      * The sorting priority of the group (default: 0).
+     * Groups with higher priority are sorted first.
      */
     priority?: number;
     /**
@@ -3431,7 +3443,7 @@ declare const MenuTrigger: 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"> & react.RefAttributes<HTMLButtonElement>>;
+}>, "size"> & Omit<Omit<RadixPopover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref">, "color" | "disabled" | "asChild" | "className"> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Calendar as C, Flex as F, ModalListbox as M, PopoverContent as P, Button as b, dialogkit as d, Box as f, PopoverTrigger as i, ButtonRoot as j, DialogContent as k, Menu as o, MenuContent as q, MenuTrigger as s, sprinkles as u, vars as v, mapResponsiveValue as w, normalizeResponsiveValue as x, TableHeaderCell as y, createDialogKit as z };
-export type { BoxProps as B, DialogContentProps as D, ExcludeProps as E, LonghandProps as L, RecipeVariants as R, Sprinkles as S, TableHeaderCellProps as T, ButtonProps as a, ExtendProps as c, CalendarProps as e, ResponsiveArray as g, PopoverContentProps as h, FlexProps as l, MenuOption as m, MenuProps as n, MenuContentProps as p, MenuTriggerProps as r, PopoverTriggerProps as t };
+export { Calendar as C, Group as G, ModalListbox as M, PopoverContent as P, Button as b, dialogkit as d, Box as f, PopoverTrigger as i, ButtonRoot as j, DialogContent as k, Menu as o, MenuContent as q, MenuTrigger as s, sprinkles as u, vars as v, mapResponsiveValue as w, normalizeResponsiveValue as x, TableHeaderCell as y, createDialogKit as z };
+export type { BoxProps as B, DialogContentProps as D, ExcludeProps as E, LonghandProps as L, RecipeVariants as R, Sprinkles as S, TableHeaderCellProps as T, ButtonProps as a, ExtendProps as c, CalendarProps as e, ResponsiveArray as g, PopoverContentProps as h, GroupProps as l, MenuOption as m, MenuProps as n, MenuContentProps as p, MenuTriggerProps as r, PopoverTriggerProps as t };