@cdx-ui/components 0.0.1-beta.99 → 0.1.1

package/src/components/Tabs/styles.ts

@@ -0,0 +1,340 @@
+import { Platform, StyleSheet } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+// Kept local (rather than imported from `./index`) to avoid a circular import — `index.tsx`
+// imports styles from this file.
+export type TabsVariant = 'outline' | 'solid';
+
+// `rounded-full` is used for the indicator + individual tabs, which are small enough that a
+// full capsule radius looks correct in both orientations.
+const SOLID_RADIUS = 'rounded-full';
+
+// `rounded-full` (`border-radius/round`, 9999px) for the indicator, tab capsules, and the
+// horizontal solid track/shell — matches Figma SegmentedControl (always much wider than tall,
+// so full rounding reads as a capsule). Applied via StyleSheet on the track/shell because
+// arbitrary-value radius classes don't reliably resolve through Uniwind's scanner.
+const SOLID_TRACK_RADIUS = 9999;
+
+/**
+ * Vertical solid track radius — deliberately *not* `SOLID_TRACK_RADIUS` (9999px). A vertical
+ * track's box can end up nearly square (few short tab labels stacked in a column), and a
+ * fully-round radius on a near-square box renders as a circle/blob instead of a rounded rect.
+ * A fixed, modest radius avoids that regardless of how many tabs are stacked or how wide their
+ * labels are.
+ */
+const SOLID_VERTICAL_TRACK_RADIUS = 20;
+
+/** Thickness of the 1px gray rail the outline indicator rides beside. */
+const OUTLINE_TRACK_THICKNESS = 1;
+/** Thickness of the 2px action-colored outline selection segment (animated size, not a class). */
+export const OUTLINE_INDICATOR_THICKNESS = 2;
+
+/**
+ * Shared duration (ms) for the indicator's `withTiming` glide (`index.tsx`) and the tab's
+ * `duration-150` transition class (below) — kept in sync so the focus ring doesn't snap in
+ * ahead of a still-sliding solid/outline indicator. Change both together.
+ */
+export const TABS_INDICATOR_TRANSITION_MS = 150;
+
+/** Outline horizontal scroll — narrow fade reads cleanly against the page background. */
+export const TABS_SCROLL_FADE_SIZE = 32;
+
+/**
+ * Solid horizontal scroll — wider fade so tabs dissolve smoothly into the track (and under the
+ * overlay chevron) instead of ending in a hard clip at the scroll viewport edge.
+ */
+export const TABS_SOLID_SCROLL_FADE_SIZE = 40;
+
+/**
+ * Room reserved on the left/right sides inside the horizontal-scroll clip rect for ink that
+ * paints past a tab's own box: `shadow-sm` (`0px 1px 3px`, solid only) and the web focus ring
+ * (`ring-2` + `ring-offset-2`, ~4px, both variants). `overflow-x: auto` + `overflow-y: visible`
+ * does *not* achieve this — per the CSS Overflow spec, a non-`visible` value on one axis forces
+ * `visible` on the other axis to compute as `auto`, so it still clips. Applies to both variants —
+ * outline's ring bleeds past its box exactly the same way solid's does.
+ */
+/** Reserved ink room (focus ring, shadow) inside the horizontal-scroll clip rect — 4px (`p-1`). */
+const INDICATOR_BLEED = 4;
+
+/**
+ * Same bleed room as `INDICATOR_BLEED` on the top/bottom sides — kept equal to the solid shell's
+ * own `py-1` (below) so the shell's `overflow: hidden` clip boundary sits exactly where the
+ * reserved ink stops, with no gap and no clipping. Solid indicator = 32px, whole tablist = 40px
+ * per Figma SegmentedControl — a wider value here would inflate the shell past 40px.
+ */
+const INDICATOR_BLEED_VERTICAL = INDICATOR_BLEED;
+
+/**
+ * Numeric styles that can't be expressed as static Uniwind utility classes — solid track radius
+ * and outline indicator offset (`bottom-px` / `left-px` don't apply on Reanimated host views).
+ */
+export const tabsStyles = StyleSheet.create({
+  solidTrack: {
+    borderRadius: SOLID_TRACK_RADIUS,
+  },
+  /** See `SOLID_VERTICAL_TRACK_RADIUS` — used instead of `solidTrack` for vertical solid tracks. */
+  solidTrackVertical: {
+    borderRadius: SOLID_VERTICAL_TRACK_RADIUS,
+  },
+  /** Clips scroll ink + edge fades to the solid shell's rounded rect (className radius alone won't). */
+  solidShell: {
+    borderRadius: SOLID_TRACK_RADIUS,
+    overflow: 'hidden',
+  },
+  horizontalScrollContent: {
+    paddingHorizontal: INDICATOR_BLEED,
+    paddingVertical: INDICATOR_BLEED_VERTICAL,
+  },
+  horizontalScrollViewBleed: {
+    marginVertical: -INDICATOR_BLEED_VERTICAL,
+  },
+  outlineIndicator: {
+    zIndex: 1,
+  },
+  outlineIndicatorHorizontal: {
+    bottom: OUTLINE_TRACK_THICKNESS,
+  },
+  outlineIndicatorVertical: {
+    left: OUTLINE_TRACK_THICKNESS,
+  },
+  solidIndicator: {
+    zIndex: 0,
+  },
+  /** Clips press/hover feedback to the solid tab capsule (`rounded-full` alone is not enough on Pressable). */
+  solidTabPressable: {
+    borderRadius: 9999,
+    overflow: 'hidden',
+  },
+});
+
+export const tabsRootVariants = cva([], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-col',
+      vertical: 'flex-row items-start gap-4',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+
+export const tabsListVariants = cva(['relative min-w-0']);
+
+/** Flex track that hosts the rail, indicator, and tab triggers. */
+export const tabsListTrackVariants = cva(['relative items-stretch'], {
+  variants: {
+    orientation: {
+      horizontal: 'flex-row',
+      vertical: 'flex-col',
+    },
+    variant: {
+      outline: '',
+      solid: 'gap-0.5',
+    },
+    /**
+     * When horizontal tabs scroll, the solid track background + radius live on
+     * `tabsListSolidShellVariants` (viewport-sized) so rounded corners aren't clipped
+     * by the ScrollView.
+     */
+    scrollable: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { orientation: 'vertical', variant: 'outline', className: 'gap-2 pl-1' },
+    { orientation: 'horizontal', variant: 'outline', className: 'pb-1' },
+    { variant: 'solid', scrollable: false, className: 'bg-surface-secondary p-1' },
+    // Whole tablist = 40px per Figma SegmentedControl (`p-1` + 32px tab, above). Height-only —
+    // vertical solid lists size to their stacked tab content instead.
+    {
+      orientation: 'horizontal',
+      variant: 'solid',
+      scrollable: false,
+      className: 'h-10 max-h-10 min-h-10',
+    },
+  ],
+  defaultVariants: { orientation: 'horizontal', variant: 'solid', scrollable: false },
+});
+
+/**
+ * Viewport-sized solid shell for horizontal scroll — bg is a separate layer so overflow can stay
+ * visible. `py-1` (4px) matches the non-scrolling track's `p-1` exactly, so both the scrollable
+ * and non-scrollable solid paths land on the same 40px whole-tablist height (32px tab + 4px top
+ * + 4px bottom). `h-10`/`max-h-10`/`min-h-10` pin it explicitly so a taller-than-expected label
+ * line-height can't inflate the shell. `INDICATOR_BLEED_VERTICAL` (the ScrollView's own top/bottom
+ * reserved ink room, above) is kept equal to this `py-1` so the shell's `overflow: hidden` clip
+ * boundary lines up with where that reserved ink stops.
+ */
+export const tabsListSolidShellVariants = cva([
+  'relative min-w-0 w-full py-1 h-10 max-h-10 min-h-10',
+]);
+
+export const tabsListSolidShellBgVariants = cva(['absolute inset-0 bg-surface-secondary']);
+
+export const tabsListScrollViewVariants = cva(['w-full max-w-full']);
+
+export const tabsListScrollContainerVariants = cva(['relative min-w-0 w-full']);
+
+// Outline: flex sibling beside the scroll viewport (outline scroll looks good this way).
+export const tabsListScrollButtonVariants = cva([
+  'z-10 flex h-6 w-6 shrink-0 items-center justify-center self-center rounded-full',
+  TRANSITION_COLORS,
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-secondary-active',
+    web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+  }),
+]);
+
+// Solid: tiny overlay on the edge fade — the scroll viewport stays full-width inside the shell so
+// the track radius + gradient read as one continuous surface (no hard clip before the chevron).
+export const tabsListSolidScrollButtonVariants = cva([
+  'h-5 w-3 items-center justify-center rounded-full',
+  TRANSITION_COLORS,
+  Platform.select({
+    default: 'data-[active=true]:bg-surface-secondary-active',
+    web: 'data-[hover=true]:bg-surface-secondary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+  }),
+]);
+
+export const tabsListSolidScrollButtonSlotVariants = cva(
+  ['pointer-events-none absolute inset-y-0 z-20 flex w-3 justify-center'],
+  {
+    variants: {
+      position: {
+        start: 'left-1',
+        end: 'right-1',
+      },
+    },
+  },
+);
+
+// Horizontal: `h-px border-b` (1px). Vertical: Divider-style `w-px bg-*` (no border — `border`
+// on `w-px` doubles thickness to 2px). Gutter padding on the list keeps tabs off the rail.
+export const tabsOutlineTrackVariants = cva(['absolute z-0'], {
+  variants: {
+    orientation: {
+      horizontal: 'bottom-0 left-0 right-0 h-px border-b border-stroke-secondary',
+      vertical: 'top-0 bottom-0 left-0 w-px h-full bg-stroke-secondary',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+
+export const tabsIndicatorVariants = cva(['absolute'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: '',
+    },
+    variant: {
+      outline: 'bg-surface-action-strong',
+      solid: `${SOLID_RADIUS} bg-surface-primary shadow-sm`,
+    },
+  },
+  compoundVariants: [
+    // Rail offset is in `tabsStyles.outlineIndicator*` (Reanimated host).
+    {
+      orientation: 'horizontal',
+      variant: 'outline',
+      className: 'left-0',
+    },
+    {
+      orientation: 'vertical',
+      variant: 'outline',
+      className: 'top-0',
+    },
+    { variant: 'solid', className: 'top-0 left-0' },
+  ],
+  defaultVariants: { orientation: 'horizontal', variant: 'solid' },
+});
+
+export const tabsTabVariants = cva(
+  [
+    'relative z-10 items-center justify-center',
+    // `transition` (not `transition-colors`) — its default property list includes `box-shadow`,
+    // so the focus ring eases in over `TABS_INDICATOR_TRANSITION_MS` instead of snapping in
+    // ahead of the indicator, which glides over the same duration (see `index.tsx`).
+    'transition duration-150',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
+    DISABLED_CURSOR,
+    Platform.select({
+      web: [
+        'outline-none',
+        'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+      ].join(' '),
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: '',
+        vertical: '',
+      },
+      variant: {
+        outline: '',
+        solid: `${SOLID_RADIUS} overflow-hidden`,
+      },
+    },
+    compoundVariants: [
+      // `py-2` keeps horizontal outline tabs closer to the solid variant's compact 32px trigger
+      // height. The rail gap comes from the List's own `pb-1` compound variant (in
+      // `tabsListVariants`), not from this padding.
+      { orientation: 'horizontal', variant: 'outline', className: 'px-4 py-2' },
+      {
+        orientation: 'vertical',
+        variant: 'outline',
+        // Leave room for 1px rail + 2px indicator on the left.
+        className: 'px-4 py-1 pl-4',
+      },
+      // Ring-offset color defaults to the page background, which doesn't match the solid
+      // track's `bg-surface-secondary` — override it so the offset gap blends with the track
+      // instead of showing as a mismatched patch next to the ring. Explicit `h-8` (32px, per
+      // Figma SegmentedControl) instead of vertical padding — a fixed height, combined with the
+      // base class's `items-center`, centers the label regardless of its line-height, and can't
+      // drift the way padding-derived sizing could.
+      {
+        variant: 'solid',
+        className: [
+          'h-8 max-h-8 min-h-8 px-4',
+          'web:data-[focus-visible=true]:ring-offset-surface-secondary',
+        ].join(' '),
+      },
+    ],
+    defaultVariants: { orientation: 'horizontal', variant: 'solid' },
+  },
+);
+
+export const tabsPanelVariants = cva(['data-[state=inactive]:hidden'], {
+  variants: {
+    orientation: {
+      horizontal: '',
+      vertical: 'flex-1',
+    },
+  },
+  defaultVariants: { orientation: 'horizontal' },
+});
+
+export const tabsTabLabelVariants = cva('body-md', {
+  variants: {
+    state: {
+      // Selection state is a CVA input (not a `data-[]` selector) so inactive/active
+      // typography reconciles on native — `data-[state=active]:` on `Text` is unreliable
+      // there, and `font-sans-medium` / `font-sans-semibold` are the same family on iOS/Android
+      // so weight must come from `font-medium` / `font-semibold` instead.
+      inactive: Platform.select({
+        web: 'font-sans-medium text-content-secondary',
+        default: 'font-medium text-content-secondary',
+      }),
+      active: Platform.select({
+        web: 'font-sans-semibold text-content-primary',
+        default: 'font-semibold text-content-primary',
+      }),
+    },
+  },
+  defaultVariants: { state: 'inactive' },
+});
+
+export type TabsTabVariantProps = VariantProps<typeof tabsTabVariants>;
+export type TabsListTrackVariantProps = VariantProps<typeof tabsListTrackVariants>;

package/src/components/Text/styles.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const textStyle = cva(
   [

package/src/components/Textarea/styles.ts

@@ -1,5 +1,5 @@
-import { cva, type VariantProps } from 'class-variance-authority';
-import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS, WEB_NARROW_FIELD_TEXT } from '../../styles/constants';
 
 export const textareaRootVariants = cva(
   [
@@ -71,8 +71,10 @@ export const textareaFieldVariants = cva(
   {
     variants: {
       size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
+        // Web <600px: 16px prevents iOS Safari focus-zoom. Native and web ≥600px keep
+        // 14px / 12px (Figma Viewport=Wide).
+        default: ['text-[0.875rem]', WEB_NARROW_FIELD_TEXT],
+        small: ['text-[0.75rem]', WEB_NARROW_FIELD_TEXT],
       },
     },
     defaultVariants: {

package/src/components/Tile/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 export const tileGroupVariants = cva(['flex w-full'], {
   variants: {

package/src/components/Toast/animation.ts

@@ -299,6 +299,7 @@ export function useToastRootAnimation(
   // animate smoothly.
   const isWeb = Platform.OS === 'web';
 
+  // Explicit deps for Vite/web without the Reanimated Babel plugin.
   const rContainerStyle = useAnimatedStyle(() => {
     const lastToastId = Object.keys(heights.get())[Object.keys(heights.get()).length - 1];
     const lastToastHeight = lastToastId ? heights.get()[lastToastId] : undefined;
@@ -368,7 +369,24 @@ export function useToastRootAnimation(
         },
       ],
     };
-  });
+  }, [
+    heights,
+    total,
+    index,
+    placement,
+    maxVisibleToasts,
+    opacityValue,
+    translateYValue,
+    scaleValue,
+    isDragging,
+    gestureTranslateY,
+    gestureScale,
+    isAnimationDisabledValue,
+    isWeb,
+    opacityTimingConfig,
+    translateYTimingConfig,
+    scaleTimingConfig,
+  ]);
 
   // Determine entering and exiting animations based on placement
   const enteringAnimation = placement.startsWith('top') ? enteringTopValue : enteringBottomValue;

package/src/components/Toast/hooks.ts

@@ -3,14 +3,14 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native';
 import { useResolveClassNames } from 'uniwind';
 import type { ButtonProps } from '../Button';
-import { ToastColor } from './types';
+import { ToastColorInternal } from './types';
 
 export function useButtonColor({
   color,
   toastColor,
 }: {
   color: ButtonProps['color'];
-  toastColor: ToastColor;
+  toastColor: ToastColorInternal;
 }) {
   // TODO: Add toastActionVariants to styles.ts to restore color-aware action styling
   return useMemo(() => {
@@ -25,6 +25,7 @@ export function useButtonColor({
         return 'warning';
       case 'danger':
         return 'danger';
+      case 'neutral':
       default:
         return 'action';
     }

package/src/components/Toast/index.tsx

@@ -33,6 +33,7 @@ import type {
   DefaultToastProps,
   ToastActionProps,
   ToastCloseProps,
+  ToastColorInternal,
   ToastContextValue,
   ToastDescriptionProps,
   ToastIconProps,
@@ -48,6 +49,8 @@ const AnimatedToastRoot = Animated.createAnimatedComponent(ToastRootPrimitive);
 
 const IS_WEB = Platform.OS === 'web';
 
+let hasWarnedToastDefaultColor = false;
+
 /**
  * Fallback timeout for web exit transitions. Covers cases where
  * `transitionend` never fires — `prefers-reduced-motion: reduce`
@@ -84,11 +87,25 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
   /**
    * Merge global config with local props, ensuring local props take precedence
    */
-  const color = localColor ?? globalConfig?.color ?? 'default';
+  const resolvedColor = localColor ?? globalConfig?.color ?? 'neutral';
   const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
   const animation = localAnimation ?? globalConfig?.animation;
   const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
 
+  useEffect(() => {
+    if (__DEV__ && resolvedColor === ('default' as string) && !hasWarnedToastDefaultColor) {
+      hasWarnedToastDefaultColor = true;
+      console.warn(
+        '[Toast] The `default` color is deprecated and will be removed in a future major release. Use `neutral` instead.',
+      );
+    }
+  }, [resolvedColor]);
+
+  const color: NonNullable<ToastColorInternal> =
+    (resolvedColor as string) === 'default'
+      ? 'neutral'
+      : (resolvedColor as NonNullable<ToastColorInternal>);
+
   // Access id from props (id is omitted from ToastProps type but available at runtime)
   const toastProps = props as ToastProps & Pick<ToastComponentProps, 'id'>;
   const { id } = toastProps;
@@ -138,7 +155,7 @@ const ToastRoot = forwardRef<View, ToastProps>((props, ref) => {
 
   const lifecycle = useToastLifecycle();
   const isPendingRemoval = lifecycle?.pendingRemovalIds.has(id) ?? false;
-  const isFrontmost = lifecycle?.frontmostId === id;
+  const isFrontmost = lifecycle?.frontmostIds.has(id) ?? false;
 
   const [localState, setLocalState] = useState<Exclude<ToastDataState, 'closed'>>('entering');
 
@@ -445,11 +462,25 @@ export function DefaultToast(props: DefaultToastProps) {
   /**
    * Merge global config with local props, ensuring local props take precedence
    */
-  const color = localColor ?? globalConfig?.color ?? 'default';
+  const rawDefaultColor = localColor ?? globalConfig?.color ?? 'neutral';
   const placement = localPlacement ?? globalConfig?.placement ?? 'bottom';
   const isSwipeable = localIsSwipeable ?? globalConfig?.isSwipeable;
   const animation = localAnimation ?? globalConfig?.animation;
 
+  useEffect(() => {
+    if (__DEV__ && rawDefaultColor === ('default' as string) && !hasWarnedToastDefaultColor) {
+      hasWarnedToastDefaultColor = true;
+      console.warn(
+        '[Toast] The `default` color is deprecated and will be removed in a future major release. Use `neutral` instead.',
+      );
+    }
+  }, [rawDefaultColor]);
+
+  const color: NonNullable<ToastColorInternal> =
+    (rawDefaultColor as string) === 'default'
+      ? 'neutral'
+      : (rawDefaultColor as NonNullable<ToastColorInternal>);
+
   const handleActionPress = () => {
     if (onActionPress) {
       onActionPress({ show, hide });

package/src/components/Toast/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 /**
  * Toast root styles
@@ -46,7 +46,7 @@ export const toastRootVariants = cva(
   {
     variants: {
       color: {
-        default: '',
+        neutral: '',
         info: '',
         success: '',
         warning: '',
@@ -54,7 +54,7 @@ export const toastRootVariants = cva(
       },
     },
     defaultVariants: {
-      color: 'default',
+      color: 'neutral',
     },
   },
 );
@@ -135,7 +135,7 @@ export const toastWrapperVariants = cva(
 export const toastLabelVariants = cva(['text-base font-sans-medium'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -143,14 +143,14 @@ export const toastLabelVariants = cva(['text-base font-sans-medium'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 
 export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -158,14 +158,14 @@ export const toastDescriptionVariants = cva(['text-sm text-content-primary'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 
 export const toastIconVariants = cva(['size-5'], {
   variants: {
     color: {
-      default: 'text-content-primary',
+      neutral: 'text-content-primary',
       info: 'text-content-info',
       success: 'text-content-success',
       warning: 'text-content-warning',
@@ -173,7 +173,7 @@ export const toastIconVariants = cva(['size-5'], {
     },
   },
   defaultVariants: {
-    color: 'default',
+    color: 'neutral',
   },
 });
 

package/src/components/Toast/types.ts

@@ -10,9 +10,15 @@ import type { IconProps } from '../Icon';
 import { ToastColorProps } from './styles';
 
 /**
- * Toast color types
+ * Internal (normalized) toast color values used by CVA and context.
  */
-export type ToastColor = ToastColorProps['color'];
+export type ToastColorInternal = ToastColorProps['color'];
+
+/**
+ * Toast color types accepted by consumers.
+ * @remarks `'default'` is deprecated — use `'neutral'` instead.
+ */
+export type ToastColor = ToastColorInternal | 'default';
 
 /**
  * Toast placement types.
@@ -117,10 +123,10 @@ export type ToastRootAnimation = AnimationRoot<{
 /**
  * Props for the Toast.Root component
  */
-export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'id'> {
+export interface ToastProps extends ToastRootProps, Omit<ToastComponentProps, 'id' | 'placement'> {
   /**
    * Color of the toast
-   * @default 'default'
+   * @default 'neutral'
    */
   color?: ToastColor;
   /**
@@ -246,9 +252,9 @@ export type ToastCloseProps = Omit<IconButtonProps, 'as'> & {
  */
 export interface ToastContextValue {
   /**
-   * Color of the toast
+   * Color of the toast (normalized — always uses the current value names)
    */
-  color?: ToastColor;
+  color?: ToastColorInternal;
   /**
    * Function to hide the toast
    */
@@ -285,10 +291,10 @@ export type UseToastRootAnimationOptions = Pick<
  * Props for the DefaultToast component
  * Used internally when showing toasts with string or config object (without component)
  */
-export interface DefaultToastProps extends ToastComponentProps {
+export interface DefaultToastProps extends Omit<ToastComponentProps, 'placement'> {
   /**
    * Color of the toast
-   * @default 'default'
+   * @default 'neutral'
    */
   color?: ToastProps['color'];
   /**