@optiaxiom/react 1.9.4 → 1.9.5

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

@@ -1,8 +1,8 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CwijUzeT.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DMAFq6ym.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dl1BH7Bx.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C3ekkXES.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CFhxw2se.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var toggleInput = recipeRuntime({base:['_12sj2c8',{alignItems:'start',display:'inline-flex',gap:'8'},'_14h6foj']});
+var toggleInput = recipeRuntime({base:['o81lzx',{alignItems:'start',display:'inline-flex',gap:'8'},'_128g6']});
 
 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-CDX2D93i.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CwijUzeT.css';
-import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-DMAFq6ym.css';
-import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-0uoIQL1_.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dl1BH7Bx.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C3ekkXES.css';
+import './../../../../assets/src/toggle-input/ToggleInput.css.ts.vanilla-CFhxw2se.css';
+import './../../../../assets/src/toggle-input/ToggleInputControl.css.ts.vanilla-DzJ9mfPH.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var control = recipeRuntime({base:['_1hj0fz']});
+var control = recipeRuntime({base:['v0jbvk']});
 
 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-CDX2D93i.css';
-import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-CwijUzeT.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dl1BH7Bx.css';
+import './../../../../assets/src/dialog/DialogBody.css.ts.vanilla-C3ekkXES.css';
 
-var className = '_1r4r7ra';
+var className = 'uxxy5q';
 
 export { className };

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

@@ -1,4 +1,4 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-CDX2D93i.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dl1BH7Bx.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-CDX2D93i.css';
-import './../../../../assets/src/transition/Transition.css.ts.vanilla-B9N_U4wr.css';
+import './../../../../assets/src/layers/layers.css.ts.vanilla-Dl1BH7Bx.css';
+import './../../../../assets/src/transition/Transition.css.ts.vanilla-DIIITvYM.css';
 import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
 
-var transition = recipeRuntime({base:'dxv7k',variants:{duration:{sm:'_1a1wudv',md:'v36j26',lg:'_14rsnge'}}});
+var transition = recipeRuntime({base:'w0b48m',variants:{duration:{sm:'hgvb6c',md:'_19hzkt5',lg:'_1fbo4x6'}}});
 
 export { transition };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { B as BoxProps, S as Sprinkles, a as ButtonProps, R as RecipeVariants, 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, D as Disclosure } from './MenuTrigger-COBIu5Vy.js';
