@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/components/ProgressSegmented/index.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  progressSegmentedVariants,
+  segmentVariants,
+  type ProgressSegmentedVariants,
+} from './styles';
+
+export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
+  /** Current step (1-based index into the segment count) */
+  readonly step: number;
+  /** Total number of segments */
+  readonly total?: number;
+  /** When true, the current step segment is marked as complete rather than in-progress */
+  readonly isStepComplete?: boolean;
+  /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
+  readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+  readonly className?: string;
+}
+
+export const ProgressSegmented = forwardRef<View, ProgressSegmentedProps>(
+  (
+    {
+      step,
+      total = 5,
+      isStepComplete = false,
+      getAccessibilityText,
+      className,
+      accessibilityLabel = 'Progress',
+      ...props
+    },
+    ref,
+  ) => {
+    const clampedStep = Math.max(0, Math.min(step, total));
+
+    const segments = useMemo(() => {
+      return Array.from({ length: total }, (_, index) => {
+        const segmentIndex = index + 1;
+        let state: 'complete' | 'incomplete' | 'inprogress' = 'incomplete';
+
+        if (segmentIndex < clampedStep || (isStepComplete && segmentIndex === clampedStep)) {
+          state = 'complete';
+        } else if (segmentIndex === clampedStep) {
+          state = 'inprogress';
+        }
+
+        return state;
+      });
+    }, [total, clampedStep, isStepComplete]);
+
+    let accessibilityText = `Step ${String(clampedStep)} of ${String(total)}`;
+    if (getAccessibilityText) {
+      accessibilityText = getAccessibilityText(clampedStep, total, isStepComplete);
+    } else if (isStepComplete) {
+      accessibilityText = `Step ${String(clampedStep)} of ${String(total)}, completed`;
+    }
+
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="progressbar"
+        accessibilityLabel={accessibilityLabel}
+        accessibilityValue={{
+          min: 0,
+          max: total,
+          now: clampedStep,
+          text: accessibilityText,
+        }}
+        className={cn(progressSegmentedVariants(), className)}
+        {...props}
+      >
+        {segments.map((state, index) => (
+          <View key={index} className={cn(segmentVariants({ state }))} />
+        ))}
+      </View>
+    );
+  },
+);
+
+ProgressSegmented.displayName = 'ProgressSegmented';

package/src/components/ProgressSegmented/styles.ts

@@ -0,0 +1,20 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressSegmentedVariants = cva(['flex-row gap-1 w-full rounded overflow-hidden']);
+
+export const segmentVariants = cva(['flex-1 h-1'], {
+  variants: {
+    state: {
+      complete: 'bg-surface-action-strong',
+      incomplete: 'bg-surface-action-tint',
+      inprogress:
+        'bg-gradient-to-r from-surface-action-strong from-50% to-surface-action-tint to-50%',
+    },
+  },
+  defaultVariants: {
+    state: 'incomplete',
+  },
+});
+
+export type ProgressSegmentedVariants = VariantProps<typeof progressSegmentedVariants>;
+export type SegmentVariants = VariantProps<typeof segmentVariants>;

package/src/components/Select/SelectTriggerHost.tsx

@@ -0,0 +1,4 @@
+import { Pressable } from 'react-native';
+
+/** Native: `Pressable`. Web: `SelectTriggerHost.web` uses `<button>` so `<label htmlFor>` works. */
+export const SelectTriggerHost = Pressable;

package/src/components/Select/SelectTriggerHost.web.tsx

