@cdx-ui/components 0.0.1-beta.13 → 0.0.1-beta.131

package/src/components/Field/FieldLabel.web.tsx

@@ -1,25 +0,0 @@
-import React, { forwardRef, type ReactNode } from 'react';
-import type { ViewProps } from 'react-native';
-
-// TODO: Why does dataSet need to be decomposed into individual data attributes?
-
-export type BaseFieldLabelProps = ViewProps & {
-  htmlFor?: string;
-  children?: ReactNode;
-  /** @platform native — ignored on DOM `<label>`; set by form primitive for Uniwind. */
-  dataSet?: Record<string, string>;
-};
-
-/** Real `<label>` so clicking the label focuses the associated control (`htmlFor` → input `id`). */
-export const BaseFieldLabel = forwardRef<HTMLLabelElement, BaseFieldLabelProps>((props, ref) => {
-  return (
-    <label
-      ref={ref}
-      {...(props as React.LabelHTMLAttributes<HTMLLabelElement>)}
-      data-invalid={props.dataSet?.invalid}
-      data-required={props.dataSet?.required}
-    />
-  );
-});
-
-BaseFieldLabel.displayName = 'BaseFieldLabel';

package/src/components/Form/FormRoot.tsx

@@ -1,20 +0,0 @@
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
-
-export type BaseFormRootProps = ViewProps & {
-  onSubmit?: (e: React.SyntheticEvent) => void;
-  action?: string | ((formData: FormData) => void | Promise<void>);
-  method?: string;
-  className?: string;
-};
-
-export const BaseFormRoot = forwardRef<View, BaseFormRootProps>(
-  ({ onSubmit: _onSubmit, action: _action, method: _method, ...props }, ref) => {
-    void _onSubmit;
-    void _action;
-    void _method;
-    return <View ref={ref} {...props} />;
-  },
-);
-
-BaseFormRoot.displayName = 'BaseFormRoot';

package/src/components/Form/FormRoot.web.tsx

