@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.31

package/src/components/Image/Image.tsx

@@ -0,0 +1,77 @@
+/**
+ * Thin wrapper around React Native's `Image`.
+ *
+ * Design-system layout (sizes, radii, loading/error UI) is intentionally
+ * NOT baked in here — use purpose-built components like `Avatar` instead.
+ *
+ * What this wrapper adds over a raw RN `Image`:
+ *  - Accepts a plain URI **string** as `source` (auto-normalized to `{ uri }`).
+ *  - Extends the prop surface with **web-only** HTML attributes (`sizes`,
+ *    `loading`, `decoding`, etc.) for better `react-native-web` support.
+ *    Props already covered by RN 0.81+ (`alt`, `srcSet`, `crossOrigin`,
+ *    `referrerPolicy`) are inherited from the native typings.
+ *  - All other props and `ref` are forwarded to the underlying `Image`.
+ *
+ * Inspired by Expo's html-elements Image primitive:
+ * @see https://github.com/expo/expo/blob/main/packages/html-elements/src/primitives/Image.tsx
+ */
+
+import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
+import { Image as RNImage, type ImageSourcePropType } from 'react-native';
+
+/** Coerces a plain URI string into the `{ uri }` shape RN expects. */
+function normalizeSource(source: string | ImageSourcePropType): ImageSourcePropType {
+  if (typeof source === 'string') {
+    return { uri: source };
+  }
+  return source;
+}
+
+// ---------------------------------------------------------------------------
+// Web-oriented props not yet covered by react-native's Image typings.
+// Props already present in RN 0.81+ (alt, srcSet, crossOrigin,
+// referrerPolicy) are inherited from the native Image props.
+// ---------------------------------------------------------------------------
+
+/**
+ * HTML-ish attributes not in RN’s core typings. Forwarded to `Image` with `...props`;
+ * **react-native-web** maps supported ones to the DOM `<img>`. On iOS/Android they are
+ * typically ignored (no visual effect).
+ */
+export interface WebImageProps {
+  /** DOM `sizes` for responsive selection with `srcSet` — web only. */
+  sizes?: string;
+  /** DOM lazy-loading hint — web only. */
+  loading?: 'lazy' | 'eager';
+  /** DOM decode hint — web only. */
+  decoding?: 'async' | 'auto' | 'sync';
+  /** DOM drag behavior — web only. */
+  draggable?: boolean;
+  /** DOM focus order — web only. */
+  tabIndex?: number;
+}
+
+// ---------------------------------------------------------------------------
+// ImageProps = native Image props (minus `source`) + WebImageProps + our overrides.
+// `source` is re-declared to also accept a plain string.
+// ---------------------------------------------------------------------------
+
+export type ImageProps = WebImageProps &
+  Omit<ComponentPropsWithoutRef<typeof RNImage>, 'source'> & {
+    /** URI string (normalized to `{ uri }`) or standard `ImageSourcePropType`. */
+    source: string | ImageSourcePropType;
+    className?: string;
+  };
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const Image = forwardRef<ComponentRef<typeof RNImage>, ImageProps>(function Image(
+  { source, ...props },
+  ref,
+) {
+  return <RNImage source={normalizeSource(source)} {...props} ref={ref} />;
+});
+
+Image.displayName = 'Image';

package/src/components/Image/index.ts

@@ -0,0 +1 @@
+export { Image, type ImageProps, type WebImageProps } from './Image';

package/src/components/Input/BaseInput.android.tsx

@@ -0,0 +1,13 @@
+import { forwardRef } from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+
+const androidDefaults = {
+  includeFontPadding: false,
+  textAlignVertical: 'center' as const,
+};
+
+export const BaseInput = forwardRef<TextInput, TextInputProps>((props, ref) => (
+  <TextInput ref={ref} {...props} style={[androidDefaults, props.style]} />
+));
+
+BaseInput.displayName = 'BaseInput';

package/src/components/Input/index.tsx

