@optiaxiom/react 1.7.13 → 1.8.0

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-ByYy6TIu.d.ts}

@@ -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 & {
@@ -3433,5 +3417,5 @@ declare const MenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
     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>>;
 
-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 };