@cdx-ui/components 0.0.1-beta.7 → 0.0.1-beta.70

package/src/components/Input/index.tsx

@@ -1,14 +1,17 @@
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, useMemo, type ReactNode } from 'react';
 import { type TextInput, View, type ViewProps } from 'react-native';
 import {
-  createInput,
+  InputField as InputFieldPrimitive,
+  InputRoot as InputRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
   type IInputFieldProps,
   type IInputProps,
   type IInputSlotProps,
 } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
-import { Icon, IconProps } from '../Icon';
-import { BaseInput } from './BaseInput';
+import { ParentContext, cn, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
 import {
   type InputVariantProps,
   inputFieldPlaceholderVariants,
@@ -20,39 +23,41 @@ import {
 
 const SCOPE = 'INPUT';
 
-const Root = withStyleContext(View, SCOPE);
-
 const useInputStyleContext = () => useStyleContext(SCOPE) as InputVariantProps;
 
-const InputPrimitive = createInput({
-  Root,
-  Slot: View,
-  Field: BaseInput,
-});
-
 // =============================================================================
 // INPUT (ROOT)
 // =============================================================================
 
 export interface InputProps extends ViewProps, IInputFieldProps, InputVariantProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const InputRoot = forwardRef<View, InputProps>(
-  ({ variant = 'outline', size = 'default', className, children, style, ...props }, ref) => {
+  (
+    { asChild, variant = 'outline', size = 'default', className, children, style, ...props },
+    ref,
+  ) => {
     const computedClassName = cn(inputRootVariants({ variant, size }), className);
 
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { variant, size } }), [parent, variant, size]);
+
     return (
-      <InputPrimitive
-        ref={ref}
-        className={computedClassName}
-        style={style}
-        context={{ variant, size }}
-        {...props}
-      >
-        {children}
-      </InputPrimitive>
+      <ParentContext.Provider value={ctx}>
+        <InputRootPrimitive
+          ref={ref}
+          asChild={asChild}
+          className={computedClassName}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'input' }))}
+        >
+          {children}
+        </InputRootPrimitive>
+      </ParentContext.Provider>
     );
   },
 );
@@ -79,12 +84,13 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
     );
 
     return (
-      <InputPrimitive.Field
+      <InputFieldPrimitive
         ref={ref}
         className={computedClassName}
         placeholderTextColorClassName={computedPlaceholderColorClassName}
         style={style}
         {...rest}
+        {...mergeDataAttributes(rest, dataAttributes({ slot: 'input-field' }))}
       />
     );
   },
@@ -93,22 +99,30 @@ const InputField = forwardRef<TextInput, InputFieldProps>(
 InputField.displayName = 'Input.Field';
 
 // =============================================================================
-// INPUT SLOT
+// INPUT SLOT — styled-only (Standard 3: no behavior beyond layout)
 // =============================================================================
 
 export interface InputSlotProps extends ViewProps, IInputSlotProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
 const InputSlot = forwardRef<View, InputSlotProps>(
-  ({ className, children, style, ...props }, ref) => {
+  ({ asChild, className, children, style, ...props }, ref) => {
     const computedClassName = cn(inputSlotVariants(), className);
+    const Comp = asChild ? Slot : View;
 
     return (
-      <InputPrimitive.Slot ref={ref} className={computedClassName} style={style} {...props}>
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-slot' }))}
+      >
         {children}
-      </InputPrimitive.Slot>
+      </Comp>
     );
   },
 );
@@ -119,14 +133,43 @@ InputSlot.displayName = 'Input.Slot';
 // INPUT ICON
 // =============================================================================
 
-export interface InputIconProps extends Omit<IconProps, 'children'> {}
+export interface InputIconProps extends Omit<IconProps, 'children' | 'as'> {
+  asChild?: boolean;
+  /**
+   * Forge icon component to render. Required unless `asChild` is set, in which
+   * case the consumer's substituted element is rendered instead.
+   */
+  as?: IconProps['as'];
+}
 
-const InputIcon = ({ className, style, as, ...props }: InputIconProps) => {
+const InputIcon = ({ asChild, className, style, as, ...props }: InputIconProps) => {
   const { size } = useInputStyleContext();
-
   const computedClassName = cn(inputIconVariants({ size }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  if (asChild) {
+    return (
+      <Slot
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+      />
+    );
+  }
+
+  if (!as) {
+    return null;
+  }
+
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'input-icon' }))}
+    />
+  );
 };
 
 InputIcon.displayName = 'Input.Icon';

