@cdx-ui/components 0.0.1-beta.159 → 0.0.1-beta.160

package/src/components/Menu/styles.ts

@@ -0,0 +1,153 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
+
+export const menuRootVariants = cva(
+  [
+    'bg-surface-primary',
+    'border border-stroke-secondary',
+    'overflow-hidden',
+    'rounded-xl',
+    'p-1',
+    'shadow-lg',
+    'web:outline-none',
+  ],
+  {
+    variants: {
+      scrollable: {
+        true: 'max-h-60 shrink',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      scrollable: false,
+    },
+  },
+);
+
+export const menuItemVariants = cva(
+  [
+    'flex-row items-center gap-2',
+    'min-h-9',
+    'rounded-lg',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
+    DISABLED_CURSOR,
+    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
+    Platform.select({
+      default: 'data-[active=true]:bg-surface-action-tint-active',
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
+    }),
+  ],
+  {
+    variants: {
+      color: {
+        neutral: 'text-content-primary',
+        danger:
+          'text-content-danger data-[hover=true]:bg-surface-danger-tint-hover data-[highlighted=true]:bg-surface-danger-tint-hover',
+      },
+      inset: {
+        true: '',
+        false: '',
+      },
+      size: {
+        default: 'px-3 py-2',
+        small: 'px-2.5 py-1.5',
+      },
+    },
+    compoundVariants: [
+      {
+        inset: true,
+        size: 'default',
+        class: 'ps-8 pe-3 py-2',
+      },
+      {
+        inset: true,
+        size: 'small',
+        class: 'ps-8 pe-2.5 py-1.5',
+      },
+      {
+        inset: false,
+        size: 'default',
+        class: 'px-3 py-2',
+      },
+      {
+        inset: false,
+        size: 'small',
+        class: 'px-2.5 py-1.5',
+      },
+    ],
+    defaultVariants: {
+      color: 'neutral',
+      inset: false,
+      size: 'default',
+    },
+  },
+);
+
+export const menuItemLabelVariants = cva(
+  [
+    'text-start',
+    Platform.select({
+      default: 'shrink-0',
+      web: 'min-w-0 flex-1',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
+      },
+      color: {
+        neutral: 'text-content-primary',
+        danger: 'text-content-danger',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+      color: 'neutral',
+    },
+  },
+);
+
+export const menuItemIconVariants = cva(['shrink-0', 'size-5'], {
+  variants: {
+    color: {
+      neutral: 'text-content-secondary',
+      danger: 'text-content-danger',
+    },
+  },
+  defaultVariants: {
+    color: 'neutral',
+  },
+});
+
+export const menuItemShortcutVariants = cva([
+  'shrink-0 text-content-tertiary',
+  'text-[0.75rem]',
+  'ms-auto',
+]);
+
+export const menuItemIndicatorVariants = cva([
+  'shrink-0 data-[icon=inline-end]:ms-auto',
+  'text-content-action',
+  'size-5',
+]);
+
+export const menuSectionLabelVariants = cva([
+  'px-3 py-1.5',
+  'text-[0.75rem] font-medium',
+  'text-content-tertiary',
+]);
+
+export const menuSeparatorVariants = cva([
+  // Bleed past menu `p-1` inset so the line spans the full panel width (Figma: px-[-4px]).
+  // Omit `w-full`: percentage width ignores the negative margins and leaves a right-side gap.
+  'self-stretch py-1 -mx-1',
+]);
+
+export const menuSeparatorLineVariants = cva(['h-px w-full bg-stroke-secondary']);
+
+export type MenuRootVariantProps = VariantProps<typeof menuRootVariants>;
+export type MenuItemVariantProps = VariantProps<typeof menuItemVariants>;

package/src/components/Select/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, type ReactNode } from 'react';
+import { cloneElement, forwardRef, isValidElement, useMemo, type ReactNode } from 'react';
 import { Text, type TextProps, View, type ViewProps } from 'react-native';
 import { KeyboardArrowDown, KeyboardArrowUp } from '@cdx-ui/icons';
 import {
@@ -20,13 +20,12 @@ import {
 } from '@cdx-ui/primitives';
 import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
+import { Menu } from '../Menu';
+import { menuItemLabelVariants, menuItemVariants } from '../Menu/styles';
 import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
-  selectContentVariants,
   selectIconVariants,
-  selectItemLabelVariants,
-  selectItemVariants,
   selectTriggerVariants,
   selectValueVariants,
 } from './styles';
@@ -35,6 +34,9 @@ const SCOPE = 'SELECT';
 
 const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
 
+const toMenuItemSize = (size: SelectVariantProps['size'] | undefined) =>
+  size === 'small' ? 'small' : 'default';
+
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -213,7 +215,7 @@ const SelectIcon = ({ asChild, className, style, as, position, ...props }: Selec
 SelectIcon.displayName = 'Select.Icon';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED CONTENT — composes Menu surface (listbox semantics stay on primitive)
 // =============================================================================
 
 export interface SelectContentProps extends ViewProps, ISelectContentProps {
@@ -222,18 +224,33 @@ export interface SelectContentProps extends ViewProps, ISelectContentProps {
 }
 
 const SelectContent = forwardRef<View, SelectContentProps>(
-  ({ asChild, className, style, ...props }, ref) => {
-    const computedClassName = cn(selectContentVariants(), className);
+  ({ asChild, className, style, children, ...props }, ref) => {
+    if (asChild) {
+      return (
+        <SelectContentPrimitive
+          ref={ref}
+          asChild
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
+        >
+          {children}
+        </SelectContentPrimitive>
+      );
+    }
 
     return (
       <SelectContentPrimitive
         ref={ref}
-        asChild={asChild}
-        className={computedClassName}
         style={style}
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
-      />
+      >
+        <Menu.Content asSurface scrollable className={className}>
+          {children}
+        </Menu.Content>
+      </SelectContentPrimitive>
     );
   },
 );
@@ -241,7 +258,7 @@ const SelectContent = forwardRef<View, SelectContentProps>(
 SelectContent.displayName = 'Select.Content';
 
 // =============================================================================
-// STYLED ITEM
+// STYLED ITEM — composes Menu item visuals (option semantics stay on primitive)
 // =============================================================================
 
 export interface SelectItemProps extends ISelectItemProps {
@@ -251,21 +268,38 @@ export interface SelectItemProps extends ISelectItemProps {
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ asChild, className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, value: itemValue, ...props }, ref) => {
     const { size } = useSelectStyleContext();
-
-    const computedClassName = cn(selectItemVariants({ size }), className);
+    const { value: selectedValue } = useSelectContext();
+    const menuSize = toMenuItemSize(size);
+    const checked = selectedValue === itemValue;
+
+    const computedClassName = cn(menuItemVariants({ size: menuSize }), className);
+    const selectedIcon = <Menu.ItemIndicator isChecked={checked} />;
+    const itemChildren = asChild ? (
+      selectedIcon && isValidElement<{ children?: ReactNode }>(children) ? (
+        cloneElement(children, undefined, children.props.children, selectedIcon)
+      ) : (
+        children
+      )
+    ) : (
+      <>
+        {children}
+        {selectedIcon}
+      </>
+    );
 
     return (
       <SelectItemPrimitive
         ref={ref}
         asChild={asChild}
+        value={itemValue}
         className={computedClassName}
         style={style}
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-item' }))}
       >
-        {children}
+        {itemChildren}
       </SelectItemPrimitive>
     );
   },
@@ -274,7 +308,7 @@ const SelectItem = forwardRef<View, SelectItemProps>(
 SelectItem.displayName = 'Select.Item';
 
 // =============================================================================
-// STYLED ITEM LABEL (styled-only, reads item context for checked state)
+// STYLED ITEM LABEL — composes Menu.ItemLabel
 // =============================================================================
 
 export interface SelectItemLabelProps extends TextProps, ISelectItemLabelProps {
@@ -286,26 +320,27 @@ const SelectItemLabel = forwardRef<Text, SelectItemLabelProps>(
   ({ asChild, className, style, children, ...props }, ref) => {
     const { size } = useSelectStyleContext();
     const { checked } = useSelectItemContext();
-
-    const computedClassName = cn(selectItemLabelVariants({ size }), className);
-    const Comp = asChild ? Slot : Text;
+    const menuSize = toMenuItemSize(size);
 
     return (
-      <Comp
+      <Menu.ItemLabel
         ref={ref}
-        className={computedClassName}
+        asChild={asChild}
+        isChecked={checked}
+        size={menuSize}
+        className={cn(menuItemLabelVariants({ size: menuSize }), className)}
         style={style}
         {...props}
         {...mergeDataAttributes(
-          props,
           dataAttributes({
             slot: 'select-item-label',
             state: checked ? 'checked' : 'unchecked',
           }),
+          props,
         )}
       >
         {children}
-      </Comp>
+      </Menu.ItemLabel>
     );
   },
 );

package/src/components/Select/styles.ts

@@ -1,4 +1,3 @@
-import { Platform } from 'react-native';
 import { cva, type VariantProps } from '@cdx-ui/utils';
 import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/constants';
 
@@ -112,62 +111,4 @@ export const selectIconVariants = cva(
   },
 );
 
-// ── Content ─────────────────────────────────────────────────
-
-export const selectContentVariants = cva([
-  'bg-surface-primary',
-  'border border-stroke-secondary',
-  'overflow-hidden',
-  'rounded-xl',
-  Platform.select({
-    web: 'shadow-sm',
-    default: '',
-  }),
-  'max-h-60',
-  'py-1',
-]);
-
-// ── Item ────────────────────────────────────────────────────
-
-export const selectItemVariants = cva(
-  [
-    'flex-row items-center',
-    'transition-colors duration-100',
-    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
-    Platform.select({
-      default: 'data-[active=true]:bg-surface-action-tint-active',
-      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
-    }),
-  ],
-  {
-    variants: {
-      size: {
-        default: 'px-3 py-2',
-        small: 'px-2.5 py-1.5',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-// ── ItemLabel ───────────────────────────────────────────────
-
-export const selectItemLabelVariants = cva(
-  ['text-content-primary', 'data-[state=checked]:font-medium'],
-  {
-    variants: {
-      size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
 export type SelectVariantProps = VariantProps<typeof selectTriggerVariants>;

package/src/components/Slider/getSliderPopupPosition.ts

@@ -1,5 +1,9 @@
 import { Platform, type ViewStyle } from 'react-native';
-import type { AnchorLayout, SliderOrientation } from '@cdx-ui/primitives';
+import {
+  getAnchoredOverlayPosition,
+  type AnchorLayout,
+  type SliderOrientation,
+} from '@cdx-ui/primitives';
 
 export const SLIDER_POPUP_OFFSET = 8;
 export const SLIDER_POPUP_Z_INDEX = 9999;
@@ -13,24 +17,32 @@ export function getSliderPopupAnchorStyle(
   orientation: SliderOrientation,
   offset = SLIDER_POPUP_OFFSET,
 ): ViewStyle {
+  const result = getAnchoredOverlayPosition(
+    anchor,
+    { width: 0, height: 0 },
+    { width: Number.MAX_SAFE_INTEGER, height: Number.MAX_SAFE_INTEGER },
+    {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset,
+      collisionBehavior: 'none',
+    },
+  );
   const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
 
   if (orientation === 'vertical') {
-    const centerY = anchor.y + anchor.height / 2;
     return {
       position,
-      left: anchor.x + anchor.width + offset,
-      top: centerY,
+      left: result.style.left,
+      top: result.style.top,
       zIndex: SLIDER_POPUP_Z_INDEX,
       transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
     };
   }
 
-  const centerX = anchor.x + anchor.width / 2;
   return {
     position,
-    left: centerX,
-    top: anchor.y - offset,
+    left: result.style.left,
+    top: result.style.top,
     zIndex: SLIDER_POPUP_Z_INDEX,
     transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
   };

package/src/components/Slider/index.tsx

@@ -16,7 +16,7 @@ import {
   Slot,
   Portal,
   createPortalFn,
-  useAnchorPosition,
+  useAnchoredOverlay,
   dataAttributes,
   getMarkerPositionStyle,
   getMarkerStepValues,
@@ -29,7 +29,14 @@ import {
   type ISliderThumbProps,
   type SliderOrientation,
 } from '@cdx-ui/primitives';
-import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import {
+  cn,
+  composeEventHandlers,
+  mergeRefs,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
 import {
   sliderMarkerVariants,
   sliderPopupBaseVariants,
@@ -42,7 +49,7 @@ import {
   type SliderColor,
   type SliderVariantProps,
 } from './styles';
-import { getSliderPopupAnchorStyle, SLIDER_POPUP_Z_INDEX } from './getSliderPopupPosition';
+import { SLIDER_POPUP_OFFSET, SLIDER_POPUP_Z_INDEX } from './getSliderPopupPosition';
 
 const SCOPE = 'SLIDER';
 
@@ -256,33 +263,42 @@ export interface SliderPopupProps extends ViewProps {
 }
 
 const SliderPopup = forwardRef<View, SliderPopupProps>(
-  ({ asChild, className, style, children, ...props }, ref) => {
+  ({ asChild, className, style, children, onLayout, ...props }, ref) => {
     const { orientation } = useSliderStyleContext();
     const { isDragging, isHovered, isFocused, getValueLabel, thumbRef, percent } =
       useSliderContext();
     const portalName = useId();
 
     const visible = isDragging || isHovered || isFocused;
-    const anchorLayout = useAnchorPosition(thumbRef, visible, {
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: popupPositionStyle,
+    } = useAnchoredOverlay(thumbRef, visible, {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset: SLIDER_POPUP_OFFSET,
+      collisionBehavior: 'none',
+      width: 'content',
       remeasureKey: percent,
       trackWhileOpen: true,
     });
 
-    if (!visible || anchorLayout == null) {
+    if (!visible) {
       return null;
     }
 
     const label = renderPopupLabel(children, getValueLabel);
     const computedClassName = cn(sliderPopupBaseVariants(), className);
     const Comp = asChild ? Slot : View;
-    const anchorStyle = getSliderPopupAnchorStyle(anchorLayout, orientation);
 
     const popup = (
-      <View pointerEvents="none" style={anchorStyle}>
+      <View pointerEvents="none" style={[popupPositionStyle, { zIndex: SLIDER_POPUP_Z_INDEX }]}>
         <Comp
-          ref={ref}
+          ref={mergeRefs(ref, floatingRef)}
           className={computedClassName}
           style={style}
+          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+          {...props}
           accessibilityElementsHidden
           importantForAccessibility="no-hide-descendants"
           {...mergeDataAttributes(

package/src/components/Toast/index.tsx

@@ -155,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');
 

package/src/components/Toast/types.ts

@@ -123,7 +123,7 @@ 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 'neutral'
@@ -291,7 +291,7 @@ 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 'neutral'

package/src/components/index.ts

@@ -31,6 +31,7 @@ export * from './Input';
 export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
+export * from './Menu';
 export * from './ProgressBar';
 export * from './ProgressCircle';
 export * from './Skeleton';

package/src/components/picker/surfaces.tsx

@@ -3,12 +3,11 @@ import { ScrollView, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import {
   OverlayContainer,
-  useAnchorPosition,
+  useAnchoredOverlay,
   useDismissOverlay,
   useEscapeKey,
-  useOverlayPosition,
 } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import { cn, mergeRefs } from '@cdx-ui/utils';
 import { Dialog } from '../Dialog';
 import { BottomSheet, useBottomSheet, type BottomSheetModalProps } from '../BottomSheet';
 import { PICKER_POPOVER_Z_INDEX, pickerPopoverContentVariants } from './styles';
@@ -141,14 +140,18 @@ export function PickerPopoverSurface({
 
   const dismiss = useCallback(() => setOpen(false), [setOpen]);
 
-  const anchorLayout = useAnchorPosition(anchorRef, open);
-  const position = useOverlayPosition(anchorLayout);
+  const { floatingRef, onFloatingLayout, style } = useAnchoredOverlay(anchorRef, open, {
+    placement: 'bottom-start',
+    offset: 4,
+    collisionBehavior: 'flip-shift',
+    width: 'anchor',
+  });
 
   const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];
   useDismissOverlay(dismissEnabled, contentRef, excludeRefs, dismiss);
   useEscapeKey(open, dismiss);
 
-  if (!open || !position) {
+  if (!open) {
     return null;
   }
 
@@ -157,12 +160,13 @@ export function PickerPopoverSurface({
       onDismiss={dismiss}
       entering={FadeIn.duration(150)}
       exiting={FadeOut.duration(100)}
-      style={[position.style, { zIndex: PICKER_POPOVER_Z_INDEX }]}
+      style={{ zIndex: PICKER_POPOVER_Z_INDEX }}
     >
       <View
-        ref={contentRef}
+        ref={mergeRefs(contentRef, floatingRef)}
+        onLayout={onFloatingLayout}
         className={cn(pickerPopoverContentVariants(), className)}
-        style={{ maxHeight: position.maxHeight }}
+        style={style}
         accessibilityViewIsModal
       >
         <ScrollView scrollEventThrottle={16} showsVerticalScrollIndicator={false}>