@campxdev/react-native-blueprint 0.1.12 → 0.1.14

package/src/global.css

@@ -1,417 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  /* === 1. SURFACES === */
-  --background: 210 17% 97%;  /* #F7F8FA */
-  --card: 0 0% 100%;  /* #FFFFFF */
-  --popover: 0 0% 100%;  /* #FFFFFF */
-  --muted: 0 0% 100%;  /* #FFFFFF - Same as card for consistency */
-
-  /* === 2. TEXT === */
-  --foreground: 0 0% 7%;  /* #121212 */
-  --card-foreground: 0 0% 7%;  /* #121212 */
-  --popover-foreground: 0 0% 7%;  /* #121212 */
-  --muted-foreground: 0 0% 7% / 0.7;  /* #121212 at 70% opacity */
-
-  /* === 3. PRIMARY (Main buttons, CTAs) === */
-  --primary: 200 13% 11%;  /* #161A1D - Near black */
-  --primary-foreground: 0 0% 100%;  /* #FFFFFF */
-
-  /* === 4. SECONDARY (Secondary buttons) === */
-  --secondary: 218 14% 53%;  /* #64748B */
-  --secondary-foreground: 0 0% 100%;  /* #FFFFFF */
-
-  /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
-  --accent: 356 76% 57%;  /* #E43341 - Crimson */
-  --accent-foreground: 0 0% 100%;  /* #FFFFFF */
-
-  /* === 6. BORDERS === */
-  --border: 214 32% 84%;  /* #CBD5E1 */
-  --input: 214 32% 84%;  /* #CBD5E1 */
-  --ring: 200 13% 11%;  /* #161A1D - Same as primary */
-
-  /* === 7. HIGHLIGHTS === */
-  --destructive: 356 87% 57%;  /* #F2353C - Red */
-  --destructive-foreground: 0 0% 100%;
-  --success: 88 37% 52%;  /* #88B053 - Green */
-  --info: 189 45% 51%;  /* #4BAABE - Blue */
-  --warning: 28 81% 57%;  /* #ED9035 - Orange */
-
-  /* === 8. BRAND COLORS (Custom - use manually) === */
-  --brand-1: 252 97% 25%;  /* #1E027F - Deep violet */
-  --brand-2: 356 76% 57%;  /* #E43341 - Crimson */
-  --brand-3: 304 69% 33%;  /* #931C88 - Magenta */
-
-  /* === CHART COLORS === */
-  --chart-1: 88 37% 52%;  /* #88B053 - Green */
-  --chart-2: 189 45% 51%;  /* #4BAABE - Blue */
-  --chart-3: 28 81% 57%;  /* #ED9035 - Orange */
-  --chart-4: 254 46% 42%;  /* #573DAB - Purple */
-  --chart-5: 348 78% 60%;  /* #EA4A6B - Pink */
-
-  /* === SIDEBAR === */
-  --sidebar: 0 0% 100%;  /* #FFFFFF */
-  --sidebar-foreground: 0 0% 7%;  /* #121212 */
-  --sidebar-primary: 214 14% 64%;  /* #94A3B8 */
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 356 76% 57%;  /* #E43341 */
-  --sidebar-accent-foreground: 0 0% 100%;
-  --sidebar-border: 214 32% 84%;  /* #CBD5E1 */
-  --sidebar-ring: 214 14% 64%;  /* #94A3B8 */
-
-  /* === FONTS === */
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  /* === PRIMITIVE SPACING TOKENS (From Figma) === */
-  /* These are your base spacing values - rarely changed directly */
-  --space-0: 0px;    /* S0 */
-  --space-1: 2px;    /* S1 */
-  --space-2: 4px;    /* S2 */
-  --space-3: 8px;    /* S3 */
-  --space-4: 12px;   /* S4 */
-  --space-5: 16px;   /* S5 */
-  --space-6: 20px;   /* S6 */
-  --space-7: 24px;   /* S7 */
-  --space-8: 32px;   /* S8 */
-  --space-9: 48px;   /* S9 */
-  --space-10: 52px;  /* S10 */
-
-  /* === SEMANTIC SPACING TOKENS === */
-  /* These reference primitives and are what components actually use */
-  /* Change these to globally update spacing across all components */
-  --spacing-none: var(--space-0);
-  --spacing-xs: var(--space-2);      /* Tight spacing - small gaps */
-  --spacing-sm: var(--space-3);      /* Small spacing - compact layouts */
-  --spacing-md: var(--space-5);      /* Medium spacing - default gaps */
-  --spacing-lg: var(--space-7);      /* Large spacing - breathing room */
-  --spacing-xl: var(--space-8);      /* Extra large - section spacing */
-  --spacing-2xl: var(--space-9);     /* 2X large - major sections */
-
-  /* Component-specific spacing (can be changed independently) */
-  --spacing-button-x: var(--space-5);    /* Button horizontal padding */
-  --spacing-button-y: var(--space-4);    /* Button vertical padding */
-  --spacing-card: var(--space-5);        /* Card padding */
-  --spacing-input-x: var(--space-4);     /* Input horizontal padding */
-  --spacing-input-y: var(--space-3);     /* Input vertical padding */
-
-  /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
-  /* Your exact radius values: 0, 2, 4, 8, 12, 20, 24, 32, 48 */
-  --radius-0: 0px;    /* R0 */
-  --radius-1: 2px;    /* R1 */
-  --radius-2: 4px;    /* R2 */
-  --radius-3: 8px;    /* R3 */
-  --radius-4: 12px;   /* R4 */
-  --radius-5: 20px;   /* R5 */
-  --radius-6: 24px;   /* R6 */
-  --radius-7: 32px;   /* R7 */
-  --radius-8: 48px;   /* R8 */
-
-  /* === SEMANTIC RADIUS TOKENS === */
-  /* Pre-defined names for convenience - you can use primitives directly in components */
-  --radius-none: var(--radius-0);    /* 0px */
-  --radius-sm: var(--radius-2);      /* 4px */
-  --radius-md: var(--radius-4);      /* 12px */
-  --radius-lg: var(--radius-5);      /* 20px */
-  --radius-xl: var(--radius-6);      /* 24px */
-  --radius-2xl: var(--radius-7);     /* 32px */
-  --radius-full: 9999px;             /* Fully rounded - pills, avatars */
-
-  /* Corner smoothing value (0-1, where 1 = 100% smoothing) */
-  --corner-smoothing: 1.0;  /* 100% Apple-style smoothing for all corners */
-
-  /* === ICON SIZES (From Figma) === */
-  --icon-sm: 16px;   /* WH3 - Small icons */
-  --icon-md: 20px;   /* WH2 - Medium icons */
-  --icon-lg: 24px;   /* WH1 - Large icons */
-
-  /* === SHADOWS === */
-  --shadow-x: 0;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: 0 0% 0%;
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-
-  /* === LEGACY (kept for backwards compatibility) === */
-  --radius: var(--radius-3);  /* Default radius - use semantic tokens instead */
-  --spacing: var(--space-2);  /* Default spacing - use semantic tokens instead */
-  --tracking-normal: 0em;
-}
-
-.dark {
-  /* === 1. SURFACES === */
-  --background: 200 13% 10%;  /* #161A1D */
-  --card: 180 14% 13%;  /* #1D2727 */
-  --popover: 180 14% 13%;  /* #1D2727 */
-  --muted: 180 14% 13%;  /* #1D2727 - Same as card for consistency */
-
-  /* === 2. TEXT === */
-  --foreground: 0 0% 100%;  /* #FFFFFF */
-  --card-foreground: 0 0% 100%;  /* #FFFFFF */
-  --popover-foreground: 0 0% 100%;  /* #FFFFFF */
-  --muted-foreground: 0 0% 100% / 0.7;  /* #FFFFFF at 70% opacity */
-
-  /* === 3. PRIMARY (Main buttons, CTAs) === */
-  --primary: 210 13% 85%;  /* #D0D5D9 - Light grey (softer than white) */
-  --primary-foreground: 200 13% 11%;  /* #161A1D - Dark text */
-
-  /* === 4. SECONDARY (Secondary buttons) === */
-  --secondary: 218 14% 53%;  /* #64748B */
-  --secondary-foreground: 0 0% 100%;  /* #FFFFFF */
-
-  /* === 5. TERTIARY/ACCENT (Highlights, selections) === */
-  --accent: 356 76% 57%;  /* #E43341 - Crimson */
-  --accent-foreground: 0 0% 100%;  /* #FFFFFF */
-
-  /* === 6. BORDERS === */
-  --border: 215 25% 27%;  /* #334155 - Balanced slate-700 */
-  --input: 215 25% 27%;  /* #334155 */
-  --ring: 210 13% 85%;  /* #D0D5D9 - Same as primary */
-
-  /* === 7. HIGHLIGHTS === */
-  --destructive: 356 87% 57%;  /* #F2353C - Red */
-  --destructive-foreground: 0 0% 100%;
-  --success: 88 37% 52%;  /* #88B053 - Green */
-  --info: 189 45% 51%;  /* #4BAABE - Blue */
-  --warning: 28 81% 57%;  /* #ED9035 - Orange */
-
-  /* === 8. BRAND COLORS (Custom - use manually) === */
-  --brand-1: 244 100% 73%;  /* #8075FF - Cool violet */
-  --brand-2: 356 76% 57%;  /* #E43341 - Crimson */
-  --brand-3: 291 46% 61%;  /* #C160D4 - Light magenta */
-
-  /* === CHART COLORS === */
-  --chart-1: 88 37% 52%;  /* #88B053 - Green */
-  --chart-2: 189 45% 51%;  /* #4BAABE - Blue */
-  --chart-3: 28 81% 57%;  /* #ED9035 - Orange */
-  --chart-4: 254 46% 42%;  /* #573DAB - Purple */
-  --chart-5: 348 78% 60%;  /* #EA4A6B - Pink */
-
-  /* === SIDEBAR === */
-  --sidebar: 180 14% 13%;  /* #1D2727 */
-  --sidebar-foreground: 0 0% 100%;  /* #FFFFFF */
-  --sidebar-primary: 214 14% 64%;  /* #94A3B8 */
-  --sidebar-primary-foreground: 200 13% 10%;  /* #161A1D */
-  --sidebar-accent: 356 76% 57%;  /* #E43341 */
-  --sidebar-accent-foreground: 0 0% 100%;
-  --sidebar-border: 215 25% 27%;  /* #334155 */
-  --sidebar-ring: 214 14% 64%;  /* #94A3B8 */
-
-  /* === FONTS === */
-  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  /* === PRIMITIVE SPACING TOKENS (From Figma) === */
-  /* Spacing values are the same in light and dark mode */
-  --space-0: 0px;    /* S0 */
-  --space-1: 2px;    /* S1 */
-  --space-2: 4px;    /* S2 */
-  --space-3: 8px;    /* S3 */
-  --space-4: 12px;   /* S4 */
-  --space-5: 16px;   /* S5 */
-  --space-6: 20px;   /* S6 */
-  --space-7: 24px;   /* S7 */
-  --space-8: 32px;   /* S8 */
-  --space-9: 48px;   /* S9 */
-  --space-10: 52px;  /* S10 */
-
-  /* === SEMANTIC SPACING TOKENS === */
-  --spacing-none: var(--space-0);
-  --spacing-xs: var(--space-2);
-  --spacing-sm: var(--space-3);
-  --spacing-md: var(--space-5);
-  --spacing-lg: var(--space-7);
-  --spacing-xl: var(--space-8);
-  --spacing-2xl: var(--space-9);
-
-  /* Component-specific spacing */
-  --spacing-button-x: var(--space-5);
-  --spacing-button-y: var(--space-4);
-  --spacing-card: var(--space-5);
-  --spacing-input-x: var(--space-4);
-  --spacing-input-y: var(--space-3);
-
-  /* === PRIMITIVE RADIUS TOKENS (From Your Design System) === */
-  /* Radius values are the same in light and dark mode */
-  --radius-0: 0px;    /* R0 */
-  --radius-1: 2px;    /* R1 */
-  --radius-2: 4px;    /* R2 */
-  --radius-3: 8px;    /* R3 */
-  --radius-4: 12px;   /* R4 */
-  --radius-5: 20px;   /* R5 */
-  --radius-6: 24px;   /* R6 */
-  --radius-7: 32px;   /* R7 */
-  --radius-8: 48px;   /* R8 */
-
-  /* === SEMANTIC RADIUS TOKENS === */
-  --radius-none: var(--radius-0);    /* 0px */
-  --radius-sm: var(--radius-2);      /* 4px */
-  --radius-md: var(--radius-4);      /* 12px */
-  --radius-lg: var(--radius-5);      /* 20px */
-  --radius-xl: var(--radius-6);      /* 24px */
-  --radius-2xl: var(--radius-7);     /* 32px */
-  --radius-full: 9999px;             /* Fully rounded */
-
-  /* Corner smoothing value */
-  --corner-smoothing: 1.0;  /* 100% smoothing */
-
-  /* === ICON SIZES (From Figma) === */
-  --icon-sm: 16px;   /* WH3 */
-  --icon-md: 20px;   /* WH2 */
-  --icon-lg: 24px;   /* WH1 */
-
-  /* === SHADOWS === */
-  --shadow-x: 0;
-  --shadow-y: 1px;
-  --shadow-blur: 3px;
-  --shadow-spread: 0px;
-  --shadow-opacity: 0.1;
-  --shadow-color: 0 0% 0%;
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-
-  /* === LEGACY (kept for backwards compatibility) === */
-  --radius: var(--radius-3);
-  --spacing: var(--space-2);
-  --tracking-normal: 0em;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  /* Brand colors */
-  --color-brand-1: var(--brand-1);
-  --color-brand-2: var(--brand-2);
-  --color-brand-3: var(--brand-3);
-
-  /* Highlight colors */
-  --color-success: var(--success);
-  --color-info: var(--info);
-  --color-warning: var(--warning);
-
-  /* Chart colors */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /* Sidebar colors */
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --font-serif: var(--font-serif);
-
-  /* Primitive spacing tokens (S0-S10 from Figma) */
-  --space-0: var(--space-0);
-  --space-1: var(--space-1);
-  --space-2: var(--space-2);
-  --space-3: var(--space-3);
-  --space-4: var(--space-4);
-  --space-5: var(--space-5);
-  --space-6: var(--space-6);
-  --space-7: var(--space-7);
-  --space-8: var(--space-8);
-  --space-9: var(--space-9);
-  --space-10: var(--space-10);
-
-  /* Semantic spacing tokens */
-  --spacing-none: var(--spacing-none);
-  --spacing-xs: var(--spacing-xs);
-  --spacing-sm: var(--spacing-sm);
-  --spacing-md: var(--spacing-md);
-  --spacing-lg: var(--spacing-lg);
-  --spacing-xl: var(--spacing-xl);
-  --spacing-2xl: var(--spacing-2xl);
-
-  /* Component-specific spacing */
-  --spacing-button-x: var(--spacing-button-x);
-  --spacing-button-y: var(--spacing-button-y);
-  --spacing-card: var(--spacing-card);
-  --spacing-input-x: var(--spacing-input-x);
-  --spacing-input-y: var(--spacing-input-y);
-
-  /* Primitive radius tokens (R0-R8) */
-  --radius-0: var(--radius-0);
-  --radius-1: var(--radius-1);
-  --radius-2: var(--radius-2);
-  --radius-3: var(--radius-3);
-  --radius-4: var(--radius-4);
-  --radius-5: var(--radius-5);
-  --radius-6: var(--radius-6);
-  --radius-7: var(--radius-7);
-  --radius-8: var(--radius-8);
-
-  /* Semantic radius tokens */
-  --radius-none: var(--radius-none);
-  --radius-sm: var(--radius-sm);
-  --radius-md: var(--radius-md);
-  --radius-lg: var(--radius-lg);
-  --radius-xl: var(--radius-xl);
-  --radius-2xl: var(--radius-2xl);
-  --radius-full: var(--radius-full);
-
-
-  /* Corner smoothing */
-  --corner-smoothing: var(--corner-smoothing);
-
-  /* Icon sizes */
-  --icon-sm: var(--icon-sm);
-  --icon-md: var(--icon-md);
-  --icon-lg: var(--icon-lg);
-
-  /* Shadows */
-  --shadow-2xs: var(--shadow-2xs);
-  --shadow-xs: var(--shadow-xs);
-  --shadow-sm: var(--shadow-sm);
-  --shadow: var(--shadow);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
-}