@@ -1,12 +0,0 @@
-import React, { forwardRef } from 'react';
-
-export type BaseFormRootProps = React.FormHTMLAttributes<HTMLFormElement> & {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export const BaseFormRoot = forwardRef<HTMLFormElement, BaseFormRootProps>((props, ref) => {
-  return <form ref={ref} {...props} />;
-});
-
-BaseFormRoot.displayName = 'BaseFormRoot';

package/src/components/Input/BaseInput.android.tsx

@@ -1,13 +0,0 @@
-import { forwardRef } from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-
-const androidDefaults = {
-  includeFontPadding: false,
-  textAlignVertical: 'center' as const,
-};
-
-export const BaseInput = forwardRef<TextInput, TextInputProps>((props, ref) => (
-  <TextInput ref={ref} {...props} style={[androidDefaults, props.style]} />
-));
-
-BaseInput.displayName = 'BaseInput';

package/src/components/Input/BaseInput.tsx

@@ -1 +0,0 @@
-export { TextInput as BaseInput } from 'react-native';

package/src/components/Input/BaseInput.web.tsx

@@ -1,41 +0,0 @@
-import React, { forwardRef } from 'react';
-import { TextInput } from 'react-native';
-
-export const BaseInput = forwardRef<any, any>((props, ref) => {
-  if (props.type === 'file') {
-    return React.createElement('input', {
-      ref,
-      type: 'file',
-      accept: props.accept || undefined,
-      multiple: props.multiple || undefined,
-      capture: props.capture || undefined,
-      disabled: props.disabled || undefined,
-      'aria-label': props['aria-label'],
-      'aria-required': props['aria-required'] || undefined,
-      'aria-invalid': props['aria-invalid'] || undefined,
-      'aria-disabled': props['aria-disabled'] || undefined,
-      onChange: (e: any) => {
-        const files = e.target.files;
-        if (files && props.onFiles) {
-          props.onFiles(Array.from(files));
-        }
-      },
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
-      style: {
-        flex: 1,
-        minWidth: 0,
-        border: 'none',
-        outline: 'none',
-        background: 'transparent',
-        cursor: props.disabled ? 'not-allowed' : 'pointer',
-        fontSize: 'inherit',
-        fontFamily: 'inherit',
-      },
-    });
-  }
-
-  return <TextInput ref={ref} {...props} />;
-});
-
-BaseInput.displayName = 'BaseInput';

package/src/components/Select/SelectTriggerHost.tsx

@@ -1,4 +0,0 @@
-import { Pressable } from 'react-native';
-
-/** Native: `Pressable`. Web: `SelectTriggerHost.web` uses `<button>` so `<label htmlFor>` works. */
-export const SelectTriggerHost = Pressable;

package/src/components/Select/SelectTriggerHost.web.tsx

@@ -1,136 +0,0 @@
-import React, { forwardRef } from 'react';
-import { StyleSheet } from 'react-native';
-import type { PressableProps } from 'react-native';
-
-export type SelectTriggerHostProps = PressableProps & { className?: string };
-
-/** Props that must not be forwarded to a DOM `<button>`. */
-const OMIT = new Set<string>([
-  'hitSlop',
-  'pressRetentionOffset',
-  'android_ripple',
-  'android_disableSound',
-  'unstable_pressDelay',
-  'onLongPress',
-  'delayLongPress',
-  'onPress',
-  'onPressIn',
-  'onPressOut',
-  'onHoverIn',
-  'onHoverOut',
-  'disabled',
-  'style',
-  'className',
-  'testID',
-  'children',
-  'accessible',
-  'accessibilityActions',
-  'accessibilityElementsHidden',
-  'accessibilityHint',
-  'accessibilityIgnoresInvertColors',
-  'accessibilityLabel',
-  'accessibilityLabelledBy',
-  'accessibilityLiveRegion',
-  'accessibilityRole',
-  'accessibilityState',
-  'accessibilityValue',
-  'accessibilityViewIsModal',
-  'importantForAccessibility',
-  'needsOffscreenAlphaCompositing',
-  'collapsable',
-  'shouldRasterizeIOS',
-  'removeClippedSubviews',
-  'onAccessibilityAction',
-  'onAccessibilityEscape',
-  'onAccessibilityTap',
-]);
-
-function resolveChildren(children: PressableProps['children']): React.ReactNode {
-  if (typeof children === 'function') {
-    return children({ pressed: false });
-  }
-  return children;
-}
-
-function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
-  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
-  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
-}
-
-/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
-const webButtonLayoutStyle: React.CSSProperties = {
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  width: '100%',
-  minWidth: 0,
-  textAlign: 'start',
-  boxSizing: 'border-box',
-  margin: 0,
-  font: 'inherit',
-  lineHeight: 'normal',
-  WebkitAppearance: 'none',
-  appearance: 'none',
-};
-
-/**
- * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
- * `Pressable` on web is a non-labelable div; no extra refs are needed for label association.
- */
-export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHostProps>(
-  function SelectTriggerHost(props, ref) {
-    const {
-      children,
-      onPress,
-      onPressIn,
-      onPressOut,
-      onHoverIn,
-      onHoverOut,
-      disabled,
-      style,
-      className,
-      testID,
-      ...rest
-    } = props;
-
-    const domProps = filterDomProps(rest);
-    const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
-
-    return (
-      <button
-        ref={ref}
-        {...domProps}
-        type="button"
-        disabled={!!disabled}
-        className={typeof className === 'string' ? className : undefined}
-        style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
-        data-testid={testID}
-        onClick={(e) => {
-          if (!disabled) {
-            onPress?.(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);
-          }
-        }}
-        onPointerDown={(e) => {
-          onPressIn?.(e as unknown as Parameters<NonNullable<PressableProps['onPressIn']>>[0]);
-        }}
-        onPointerUp={(e) => {
-          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
-        }}
-        onPointerCancel={(e) => {
-          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
-        }}
-        onMouseEnter={(e) => {
-          onHoverIn?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverIn']>>[0]);
-        }}
-        onMouseLeave={(e) => {
-          onHoverOut?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverOut']>>[0]);
-        }}
-      >
-        {resolveChildren(children)}
-      </button>
-    );
-  },
-);
-
-SelectTriggerHost.displayName = 'SelectTriggerHost';

package/src/styles/index.ts

@@ -1 +0,0 @@
-export * from './primitives';

package/src/styles/primitives.ts

