cnnative-ui 1.0.0

package/src/premium/onboarding/step-indicator.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../../components/typography';
+import { Check } from 'lucide-react-native';
+import Animated, { FadeIn, SlideInRight } from 'react-native-reanimated';
+
+export interface StepIndicatorProps extends ViewProps {
+  steps: string[];
+  currentStep: number;
+}
+
+export const StepIndicator = React.forwardRef<React.ElementRef<typeof View>, StepIndicatorProps>(
+  ({ className, steps, currentStep, ...props }, ref) => {
+    return (
+      <View ref={ref} className={cn('flex-row items-center justify-between w-full px-4', className)} {...props}>
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isActive = index === currentStep;
+
+          return (
+            <React.Fragment key={step}>
+              {/* Step Circle */}
+              <View className="items-center">
+                <Animated.View
+                  entering={SlideInRight.delay(index * 100).springify()}
+                  className={cn(
+                    'h-8 w-8 rounded-full items-center justify-center border-2 transition-colors',
+                    isCompleted ? 'bg-primary border-primary' : isActive ? 'border-primary bg-background' : 'border-muted bg-background'
+                  )}
+                >
+                  {isCompleted ? (
+                    <Animated.View entering={FadeIn}>
+                      <Check size={16} className="text-primary-foreground" />
+                    </Animated.View>
+                  ) : (
+                    <Text className={cn('text-xs font-bold', isActive ? 'text-primary' : 'text-muted-foreground')}>
+                      {index + 1}
+                    </Text>
+                  )}
+                </Animated.View>
+                <Text className={cn('absolute -bottom-6 text-[10px] w-20 text-center', isActive || isCompleted ? 'text-foreground font-medium' : 'text-muted-foreground')}>
+                  {step}
+                </Text>
+              </View>
+
+              {/* Connecting Line */}
+              {index < steps.length - 1 && (
+                <View className="flex-1 h-[2px] mx-2 bg-muted overflow-hidden">
+                  <Animated.View
+                    className="h-full bg-primary"
+                    style={{
+                      width: isCompleted ? '100%' : '0%',
+                    }}
+                  />
+                </View>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </View>
+    );
+  }
+);
+StepIndicator.displayName = 'StepIndicator';

package/src/tokens/colors.ts

@@ -0,0 +1,83 @@
+/**
+ * Nativecn Color Tokens
+ * HSL-based design tokens compatible with shadcn/ui defaults.
+ * Extended with success, warning, info, glass, and overlay layers.
+ */
+
+/** A raw HSL string e.g. "221.2 83.2% 53.3%" (no 'hsl()' wrapper). */
+export type HslValue = string;
+
+export interface ColorScale {
+  DEFAULT: HslValue;
+  foreground: HslValue;
+}
+
+export interface SemanticColors {
+  background: HslValue;
+  foreground: HslValue;
+  card: ColorScale;
+  popover: ColorScale;
+  primary: ColorScale;
+  secondary: ColorScale;
+  muted: ColorScale;
+  accent: ColorScale;
+  destructive: ColorScale;
+  success: ColorScale;
+  warning: ColorScale;
+  info: ColorScale;
+  border: HslValue;
+  input: HslValue;
+  ring: HslValue;
+  /** Glassmorphism base — semi-transparent white/black */
+  glass: string;
+  glassBorder: string;
+  overlay: string;
+  shimmer: string;
+}
+
+export const lightColors: SemanticColors = {
+  background: '0 0% 100%',
+  foreground: '222.2 84% 4.9%',
+  card: { DEFAULT: '0 0% 100%', foreground: '222.2 84% 4.9%' },
+  popover: { DEFAULT: '0 0% 100%', foreground: '222.2 84% 4.9%' },
+  primary: { DEFAULT: '221.2 83.2% 53.3%', foreground: '210 40% 98%' },
+  secondary: { DEFAULT: '210 40% 96.1%', foreground: '222.2 47.4% 11.2%' },
+  muted: { DEFAULT: '210 40% 96.1%', foreground: '215.4 16.3% 46.9%' },
+  accent: { DEFAULT: '210 40% 96.1%', foreground: '222.2 47.4% 11.2%' },
+  destructive: { DEFAULT: '0 84.2% 60.2%', foreground: '210 40% 98%' },
+  success: { DEFAULT: '142.1 76.2% 36.3%', foreground: '210 40% 98%' },
+  warning: { DEFAULT: '38 92% 50%', foreground: '0 0% 100%' },
+  info: { DEFAULT: '199 89% 48%', foreground: '0 0% 100%' },
+  border: '214.3 31.8% 91.4%',
+  input: '214.3 31.8% 91.4%',
+  ring: '221.2 83.2% 53.3%',
+  glass: 'rgba(255, 255, 255, 0.12)',
+  glassBorder: 'rgba(255, 255, 255, 0.20)',
+  overlay: 'rgba(0, 0, 0, 0.60)',
+  shimmer: 'rgba(255, 255, 255, 0.60)',
+};
+
+export const darkColors: SemanticColors = {
+  background: '222.2 84% 4.9%',
+  foreground: '210 40% 98%',
+  card: { DEFAULT: '222.2 84% 4.9%', foreground: '210 40% 98%' },
+  popover: { DEFAULT: '222.2 84% 4.9%', foreground: '210 40% 98%' },
+  primary: { DEFAULT: '217.2 91.2% 59.8%', foreground: '222.2 47.4% 11.2%' },
+  secondary: { DEFAULT: '217.2 32.6% 17.5%', foreground: '210 40% 98%' },
+  muted: { DEFAULT: '217.2 32.6% 17.5%', foreground: '215 20.2% 65.1%' },
+  accent: { DEFAULT: '217.2 32.6% 17.5%', foreground: '210 40% 98%' },
+  destructive: { DEFAULT: '0 62.8% 30.6%', foreground: '210 40% 98%' },
+  success: { DEFAULT: '142.1 70.6% 45.3%', foreground: '0 0% 100%' },
+  warning: { DEFAULT: '38 92% 55%', foreground: '0 0% 100%' },
+  info: { DEFAULT: '199 89% 52%', foreground: '0 0% 100%' },
+  border: '217.2 32.6% 17.5%',
+  input: '217.2 32.6% 17.5%',
+  ring: '224.3 76.3% 48%',
+  glass: 'rgba(0, 0, 0, 0.25)',
+  glassBorder: 'rgba(255, 255, 255, 0.10)',
+  overlay: 'rgba(0, 0, 0, 0.75)',
+  shimmer: 'rgba(255, 255, 255, 0.08)',
+};
+
+/** Convert an HSL token to a full CSS hsl() string */
+export const hsl = (value: HslValue): string => `hsl(${value})`;

package/src/tokens/global.css

@@ -0,0 +1,83 @@
+@import "tailwindcss/theme.css" layer(theme);
+@import "nativewind/theme";
+
+@theme {
+  /* Base tokens (shadcn-compatible) */
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(221.2 83.2% 53.3%);
+  --color-primary-foreground: hsl(210 40% 98%);
+  --color-secondary: hsl(210 40% 96.1%);
+  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --color-muted: hsl(210 40% 96.1%);
+  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --color-accent: hsl(210 40% 96.1%);
+  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(210 40% 98%);
+  --color-border: hsl(214.3 31.8% 91.4%);
+  --color-input: hsl(214.3 31.8% 91.4%);
+  --color-ring: hsl(221.2 83.2% 53.3%);
+
+  /* Extended tokens */
+  --color-success: hsl(142.1 76.2% 36.3%);
+  --color-success-foreground: hsl(210 40% 98%);
+  --color-warning: hsl(38 92% 50%);
+  --color-warning-foreground: hsl(0 0% 100%);
+  --color-info: hsl(199 89% 48%);
+  --color-info-foreground: hsl(0 0% 100%);
+  --color-glass: rgba(255 255 255 / 0.12);
+  --color-glass-border: rgba(255 255 255 / 0.20);
+  --color-overlay: rgba(0 0 0 / 0.60);
+
+  /* Radius */
+  --radius-none: 0;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-full: 9999px;
+
+  /* Typography */
+  --font-sans: 'Inter', system-ui;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: hsl(222.2 84% 4.9%);
+    --color-foreground: hsl(210 40% 98%);
+    --color-primary: hsl(217.2 91.2% 59.8%);
+    --color-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --color-secondary: hsl(217.2 32.6% 17.5%);
+    --color-secondary-foreground: hsl(210 40% 98%);
+    --color-muted: hsl(217.2 32.6% 17.5%);
+    --color-muted-foreground: hsl(215 20.2% 65.1%);
+    --color-accent: hsl(217.2 32.6% 17.5%);
+    --color-accent-foreground: hsl(210 40% 98%);
+    --color-destructive: hsl(0 62.8% 30.6%);
+    --color-destructive-foreground: hsl(210 40% 98%);
+    --color-border: hsl(217.2 32.6% 17.5%);
+    --color-input: hsl(217.2 32.6% 17.5%);
+    --color-ring: hsl(224.3 76.3% 48%);
+
+    --color-success: hsl(142.1 70.6% 45.3%);
+    --color-success-foreground: hsl(0 0% 100%);
+    --color-warning: hsl(38 92% 55%);
+    --color-warning-foreground: hsl(0 0% 100%);
+    --color-info: hsl(199 89% 52%);
+    --color-info-foreground: hsl(0 0% 100%);
+    --color-glass: rgba(0 0 0 / 0.25);
+    --color-glass-border: rgba(255 255 255 / 0.10);
+    --color-overlay: rgba(0 0 0 / 0.75);
+  }
+}
+
+/* Reduced-motion — disables all transitions/animations */
+@media (prefers-reduced-motion: reduce) {
+  * { 
+    transition-duration: 0ms !important; 
+    animation-duration: 0ms !important; 
+  }
+}

package/src/tokens/index.ts

@@ -0,0 +1,10 @@
+export * from './colors';
+export * from './typography';
+export * from './layout';
+export * from './motion';
+
+// Export themes
+export * from './themes/default';
+export * from './themes/dark';
+export * from './themes/ocean';
+export * from './themes/rose';

package/src/tokens/layout.ts

@@ -0,0 +1,121 @@
+/**
+ * Nativecn Spacing, Radius, and Shadow Tokens
+ * Single source of truth for all layout metrics.
+ */
+import type { ViewStyle } from 'react-native';
+
+// ─── Spacing (4pt grid) ───────────────────────────────────────────────────────
+
+export const spacing = {
+  0: 0,
+  0.5: 2,
+  1: 4,
+  1.5: 6,
+  2: 8,
+  2.5: 10,
+  3: 12,
+  3.5: 14,
+  4: 16,
+  5: 20,
+  6: 24,
+  7: 28,
+  8: 32,
+  9: 36,
+  10: 40,
+  11: 44,
+  12: 48,
+  14: 56,
+  16: 64,
+  20: 80,
+  24: 96,
+  28: 112,
+  32: 128,
+  36: 144,
+  40: 160,
+  48: 192,
+  56: 224,
+  64: 256,
+  72: 288,
+  80: 320,
+  96: 384,
+} as const;
+
+export type SpacingKey = keyof typeof spacing;
+
+// ─── Border Radius ─────────────────────────────────────────────────────────────
+
+export const radius = {
+  none: 0,
+  sm: 4,
+  md: 6,
+  lg: 8,
+  xl: 12,
+  '2xl': 16,
+  '3xl': 24,
+  full: 9999,
+} as const;
+
+export type RadiusKey = keyof typeof radius;
+
+// ─── Elevation / Shadows ─────────────────────────────────────────────────────
+
+/**
+ * Cross-platform elevation specs.
+ * iOS uses shadowColor/offset/radius/opacity; Android uses elevation.
+ */
+export const shadows = {
+  none: {
+    shadowColor: 'transparent',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+  },
+  sm: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.05,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  md: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 6,
+    elevation: 3,
+  },
+  lg: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.12,
+    shadowRadius: 12,
+    elevation: 6,
+  },
+  xl: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.15,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  '2xl': {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.20,
+    shadowRadius: 32,
+    elevation: 16,
+  },
+} as const satisfies Record<string, ViewStyle>;
+
+export type ShadowKey = keyof typeof shadows;
+
+// ─── Border Widths ─────────────────────────────────────────────────────────────
+
+export const borderWidths = {
+  0: 0,
+  1: 1,
+  2: 2,
+  4: 4,
+  8: 8,
+} as const;

