@cdx-ui/primitives 0.0.1-beta.4 → 0.0.1-beta.40

package/src/tile/createTileIndicator.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useTileContext } from './context';
+import type { ITileIndicatorProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const, pointerEvents: 'none' as const };
+
+export const createTileIndicator = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      { children, style, indicatorType, ...props }: ITileIndicatorProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const { isSelected, isDisabled, selectionType } = useTileContext();
+
+      // Effective visual type: explicit prop wins; otherwise infer from group/standalone context.
+      const effectiveType: 'radio' | 'checkbox' =
+        indicatorType ?? (selectionType === 'single' ? 'radio' : 'checkbox');
+
+      return (
+        <Base
+          {...(props as T)}
+          accessibilityElementsHidden
+          aria-hidden
+          {...dataAttributes({
+            slot: 'tile-indicator',
+            checked: isSelected,
+            selectionType: effectiveType === 'radio' ? 'single' : 'multiple',
+            disabled: isDisabled,
+          })}
+          ref={ref as React.Ref<T>}
+          style={[shrinkZero, style]}
+        >
+          {children}
+        </Base>
+      );
+    },
+  );

package/src/tile/createTileLeadingSlot.tsx

@@ -0,0 +1,30 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileLeadingSlotProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const };
+
+export const createTileLeadingSlot = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      { 'aria-hidden': ariaHidden, style, children, ...props }: ITileLeadingSlotProps,
+      ref: React.Ref<unknown>,
+    ) => {
+      const accessibilityElementsHidden = ariaHidden !== false;
+
+      return (
+        <Base
+          {...(props as T)}
+          {...dataAttributes({
+            slot: 'tile-leading',
+          })}
+          accessibilityElementsHidden={accessibilityElementsHidden}
+          aria-hidden={ariaHidden}
+          ref={ref as React.Ref<T>}
+          style={[shrinkZero, style]}
+        >
+          {children}
+        </Base>
+      );
+    },
+  );

package/src/tile/createTileRoot.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef, useMemo } from 'react';
+import { composeEventHandlers, mergeRefs, useControllableState } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { TileProvider, useOptionalTileGroupContext } from './context';
+import type { ITileProps, ITilePressablePassthrough } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignSelf: 'stretch' as const,
+  alignItems: 'center' as const,
+};
+
+export const createTileRoot = <T,>(BasePressable: React.ComponentType<T>) =>
+  forwardRef((props: ITileProps, ref: React.Ref<unknown>) => {
+    const {
+      value,
+      disabled: disabledProp = false,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      /** Consumed by styled `withStyleContext` root. */
+      context: _styleContext,
+      ...rest
+    } = props;
+
+    const group = useOptionalTileGroupContext();
+
+    // Standalone selection state — only meaningful when no group owns selection.
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const disabledByGroup = group ? group.isTileDisabledByGroup(value) : false;
+    const isDisabled = disabledByGroup || disabledProp;
+    const cannotToggle = isDisabled;
+
+    const { focusProps, isFocused } = useFocus();
+    const { pressProps, isPressed } = usePress({ isDisabled: cannotToggle });
+    const { hoverProps, isHovered } = useHover();
+
+    // Standalone tiles use checkbox semantics (independent on/off toggle).
+    const selectionType = group ? group.type : 'multiple';
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single' ? { selected: isSelected } : { checked: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const tileContext = useMemo(
+      () => ({ value, isSelected, isDisabled, selectionType }),
+      [value, isSelected, isDisabled, selectionType],
+    );
+
+    const passthrough = rest as ITilePressablePassthrough;
+
+    const composedOnPress = composeEventHandlers(onPress, () => {
+      if (cannotToggle) {
+        return;
+      }
+      if (group) {
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    });
+
+    const sharedHandlers = {
+      onPress: isDisabled ? undefined : composedOnPress,
+      onPressIn: composeEventHandlers(passthrough.onPressIn, pressProps.onPressIn),
+      onPressOut: composeEventHandlers(passthrough.onPressOut, pressProps.onPressOut),
+      onHoverIn: composeEventHandlers(passthrough.onHoverIn, hoverProps.onHoverIn),
+      onHoverOut: composeEventHandlers(passthrough.onHoverOut, hoverProps.onHoverOut),
+      onFocus: composeEventHandlers(onFocus, focusProps.onFocus),
+      onBlur: composeEventHandlers(onBlur, focusProps.onBlur),
+    } as const;
+
+    const role = selectionType === 'single' ? 'radio' : 'checkbox';
+
+    const sharedAttrs = {
+      accessibilityRole: role,
+      role,
+      accessibilityState,
+      'aria-checked': isSelected,
+      ...(isDisabled ? { 'aria-disabled': true as const } : {}),
+      ...dataAttributes({
+        slot: 'tile',
+        state: isSelected ? 'selected' : 'unselected',
+        disabled: isDisabled,
+        active: isPressed,
+        hover: isHovered,
+        focused: isFocused,
+      }),
+    };
+
+    return (
+      <TileProvider value={tileContext}>
+        <BasePressable
+          {...(rest as T)}
+          context={_styleContext}
+          ref={mergeRefs(ref) as React.Ref<T>}
+          {...sharedAttrs}
+          {...sharedHandlers}
+          style={[rowStyle, style]}
+        >
+          {children}
+        </BasePressable>
+      </TileProvider>
+    );
+  });

