@cdx-ui/primitives 0.0.1-beta.99 → 0.1.0

package/lib/typescript/utils/mapViewPropsToDom.d.ts

@@ -0,0 +1,12 @@
+export interface MapViewPropsToDomOptions {
+    /** Host keys the caller applies itself (e.g. `onFocus` remapped to a DOM handler). */
+    extraOmit?: Iterable<string>;
+}
+/**
+ * Maps RN View/Text props onto DOM-safe attributes for raw HTML hosts.
+ * Strips RN-only props and translates `accessibilityLabel` / `testID` / `nativeID`
+ * to `aria-label` / `data-testid` / `id`. Consumer `dataSet` is omitted here —
+ * flatten and merge it with `mergeDomDataAttributes`.
+ */
+export declare function mapViewPropsToDom(props: object, options?: MapViewPropsToDomOptions): Record<string, unknown>;
+//# sourceMappingURL=mapViewPropsToDom.d.ts.map

package/lib/typescript/utils/mapViewPropsToDom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapViewPropsToDom.d.ts","sourceRoot":"","sources":["../../../src/utils/mapViewPropsToDom.ts"],"names":[],"mappings":"AA+DA,MAAM,WAAW,wBAAwB;IACvC,sFAAsF;IACtF,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,wBAAwB,GACjC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CA+CzB"}

package/package.json

@@ -1,6 +1,12 @@
 {
   "name": "@cdx-ui/primitives",
-  "version": "0.0.1-beta.99",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dfh-candescent-ui/ui-component-framework",
+    "directory": "packages/primitives"
+  },
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -17,7 +23,8 @@
   },
   "files": [
     "lib",
-    "src"
+    "src",
+    "coverage.svg"
   ],
   "react-native-builder-bob": {
     "source": "src",
@@ -58,15 +65,17 @@
     "@react-native-aria/interactions": "^0.2.16",
     "@react-native-aria/radio": "0.2.13",
     "@react-stately/checkbox": "3.7.4",
+    "@react-stately/disclosure": "3.1.1",
     "@react-stately/radio": "3.12.0",
     "@react-stately/toggle": "3.9.4",
-    "@cdx-ui/utils": "0.0.1-beta.99"
+    "@cdx-ui/formatters": "0.1.0",
+    "@cdx-ui/utils": "0.1.0"
   },
   "devDependencies": {
-    "@types/react": "*",
+    "@types/react": "19.1.17",
     "@types/react-dom": "*",
-    "react": "*",
-    "react-dom": "*",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "*",
     "react-native-builder-bob": "*",
     "react-native-web": "*",

package/src/accordion/Accordion.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, useCallback, useMemo } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useDisclosureGroupState } from '@react-stately/disclosure';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { AccordionProvider } from './context';
+import type { AccordionType, IAccordionProps } from './types';
+import { fromExpandedKeys, toExpandedKeys } from './utils';
+
+type WidenedAccordionProps = ViewProps & {
+  asChild?: boolean;
+  className?: string;
+  type?: AccordionType;
+  collapsible?: boolean;
+  isDisabled?: boolean;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[] | undefined) => void;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+};
+
+export type AccordionRootProps = IAccordionProps & {
+  asChild?: boolean;
+  className?: string;
+};
+
+export const AccordionRoot = forwardRef<View, AccordionRootProps>((accordionProps, ref) => {
+  const {
+    asChild,
+    children,
+    className,
+    style,
+    type = 'single',
+    collapsible = true,
+    isDisabled = false,
+    value,
+    defaultValue,
+    onValueChange,
+    ...props
+  } = accordionProps as WidenedAccordionProps;
+  const isValueControlled = Object.prototype.hasOwnProperty.call(accordionProps, 'value');
+  const expandedKeys = useMemo(
+    () => (isValueControlled ? (toExpandedKeys(value) ?? new Set<string>()) : undefined),
+    [isValueControlled, value],
+  );
+  const groupState = useDisclosureGroupState({
+    allowsMultipleExpanded: type === 'multiple',
+    isDisabled,
+    expandedKeys,
+    defaultExpandedKeys: toExpandedKeys(defaultValue),
+    onExpandedChange: onValueChange
+      ? (keys) => {
+          onValueChange(fromExpandedKeys(keys, type));
+        }
+      : undefined,
+  });
+
+  const isItemOpen = useCallback(
+    (itemValue: string) => groupState.expandedKeys.has(itemValue),
+    [groupState.expandedKeys],
+  );
+  const toggleItem = useCallback(
+    (itemValue: string) => groupState.toggleKey(itemValue),
+    [groupState],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      type,
+      collapsible,
+      isDisabled,
+      isItemOpen,
+      toggleItem,
+    }),
+    [type, collapsible, isDisabled, isItemOpen, toggleItem],
+  );
+
+  const Comp = asChild ? Slot : View;
+
+  return (
+    <AccordionProvider value={contextValue}>
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'accordion' }))}
+      >
+        {children}
+      </Comp>
+    </AccordionProvider>
+  );
+});
+
+AccordionRoot.displayName = 'AccordionRoot';

