@cdx-ui/components 0.0.1-alpha.21 → 0.0.1-alpha.23

package/lib/typescript/components/Chip/styles.d.ts

@@ -1,12 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const chipRootVariants: (props?: ({
-    color?: "default" | "warning" | "success" | "info" | "error" | null | undefined;
+    color?: "warning" | "success" | "info" | "default" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const chipLabelVariants: (props?: ({
-    color?: "default" | "warning" | "success" | "info" | "error" | null | undefined;
+    color?: "warning" | "success" | "info" | "default" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const chipIconVariants: (props?: ({
-    color?: "default" | "warning" | "success" | "info" | "error" | null | undefined;
+    color?: "warning" | "success" | "info" | "default" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ChipVariants = VariantProps<typeof chipRootVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Dialog/index.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+import { Text, View, type ViewProps } from 'react-native';
+import { type IDialogBodyProps, type IDialogCloseProps, type IDialogContentProps, type IDialogDescriptionProps, type IDialogFooterProps, type IDialogHeaderProps, type IDialogRootProps, type IDialogTitleProps, type IDialogTriggerProps } from '@cdx-ui/primitives';
+import { type DialogVariantProps } from './styles';
+export { useDialog } from '@cdx-ui/primitives';
+export interface DialogRootProps extends Omit<ViewProps, 'children' | 'role'>, IDialogRootProps, DialogVariantProps {
+    className?: string;
+}
+declare const DialogRoot: import("react").ForwardRefExoticComponent<DialogRootProps & import("react").RefAttributes<View>>;
+export interface DialogTriggerProps extends IDialogTriggerProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogTriggerProps & import("react").RefAttributes<View>>;
+export interface DialogContentProps extends IDialogContentProps, DialogVariantProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogContent: import("react").ForwardRefExoticComponent<DialogContentProps & import("react").RefAttributes<View>>;
+export interface DialogHeaderProps extends IDialogHeaderProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogHeader: import("react").ForwardRefExoticComponent<DialogHeaderProps & import("react").RefAttributes<View>>;
+export interface DialogTitleProps extends IDialogTitleProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps & import("react").RefAttributes<Text>>;
+export interface DialogDescriptionProps extends IDialogDescriptionProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps & import("react").RefAttributes<Text>>;
+export interface DialogBodyProps extends IDialogBodyProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogBody: import("react").ForwardRefExoticComponent<DialogBodyProps & import("react").RefAttributes<View>>;
+export interface DialogFooterProps extends IDialogFooterProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogFooter: import("react").ForwardRefExoticComponent<DialogFooterProps & import("react").RefAttributes<View>>;
+export interface DialogCloseProps extends IDialogCloseProps {
+    className?: string;
+    children?: ReactNode;
+}
+declare const DialogClose: import("react").ForwardRefExoticComponent<DialogCloseProps & import("react").RefAttributes<View>>;
+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 declare const Dialog: DialogCompoundComponent;
+export type { DialogVariantProps } from './styles';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/components/Dialog/styles.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const dialogOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dialogHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogBodyVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogCloseVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogCloseIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type DialogVariantProps = VariantProps<typeof dialogContentVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Dialog/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Dialog/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAclE,eAAO,MAAM,qBAAqB,oFAA4D,CAAC;AAI/F,eAAO,MAAM,qBAAqB;;8EAqBjC,CAAC;AAIF,eAAO,MAAM,oBAAoB,oFAG/B,CAAC;AAIH,eAAO,MAAM,mBAAmB,oFAAqD,CAAC;AAItF,eAAO,MAAM,yBAAyB,oFAA8C,CAAC;AAIrF,eAAO,MAAM,kBAAkB,oFAAoC,CAAC;AAIpE,eAAO,MAAM,oBAAoB,oFAG/B,CAAC;AAIH,eAAO,MAAM,mBAAmB,oFAW9B,CAAC;AAIH,eAAO,MAAM,uBAAuB,oFAAiC,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/lib/typescript/components/ProgressSegmented/index.d.ts

@@ -0,0 +1,15 @@
+import { View, type ViewProps } from 'react-native';
+import { type ProgressSegmentedVariants } from './styles';
+export interface ProgressSegmentedProps extends ViewProps, ProgressSegmentedVariants {
+    /** Current step (1-based index into the segment count) */
+    readonly step: number;
+    /** Total number of segments */
+    readonly total?: number;
+    /** When true, the current step segment is marked as complete rather than in-progress */
+    readonly isStepComplete?: boolean;
+    /** Returns the accessibility value text announced by screen readers. Receives the clamped step, total, and whether the step is complete. */
+    readonly getAccessibilityText?: (step: number, total: number, isStepComplete: boolean) => string;
+    readonly className?: string;
+}
+export declare const ProgressSegmented: import("react").ForwardRefExoticComponent<ProgressSegmentedProps & import("react").RefAttributes<View>>;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/ProgressSegmented/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAGL,KAAK,yBAAyB,EAC/B,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,yBAAyB;IAClF,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,wFAAwF;IACxF,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,4IAA4I;IAC5I,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,KAAK,MAAM,CAAC;IACjG,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,iBAAiB,yGAyD7B,CAAC"}

package/lib/typescript/components/ProgressSegmented/styles.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const progressSegmentedVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const segmentVariants: (props?: ({
+    state?: "complete" | "incomplete" | "inprogress" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ProgressSegmentedVariants = VariantProps<typeof progressSegmentedVariants>;
+export type SegmentVariants = VariantProps<typeof segmentVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/ProgressSegmented/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressSegmented/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,yBAAyB,oFAAiC,CAAC;AAExE,eAAO,MAAM,eAAe;;8EAW1B,CAAC;AAEH,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC;AACvF,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -1,12 +1,15 @@
+export * from './AlertDialog';
 export * from './Avatar';
 export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
-export * from './Chip';
 export * from './Card';
 export * from './Checkbox';
+export * from './Chip';
+export * from './Dialog';
 export * from './Input';
 export * from './Link';
+export * from './ProgressSegmented';
 export * from './Select';
 export * from './VirtualizedList';
 export * from './Switch';

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.21",
+  "version": "0.0.1-alpha.23",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -65,9 +65,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.21",
-    "@cdx-ui/utils": "0.0.1-alpha.21",
-    "@cdx-ui/icons": "0.0.1-alpha.21"
+    "@cdx-ui/primitives": "0.0.1-alpha.23",
+    "@cdx-ui/utils": "0.0.1-alpha.23",
+    "@cdx-ui/icons": "0.0.1-alpha.23"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/AlertDialog/index.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { View } from 'react-native';
+import { useDialog } from '@cdx-ui/primitives';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Button, type ButtonProps } from '../Button';
+import { Dialog, type DialogRootProps } from '../Dialog';
+
+// =============================================================================
+// ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
+// =============================================================================
+
+export interface AlertDialogRootProps extends DialogRootProps {}
+
+const AlertDialogRoot = forwardRef<View, AlertDialogRootProps>(
+  (
+    {
+      closeOnBackdropPress = false,
+      closeOnEscKey = false,
+      role = 'alertdialog',
+      children,
+      ...props
+    },
+    ref,
+  ) => (
+    <Dialog
+      ref={ref}
+      closeOnBackdropPress={closeOnBackdropPress}
+      closeOnEscKey={closeOnEscKey}
+      role={role}
+      {...props}
+    >
+      {children}
+    </Dialog>
+  ),
+);
+AlertDialogRoot.displayName = 'AlertDialog';
+
+// =============================================================================
+// ALERT DIALOG ACTION
+// =============================================================================
+
+export interface AlertDialogActionProps extends Omit<ButtonProps, 'variant'> {
+  readonly asChild?: boolean;
+}
+
+const AlertDialogAction = forwardRef<View, AlertDialogActionProps>(
+  ({ asChild = false, children, color = 'action', className, ...props }, ref) => {
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        className,
+        ...props,
+      });
+    }
+
+    return (
+      <Button ref={ref} variant="strong" color={color} className={className} {...props}>
+        <Button.Label>{children}</Button.Label>
+      </Button>
+    );
+  },
+);
+AlertDialogAction.displayName = 'AlertDialog.Action';
+
+// =============================================================================
+// ALERT DIALOG CANCEL
+// =============================================================================
+
+export interface AlertDialogCancelProps extends Omit<ButtonProps, 'variant'> {
+  readonly asChild?: boolean;
+}
+
+const AlertDialogCancel = forwardRef<View, AlertDialogCancelProps>(
+  ({ asChild = false, children, onPress, className, ...props }, ref) => {
+    const { onOpenChange } = useDialog();
+    const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children as React.ReactElement<any>, {
+        ref,
+        onPress: handlePress,
+        className,
+        ...props,
+      });
+    }
+
+    return (
+      <Button ref={ref} variant="outline" onPress={handlePress} className={className} {...props}>
+        <Button.Label>{children}</Button.Label>
+      </Button>
+    );
+  },
+);
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
+  Trigger: typeof Dialog.Trigger;
+  Content: typeof Dialog.Content;
+  Header: typeof Dialog.Header;
+  Title: typeof Dialog.Title;
+  Description: typeof Dialog.Description;
+  Body: typeof Dialog.Body;
+  Footer: typeof Dialog.Footer;
+  Close: typeof Dialog.Close;
+  Action: typeof AlertDialogAction;
+  Cancel: typeof AlertDialogCancel;
+};
+
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+  Trigger: Dialog.Trigger,
+  Content: Dialog.Content,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  Close: Dialog.Close,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel,
+}) as AlertDialogCompoundComponent;

package/src/components/Dialog/index.tsx

@@ -0,0 +1,306 @@
+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;
+
+export type { DialogVariantProps } from './styles';