@cdx-ui/primitives 0.0.1-alpha.10 → 0.0.1-alpha.12

package/src/button/index.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
-import { createButtonRoot } from './createButtonRoot';
 import { createButtonGroup } from './createButtonGroup';
 import { createButtonIcon } from './createButtonIcon';
+import { createButtonRoot } from './createButtonRoot';
 import { createButtonSpinner } from './createButtonSpinner';
 import { createButtonText } from './createButtonText';
 import type { IButtonComponentType } from './types';
@@ -16,32 +16,31 @@ export function createButton<
   IconProps,
   ButtonRef = unknown,
   TextRef = unknown,
->({
-  Root,
-  Text,
-  Group,
-  Spinner,
-  Icon,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<ButtonProps>;
   Text: React.ComponentType<TextProps>;
   Group: React.ComponentType<GroupProps>;
   Spinner: React.ComponentType<SpinnerProps>;
   Icon: React.ComponentType<IconProps>;
 }) {
-  const Button = createButtonRoot(Root) as any;
-  Button.Text = createButtonText(Text);
-  Button.Group = createButtonGroup(Group);
-  Button.Spinner = createButtonSpinner(Spinner);
-  Button.Icon = createButtonIcon(Icon);
+  const Button = createButtonRoot(BaseComponents.Root);
+  const Text = createButtonText(BaseComponents.Text);
+  const Group = createButtonGroup(BaseComponents.Group);
+  const Spinner = createButtonSpinner(BaseComponents.Spinner);
+  const Icon = createButtonIcon(BaseComponents.Icon);
 
-  Button.displayName = 'Button';
-  Button.Text.displayName = 'Button.Text';
-  Button.Group.displayName = 'Button.Group';
-  Button.Spinner.displayName = 'Button.Spinner';
-  Button.Icon.displayName = 'Button.Icon';
+  Button.displayName = 'ButtonPrimitive';
+  Text.displayName = 'ButtonPrimitive.Text';
+  Group.displayName = 'ButtonPrimitive.Group';
+  Spinner.displayName = 'ButtonPrimitive.Spinner';
+  Icon.displayName = 'ButtonPrimitive.Icon';
 
-  return Button as IButtonComponentType<
+  return Object.assign(Button, {
+    Text,
+    Group,
+    Spinner,
+    Icon,
+  }) as IButtonComponentType<
     ButtonProps,
     GroupProps,
     SpinnerProps,

package/src/checkbox/createCheckboxRoot.web.tsx

@@ -6,6 +6,8 @@ import { CheckboxProvider } from './context';
 import type { ICheckboxProps } from './types';
 import { useCheckboxRoot } from './useCheckboxRoot';
 
+// TODO: Label is taking focus on keyboard navigation
+
 export const createCheckboxRoot = <T,>(BaseCheckbox: React.ComponentType<T>) =>
   forwardRef(({ children, ...props }: ICheckboxProps, ref?: React.Ref<T>) => {
     const {

package/src/checkbox/index.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { createCheckboxGroup } from './createCheckboxGroup';
 import { createCheckboxIcon } from './createCheckboxIcon';
 import { createCheckboxIndicator } from './createCheckboxIndicator';
@@ -14,30 +15,29 @@ export type {
   ICheckboxProps,
 } from './types';
 
-export const createCheckbox = <Root, Indicator, Icon, Label, Group>({
-  Root,
-  Indicator,
-  Icon,
-  Label,
-  Group,
-}: {
+export function createCheckbox<Root, Indicator, Icon, Label, Group>(BaseComponents: {
   Root: React.ComponentType<Root>;
   Indicator: React.ComponentType<Indicator>;
   Icon: React.ComponentType<Icon>;
   Label: React.ComponentType<Label>;
   Group: React.ComponentType<Group>;
-}) => {
-  const Checkbox = createCheckboxRoot(Root) as any;
-  Checkbox.Indicator = createCheckboxIndicator(Indicator);
-  Checkbox.Icon = createCheckboxIcon(Icon);
-  Checkbox.Label = createCheckboxLabel(Label);
-  Checkbox.Group = createCheckboxGroup(Group);
+}) {
+  const Checkbox = createCheckboxRoot(BaseComponents.Root);
+  const Indicator = createCheckboxIndicator(BaseComponents.Indicator);
+  const Icon = createCheckboxIcon(BaseComponents.Icon);
+  const Label = createCheckboxLabel(BaseComponents.Label);
+  const Group = createCheckboxGroup(BaseComponents.Group);
 
-  Checkbox.displayName = 'Checkbox';
-  Checkbox.Indicator.displayName = 'Checkbox.Indicator';
-  Checkbox.Icon.displayName = 'Checkbox.Icon';
-  Checkbox.Label.displayName = 'Checkbox.Label';
-  Checkbox.Group.displayName = 'Checkbox.Group';
+  Checkbox.displayName = 'CheckboxPrimitive';
+  Indicator.displayName = 'CheckboxPrimitive.Indicator';
+  Icon.displayName = 'CheckboxPrimitive.Icon';
+  Label.displayName = 'CheckboxPrimitive.Label';
+  Group.displayName = 'CheckboxPrimitive.Group';
 
-  return Checkbox as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
-};
+  return Object.assign(Checkbox, {
+    Indicator,
+    Icon,
+    Label,
+    Group,
+  }) as ICheckboxComponentType<Root, Indicator, Icon, Label, Group>;
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './button';
 export * from './checkbox';
 export * from './input';
+export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';
 export * from './select';
 export * from './switch';

package/src/input/index.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import { createInputField } from './createInputField';
 import { createInputIcon } from './createInputIcon';
 import { createInputRoot } from './createInputRoot';
@@ -12,40 +13,32 @@ export type {
   IInputSlotProps,
 } from './types';
 
-export const createInput = <
+export function createInput<
   RootProps,
   IconProps,
   SlotProps,
   FieldProps,
   RootRef = unknown,
   FieldRef = unknown,
->({
-  Root,
-  Icon,
-  Slot,
-  Field,
-}: {
+>(BaseComponents: {
   Root: React.ComponentType<RootProps>;
   Icon: React.ComponentType<IconProps>;
   Slot: React.ComponentType<SlotProps>;
   Field: React.ComponentType<FieldProps>;
-}) => {
-  const Input = createInputRoot(Root) as any;
-  Input.Icon = createInputIcon(Icon);
-  Input.Slot = createInputSlot(Slot);
-  Input.Field = createInputField(Field);
+}) {
+  const Input = createInputRoot(BaseComponents.Root);
+  const Icon = createInputIcon(BaseComponents.Icon);
+  const Slot = createInputSlot(BaseComponents.Slot);
+  const Field = createInputField(BaseComponents.Field);
 
-  Input.displayName = 'Input';
-  Input.Icon.displayName = 'Input.Icon';
-  Input.Slot.displayName = 'Input.Slot';
-  Input.Field.displayName = 'Input.Field';
+  Input.displayName = 'InputPrimitive';
+  Icon.displayName = 'InputPrimitive.Icon';
+  Slot.displayName = 'InputPrimitive.Slot';
+  Field.displayName = 'InputPrimitive.Field';
 
-  return Input as IInputComponentType<
-    RootProps,
-    IconProps,
-    SlotProps,
-    FieldProps,
-    RootRef,
-    FieldRef
-  >;
-};
+  return Object.assign(Input, {
+    Icon,
+    Slot,
+    Field,
+  }) as IInputComponentType<RootProps, IconProps, SlotProps, FieldProps, RootRef, FieldRef>;
+}

package/src/link/LinkProvider.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { LinkAction } from './types';
+
+export interface LinkConfig {
+  /**
+   * Global navigation handler for `<Link>` instances whose `href` passes the
+   * `shouldNavigate` check. Called with the `href` and the per-instance `action`.
+   *
+   * @param href   - The URL or path to navigate to.
+   * @param action - Navigation intent from the per-instance `action` prop:
+   *                 `'navigate'` (default) — smart navigation, avoids duplicates.
+   *                 `'push'` — always pushes a new entry onto the stack.
+   *                 `'replace'` — replaces the current entry without stacking.
+   */
+  navigate: (href: string, action: LinkAction) => void | Promise<void>;
+
+  /**
+   * Optional predicate evaluated at **render time** to decide whether the
+   * provider should handle a given `href`.
+   *
+   * - Returns `true`  → the provider's `navigate` is called on press;
+   *   on web the native `<a href>` is **removed** so the browser doesn't
+   *   follow the link.
+   * - Returns `false` → the provider is bypassed; on web the `<a href>` is
+   *   preserved (cmd-click, SEO, etc.); on native `Linking.openURL` is used.
+   *
+   * Defaults to `() => true` when omitted (all hrefs go through the provider).
+   */
+  shouldNavigate?: (href: string) => boolean;
+}
+
+const LinkConfigContext = createContext<LinkConfig | undefined>(undefined);
+
+export function LinkProvider({
+  navigate,
+  shouldNavigate,
+  children,
+}: LinkConfig & { children: ReactNode }) {
+  return (
+    <LinkConfigContext.Provider value={{ navigate, shouldNavigate }}>
+      {children}
+    </LinkConfigContext.Provider>
+  );
+}
+
+LinkProvider.displayName = 'LinkProvider';
+
+export function useLinkConfig(): LinkConfig | undefined {
+  return useContext(LinkConfigContext);
+}

package/src/link/createLink.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocusRing, useFocus } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useLink } from './useLink';
+import type { ILinkProps } from './types';
+
+export const createLink = <RootT, R = unknown>({ Root }: { Root: React.ComponentType<RootT> }) =>
+  forwardRef(
+    (
+      {
+        children,
+        isHovered: isHoveredProp,
+        isPressed: isPressedProp,
+        isFocused: isFocusedProp,
+        isFocusVisible: isFocusVisibleProp,
+        href,
+        onPress,
+        action,
+        webProps,
+        ...props
+      }: ILinkProps,
+      ref: React.ForwardedRef<R>,
+    ) => {
+      const { isFocused, focusProps } = useFocus();
+      const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+        isFocusVisible: boolean;
+        focusProps: typeof focusProps;
+      };
+      const { pressProps, isPressed } = usePress({});
+      const { isHovered, hoverProps } = useHover();
+
+      const { linkProps } = useLink({
+        href,
+        onPress,
+        action,
+        webProps,
+      });
+
+      const interactionAttrs = dataAttributes({
+        hover: isHoveredProp || isHovered,
+        focus: isFocusedProp || isFocused,
+        active: isPressedProp || isPressed,
+        focusVisible: isFocusVisibleProp || isFocusVisible,
+      });
+
+      return (
+        <Root
+          ref={ref}
+          {...interactionAttrs}
+          {...linkProps}
+          {...(props as RootT)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(props?.onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(props?.onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Root>
+      );
+    },
+  );

package/src/link/index.tsx

@@ -0,0 +1,5 @@
+export { createLink } from './createLink';
+export { LinkProvider } from './LinkProvider';
+export type { LinkConfig } from './LinkProvider';
+export { useLink } from './useLink';
+export type { ILinkProps, IUseLinkProp, LinkAction } from './types';

package/src/link/types.ts

@@ -0,0 +1,47 @@
+import type React from 'react';
+import type { GestureResponderEvent, PressableProps } from 'react-native';
+
+/**
+ * Navigation action forwarded to the `LinkProvider.navigate` callback.
+ *
+ * - `'navigate'` — (default) Smart navigation. In React Navigation this
+ *    avoids duplicating a screen that is already in the stack. In expo-router
+ *    it maps to `router.navigate()`.
+ * - `'push'`     — Always pushes a new screen onto the navigation stack,
+ *    even if the destination is already present.
+ * - `'replace'`  — Replaces the current screen without adding to the stack.
+ *    Useful for post-login redirects or wizard flows.
+ */
+export type LinkAction = 'navigate' | 'push' | 'replace';
+
+export interface ILinkProps extends PressableProps {
+  /**
+   * URL that should be opened on Link press
+   */
+  href?: string | undefined;
+  /**
+   * Callback that will be invoked on Link press
+   */
+  onPress?: ((event?: GestureResponderEvent) => void) | null | undefined;
+  /**
+   * Navigation action forwarded to the `LinkProvider`.
+   * Defaults to `'navigate'`.
+   */
+  action?: LinkAction;
+  isPressed?: boolean;
+  isHovered?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  /**
+   * HTML anchor attributes applied only on web. Ignored on native platforms.
+   * `target`, `rel`, and `download` are forwarded via react-native-web's `hrefAttrs`.
+   */
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}
+
+export interface IUseLinkProp {
+  href?: string;
+  onPress: ((event?: GestureResponderEvent) => void) | null | undefined;
+  action?: LinkAction;
+  webProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+}

package/src/link/useLink.ts

@@ -0,0 +1,54 @@
+import { Linking, Platform } from 'react-native';
+import type { AccessibilityRole, GestureResponderEvent } from 'react-native';
+import { useLinkConfig } from './LinkProvider';
+import type { IUseLinkProp } from './types';
+
+function defaultNavigate(href: string): void {
+  Linking.canOpenURL(href)
+    .then((supported) => {
+      if (supported) return Linking.openURL(href);
+      console.warn(`Cannot open URL: ${href}`);
+    })
+    .catch((err: unknown) => console.error('Failed to open URL', err));
+}
+
+export function useLink(props: IUseLinkProp) {
+  const { href, onPress, action = 'navigate', webProps } = props;
+  const config = useLinkConfig();
+
+  const providerHandles = !!config && !!href && (config.shouldNavigate?.(href) ?? true);
+
+  let platformLinkProps = {};
+
+  if (Platform.OS === 'web') {
+    platformLinkProps = {
+      href: providerHandles ? undefined : href,
+      hrefAttrs: webProps,
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (providerHandles) void config.navigate(href, action);
+      },
+    };
+  } else {
+    platformLinkProps = {
+      onPress: (event: GestureResponderEvent) => {
+        onPress?.(event);
+        if (href) {
+          if (providerHandles) {
+            void config.navigate(href, action);
+          } else {
+            defaultNavigate(href);
+          }
+        }
+      },
+    };
+  }
+
+  return {
+    linkProps: {
+      ...platformLinkProps,
+      role: 'link' as AccessibilityRole,
+      accessible: true,
+    },
+  };
+}

package/src/select/context.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
-import type { InteractionState, SelectContextValue, SelectItemInteractionState } from './types';
+import type { InteractionState } from '../types';
+import type { SelectContextValue, SelectItemInteractionState } from './types';
 
 const defaultContextValue: SelectContextValue = {
   open: false,

package/src/select/types.ts

@@ -2,7 +2,6 @@ import type { PropsWithoutRef, ReactNode, RefAttributes, RefObject } from 'react
 import type { PressableProps, ViewProps } from 'react-native';
 import type { EntryOrExitLayoutType } from 'react-native-reanimated';
 import type { InteractionState } from '../types';
-export type { InteractionState };
 
 export interface SelectItemInteractionState extends InteractionState {
   highlighted: boolean;

package/src/utils/dataAttributes.web.ts

@@ -17,10 +17,8 @@ export function dataAttributes(attrs: Record<string, DataAttributeValue>): {
   const dataSet: Record<string, boolean | string> = {};
   for (const key in attrs) {
     const value = attrs[key];
-    if (value === undefined) {
-      continue;
-    }
-    dataSet[key] = value;
+
+    dataSet[key] = value ?? false;
   }
   return { dataSet };
 }