@@ -0,0 +1,136 @@
+import React, { forwardRef } from 'react';
+import { StyleSheet } from 'react-native';
+import type { PressableProps } from 'react-native';
+
+export type SelectTriggerHostProps = PressableProps & { className?: string };
+
+/** Props that must not be forwarded to a DOM `<button>`. */
+const OMIT = new Set<string>([
+  'hitSlop',
+  'pressRetentionOffset',
+  'android_ripple',
+  'android_disableSound',
+  'unstable_pressDelay',
+  'onLongPress',
+  'delayLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onHoverIn',
+  'onHoverOut',
+  'disabled',
+  'style',
+  'className',
+  'testID',
+  'children',
+  'accessible',
+  'accessibilityActions',
+  'accessibilityElementsHidden',
+  'accessibilityHint',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLabel',
+  'accessibilityLabelledBy',
+  'accessibilityLiveRegion',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityValue',
+  'accessibilityViewIsModal',
+  'importantForAccessibility',
+  'needsOffscreenAlphaCompositing',
+  'collapsable',
+  'shouldRasterizeIOS',
+  'removeClippedSubviews',
+  'onAccessibilityAction',
+  'onAccessibilityEscape',
+  'onAccessibilityTap',
+]);
+
+function resolveChildren(children: PressableProps['children']): React.ReactNode {
+  if (typeof children === 'function') {
+    return children({ pressed: false });
+  }
+  return children;
+}
+
+function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
+  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
+  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
+const webButtonLayoutStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minWidth: 0,
+  textAlign: 'start',
+  boxSizing: 'border-box',
+  margin: 0,
+  font: 'inherit',
+  lineHeight: 'normal',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+};
+
+/**
+ * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
+ * `Pressable` on web is a non-labelable div; no extra refs are needed for label association.
+ */
+export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHostProps>(
+  function SelectTriggerHost(props, ref) {
+    const {
+      children,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      disabled,
+      style,
+      className,
+      testID,
+      ...rest
+    } = props;
+
+    const domProps = filterDomProps(rest);
+    const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
+
+    return (
+      <button
+        ref={ref}
+        {...domProps}
+        type="button"
+        disabled={!!disabled}
+        className={typeof className === 'string' ? className : undefined}
+        style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
+        data-testid={testID}
+        onClick={(e) => {
+          if (!disabled) {
+            onPress?.(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+          }
+        }}
+        onPointerDown={(e) => {
+          onPressIn?.(e as unknown as Parameters<NonNullable<PressableProps['onPressIn']>>[0]);
+        }}
+        onPointerUp={(e) => {
+          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
+        }}
+        onPointerCancel={(e) => {
+          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
+        }}
+        onMouseEnter={(e) => {
+          onHoverIn?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverIn']>>[0]);
+        }}
+        onMouseLeave={(e) => {
+          onHoverOut?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverOut']>>[0]);
+        }}
+      >
+        {resolveChildren(children)}
+      </button>
+    );
+  },
+);
+
+SelectTriggerHost.displayName = 'SelectTriggerHost';

package/src/components/Select/index.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type ReactNode } from 'react';
 import { Pressable, Text, type TextProps, View, type ViewProps } from 'react-native';