package/src/tokens/motion.ts

@@ -0,0 +1,94 @@
+/**
+ * Nativecn Motion Tokens
+ * All spring configs, durations, and easing functions in one place.
+ * Every animated component MUST reference these — never hardcode values.
+ */
+import type { WithSpringConfig } from 'react-native-reanimated';
+
+// ─── Spring Presets ────────────────────────────────────────────────────────────
+
+export type SpringPreset = keyof typeof springPresets;
+
+/**
+ * Physics-based spring configurations.
+ * Choose the preset based on the semantic meaning of the motion:
+ * - snappy  → immediate feedback (button presses, toggles)
+ * - bouncy  → playful entrance (FAB expand, modal pop)
+ * - smooth  → standard transitions (drawer, dialog)
+ * - gentle  → subtle motion (progress, skeleton)
+ */
+export const springPresets = {
+  snappy: {
+    damping: 20,
+    stiffness: 400,
+    mass: 0.5,
+    overshootClamping: false,
+  },
+  bouncy: {
+    damping: 12,
+    stiffness: 200,
+    mass: 0.8,
+    overshootClamping: false,
+  },
+  smooth: {
+    damping: 28,
+    stiffness: 280,
+    mass: 1.0,
+    overshootClamping: false,
+  },
+  gentle: {
+    damping: 40,
+    stiffness: 150,
+    mass: 1.2,
+    overshootClamping: false,
+  },
+  /** Zero-duration spring for prefers-reduced-motion */
+  instant: {
+    damping: 1000,
+    stiffness: 1000,
+    mass: 0.001,
+    overshootClamping: true,
+  },
+} as const satisfies Record<string, WithSpringConfig>;
+
+// ─── Duration Scale ────────────────────────────────────────────────────────────
+
+export const durations = {
+  instant: 0,
+  fast: 120,
+  normal: 200,
+  slow: 350,
+  xslow: 500,
+} as const;
+
+export type DurationKey = keyof typeof durations;
+
+// ─── Easing Curves ────────────────────────────────────────────────────────────
+
+export const easings = {
+  easeOut: [0.0, 0.0, 0.2, 1.0] as [number, number, number, number],
+  easeIn: [0.4, 0.0, 1.0, 1.0] as [number, number, number, number],
+  easeInOut: [0.4, 0.0, 0.2, 1.0] as [number, number, number, number],
+  linear: [0.0, 0.0, 1.0, 1.0] as [number, number, number, number],
+} as const;
+
+// ─── Press Scale Values ────────────────────────────────────────────────────────
+
+/** Standard scale-down values when a pressable is actively pressed. */
+export const pressScales = {
+  none: 1.0,
+  subtle: 0.98,
+  normal: 0.96,
+  strong: 0.93,
+} as const;
+
+export type PressScaleKey = keyof typeof pressScales;
+
+// ─── Stagger Delays ────────────────────────────────────────────────────────────
+
+/** Delay increments for staggered list animations */
+export const staggerDelays = {
+  fast: 30,
+  normal: 60,
+  slow: 100,
+} as const;

