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

package/src/components/Form/index.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { createForm } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
+import { formRootVariants } from './styles';
+
+// =============================================================================
+// PRIMITIVE
+// =============================================================================
+
+const FormPrimitive = createForm({ Root: BaseFormRoot });
+
+FormPrimitive.displayName = 'FormPrimitive';
+
+// =============================================================================
+// FORM ROOT (container — <form> on web, <View> on RN)
+// =============================================================================
+
+export interface FormProps extends BaseFormRootProps {}
+
+const FormRoot = forwardRef<View, FormProps>(({ className, children, style, ...props }, ref) => {
+  const computedClassName = cn(formRootVariants(), className);
+
+  return (
+    <FormPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+      {children}
+    </FormPrimitive>
+  );
+});
+
+FormRoot.displayName = 'Form';
+
+// =============================================================================
+// EXPORT
+// =============================================================================
+
+export const Form = FormRoot;

package/src/components/Form/styles.ts

@@ -0,0 +1,3 @@
+import { cva } from 'class-variance-authority';
+
+export const formRootVariants = cva(['flex-col gap-4']);

package/src/components/Heading/index.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, memo, type ComponentRef, type ComponentPropsWithoutRef } from 'react';
+import { Text } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import { headingStyle, type HeadingVariantProps } from './styles';
+
+const sizeToLevel = {
+  xl: 1,
+  lg: 2,
+  md: 3,
+  sm: 4,
+  xs: 5,
+} as const;
+
+export type HeadingProps = HeadingVariantProps &
+  ComponentPropsWithoutRef<typeof Text> & {
+    className?: string;
+  };
+
+export const Heading = memo(
+  forwardRef<ComponentRef<typeof Text>, HeadingProps>(function Heading(
+    { className, size = 'lg', ...props },
+    ref,
+  ) {
+    return (
+      <Text
+        role="heading"
+        aria-level={sizeToLevel[size ?? 'lg']}
+        className={cn(headingStyle({ size }), className)}
+        {...props}
+        ref={ref}
+      />
+    );
+  }),
+);
+
+Heading.displayName = 'Heading';

package/src/components/Heading/styles.tsx

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const headingStyle = cva(
+  [
+    `text-content-primary my-0`,
+    Platform.select({
+      web: 'bg-transparent display-inline no-underline',
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        xl: 'heading-xl',
+        lg: 'heading-lg',
+        md: 'heading-md',
+        sm: 'heading-sm',
+        xs: 'heading-xs',
+      },
+    },
+  },
+);
+
+export type HeadingVariantProps = VariantProps<typeof headingStyle>;

package/src/components/Icon/index.tsx

@@ -0,0 +1,54 @@
+import { withUniwind } from 'uniwind';
+import { cn } from '@cdx-ui/utils';
+import type { CdxIcon, CdxIconProps } from '@cdx-ui/icons';
+import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
+
+export type IconProps = CdxIconProps & {
+  className?: string; // TODO: Why does this need to specified manually?
+  as: CdxIcon;
+};
+
+function IconImpl({ as: IconComponent, ...props }: IconProps) {
+  return <IconComponent {...props} />;
+}
+
+const StyledIcon = withUniwind(IconImpl, {
+  size: {
+    fromClassName: 'className',
+    styleProperty: 'width',
+  },
+  color: {
+    fromClassName: 'className',
+    styleProperty: 'color',
+  },
+});
+
+/**
+ * A wrapper component for CDX icons with Uniwind `className` support via `withUniwind`.
+ *
+ * This component allows you to render any CDX icon while applying utility classes
+ * using `uniwind`. It avoids the need to wrap or configure each icon individually.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Icon } from '@cdx-ui/components';
+ * import { ArrowRight } from '@cdx-ui/icons';
+ *
+ * <Icon as={ArrowRight} className="text-red-500 size-4" />
+ * ```
+ *
+ * @param {CdxIcon} as - The CDX icon component to render.
+ * @param {string} className - Utility classes to style the icon using Uniwind.
+ * @param {number} size - Icon size (overrides the size class).
+ * @param {...CdxIconProps} ...props - Additional icon props passed to the "as" icon.
+ */
+export function Icon({ as: IconComponent, className, ...props }: IconProps) {
+  return (
+    <StyledIcon
+      as={IconComponent}
+      className={cn(COLOR_TEXT_PRIMARY, 'size-5', className)}
+      {...props}
+    />
+  );
+}

