@cdx-ui/components 0.0.1-beta.15 → 0.0.1-beta.150

package/src/components/Tile/index.tsx

@@ -1,19 +1,22 @@
-import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text, View, 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 {
-  createTile,
+  Slot,
+  TileGroup as TileGroupPrimitive,
+  TileRoot as TileRootPrimitive,
+  dataAttributes,
+  mergeDataAttributes,
+  useTileContext,
   type ITileGroupMultipleProps,
   type ITileGroupSingleProps,
   type ITileIndicatorProps,
   type ITileLeadingSlotProps,
   type ITileProps,
   type ITileTrailingSlotProps,
-  useTileContext,
 } from '@cdx-ui/primitives';
 import { Check } from '@cdx-ui/icons';
-import { dataAttributes } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { checkboxIndicatorVariants, checkboxIconVariants } from '../Checkbox/styles';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { checkboxIconVariants, checkboxIndicatorVariants } from '../Checkbox/styles';
 import { Icon } from '../Icon';
 import { radioIndicatorVariants, radioInnerDotVariants } from '../Radio/styles';
 import {
@@ -32,9 +35,6 @@ import {
 const TILE_SCOPE = 'TILE';
 const TILE_GROUP_SCOPE = 'TILE_GROUP';
 
-const RootPressable = withStyleContext(Pressable, TILE_SCOPE);
-const GroupView = withStyleContext(View, TILE_GROUP_SCOPE);
-
 interface TileGroupStyleContext {
   shape?: TileVariantProps['shape'];
 }
@@ -47,17 +47,6 @@ const useTileGroupStyleContext = (): TileGroupStyleContext => {
   return ctx ?? {};
 };
 
-const TilePrimitive = createTile({
-  Pressable: RootPressable,
-  Group: GroupView,
-  LeadingSlot: View,
-  Content: View,
-  Title: Text,
-  Description: Text,
-  Indicator: View,
-  TrailingSlot: View,
-});
-
 // =============================================================================
 // TILE GROUP
 // =============================================================================
@@ -72,7 +61,7 @@ const TilePrimitive = createTile({
  * - `direction="column"` + `spacing="none"` — tight vertical stack (rows touch).
  * - `direction="row"` + `spacing="default"` — side-by-side horizontal layout.
  *
- * `shape` (when set) is propagated to child `Tile`s via `withStyleContext`, matching the
+ * `shape` (when set) is propagated to child `Tile`s via `ParentContext`, matching the
  * Avatar size-propagation pattern. A per-tile `shape` prop overrides the inherited value.
  */
 export interface TileGroupSingleProps extends ITileGroupSingleProps, TileGroupVariantProps {
@@ -88,17 +77,24 @@ export interface TileGroupMultipleProps extends ITileGroupMultipleProps, TileGro
 export type TileGroupProps = TileGroupSingleProps | TileGroupMultipleProps;
 
 const TileGroup = forwardRef<View, TileGroupProps>(
-  ({ className, style, children, direction, spacing, shape, ...props }, ref) => (
-    <TilePrimitive.Group
-      ref={ref as never}
-      className={cn(tileGroupVariants({ direction, spacing }), className)}
-      style={style}
-      context={{ shape }}
-      {...props}
-    >
-      {children}
-    </TilePrimitive.Group>
-  ),
+  ({ className, style, children, direction, spacing, shape, ...props }, ref) => {
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [TILE_GROUP_SCOPE]: { shape } }), [parent, shape]);
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <TileGroupPrimitive
+          ref={ref}
+          className={cn(tileGroupVariants({ direction, spacing }), className)}
+          style={style}
+          {...(props as TileGroupProps)}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-group' }))}
+        >
+          {children}
+        </TileGroupPrimitive>
+      </ParentContext.Provider>
+    );
+  },
 );
 
 TileGroup.displayName = 'Tile.Group';
@@ -112,19 +108,24 @@ export interface TileProps extends ITileProps, TileVariantProps {
 }
 
 const TileRoot = forwardRef<View, TileProps>(
-  ({ shape: shapeProp, showSeparator, className, style, context, ...props }, ref) => {
+  ({ shape: shapeProp, showSeparator, className, style, ...props }, ref) => {
     const { shape: inheritedShape } = useTileGroupStyleContext();
     const shape = shapeProp ?? inheritedShape ?? 'card';
     const computedClassName = cn(tileRootVariants({ shape, showSeparator }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [TILE_SCOPE]: { shape } }), [parent, shape]);
+
     return (
-      <TilePrimitive
-        ref={ref as never}
-        className={computedClassName}
-        context={{ ...context, shape }}
-        style={style}
-        {...props}
-      />
+      <ParentContext.Provider value={ctx}>
+        <TileRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'tile' }))}
+        />
+      </ParentContext.Provider>
     );
   },
 );
@@ -135,69 +136,104 @@ TileRoot.displayName = 'Tile';
 // SLOTS
 // =============================================================================
 
