@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.70

package/src/components/Dialog/index.tsx

@@ -1,23 +1,25 @@
-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 { forwardRef, useMemo, type ReactNode } from 'react';
+import { Text, View, type TextProps, type ViewProps } from 'react-native';
+import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
 import {
-  createDialog,
-  type IDialogBodyProps,
+  DialogClose as DialogClosePrimitive,
+  DialogPopup as DialogPopupPrimitive,
+  DialogRoot as DialogRootPrimitive,
+  DialogTrigger as DialogTriggerPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useDialog,
   type IDialogCloseProps,
-  type IDialogContentProps,
-  type IDialogDescriptionProps,
-  type IDialogFooterProps,
-  type IDialogHeaderProps,
+  type IDialogPopupProps,
   type IDialogRootProps,
-  type IDialogTitleProps,
   type IDialogTriggerProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon } from '../Icon';
 import {
+  type DialogTitleVariantProps,
   type DialogVariantProps,
-  dialogBodyVariants,
   dialogCloseIconVariants,
   dialogCloseVariants,
   dialogContentVariants,
@@ -25,6 +27,9 @@ import {
   dialogFooterVariants,
   dialogHeaderVariants,
   dialogOverlayVariants,
+  dialogPopupVariants,
+  dialogTextVariants,
+  dialogTitleIconVariants,
   dialogTitleVariants,
 } from './styles';
 
@@ -36,38 +41,8 @@ export { useDialog } from '@cdx-ui/primitives';
 
 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
 // =============================================================================
@@ -78,11 +53,27 @@ export interface DialogRootProps
 }
 
 const DialogRoot = forwardRef<View, DialogRootProps>(
-  ({ size = 'md', className, children, style, ...props }, ref) => (
-    <DialogPrimitive ref={ref} className={className} style={style} context={{ size }} {...props}>
-      {children}
-    </DialogPrimitive>
-  ),
+  ({ size = 'md', fullBleed = false, className, children, style, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { size, fullBleed } }),
+      [parent, size, fullBleed],
+    );
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <DialogRootPrimitive
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog' }))}
+        >
+          {children}
+        </DialogRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
 );
 
 DialogRoot.displayName = 'Dialog';
@@ -98,56 +89,78 @@ export interface DialogTriggerProps extends IDialogTriggerProps {
 
 const DialogTrigger = forwardRef<View, DialogTriggerProps>(
   ({ className, children, style, ...props }, ref) => (
-    <DialogPrimitive.Trigger ref={ref} className={className} style={style} {...props}>
+    <DialogTriggerPrimitive
+      ref={ref}
+      className={className}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-trigger' }))}
+    >
       {children}
-    </DialogPrimitive.Trigger>
+    </DialogTriggerPrimitive>
   ),
 );
 
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED POPUP
 // =============================================================================
 
-export interface DialogContentProps extends IDialogContentProps, DialogVariantProps {
+export interface DialogPopupProps extends IDialogPopupProps, Pick<DialogVariantProps, 'size'> {
   className?: string;
   children?: ReactNode;
 }
 
-const DialogContent = forwardRef<View, DialogContentProps>(
+const DialogPopup = forwardRef<View, DialogPopupProps>(
   ({ size: sizeProp, className, children, style, ...props }, ref) => {
     const { size: contextSize } = useDialogStyleContext();
     const size = sizeProp ?? contextSize;
-    const computedClassName = cn(dialogContentVariants({ size }), className);
+    const computedClassName = cn(dialogPopupVariants({ size }), className);
+    const overlayClassName = cn(dialogOverlayVariants());
 
     return (
-      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+      <DialogPopupPrimitive
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        overlayClassName={overlayClassName}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-popup' }))}
+      >
         {children}
-      </DialogPrimitive.Content>
+      </DialogPopupPrimitive>
     );
   },
 );
 
-DialogContent.displayName = 'Dialog.Content';
+DialogPopup.displayName = 'Dialog.Popup';
 
 // =============================================================================
-// STYLED HEADER
+// STYLED HEADER (styled-only sub-slot)
 // =============================================================================
 
-export interface DialogHeaderProps extends IDialogHeaderProps {
+export interface DialogHeaderProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogHeader = forwardRef<View, DialogHeaderProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(dialogHeaderVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Header ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-header' }))}
+      >
         {children}
-      </DialogPrimitive.Header>
+      </Comp>
     );
   },
 );
@@ -155,45 +168,84 @@ const DialogHeader = forwardRef<View, DialogHeaderProps>(
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE
+// STYLED TITLE (styled-only sub-slot with appearance variants)
 // =============================================================================
 
-export interface DialogTitleProps extends IDialogTitleProps {
+const APPEARANCE_ICON_MAP = {
+  danger: EmergencyHome,
+  warning: Warning,
+  success: CheckCircle,
+} as const;
+
+export interface DialogTitleProps extends TextProps, DialogTitleVariantProps {
+  asChild?: boolean;
   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}>
+  ({ asChild, appearance = 'default', className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogTitleVariants({ appearance }), className);
+    const IconComponent =
+      appearance && appearance in APPEARANCE_ICON_MAP
+        ? APPEARANCE_ICON_MAP[appearance as keyof typeof APPEARANCE_ICON_MAP]
+        : null;
+    const Comp = asChild ? Slot : Text;
+
+    const titleElement = (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-title' }))}
+      >
         {children}
-      </DialogPrimitive.Title>
+      </Comp>
     );
+
+    if (IconComponent) {
+      return (
+        <View className="flex-row items-center gap-1">
+          <Icon as={IconComponent} className={dialogTitleIconVariants({ appearance })} />
+          {titleElement}
+        </View>
+      );
+    }
+
+    return titleElement;
   },
 );
 
 DialogTitle.displayName = 'Dialog.Title';
 
 // =============================================================================
-// STYLED DESCRIPTION
+// STYLED DESCRIPTION (styled-only sub-slot — reads dialog context for nativeID)
 // =============================================================================
 
-export interface DialogDescriptionProps extends IDialogDescriptionProps {
+export interface DialogDescriptionProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { nativeID } = useDialog();
     const computedClassName = cn(dialogDescriptionVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <DialogPrimitive.Description ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        nativeID={`${nativeID}-description`}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-description' }))}
+      >
         {children}
-      </DialogPrimitive.Description>
+      </Comp>
     );
   },
 );
@@ -201,45 +253,96 @@ const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED BODY
+// STYLED CONTENT (styled-only sub-slot — reads variant context for fullBleed)
 // =============================================================================
 
-export interface DialogBodyProps extends IDialogBodyProps {
+export interface DialogContentProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const DialogBody = forwardRef<View, DialogBodyProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogBodyVariants(), className);
+const DialogContent = forwardRef<View, DialogContentProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { fullBleed } = useDialogStyleContext();
+    const computedClassName = cn(
+      dialogContentVariants({ fullBleed: fullBleed ?? false }),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Body ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-content' }))}
+      >
         {children}
-      </DialogPrimitive.Body>
+      </Comp>
     );
   },
 );
 