@@ -1,140 +0,0 @@
-// packages/components/src/styles/primitives.ts
-// Semantic constants for CDX UI component styling.
-
-// ─── Colors ──────────────────────────────────────────────
-// Surface & background
-/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
-export const COLOR_BG_PRIMARY = 'bg-white';
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-export const COLOR_BG_SUBTLE = 'bg-slate-50';
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-export const COLOR_BG_MUTED = 'bg-slate-100';
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-export const COLOR_BG_INVERSE = 'bg-slate-900';
-
-// Border
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-export const COLOR_BORDER_DEFAULT = 'border-slate-200';
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-export const COLOR_BORDER_STRONG = 'border-slate-300';
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-export const COLOR_BORDER_FOCUS = 'border-slate-900';
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-export const COLOR_BORDER_INVALID = 'border-red-500';
-
-// Text
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-export const COLOR_TEXT_PRIMARY = 'text-slate-900';
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-export const COLOR_TEXT_SECONDARY = 'text-slate-500';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const COLOR_TEXT_MUTED = 'text-slate-400';
-/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
-export const COLOR_TEXT_INVERSE = 'text-white';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-export const COLOR_TEXT_INVALID = 'text-red-600';
-
-// Brand / Action
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-export const COLOR_BRAND_HOVER = 'bg-slate-800';
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
-
-// Accent (for checked states, active indicators)
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-export const COLOR_ACCENT_BORDER = 'border-slate-900';
-
-/**
- * @deprecated Use semantic token classes directly instead. Map each color key to its
- * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
- * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
- * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
- * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
- * - `border` → `border-stroke-{color}` (--color-stroke-{color})
- * - `text` → `text-content-{color}` (--color-content-{color})
- * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
- *
- * See Button/styles.ts for a complete migration example.
- */
-export const SEMANTIC_COLORS = {
-  action: {
-    bg: 'bg-slate-900',
-    bgHover: 'bg-slate-800',
-    bgActive: 'bg-slate-700',
-    border: 'border-slate-900',
-    text: 'text-slate-900',
-    ring: 'ring-slate-400/50',
-  },
-  danger: {
-    bg: 'bg-red-600',
-    bgHover: 'bg-red-700',
-    bgActive: 'bg-red-800',
-    border: 'border-red-600',
-    text: 'text-red-600',
-    ring: 'ring-red-400/50',
-  },
-  warning: {
-    bg: 'bg-amber-500',
-    bgHover: 'bg-amber-600',
-    bgActive: 'bg-amber-700',
-    border: 'border-amber-500',
-    text: 'text-amber-600',
-    ring: 'ring-amber-400/50',
-  },
-  success: {
-    bg: 'bg-green-600',
-    bgHover: 'bg-green-700',
-    bgActive: 'bg-green-800',
-    border: 'border-green-600',
-    text: 'text-green-600',
-    ring: 'ring-green-400/50',
-  },
-  info: {
-    bg: 'bg-sky-500',
-    bgHover: 'bg-sky-600',
-    bgActive: 'bg-sky-700',
-    border: 'border-sky-500',
-    text: 'text-sky-600',
-    ring: 'ring-sky-400/50',
-  },
-} as const;
-
-// ─── Focus ───────────────────────────────────────────────
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-export const FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
-
-// ─── Radius ──────────────────────────────────────────────
-export const RADIUS_SM = 'rounded-lg'; // buttons, inputs, checkboxes
-export const RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
-export const RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
-
-// ─── Shadows ─────────────────────────────────────────────
-
-/** @deprecated Use `shadow-sm` directly instead */
-export const SHADOW_SM = 'shadow-sm';
-/** @deprecated Use `shadow-md` directly instead */
-export const SHADOW_MD = 'shadow-md';
-
-// ─── Sizing ──────────────────────────────────────────────
-// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
-// Only two sizes: 'default' (regular) and 'small' (compact).
-// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
-/** @deprecated */
-export const SIZE_SCALE = {
-  default: { height: 'h-10', px: 'px-4', gap: 'gap-2', text: 'text-base' },
-  small: { height: 'h-8', px: 'px-3', gap: 'gap-1.5', text: 'text-sm' },
-} as const;
-
-// ─── Transitions ─────────────────────────────────────────
-export const TRANSITION_COLORS = 'transition-colors duration-150';
-
-// ─── Disabled ────────────────────────────────────────────
-export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
-export const DISABLED_CURSOR =
-  'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';

package/src/utils/WrapStringChild.tsx

@@ -1,25 +0,0 @@
-import { Children, Fragment, isValidElement, type ReactNode } from 'react';
-import { Text, type TextProps } from '../components/Text';
-
-interface WrapStringChildProps {
-  children: ReactNode;
-  textProps?: TextProps;
-}
-
-/** @deprecated Users should wrap their own children in a Text component themselves */
-export function WrapStringChild({ children, textProps }: WrapStringChildProps): ReactNode {
-  return Children.map(children, (child) => {
-    return typeof child === 'string' ||
-      typeof child === 'number' ||
-      (isValidElement(child) &&
-        child.type === Fragment &&
-        child.props &&
-        typeof child.props === 'object' &&
-        'children' in child.props &&
-        (typeof child.props.children === 'string' || typeof child.props.children === 'number')) ? (
-      <Text {...textProps}>{child}</Text>
-    ) : (
-      child
-    );
-  });
-}