@cdx-ui/components 0.0.1-beta.11 → 0.0.1-beta.110

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';