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

package/src/components/Form/index.tsx

@@ -0,0 +1,272 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type ViewProps, type TextProps } from 'react-native';
+import { createForm, type IFormProps, type IFormFieldProps } from '@cdx-ui/primitives';
+import { cn, withStyleContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+import { BaseFormRoot, type BaseFormRootProps } from './FormRoot';
+import { FormLabelRoot } from './FormLabelRoot';
+import {
+  formRootVariants,
+  formFieldVariants,
+  formLabelVariants,
+  formHelperVariants,
+  formHelperTextVariants,
+  formErrorVariants,
+  formErrorTextVariants,
+  formErrorIconVariants,
+} from './styles';
+
+// =============================================================================
+// SCOPE + CONTEXT
+// =============================================================================
+
+const SCOPE = 'FORM';
+
+const FieldRoot = withStyleContext(View, SCOPE);
+
+interface FormFieldStyleContext {
+  size?: 'default' | 'small';
+}
+
+const useFormStyleContext = () => useStyleContext(SCOPE) as FormFieldStyleContext;
+
+// =============================================================================
+// PRIMITIVE
+// =============================================================================
+
+const FormPrimitive = createForm({
+  Root: BaseFormRoot,
+  Field: FieldRoot,
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: View,
+  Label: FormLabelRoot,
+  Helper: View,
+  HelperText: Text,
+});
+
+// =============================================================================
+// FORM ROOT (container — <form> on web, <View> on RN)
+// =============================================================================
+
+export interface FormProps extends BaseFormRootProps, IFormProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+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';
+
+// =============================================================================
+// FORM FIELD (per-field wrapper — provides context for label/error/helper/input)
+// =============================================================================
+
+/**
+ * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
+ */
+export interface FormFieldProps extends Omit<ViewProps, 'id' | 'name'>, IFormFieldProps {
+  className?: string;
+  children?: ReactNode;
+  size?: 'default' | 'small';
+}
+
+const FormField = forwardRef<View, FormFieldProps>(
+  ({ size = 'default', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formFieldVariants(), className);
+
+    return (
+      <FormPrimitive.Field
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        context={{ size }}
+        {...props}
+      >
+        {children}
+      </FormPrimitive.Field>
+    );
+  },
+);
+
+FormField.displayName = 'Form.Field';
+
+// =============================================================================
+// FORM LABEL
+// =============================================================================
+
+export interface FormLabelProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+  /** @platform web — passed to `<label htmlFor>`; defaults to the field input id. */
+  htmlFor?: string;
+}
+
+// TODO: Accept accessibility labels for required indicator as props to support i18n
+
+const FormLabel = forwardRef<View, FormLabelProps>(
+  ({ className, children, style, htmlFor, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const labelClassName = cn(formLabelVariants({ size }), className);
+
+    return (
+      <FormPrimitive.Label
+        ref={ref}
+        className={labelClassName}
+        style={style}
+        htmlFor={htmlFor}
+        requiredIndicator={
+          <Text className="text-red-500" aria-hidden>
+            {' *'}
+          </Text>
+        }
+        {...props}
+      >
+        {children}
+      </FormPrimitive.Label>
+    );
+  },
+);
+
+FormLabel.displayName = 'Form.Label';
+
+// =============================================================================
+// FORM HELPER
+// =============================================================================
+
+export interface FormHelperProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormHelper = forwardRef<View, FormHelperProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formHelperVariants(), className);
+
+    return (
+      <FormPrimitive.Helper ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.Helper>
+    );
+  },
+);
+
+FormHelper.displayName = 'Form.Helper';
+
+// =============================================================================
+// FORM HELPER TEXT
+// =============================================================================
+
+export interface FormHelperTextProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormHelperText = forwardRef<Text, FormHelperTextProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const computedClassName = cn(formHelperTextVariants({ size }), className);
+
+    return (
+      <FormPrimitive.HelperText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.HelperText>
+    );
+  },
+);
+
+FormHelperText.displayName = 'Form.HelperText';
+
+// =============================================================================
+// FORM ERROR
+// =============================================================================
+
+export interface FormErrorProps extends ViewProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormError = forwardRef<View, FormErrorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(formErrorVariants(), className);
+
+    return (
+      <FormPrimitive.Error ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.Error>
+    );
+  },
+);
+
+FormError.displayName = 'Form.Error';
+
+// =============================================================================
+// FORM ERROR TEXT
+// =============================================================================
+
+export interface FormErrorTextProps extends TextProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const FormErrorText = forwardRef<Text, FormErrorTextProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { size } = useFormStyleContext();
+    const computedClassName = cn(formErrorTextVariants({ size }), className);
+
+    return (
+      <FormPrimitive.ErrorText ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FormPrimitive.ErrorText>
+    );
+  },
+);
+
+FormErrorText.displayName = 'Form.ErrorText';
+
+// =============================================================================
+// FORM ERROR ICON
+// =============================================================================
+
+export interface FormErrorIconProps extends Omit<IconProps, 'children'> {}
+
+const FormErrorIcon = ({ className, style, as, ...props }: FormErrorIconProps) => {
+  const { size } = useFormStyleContext();
+  const computedClassName = cn(formErrorIconVariants({ size }), className);
+
+  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+};
+
+FormErrorIcon.displayName = 'Form.ErrorIcon';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type FormCompoundComponent = typeof FormRoot & {
+  Field: typeof FormField;
+  Label: typeof FormLabel;
+  Helper: typeof FormHelper;
+  HelperText: typeof FormHelperText;
+  Error: typeof FormError;
+  ErrorText: typeof FormErrorText;
+  ErrorIcon: typeof FormErrorIcon;
+};
+
+export const Form = Object.assign(FormRoot, {
+  Field: FormField,
+  Label: FormLabel,
+  Helper: FormHelper,
+  HelperText: FormHelperText,
+  Error: FormError,
+  ErrorText: FormErrorText,
+  ErrorIcon: FormErrorIcon,
+}) as FormCompoundComponent;