package/src/components/IconButton/index.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+import { ActivityIndicator, Pressable, Text, View, type PressableProps } from 'react-native';
+import {
+  createButton,
+  dataAttributes,
+  type IButtonProps,
+  useButtonContext,
+} from '@cdx-ui/primitives';
+import type { CdxIcon } from '@cdx-ui/icons';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import {
+  type IconButtonVariantProps,
+  iconButtonGlyphVariants,
+  iconButtonIconColorVariants,
+  iconButtonRootVariants,
+} from './styles';
+
+const IconButtonPrimitive = createButton({
+  Root: Pressable,
+  Text,
+  Group: View,
+  Spinner: ActivityIndicator,
+  Icon: View,
+});
+
+function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; className: string }) {
+  const { hover, focus, active, disabled, focusVisible } = useButtonContext();
+  return (
+    <Icon
+      as={IconComponent}
+      className={className}
+      {...dataAttributes({
+        hover,
+        focus,
+        active,
+        disabled,
+        focusVisible,
+      })}
+    />
+  );
+}
+
+export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
+  className?: string;
+  /** CDX icon component to render (icon-only control). */
+  as: CdxIcon;
+  /** Passed through to the underlying `Icon`. */
+  iconClassName?: IconProps['className'];
+}
+
+const IconButtonRoot = forwardRef<View, IconButtonProps>(
+  (
+    {
+      variant = 'solid',
+      size = 'default',
+      className,
+      style,
+      as: IconComponent,
+      iconClassName,
+      accessibilityRole = 'button',
+      ...props
+    },
+    ref,
+  ) => {
+    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
+
+    const glyphClassName = cn(
+      iconButtonGlyphVariants({ size }),
+      iconButtonIconColorVariants(),
+      iconClassName,
+    );
+
+    return (
+      <IconButtonPrimitive
+        ref={ref}
+        accessibilityRole={accessibilityRole}
+        className={rootClassName}
+        style={style}
+        {...props}
+      >
+        <IconButtonGlyph as={IconComponent} className={glyphClassName} />
+      </IconButtonPrimitive>
+    );
+  },
+);
+
+IconButtonRoot.displayName = 'IconButton';
+
+export const IconButton = IconButtonRoot;
+
+export type { IconButtonVariantProps };

package/src/components/IconButton/styles.ts

@@ -0,0 +1,59 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
+
+export const iconButtonRootVariants = cva(
+  [
+    'flex items-center justify-center',
+    'rounded-[var(--border-radius-round)]',
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-[--color-stroke-ring] web:data-[focus-visible=true]:ring-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        solid: [
+          'bg-surface-primary border border-stroke-secondary',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-primary-active',
+            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+          }),
+        ],
+        ghost: [
+          'bg-transparent',
+          Platform.select({
+            default: 'data-[active=true]:bg-surface-primary-active',
+            web: 'data-[hover=true]:bg-surface-primary-hover data-[active=true]:data-[hover=true]:bg-surface-secondary-active',
+          }),
+        ],
+      },
+      size: {
+        default: 'h-11 w-11 min-w-11 shrink-0 p-2.5',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-1.5',
+      },
+    },
+    defaultVariants: {
+      variant: 'solid',
+      size: 'default',
+    },
+  },
+);
+
+export const iconButtonGlyphVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-6',
+      small: 'size-5',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const iconButtonIconColorVariants = cva(['text-content-primary']);
+
+export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;

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,79 @@
 import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_CURSOR, 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',
-    'data-[invalid=true]:border-red-500',
+    'w-full flex-row items-stretch overflow-hidden',
+    'bg-surface-primary',
+    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'rounded-[var(--border-radius-default)]',
+    TRANSITION_COLORS,
+    'data-[disabled=true]:bg-surface-secondary',
+    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    DISABLED_CURSOR,
+    'data-[readonly=true]:cursor-default',
+    'data-[readonly=true]:bg-surface-secondary',
+    'web:data-[hover=true]:data-[focus=false]:data-[invalid=false]:border-stroke-hover',
+    'data-[focus=true]:border-[length:var(--border-width-focused)]',
+    'data-[focus=true]:border-stroke-action',
+    'data-[invalid=true]:border-stroke-danger',
   ],
   {
     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',
-        ],
-        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',
+        outline: [],
       },
       size: {
-        sm: 'h-9 py-1',
-        md: 'h-11 py-1.5',
-        lg: 'h-12 py-2',
+        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
+        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        small: [
+          'h-8 px-3 py-1.5 gap-1.5',
+          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+        ],
       },
     },
     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',
+    'font-body text-content-primary',
+    'placeholder:text-content-tertiary',
     'web:outline-none',
+    'tracking-normal',
   ],
   {
     variants: {
       size: {
-        sm: 'text-sm leading-none',
-        md: 'text-base leading-none',
-        lg: 'text-lg leading-none',
+        default: 'text-[0.875rem]',
+        small: 'text-[0.75rem]',
       },
     },
     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(['text-content-tertiary'], {
   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-content-tertiary']);
 
 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;