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

package/src/components/Dialog/index.tsx

@@ -0,0 +1,304 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type PressableProps, type ViewProps } from 'react-native';
+import { Close as CloseIcon } from '@cdx-ui/icons';
+import {
+  createDialog,
+  type IDialogBodyProps,
+  type IDialogCloseProps,
+  type IDialogContentProps,
+  type IDialogDescriptionProps,
+  type IDialogFooterProps,
+  type IDialogHeaderProps,
+  type IDialogRootProps,
+  type IDialogTitleProps,
+  type IDialogTriggerProps,
+} from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon } from '../Icon';
+import {
+  type DialogVariantProps,
+  dialogBodyVariants,
+  dialogCloseIconVariants,
+  dialogCloseVariants,
+  dialogContentVariants,
+  dialogDescriptionVariants,
+  dialogFooterVariants,
+  dialogHeaderVariants,
+  dialogOverlayVariants,
+  dialogTitleVariants,
+} from './styles';
+
+export { useDialog } from '@cdx-ui/primitives';
+
+// =============================================================================
+// STYLE CONTEXT
+// =============================================================================
+
+const SCOPE = 'DIALOG';
+
+const Root = withStyleContext(View, SCOPE);
+
+const useDialogStyleContext = () => useStyleContext(SCOPE) as DialogVariantProps;
+
+// =============================================================================
+// STYLED OVERLAY (internal — not consumer-facing)
+// =============================================================================
+
+const StyledOverlay = forwardRef<View, PressableProps & { className?: string }>(
+  ({ className, ...props }, ref) => (
+    <Pressable ref={ref} className={cn(dialogOverlayVariants(), className)} {...props} />
+  ),
+);
+StyledOverlay.displayName = 'Dialog.Overlay';
+
+// =============================================================================
+// CREATE DIALOG PRIMITIVE
+// =============================================================================
+
+const DialogPrimitive = createDialog({
+  Root,
+  Trigger: Pressable,
+  Overlay: StyledOverlay,
+  Content: View,
+  Header: View,
+  Title: Text,
+  Description: Text,
+  Body: View,
+  Footer: View,
+  Close: Pressable,
+});
+
+// =============================================================================
+// STYLED ROOT
+// =============================================================================
+
+export interface DialogRootProps
+  extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
+  className?: string;
+}
+
+const DialogRoot = forwardRef<View, DialogRootProps>(
+  ({ size = 'md', className, children, style, ...props }, ref) => (
+    <DialogPrimitive ref={ref} className={className} style={style} context={{ size }} {...props}>
+      {children}
+    </DialogPrimitive>
+  ),
+);
+
+DialogRoot.displayName = 'Dialog';
+
+// =============================================================================
+// STYLED TRIGGER
+// =============================================================================
+
+export interface DialogTriggerProps extends IDialogTriggerProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogTrigger = forwardRef<View, DialogTriggerProps>(
+  ({ className, children, style, ...props }, ref) => (
+    <DialogPrimitive.Trigger ref={ref} className={className} style={style} {...props}>
+      {children}
+    </DialogPrimitive.Trigger>
+  ),
+);
+
+DialogTrigger.displayName = 'Dialog.Trigger';
+
+// =============================================================================
+// STYLED CONTENT
+// =============================================================================
+
+export interface DialogContentProps extends IDialogContentProps, DialogVariantProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogContent = forwardRef<View, DialogContentProps>(
+  ({ size: sizeProp, className, children, style, ...props }, ref) => {
+    const { size: contextSize } = useDialogStyleContext();
+    const size = sizeProp ?? contextSize;
+    const computedClassName = cn(dialogContentVariants({ size }), className);
+
+    return (
+      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Content>
+    );
+  },
+);
+
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED HEADER
+// =============================================================================
+
+export interface DialogHeaderProps extends IDialogHeaderProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogHeader = forwardRef<View, DialogHeaderProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogHeaderVariants(), className);
+
+    return (
+      <DialogPrimitive.Header ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Header>
+    );
+  },
+);
+
+DialogHeader.displayName = 'Dialog.Header';
+
+// =============================================================================
+// STYLED TITLE
+// =============================================================================
+
+export interface DialogTitleProps extends IDialogTitleProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogTitle = forwardRef<Text, DialogTitleProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogTitleVariants(), className);
+
+    return (
+      <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Title>
+    );
+  },
+);
+
+DialogTitle.displayName = 'Dialog.Title';
+
+// =============================================================================
+// STYLED DESCRIPTION
+// =============================================================================
+
+export interface DialogDescriptionProps extends IDialogDescriptionProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogDescriptionVariants(), className);
+
+    return (
+      <DialogPrimitive.Description ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Description>
+    );
+  },
+);
+
+DialogDescription.displayName = 'Dialog.Description';
+
+// =============================================================================
+// STYLED BODY
+// =============================================================================
+
+export interface DialogBodyProps extends IDialogBodyProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogBody = forwardRef<View, DialogBodyProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogBodyVariants(), className);
+
+    return (
+      <DialogPrimitive.Body ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Body>
+    );
+  },
+);
+
+DialogBody.displayName = 'Dialog.Body';
+
+// =============================================================================
+// STYLED FOOTER
+// =============================================================================
+
+export interface DialogFooterProps extends IDialogFooterProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogFooter = forwardRef<View, DialogFooterProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogFooterVariants(), className);
+
+    return (
+      <DialogPrimitive.Footer ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Footer>
+    );
+  },
+);
+
+DialogFooter.displayName = 'Dialog.Footer';
+
+// =============================================================================
+// STYLED CLOSE
+// =============================================================================
+
+export interface DialogCloseProps extends IDialogCloseProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogClose = forwardRef<View, DialogCloseProps>(
+  ({ className, accessibilityLabel = 'Close', children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogCloseVariants(), className);
+
+    return (
+      <DialogPrimitive.Close
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        hitSlop={12}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        {...props}
+      >
+        {children ?? <Icon as={CloseIcon} className={dialogCloseIconVariants()} />}
+      </DialogPrimitive.Close>
+    );
+  },
+);
+
+DialogClose.displayName = 'Dialog.Close';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+type DialogCompoundComponent = typeof DialogRoot & {
+  Trigger: typeof DialogTrigger;
+  Content: typeof DialogContent;
+  Header: typeof DialogHeader;
+  Title: typeof DialogTitle;
+  Description: typeof DialogDescription;
+  Body: typeof DialogBody;
+  Footer: typeof DialogFooter;
+  Close: typeof DialogClose;
+};
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose,
+}) as DialogCompoundComponent;

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/Form/FormLabelRoot.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 FormLabelRootProps = TextProps & {
+  /** @platform web — forwarded on web; ignored here (see `FormLabelRoot.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 FormLabelRoot = forwardRef<Text, FormLabelRootProps>(
+  ({ htmlFor: _omitHtmlFor, onPress, ...props }, ref) => {
+    void _omitHtmlFor;
+
+    const { focusInput, isDisabled } = useFormControlContext();
+
+    return (
+      <Text
+        ref={ref}
+        {...props}
+        disabled={Boolean(isDisabled)}
+        onPress={composeEventHandlers(onPress, () => focusInput?.())}
+      />
+    );
+  },
+);
+
+FormLabelRoot.displayName = 'FormLabelRoot';

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

@@ -0,0 +1,18 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export type FormLabelRootProps = ViewProps & {
+  htmlFor?: string;
+  children?: ReactNode;
+  /** Mirrors field invalid state from form context (`data-[invalid=true]` styling). */
+  'data-invalid'?: string;
+  /** @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 FormLabelRoot = forwardRef<HTMLLabelElement, FormLabelRootProps>((props, ref) => {
+  return <label ref={ref} {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)} />;
+});
+
+FormLabelRoot.displayName = 'FormLabelRoot';

package/src/components/Form/FormRoot.tsx

@@ -0,0 +1,19 @@
+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;
+};
+
+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';