@cdx-ui/components 0.0.1-alpha.1 → 0.0.1-alpha.11

package/src/components/Switch/BaseSwitch.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { Switch as RNSwitch, type SwitchProps } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchIosBgVariants,
+  switchThumbColorVariants,
+  switchTrackOffVariants,
+  switchTrackOnVariants,
+} from './styles';
+
+export interface BaseSwitchProps extends Omit<SwitchProps, 'className'> {
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: string;
+}
+
+export const BaseSwitch = forwardRef<RNSwitch, BaseSwitchProps>(
+  ({ states, className, disabled, value, ...props }, ref) => {
+    const isChecked = value ?? states?.checked ?? false;
+    const isDisabled = disabled ?? states?.disabled ?? false;
+    const isInvalid = states?.invalid ?? false;
+
+    const uniwindProps: Record<string, string | undefined> = {
+      className,
+      thumbColorClassName: cn(switchThumbColorVariants({ isDisabled })),
+      trackColorOnClassName: cn(switchTrackOnVariants({ isInvalid })),
+      trackColorOffClassName: cn(switchTrackOffVariants({ isInvalid })),
+      ios_backgroundColorClassName: cn(switchIosBgVariants({ isInvalid })),
+    };
+
+    return (
+      <RNSwitch ref={ref} value={isChecked} disabled={isDisabled} {...uniwindProps} {...props} />
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

package/src/components/Switch/BaseSwitch.web.tsx

@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { Pressable, View } from 'react-native';
+import { cn } from '@cdx-ui/utils';
+import {
+  switchThumbVariants,
+  switchTrackVariants,
+  switchWebTrackColorVariants,
+  type SwitchVariantProps,
+} from './styles';
+
+export interface BaseSwitchProps {
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  states?: Record<string, boolean | undefined>;
+  dataSet?: Record<string, string>;
+  className?: string;
+  size?: SwitchVariantProps['size'];
+  onFocus?: () => void;
+  onBlur?: () => void;
+}
+
+export const BaseSwitch = forwardRef<View, BaseSwitchProps>(
+  (
+    {
+      value,
+      onValueChange,
+      disabled,
+      states,
+      dataSet,
+      className,
+      size = 'md',
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref,
+  ) => {
+    const isChecked = value ?? states?.checked ?? false;
+    const isDisabled = disabled ?? states?.disabled ?? false;
+    const isInvalid = states?.invalid ?? false;
+
+    return (
+      <Pressable
+        ref={ref}
+        role="switch"
+        aria-checked={isChecked}
+        aria-disabled={isDisabled}
+        disabled={isDisabled}
+        onPress={() => onValueChange?.(!isChecked)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        tabIndex={0}
+        className={cn(
+          switchTrackVariants({ size }),
+          switchWebTrackColorVariants({ isChecked, isInvalid }),
+          className,
+        )}
+        // @ts-expect-error dataSet is a RNW/Uniwind prop not in Pressable types
+        dataSet={dataSet}
+        {...props}
+      >
+        <View className={cn(switchThumbVariants({ size, isChecked }))} />
+      </Pressable>
+    );
+  },
+);
+
+BaseSwitch.displayName = 'BaseSwitch';

package/src/components/Switch/index.tsx

@@ -0,0 +1,13 @@
+import { type ISwitchProps, createSwitch } from '@cdx-ui/primitives';
+import { BaseSwitch } from './BaseSwitch';
+import type { SwitchVariantProps } from './styles';
+
+const SwitchPrimitive = createSwitch({ Root: BaseSwitch });
+
+export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
+  className?: string;
+}
+
+export const Switch = SwitchPrimitive;
+
+export type { SwitchVariantProps };

package/src/components/Switch/styles.ts

@@ -0,0 +1,120 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+// =============================================================================
+// NATIVE — Uniwind className bindings for RN Switch
+// =============================================================================
+
+export const switchThumbColorVariants = cva(['accent-white'], {
+  variants: {
+    isDisabled: {
+      true: 'accent-gray-200',
+      false: '',
+    },
+  },
+  defaultVariants: { isDisabled: false },
+});
+
+export const switchTrackOnVariants = cva(['accent-blue-500'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-500',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchTrackOffVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+export const switchIosBgVariants = cva(['accent-gray-300'], {
+  variants: {
+    isInvalid: {
+      true: 'accent-red-300',
+      false: '',
+    },
+  },
+  defaultVariants: { isInvalid: false },
+});
+
+// =============================================================================
+// WEB — Tailwind classes for custom Pressable toggle
+// =============================================================================
+
+export const switchTrackVariants = cva(
+  [
+    'flex-row items-center rounded-full cursor-pointer',
+    'transition-colors duration-200',
+    'data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed',
+    'web:data-[focus-visible=true]:ring-3 web:data-[focus-visible=true]:ring-blue-300/50',
+    'web:data-[invalid=true]:data-[focus-visible=true]:ring-red-300/50',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'w-9 h-5 p-0.5',
+        md: 'w-11 h-6 p-0.5',
+        lg: 'w-14 h-8 p-1',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+);
+
+export const switchWebTrackColorVariants = cva([], {
+  variants: {
+    isChecked: {
+      true: 'bg-blue-500 data-[hover=true]:bg-blue-600',
+      false: 'bg-gray-300 data-[hover=true]:bg-gray-400',
+    },
+    isInvalid: {
+      true: '',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    { isChecked: true, isInvalid: true, className: 'bg-red-500 data-[hover=true]:bg-red-600' },
+    { isChecked: false, isInvalid: true, className: 'bg-red-300 data-[hover=true]:bg-red-400' },
+  ],
+  defaultVariants: {
+    isChecked: false,
+    isInvalid: false,
+  },
+});
+
+export const switchThumbVariants = cva(
+  ['rounded-full bg-white shadow-sm', 'transition-transform duration-200'],
+  {
+    variants: {
+      size: {
+        sm: 'w-4 h-4',
+        md: 'w-5 h-5',
+        lg: 'w-6 h-6',
+      },
+      isChecked: {
+        true: '',
+        false: 'translate-x-0',
+      },
+    },
+    compoundVariants: [
+      { size: 'sm', isChecked: true, className: 'translate-x-4' },
+      { size: 'md', isChecked: true, className: 'translate-x-5' },
+      { size: 'lg', isChecked: true, className: 'translate-x-6' },
+    ],
+    defaultVariants: {
+      size: 'md',
+      isChecked: false,
+    },
+  },
+);
+
+export type SwitchVariantProps = VariantProps<typeof switchTrackVariants>;

package/src/components/Text/index.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef } from 'react';
+import { Span } from '@expo/html-elements';
+import { cn } from '@cdx-ui/utils';
+import { textStyle, TextVariantProps } from './styles';
+
+export type TextProps = TextVariantProps & ComponentPropsWithoutRef<typeof Span>;
+
+export const Text = forwardRef<ComponentRef<typeof Span>, TextProps>(function Text(
+  { className, size = 'md', ...props },
+  ref,
+) {
+  return <Span 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-foreground font-body',
+    Platform.select({
+      web: 'font-sans tracking-sm my-0 bg-transparent border-0 box-border display-inline list-none margin-0 padding-0 position-relative text-start no-underline whitespace-pre-wrap word-wrap-break-word',
+      default: '',
+    }),
+  ],
+  {
+    variants: {
+      size: {
+        xl: 'text-xl',
+        lg: 'text-lg',
+        md: 'text-base',
+        sm: 'text-sm',
+        xs: 'text-xs',
+      },
+    },
+  },
+);
+
+export type TextVariantProps = VariantProps<typeof textStyle>;

package/src/components/index.ts

@@ -1,6 +1,9 @@
 export * from './Box';
 export * from './Button';
+export * from './Checkbox';
 export * from './Input';
 export * from './Select';
+export * from './Switch';
 export { HStack, VStack } from './Stack';
+export * from './Heading';
 export * from './Text';

package/src/metro/withCdxMetroConfig.ts

@@ -0,0 +1,29 @@
+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/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';