@cdx-ui/components 0.0.1-alpha.9 → 0.0.1-beta.2

package/src/components/Switch/index.tsx

@@ -9,5 +9,3 @@ export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
 }
 
 export const Switch = SwitchPrimitive;
-
-export type { SwitchVariantProps };

package/src/components/Text/index.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import { textStyle, TextVariantProps } from './styles';
+
+export type TextProps = TextVariantProps &
+  ComponentPropsWithoutRef<typeof RNText> & { className?: string };
+
+export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
+  { className, size = 'md', ...props },
+  ref,
+) {
+  return <RNText className={cn(textStyle({ size }), className)} {...props} ref={ref} />;
+});
+
+Text.displayName = 'Text';

package/src/components/Text/styles.tsx

@@ -0,0 +1,25 @@
+import { Platform } from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const textStyle = cva(
+  [
+    `text-content-primary font-normal`,
+    Platform.select({
+      web: 'font-sans my-0 bg-transparent display-inline no-underline',
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        xl: 'body-xl',
+        lg: 'body-lg',
+        md: 'body-md',
+        sm: 'body-sm',
+        xs: 'body-xs',
+      },
+    },
+  },
+);
+
+export type TextVariantProps = VariantProps<typeof textStyle>;

package/src/components/VirtualizedList/index.tsx

@@ -0,0 +1,19 @@
+import type { ForwardedRef, ReactElement } from 'react';
+import { forwardRef } from 'react';
+import { FlashList, type FlashListProps, type FlashListRef } from '@shopify/flash-list';
+
+export type VirtualizedListRef = FlashListRef<unknown>;
+export type VirtualizedListProps<T = unknown> = FlashListProps<T>;
+
+function VirtualizedListInner<T>(
+  props: VirtualizedListProps<T>,
+  ref: ForwardedRef<FlashListRef<T>>,
+) {
+  return <FlashList ref={ref} role="list" {...props} />;
+}
+
+export const VirtualizedList = forwardRef(VirtualizedListInner) as <T>(
+  props: VirtualizedListProps<T> & { ref?: ForwardedRef<FlashListRef<T>> },
+) => ReactElement | null;
+
+(VirtualizedList as { displayName?: string }).displayName = 'VirtualizedList';

package/src/components/index.ts

@@ -1,8 +1,25 @@
+export * from './AlertDialog';
+export * from './Avatar';
+export * from './BottomSheet';
 export * from './Box';
 export * from './Button';
+export * from './Card';
 export * from './Checkbox';
+export * from './Chip';
+export * from './Dialog';
+export * from './Field';
+export * from './Form';
+export * from './Image';
 export * from './Input';
+export * from './OtpInput';
+export * from './Link';
+export * from './ProgressBar';
+export * from './ProgressSegmented';
 export * from './Select';
+export * from './VirtualizedList';
 export * from './Switch';
 export { HStack, VStack } from './Stack';
+export * from './Heading';
 export * from './Text';
+export * from './Icon';
+export * from './IconButton';

package/src/index.ts

@@ -1 +1,4 @@
+/// <reference types="uniwind/types" preserve="true" />
 export * from './components';
+export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';

package/src/styles/index.ts

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

package/src/styles/primitives.ts

@@ -0,0 +1,107 @@
+// packages/components/src/styles/primitives.ts
+// Semantic constants for CDX UI component styling.
+// See docs/visual-revamp-plan.md for rationale and usage.
+
+// ─── 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/lib/commonjs/components/Text/Text.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Text = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _jsxRuntime = require("react/jsx-runtime");
-const joinClassNames = (...parts) => parts.filter(Boolean).join(' ');
-const buildTypographyClassName = variant => joinClassNames(`[font-family:var(--type-${variant}-family)]`, `[font-weight:var(--type-${variant}-weight)]`, `text-[var(--type-${variant}-size)]`, `leading-[var(--type-${variant}-lineHeight)]`, `tracking-[var(--type-${variant}-letterSpacing)]`, variant === 'overline' ? 'uppercase' : 'normal-case');
-const Text = exports.Text = /*#__PURE__*/(0, _react.forwardRef)(({
-  variant,
-  children,
-  style,
-  className,
-  ...restProps
-}, ref) => {
-  const variantKey = variant ?? 'body1';
-  const variantClassName = buildTypographyClassName(variantKey);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-    ref: ref,
-    className: joinClassNames(variantClassName, className),
-    style: style,
-    ...restProps,
-    children: children
-  });
-});
-Text.displayName = 'Text';
-//# sourceMappingURL=Text.js.map

