@cdx-ui/primitives 0.0.1-beta.1 → 0.0.1-beta.100

package/src/tile/TileGroup.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { TileGroupContextProvider } from './context';
+import type { ITileGroupProps, TileGroupType } from './types';
+
+/**
+ * Internal widening of the public discriminated union: the runtime accepts any value
+ * shape and reads `type` to decide branch behavior. The public API stays narrow.
+ */
+type WidenedTileGroupProps = ViewProps & {
+  asChild?: boolean;
+  type: TileGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  max?: number;
+  isDisabled?: boolean;
+  'aria-label'?: string;
+};
+
+export type TileGroupProps = ITileGroupProps;
+
+export const TileGroup = forwardRef<ComponentRef<typeof View>, TileGroupProps>((props, ref) => {
+  const {
+    asChild = false,
+    children,
+    type,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    max: maxProp,
+    isDisabled = false,
+    'aria-label': ariaLabel,
+    ...rest
+  } = props as WidenedTileGroupProps;
+
+  const max = maxProp ?? Number.POSITIVE_INFINITY;
+
+  const defaultProp =
+    defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+  const [state, setState] = useControllableState<string | string[] | undefined>({
+    prop: valueProp,
+    defaultProp,
+    onChange: (next) => {
+      if (next !== undefined) {
+        onValueChange?.(next);
+      }
+    },
+  });
+
+  const isSelected = useCallback(
+    (tileValue: string) => {
+      if (type === 'single') {
+        return state === tileValue;
+      }
+      return Array.isArray(state) && state.includes(tileValue);
+    },
+    [type, state],
+  );
+
+  const isTileDisabledByGroup = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return true;
+      }
+      if (type !== 'multiple') {
+        return false;
+      }
+      const arr = Array.isArray(state) ? state : [];
+      if (arr.length < max) {
+        return false;
+      }
+      return !arr.includes(tileValue);
+    },
+    [isDisabled, type, state, max],
+  );
+
+  const toggleValue = useCallback(
+    (tileValue: string) => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single') {
+        if (state === tileValue) {
+          return;
+        }
+        setState(tileValue);
+        return;
+      }
+      const arr = Array.isArray(state) ? [...state] : [];
+      const idx = arr.indexOf(tileValue);
+      if (idx >= 0) {
+        arr.splice(idx, 1);
+        setState(arr);
+      } else if (arr.length < max) {
+        arr.push(tileValue);
+        setState(arr);
+      }
+    },
+    [isDisabled, type, state, setState, max],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      value: state,
+      toggleValue,
+      isSelected,
+      isTileDisabledByGroup,
+      isGroupDisabled: isDisabled,
+      max,
+    }),
+    [type, state, toggleValue, isSelected, isTileDisabledByGroup, isDisabled, max],
+  );
+
+  const role = type === 'single' ? 'radiogroup' : 'group';
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <TileGroupContextProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        role={role}
+        {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+        {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+        {...(rest as ViewProps)}
+      >
+        {children}
+      </Comp>
+    </TileGroupContextProvider>
+  );
+});
+
+TileGroup.displayName = 'TileGroup';

package/src/tile/TileRoot.tsx

@@ -0,0 +1,137 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } 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 interface TileRootProps extends ITileProps {}
+
+export const TileRoot = forwardRef<ComponentRef<typeof Pressable>, TileRootProps>(
+  (
+    {
+      asChild = false,
+      value,
+      disabled: disabledProp = false,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useOptionalTileGroupContext();
+
+    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 { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    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 role = selectionType === 'single' ? 'radio' : 'checkbox';
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <TileProvider value={tileContext}>
+        <Comp
+          ref={ref}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          aria-checked={isSelected}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              state: isSelected ? 'selected' : 'unselected',
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+            }),
+          )}
+          style={[rowStyle, style]}
+          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(
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </TileProvider>
+    );
+  },
+);
+
+TileRoot.displayName = 'TileRoot';

package/src/tile/context.tsx

@@ -0,0 +1,23 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ITileContextValue, ITileGroupContextValue } from './types';
+
+// Per-tile subtree (selection-aware slots, indicator, etc.)
+export const [TileProvider, useTileContext] = createContext<ITileContextValue>('TileContext');
+
+// Per-group subtree (optional — standalone tiles have no provider)
+const TileGroupContext = createReactContext<ITileGroupContextValue | null>(null);
+
+export const TileGroupContextProvider = TileGroupContext.Provider;
+
+export function useTileGroupContext(): ITileGroupContextValue {
+  const ctx = useContext(TileGroupContext);
+  if (!ctx) {
+    throw new Error('Tile must be used within Tile.Group');
+  }
+  return ctx;
+}
+
+export function useOptionalTileGroupContext(): ITileGroupContextValue | null {
+  return useContext(TileGroupContext);
+}