package/src/accordion/AccordionContent.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import {
+  domDataAttributes,
+  mergeDomDataAttributes,
+  type DomDataAttributeValue,
+} from '../utils/domDataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionContentProps } from './types';
+
+export interface AccordionContentRootProps extends IAccordionContentProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const AccordionContentRoot = forwardRef<View, AccordionContentRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const { isOpen, triggerId, contentId } = useAccordionItemContext();
+    const Comp = asChild ? Slot : View;
+
+    if (!isOpen) {
+      return null;
+    }
+
+    const dataAttrValues = {
+      slot: 'accordion-content',
+      state: 'open',
+    };
+
+    if (Platform.OS === 'web' && asChild) {
+      const {
+        dataSet,
+        nativeID: _nativeID,
+        ...domProps
+      } = props as typeof props & {
+        dataSet?: Record<string, DomDataAttributeValue>;
+      };
+      const dataAttrs = mergeDomDataAttributes(
+        domDataAttributes(dataSet ?? {}),
+        domProps,
+        domDataAttributes(dataAttrValues),
+      );
+
+      return (
+        <Slot
+          ref={ref}
+          className={className}
+          style={style}
+          {...domProps}
+          {...dataAttrs}
+          id={contentId}
+          role="region"
+          aria-labelledby={triggerId}
+        >
+          {children}
+        </Slot>
+      );
+    }
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: contentId,
+            role: 'region' as const,
+            'aria-labelledby': triggerId,
+          }
+        : {
+            nativeID: contentId,
+            accessibilityLabelledBy: triggerId,
+            accessibilityRole: 'none' as const,
+          };
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes(dataAttrValues))}
+        {...platformA11yProps}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionContentRoot.displayName = 'AccordionContentRoot';

package/src/accordion/AccordionItem.tsx

@@ -0,0 +1,76 @@
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { AccordionItemProvider, useAccordionContext } from './context';
+import type { IAccordionItemProps } from './types';
+
+export interface AccordionItemRootProps extends IAccordionItemProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const AccordionItemRoot = forwardRef<View, AccordionItemRootProps>(
+  ({ asChild, children, className, style, value, disabled = false, ...props }, ref) => {
+    const {
+      type,
+      collapsible,
+      isDisabled: groupDisabled,
+      isItemOpen,
+      toggleItem,
+    } = useAccordionContext();
+    const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+    const triggerId = `accordion-${reactId}-trigger`;
+    const contentId = `accordion-${reactId}-content`;
+
+    const isOpen = isItemOpen(value);
+    const isDisabled = disabled || groupDisabled;
+
+    const toggle = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single' && !collapsible && isOpen) {
+        return;
+      }
+      toggleItem(value);
+    }, [isDisabled, type, collapsible, isOpen, toggleItem, value]);
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        isOpen,
+        isDisabled,
+        triggerId,
+        contentId,
+        toggle,
+      }),
+      [value, isOpen, isDisabled, triggerId, contentId, toggle],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AccordionItemProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              slot: 'accordion-item',
+              state: isOpen ? 'open' : 'closed',
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </AccordionItemProvider>
+    );
+  },
+);
+
+AccordionItemRoot.displayName = 'AccordionItemRoot';

package/src/accordion/AccordionTrigger.tsx

