@cdx-ui/components 0.0.1-beta.51 → 0.0.1-beta.53

package/lib/typescript/figma/AlertDialog.Footer.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=AlertDialog.Footer.figma.d.ts.map

package/lib/typescript/figma/AlertDialog.Footer.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.Footer.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/AlertDialog.Footer.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgC1B,wBASE"}

package/lib/typescript/figma/AlertDialog.Header.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=AlertDialog.Header.figma.d.ts.map

package/lib/typescript/figma/AlertDialog.Header.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.Header.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/AlertDialog.Header.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgB1B,wBAQE"}

package/lib/typescript/figma/AlertDialog.Text.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=AlertDialog.Text.figma.d.ts.map

package/lib/typescript/figma/AlertDialog.Text.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.Text.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/AlertDialog.Text.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/AlertDialog.Title.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=AlertDialog.Title.figma.d.ts.map

package/lib/typescript/figma/AlertDialog.Title.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.Title.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/AlertDialog.Title.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAe1B,wBAIE"}

package/lib/typescript/figma/AlertDialog.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=AlertDialog.figma.d.ts.map

package/lib/typescript/figma/AlertDialog.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/AlertDialog.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAyB1B,wBAYE"}

package/lib/typescript/figma/Dialog.Description.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.Description.figma.d.ts.map

package/lib/typescript/figma/Dialog.Description.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.Description.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.Description.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/Dialog.Footer.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.Footer.figma.d.ts.map

package/lib/typescript/figma/Dialog.Footer.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.Footer.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.Footer.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgB1B,wBASE"}

package/lib/typescript/figma/Dialog.Header.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.Header.figma.d.ts.map

package/lib/typescript/figma/Dialog.Header.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.Header.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.Header.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgB1B,wBASE"}

package/lib/typescript/figma/Dialog.Text.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.Text.figma.d.ts.map

package/lib/typescript/figma/Dialog.Text.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.Text.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.Text.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAM1B,wBAIE"}

package/lib/typescript/figma/Dialog.Title.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.Title.figma.d.ts.map

package/lib/typescript/figma/Dialog.Title.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.Title.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.Title.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAe1B,wBAIE"}

package/lib/typescript/figma/Dialog.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=Dialog.figma.d.ts.map

package/lib/typescript/figma/Dialog.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Dialog.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAiC1B,wBAYE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.51",
+  "version": "0.0.1-beta.53",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.51",
-    "@cdx-ui/utils": "0.0.1-beta.51",
-    "@cdx-ui/icons": "0.0.1-beta.51"
+    "@cdx-ui/primitives": "0.0.1-beta.53",
+    "@cdx-ui/utils": "0.0.1-beta.53",
+    "@cdx-ui/icons": "0.0.1-beta.53"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/AlertDialog/index.tsx

@@ -85,7 +85,7 @@ const AlertDialogCancel = forwardRef<View, AlertDialogCancelProps>(
     }
 
     return (
-      <Button ref={ref} variant="outline" onPress={handlePress} className={className} {...props}>
+      <Button ref={ref} variant="ghost" onPress={handlePress} className={className} {...props}>
         <Button.Label>{children}</Button.Label>
       </Button>
     );
@@ -99,11 +99,12 @@ AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 
 type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
   Trigger: typeof Dialog.Trigger;
-  Content: typeof Dialog.Content;
+  Popup: typeof Dialog.Popup;
   Header: typeof Dialog.Header;
   Title: typeof Dialog.Title;
   Description: typeof Dialog.Description;
-  Body: typeof Dialog.Body;
+  Content: typeof Dialog.Content;
+  Text: typeof Dialog.Text;
   Footer: typeof Dialog.Footer;
   Close: typeof Dialog.Close;
   Action: typeof AlertDialogAction;