package/src/tile/index.ts

@@ -0,0 +1,18 @@
+export type {
+  ITileContextValue,
+  ITileGroupMultipleProps,
+  ITileGroupProps,
+  ITileGroupSingleProps,
+  ITileGroupContextValue,
+  ITileIndicatorProps,
+  ITileLeadingSlotProps,
+  ITilePressablePassthrough,
+  ITileProps,
+  ITileTrailingSlotProps,
+  TileGroupType,
+  TileGroupValue,
+} from './types';
+
+export { TileProvider, useTileContext } from './context';
+export { TileRoot, type TileRootProps } from './TileRoot';
+export { TileGroup, type TileGroupProps } from './TileGroup';

package/src/tile/types.ts

@@ -0,0 +1,121 @@
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type TileGroupType = 'single' | 'multiple';
+
+export type TileGroupValue = string | string[] | undefined;
+
+interface ITileGroupBaseProps extends ViewProps {
+  /** Merge group props onto a single child instead of rendering the default View. */
+  asChild?: boolean;
+  /** 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 {
+  /** Merge tile props onto a single child instead of rendering the default Pressable. */
+  asChild?: boolean;
+  /**
+   * 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 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';
+}
+
+/**
+ * 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;

package/src/toast/ToastRoot.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, useId } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { ToastProvider } from './context';
+import type { IToastProps } from './types';
+
+export interface ToastRootProps extends IToastProps {
+  asChild?: boolean;
+}
+
+export const ToastRoot = forwardRef<View, ToastRootProps>(
+  ({ asChild, id, role = 'status', ...viewProps }, ref) => {
+    const generatedId = useId();
+    const nativeID = id || generatedId;
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ToastProvider value={{ nativeID }}>
+        <Comp
+          ref={ref}
+          role={role}
+          {...(Platform.OS !== 'web' && {
+            'aria-live': role === 'alert' ? 'assertive' : 'polite',
+            'aria-atomic': true,
+          })}
+          {...(Platform.OS === 'web' &&
+            role === 'alert' && {
+              'aria-live': 'assertive',
+            })}
+          nativeID={nativeID}
+          {...viewProps}
+        />
+      </ToastProvider>
+    );
+  },
+);
+
+ToastRoot.displayName = 'ToastRoot';

package/src/toast/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IToastContextValue } from './types';
+
+export const [ToastProvider, useToastContext] = createContext<IToastContextValue>('ToastContext');

package/src/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToastContext } from './context';
+export { ToastRoot, type ToastRootProps } from './ToastRoot';

package/src/toast/types.ts

@@ -0,0 +1,17 @@
+import type { ViewProps } from 'react-native';
+
+export interface IToastContextValue {
+  /** Unique identifier for the toast */
+  nativeID: string;
+}
+
+export interface IToastProps extends ViewProps {
+  /** Unique identifier for the toast */
+  id?: string;
+  /**
+   * ARIA role for the toast element.
+   * Use `'alert'` for urgent/danger toasts that require assertive announcements.
+   * @default 'status'
+   */
+  role?: 'status' | 'alert';
+}

package/src/uniwind.d.ts

@@ -1,3 +1,4 @@
 declare module 'uniwind' {
   export function useCSSVariable(name: string): string | number | undefined;
+  export function useCSSVariable(names: readonly string[]): (string | number | undefined)[];
 }

package/src/utils/dataAttributes.ts

@@ -1,28 +1,10 @@
 /**
- * Produces platform-specific props for data attributes.
+ * Produces `data-*` props for native platforms (consumed by Uniwind).
+ * Web (.web.ts): returns a `dataSet` object consumed by React Native Web instead.
  *
- * Native: individual `data-*` props consumed by Uniwind.
- * Web (.web.ts): a `dataSet` object consumed by React Native Web.
- *
- * Boolean values serialize to `"true"` / `"false"` strings.
- * String values pass through as-is.
- * Undefined values are omitted.
+ * Delegates to `domDataAttributes` so the conversion logic has a single source of truth.
  */
-
-type DataAttributeValue = boolean | string | undefined;
-
-function camelToKebab(str: string): string {
-  return str.replaceAll(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
-}
-
-export function dataAttributes(attrs: Record<string, DataAttributeValue>): Record<string, string> {
-  const result: Record<string, string> = {};
-  for (const key in attrs) {
-    const value = attrs[key];
-    if (value === undefined) {
-      continue;
-    }
-    result[`data-${camelToKebab(key)}`] = typeof value === 'boolean' ? String(value) : value;
-  }
-  return result;
-}
+export {
+  domDataAttributes as dataAttributes,
+  mergeDomDataAttributes as mergeDataAttributes,
+} from './domDataAttributes';

package/src/utils/dataAttributes.web.ts

@@ -22,3 +22,27 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   }
   return { dataSet };
 }