package/lib/commonjs/components/Text/Text.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_reactNative","_jsxRuntime","joinClassNames","parts","filter","Boolean","join","buildTypographyClassName","variant","Text","exports","forwardRef","children","style","className","restProps","ref","variantKey","variantClassName","jsx","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/Text.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAA6E,IAAAE,WAAA,GAAAF,OAAA;AA0B7E,MAAMG,cAAc,GAAGA,CAAC,GAAGC,KAAqC,KAC9DA,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAEjC,MAAMC,wBAAwB,GAAIC,OAA0B,IAC1DN,cAAc,CACZ,2BAA2BM,OAAO,WAAW,EAC7C,2BAA2BA,OAAO,WAAW,EAC7C,oBAAoBA,OAAO,SAAS,EACpC,uBAAuBA,OAAO,eAAe,EAC7C,wBAAwBA,OAAO,kBAAkB,EACjDA,OAAO,KAAK,UAAU,GAAG,WAAW,GAAG,aACzC,CAAC;AAEI,MAAMC,IAAI,GAAAC,OAAA,CAAAD,IAAA,gBAAG,IAAAE,iBAAU,EAC5B,CAAC;EAAEH,OAAO;EAAEI,QAAQ;EAAEC,KAAK;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAMC,UAAU,GAAGT,OAAO,IAAI,OAAO;EACrC,MAAMU,gBAAgB,GAAGX,wBAAwB,CAACU,UAAU,CAAC;EAC7D,oBACE,IAAAhB,WAAA,CAAAkB,GAAA,EAACnB,YAAA,CAAAS,IAAM;IACLO,GAAG,EAAEA,GAAI;IACTF,SAAS,EAAEZ,cAAc,CAACgB,gBAAgB,EAAEJ,SAAS,CAAE;IACvDD,KAAK,EAAEA,KAAM;IAAA,GACTE,SAAS;IAAAH,QAAA,EAEZA;EAAQ,CACH,CAAC;AAEb,CACF,CAAC;AAEDH,IAAI,CAACW,WAAW,GAAG,MAAM","ignoreList":[]}

package/lib/module/components/Text/Text.js

@@ -1,26 +0,0 @@
-"use strict";
-
-import { forwardRef } from 'react';
-import { Text as RNText } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const joinClassNames = (...parts) => parts.filter(Boolean).join(' ');
-const buildTypographyClassName = variant => joinClassNames(`[font-family:var(--type-${variant}-family)]`, `[font-weight:var(--type-${variant}-weight)]`, `text-[var(--type-${variant}-size)]`, `leading-[var(--type-${variant}-lineHeight)]`, `tracking-[var(--type-${variant}-letterSpacing)]`, variant === 'overline' ? 'uppercase' : 'normal-case');
-export const Text = /*#__PURE__*/forwardRef(({
-  variant,
-  children,
-  style,
-  className,
-  ...restProps
-}, ref) => {
-  const variantKey = variant ?? 'body1';
-  const variantClassName = buildTypographyClassName(variantKey);
-  return /*#__PURE__*/_jsx(RNText, {
-    ref: ref,
-    className: joinClassNames(variantClassName, className),
-    style: style,
-    ...restProps,
-    children: children
-  });
-});
-Text.displayName = 'Text';
-//# sourceMappingURL=Text.js.map

