@cdx-ui/components 0.0.1-beta.12 → 0.0.1-beta.121

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,106 +0,0 @@
-// packages/components/src/styles/primitives.ts
-// Semantic constants for CDX UI component styling.
-
-// ─── Colors ──────────────────────────────────────────────
-// Surface & background
-export const COLOR_BG_PRIMARY = 'bg-white';
-export const COLOR_BG_SUBTLE = 'bg-slate-50';
-export const COLOR_BG_MUTED = 'bg-slate-100';
-export const COLOR_BG_INVERSE = 'bg-slate-900';
-
-// Border
-export const COLOR_BORDER_DEFAULT = 'border-slate-200';
-export const COLOR_BORDER_STRONG = 'border-slate-300';
-export const COLOR_BORDER_FOCUS = 'border-slate-900';
-export const COLOR_BORDER_INVALID = 'border-red-500';
-
-// Text
-export const COLOR_TEXT_PRIMARY = 'text-slate-900';
-export const COLOR_TEXT_SECONDARY = 'text-slate-500';
-export const COLOR_TEXT_MUTED = 'text-slate-400';
-export const COLOR_TEXT_INVERSE = 'text-white';
-export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
-export const COLOR_TEXT_INVALID = 'text-red-600';
-
-// Brand / Action
-export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
-export const COLOR_BRAND_HOVER = 'bg-slate-800';
-export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
-
-// Accent (for checked states, active indicators)
-export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
-export const COLOR_ACCENT_BORDER = 'border-slate-900';
-
-// Semantic colors (danger, warning, success, info)
-// Kept for Button's 5-color system
-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 ───────────────────────────────────────────────
-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 ─────────────────────────────────────────────
-export const SHADOW_SM = 'shadow-sm';
-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.
-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
-    );
-  });
-}