@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+import { Platform, Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { usePress, useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionTriggerProps } from './types';
+
+export interface AccordionTriggerRootProps extends IAccordionTriggerProps {
+  className?: string;
+}
+
+export const AccordionTriggerRoot = forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  AccordionTriggerRootProps
+>(
+  (
+    {
+      asChild,
+      children,
+      className,
+      style,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isOpen, isDisabled, triggerId, contentId, toggle } = useAccordionItemContext();
+    const { focusProps, isFocused } = useFocus();
+    const { focusProps: focusRingProps, isFocusVisible } = useFocusRing() as {
+      focusProps: { onFocus?: () => void; onBlur?: () => void };
+      isFocusVisible: boolean;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled });
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+
+    const Comp = asChild ? Slot : Pressable;
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: triggerId,
+            role: 'button' as const,
+            'aria-expanded': isOpen,
+            'aria-disabled': isDisabled || undefined,
+            'aria-controls': contentId,
+          }
+        : {
+            nativeID: triggerId,
+            accessibilityRole: 'button' as const,
+            accessibilityState: { expanded: isOpen, disabled: isDisabled },
+            accessibilityControls: contentId,
+          };
+
+    return (
+      <Comp
+        ref={ref}
+        disabled={isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        className={className}
+        style={style}
+        {...props}
+        {...platformA11yProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-trigger',
+            state: isOpen ? 'open' : 'closed',
+            disabled: isDisabled,
+            hover: isHovered,
+            active: isPressed,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+          }),
+        )}
+        onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+        onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+        onPress={composeEventHandlers(onPress, toggle)}
+        onFocus={composeEventHandlers(onFocus, focusProps.onFocus, focusRingProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, focusProps.onBlur, focusRingProps.onBlur)}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionTriggerRoot.displayName = 'AccordionTriggerRoot';

package/src/accordion/context.tsx

@@ -0,0 +1,8 @@
+import { createContext } from '@cdx-ui/utils';
+import type { IAccordionContextValue, IAccordionItemContextValue } from './types';
+
+export const [AccordionProvider, useAccordionContext] =
+  createContext<IAccordionContextValue>('AccordionContext');
+
+export const [AccordionItemProvider, useAccordionItemContext] =
+  createContext<IAccordionItemContextValue>('AccordionItemContext');

package/src/accordion/index.ts

@@ -0,0 +1,23 @@
+export type {
+  IAccordionProps,
+  IAccordionSingleProps,
+  IAccordionMultipleProps,
+  IAccordionItemProps,
+  IAccordionTriggerProps,
+  IAccordionContentProps,
+  IAccordionContextValue,
+  IAccordionItemContextValue,
+  AccordionType,
+} from './types';
+
+export {
+  AccordionProvider,
+  AccordionItemProvider,
+  useAccordionContext,
+  useAccordionItemContext,
+} from './context';
+
+export { AccordionRoot, type AccordionRootProps } from './Accordion';
+export { AccordionItemRoot, type AccordionItemRootProps } from './AccordionItem';
+export { AccordionTriggerRoot, type AccordionTriggerRootProps } from './AccordionTrigger';
+export { AccordionContentRoot, type AccordionContentRootProps } from './AccordionContent';

package/src/accordion/types.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type AccordionType = 'single' | 'multiple';
+
+interface IAccordionBaseProps extends ViewProps {
+  /** Disables expansion for all items. */
+  isDisabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export interface IAccordionSingleProps extends IAccordionBaseProps {
+  /** Single-item expansion mode. @default 'single' */
+  type?: 'single';
+  /** Controlled open item value. */
+  value?: string;
+  /** Initial open item value for uncontrolled usage. */
+  defaultValue?: string;
+  /** Called when the open item changes. */
+  onValueChange?: (value: string | undefined) => void;
+  /** Allows closing the open item. @default true */
+  collapsible?: boolean;
+}
+
+export interface IAccordionMultipleProps extends IAccordionBaseProps {
+  /** Multiple-item expansion mode. */
+  type: 'multiple';
+  /** Controlled open item values. */
+  value?: string[];
+  /** Initial open item values for uncontrolled usage. */
+  defaultValue?: string[];
+  /** Called when the open items change. */
+  onValueChange?: (value: string[]) => void;
+  collapsible?: never;
+}
+
+export type IAccordionProps = IAccordionSingleProps | IAccordionMultipleProps;
+
+export interface IAccordionItemProps extends ViewProps {
+  /** Required stable id within the Accordion. */
+  value: string;
+  disabled?: boolean;
+}
+
+export interface IAccordionTriggerProps extends PressableProps {
+  children?: ReactNode;
+  asChild?: boolean;
+}
+
+export interface IAccordionContentProps extends ViewProps {
+  children?: ReactNode;
+}
+
+export interface IAccordionContextValue {
+  type: AccordionType;
+  collapsible: boolean;
+  isDisabled: boolean;
+  isItemOpen: (value: string) => boolean;
+  toggleItem: (value: string) => void;
+}
+
+export interface IAccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+  isDisabled: boolean;
+  triggerId: string;
+  contentId: string;
+  toggle: () => void;
+}

