@cdx-ui/components 0.0.1-alpha.4 → 0.0.1-alpha.40

package/src/components/Link/styles.ts

@@ -0,0 +1,21 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { TRANSITION_COLORS } from '../../styles/primitives';
+
+// TODO: Handle visited state
+
+export const linkRootVariants = cva([
+  'flex-row items-center gap-1',
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  TRANSITION_COLORS,
+  'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+]);
+
+export const linkLabelVariants = cva([
+  'text-content-link',
+  'body-md',
+  'underline underline-offset-4',
+]);
+
+export const linkIconVariants = cva(['text-content-link', 'size-4']);
+
+export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;

package/src/components/OtpInput/index.tsx

@@ -0,0 +1,79 @@
+import type { ComponentProps, ComponentRef, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { View } from 'react-native';
+import { createOtpInput, type IOtpInputRootProps } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { HStack } from '../Stack/HStack';
+import { Input, type InputProps } from '../Input';
+import type { InputVariantProps } from '../Input/styles';
+import {
+  otpCellVariants,
+  otpFieldVariants,
+  otpRootVariants,
+  type OtpInputVariantProps,
+} from './styles';
+
+const SCOPE = 'OTP_INPUT';
+
+const OtpRoot = withStyleContext(HStack, SCOPE);
+
+const useOtpInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
+
+const OtpStyledCell = forwardRef<View, InputProps>(
+  ({ className, children, ...props }, ref: ForwardedRef<View>) => {
+    const { size, variant } = useOtpInputStyleContext();
+    return (
+      <Input
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(otpCellVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </Input>
+    );
+  },
+);
+
+OtpStyledCell.displayName = 'OtpInput.Cell';
+
+const OtpStyledField = forwardRef<
+  ComponentRef<typeof Input.Field>,
+  ComponentProps<typeof Input.Field>
+>(({ className, ...props }, ref) => {
+  const { size } = useOtpInputStyleContext();
+  return <Input.Field ref={ref} className={cn(otpFieldVariants({ size }), className)} {...props} />;
+});
+
+OtpStyledField.displayName = 'OtpInput.Field';
+
+const OtpPrimitive = createOtpInput({
+  Root: OtpRoot,
+  Cell: OtpStyledCell,
+  Field: OtpStyledField,
+});
+
+export interface OtpInputProps extends Omit<IOtpInputRootProps, 'size'>, OtpInputVariantProps {
+  variant?: NonNullable<InputProps['variant']>;
+  size?: NonNullable<InputProps['size']>;
+  className?: string;
+}
+
+export const OtpInput = forwardRef<View, OtpInputProps>(
+  ({ variant = 'outline', size = 'default', fullWidth = true, className, style, ...rest }, ref) => {
+    const rootClassName = cn(otpRootVariants({ size, fullWidth }), className);
+
+    return (
+      <OtpPrimitive
+        ref={ref}
+        className={rootClassName}
+        style={style}
+        context={{ variant, size }}
+        {...rest}
+      />
+    );
+  },
+);
+
+OtpInput.displayName = 'OtpInput';

package/src/components/OtpInput/styles.ts

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const otpRootVariants = cva('flex-row items-stretch gap-2.5', {
+  variants: {
+    size: {
+      default: '',
+      small: '',
+    },
+    fullWidth: {
+      true: 'w-full self-stretch justify-center',
+      false: 'self-start',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+    fullWidth: true,
+  },
+});
+
+/** Narrow cell chrome: overrides Input root `w-full` / wide horizontal padding for one digit. */
+export const otpCellVariants = cva('shrink-0 justify-center', {
+  variants: {
+    size: {
+      default: 'w-12 min-w-12 max-w-12 px-1',
+      small: 'w-10 min-w-10 max-w-10 px-0.5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const otpFieldVariants = cva('min-w-0 w-full text-center tabular-nums', {
+  variants: {
+    size: {
+      default: 'text-xl leading-6',
+      small: 'text-base leading-5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type OtpInputVariantProps = VariantProps<typeof otpRootVariants>;

package/src/components/ProgressBar/index.tsx

@@ -0,0 +1,53 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { createProgress, type IProgressProps } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import {
+  progressBarIndicatorVariants,
+  progressBarTrackVariants,
+  type ProgressBarTrackVariantProps,
+} from './styles';
+
+const ProgressPrimitive = createProgress({
+  Root: View,
+  Indicator: View,
+});
+
+export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
+  readonly className?: string;
+}
+
+export interface ProgressBarIndicatorProps extends ViewProps {
+  readonly className?: string;
+}
+
+const ProgressBarRoot = forwardRef<View, ProgressBarProps>(
+  ({ className, style, ...props }, ref) => {
+    const trackClass = cn(progressBarTrackVariants(), className);
+
+    return <ProgressPrimitive ref={ref} className={trackClass} style={style} {...props} />;
+  },
+);
+
+ProgressBarRoot.displayName = 'ProgressBar';
+
+const ProgressBarIndicator = forwardRef<View, ProgressBarIndicatorProps>(
+  ({ className, style, ...props }, ref) => (
+    <ProgressPrimitive.Indicator
+      ref={ref}
+      className={cn(progressBarIndicatorVariants(), className)}
+      style={style}
+      {...props}
+    />
+  ),
+);
+
+ProgressBarIndicator.displayName = 'ProgressBar.Indicator';
+
+type ProgressBarCompoundComponent = typeof ProgressBarRoot & {
+  Indicator: typeof ProgressBarIndicator;
+};
+
+export const ProgressBar = Object.assign(ProgressBarRoot, {
+  Indicator: ProgressBarIndicator,
+}) as ProgressBarCompoundComponent;

package/src/components/ProgressBar/styles.ts

@@ -0,0 +1,9 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const progressBarTrackVariants = cva([
+  'w-full flex-row overflow-hidden rounded-full bg-surface-action-tint h-1',
+]);
+
+export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
+
+export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;

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';