+import { ArrowDropDown } from '@cdx-ui/icons';
 import {
   createSelect,
   type ISelectContentProps,
@@ -10,6 +11,8 @@ import {
   type ISelectValueProps,
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
+import { SelectTriggerHost } from './SelectTriggerHost';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -28,7 +31,7 @@ const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps
 
 const SelectPrimitive = createSelect({
   Root,
-  Trigger: Pressable,
+  Trigger: SelectTriggerHost,
   Value: Text,
   Icon: View,
   Content: View,
@@ -45,7 +48,7 @@ export interface SelectProps extends ViewProps, ISelectProps, SelectVariantProps
 }
 
 const SelectRoot = forwardRef<View, SelectProps>(
-  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
     return (
       <SelectPrimitive
         ref={ref}
@@ -80,6 +83,7 @@ const SelectTrigger = forwardRef<View, SelectTriggerProps>(
     return (
       <SelectPrimitive.Trigger ref={ref} className={computedClassName} style={style} {...props}>
         {children}
+        <SelectIcon as={ArrowDropDown} />
       </SelectPrimitive.Trigger>
     );
   },
@@ -96,9 +100,9 @@ export interface SelectValueProps extends TextProps, ISelectValueProps {
 }
 
 const SelectValue = forwardRef<Text, SelectValueProps>(({ className, style, ...props }, ref) => {
-  const { variant, size } = useSelectStyleContext();
+  const { size } = useSelectStyleContext();
 
-  const computedClassName = cn(selectValueVariants({ variant, size }), className);
+  const computedClassName = cn(selectValueVariants({ size }), className);
 
   return <SelectPrimitive.Value ref={ref} className={computedClassName} style={style} {...props} />;
 });
@@ -109,17 +113,15 @@ SelectValue.displayName = 'Select.Value';
 // STYLED ICON COMPONENT
 // =============================================================================
 
-export interface SelectIconProps extends ViewProps {
-  className?: string;
-}
+export interface SelectIconProps extends Omit<IconProps, 'children'> {}
 
-const SelectIcon = forwardRef<View, SelectIconProps>(({ className, style, ...props }, ref) => {
-  const { variant, size } = useSelectStyleContext();
+const SelectIcon = ({ className, style, ...props }: SelectIconProps) => {
+  const { size } = useSelectStyleContext();
 
-  const computedClassName = cn(selectIconVariants({ variant, size }), className);
+  const computedClassName = cn(selectIconVariants({ size }), className);
 
-  return <SelectPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props} />;
-});
+  return <Icon className={computedClassName} style={style} {...props} />;
+};
 
 SelectIcon.displayName = 'Select.Icon';
 
@@ -211,5 +213,3 @@ export const Select = Object.assign(SelectRoot, {
   Item: SelectItem,
   ItemLabel: SelectItemLabel,
 }) as SelectCompoundComponent;
-
-export type { SelectVariantProps } from './styles';

package/src/components/Select/styles.ts

@@ -1,58 +1,58 @@
 import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_MUTED,
+  COLOR_TEXT_PRIMARY,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_SM,
+  RADIUS_MD,
+  SHADOW_SM,
+  SHADOW_MD,
+  SIZE_SCALE,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 // ── Trigger ─────────────────────────────────────────────────
 
 export const selectTriggerVariants = cva(
   [
-    'flex-row items-center justify-between',
-    'rounded-lg',
-    'transition-colors duration-150',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none',
+    'flex w-full min-w-0 flex-row items-center justify-between text-start',
+    RADIUS_SM,
+    SHADOW_SM,
+    TRANSITION_COLORS,
+    COLOR_BG_PRIMARY,
+    `border ${COLOR_BORDER_DEFAULT}`,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
-    'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-blue-500 data-[focus-visible=true]:ring-offset-2',
+    'data-[state=open]:border-slate-900',
+    'data-[invalid=true]:border-red-500',
+    'data-[readonly=true]:bg-slate-50',
+    Platform.select({
+      default: 'data-[active=true]:border-slate-300',
+      web: [
+        'data-[hover=true]:border-slate-300 data-[active=true]:data-[hover=true]:border-slate-400',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+        'data-[state=open]:ring-2 data-[state=open]:ring-slate-400/50',
+      ].join(' '),
+    }),
   ],
   {
     variants: {
       variant: {
-        outline: [
-          'bg-white border border-gray-300',
-          Platform.select({
-            default: 'data-[active=true]:border-gray-400',
-            web: 'data-[hover=true]:border-gray-400 data-[active=true]:data-[hover=true]:border-gray-500',
-          }),
-          'data-[state=open]:data-[invalid=false]:border-blue-500',
-          'data-[invalid=true]:border-red-500',
-          'data-[readonly=true]:bg-gray-50',
-        ],
-        filled: [
-          'bg-gray-100 border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-200',
-            web: 'data-[hover=true]:bg-gray-200 data-[active=true]:data-[hover=true]:bg-gray-300',
-          }),
-          'data-[state=open]:border-blue-500',
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-          'data-[readonly=true]:bg-gray-200',
-        ],
-        ghost: [
-          'bg-transparent border border-transparent',
-          Platform.select({
-            default: 'data-[active=true]:bg-gray-100',
-            web: 'data-[hover=true]:bg-gray-50 data-[active=true]:data-[hover=true]:bg-gray-100',
-          }),
-          'data-[invalid=true]:border-red-500 data-[invalid=true]:border',
-        ],
+        outline: [],
       },
       size: {
-        sm: 'h-8 px-2.5 gap-1.5',
-        md: 'h-10 px-3 gap-2',
-        lg: 'h-12 px-4 gap-2.5',
+        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} ${SIZE_SCALE.default.gap}`,
+        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} ${SIZE_SCALE.small.gap}`,
       },
     },
     defaultVariants: {
       variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -60,23 +60,21 @@ export const selectTriggerVariants = cva(
 // ── Value ───────────────────────────────────────────────────
 
 export const selectValueVariants = cva(
-  ['flex-1', 'data-[placeholder=true]:text-gray-400', 'data-[invalid=true]:text-red-600'],
+  [
+    'min-w-0 flex-1 text-start',
+    'data-[placeholder=true]:text-slate-400',
+    'data-[invalid=true]:text-red-600',
+    COLOR_TEXT_PRIMARY,
+  ],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-900',
-        filled: 'text-gray-900',
-        ghost: 'text-gray-900',
-      },
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -84,23 +82,20 @@ export const selectValueVariants = cva(
 // ── Icon ────────────────────────────────────────────────────
 
 export const selectIconVariants = cva(
-  ['items-center justify-center', 'data-[invalid=true]:text-red-500'],
+  [
+    'shrink-0 items-center justify-center self-center',
+    COLOR_TEXT_MUTED,
+    'data-[invalid=true]:text-red-500',
+  ],
   {
     variants: {
-      variant: {
-        outline: 'text-gray-500',
-        filled: 'text-gray-500',
-        ghost: 'text-gray-400',
-      },
       size: {
-        sm: 'h-4 w-4',
-        md: 'h-5 w-5',
-        lg: 'h-6 w-6',
+        default: 'h-5 w-5',
+        small: 'h-4 w-4',
       },
     },
     defaultVariants: {
-      variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -108,12 +103,12 @@ export const selectIconVariants = cva(
 // ── Content ─────────────────────────────────────────────────
 
 export const selectContentVariants = cva([
-  'bg-white',
-  'border border-gray-200',
+  COLOR_BG_PRIMARY,
+  `border ${COLOR_BORDER_DEFAULT}`,
   'overflow-hidden',
-  'rounded-lg',
+  RADIUS_MD,
   Platform.select({
-    web: 'shadow-lg',
+    web: SHADOW_MD,
     default: '',
   }),
   'max-h-60',
@@ -127,22 +122,21 @@ 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-blue-50',
+    'data-[state=checked]:bg-slate-50 data-[state=checked]:font-medium',
     Platform.select({
-      default: 'data-[active=true]:bg-gray-100',
-      web: 'data-[hover=true]:bg-gray-100 data-[active=true]:data-[hover=true]:bg-gray-200 data-[highlighted=true]:bg-blue-50',
+      default: 'data-[active=true]:bg-slate-100',
+      web: 'data-[hover=true]:bg-slate-50 data-[active=true]:data-[hover=true]:bg-slate-100 data-[highlighted=true]:bg-slate-50',
     }),
   ],
   {
     variants: {
       size: {
-        sm: 'px-2.5 py-1.5',
-        md: 'px-3 py-2',
-        lg: 'px-4 py-2.5',
+        default: 'px-3 py-2',
+        small: 'px-2.5 py-1.5',
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );
@@ -150,17 +144,16 @@ export const selectItemVariants = cva(
 // ── ItemLabel ───────────────────────────────────────────────
 
 export const selectItemLabelVariants = cva(
-  ['text-gray-900', 'data-[state=checked]:font-semibold', 'data-[state=checked]:text-blue-700'],
+  [COLOR_TEXT_PRIMARY, 'data-[state=checked]:font-medium'],
   {
     variants: {
       size: {
-        sm: 'text-sm',
-        md: 'text-base',
-        lg: 'text-lg',
+        default: SIZE_SCALE.default.text,
+        small: SIZE_SCALE.small.text,
       },
     },
     defaultVariants: {
-      size: 'md',
+      size: 'default',
     },
   },
 );

package/src/components/Stack/HStack.tsx

@@ -1,21 +1,8 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-// import { spacing } from '@cdx-ui/styles';
-
-// TODO: Integrate with tokens (multiply by spacing)
-const spaceScale = {
-  xs: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5,
-  '2xl': 6,
-  '3xl': 7,
-  '4xl': 8,
-} as const;
-
-type StackSpace = keyof typeof spaceScale;
+import { cn } from '@cdx-ui/utils';
+import { hStackRootVariants, type StackSpace } from './styles';
 
 export interface HStackProps extends ViewProps {
   className?: string;
@@ -24,13 +11,15 @@ export interface HStackProps extends ViewProps {
 }
 
 export const HStack = forwardRef<View, HStackProps>(
-  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
-    const gap = space ? spaceScale[space] : undefined;
+  (
+    { reversed = false, space, style, className, children, ...restProps },
+    ref: ForwardedRef<View>,
+  ) => {
     return (
       <View
         ref={ref}
-        className={className}
-        style={[{ flexDirection: reversed ? 'row-reverse' : 'row' }, gap ? { gap } : null, style]}
+        className={cn(hStackRootVariants({ reversed, space }), className)}
+        style={style}
         {...restProps}
       >
         {children}

package/src/components/Stack/VStack.tsx

@@ -1,21 +1,8 @@
 import type { ForwardedRef } from 'react';
 import { forwardRef } from 'react';
 import { View, type ViewProps } from 'react-native';
-// import { spacing } from '@cdx-ui/styles';
-
-// TODO: Integrate with tokens (multiply by spacing)
-const spaceScale = {
-  xs: 1,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 5,
-  '2xl': 6,
-  '3xl': 7,
-  '4xl': 8,
-} as const;
-
-type StackSpace = keyof typeof spaceScale;
+import { cn } from '@cdx-ui/utils';
+import { vStackRootVariants, type StackSpace } from './styles';
 
 export interface VStackProps extends ViewProps {
   className?: string;
@@ -24,17 +11,15 @@ export interface VStackProps extends ViewProps {
 }
 
 export const VStack = forwardRef<View, VStackProps>(
-  ({ space, reversed, style, className, children, ...restProps }, ref: ForwardedRef<View>) => {
-    const gap = space ? spaceScale[space] : undefined;
+  (
+    { reversed = false, space, style, className, children, ...restProps },
+    ref: ForwardedRef<View>,
+  ) => {
     return (
       <View
         ref={ref}
-        className={className}
-        style={[
-          { flexDirection: reversed ? 'column-reverse' : 'column' },
-          gap ? { gap } : null,
-          style,
-        ]}
+        className={cn(vStackRootVariants({ reversed, space }), className)}
+        style={style}
         {...restProps}
       >
         {children}

package/src/components/Stack/styles.ts

@@ -0,0 +1,42 @@
+import { cva } from 'class-variance-authority';
+
+const spaceMap = {
+  xs: 'gap-1',
+  sm: 'gap-2',
+  md: 'gap-3',
+  lg: 'gap-4',
+  xl: 'gap-5',
+  '2xl': 'gap-6',
+  '3xl': 'gap-7',
+  '4xl': 'gap-8',
+  '5xl': 'gap-9',
+  '6xl': 'gap-10',
+} as const;
+
+export type StackSpace = keyof typeof spaceMap;
+
+export const hStackRootVariants = cva([], {
+  variants: {
+    reversed: {
+      true: 'flex-row-reverse',
+      false: 'flex-row',
+    },
+    space: spaceMap,
+  },
+  defaultVariants: {
+    reversed: false,
+  },
+});
+
+export const vStackRootVariants = cva([], {
+  variants: {
+    reversed: {
+      true: 'flex-col-reverse',
+      false: 'flex-col',
+    },
+    space: spaceMap,
+  },
+  defaultVariants: {
+    reversed: false,
+  },
+});