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

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
 // =============================================================================
@@ -87,18 +89,38 @@ export interface SelectTriggerProps extends ISelectTriggerProps {
    * trigger instead of relying on `data-slot`.
    */
   asChild?: boolean;
+  /**
+   * Replaces the default open/closed chevron. Pass `null` to suppress the
+   * indicator. When `asChild` is set, only an explicitly provided indicator is
+   * appended to the substituted child.
+   */
+  indicator?: ReactNode;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectTrigger = forwardRef<View, SelectTriggerProps>(
-  ({ asChild, className, children, style, ...props }, ref) => {
+  ({ asChild, indicator, className, children, style, ...props }, ref) => {
     const { open } = useSelectContext();
     const { variant, size } = useSelectStyleContext();
 
     const computedClassName = asChild
       ? className
       : cn(selectTriggerVariants({ variant, size }), className);
+    const triggerIndicator =
+      indicator === undefined ? (
+        asChild ? undefined : (
+          <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+        )
+      ) : (
+        indicator
+      );
+    const triggerChildren =
+      asChild &&
+      triggerIndicator !== undefined &&
+      isValidElement<{ children?: ReactNode }>(children)
+        ? cloneElement(children, undefined, children.props.children, triggerIndicator)
+        : children;
 
     return (
       <SelectTriggerPrimitive
@@ -110,11 +132,11 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-trigger' }))}
       >
         {asChild ? (
-          children
+          triggerChildren
         ) : (
           <>
             {children}
-            <SelectIcon as={open ? KeyboardArrowUp : KeyboardArrowDown} />
+            {triggerIndicator}
           </>
         )}
       </SelectTriggerPrimitive>
@@ -213,7 +235,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 +244,34 @@ 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}
+        asChild
         style={style}
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-content' }))}
-      />
+      >
+        <Menu.Content asSurface scrollable className={className}>
+          {children}
+        </Menu.Content>
+      </SelectContentPrimitive>
     );
   },
 );
@@ -241,31 +279,58 @@ 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 {
   asChild?: boolean;
+  /**
+   * Replaces the default selected-item checkmark. The replacement is rendered
+   * only while the item is selected. Pass `null` to suppress the indicator.
+   */
+  indicator?: ReactNode;
   className?: string;
   children?: ReactNode;
 }
 
 const SelectItem = forwardRef<View, SelectItemProps>(
-  ({ asChild, className, children, style, ...props }, ref) => {
+  ({ asChild, indicator, 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 selectedIndicator =
+      indicator === undefined ? (
+        <Menu.ItemIndicator isChecked={checked} />
+      ) : checked ? (
+        indicator
+      ) : null;
+    const itemChildren = asChild ? (
+      isValidElement<{ children?: ReactNode }>(children) ? (
+        cloneElement(children, undefined, children.props.children, selectedIndicator)
+      ) : (
+        children
+      )
+    ) : (
+      <>
+        {children}
+        {selectedIndicator}
+      </>
+    );
 
     return (
       <SelectItemPrimitive
         ref={ref}
         asChild={asChild}
+        value={itemValue}
         className={computedClassName}
         style={style}
         {...props}
         {...mergeDataAttributes(props, dataAttributes({ slot: 'select-item' }))}
       >
-        {children}
+        {itemChildren}
       </SelectItemPrimitive>
     );
   },
@@ -274,7 +339,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 +351,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,6 +1,5 @@
-import { Platform } from 'react-native';
-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';
 
 // ── Trigger ─────────────────────────────────────────────────
 
@@ -47,6 +46,9 @@ export const selectTriggerVariants = cva(
       size: {
         default: [
           'h-11 min-h-11 px-4 py-3 gap-4',
+          // Web <600px: trim vertical padding so 16px / leading-normal (24px line box) fits
+          // in h-11. Native and web ≥600px keep py-3 at 14px text (Figma Viewport=Wide).
+          'web:max-[600px]:py-2',
           // Native only: subtract one hairline so the wider focus border doesn't shift layout.
           'native:data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
           'native:data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
@@ -55,6 +57,9 @@ export const selectTriggerVariants = cva(
         ],
         small: [
           'h-8 min-h-8 px-3 py-2 gap-1.5',
+          // Web <600px: grow shell to h-9 so 16px text fits. Native and web ≥600px stay
+          // h-8 at 12px text.
+          'web:max-[600px]:h-9 web:max-[600px]:min-h-9 web:max-[600px]:py-1.5',
           'native:data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
           'native:data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
           'native:data-[state=open]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
@@ -81,8 +86,10 @@ export const selectValueVariants = cva(
   {
     variants: {
       size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
+        // Web <600px: 16px matches Input/Textarea and 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: {
@@ -112,62 +119,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/Skeleton/index.tsx

@@ -26,7 +26,8 @@ export const Skeleton = forwardRef<Animated.View, SkeletonProps>(
       );
     }, [duration, opacity]);
 
-    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }));
+    // Explicit deps for Vite/web without the Reanimated Babel plugin.
+    const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.get() }), [opacity]);
 
     return (
       <Animated.View

package/src/components/Skeleton/styles.ts

@@ -1,4 +1,4 @@
-import { cva, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from '@cdx-ui/utils';
 
 export const skeletonVariants = cva(['bg-surface-neutral-subtle', 'rounded-md']);
 

package/src/components/Slider/getSliderPopupPosition.ts

@@ -0,0 +1,70 @@
+import { Platform, type ViewStyle } from 'react-native';
+import {
+  getAnchoredOverlayPosition,
+  type AnchorLayout,
+  type SliderOrientation,
+} from '@cdx-ui/primitives';
+
+export const SLIDER_POPUP_OFFSET = 8;
+export const SLIDER_POPUP_Z_INDEX = 9999;
+
+export interface SliderPopupPortalOrigin {
+  x: number;
+  y: number;
+}
+
+export function getSliderPopupPortalStyle(
+  windowStyle: ViewStyle,
+  portalOrigin: SliderPopupPortalOrigin | null,
+): ViewStyle {
+  if (portalOrigin == null) {
+    return { ...windowStyle, opacity: 0 };
+  }
+
+  return {
+    ...windowStyle,
+    left:
+      typeof windowStyle.left === 'number' ? windowStyle.left - portalOrigin.x : windowStyle.left,
+    top: typeof windowStyle.top === 'number' ? windowStyle.top - portalOrigin.y : windowStyle.top,
+  };
+}
+
+/**
+ * Popover-style placement for the slider value tooltip, modeled after anchored
+ * popover content positioning (placement + offset relative to a measured trigger).
+ */
+export function getSliderPopupAnchorStyle(
+  anchor: AnchorLayout,
+  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') {
+    return {
+      position,
+      left: result.style.left,
+      top: result.style.top,
+      zIndex: SLIDER_POPUP_Z_INDEX,
+      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
+    };
+  }
+
+  return {
+    position,
+    left: result.style.left,
+    top: result.style.top,
+    zIndex: SLIDER_POPUP_Z_INDEX,
+    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
+  };
+}