package/src/tokens/themes/dark.ts

@@ -0,0 +1,7 @@
+import { darkColors } from '../colors';
+import type { SemanticColors } from '../colors';
+
+/**
+ * The default dark theme for Nativecn.
+ */
+export const darkTheme: SemanticColors = darkColors;

package/src/tokens/themes/default.ts

@@ -0,0 +1,8 @@
+import { lightColors } from '../colors';
+import type { SemanticColors } from '../colors';
+
+/**
+ * The default light theme for Nativecn.
+ * Represents the standard Shadcn UI aesthetic.
+ */
+export const defaultTheme: SemanticColors = lightColors;

package/src/tokens/themes/ocean.ts

@@ -0,0 +1,28 @@
+import type { SemanticColors } from '../colors';
+import { lightColors } from '../colors';
+
+/**
+ * Ocean theme (Light)
+ * A deep blue/teal aesthetic.
+ */
+export const oceanThemeLight: SemanticColors = {
+  ...lightColors,
+  primary: { DEFAULT: '199 89% 48%', foreground: '0 0% 100%' }, // Cyan/Ocean primary
+  ring: '199 89% 48%',
+  background: '210 20% 98%', // Very slightly blue-tinted background
+  foreground: '222 47% 11%',
+};
+
+/**
+ * Ocean theme (Dark)
+ */
+export const oceanThemeDark: SemanticColors = {
+  ...oceanThemeLight,
+  background: '222 47% 11%', // Deep navy background
+  foreground: '210 20% 98%',
+  card: { DEFAULT: '222 47% 11%', foreground: '210 20% 98%' },
+  popover: { DEFAULT: '222 47% 11%', foreground: '210 20% 98%' },
+  muted: { DEFAULT: '217.2 32.6% 17.5%', foreground: '215 20.2% 65.1%' },
+  border: '217.2 32.6% 17.5%',
+  input: '217.2 32.6% 17.5%',
+};

