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

package/src/components/Dialog/styles.ts

@@ -0,0 +1,88 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  COLOR_BG_INVERSE,
+  COLOR_BG_PRIMARY,
+  COLOR_BORDER_DEFAULT,
+  COLOR_TEXT_PRIMARY,
+  COLOR_TEXT_SECONDARY,
+  RADIUS_MD,
+  SHADOW_MD,
+  TRANSITION_COLORS,
+} from '../../styles/primitives';
+
+// ── Overlay ─────────────────────────────────────────────────
+
+export const dialogOverlayVariants = cva(['absolute inset-0', COLOR_BG_INVERSE, 'opacity-50']);
+
+// ── Content ─────────────────────────────────────────────────
+
+export const dialogContentVariants = cva(
+  [
+    COLOR_BG_PRIMARY,
+    `border ${COLOR_BORDER_DEFAULT}`,
+    RADIUS_MD,
+    Platform.select({ web: SHADOW_MD, default: '' }),
+    'max-h-[85vh] overflow-hidden',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'w-[90%] max-w-sm',
+        md: 'w-[90%] max-w-md',
+        lg: 'w-[90%] max-w-lg',
+        full: 'w-full mx-4',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+// ── Header ──────────────────────────────────────────────────
+
+export const dialogHeaderVariants = cva([
+  'flex-row items-center justify-between shrink-0',
+  'px-6 pt-6 pb-2',
+]);
+
+// ── Title ───────────────────────────────────────────────────
+
+export const dialogTitleVariants = cva(['text-lg font-semibold', COLOR_TEXT_PRIMARY]);
+
+// ── Description ─────────────────────────────────────────────
+
+export const dialogDescriptionVariants = cva(['text-sm mt-1', COLOR_TEXT_SECONDARY]);
+
+// ── Body ────────────────────────────────────────────────────
+
+export const dialogBodyVariants = cva(['px-6 py-4 shrink min-h-0']);
+
+// ── Footer ──────────────────────────────────────────────────
+
+export const dialogFooterVariants = cva([
+  'flex-row items-center justify-end shrink-0',
+  'gap-3 px-6 pt-2 pb-6',
+]);
+
+// ── Close ───────────────────────────────────────────────────
+
+export const dialogCloseVariants = cva([
+  'p-1 -m-1 rounded-full',
+  TRANSITION_COLORS,
+  Platform.select({
+    default: 'data-[active=true]:opacity-70',
+    web: [
+      'data-[hover=true]:bg-slate-100',
+      'data-[active=true]:bg-slate-200',
+      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-slate-400/50 data-[focus-visible=true]:ring-offset-2',
+    ].join(' '),
+  }),
+]);
+
+// ── Close Icon ──────────────────────────────────────────────
+
+export const dialogCloseIconVariants = cva(['size-5 text-slate-500']);
+
+export type DialogVariantProps = VariantProps<typeof dialogContentVariants>;

package/src/components/Field/FieldLabel.tsx

@@ -0,0 +1,33 @@
+import { forwardRef } from 'react';
+import { Text, TextProps, type GestureResponderEvent } from 'react-native';
+import { composeEventHandlers, useFormControlContext } from '@cdx-ui/utils';
+
+export type BaseFieldLabelProps = TextProps & {
+  /** @platform web — forwarded on web; ignored here (see `FieldLabelRoot.web`). */
+  htmlFor?: string;
+  /** Optional; composed with label tap-to-focus on native. */
+  onPress?: ((event: GestureResponderEvent) => void) | null;
+};
+
+/**
+ * Native: `Text` label row — tap focuses the field input via form context
+ * (parity with `<label htmlFor>` on web).
+ */
+export const BaseFieldLabel = forwardRef<Text, BaseFieldLabelProps>(
+  ({ htmlFor: _omitHtmlFor, onPress, ...props }, ref) => {
+    void _omitHtmlFor;
+
+    const { focusInput, isDisabled } = useFormControlContext();
+
+    return (
+      <Text
+        ref={ref}
+        {...props}
+        disabled={Boolean(isDisabled)}
+        onPress={composeEventHandlers(onPress, () => focusInput?.())}
+      />
+    );
+  },
+);
+
+BaseFieldLabel.displayName = 'BaseFieldLabel';

package/src/components/Field/FieldLabel.web.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+// TODO: Why does dataSet need to be decomposed into individual data attributes?
+
+export type BaseFieldLabelProps = ViewProps & {
+  htmlFor?: string;
+  children?: ReactNode;
+  /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
+  dataSet?: Record<string, string>;
+};
+
+/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
+export const BaseFieldLabel = forwardRef<HTMLLabelElement, BaseFieldLabelProps>((props, ref) => {
+  return (
+    <label
+      ref={ref}
+      {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)}
+      data-invalid={props.dataSet?.invalid}
+      data-required={props.dataSet?.required}
+    />
+  );
+});
+
+BaseFieldLabel.displayName = 'BaseFieldLabel';

package/src/components/Field/index.tsx

@@ -0,0 +1,171 @@
+import { forwardRef } from 'react';
+import { Text, View } from 'react-native';
+import { ErrorIcon } from '@cdx-ui/icons';
+import {
+  createField,
+  IFieldErrorProps,
+  IFieldHelperProps,
+  IFieldLabelProps,
+  type IFieldRootProps,
+} from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import { BaseFieldLabel } from './FieldLabel';
+import {
+  fieldErrorIconVariants,
+  fieldErrorTextVariants,
+  fieldErrorVariants,
+  fieldHelperVariants,
+  fieldHelperTextVariants,
+  fieldLabelVariants,
+  fieldRootVariants,
+  type FieldRootVariantProps,
+  type FieldLabelVariantProps,
+  type FieldHelperVariantProps,
+  type FieldErrorVariantProps,
+} from './styles';
+
+// =============================================================================
+// PRIMITIVE
+// =============================================================================
+
+const FieldPrimitive = createField({
+  Root: View,
+  Label: BaseFieldLabel,
+  Helper: View,
+  HelperText: Text,
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: View,
+});
+
+// =============================================================================
+// FIELD ROOT
+// =============================================================================
+
+/**
+ * Field wrapper + context. For **initial focus**, pass `autoFocus` on `Input.Field` (not here).
+ */
+export interface FieldRootProps extends IFieldRootProps, FieldRootVariantProps {}
+
+const FieldRoot = forwardRef<View, FieldRootProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(fieldRootVariants(), className);
+
+    return (
+      <FieldPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </FieldPrimitive>
+    );
+  },
+);
+
+FieldRoot.displayName = 'Field';
+
+// =============================================================================
+// FIELD LABEL
+// =============================================================================
+
+export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProps {}
+
+const FieldLabel = forwardRef<View, FieldLabelProps>(
+  ({ className, children, style, htmlFor, ...props }, ref) => {
+    const labelClassName = cn(fieldLabelVariants(), className);
+
+    return (
+      <FieldPrimitive.Label
+        ref={ref}
+        className={labelClassName}
+        style={style}
+        htmlFor={htmlFor}
+        requiredIndicator={
+          <Text className="text-red-500" aria-hidden>
+            {' *'}
+          </Text>
+        }
+        {...props}
+      >
+        {children}
+      </FieldPrimitive.Label>
+    );
+  },
+);
+
+FieldLabel.displayName = 'Field.Label';
+
+// =============================================================================
+// FIELD HELPER
+// =============================================================================
+
+export interface FieldHelperProps extends IFieldHelperProps, FieldHelperVariantProps {}
+
+const FieldHelper = forwardRef<View, FieldHelperProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const containerClassName = cn(fieldHelperVariants(), className);
+    const textClassName = cn(fieldHelperTextVariants());
+
+    return (
+      <FieldPrimitive.Helper ref={ref} className={containerClassName} style={style} {...props}>
+        <FieldPrimitive.HelperText className={textClassName}>{children}</FieldPrimitive.HelperText>
+      </FieldPrimitive.Helper>
+    );
+  },
+);
+
+FieldHelper.displayName = 'Field.Helper';
+
+// =============================================================================
+// FIELD ERROR (internal icon + text composition)
+// =============================================================================
+
+const FieldErrorIcon = ({ className, style, ...props }: { className?: string; style?: any }) => {
+  const computedClassName = cn(fieldErrorIconVariants(), className);
+
+  return (
+    <Icon
+      as={ErrorIcon}
+      className={computedClassName}
+      style={style}
+      aria-hidden={true}
+      {...props}
+    />
+  );
+};
+
+FieldErrorIcon.displayName = 'Field.ErrorIcon';
+
+export interface FieldErrorProps extends IFieldErrorProps, FieldErrorVariantProps {}
+
+const FieldError = forwardRef<View, FieldErrorProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const containerClassName = cn(fieldErrorVariants(), className);
+    const textClassName = cn(fieldErrorTextVariants());
+
+    return (
+      <FieldPrimitive.Error ref={ref} className={containerClassName} style={style} {...props}>
+        <FieldPrimitive.ErrorIcon>
+          <FieldErrorIcon />
+        </FieldPrimitive.ErrorIcon>
+        <FieldPrimitive.ErrorText className={textClassName}>{children}</FieldPrimitive.ErrorText>
+      </FieldPrimitive.Error>
+    );
+  },
+);
+
+FieldError.displayName = 'Field.Error';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type FieldCompoundComponent = typeof FieldRoot & {
+  Label: typeof FieldLabel;
+  Helper: typeof FieldHelper;
+  Error: typeof FieldError;
+};
+
+export const Field = Object.assign(FieldRoot, {
+  Label: FieldLabel,
+  Helper: FieldHelper,
+  Error: FieldError,
+}) as FieldCompoundComponent;