package/src/accordion/utils.ts

@@ -0,0 +1,22 @@
+import type { AccordionType } from './types';
+
+export function toExpandedKeys(value: string | string[] | undefined): Set<string> | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    return new Set(value);
+  }
+  if (value === '') {
+    return new Set<string>();
+  }
+  return new Set<string>([value]);
+}
+
+export function fromExpandedKeys(
+  keys: Iterable<string | number>,
+  type: AccordionType,
+): string | string[] | undefined {
+  const values = Array.from(keys).map(String);
+  return type === 'single' ? values[0] : values;
+}

package/src/breadcrumbs/BreadcrumbsRoot.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { BreadcrumbsProvider } from './context';
+import type { IBreadcrumbsProps } from './types';
+
+export interface BreadcrumbsRootProps extends IBreadcrumbsProps {
+  asChild?: boolean;
+}
+
+export const BreadcrumbsRoot = forwardRef<ComponentRef<typeof View>, BreadcrumbsRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled = false,
+      isUnderlined = false,
+      color = 'neutral',
+      accessibilityLabel = 'Breadcrumb',
+      ...props
+    },
+    ref,
+  ) => {
+    const contextValue = useMemo(
+      () => ({
+        isDisabled,
+        isUnderlined,
+        color,
+      }),
+      [color, isDisabled, isUnderlined],
+    );
+
+    const Comp = asChild ? Slot : View;
+    const a11yProps =
+      Platform.OS === 'web'
+        ? ({
+            accessibilityRole: 'navigation' as const,
+            'aria-label': accessibilityLabel,
+            'aria-disabled': isDisabled || undefined,
+          } as const)
+        : ({
+            accessibilityLabel,
+          } as const);
+
+    return (
+      <BreadcrumbsProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...a11yProps}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({ slot: 'breadcrumbs', disabled: isDisabled }),
+          )}
+        >
+          {children}
+        </Comp>
+      </BreadcrumbsProvider>
+    );
+  },
+);
+
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';

package/src/breadcrumbs/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { BreadcrumbsContextValue } from './types';
+
+export const [BreadcrumbsProvider, useBreadcrumbsContext] =
+  createContext<BreadcrumbsContextValue>('BreadcrumbsContext');

package/src/breadcrumbs/index.ts

@@ -0,0 +1,8 @@
+export { BreadcrumbsRoot, type BreadcrumbsRootProps } from './BreadcrumbsRoot';
+export { useBreadcrumbsContext } from './context';
+export {
+  breadcrumbColorOptions,
+  type BreadcrumbColor,
+  type BreadcrumbsContextValue,
+  type IBreadcrumbsProps,
+} from './types';

package/src/breadcrumbs/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ViewProps } from 'react-native';
+
+export const breadcrumbColorOptions = [
+  'neutral',
+  'action',
+  'danger',
+  'warning',
+  'success',
+  'info',
+] as const;
+
+export type BreadcrumbColor = (typeof breadcrumbColorOptions)[number];
+
+export interface IBreadcrumbsProps extends ViewProps {
+  readonly isDisabled?: boolean;
+  readonly isUnderlined?: boolean;
+  readonly color?: BreadcrumbColor;
+  /**
+   * Accessible name for the breadcrumb navigation landmark.
+   * @default `Breadcrumb`
+   */
+  readonly accessibilityLabel?: string;
+  readonly children?: ReactNode;
+}
+
+export interface BreadcrumbsContextValue {
+  readonly isDisabled: boolean;
+  readonly isUnderlined: boolean;
+  readonly color: BreadcrumbColor;
+}