@cdx-ui/components 0.0.1-beta.65 → 0.0.1-beta.67

package/src/components/Chip/index.tsx

@@ -1,16 +1,16 @@
 import { forwardRef, useMemo, type ReactNode } from 'react';
-import { Pressable, Text as RNText, View, type TextProps } from 'react-native';
-import { createChip, type IChipProps } from '@cdx-ui/primitives';
+import { Text, View, type TextProps } from 'react-native';
 import {
-  cn,
-  ParentContext,
-  useParentContext,
-  useStyleContext,
-  withStyleContext,
-  type WithStyleContextProps,
-} from '@cdx-ui/utils';
+  ChipRoot as ChipRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  type IChipProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Avatar, type AvatarProps } from '../Avatar';
 import { Icon, type IconProps } from '../Icon';
+import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   chipAvatarVariants,
   chipIconVariants,
@@ -21,65 +21,43 @@ import {
 
 const SCOPE = 'CHIP';
 
-const RootView = withStyleContext(View, SCOPE);
-const RootPressable = withStyleContext(Pressable, SCOPE);
-
-const ChipPrimitive = createChip({
-  View: RootView,
-  Pressable: RootPressable,
-});
-
 const useChipStyleContext = () => useStyleContext(SCOPE) as ChipVariantProps;
 
 // =============================================================================
 // ROOT
 // =============================================================================
 
-export interface ChipProps extends IChipProps, ChipVariantProps, WithStyleContextProps {
+export interface ChipProps extends IChipProps, ChipVariantProps {
   className?: string;
   children?: ReactNode;
 }
 
 const ChipRoot = forwardRef<View, ChipProps>(
   (
-    {
-      children,
-      variant = 'tint',
-      size = 'default',
-      color = 'default',
-      className,
-      style,
-      asChild,
-      ...props
-    },
+    { children, variant = 'tint', size = 'default', color = 'default', className, style, ...props },
     ref,
   ) => {
-    const parentContextValues = useParentContext();
-    const styleContextValues = useMemo(
-      () => ({ ...parentContextValues, [SCOPE]: { variant, size, color } }),
-      [parentContextValues, variant, size, color],
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { variant, size, color } }),
+      [parent, variant, size, color],
     );
 
     const computedClassName = cn(chipRootVariants({ variant, size, color }), className);
 
-    const root = (
-      <ChipPrimitive
-        ref={ref as never}
-        asChild={asChild}
-        className={computedClassName}
-        context={{ variant, size, color }}
-        style={style}
-        {...props}
-      >
-        {children}
-      </ChipPrimitive>
+    return (
+      <ParentContext.Provider value={ctx}>
+        <ChipRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'chip' }))}
+        >
+          {children}
+        </ChipRootPrimitive>
+      </ParentContext.Provider>
     );
-
-    if (asChild) {
-      return <ParentContext.Provider value={styleContextValues}>{root}</ParentContext.Provider>;
-    }
-
-    return root;
   },
 );
 
@@ -90,19 +68,27 @@ ChipRoot.displayName = 'Chip';
 // =============================================================================
 
 export interface ChipLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const ChipLabel = forwardRef<RNText, ChipLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
+const ChipLabel = forwardRef<Text, ChipLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { size, variant, color } = useChipStyleContext();
     const computedClassName = cn(chipLabelVariants({ size, variant, color }), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'chip-label' }))}
+      >
         {children}
-      </RNText>
+      </Comp>
     );
   },
 );
@@ -113,16 +99,57 @@ ChipLabel.displayName = 'Chip.Label';
 // ICON
 // =============================================================================
 
-export interface ChipIconProps extends Omit<IconProps, 'children'> {
-  /** Leading (default) or trailing slot — applies the correct negative margin offset. */
-  slot?: 'leading' | 'trailing';
-  className?: string;
+export interface ChipIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+  /**
+   * Position hint that emits `data-icon="inline-start"` or `data-icon="inline-end"`.
+   * CVA uses this attribute to apply leading/trailing margin offsets logically
+   * (RTL-aware). Omit when the icon is freely positioned within a custom layout.
+   */
+  position?: IconSlotPosition;
 }
 