package/src/tile/createTileTitle.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileTitleProps } from './types';
+
+const noUnderline = { textDecorationLine: 'none' as const };
+
+export const createTileTitle = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: ITileTitleProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'tile-title',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[noUnderline, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/tile/createTileTrailingSlot.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+import { dataAttributes } from '../utils/dataAttributes';
+import type { ITileTrailingSlotProps } from './types';
+
+const shrinkZero = { flexShrink: 0 as const };
+
+/**
+ * Generic trailing content (chevron, amount, chip, status). Distinct from `Tile.Indicator`,
+ * which is purpose-built for the radio/checkbox selection affordance.
+ *
+ * Trailing content is meaningful by default (`aria-hidden` falsy), unlike the indicator.
+ */
+export const createTileTrailingSlot = <T,>(Base: React.ComponentType<T>) =>
+  forwardRef(({ children, style, ...props }: ITileTrailingSlotProps, ref: React.Ref<unknown>) => (
+    <Base
+      {...(props as T)}
+      {...dataAttributes({
+        slot: 'tile-trailing',
+      })}
+      ref={ref as React.Ref<T>}
+      style={[shrinkZero, style]}
+    >
+      {children}
+    </Base>
+  ));

package/src/tile/index.ts

@@ -0,0 +1,88 @@
+import type React from 'react';
+import { createTileContent } from './createTileContent';
+import { createTileDescription } from './createTileDescription';
+import { createTileGroup } from './createTileGroup';
+import { createTileIndicator } from './createTileIndicator';
+import { createTileLeadingSlot } from './createTileLeadingSlot';
+import { createTileRoot } from './createTileRoot';
+import { createTileTitle } from './createTileTitle';
+import { createTileTrailingSlot } from './createTileTrailingSlot';
+import type { ITileComponentType } from './types';
+
+export type {
+  ITileComponentType,
+  ITileContentProps,
+  ITileContextValue,
+  ITileDescriptionProps,
+  ITileGroupMultipleProps,
+  ITileGroupProps,
+  ITileGroupSingleProps,
+  ITileGroupContextValue,
+  ITileIndicatorProps,
+  ITileLeadingSlotProps,
+  ITilePressablePassthrough,
+  ITileProps,
+  ITileTitleProps,
+  ITileTrailingSlotProps,
+  TileGroupType,
+  TileGroupValue,
+} from './types';
+
+export { TileProvider, useTileContext } from './context';
+
+export function createTile<
+  Pressable,
+  Leading,
+  Content,
+  Title,
+  Description,
+  Indicator,
+  TrailingSlot,
+  Group,
+>(BaseComponents: {
+  Pressable: React.ComponentType<Pressable>;
+  LeadingSlot: React.ComponentType<Leading>;
+  Content: React.ComponentType<Content>;
+  Title: React.ComponentType<Title>;
+  Description: React.ComponentType<Description>;
+  Indicator: React.ComponentType<Indicator>;
+  TrailingSlot: React.ComponentType<TrailingSlot>;
+  Group: React.ComponentType<Group>;
+}) {
+  const Tile = createTileRoot(BaseComponents.Pressable);
+  const Group = createTileGroup(BaseComponents.Group);
+  const LeadingSlot = createTileLeadingSlot(BaseComponents.LeadingSlot);
+  const Content = createTileContent(BaseComponents.Content);
+  const Title = createTileTitle(BaseComponents.Title);
+  const Description = createTileDescription(BaseComponents.Description);
+  const Indicator = createTileIndicator(BaseComponents.Indicator);
+  const TrailingSlot = createTileTrailingSlot(BaseComponents.TrailingSlot);
+
+  Tile.displayName = 'TilePrimitive';
+  Group.displayName = 'TilePrimitive.Group';
+  LeadingSlot.displayName = 'TilePrimitive.LeadingSlot';
+  Content.displayName = 'TilePrimitive.Content';
+  Title.displayName = 'TilePrimitive.Title';
+  Description.displayName = 'TilePrimitive.Description';
+  Indicator.displayName = 'TilePrimitive.Indicator';
+  TrailingSlot.displayName = 'TilePrimitive.TrailingSlot';
+
+  return Object.assign(Tile, {
+    Group,
+    LeadingSlot,
+    Content,
+    Title,
+    Description,
+    Indicator,
+    TrailingSlot,
+  }) as ITileComponentType<
+    Pressable,
+    Leading,
+    Content,
+    Title,
+    Description,
+    Indicator,
+    TrailingSlot,
+    Group
+  >;
+}

package/src/tile/types.ts

@@ -0,0 +1,153 @@
+import type { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+import type { WithStyleContextProps } from '@cdx-ui/utils';
+
+export type TileGroupType = 'single' | 'multiple';
+
+export type TileGroupValue = string | string[] | undefined;
+
+interface ITileGroupBaseProps extends ViewProps, WithStyleContextProps {
+  /** Disables the whole group. */
+  isDisabled?: boolean;
+  /** Accessible name for the group (radiogroup / group). */
+  'aria-label'?: string;
+}
+
+export interface ITileGroupSingleProps extends ITileGroupBaseProps {
+  /** Single-select (radio semantics). One value at a time. */
+  type: 'single';
+  /** Controlled selected value. */
+  value?: string;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Called when selection changes. */
+  onValueChange?: (value: string) => void;
+}
+
+export interface ITileGroupMultipleProps extends ITileGroupBaseProps {
+  /** Multi-select (checkbox semantics). Zero to `max` values at a time. */
+  type: 'multiple';
+  /** Controlled selected values. */
+  value?: string[];
+  /** Uncontrolled initial values. */
+  defaultValue?: string[];
+  /** Called when selection changes. */
+  onValueChange?: (value: string[]) => void;
+  /** Maximum selections allowed. @default Infinity */
+  max?: number;
+}
+
+/**
+ * Discriminated union: `type` narrows `value` / `defaultValue` / `onValueChange`,
+ * and `max` is only valid on `type="multiple"`.
+ */
+export type ITileGroupProps = ITileGroupSingleProps | ITileGroupMultipleProps;
+
+export interface ITileGroupContextValue {
+  type: TileGroupType;
+  /** Current selection (string for single, array for multiple). */
+  value: string | string[] | undefined;
+  toggleValue: (tileValue: string) => void;
+  isSelected: (tileValue: string) => boolean;
+  /** Group-level disabled or multi-select at max (unselected tiles). */
+  isTileDisabledByGroup: (tileValue: string) => boolean;
+  isGroupDisabled: boolean;
+  max: number;
+}
+
+export interface ITileContextValue {
+  /** This tile's `value`. */
+  value: string;
+  isSelected: boolean;
+  /** Effective disabled (group rules + tile `disabled`). */
+  isDisabled: boolean;
+  selectionType: TileGroupType;
+}
+
+export type ITilePressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface ITileProps
+  extends PressableProps, ITilePressablePassthrough, WithStyleContextProps {
+  /**
+   * Identifies this tile within `Tile.Group`. Must be unique within the group.
+   * Standalone tiles still require a value (useful for form submission, analytics, etc.).
+   */
+  value: string;
+  /**
+   * Disables this tile (in addition to group rules such as multi-select max).
+   */
+  disabled?: boolean;
+  /**
+   * Controlled selected state for **standalone** usage (no parent `Tile.Group`).
+   * Ignored when the tile is rendered inside a `Tile.Group` — selection is owned by the group.
+   */
+  isSelected?: boolean;
+  /**
+   * Initial selected state for **standalone**, uncontrolled usage.
+   */
+  defaultSelected?: boolean;
+  /**
+   * Called when standalone selection state changes. Group context overrides this — when inside
+   * a `Tile.Group`, use the group's `onValueChange` instead.
+   */
+  onSelectedChange?: (isSelected: boolean) => void;
+}
+
+export interface ITileLeadingSlotProps extends ViewProps {
+  /**
+   * Leading content is decorative by default for screen readers.
+   * @default true
+   */
+  'aria-hidden'?: boolean;
+}
+
+export type ITileContentProps = ViewProps;
+export type ITileTitleProps = TextProps;
+export type ITileDescriptionProps = TextProps;
+export interface ITileIndicatorProps extends ViewProps {
+  /**
+   * Explicit indicator visual. When inside a `Tile.Group`, auto-infers from `type`
+   * (`single` → radio, `multiple` → checkbox). For standalone tiles, defaults to `'checkbox'`
+   * to match the standalone `checkbox` ARIA role; override with `indicatorType="radio"` if
+   * a radio-style visual is needed.
+   */
+  indicatorType?: 'radio' | 'checkbox';
+  children?: ReactNode;
+}
+
+/**
+ * Generic trailing content slot. Use for chevrons, amounts, chips, status text — anything that
+ * is **not** the radio/checkbox selection affordance. For that, use `Tile.Indicator`.
+ */
+export type ITileTrailingSlotProps = ViewProps;
+
+export type ITileComponentType<
+  RootRef,
+  LeadingSlot,
+  Content,
+  Title,
+  Description,
+  Indicator,
+  TrailingSlot,
+  Group,
+> = ForwardRefExoticComponent<RefAttributes<RootRef> & ITileProps> & {
+  Group: ForwardRefExoticComponent<RefAttributes<Group> & PropsWithoutRef<Group> & ITileGroupProps>;
+  LeadingSlot: ForwardRefExoticComponent<
+    RefAttributes<LeadingSlot> & PropsWithoutRef<LeadingSlot> & ITileLeadingSlotProps
+  >;
+  Content: ForwardRefExoticComponent<
+    RefAttributes<Content> & PropsWithoutRef<Content> & ITileContentProps
+  >;
+  Title: ForwardRefExoticComponent<RefAttributes<Title> & PropsWithoutRef<Title> & ITileTitleProps>;
+  Description: ForwardRefExoticComponent<
+    RefAttributes<Description> & PropsWithoutRef<Description> & ITileDescriptionProps
+  >;
+  Indicator: ForwardRefExoticComponent<
+    RefAttributes<Indicator> & PropsWithoutRef<Indicator> & ITileIndicatorProps
+  >;
+  TrailingSlot: ForwardRefExoticComponent<
+    RefAttributes<TrailingSlot> & PropsWithoutRef<TrailingSlot> & ITileTrailingSlotProps
+  >;
+};