+const leadingSlotStyle = { flexShrink: 0 as const };
+
 export interface TileLeadingSlotProps extends ITileLeadingSlotProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const TileLeadingSlot = forwardRef<View, TileLeadingSlotProps>(
-  ({ className, style, ...props }, ref) => (
-    <TilePrimitive.LeadingSlot
-      ref={ref as never}
-      className={cn(tileLeadingSlotVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ asChild, className, style, 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const accessibilityElementsHidden = ariaHidden !== false;
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden={accessibilityElementsHidden}
+        aria-hidden={ariaHidden ?? true}
+        className={cn(tileLeadingSlotVariants(), className)}
+        style={[leadingSlotStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-leading' }))}
+      />
+    );
+  },
 );
 
 TileLeadingSlot.displayName = 'Tile.LeadingSlot';
 
+const contentStyle = {
+  flex: 1,
+  flexDirection: 'column' as const,
+  minWidth: 0,
+};
+
 export interface TileContentProps extends ViewProps {
+  asChild?: boolean;
   className?: string;
 }
 
-const TileContent = forwardRef<View, TileContentProps>(({ className, style, ...props }, ref) => (
-  <TilePrimitive.Content
-    ref={ref as never}
-    className={cn(tileContentVariants(), className)}
-    style={style}
-    {...props}
-  />
-));
+const TileContent = forwardRef<View, TileContentProps>(
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(tileContentVariants(), className)}
+        style={[contentStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-content' }))}
+      />
+    );
+  },
+);
 
 TileContent.displayName = 'Tile.Content';
 
+const noUnderlineStyle = { textDecorationLine: 'none' as const };
+
 export interface TileTitleProps extends TextProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const TileTitle = forwardRef<Text, TileTitleProps>(
-  ({ className, style, numberOfLines = 1, ...props }, ref) => (
-    <TilePrimitive.Title
-      ref={ref as never}
-      className={cn(tileTitleVariants(), className)}
-      style={style}
-      numberOfLines={numberOfLines}
-      {...props}
-    />
-  ),
+  ({ asChild, className, style, numberOfLines = 1, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(tileTitleVariants(), className)}
+        style={[noUnderlineStyle, style]}
+        numberOfLines={numberOfLines}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-title' }))}
+      />
+    );
+  },
 );
 
 TileTitle.displayName = 'Tile.Title';
 
 export interface TileDescriptionProps extends TextProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const TileDescription = forwardRef<Text, TileDescriptionProps>(
-  ({ className, style, ...props }, ref) => (
-    <TilePrimitive.Description
-      ref={ref as never}
-      className={cn(tileDescriptionVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : Text;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(tileDescriptionVariants(), className)}
+        style={[noUnderlineStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-description' }))}
+      />
+    );
+  },
 );
 
 TileDescription.displayName = 'Tile.Description';
@@ -205,7 +241,7 @@ TileDescription.displayName = 'Tile.Description';
 /**
  * Decorative selection affordance. Renders pure CVA-styled Views — no interactive hooks,
  * no nested Pressable, zero runtime overhead. The Tile root owns the press target and
- * ARIA role; this subtree is `aria-hidden` via `createTileIndicator`.
+ * ARIA role; this subtree is `aria-hidden`.
  *
  * The visual is inferred from the tile context: `single` (radio semantics) → radio ring,
  * `multiple` (checkbox semantics) → checkbox square. An explicit `indicatorType` prop
@@ -235,40 +271,55 @@ function TileIndicatorVisual({ indicatorType }: { indicatorType?: 'radio' | 'che
   );
 }
 
+const indicatorStyle = { flexShrink: 0 as const, pointerEvents: 'none' as const };
+
 export interface TileIndicatorProps extends ITileIndicatorProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const TileIndicator = forwardRef<View, TileIndicatorProps>(
-  ({ className, children, style, indicatorType, ...props }, ref) => (
-    <TilePrimitive.Indicator
-      ref={ref as never}
-      className={cn(tileIndicatorVariants(), className)}
-      style={style}
-      indicatorType={indicatorType}
-      {...props}
-    >
-      {children ?? <TileIndicatorVisual indicatorType={indicatorType} />}
-    </TilePrimitive.Indicator>
-  ),
+  ({ asChild, className, children, style, indicatorType, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        accessibilityElementsHidden
+        aria-hidden
+        className={cn(tileIndicatorVariants(), className)}
+        style={[indicatorStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-indicator' }))}
+      >
+        {children ?? <TileIndicatorVisual indicatorType={indicatorType} />}
+      </Comp>
+    );
+  },
 );
 
 TileIndicator.displayName = 'Tile.Indicator';
 
+const trailingSlotStyle = { flexShrink: 0 as const };
+
 export interface TileTrailingSlotProps extends ITileTrailingSlotProps {
+  asChild?: boolean;
   className?: string;
 }
 
 const TileTrailingSlot = forwardRef<View, TileTrailingSlotProps>(
-  ({ className, style, ...props }, ref) => (
-    <TilePrimitive.TrailingSlot
-      ref={ref as never}
-      className={cn(tileTrailingSlotVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ asChild, className, style, ...props }, ref) => {
+    const Comp = asChild ? Slot : View;
+    return (
+      <Comp
+        ref={ref}
+        className={cn(tileTrailingSlotVariants(), className)}
+        style={[trailingSlotStyle, style]}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'tile-trailing' }))}
+      />
+    );
+  },
 );
 
 TileTrailingSlot.displayName = 'Tile.TrailingSlot';

package/src/components/Tile/styles.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { TRANSITION_COLORS } from '../../styles/primitives';
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { TRANSITION_COLORS } from '../../styles/constants';
 
 export const tileGroupVariants = cva(['flex w-full'], {
   variants: {
@@ -45,7 +45,7 @@ export const tileRootVariants = cva(
       shape: {
         flat: 'rounded-none border-0 bg-transparent',
         card: [
-          'rounded-xl border-1 border-solid',
+          'rounded-[var(--border-radius-default)] border-1 border-solid',
           'border-stroke-secondary',
           'bg-surface-primary',
           'data-[state=selected]:border-stroke-action',