package/src/tokens/themes/rose.ts

@@ -0,0 +1,29 @@
+import type { SemanticColors } from '../colors';
+import { lightColors } from '../colors';
+
+/**
+ * Rose theme (Light)
+ */
+export const roseThemeLight: SemanticColors = {
+  ...lightColors,
+  primary: { DEFAULT: '346.8 77.2% 49.8%', foreground: '355.7 100% 97.3%' }, // Rose primary
+  ring: '346.8 77.2% 49.8%',
+};
+
+/**
+ * Rose theme (Dark)
+ */
+export const roseThemeDark: SemanticColors = {
+  ...roseThemeLight,
+  background: '20 14.3% 4.1%',
+  foreground: '0 0% 95%',
+  card: { DEFAULT: '24 9.8% 10%', foreground: '0 0% 95%' },
+  popover: { DEFAULT: '20 14.3% 4.1%', foreground: '0 0% 95%' },
+  primary: { DEFAULT: '346.8 77.2% 49.8%', foreground: '355.7 100% 97.3%' },
+  secondary: { DEFAULT: '12 6.5% 15.1%', foreground: '0 0% 98%' },
+  muted: { DEFAULT: '12 6.5% 15.1%', foreground: '24 5.4% 63.9%' },
+  accent: { DEFAULT: '12 6.5% 15.1%', foreground: '0 0% 98%' },
+  destructive: { DEFAULT: '0 62.8% 30.6%', foreground: '0 85.7% 97.3%' },
+  border: '12 6.5% 15.1%',
+  input: '12 6.5% 15.1%',
+};