@@ -7,6 +7,7 @@ import {
   type IInputSlotProps,
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon, IconProps } from '../Icon';
 import { BaseInput } from './BaseInput';
 import {
   type InputVariantProps,
@@ -25,7 +26,6 @@ const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
 const InputPrimitive = createInput({
   Root,
-  Icon: View,
   Slot: View,
   Field: BaseInput,
 });
@@ -40,7 +40,7 @@ export interface InputProps extends ViewProps, IInputFieldProps, InputVariantPro
 }
 
 const InputRoot = forwardRef<View, InputProps>(
-  ({ variant = 'outline', size = 'md', className, children, style, ...props }, ref) => {
+  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
     const computedClassName = cn(inputRootVariants({ variant, size }), className);
 
     return (
@@ -103,9 +103,7 @@ export interface InputSlotProps extends ViewProps, IInputSlotProps {
 
 const InputSlot = forwardRef<View, InputSlotProps>(
   ({ className, children, style, ...props }, ref) => {
-    const { size } = useInputStyleContext();
-
-    const computedClassName = cn(inputSlotVariants({ size }), className);
+    const computedClassName = cn(inputSlotVariants(), className);
 
     return (
       <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
@@ -121,24 +119,15 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends ViewProps {
-  className?: string;
-  children?: ReactNode;
-}
+export interface InputIconProps extends Omit<IconProps, 'children'> {}
 
-const InputIcon = forwardRef<View, InputIconProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const { size } = useInputStyleContext();
+const InputIcon = ({ className, style, as, ...props }: InputIconProps) => {
+  const { size } = useInputStyleContext();
 
-    const computedClassName = cn(inputIconVariants({ size }), className);
+  const computedClassName = cn(inputIconVariants({ size }), className);
 
-    return (
-      <InputPrimitive.Icon ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </InputPrimitive.Icon>
-    );
-  },
-);
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
 
 InputIcon.displayName = 'Input.Icon';
 
@@ -157,5 +146,3 @@ export const Input = Object.assign(InputRoot, {
   Slot: InputSlot,
   Icon: InputIcon,
 }) as InputCompoundComponent;
-
-export type { InputVariantProps };

package/src/components/Input/styles.ts

@@ -1,83 +1,88 @@
 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,
+  SHADOW_SM,
+  SIZE_SCALE,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-center',
-    'border border-neutral-border-strong bg-neutral-surface shadow-sm',
-    'data-[disabled=true]:opacity-60 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-interactive-disabled-background data-[disabled=true]:border-interactive-disabled',
-    'data-[focus=true]:border-interactive-focus',
+    'w-full flex-row items-stretch border',
+    COLOR_BG_PRIMARY,
+    COLOR_BORDER_DEFAULT,
+    RADIUS_SM,
+    SHADOW_SM,
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'data-[disabled=true]:bg-slate-50 data-[disabled=true]:border-slate-300',
+    'data-[readonly=true]:cursor-default',
+    'data-[readonly=true]:bg-slate-50',
+    'web:data-[hover=true]:data-[active=false]:border-slate-300',
+    'data-[focus=true]:border-slate-900',
     'data-[invalid=true]:border-red-500',
   ],
   {
     variants: {
       variant: {
         outline: [
-          'rounded-md px-3',
-          'web:focus-within:border-interactive-focus web:focus-within:ring-3 web:focus-within:ring-blue-300/50',
-          'web:data-[invalid=true]:focus-within:border-red-500 web:data-[invalid=true]:focus-within:ring-red-300/50',
+          'web:focus-within:border-slate-900 web:focus-within:ring-2 web:focus-within:ring-slate-400/50 web:focus-within:ring-offset-0',
+          'web:data-[invalid=true]:focus-within:border-red-500 web:data-[invalid=true]:focus-within:ring-2 web:data-[invalid=true]:focus-within:ring-red-400/50',
         ],
-        underlined:
-          'rounded-none border-t-0 border-l-0 border-r-0 border-b-neutral-border data-[focus=true]:border-b-interactive-focus shadow-none',
       },
       size: {
-        sm: 'h-9 py-1',
-        md: 'h-11 py-1.5',
-        lg: 'h-12 py-2',
+        default: `${SIZE_SCALE.default.height} ${SIZE_SCALE.default.px} py-2 ${SIZE_SCALE.default.gap}`,
+        small: `${SIZE_SCALE.small.height} ${SIZE_SCALE.small.px} py-1.5 ${SIZE_SCALE.small.gap}`,
       },
     },
     defaultVariants: {
       variant: 'outline',
-      size: 'md',
+      size: 'default',
     },
   },
 );
 
 export const inputFieldVariants = cva(
   [
-    'flex-1 bg-transparent text-neutral-text-primary',
-    'placeholder:text-neutral-placeholder',
+    'flex-1 justify-center bg-transparent p-0',
+    COLOR_TEXT_PRIMARY,
+    'placeholder:text-slate-400',
     'web:outline-none',
   ],
   {
     variants: {
       size: {
-        sm: 'text-sm leading-none',
-        md: 'text-base leading-none',
-        lg: 'text-lg leading-none',
+        default: 'text-[1rem]',
+        small: 'text-[0.875rem]',
       },
     },
     defaultVariants: {
-      size: 'sm',
+      size: 'default',
     },
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center'], {
-  variants: {
-    size: {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-6 w-6',
-    },
-  },
-  defaultVariants: {
-    size: 'sm',
-  },
-});
+export const inputSlotVariants = cva(['items-center justify-center self-center']);
 
-export const inputIconVariants = cva(['text-neutral-text-tertiary'], {
+export const inputIconVariants = cva([COLOR_TEXT_MUTED], {
   variants: {
     size: {
-      sm: 'h-4 w-4',
-      md: 'h-5 w-5',
-      lg: 'h-5 w-5',
+      default: 'size-5',
+      small: 'size-4',
     },
   },
   defaultVariants: {
-    size: 'sm',
+    size: 'default',
   },
 });
 
-export const inputFieldPlaceholderVariants = cva(['accent-neutral-placeholder']);
+export const inputFieldPlaceholderVariants = cva(['accent-slate-400']);
 
 export type InputVariantProps = VariantProps<typeof inputRootVariants>;

package/src/components/Link/index.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
+import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+
+export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
+
+const LinkPrimitive = createLink({
+  Root: Pressable,
+});
+
+// =============================================================================
+// STYLED ROOT COMPONENT
+// =============================================================================
+
+export interface LinkProps extends ILinkProps {
+  className?: string;
+}
+
+const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
+  const rootClassName = cn(linkRootVariants(), className);
+
+  return (
+    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+      {children}
+    </LinkPrimitive>
+  );
+});
+
+LinkRoot.displayName = 'Link';
+
+// =============================================================================
+// STYLED LABEL COMPONENT
+// =============================================================================
+
+export interface LinkLabelProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const LinkLabel = forwardRef<RNText, LinkLabelProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(linkLabelVariants(), className);
+
+    return (
+      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </RNText>
+    );
+  },
+);
+
+LinkLabel.displayName = 'Link.Label';
+
+// =============================================================================
+// STYLED ICON COMPONENT
+// =============================================================================
+
+export interface LinkIconProps extends Omit<IconProps, 'children'> {}
+
+const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
+  const computedClassName = cn(linkIconVariants(), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+LinkIcon.displayName = 'Link.Icon';
+
+// =============================================================================
+// COMPOUND COMPONENT EXPORT
+// =============================================================================
+
+type LinkCompoundComponent = typeof LinkRoot & {
+  Label: typeof LinkLabel;
+  Icon: typeof LinkIcon;
+};
+
+export const Link = Object.assign(LinkRoot, {
+  Label: LinkLabel,
+  Icon: LinkIcon,
+}) as LinkCompoundComponent;

package/src/components/Link/styles.ts

@@ -0,0 +1,20 @@
+import { Platform } from 'react-native';
+import { cva } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+export const linkRootVariants = cva([
+  'flex-row items-center gap-1',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'text-blue-600',
+  'underline decoration-slate-300 underline-offset-4',
+  TRANSITION_COLORS,
+  Platform.select({
+    web: 'data-[hover=true]:decoration-slate-900',
+    default: '',
+  }),
+  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
+]);
+
+export const linkLabelVariants = cva(['text-sm font-medium', 'text-blue-600']);
+
+export const linkIconVariants = cva(['size-4', 'text-blue-600']);

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,19 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressSegmentedVariants = cva(['flex-row gap-1 w-full']);
+
+export const segmentVariants = cva(['flex-1 h-2 rounded'], {
+  variants: {
+    state: {
+      complete: 'bg-slate-900',
+      incomplete: 'bg-slate-300',
+      inprogress: 'bg-gradient-to-r from-slate-900 from-50% to-slate-300 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';