+
+/**
+ * Merges multiple sources of data attributes into a single `{ dataSet }` prop
+ * on web. Each source may be a `dataAttributes()` output (`{ dataSet: {...} }`)
+ * or any props object that contains a `dataSet` key — other keys are ignored.
+ * Later sources override earlier sources on inner-key conflicts.
+ *
+ * Required when an element receives data attributes from more than one source:
+ * a plain prop spread merges by replacing the `dataSet` key entirely, so e.g.
+ * `{...dataAttributes({ slot })} {...dataAttributes({ hover })}` keeps only the
+ * second `dataSet`. Use `mergeDataAttributes(...)` to combine them safely.
+ */
+export function mergeDataAttributes(
+  ...sources: ({ dataSet?: Record<string, unknown> } | Record<string, unknown> | undefined)[]
+): { dataSet: Record<string, unknown> } {
+  const dataSet: Record<string, unknown> = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const sourceDataSet = (source as { dataSet?: Record<string, unknown> }).dataSet;
+    if (!sourceDataSet) continue;
+    Object.assign(dataSet, sourceDataSet);
+  }
+  return { dataSet };
+}

package/src/utils/domDataAttributes.ts

@@ -0,0 +1,63 @@
+/**
+ * Produces `data-*` DOM attribute props for use on raw HTML elements (e.g. `<button>`).
+ *
+ * Unlike `dataAttributes`, which has a platform-specific `.web.ts` sibling that returns a
+ * `dataSet` object for React Native Web components, this file has no platform variant.
+ * The bundler therefore always resolves to this single implementation, making it safe to
+ * import from `.web.tsx` host components that render native DOM elements directly.
+ *
+ * Boolean values serialize to `"true"` / `"false"` strings.
+ * String values pass through as-is.
+ * Undefined values are omitted.
+ */
+
+export type DomDataAttributeValue = boolean | string | undefined;
+
+function camelToKebab(str: string): string {
+  return str.replaceAll(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+}
+
+export function domDataAttributes(
+  attrs: Record<string, DomDataAttributeValue>,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const key in attrs) {
+    const value = attrs[key];
+    if (value === undefined) {
+      continue;
+    }
+    result[`data-${camelToKebab(key)}`] = typeof value === 'boolean' ? String(value) : value;
+  }
+  return result;
+}
+
+/**
+ * Merges multiple sources of DOM data attributes into a single flat object of
+ * `data-*` keys. Each source can be a `domDataAttributes()` output or any props
+ * object — non-`data-*` keys are ignored. Later sources override earlier sources
+ * on key conflicts.
+ *
+ * Use this when an element receives `data-*` attributes from more than one
+ * source (e.g. a styled layer's `data-slot` and a primitive's interaction-state
+ * `data-hover`/`data-focus` etc.) and a plain prop spread would otherwise be
+ * fine on native but lose attributes on web (where `dataAttributes()` returns
+ * `{ dataSet }` — see the `.web.ts` sibling for the web merge).
+ */
+export function mergeDomDataAttributes(
+  ...sources: (Record<string, unknown> | undefined)[]
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const source of sources) {
+    if (!source) continue;
+    for (const key in source) {
+      if (!key.startsWith('data-')) continue;
+      const value = source[key];
+      if (typeof value === 'boolean') {
+        result[key] = String(value);
+      } else if (typeof value === 'string') {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}

package/lib/commonjs/avatar/createAvatarBadge.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createAvatarBadge = void 0;
-var _react = require("react");
-var _jsxRuntime = require("react/jsx-runtime");
-const createAvatarBadge = BaseBadge => /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  ...props
-}, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseBadge, {
-    ref: ref,
-    ...props,
-    children: children
-  });
-});
-exports.createAvatarBadge = createAvatarBadge;
-//# sourceMappingURL=createAvatarBadge.js.map

package/lib/commonjs/avatar/createAvatarBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_jsxRuntime","createAvatarBadge","BaseBadge","forwardRef","children","props","ref","jsx","exports"],"sourceRoot":"../../../src","sources":["avatar/createAvatarBadge.tsx"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AAAmC,IAAAC,WAAA,GAAAD,OAAA;AAG5B,MAAME,iBAAiB,GAAQC,SAAiC,iBACrE,IAAAC,iBAAU,EAA6B,CAAC;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACtE,oBACE,IAAAN,WAAA,CAAAO,GAAA,EAACL,SAAS;IAACI,GAAG,EAAEA,GAAI;IAAA,GAAMD,KAAK;IAAAD,QAAA,EAC5BA;EAAQ,CACA,CAAC;AAEhB,CAAC,CAAC;AAACI,OAAA,CAAAP,iBAAA,GAAAA,iBAAA","ignoreList":[]}