-export { k as Alert, A as AlertProps, m as DialogContent, l as DialogContentProps, n as DisclosureProps, o as GroupProps, L as LonghandProps, r as Menu, t as MenuContent, s as MenuContentProps, p as MenuOption, q as MenuProps, v as MenuTrigger, u as MenuTriggerProps, w as PopoverTriggerProps, H as TableHeaderCell, T as TableHeaderCellProps, z as mapResponsiveValue, F as normalizeResponsiveValue, y as sprinkles, x as vars } from './MenuTrigger-COBIu5Vy.js';
+import { B as BoxProps, S as Sprinkles, a as ButtonProps, R as RecipeVariants, 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, D as Disclosure } from './MenuTrigger-DcHf1kro.js';
+export { k as Alert, A as AlertProps, m as DialogContent, l as DialogContentProps, n as DisclosureProps, o as GroupProps, L as LonghandProps, r as Menu, t as MenuContent, s as MenuContentProps, p as MenuOption, q as MenuProps, v as MenuTrigger, u as MenuTriggerProps, w as PopoverTriggerProps, H as TableHeaderCell, T as TableHeaderCellProps, z as mapResponsiveValue, F as normalizeResponsiveValue, y as sprinkles, x as vars } from './MenuTrigger-DcHf1kro.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ComponentPropsWithRef, ReactNode, ComponentPropsWithoutRef, ElementType, RefObject, FocusEventHandler, ChangeEventHandler, ReactElement } from 'react';
@@ -50,24 +50,12 @@ type AlertDialogProps = {
  * Display a modal with important content that expects confirmation from the
  * user.
  *
- * IMPORTANT: AlertDialog does NOT have a close (X) button in the header - users
- * must explicitly choose an action. This is intentional for confirmation
- * dialogs to prevent accidental dismissal of critical actions.
- *
- * Key differences from Dialog:
- * - No automatic close button (requires explicit user choice)
- * - AlertDialogCancel: Cancel/dismiss button (defaults to "Cancel" text)
- * - AlertDialogAction: Primary/destructive action button
- * - Use for: Confirmations, destructive actions, critical decisions
- * - DO NOT use for: General forms, informational content (use Dialog instead)
- *
- * Basic structure:
- * - AlertDialog: Root component for managing state
- * - AlertDialogTrigger: Button that opens the alert
- * - AlertDialogContent: Container with backdrop
- * - AlertDialogHeader: Title (no close button)
- * - AlertDialogBody: Warning/confirmation message
- * - AlertDialogFooter: Action buttons (Cancel + Action)
+ * AlertDialog does NOT have a close (X) button in the header - users must
+ * explicitly choose an action. This is intentional for confirmation dialogs to
+ * prevent accidental dismissal of critical actions.
+ *
+ * Use for confirmations, destructive actions, and critical decisions. Do not
+ * use for general forms or informational content (use Dialog instead).
  *
  * For async operations, use event.preventDefault() in AlertDialogAction onClick
  * to prevent auto-close, then manually close after completion.
@@ -1458,7 +1446,7 @@ declare const Input: react.ForwardRefExoticComponent<Pick<Omit<Pick<{
 }>, "size"> & Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
-}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "name" | "color" | "disabled" | "className" | "placeholder" | "type"> & react.RefAttributes<HTMLInputElement>>;
+}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "name" | "color" | "disabled" | "className" | "type" | "placeholder"> & react.RefAttributes<HTMLInputElement>>;
 
 type InputAddonProps = BoxProps<"div">;
 /**
@@ -1505,7 +1493,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>>>, "holiday" | "placeholder" | "weekend"> & {
+declare const DateInput: react.ForwardRefExoticComponent<Pick<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>>, "placeholder" | "holiday" | "weekend"> & {
     /**
      * The default date and time to use in the calendar picker when no value has
      * been selected.
@@ -1554,7 +1542,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" | "name" | "color" | "disabled" | "className" | "placeholder" | "type"> & react.RefAttributes<HTMLInputElement>, "ref">, "placeholder" | "type"> & react.RefAttributes<HTMLInputElement>>;
+}>, "size"> & Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "size" | "name" | "color" | "disabled" | "className" | "type" | "placeholder"> & react.RefAttributes<HTMLInputElement>, "ref">, "type" | "placeholder"> & react.RefAttributes<HTMLInputElement>>;
 
 type PopoverProps = {
     children?: React.ReactNode;
@@ -2061,22 +2049,10 @@ type DialogProps = {
  * DialogHeader automatically includes a close button (X) in the top-right
  * corner - do not manually add a close button to the header.
  *
- * Use Dialog for:
- * - Forms and data entry
- * - General content display
- * - Multi-step workflows
- * - Non-critical interactions
- *
- * For confirmations/destructive actions, use AlertDialog instead (which has no
- * close button and requires explicit user choice).
- *
- * Basic structure:
- * - Dialog: Root component for managing open/close state
- * - DialogTrigger: Button that opens the dialog
- * - DialogContent: Container with backdrop and positioning
- * - DialogHeader: Title with built-in close button (X)
- * - DialogBody: Main content area
- * - DialogFooter: Action buttons (use DialogClose for cancel/close actions)
+ * Use Dialog for forms, data entry, content display, multi-step workflows, and
+ * non-critical interactions. For confirmations or destructive actions, use
+ * AlertDialog instead (which has no close button and requires explicit user
+ * choice).
  *
  * For forms, wrap DialogBody and DialogFooter in DialogForm and use
  * type="submit" on the primary action button.
@@ -2279,6 +2255,9 @@ declare namespace DropdownMenu {
 }
 
 type DropdownMenuCheckboxItemProps = ListboxItemProps<typeof RadixMenu.CheckboxItem>;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<NonNullable<{
     intent?: "danger" | "neutral" | undefined;
 } & {
@@ -2297,15 +2276,24 @@ type DropdownMenuContentProps = ExcludeProps<BoxProps<typeof RadixMenu.Content,
      */
     loading?: boolean;
 }>, "alignOffset" | "arrowPadding" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "forceMount" | "hideWhenDetached" | "loop" | "sideOffset" | "sticky" | "updatePositionStrategy">;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuContent: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownMenuGroupProps = BoxProps<typeof RadixMenu.Group>;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuGroup: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<RadixMenu.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>, "ref">, "color" | "asChild" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownMenuItemProps = ListboxItemProps<typeof RadixMenu.Item>;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<NonNullable<{
     intent?: "danger" | "neutral" | undefined;
 } & {
@@ -2319,6 +2307,9 @@ declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<NonNullable
 }>, never> & Omit<Omit<RadixMenu.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref">, "color" | "asChild" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownMenuLabelProps = BoxProps<typeof RadixMenu.Label>;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
     asChild?: boolean;
     className?: string;