@@ -112,11 +113,12 @@ type AlertDialogCompoundComponent = typeof AlertDialogRoot & {
 
 export const AlertDialog = Object.assign(AlertDialogRoot, {
   Trigger: Dialog.Trigger,
-  Content: Dialog.Content,
+  Popup: Dialog.Popup,
   Header: Dialog.Header,
   Title: Dialog.Title,
   Description: Dialog.Description,
-  Body: Dialog.Body,
+  Content: Dialog.Content,
+  Text: Dialog.Text,
   Footer: Dialog.Footer,
   Close: Dialog.Close,
   Action: AlertDialogAction,

package/src/components/Dialog/index.tsx

@@ -1,14 +1,21 @@
 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 {
+  Pressable,
+  Text,
+  View,
+  type PressableProps,
+  type TextProps,
+  type ViewProps,
+} from 'react-native';
+import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
 import {
   createDialog,
-  type IDialogBodyProps,
   type IDialogCloseProps,
   type IDialogContentProps,
   type IDialogDescriptionProps,
   type IDialogFooterProps,
   type IDialogHeaderProps,
+  type IDialogPopupProps,
   type IDialogRootProps,
   type IDialogTitleProps,
   type IDialogTriggerProps,
@@ -16,8 +23,8 @@ import {
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
 import { Icon } from '../Icon';
 import {
+  type DialogTitleVariantProps,
   type DialogVariantProps,
-  dialogBodyVariants,
   dialogCloseIconVariants,
   dialogCloseVariants,
   dialogContentVariants,
@@ -25,6 +32,9 @@ import {
   dialogFooterVariants,
   dialogHeaderVariants,
   dialogOverlayVariants,
+  dialogPopupVariants,
+  dialogTextVariants,
+  dialogTitleIconVariants,
   dialogTitleVariants,
 } from './styles';
 
@@ -59,11 +69,11 @@ const DialogPrimitive = createDialog({
   Root,
   Trigger: Pressable,
   Overlay: StyledOverlay,
-  Content: View,
+  Popup: View,
   Header: View,
   Title: Text,
   Description: Text,
-  Body: View,
+  Content: View,
   Footer: View,
   Close: Pressable,
 });
@@ -78,8 +88,14 @@ 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}>
+  ({ size = 'md', fullBleed = false, className, children, style, ...props }, ref) => (
+    <DialogPrimitive
+      ref={ref}
+      className={className}
+      style={style}
+      context={{ size, fullBleed }}
+      {...props}
+    >
       {children}
     </DialogPrimitive>
   ),
@@ -107,29 +123,29 @@ const DialogTrigger = forwardRef<View, DialogTriggerProps>(
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED POPUP (wraps DialogPrimitive.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);
 
     return (
-      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+      <DialogPrimitive.Popup ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-      </DialogPrimitive.Content>
+      </DialogPrimitive.Popup>
     );
   },
 );
 
-DialogContent.displayName = 'Dialog.Content';
+DialogPopup.displayName = 'Dialog.Popup';
 
 // =============================================================================
 // STYLED HEADER
@@ -158,14 +174,35 @@ DialogHeader.displayName = 'Dialog.Header';
 // STYLED TITLE
 // =============================================================================
 
-export interface DialogTitleProps extends IDialogTitleProps {
+const APPEARANCE_ICON_MAP = {
+  danger: EmergencyHome,
+  warning: Warning,
+  success: CheckCircle,
+} as const;
+
+export interface DialogTitleProps extends IDialogTitleProps, DialogTitleVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
 const DialogTitle = forwardRef<Text, DialogTitleProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogTitleVariants(), className);
+  ({ 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;
+
+    if (IconComponent) {
+      return (
+        <View className="flex-row items-center gap-1">
+          <Icon as={IconComponent} className={dialogTitleIconVariants({ appearance })} />
+          <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
+            {children}
+          </DialogPrimitive.Title>
+        </View>
+      );
+    }
 
     return (
       <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
@@ -201,27 +238,54 @@ const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED BODY
+// STYLED CONTENT (wraps DialogPrimitive.Content)
+// =============================================================================
+
+export interface DialogContentProps extends IDialogContentProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const DialogContent = forwardRef<View, DialogContentProps>(
+  ({ className, children, style, ...props }, ref) => {
+    const { fullBleed } = useDialogStyleContext();
+    const computedClassName = cn(
+      dialogContentVariants({ fullBleed: fullBleed ?? false }),
+      className,
+    );
+
+    return (
+      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </DialogPrimitive.Content>
+    );
+  },
+);
+
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED TEXT
 // =============================================================================
 
-export interface DialogBodyProps extends IDialogBodyProps {
+export interface DialogTextProps extends TextProps {
   className?: string;
   children?: ReactNode;
 }
 
-const DialogBody = forwardRef<View, DialogBodyProps>(
+const DialogText = forwardRef<Text, DialogTextProps>(
   ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(dialogBodyVariants(), className);
+    const computedClassName = cn(dialogTextVariants(), className);
 
     return (
-      <DialogPrimitive.Body ref={ref} className={computedClassName} style={style} {...props}>
+      <Text ref={ref} className={computedClassName} style={style} {...props}>
         {children}
-      </DialogPrimitive.Body>
+      </Text>
     );
   },
 );
 
-DialogBody.displayName = 'Dialog.Body';
+DialogText.displayName = 'Dialog.Text';
 
 // =============================================================================
 // STYLED FOOTER
@@ -283,22 +347,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>;