package/src/components/Input/styles.ts

@@ -3,13 +3,14 @@ import { DISABLED_CURSOR, TRANSITION_COLORS } from '../../styles/primitives';
 
 export const inputRootVariants = cva(
   [
-    'w-full flex-row items-stretch overflow-hidden',
+    'w-full flex-row items-center overflow-hidden',
     'bg-surface-primary',
-    'border-solid border-[length:var(--border-width-default)] border-stroke-primary',
+    'border-solid border-stroke-primary',
+    'web:border-default native:border-[length:var(--border-width-default)]',
     'rounded-[var(--border-radius-default)]',
     TRANSITION_COLORS,
     'data-[disabled=true]:bg-surface-secondary',
-    'data-[disabled=true]:opacity-[--opacity-disabled]',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)]',
     DISABLED_CURSOR,
     'data-[readonly=true]:cursor-default',
     'data-[readonly=true]:bg-surface-secondary',
@@ -24,11 +25,16 @@ export const inputRootVariants = cva(
         outline: [],
       },
       size: {
-        // TODO: Find a cleaner approach to preventing layout shift when focus border is applied.
-        default: ['h-10 px-4 py-2 gap-2', 'data-[focus=true]:px-[15px] data-[focus=true]:py-[7px]'],
+        default: [
+          'h-11 min-h-11 px-4 py-3 gap-4',
+          // Subtract one hairline from padding when focused so the wider focus border doesn’t shift layout.
+          'data-[focus=true]:px-[calc(var(--spacing-4)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-3)-var(--spacing-px))]',
+        ],
         small: [
-          'h-8 px-3 py-1.5 gap-1.5',
-          'data-[focus=true]:px-[11px] data-[focus=true]:py-[5px]',
+          'h-8 min-h-8 px-3 py-2 gap-1.5',
+          'data-[focus=true]:px-[calc(var(--spacing-3)-var(--spacing-px))]',
+          'data-[focus=true]:py-[calc(var(--spacing-2)-var(--spacing-px))]',
         ],
       },
     },
