@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.13

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