@campxdev/react-native-blueprint 0.1.9 → 0.1.12

package/lib/typescript/module/src/lib/cornerRadius.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Corner Radius System
+ *
+ * Automatically calculates the appropriate corner radius based on element dimensions.
+ *
+ * Design Rule:
+ * - Elements < 80px height → 12px radius
+ * - Elements ≥ 80px height → 20px radius
+ * - All corners use 100% smoothing (Apple-style squircles)
+ *
+ * Examples:
+ * - Button (50px height) → 12px
+ * - Chip (24px height) → 12px
+ * - Checkbox (16px height) → 4px (special case for very small)
+ * - Small card (60px height) → 12px
+ * - Large card (200px height) → 20px
+ * - Dialog (400px height) → 20px
+ */
+/**
+ * Primitive radius values from your design system
+ * Your exact values: 0, 2, 4, 8, 12, 20, 24, 32, 48
+ */
+export declare const RADIUS: {
+    readonly R0: 0;
+    readonly R1: 2;
+    readonly R2: 4;
+    readonly R3: 8;
+    readonly R4: 12;
+    readonly R5: 20;
+    readonly R6: 24;
+    readonly R7: 32;
+    readonly R8: 48;
+};
+/**
+ * Calculate corner radius based on element height
+ *
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Button (50px height)
+ * const radius = getRadiusForHeight(50); // Returns 12
+ *
+ * // Checkbox (16px height)
+ * const radius = getRadiusForHeight(16); // Returns 4
+ *
+ * // Card (160px height)
+ * const radius = getRadiusForHeight(160); // Returns 20
+ * ```
+ */
+export declare function getRadiusForHeight(height: number): number;
+/**
+ * Calculate corner radius based on smallest dimension (width or height)
+ * Useful for square or nearly-square elements
+ *
+ * @param width - Element width in pixels
+ * @param height - Element height in pixels
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Square checkbox (16×16)
+ * const radius = getRadiusForDimensions(16, 16); // Returns 4
+ *
+ * // Wide button (200×50)
+ * const radius = getRadiusForDimensions(200, 50); // Returns 12 (based on height)
+ *
+ * // Tall card (300×200)
+ * const radius = getRadiusForDimensions(300, 200); // Returns 20 (based on width)
+ * ```
+ */
+export declare function getRadiusForDimensions(width: number, height: number): number;
+/**
+ * Get corner radius with custom thresholds
+ * Advanced usage when you need different breakpoints
+ *
+ * @param height - Element height in pixels
+ * @param options - Custom threshold options
+ * @returns Corner radius in pixels
+ *
+ * @example
+ * ```tsx
+ * // Use 20px radius for elements ≥ 100px instead of 80px
+ * const radius = getCustomRadius(90, { largeThreshold: 100 });
+ * ```
+ */
+export declare function getCustomRadius(height: number, options?: {
+    tinyThreshold?: number;
+    smallThreshold?: number;
+    tinyRadius?: number;
+    smallRadius?: number;
+    largeRadius?: number;
+}): number;
+/**
+ * Corner smoothing value (0-1)
+ * 1.0 = 100% smoothing (Apple-style squircles)
+ */
+export declare const CORNER_SMOOTHING = 1;
+/**
+ * Preset radius values for common use cases
+ * Use these when you know the exact size you want
+ */
+export declare const RADIUS_PRESET: {
+    readonly none: 0;
+    readonly tiny: 4;
+    readonly small: 12;
+    readonly large: 20;
+    readonly pill: 24;
+    readonly circle: 9999;
+};
+//# sourceMappingURL=cornerRadius.d.ts.map

package/lib/typescript/module/src/lib/cornerRadius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cornerRadius.d.ts","sourceRoot":"","sources":["../../../../../src/lib/cornerRadius.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;GAGG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAWX;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAUzD;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAG5E;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE;IACR,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GACA,MAAM,CAkBR;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,IAAM,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAC"}