-const ChipIcon = ({ className, style, as, slot, ...props }: ChipIconProps) => {
+const ChipIcon = ({ asChild, className, style, as, position, ...props }: ChipIconProps) => {
   const { size, color } = useChipStyleContext();
-  const computedClassName = cn(chipIconVariants({ size, color, slot }), className);
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  const computedClassName = cn(chipIconVariants({ size, color }), className);
+
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'chip-icon' }),
+          positionToDataIcon(position),
+        )}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(
+        props,
+        dataAttributes({ slot: 'chip-icon' }),
+        positionToDataIcon(position),
+      )}
+    />
+  );
 };
 
 ChipIcon.displayName = 'Chip.Icon';
@@ -135,7 +162,7 @@ export interface ChipAvatarProps extends Omit<AvatarProps, 'size'> {}
 
 const ChipAvatar = ({ className, style, children, ...props }: ChipAvatarProps) => {
   const { size } = useChipStyleContext();
-  // chipAvatarVariants sets w/h and the leading slot negative margin.
+  // chipAvatarVariants sets w/h and the leading-edge negative margin.
   // Avatar renders with size="sm" (its smallest named size) but chipAvatarVariants
   // overrides the w/h via tailwind-merge so the chip size wins.
   const computedClassName = cn(chipAvatarVariants({ size }), className);

package/src/components/Chip/styles.ts

@@ -219,9 +219,9 @@ export const chipLabelVariants = cva(['font-medium'], {
 export const chipIconVariants = cva(['shrink-0'], {
   variants: {
     size: {
-      default: 'size-5',
-      small: 'size-4',
-      xsmall: 'size-2.5',
+      default: 'size-5 data-[icon=inline-start]:-ms-1.5 data-[icon=inline-end]:-me-1.5',
+      small: 'size-4 data-[icon=inline-start]:-ms-0.5 data-[icon=inline-end]:-me-0.5',
+      xsmall: 'size-2.5 data-[icon=inline-start]:-ms-px data-[icon=inline-end]:-me-px',
     },
     color: {
       default: 'text-content-primary',
@@ -231,19 +231,7 @@ export const chipIconVariants = cva(['shrink-0'], {
       success: 'text-content-success',
       info: 'text-content-info',
     },
-    slot: {
-      leading: '',
-      trailing: '',
-    },
   },
-  compoundVariants: [
-    { slot: 'leading', size: 'default', className: '-ml-1.5' },
-    { slot: 'leading', size: 'small', className: '-ml-0.5' },
-    { slot: 'leading', size: 'xsmall', className: '-ml-px' },
-    { slot: 'trailing', size: 'default', className: '-mr-1.5' },
-    { slot: 'trailing', size: 'small', className: '-mr-0.5' },
-    { slot: 'trailing', size: 'xsmall', className: '-mr-px' },
-  ],
   defaultVariants: {
     size: 'default',
     color: 'default',
@@ -253,9 +241,9 @@ export const chipIconVariants = cva(['shrink-0'], {
 export const chipAvatarVariants = cva(['shrink-0 rounded-full overflow-hidden'], {
   variants: {
     size: {
-      default: 'size-5 -ml-1.5',
-      small: 'size-4 -ml-0.5',
-      xsmall: 'size-2.5 -ml-px',
+      default: 'size-5 -ms-1.5',
+      small: 'size-4 -ms-0.5',
+      xsmall: 'size-2.5 -ms-px',
     },
   },
   defaultVariants: {

package/src/components/Dialog/index.tsx

@@ -1,26 +1,21 @@
-import { forwardRef, type ReactNode } from 'react';
-import {
-  Pressable,
-  Text,
-  View,
-  type PressableProps,
-  type TextProps,
-  type ViewProps,
-} from 'react-native';
+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,
+  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,
@@ -46,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,
-  Popup: View,
-  Header: View,
-  Title: Text,
-  Description: Text,
-  Content: View,
-  Footer: View,
-  Close: Pressable,
-});
-
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -88,17 +53,27 @@ export interface DialogRootProps
 }
 
 const DialogRoot = forwardRef<View, DialogRootProps>(
-  ({ size = 'md', fullBleed = false, className, children, style, ...props }, ref) => (
-    <DialogPrimitive
-      ref={ref}
-      className={className}
-      style={style}
-      context={{ size, fullBleed }}
-      {...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';
@@ -114,16 +89,22 @@ 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 POPUP (wraps DialogPrimitive.Popup)
+// STYLED POPUP
 // =============================================================================
 
 export interface DialogPopupProps extends IDialogPopupProps, Pick<DialogVariantProps, 'size'> {
@@ -136,11 +117,19 @@ const DialogPopup = forwardRef<View, DialogPopupProps>(
     const { size: contextSize } = useDialogStyleContext();
     const size = sizeProp ?? contextSize;
     const computedClassName = cn(dialogPopupVariants({ size }), className);
+    const overlayClassName = cn(dialogOverlayVariants());
 
     return (
-      <DialogPrimitive.Popup 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.Popup>
+      </DialogPopupPrimitive>
     );
   },
 );
@@ -148,22 +137,30 @@ const DialogPopup = forwardRef<View, DialogPopupProps>(
 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>
     );
   },
 );
@@ -171,7 +168,7 @@ const DialogHeader = forwardRef<View, DialogHeaderProps>(
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE
+// STYLED TITLE (styled-only sub-slot with appearance variants)
 // =============================================================================
 
 const APPEARANCE_ICON_MAP = {
@@ -180,57 +177,75 @@ const APPEARANCE_ICON_MAP = {
   success: CheckCircle,
 } as const;
 
-export interface DialogTitleProps extends IDialogTitleProps, DialogTitleVariantProps {
+export interface DialogTitleProps extends TextProps, DialogTitleVariantProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogTitle = forwardRef<Text, DialogTitleProps>(
-  ({ appearance = 'default', className, children, style, ...props }, ref) => {
+  ({ 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}
+      </Comp>
+    );
 
     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>
+          {titleElement}
         </View>
       );
     }
 
-    return (
-      <DialogPrimitive.Title ref={ref} className={computedClassName} style={style} {...props}>
-        {children}
-      </DialogPrimitive.Title>
-    );
+    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>
     );
   },
 );
@@ -238,26 +253,34 @@ const DialogDescription = forwardRef<Text, DialogDescriptionProps>(
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED CONTENT (wraps DialogPrimitive.Content)
+// STYLED CONTENT (styled-only sub-slot — reads variant context for fullBleed)
 // =============================================================================
 
-export interface DialogContentProps extends IDialogContentProps {
+export interface DialogContentProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogContent = forwardRef<View, DialogContentProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const { fullBleed } = useDialogStyleContext();
     const computedClassName = cn(
       dialogContentVariants({ fullBleed: fullBleed ?? false }),
       className,
     );
+    const Comp = asChild ? Slot : View;
 
     return (
-      <DialogPrimitive.Content ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-content' }))}
+      >
         {children}
-      </DialogPrimitive.Content>
+      </Comp>
     );
   },
 );
@@ -265,22 +288,30 @@ const DialogContent = forwardRef<View, DialogContentProps>(
 DialogContent.displayName = 'Dialog.Content';
 
 // =============================================================================
-// STYLED TEXT
+// STYLED TEXT (convenience text styling, styled-only)
 // =============================================================================
 
 export interface DialogTextProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const DialogText = forwardRef<Text, DialogTextProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(dialogTextVariants(), className);
+    const Comp = asChild ? Slot : Text;
 
     return (
-      <Text ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'dialog-text' }))}
+      >
         {children}
-      </Text>
+      </Comp>
     );
   },
 );
@@ -288,22 +319,30 @@ const DialogText = forwardRef<Text, DialogTextProps>(
 DialogText.displayName = 'Dialog.Text';
 
 // =============================================================================
-// STYLED FOOTER
+// STYLED FOOTER (styled-only sub-slot)
 // =============================================================================
 
-export interface DialogFooterProps extends IDialogFooterProps {
+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>
     );
   },
 );
@@ -324,7 +363,7 @@ const DialogClose = forwardRef<View, DialogCloseProps>(
     const computedClassName = cn(dialogCloseVariants(), className);
 
     return (
-      <DialogPrimitive.Close
+      <DialogClosePrimitive
         ref={ref}
         className={computedClassName}
         style={style}
@@ -332,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>
     );
   },
 );