package/src/lib/slot-helpers.ts

@@ -1,57 +0,0 @@
-/**
- * Properly typed Slot component wrappers
- *
- * The @rn-primitives/slot package has complex type inference that doesn't
- * properly expose className props. These wrappers provide correct typing.
- */
-
-import * as SlotPrimitive from '@rn-primitives/slot';
-import type {
-  PressableProps,
-  ViewProps,
-  TextProps,
-  TextInputProps,
-} from 'react-native';
-
-// Create properly typed versions of Slot components
-export const SlotView = SlotPrimitive.View as React.ForwardRefExoticComponent<
-  ViewProps & {
-    className?: string;
-    children?: React.ReactNode;
-    cssInterop?: boolean;
-  }
->;
-
-export const SlotPressable =
-  SlotPrimitive.Pressable as React.ForwardRefExoticComponent<
-    PressableProps & {
-      className?: string;
-      children?: React.ReactNode;
-      cssInterop?: boolean;
-    }
-  >;
-
-export const SlotText = SlotPrimitive.Text as React.ForwardRefExoticComponent<
-  TextProps & {
-    className?: string;
-    children?: React.ReactNode;
-    cssInterop?: boolean;
-  }
->;
-
-export const SlotTextInput =
-  SlotPrimitive.TextInput as React.ForwardRefExoticComponent<
-    TextInputProps & {
-      className?: string;
-      children?: React.ReactNode;
-      cssInterop?: boolean;
-    }
-  >;
-
-// Re-export Slot for cases where it's used directly
-export const Slot = SlotPrimitive.Slot as React.ForwardRefExoticComponent<
-  ViewProps & {
-    className?: string;
-    children?: React.ReactNode;
-  }
->;

package/src/types/components.d.ts

@@ -1,38 +0,0 @@
-/**
- * Component-specific type declarations
- */
-
-import type { TextInputProps, TextInput as RNTextInput } from 'react-native';
-import type { ComponentType } from 'react';
-
-// Input component types
-export interface InputProps extends Omit<TextInputProps, 'editable'> {
-  className?: string;
-  placeholderClassName?: string;
-  editable?: boolean;
-}
-
-export type TextInput = RNTextInput;
-
-// NativeWind cssInterop types
-declare module 'nativewind' {
-  /**
-   * Apply CSS interop to a component, allowing it to accept className prop
-   * @param component - The component to apply interop to
-   * @param mapping - Mapping configuration
-   * @returns The component with className support
-   */
-  export function cssInterop<T extends ComponentType<any>>(
-    component: T,
-    mapping: Record<
-      string,
-      string | { target: string; nativeStyleToProp?: Record<string, string> }
-    >
-  ): T;
-
-  export function useColorScheme(): {
-    colorScheme: 'light' | 'dark';
-    setColorScheme: (scheme: 'light' | 'dark') => void;
-    toggleColorScheme: () => void;
-  };
-}