@@ -2326,6 +2317,7 @@ declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<NonNullabl
 
 type DropdownMenuSeparatorProps = BoxProps<typeof RadixMenu.Separator>;
 /**
+ * @group DropdownMenu
  * @extends Separator
  */
 declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkles & {
@@ -2348,15 +2340,24 @@ type DropdownMenuSubProps = {
      */
     open?: boolean;
 };
+/**
+ * @group DropdownMenu
+ */
 declare function DropdownMenuSub({ children, defaultOpen, onOpenChange, open: openProp, ...props }: DropdownMenuSubProps): react_jsx_runtime.JSX.Element;
 declare namespace DropdownMenuSub {
     var displayName: string;
 }
 
 type DropdownMenuSubContentProps = ExcludeProps<BoxProps<typeof RadixMenu.SubContent, Pick<ComponentPropsWithoutRef<typeof ModalListbox>, "maxH" | "minW">>, "alignOffset" | "arrowPadding" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "forceMount" | "hideWhenDetached" | "loop" | "sideOffset" | "sticky" | "updatePositionStrategy">;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>>;
 
 type DropdownMenuSubTriggerProps = ListboxItemProps<typeof RadixMenu.SubTrigger>;
+/**
+ * @group DropdownMenu
+ */
 declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<NonNullable<{
     intent?: "danger" | "neutral" | undefined;
 } & {
@@ -2371,6 +2372,7 @@ declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<NonNu
 
 type DropdownMenuTriggerProps = ComponentPropsWithoutRef<typeof Button>;
 /**
+ * @group DropdownMenu
  * @extends Button
  */
 declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<Omit<Omit<{
@@ -2532,19 +2534,13 @@ type FlexProps = BoxProps<"div", {
 /**
  * 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.
+ * @deprecated since 1.8.0 - use {@link Group} instead.
  *
- * 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
+ * To migrate existing Flex code: `npx @optiaxiom/codemod flex-to-group src/`
  *
- * Default Props:
- * - flexDirection: 'column' (NOT 'row' like CSS!)
- * - gap: '16'
- * - alignItems: 'stretch' (when column) or 'center' (when row)
+ * ⚠️ Flex defaults to flexDirection='column' (NOT 'row' like standard CSS)
+ * and gap='16'. Group uses standard CSS defaults (flexDirection='row', no
+ * default gap).
  *
  * @category layout
  * @extends Box
@@ -3114,7 +3110,7 @@ declare const Paper: react.ForwardRefExoticComponent<{
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const indicator: (props?: {
-    intent?: "success" | "danger" | "primary" | "opal" | undefined;
+    intent?: "success" | "danger" | "opal" | "primary" | undefined;
 } | undefined, className?: string) => {
     className: string;
 };
@@ -3132,7 +3128,7 @@ declare const Progress: react.ForwardRefExoticComponent<Omit<NonNullable<Sprinkl
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<ProgressPrimitive.ProgressProps & react.RefAttributes<HTMLDivElement>, "ref">, "color" | "asChild" | "className"> & {
-    intent?: "success" | "danger" | "primary" | "opal" | undefined;
+    intent?: "success" | "danger" | "opal" | "primary" | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type RadioProps = BoxProps<typeof ToggleInputHiddenInput, {