package/lib/typescript/module/src/lib/fonts.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Font configuration object
+ * Returns font family names that work with system fonts by default
+ *
+ * If you've loaded custom fonts (Poppins/Heebo), the components will use them automatically
+ * when you specify fontFamily in styles.
+ */
+export declare const fonts: {
+    Poppins_400Regular: string;
+    Poppins_600SemiBold: string;
+    Poppins_800ExtraBold: string;
+    Heebo_400Regular: string;
+    Heebo_600SemiBold: string;
+};
+export type FontName = keyof typeof fonts;
+//# sourceMappingURL=fonts.d.ts.map

package/lib/typescript/module/src/lib/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../../../src/lib/fonts.ts"],"names":[],"mappings":"AAiFA;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;;;;;;CAQjB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/module/src/lib/slot-helpers.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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 type { PressableProps, ViewProps, TextProps, TextInputProps } from 'react-native';
+export declare const SlotView: React.ForwardRefExoticComponent<ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotPressable: React.ForwardRefExoticComponent<PressableProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotText: React.ForwardRefExoticComponent<TextProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const SlotTextInput: React.ForwardRefExoticComponent<TextInputProps & {
+    className?: string;
+    children?: React.ReactNode;
+    cssInterop?: boolean;
+}>;
+export declare const Slot: React.ForwardRefExoticComponent<ViewProps & {
+    className?: string;
+    children?: React.ReactNode;
+}>;
+//# sourceMappingURL=slot-helpers.d.ts.map

package/lib/typescript/module/src/lib/slot-helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot-helpers.d.ts","sourceRoot":"","sources":["../../../../../src/lib/slot-helpers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACf,MAAM,cAAc,CAAC;AAGtB,eAAO,MAAM,QAAQ,EAAyB,KAAK,CAAC,yBAAyB,CAC3E,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,EACG,KAAK,CAAC,yBAAyB,CACxD,cAAc,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEJ,eAAO,MAAM,QAAQ,EAAyB,KAAK,CAAC,yBAAyB,CAC3E,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAEF,eAAO,MAAM,aAAa,EACG,KAAK,CAAC,yBAAyB,CACxD,cAAc,GAAG;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CACF,CAAC;AAGJ,eAAO,MAAM,IAAI,EAAyB,KAAK,CAAC,yBAAyB,CACvE,SAAS,GAAG;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF,CAAC"}

package/lib/typescript/module/src/lib/theme.d.ts

@@ -0,0 +1,87 @@
+import { type Theme } from '@react-navigation/native';
+/**
+ * Custom theme colors based on your Figma design tokens
+ * Using your categorized color system:
+ * 1. Surfaces - Page and card backgrounds
+ * 2. Text - All text colors with opacity variants
+ * 3. Primary - Main buttons and CTAs
+ * 4. Secondary - Secondary buttons
+ * 5. Tertiary/Accent - Highlights and selections
+ * 6. Borders - All borders and dividers
+ * 7. Highlights - Status/semantic colors
+ * 8. Brand - Brand accent colors (use sparingly)
+ */
+export declare const THEME: {
+    light: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
+    dark: {
+        background: string;
+        card: string;
+        popover: string;
+        muted: string;
+        foreground: string;
+        cardForeground: string;
+        popoverForeground: string;
+        mutedForeground: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        border: string;
+        input: string;
+        ring: string;
+        destructive: string;
+        destructiveForeground: string;
+        success: string;
+        info: string;
+        warning: string;
+        brand1: string;
+        brand2: string;
+        brand3: string;
+        chart1: string;
+        chart2: string;
+        chart3: string;
+        chart4: string;
+        chart5: string;
+        radius: string;
+    };
+};
+/**
+ * React Navigation theme configuration
+ * Maps our custom theme to React Navigation's theme structure
+ */
+export declare const NAV_THEME: Record<'light' | 'dark', Theme>;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/module/src/lib/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/lib/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAE/E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,KAAK,CAyBrD,CAAC"}

package/lib/typescript/module/src/lib/utils.d.ts