-DialogBody.displayName = 'Dialog.Body';
+DialogContent.displayName = 'Dialog.Content';
 
 // =============================================================================
-// STYLED FOOTER
+// STYLED TEXT (convenience text styling, styled-only)
 // =============================================================================
 
-export interface DialogFooterProps extends IDialogFooterProps {
+export interface DialogTextProps extends TextProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogText = forwardRef<Text, DialogTextProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const computedClassName = cn(dialogTextVariants(), className);
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-text' }))}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+DialogText.displayName = 'Dialog.Text';
+
+// =============================================================================
+// STYLED FOOTER (styled-only sub-slot)
+// =============================================================================
+
+export interface DialogFooterProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogFooter = forwardRef<View, DialogFooterProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(dialogFooterVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Footer ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-footer' }))}
+      >
         {children}
-      </DialogPrimitive.Footer>
+      </Comp>
     );
   },
 );
@@ -260,7 +363,7 @@ const DialogClose = forwardRef<View, DialogCloseProps>(
     const computedClassName = cn(dialogCloseVariants(), className);
 
     return (
-      <DialogPrimitive.Close
+      <DialogClosePrimitive
         ref={ref}
         className={computedClassName}
         style={style}
@@ -268,9 +371,10 @@ const DialogClose = forwardRef<View, DialogCloseProps>(
         accessibilityRole="button"
         accessibilityLabel={accessibilityLabel}
         {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-close' }))}
       >
         {children ?? <Icon as={CloseIcon} className={dialogCloseIconVariants()} />}
-      </DialogPrimitive.Close>
+      </DialogClosePrimitive>
     );
   },
 );
@@ -283,22 +387,24 @@ DialogClose.displayName = 'Dialog.Close';
 
 type DialogCompoundComponent = typeof DialogRoot & {
   Trigger: typeof DialogTrigger;
-  Content: typeof DialogContent;
+  Popup: typeof DialogPopup;
   Header: typeof DialogHeader;
   Title: typeof DialogTitle;
   Description: typeof DialogDescription;
-  Body: typeof DialogBody;
+  Content: typeof DialogContent;
+  Text: typeof DialogText;
   Footer: typeof DialogFooter;
   Close: typeof DialogClose;
 };
 
 export const Dialog = Object.assign(DialogRoot, {
   Trigger: DialogTrigger,
-  Content: DialogContent,
+  Popup: DialogPopup,
   Header: DialogHeader,
   Title: DialogTitle,
   Description: DialogDescription,
-  Body: DialogBody,
+  Content: DialogContent,
+  Text: DialogText,
   Footer: DialogFooter,
   Close: DialogClose,
 }) as DialogCompoundComponent;

package/src/components/Dialog/styles.ts

@@ -1,36 +1,28 @@
 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';
+import { TRANSITION_COLORS } from '../../styles/primitives';
 
 // ── Overlay ─────────────────────────────────────────────────
 
-export const dialogOverlayVariants = cva(['absolute inset-0', COLOR_BG_INVERSE, 'opacity-50']);
+export const dialogOverlayVariants = cva(['absolute inset-0', 'bg-surface-backdrop']);
 
-// ── Content ─────────────────────────────────────────────────
+// ── Popup (renamed from dialogContentVariants) ──────────────
 
-export const dialogContentVariants = cva(
+export const dialogPopupVariants = cva(
   [
-    COLOR_BG_PRIMARY,
-    `border ${COLOR_BORDER_DEFAULT}`,
-    RADIUS_MD,
-    Platform.select({ web: SHADOW_MD, default: '' }),
+    'bg-surface-primary',
+    'rounded-lg',
+    Platform.select({ web: 'shadow-lg', default: '' }),
     'max-h-[85vh] overflow-hidden',
   ],
   {
     variants: {
       size: {
+        xs: 'w-[90%] max-w-xs',
         sm: 'w-[90%] max-w-sm',
         md: 'w-[90%] max-w-md',
         lg: 'w-[90%] max-w-lg',
+        xl: 'w-[90%] max-w-xl',
         full: 'w-full mx-4',
       },
     },
@@ -43,46 +35,96 @@ export const dialogContentVariants = cva(
 // ── Header ──────────────────────────────────────────────────
 
 export const dialogHeaderVariants = cva([
-  'flex-row items-center justify-between shrink-0',
-  'px-6 pt-6 pb-2',
+  'flex-col items-start justify-between shrink-0',
+  'pl-6 pr-14 py-4',
 ]);
 
 // ── Title ───────────────────────────────────────────────────
 
-export const dialogTitleVariants = cva(['text-lg font-semibold', COLOR_TEXT_PRIMARY]);
+export const dialogTitleVariants = cva(['heading-sm', 'text-content-primary'], {
+  variants: {
+    appearance: {
+      default: '',
+      danger: '',
+      warning: '',
+      success: '',
+    },
+  },
+  defaultVariants: {
+    appearance: 'default',
+  },
+});
+
+// ── Title Icon ──────────────────────────────────────────────
+
+export const dialogTitleIconVariants = cva(['size-5'], {
+  variants: {
+    appearance: {
+      default: '',
+      danger: 'text-content-danger',
+      warning: 'text-content-warning',
+      success: 'text-content-success',
+    },
+  },
+  defaultVariants: {
+    appearance: 'default',
+  },
+});
 
 // ── Description ─────────────────────────────────────────────
 
-export const dialogDescriptionVariants = cva(['text-sm mt-1', COLOR_TEXT_SECONDARY]);
+export const dialogDescriptionVariants = cva(['body-sm mt-1', 'text-content-secondary']);
+
+// ── Content (renamed from dialogBodyVariants) ───────────────
+
+export const dialogContentVariants = cva(['px-6 py-0 gap-2 shrink min-h-0'], {
+  variants: {
+    fullBleed: {
+      true: 'px-0',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    fullBleed: false,
+  },
+});
 
-// ── Body ────────────────────────────────────────────────────
+// ── Text ────────────────────────────────────────────────────
 
-export const dialogBodyVariants = cva(['px-6 py-4 shrink min-h-0']);
+export const dialogTextVariants = cva(['body-md', 'text-content-primary']);
 
 // ── Footer ──────────────────────────────────────────────────
 
 export const dialogFooterVariants = cva([
   'flex-row items-center justify-end shrink-0',
-  'gap-3 px-6 pt-2 pb-6',
+  'gap-2 px-6 pt-4 pb-6',
 ]);
 
 // ── Close ───────────────────────────────────────────────────
 
 export const dialogCloseVariants = cva([
-  'p-1 -m-1 rounded-full',
+  'absolute right-[14px] top-[14px]',
+  'min-w-[32px] min-h-[32px] items-center justify-center',
+  'p-[6px] 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',
+      'data-[hover=true]:bg-surface-primary-hover',
+      'data-[active=true]:bg-surface-primary-active',
+      'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
     ].join(' '),
   }),
 ]);
 
 // ── Close Icon ──────────────────────────────────────────────
 
-export const dialogCloseIconVariants = cva(['size-5 text-slate-500']);
+export const dialogCloseIconVariants = cva(['size-5 text-content-tertiary']);
+
+// ── Exported types ──────────────────────────────────────────
+
+export type DialogVariantProps = VariantProps<typeof dialogPopupVariants> & {
+  fullBleed?: boolean;
+};
 
-export type DialogVariantProps = VariantProps<typeof dialogContentVariants>;
+export type DialogTitleVariantProps = VariantProps<typeof dialogTitleVariants>;