package/src/components/Field/styles.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { DISABLED_OPACITY } from '../../styles/primitives';
+
+export const fieldRootVariants = cva(['flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);
+
+export const fieldLabelVariants = cva([
+  'body-md',
+  'font-medium',
+  'text-content-primary',
+  'flex-row items-center',
+  DISABLED_OPACITY,
+  'web:cursor-pointer',
+  'data-[invalid=true]:text-content-danger',
+]);
+
+export const fieldHelperVariants = cva(['flex-row items-center']);
+
+export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
+
+export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
+
+export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
+
+export const fieldErrorIconVariants = cva(['size-3.5', 'text-content-danger']);
+
+export type FieldRootVariantProps = VariantProps<typeof fieldRootVariants>;
+export type FieldLabelVariantProps = VariantProps<typeof fieldLabelVariants>;
+export type FieldHelperVariantProps = VariantProps<typeof fieldHelperVariants>;
+export type FieldHelperTextVariantProps = VariantProps<typeof fieldHelperTextVariants>;
+export type FieldErrorVariantProps = VariantProps<typeof fieldErrorVariants>;
+export type FieldErrorTextVariantProps = VariantProps<typeof fieldErrorTextVariants>;
+export type FieldErrorIconVariantProps = VariantProps<typeof fieldErrorIconVariants>;

package/src/components/Form/FormRoot.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+export type BaseFormRootProps = ViewProps & {
+  onSubmit?: (e: React.SyntheticEvent) => void;
+  action?: string | ((formData: FormData) => void | Promise<void>);
+  method?: string;
+  className?: string;
+};
+
+export const BaseFormRoot = forwardRef<View, BaseFormRootProps>(
+  ({ onSubmit: _onSubmit, action: _action, method: _method, ...props }, ref) => {
+    void _onSubmit;
+    void _action;
+    void _method;
+    return <View ref={ref} {...props} />;
+  },
+);
+
+BaseFormRoot.displayName = 'BaseFormRoot';

package/src/components/Form/FormRoot.web.tsx

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+
+export type BaseFormRootProps = React.FormHTMLAttributes<HTMLFormElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export const BaseFormRoot = forwardRef<HTMLFormElement, BaseFormRootProps>((props, ref) => {
+  return <form ref={ref} {...props} />;
+});
+
+BaseFormRoot.displayName = 'BaseFormRoot';

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