@campxdev/react-native-blueprint 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 CAMPX
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,358 @@
+# react-native-blueprint
+
+A production-ready React Native UI component library built with NativeWind (Tailwind CSS) and shadcn/ui design patterns. Features 35+ fully customizable, accessible components for iOS, Android, and Web.
+
+## Features
+
+- 🎨 **35+ Components** - Complete UI kit including buttons, forms, overlays, navigation, and data display
+- 🌓 **Dark Mode** - Built-in theme support with CSS variables
+- ♿ **Accessible** - ARIA-compliant components with screen reader support
+- 📱 **Cross-Platform** - Works seamlessly on iOS, Android, and Web
+- 🎯 **Type-Safe** - Full TypeScript support with IntelliSense
+- 🚀 **NativeWind** - Tailwind CSS styling for React Native
+- 🔧 **Customizable** - Easy to theme and extend with Tailwind utilities
+- ⚡ **Performant** - Built on React Native Reanimated for smooth animations
+
+## Installation
+
+```sh
+npm install react-native-blueprint
+# or
+yarn add react-native-blueprint
+```
+
+### Peer Dependencies
+
+This library requires the following peer dependencies:
+
+```sh
+npm install react react-native nativewind tailwindcss react-native-reanimated react-native-gesture-handler react-native-svg
+```
+
+### Setup
+
+1. **Configure NativeWind:**
+
+Create or update `tailwind.config.js`:
+
+```js
+const { hairlineWidth } = require('nativewind/theme');
+
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/react-native-blueprint/src/**/*.{ts,tsx}',
+  ],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
+```
+
+2. **Import global styles:**
+
+Create `global.css` and import the theme:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+```
+
+3. **Configure Metro:**
+
+Update `metro.config.js`:
+
+```js
+const { getDefaultConfig } = require('expo/metro-config');
+const { withNativeWind } = require('nativewind/metro');
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: './global.css' });
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { Button, Card, Text, Input, Alert } from 'react-native-blueprint';
+import { View } from 'react-native';
+
+function App() {
+  return (
+    <View className="flex-1 p-4 bg-background">
+      <Card>
+        <Card.Header>
+          <Card.Title>Welcome</Card.Title>
+          <Card.Description>Get started with react-native-blueprint</Card.Description>
+        </Card.Header>
+        <Card.Content>
+          <Input placeholder="Enter your name" />
+        </Card.Content>
+        <Card.Footer>
+          <Button>
+            <Text>Submit</Text>
+          </Button>
+        </Card.Footer>
+      </Card>
+
+      <Alert>
+        <Alert.Title>Info</Alert.Title>
+        <Alert.Description>
+          This is a sample alert component.
+        </Alert.Description>
+      </Alert>
+    </View>
+  );
+}
+```
+
+## Available Components
+
+### Layout & Structure
+- **Button** - Customizable button with variants (default, destructive, outline, ghost, link)
+- **Card** - Container with header, content, and footer sections
+- **Separator** - Horizontal or vertical divider
+- **Skeleton** - Loading placeholder with shimmer effect
+
+### Form Components
+- **Input** - Text input field
+- **Textarea** - Multi-line text input
+- **Checkbox** - Checkbox with label support
+- **Radio Group** - Radio button group
+- **Switch** - Toggle switch
+- **Select** - Dropdown select menu
+- **Label** - Form field label
+- **Slider** - Range slider input
+
+### Navigation
+- **Tabs** - Tab navigation component
+- **Accordion** - Collapsible content sections
+- **Collapsible** - Expandable/collapsible content
+- **Menubar** - Menu bar with nested items
+
+### Overlays & Dialogs
+- **Dialog** - Modal dialog
+- **Alert Dialog** - Alert/confirmation dialog
+- **Popover** - Floating popover
+- **Tooltip** - Hover tooltip
+- **Dropdown Menu** - Context menu dropdown
+- **Context Menu** - Right-click context menu
+- **Hover Card** - Card that appears on hover
+
+### Feedback & Status
+- **Alert** - Informational alert box
+- **Toast** - Toast notification
+- **Progress** - Progress bar
+- **Badge** - Status badge
+
+### Data Display
+- **Table** - Data table with sorting
+- **Avatar** - User avatar with fallback
+- **Text** - Typography component with variants
+- **Icon** - Icon component (powered by lucide-react-native)
+
+### Utilities
+- **Aspect Ratio** - Container with fixed aspect ratio
+- **Toggle** - Toggle button
+- **Toggle Group** - Group of toggle buttons
+
+## Theming
+
+Components use CSS variables for theming. Customize your app's appearance by modifying the CSS variables in `global.css`:
+
+```css
+:root {
+  --primary: 220 90% 56%;        /* Blue */
+  --secondary: 280 70% 60%;      /* Purple */
+  --destructive: 0 84% 60%;      /* Red */
+  --radius: 0.75rem;             /* Border radius */
+}
+```
+
+## Dark Mode
+
+Toggle dark mode by adding/removing the `dark` class on your root element:
+
+```tsx
+import { useColorScheme } from 'react-native';
+
+function App() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <View className={colorScheme === 'dark' ? 'dark' : ''}>
+      {/* Your app */}
+    </View>
+  );
+}
+```
+
+## Example App
+
+Check out the `/example` directory for a complete demo app showcasing all components:
+
+```sh
+cd example
+npm install
+npm run ios     # Run on iOS simulator
+npm run android # Run on Android emulator
+```
+
+## TypeScript Support
+
+All components are fully typed with TypeScript. Import types as needed:
+
+```tsx
+import type { ButtonProps, CardProps } from 'react-native-blueprint';
+```
+
+## Contributing
+
+Contributions are welcome! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'feat: add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Workflow
+
+1. Clone the repo and install dependencies:
+   ```sh
+   git clone https://github.com/campx-org/react-native-blueprint.git
+   cd react-native-blueprint
+   yarn install
+   ```
+
+2. Run the example app:
+   ```sh
+   yarn example ios
+   # or
+   yarn example android
+   ```
+
+3. Make your changes in `/src`
+
+4. Run type checking and linting:
+   ```sh
+   yarn typecheck
+   yarn lint
+   ```
+
+5. Build the library:
+   ```sh
+   yarn prepare
+   ```
+
+## License
+
+MIT © [CAMPX](https://github.com/campx-org)
+
+## Credits
+
+- Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
+- Inspired by [shadcn/ui](https://ui.shadcn.com)
+- Styled with [NativeWind](https://nativewind.dev)
+- Primitives from [@rn-primitives](https://github.com/mrzachnugent/react-native-reusables)
+
+## Support
+
+- GitHub Issues: [Report a bug](https://github.com/campx-org/react-native-blueprint/issues)
+- Discussions: [Ask questions](https://github.com/campx-org/react-native-blueprint/discussions)
+
+---
+
+Made with ❤️ by CAMPX

package/lib/module/app/_layout.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import '../../global.css';
+import { PortalHost } from '@rn-primitives/portal';
+import { StatusBar } from 'react-native';
+import { NAV_THEME } from "../lib/theme.js";
+import { ThemeProvider } from '@react-navigation/native';
+import { useColorScheme } from 'nativewind';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function RootLayout({
+  children
+}) {
+  const {
+    colorScheme
+  } = useColorScheme();
+  return /*#__PURE__*/_jsxs(ThemeProvider, {
+    value: NAV_THEME[colorScheme ?? 'light'],
+    children: [/*#__PURE__*/_jsx(StatusBar, {
+      barStyle: colorScheme === 'dark' ? 'light-content' : 'dark-content'
+    }), children, /*#__PURE__*/_jsx(PortalHost, {})]
+  });
+}
+//# sourceMappingURL=_layout.js.map

package/lib/module/app/_layout.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["PortalHost","StatusBar","NAV_THEME","ThemeProvider","useColorScheme","jsx","_jsx","jsxs","_jsxs","RootLayout","children","colorScheme","value","barStyle"],"sourceRoot":"../../../src","sources":["app/_layout.tsx"],"mappings":";;AAAA,OAAO,kBAAkB;AACzB,SAASA,UAAU,QAAQ,uBAAuB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAO5C,eAAe,SAASC,UAAUA,CAAC;EAAEC;AAA0B,CAAC,EAAE;EAChE,MAAM;IAAEC;EAAY,CAAC,GAAGP,cAAc,CAAC,CAAC;EAExC,oBACEI,KAAA,CAACL,aAAa;IAACS,KAAK,EAAEV,SAAS,CAACS,WAAW,IAAI,OAAO,CAAE;IAAAD,QAAA,gBACtDJ,IAAA,CAACL,SAAS;MACRY,QAAQ,EAAEF,WAAW,KAAK,MAAM,GAAG,eAAe,GAAG;IAAe,CACrE,CAAC,EACDD,QAAQ,eACTJ,IAAA,CAACN,UAAU,IAAE,CAAC;EAAA,CACD,CAAC;AAEpB","ignoreList":[]}

package/lib/module/components/theme-config.js

@@ -0,0 +1,265 @@
+"use strict";
+
+/**
+ * Comprehensive Dark Theme Configuration
+ *
+ * This file provides complete theme tokens and utilities for consistent
+ * dark mode support across all components in the Blueprint library.
+ *
+ * Best Practices:
+ * - Uses HSL color format for better color manipulation
+ * - Provides semantic color tokens (not raw colors)
+ * - Maintains proper contrast ratios for accessibility (WCAG AA/AAA)
+ * - Consistent with Tailwind CSS conventions
+ */
+
+/**
+ * Color tokens for light and dark themes
+ * Each token follows the pattern: purpose-variant
+ */
+export const THEME_COLORS = {
+  light: {
+    // Base colors
+    background: 'hsl(0, 0%, 100%)',
+    // Pure white
+    foreground: 'hsl(0, 0%, 3.9%)',
+    // Near black
+
+    // Card colors
+    card: 'hsl(0, 0%, 100%)',
+    cardForeground: 'hsl(0, 0%, 3.9%)',
+    // Popover colors
+    popover: 'hsl(0, 0%, 100%)',
+    popoverForeground: 'hsl(0, 0%, 3.9%)',
+    // Primary action colors
+    primary: 'hsl(0, 0%, 9%)',
+    primaryForeground: 'hsl(0, 0%, 98%)',
+    // Secondary action colors
+    secondary: 'hsl(0, 0%, 96.1%)',
+    secondaryForeground: 'hsl(0, 0%, 9%)',
+    // Muted/subtle colors
+    muted: 'hsl(0, 0%, 96.1%)',
+    mutedForeground: 'hsl(0, 0%, 45.1%)',
+    // Accent colors
+    accent: 'hsl(0, 0%, 96.1%)',
+    accentForeground: 'hsl(0, 0%, 9%)',
+    // Destructive/error colors
+    destructive: 'hsl(0, 84.2%, 60.2%)',
+    destructiveForeground: 'hsl(0, 0%, 98%)',
+    // Border and input colors
+    border: 'hsl(0, 0%, 89.8%)',
+    input: 'hsl(0, 0%, 89.8%)',
+    ring: 'hsl(0, 0%, 63%)',
+    // Success colors
+    success: 'hsl(142, 76%, 36%)',
+    successForeground: 'hsl(0, 0%, 98%)',
+    // Warning colors
+    warning: 'hsl(38, 92%, 50%)',
+    warningForeground: 'hsl(0, 0%, 9%)',
+    // Info colors
+    info: 'hsl(199, 89%, 48%)',
+    infoForeground: 'hsl(0, 0%, 98%)'
+  },
+  dark: {
+    // Base colors
+    background: 'hsl(0, 0%, 3.9%)',
+    // Near black
+    foreground: 'hsl(0, 0%, 98%)',
+    // Near white
+
+    // Card colors
+    card: 'hsl(0, 0%, 3.9%)',
+    cardForeground: 'hsl(0, 0%, 98%)',
+    // Popover colors
+    popover: 'hsl(0, 0%, 3.9%)',
+    popoverForeground: 'hsl(0, 0%, 98%)',
+    // Primary action colors (inverted from light)
+    primary: 'hsl(0, 0%, 98%)',
+    primaryForeground: 'hsl(0, 0%, 9%)',
+    // Secondary action colors
+    secondary: 'hsl(0, 0%, 14.9%)',
+    secondaryForeground: 'hsl(0, 0%, 98%)',
+    // Muted/subtle colors
+    muted: 'hsl(0, 0%, 14.9%)',
+    mutedForeground: 'hsl(0, 0%, 63.9%)',
+    // Accent colors
+    accent: 'hsl(0, 0%, 14.9%)',
+    accentForeground: 'hsl(0, 0%, 98%)',
+    // Destructive/error colors
+    destructive: 'hsl(0, 62.8%, 30.6%)',
+    destructiveForeground: 'hsl(0, 0%, 98%)',
+    // Border and input colors
+    border: 'hsl(0, 0%, 14.9%)',
+    input: 'hsl(0, 0%, 14.9%)',
+    ring: 'hsl(0, 0%, 45%)',
+    // Success colors
+    success: 'hsl(142, 76%, 36%)',
+    successForeground: 'hsl(0, 0%, 98%)',
+    // Warning colors
+    warning: 'hsl(38, 92%, 50%)',
+    warningForeground: 'hsl(0, 0%, 9%)',
+    // Info colors
+    info: 'hsl(199, 89%, 48%)',
+    infoForeground: 'hsl(0, 0%, 98%)'
+  }
+};
+
+/**
+ * Convert HSL string to React Native ColorValue
+ * Useful for native platform styling where HSL needs to be converted
+ */
+export function hslToRgb(hsl) {
+  // Extract h, s, l from "hsl(h, s%, l%)" format
+  const match = hsl.match(/hsl\((\d+),\s*(\d+(?:\.\d+)?)%,\s*(\d+(?:\.\d+)?)%\)/);
+  if (!match || !match[1] || !match[2] || !match[3]) return hsl;
+  const h = parseInt(match[1], 10) / 360;
+  const s = parseFloat(match[2]) / 100;
+  const l = parseFloat(match[3]) / 100;
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const hue2rgb = (p, q, t) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = x => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+/**
+ * Get theme color value based on current theme mode
+ * Automatically selects the appropriate color from light/dark theme
+ */
+export function getThemeColorValue(colorKey, isDark, asRgb = false) {
+  const color = isDark ? THEME_COLORS.dark[colorKey] : THEME_COLORS.light[colorKey];
+  return asRgb ? hslToRgb(color) : color;
+}
+
+/**
+ * Component-specific dark mode class mappings
+ * Use these to ensure consistent styling across all components
+ */
+export const DARK_MODE_CLASSES = {
+  // Text variants
+  text: {
+    default: 'dark:text-foreground',
+    muted: 'dark:text-muted-foreground',
+    primary: 'dark:text-primary-foreground',
+    secondary: 'dark:text-secondary-foreground',
+    accent: 'dark:text-accent-foreground',
+    destructive: 'dark:text-destructive-foreground',
+    card: 'dark:text-card-foreground'
+  },
+  // Background variants
+  background: {
+    default: 'dark:bg-background',
+    card: 'dark:bg-card',
+    primary: 'dark:bg-primary',
+    secondary: 'dark:bg-secondary',
+    muted: 'dark:bg-muted',
+    accent: 'dark:bg-accent',
+    destructive: 'dark:bg-destructive',
+    popover: 'dark:bg-popover'
+  },
+  // Border variants
+  border: {
+    default: 'dark:border-border',
+    input: 'dark:border-input',
+    primary: 'dark:border-primary',
+    muted: 'dark:border-muted',
+    accent: 'dark:border-accent',
+    destructive: 'dark:border-destructive'
+  },
+  // Interactive states
+  state: {
+    hover: 'dark:hover:bg-accent',
+    active: 'dark:active:bg-accent',
+    focus: 'dark:focus:ring-ring',
+    disabled: 'dark:disabled:opacity-50'
+  }
+};
+
+/**
+ * Helper to combine base classes with dark mode classes
+ * Ensures consistent application of dark mode styles
+ */
+export function withDarkMode(baseClass, darkClass, additionalClasses) {
+  return [baseClass, darkClass, additionalClasses].filter(Boolean).join(' ');
+}
+
+/**
+ * Pre-configured class strings for common component patterns
+ * Use these for consistent styling across the library
+ */
+export const THEME_PRESETS = {
+  // Card-like containers
+  card: 'bg-card text-card-foreground dark:bg-card dark:text-card-foreground border border-border dark:border-border',
+  // Input fields
+  input: 'bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input',
+  // Buttons - primary
+  buttonPrimary: 'bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground',
+  // Buttons - secondary
+  buttonSecondary: 'bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground',
+  // Buttons - outline
+  buttonOutline: 'bg-background text-foreground dark:bg-background dark:text-foreground border border-input dark:border-input',
+  // Buttons - ghost
+  buttonGhost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent dark:hover:text-accent-foreground',
+  // Destructive elements
+  destructive: 'bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground',
+  // Muted/subtle elements
+  muted: 'bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground',
+  // Popover/dropdown
+  popover: 'bg-popover text-popover-foreground dark:bg-popover dark:text-popover-foreground border border-border dark:border-border'
+};
+
+/**
+ * Semantic color map for native components
+ * Use these for StyleSheet-based styling
+ */
+export function getNativeThemeColors(isDark) {
+  return {
+    background: hslToRgb(getThemeColorValue('background', isDark)),
+    foreground: hslToRgb(getThemeColorValue('foreground', isDark)),
+    card: hslToRgb(getThemeColorValue('card', isDark)),
+    cardForeground: hslToRgb(getThemeColorValue('cardForeground', isDark)),
+    primary: hslToRgb(getThemeColorValue('primary', isDark)),
+    primaryForeground: hslToRgb(getThemeColorValue('primaryForeground', isDark)),
+    secondary: hslToRgb(getThemeColorValue('secondary', isDark)),
+    secondaryForeground: hslToRgb(getThemeColorValue('secondaryForeground', isDark)),
+    muted: hslToRgb(getThemeColorValue('muted', isDark)),
+    mutedForeground: hslToRgb(getThemeColorValue('mutedForeground', isDark)),
+    accent: hslToRgb(getThemeColorValue('accent', isDark)),
+    accentForeground: hslToRgb(getThemeColorValue('accentForeground', isDark)),
+    destructive: hslToRgb(getThemeColorValue('destructive', isDark)),
+    destructiveForeground: hslToRgb(getThemeColorValue('destructiveForeground', isDark)),
+    border: hslToRgb(getThemeColorValue('border', isDark)),
+    input: hslToRgb(getThemeColorValue('input', isDark)),
+    ring: hslToRgb(getThemeColorValue('ring', isDark))
+  };
+}
+
+/**
+ * Type-safe theme color keys
+ */
+
+/**
+ * Check if a color key exists in the theme
+ */
+export function isValidThemeColor(key) {
+  return key in THEME_COLORS.light;
+}
+//# sourceMappingURL=theme-config.js.map