package/src/components/Form/styles.ts

@@ -0,0 +1,75 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_TEXT_INVALID,
+  COLOR_TEXT_SECONDARY,
+  DISABLED_OPACITY,
+} from '../../styles/primitives';
+
+export const formRootVariants = cva(['flex-col gap-4']);
+
+export const formFieldVariants = cva(['flex-col gap-1.5 mb-4', 'web:last:mb-0', DISABLED_OPACITY]);
+
+export const formLabelVariants = cva(
+  [
+    'flex-row items-center',
+    DISABLED_OPACITY,
+    'web:cursor-pointer',
+    'font-medium data-[invalid=true]:text-red-600',
+  ],
+  {
+    variants: {
+      size: {
+        default: 'text-sm',
+        small: 'text-xs',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
+
+export const formHelperVariants = cva(['flex-row items-center']);
+
+export const formHelperTextVariants = cva([COLOR_TEXT_SECONDARY], {
+  variants: {
+    size: {
+      default: 'text-xs',
+      small: 'text-[11px]',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const formErrorVariants = cva(['flex-row items-center gap-1']);
+
+export const formErrorTextVariants = cva([COLOR_TEXT_INVALID, 'font-medium'], {
+  variants: {
+    size: {
+      default: 'text-xs',
+      small: 'text-[11px]',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export const formErrorIconVariants = cva([COLOR_TEXT_INVALID], {
+  variants: {
+    size: {
+      default: 'size-3.5',
+      small: 'size-3',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+export type FormLabelVariantProps = VariantProps<typeof formLabelVariants>;
+export type FormHelperTextVariantProps = VariantProps<typeof formHelperTextVariants>;
+export type FormErrorTextVariantProps = VariantProps<typeof formErrorTextVariants>;
+export type FormErrorIconVariantProps = VariantProps<typeof formErrorIconVariants>;

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,26 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { COLOR_TEXT_PRIMARY } from '../../styles/primitives';
+
+export const headingStyle = cva(
+  [
+    `${COLOR_TEXT_PRIMARY} font-semibold tracking-tight my-0`,
+    Platform.select({
+      web: 'font-sans bg-transparent display-inline no-underline',
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        xl: 'text-6xl',
+        lg: 'text-5xl',
+        md: 'text-4xl',
+        sm: 'text-3xl',
+        xs: 'text-2xl',
+      },
+    },
+  },
+);
+
+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,93 @@
+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',
+      mode = 'light',
+      className,
+      style,
+      as: IconComponent,
+      iconClassName,
+      accessibilityRole = 'button',
+      ...props
+    },
+    ref,
+  ) => {
+    const rootClassName = cn(iconButtonRootVariants({ variant, size, mode }), className);
+
+    const glyphClassName = cn(
+      iconButtonGlyphVariants({ size }),
+      iconButtonIconColorVariants({ variant, mode }),
+      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,131 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BORDER_DEFAULT,
+  DISABLED_CURSOR,
+  DISABLED_OPACITY,
+  RADIUS_FULL,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+import {
+  type SharedButtonSemanticColor,
+  sharedGhostSurfaceCompounds,
+  sharedOutlineGhostForegroundTextCompounds,
+} from '../Button/buttonSharedVariants';
+
+function actionOnlyCompounds<T extends { color: SharedButtonSemanticColor }>(
+  compounds: T[],
+): Omit<T, 'color'>[] {
+  return compounds
+    .filter((c) => c.color === 'action')
+    .map((c) => {
+      const { color, ...rest } = c;
+      void color;
+      return rest;
+    });
+}
+
+/** Dark-mode hover/active surface for ghost (solid uses a separate compound with border). */
+const iconButtonDarkGhostSurfaceCompounds = actionOnlyCompounds(sharedGhostSurfaceCompounds).map(
+  (c) => ({
+    variant: 'ghost' as const,
+    ...c,
+  }),
+);
+
+const iconButtonForegroundTextCompounds = actionOnlyCompounds(
+  sharedOutlineGhostForegroundTextCompounds,
+).map((c) => ({
+  variant: ['solid', 'ghost'] as ('solid' | 'ghost')[],
+  ...c,
+}));
+
+export const iconButtonRootVariants = cva(
+  [
+    'flex items-center justify-center',
+    RADIUS_FULL,
+    'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+    TRANSITION_COLORS,
+    DISABLED_OPACITY,
+    DISABLED_CURSOR,
+    'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-slate-400/50 web:data-[focus-visible=true]:ring-offset-2',
+  ],
+  {
+    variants: {
+      variant: {
+        /** Same surface as ghost, with a light gray border (aligned with Button `outline`). */
+        solid: [
+          'bg-transparent',
+          `border ${COLOR_BORDER_DEFAULT}`,
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
+        ],
+        ghost: [
+          'bg-transparent',
+          'data-[hover=true]:bg-slate-50',
+          'data-[active=true]:bg-slate-100',
+        ],
+      },
+      size: {
+        default: 'h-10 w-10 min-w-10 shrink-0 p-0',
+        small: 'h-8 w-8 min-w-8 shrink-0 p-0',
+      },
+      mode: {
+        light: [],
+        dark: [],
+      },
+    },
+    compoundVariants: [
+      ...iconButtonDarkGhostSurfaceCompounds,
+      {
+        variant: 'solid',
+        mode: 'dark',
+        className: [
+          'border-slate-700',
+          Platform.select({
+            default: 'data-[active=true]:bg-slate-700',
+            web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+          }),
+        ],
+      },
+    ],
+    defaultVariants: {
+      variant: 'solid',
+      size: 'default',
+      mode: 'light',
+    },
+  },
+);
+
+export const iconButtonGlyphVariants = cva([], {
+  variants: {
+    size: {
+      default: 'size-5',
+      small: 'size-4',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+
+/** Icon fill aligned with Button outline/ghost action label colors (solid matches ghost). */
+export const iconButtonIconColorVariants = cva([], {
+  variants: {
+    variant: {
+      solid: [],
+      ghost: [],
+    },
+    mode: {
+      light: [],
+      dark: [],
+    },
+  },
+  compoundVariants: [...iconButtonForegroundTextCompounds],
+  defaultVariants: {
+    variant: 'solid',
+    mode: 'light',
+  },
+});
+
+export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;