@@ -0,0 +1,111 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence
+ *
+ * Combines clsx (for conditional classes) and tailwind-merge (for deduplication)
+ * to create a single, optimized class string. Later classes override earlier ones.
+ *
+ * @param {...ClassValue[]} inputs - Class values to merge (strings, objects, arrays)
+ * @returns {string} Merged and deduplicated class string
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ *
+ * // With conditionals
+ * cn('text-base', isDark && 'text-white', 'font-bold')
+ * // => 'text-base text-white font-bold' (if isDark is true)
+ *
+ * // With objects
+ * cn({
+ *   'bg-primary': isPrimary,
+ *   'bg-secondary': !isPrimary
+ * })
+ *
+ * // Common component pattern
+ * cn('base-classes', variant === 'large' && 'large-classes', className)
+ * ```
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Applies dark mode classes with optional runtime control
+ *
+ * Provides three modes of operation:
+ * 1. Static mode (darkMode undefined): Returns classes with `dark:` prefix for automatic switching
+ * 2. Dark mode (darkMode true): Strips `dark:` prefix and returns only dark classes
+ * 3. Light mode (darkMode false): Returns only base classes
+ *
+ * This function is useful when you need to programmatically control dark mode
+ * instead of relying on Tailwind's automatic dark mode detection.
+ *
+ * @param {string} baseClasses - Classes to apply in light mode
+ * @param {string} darkClasses - Classes to apply in dark mode (with or without `dark:` prefix)
+ * @param {boolean} [darkMode] - Optional dark mode override (true/false/undefined)
+ * @returns {string} Merged class string based on mode
+ *
+ * @example
+ * ```tsx
+ * // Static mode - use Tailwind's automatic detection
+ * cnWithDark('bg-white', 'dark:bg-black')
+ * // => 'bg-white dark:bg-black'
+ *
+ * // Programmatic dark mode
+ * const { isDark } = useTheme();
+ * cnWithDark('bg-white', 'dark:bg-black', isDark)
+ * // => 'bg-black' (if isDark is true)
+ * // => 'bg-white' (if isDark is false)
+ *
+ * // With multiple classes
+ * cnWithDark(
+ *   'bg-white text-black border-gray-200',
+ *   'dark:bg-black dark:text-white dark:border-gray-800',
+ *   isDark
+ * )
+ * ```
+ *
+ * @see {@link cn} for basic class merging
+ * @see {@link useTheme} for accessing theme state
+ */
+export declare function cnWithDark(baseClasses: string, darkClasses: string, darkMode?: boolean): string;
+/**
+ * Get color value based on theme mode
+ *
+ * Simple utility to select between light and dark color values based on the
+ * current theme. Primarily used for native platforms where Tailwind CSS
+ * classes don't work with inline styles.
+ *
+ * @param {string} lightColor - Color value for light mode (CSS color, HSL, RGB, hex)
+ * @param {string} darkColor - Color value for dark mode (CSS color, HSL, RGB, hex)
+ * @param {boolean} [darkMode] - Whether dark mode is active (defaults to light if undefined)
+ * @returns {string} The appropriate color value for the current mode
+ *
+ * @example
+ * ```tsx
+ * import { useTheme } from './ThemeProvider';
+ *
+ * function MyComponent() {
+ *   const { isDark } = useTheme();
+ *
+ *   // Get color for inline styles
+ *   const textColor = getThemeColor('#000000', '#ffffff', isDark);
+ *   const bgColor = getThemeColor('hsl(0, 0%, 100%)', 'hsl(0, 0%, 10%)', isDark);
+ *
+ *   return (
+ *     <View style={{ backgroundColor: bgColor }}>
+ *       <NativeText style={{ color: textColor }}>
+ *         Theme-aware text
+ *       </NativeText>
+ *     </View>
+ *   );
+ * }
+ *
+ * // Without theme context (defaults to light)
+ * const color = getThemeColor('#000', '#fff'); // => '#000'
+ * ```
+ *
+ * @see {@link useTheme} for accessing theme state
+ * @see {@link getThemeColorValue} from theme-config for more advanced usage
+ */
+export declare function getThemeColor(lightColor: string, darkColor: string, darkMode?: boolean): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/module/src/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAiBR;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,wBAAgB,aAAa,CAC3B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,EACjB,QAAQ,CAAC,EAAE,OAAO,GACjB,MAAM,CAKR"}