@cdx-ui/components 0.0.1-beta.16 → 0.0.1-beta.160

package/lib/typescript/styles/primitives.d.ts

@@ -1,120 +0,0 @@
-/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
-export declare const COLOR_BG_PRIMARY = "bg-white";
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-export declare const COLOR_BG_SUBTLE = "bg-slate-50";
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-export declare const COLOR_BG_MUTED = "bg-slate-100";
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-export declare const COLOR_BG_INVERSE = "bg-slate-900";
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-export declare const COLOR_BORDER_STRONG = "border-slate-300";
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-export declare const COLOR_BORDER_FOCUS = "border-slate-900";
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-export declare const COLOR_BORDER_INVALID = "border-red-500";
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export declare 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 declare const COLOR_TEXT_INVERSE = "text-white";
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-export declare const COLOR_TEXT_INVALID = "text-red-600";
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-export declare const COLOR_BRAND_HOVER = "bg-slate-800";
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-export declare 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 declare const SEMANTIC_COLORS: {
-    readonly action: {
-        readonly bg: "bg-slate-900";
-        readonly bgHover: "bg-slate-800";
-        readonly bgActive: "bg-slate-700";
-        readonly border: "border-slate-900";
-        readonly text: "text-slate-900";
-        readonly ring: "ring-slate-400/50";
-    };
-    readonly danger: {
-        readonly bg: "bg-red-600";
-        readonly bgHover: "bg-red-700";
-        readonly bgActive: "bg-red-800";
-        readonly border: "border-red-600";
-        readonly text: "text-red-600";
-        readonly ring: "ring-red-400/50";
-    };
-    readonly warning: {
-        readonly bg: "bg-amber-500";
-        readonly bgHover: "bg-amber-600";
-        readonly bgActive: "bg-amber-700";
-        readonly border: "border-amber-500";
-        readonly text: "text-amber-600";
-        readonly ring: "ring-amber-400/50";
-    };
-    readonly success: {
-        readonly bg: "bg-green-600";
-        readonly bgHover: "bg-green-700";
-        readonly bgActive: "bg-green-800";
-        readonly border: "border-green-600";
-        readonly text: "text-green-600";
-        readonly ring: "ring-green-400/50";
-    };
-    readonly info: {
-        readonly bg: "bg-sky-500";
-        readonly bgHover: "bg-sky-600";
-        readonly bgActive: "bg-sky-700";
-        readonly border: "border-sky-500";
-        readonly text: "text-sky-600";
-        readonly ring: "ring-sky-400/50";
-    };
-};
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
-export declare const RADIUS_SM = "rounded-lg";
-export declare const RADIUS_MD = "rounded-xl";
-export declare const RADIUS_FULL = "rounded-full";
-/** @deprecated Use `shadow-sm` directly instead */
-export declare const SHADOW_SM = "shadow-sm";
-/** @deprecated Use `shadow-md` directly instead */
-export declare const SHADOW_MD = "shadow-md";
-/** @deprecated */
-export declare const SIZE_SCALE: {
-    readonly default: {
-        readonly height: "h-10";
-        readonly px: "px-4";
-        readonly gap: "gap-2";
-        readonly text: "text-base";
-    };
-    readonly small: {
-        readonly height: "h-8";
-        readonly px: "px-3";
-        readonly gap: "gap-1.5";
-        readonly text: "text-sm";
-    };
-};
-export declare const TRANSITION_COLORS = "transition-colors duration-150";
-export declare const DISABLED_OPACITY = "data-[disabled=true]:opacity-50";
-export declare const DISABLED_CURSOR = "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none";
-//# sourceMappingURL=primitives.d.ts.map

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/lib/typescript/utils/WrapStringChild.d.ts

@@ -1,10 +0,0 @@
-import { type ReactNode } from 'react';
-import { type TextProps } from '../components/Text';
-interface WrapStringChildProps {
-    children: ReactNode;
-    textProps?: TextProps;
-}
-/** @deprecated Users should wrap their own children in a Text component themselves */
-export declare function WrapStringChild({ children, textProps }: WrapStringChildProps): ReactNode;
-export {};
-//# sourceMappingURL=WrapStringChild.d.ts.map

package/lib/typescript/utils/WrapStringChild.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WrapStringChild.d.ts","sourceRoot":"","sources":["../../../src/utils/WrapStringChild.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE1D,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,sFAAsF;AACtF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,GAAG,SAAS,CAexF"}

package/src/components/Field/FieldLabel.tsx

@@ -1,33 +0,0 @@
-import { forwardRef } from 'react';
-import { Text, TextProps, type GestureResponderEvent } from 'react-native';
-import { composeEventHandlers, useFormControlContext } from '@cdx-ui/utils';
-
-export type BaseFieldLabelProps = TextProps & {
-  /** @platform web — forwarded on web; ignored here (see `FieldLabelRoot.web`). */
-  htmlFor?: string;
-  /** Optional; composed with label tap-to-focus on native. */
-  onPress?: ((event: GestureResponderEvent) => void) | null;
-};
-
-/**
- * Native: `Text` label row — tap focuses the field input via form context
- * (parity with `<label htmlFor>` on web).
- */
-export const BaseFieldLabel = forwardRef<Text, BaseFieldLabelProps>(
-  ({ htmlFor: _omitHtmlFor, onPress, ...props }, ref) => {
-    void _omitHtmlFor;
-
-    const { focusInput, isDisabled } = useFormControlContext();
-
-    return (
-      <Text
-        ref={ref}
-        {...props}
-        disabled={Boolean(isDisabled)}
-        onPress={composeEventHandlers(onPress, () => focusInput?.())}
-      />
-    );
-  },
-);
-
-BaseFieldLabel.displayName = 'BaseFieldLabel';

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/metro/withCdxMetroConfig.ts

@@ -1,29 +0,0 @@
-import type { MetroConfig } from 'metro-config';
-import { withUniwindConfig } from 'uniwind/metro';
-
-export interface CdxMetroConfigOptions {
-  /** Path to the CSS entry file (e.g., `'./global.css'`). */
-  cssEntryFile: string;
-  /** Path where generated Tailwind class type definitions are written. */
-  generatedTypesFile?: string;
-}
-
-/**
- * Wraps a Metro config with CDX UI's styling-layer configuration.
- *
- * Today this delegates to Uniwind. If the styling layer is swapped (see
- * `docs/research/uniwind-to-nativewind-contingency.md`), only the internals
- * of this function change — consuming Metro configs stay the same.
- *
- * Must be the **outermost** Metro config wrapper (after any other wrappers
- * like `withStorybook`).
- */
-export function withCdxMetroConfig<T extends MetroConfig>(
-  config: T,
-  options: CdxMetroConfigOptions,
-): T {
-  return withUniwindConfig(config, {
-    cssEntryFile: options.cssEntryFile,
-    dtsFile: options.generatedTypesFile,
-  }) as T;
-}

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
-    );
-  });
-}