package/src/tokens/typography.ts

@@ -0,0 +1,127 @@
+/**
+ * Nativecn Typography Tokens
+ * All font sizes, weights, line heights, and font families.
+ */
+import type { TextStyle } from 'react-native';
+
+export const fontFamilies = {
+  sans: 'Inter',
+  mono: 'JetBrains Mono',
+  /** Fallback: uses the system default */
+  system: undefined,
+} as const;
+
+export const fontSizes = {
+  display: 48,
+  h1: 36,
+  h2: 30,
+  h3: 24,
+  h4: 20,
+  lg: 18,
+  base: 16,
+  sm: 14,
+  xs: 12,
+  '2xs': 10,
+} as const;
+
+export type FontSizeKey = keyof typeof fontSizes;
+
+export const fontWeights = {
+  thin: '100',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+} as const satisfies Record<string, TextStyle['fontWeight']>;
+
+export const lineHeights = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+} as const;
+
+export const letterSpacings = {
+  tighter: -0.8,
+  tight: -0.4,
+  normal: 0,
+  wide: 0.4,
+  wider: 0.8,
+  widest: 1.6,
+} as const;
+
+/** Pre-composed text style sets for semantic typography components */
+export const textStyles = {
+  display: {
+    fontSize: fontSizes.display,
+    fontWeight: fontWeights.bold,
+    lineHeight: fontSizes.display * lineHeights.tight,
+    letterSpacing: letterSpacings.tight,
+  },
+  h1: {
+    fontSize: fontSizes.h1,
+    fontWeight: fontWeights.bold,
+    lineHeight: fontSizes.h1 * lineHeights.tight,
+    letterSpacing: letterSpacings.tight,
+  },
+  h2: {
+    fontSize: fontSizes.h2,
+    fontWeight: fontWeights.semibold,
+    lineHeight: fontSizes.h2 * lineHeights.snug,
+    letterSpacing: letterSpacings.tight,
+  },
+  h3: {
+    fontSize: fontSizes.h3,
+    fontWeight: fontWeights.semibold,
+    lineHeight: fontSizes.h3 * lineHeights.snug,
+    letterSpacing: letterSpacings.normal,
+  },
+  h4: {
+    fontSize: fontSizes.h4,
+    fontWeight: fontWeights.semibold,
+    lineHeight: fontSizes.h4 * lineHeights.normal,
+    letterSpacing: letterSpacings.normal,
+  },
+  bodyLg: {
+    fontSize: fontSizes.lg,
+    fontWeight: fontWeights.normal,
+    lineHeight: fontSizes.lg * lineHeights.relaxed,
+    letterSpacing: letterSpacings.normal,
+  },
+  body: {
+    fontSize: fontSizes.base,
+    fontWeight: fontWeights.normal,
+    lineHeight: fontSizes.base * lineHeights.normal,
+    letterSpacing: letterSpacings.normal,
+  },
+  bodySm: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.normal,
+    lineHeight: fontSizes.sm * lineHeights.normal,
+    letterSpacing: letterSpacings.normal,
+  },
+  caption: {
+    fontSize: fontSizes.xs,
+    fontWeight: fontWeights.normal,
+    lineHeight: fontSizes.xs * lineHeights.normal,
+    letterSpacing: letterSpacings.wide,
+  },
+  code: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.normal,
+    fontFamily: fontFamilies.mono,
+    lineHeight: fontSizes.sm * lineHeights.relaxed,
+    letterSpacing: letterSpacings.normal,
+  },
+  label: {
+    fontSize: fontSizes.sm,
+    fontWeight: fontWeights.medium,
+    lineHeight: fontSizes.sm * lineHeights.normal,
+    letterSpacing: letterSpacings.normal,
+  },
+} as const satisfies Record<string, TextStyle>;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "types": ["nativewind/types", "jest"],
+    "exactOptionalPropertyTypes": false,
+    "rootDir": ".",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}