@@ -42,7 +48,7 @@ export const inputRootVariants = cva(
 export const inputFieldVariants = cva(
   [
     'flex-1 justify-center bg-transparent p-0',
-    'font-body text-content-primary',
+    'text-content-primary',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'tracking-normal',
@@ -60,7 +66,7 @@ export const inputFieldVariants = cva(
   },
 );
 
-export const inputSlotVariants = cva(['items-center justify-center self-center']);
+export const inputSlotVariants = cva(['items-center justify-center self-center shrink-0']);
 
 export const inputIconVariants = cva(['text-content-tertiary'], {
   variants: {

package/src/components/Link/index.tsx

@@ -1,31 +1,46 @@
 import { forwardRef, type ReactNode } from 'react';
-import { Pressable, Text as RNText, type TextProps, type View } from 'react-native';
-import { createLink, type ILinkProps } from '@cdx-ui/primitives';
+import { Platform, Text, View, type TextProps } from 'react-native';
+import {
+  LinkRoot as LinkRootPrimitive,
+  Slot,
+  dataAttributes,
+  mergeDataAttributes,
+  useLinkInteractionContext,
+  type ILinkProps,
+} from '@cdx-ui/primitives';
 import { cn } from '@cdx-ui/utils';
 import { Icon, type IconProps } from '../Icon';
-import { linkRootVariants, linkLabelVariants, linkIconVariants } from './styles';
+import {
+  linkIconVariants,
+  linkLabelVariants,
+  linkNativeUnderlineVariants,
+  linkRootVariants,
+} from './styles';
 
 export { LinkProvider, type LinkConfig, type LinkAction } from '@cdx-ui/primitives';
 
-const LinkPrimitive = createLink({
-  Root: Pressable,
-});
-
 // =============================================================================
 // STYLED ROOT COMPONENT
 // =============================================================================
 
 export interface LinkProps extends ILinkProps {
   className?: string;
+  children?: ReactNode;
 }
 
 const LinkRoot = forwardRef<View, LinkProps>(({ className, children, style, ...props }, ref) => {
   const rootClassName = cn(linkRootVariants(), className);
 
   return (
-    <LinkPrimitive ref={ref} className={rootClassName} style={style} {...props}>
+    <LinkRootPrimitive
+      ref={ref}
+      className={rootClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link' }))}
+    >
       {children}
-    </LinkPrimitive>
+    </LinkRootPrimitive>
   );
 });
 
@@ -36,19 +51,34 @@ LinkRoot.displayName = 'Link';
 // =============================================================================
 
 export interface LinkLabelProps extends TextProps {
+  asChild?: boolean;
   className?: string;
   children?: ReactNode;
 }
 
-const LinkLabel = forwardRef<RNText, LinkLabelProps>(
-  ({ className, children, style, ...props }, ref) => {
-    const computedClassName = cn(linkLabelVariants(), className);
-
-    return (
-      <RNText ref={ref} className={computedClassName} style={style} {...props}>
+const LinkLabel = forwardRef<Text, LinkLabelProps>(
+  ({ asChild, className, children, style, ...props }, ref) => {
+    const { visited } = useLinkInteractionContext();
+    const computedClassName = cn(linkLabelVariants({ visited }), className);
+    const Comp = asChild ? Slot : Text;
+
+    const textElement = (
+      <Comp
+        ref={ref}
+        className={computedClassName}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'link-label' }))}
+      >
         {children}
-      </RNText>
+      </Comp>
     );
+
+    if (Platform.OS === 'web') {
+      return textElement;
+    }
+
+    return <View className={cn(linkNativeUnderlineVariants({ visited }))}>{textElement}</View>;
   },
 );
 
@@ -61,9 +91,18 @@ LinkLabel.displayName = 'Link.Label';
 export interface LinkIconProps extends Omit<IconProps, 'children'> {}
 
 const LinkIcon = ({ className, style, as, ...props }: LinkIconProps) => {
-  const computedClassName = cn(linkIconVariants(), className);
+  const { visited } = useLinkInteractionContext();
+  const computedClassName = cn(linkIconVariants({ visited }), className);
 
-  return <Icon as={as} className={computedClassName} style={style} {...props} />;
+  return (
+    <Icon
+      as={as}
+      className={computedClassName}
+      style={style}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'link-icon' }))}
+    />
+  );
 };
 
 LinkIcon.displayName = 'Link.Icon';

package/src/components/Link/styles.ts

@@ -1,21 +1,61 @@
+import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// TODO: Handle visited state
-
 export const linkRootVariants = cva([
   'flex-row items-center gap-1',
-  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  Platform.select({ web: 'web:inline-flex web:self-start', default: '' }),
   TRANSITION_COLORS,
+  'web:outline-none web:focus:outline-none web:focus-visible:outline-none',
+  'web:data-[focus-visible=true]:rounded-[2px]',
   'web:data-[focus-visible=true]:ring-2 web:data-[focus-visible=true]:ring-stroke-focus web:data-[focus-visible=true]:ring-offset-2',
+  // Web: set color on the anchor so Label/Icon can text-inherit (incl. browser :visited).
+  'web:text-content-link',
+  'web:visited:text-content-link-visited',
+  'web:hover:text-content-primary',
+  'web:visited:hover:text-content-primary',
+  'data-[visited=true]:text-content-link-visited',
+  'web:data-[hover=true]:text-content-primary',
 ]);
 
-export const linkLabelVariants = cva([
-  'text-content-link',
-  'body-md',
-  'underline underline-offset-4',
-]);
+export const linkLabelVariants = cva(
+  [
+    'body-md',
+    Platform.select({ web: 'underline underline-offset-4', default: '' }),
+    Platform.select({ web: 'text-inherit', default: 'text-content-link' }),
+  ],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
+
+export const linkNativeUnderlineVariants = cva(['border-b border-content-link pb-0.5'], {
+  variants: {
+    visited: {
+      true: 'border-content-link-visited',
+      false: '',
+    },
+  },
+  defaultVariants: { visited: false },
+});
 
-export const linkIconVariants = cva(['text-content-link', 'size-4']);
+export const linkIconVariants = cva(
+  ['size-4', Platform.select({ web: 'text-inherit', default: 'text-content-link' })],
+  {
+    variants: {
+      visited: {
+        true: Platform.select({ web: '', default: 'text-content-link-visited' }),
+        false: '',
+      },
+    },
+    defaultVariants: { visited: false },
+  },
+);
 
 export type LinkVariantProps = VariantProps<typeof linkLabelVariants>;