package/lib/module/components/Text/Text.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["forwardRef","Text","RNText","jsx","_jsx","joinClassNames","parts","filter","Boolean","join","buildTypographyClassName","variant","children","style","className","restProps","ref","variantKey","variantClassName","displayName"],"sourceRoot":"../../../../src","sources":["components/Text/Text.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,IAAI,IAAIC,MAAM,QAAuC,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA0B7E,MAAMC,cAAc,GAAGA,CAAC,GAAGC,KAAqC,KAC9DA,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC;AAEjC,MAAMC,wBAAwB,GAAIC,OAA0B,IAC1DN,cAAc,CACZ,2BAA2BM,OAAO,WAAW,EAC7C,2BAA2BA,OAAO,WAAW,EAC7C,oBAAoBA,OAAO,SAAS,EACpC,uBAAuBA,OAAO,eAAe,EAC7C,wBAAwBA,OAAO,kBAAkB,EACjDA,OAAO,KAAK,UAAU,GAAG,WAAW,GAAG,aACzC,CAAC;AAEH,OAAO,MAAMV,IAAI,gBAAGD,UAAU,CAC5B,CAAC;EAAEW,OAAO;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,SAAS;EAAE,GAAGC;AAAU,CAAC,EAAEC,GAAG,KAAK;EAC9D,MAAMC,UAAU,GAAGN,OAAO,IAAI,OAAO;EACrC,MAAMO,gBAAgB,GAAGR,wBAAwB,CAACO,UAAU,CAAC;EAC7D,oBACEb,IAAA,CAACF,MAAM;IACLc,GAAG,EAAEA,GAAI;IACTF,SAAS,EAAET,cAAc,CAACa,gBAAgB,EAAEJ,SAAS,CAAE;IACvDD,KAAK,EAAEA,KAAM;IAAA,GACTE,SAAS;IAAAH,QAAA,EAEZA;EAAQ,CACH,CAAC;AAEb,CACF,CAAC;AAEDX,IAAI,CAACkB,WAAW,GAAG,MAAM","ignoreList":[]}

package/lib/typescript/components/Text/Text.d.ts

@@ -1,11 +0,0 @@
-import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
-type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'display1' | 'display2';
-interface VariantProps {
-    variant?: TypographyVariant;
-    className?: string;
-}
-export interface TextProps extends RNTextProps, VariantProps {
-}
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
-export {};
-//# sourceMappingURL=Text.d.ts.map

package/lib/typescript/components/Text/Text.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7E,KAAK,iBAAiB,GAClB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,WAAW,GACX,WAAW,GACX,OAAO,GACP,OAAO,GACP,SAAS,GACT,QAAQ,GACR,UAAU,GACV,UAAU,GACV,UAAU,CAAC;AAEf,UAAU,YAAY;IACpB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,WAAW,EAAE,YAAY;CAAG;AAe/D,eAAO,MAAM,IAAI,8FAehB,CAAC"}

package/src/components/Text/Text.tsx

@@ -1,58 +0,0 @@
-import { forwardRef } from 'react';
-import { Text as RNText, type TextProps as RNTextProps } from 'react-native';
-
-type TypographyVariant =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'body1'
-  | 'body2'
-  | 'caption'
-  | 'button'
-  | 'overline'
-  | 'display1'
-  | 'display2';
-
-interface VariantProps {
-  variant?: TypographyVariant;
-  className?: string;
-}
-
-export interface TextProps extends RNTextProps, VariantProps {}
-
-const joinClassNames = (...parts: (string | undefined | false)[]) =>
-  parts.filter(Boolean).join(' ');
-
-const buildTypographyClassName = (variant: TypographyVariant) =>
-  joinClassNames(
-    `[font-family:var(--type-${variant}-family)]`,
-    `[font-weight:var(--type-${variant}-weight)]`,
-    `text-[var(--type-${variant}-size)]`,
-    `leading-[var(--type-${variant}-lineHeight)]`,
-    `tracking-[var(--type-${variant}-letterSpacing)]`,
-    variant === 'overline' ? 'uppercase' : 'normal-case',
-  );
-
-export const Text = forwardRef<RNText, TextProps>(
-  ({ variant, children, style, className, ...restProps }, ref) => {
-    const variantKey = variant ?? 'body1';
-    const variantClassName = buildTypographyClassName(variantKey);
-    return (
-      <RNText
-        ref={ref}
-        className={joinClassNames(variantClassName, className)}
-        style={style}
-        {...restProps}
-      >
-        {children}
-      </RNText>
-    );
-  },
-);
-
-Text.displayName = 'Text';

package/src/components/Text/index.ts

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