@cdx-ui/components 0.0.1-beta.6 → 0.0.1-beta.60

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

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

@@ -7,7 +7,7 @@ export type BaseFieldLabelProps = ViewProps & {
   htmlFor?: string;
   children?: ReactNode;
   /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
-  dataSet?: Record<string, string>;
+  dataSet?: Record<string, boolean | string>;
 };
 
 /** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */

package/src/components/Field/index.tsx

@@ -8,7 +8,7 @@ import {
   IFieldLabelProps,
   type IFieldRootProps,
 } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import { cn, useFormControlContext } from '@cdx-ui/utils';
 import { Icon } from '../Icon';
 import { BaseFieldLabel } from './FieldLabel';
 import {
@@ -70,7 +70,14 @@ export interface FieldLabelProps extends IFieldLabelProps, FieldLabelVariantProp
 
 const FieldLabel = forwardRef<View, FieldLabelProps>(
   ({ className, children, style, htmlFor, ...props }, ref) => {
-    const labelClassName = cn(fieldLabelVariants(), className);
+    const { isLabelFocused, isInvalid } = useFormControlContext();
+    // Native: inject text-content-action via context (group-has CSS handles web).
+    // native: prefix keeps this class inert on web so it never conflicts with text-content-primary.
+    const labelClassName = cn(
+      fieldLabelVariants(),
+      isLabelFocused && !isInvalid && 'native:text-content-action',
+      className,
+    );
 
     return (
       <FieldPrimitive.Label
@@ -79,7 +86,7 @@ const FieldLabel = forwardRef<View, FieldLabelProps>(
         style={style}
         htmlFor={htmlFor}
         requiredIndicator={
-          <Text className="text-red-500" aria-hidden>
+          <Text className="text-content-danger" aria-hidden>
             {' *'}
           </Text>
         }

package/src/components/Field/styles.ts

@@ -1,23 +1,24 @@
 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 fieldRootVariants = cva(['group 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,
+  'overflow-hidden',
   'web:cursor-pointer',
+  'web:group-has-[[data-focus=true]]:data-[invalid=false]:text-content-action',
   'data-[invalid=true]:text-content-danger',
 ]);
 
-export const fieldHelperVariants = cva(['flex-row items-center']);
+export const fieldHelperVariants = cva(['flex-row items-center min-h-4']);
 
 export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);
 
-export const fieldErrorVariants = cva(['flex-row items-center gap-1']);
+export const fieldErrorVariants = cva(['flex-row items-center gap-0.5 min-h-4']);
 
 export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);
 

package/src/components/Heading/styles.ts

@@ -5,7 +5,7 @@ export const headingStyle = cva(
   [
     `text-content-primary my-0`,
     Platform.select({
-      web: 'bg-transparent display-inline no-underline',
+      web: 'bg-transparent no-underline',
       default: '',
     }),
   ],

package/src/components/Icon/index.tsx

@@ -1,11 +1,10 @@
 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';
+import type { ForgeIcon, ForgeIconProps } from '@cdx-ui/icons';
 
-export type IconProps = CdxIconProps & {
+export type IconProps = ForgeIconProps & {
   className?: string; // TODO: Why does this need to specified manually?
-  as: CdxIcon;
+  as: ForgeIcon;
 };
 
 function IconImpl({ as: IconComponent, ...props }: IconProps) {
@@ -38,16 +37,16 @@ const StyledIcon = withUniwind(IconImpl, {
  * <Icon as={ArrowRight} className="text-red-500 size-4" />
  * ```
  *
- * @param {CdxIcon} as - The CDX icon component to render.
+ * @param {ForgeIcon} as - The Forge 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.
+ * @param {...ForgeIconProps} ...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)}
+      className={cn('text-content-primary size-5', className)}
       {...props}
     />
   );

package/src/components/IconButton/index.tsx

@@ -6,7 +6,7 @@ import {
   type IButtonProps,
   useButtonContext,
 } from '@cdx-ui/primitives';
-import type { CdxIcon } from '@cdx-ui/icons';
+import type { ForgeIcon } from '@cdx-ui/icons';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
 import {
@@ -24,7 +24,7 @@ const IconButtonPrimitive = createButton({
   Icon: View,
 });
 
-function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; className: string }) {
+function IconButtonGlyph({ as: IconComponent, className }: { as: ForgeIcon; className: string }) {
   const { hover, focus, active, disabled, focusVisible } = useButtonContext();
   return (
     <Icon
@@ -43,8 +43,8 @@ function IconButtonGlyph({ as: IconComponent, className }: { as: CdxIcon; classN
 
 export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
   className?: string;
-  /** CDX icon component to render (icon-only control). */
-  as: CdxIcon;
+  /** Forge icon component to render (icon-only control). */
+  as: ForgeIcon;
   /** Passed through to the underlying `Icon`. */
   iconClassName?: IconProps['className'];
 }
@@ -53,6 +53,7 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
   (
     {
       variant = 'solid',
+      color = 'neutral',
       size = 'default',
       className,
       style,
@@ -63,11 +64,11 @@ const IconButtonRoot = forwardRef<View, IconButtonProps>(
     },
     ref,
   ) => {
-    const rootClassName = cn(iconButtonRootVariants({ variant, size }), className);
+    const rootClassName = cn(iconButtonRootVariants({ variant, color, size }), className);
 
     const glyphClassName = cn(
       iconButtonGlyphVariants({ size }),
-      iconButtonIconColorVariants(),
+      iconButtonIconColorVariants({ variant, color }),
       iconClassName,
     );