@campxdev/react-native-blueprint 0.1.11 → 0.1.12

package/README.md

@@ -23,6 +23,22 @@ This library requires **NativeWind v4+** to be configured in your React Native p
 
 This library works with **both Expo and Bare React Native CLI** projects. Choose the installation method for your project type.
 
+### Quick Start
+
+```bash
+# Install the package
+npm install @campxdev/react-native-blueprint
+# or
+yarn add @campxdev/react-native-blueprint
+
+# Install required peer dependencies (minimum)
+npm install @rn-primitives/slot @rn-primitives/types nativewind tailwindcss tailwindcss-animate
+# or
+yarn add @rn-primitives/slot @rn-primitives/types nativewind tailwindcss tailwindcss-animate
+```
+
+**Note:** Only install the `@rn-primitives` packages for components you actually use. See the [Component Dependencies](#component-dependencies) table below.
+
 ### For Bare React Native CLI Projects (Recommended)
 
 Perfect for apps like **CampxMobileApp** using React Native CLI without Expo.
@@ -241,7 +257,11 @@ If you want to use Re.Pack in your project:
 
 ## Usage
 
-### Basic Example
+The library supports two import methods:
+
+### Option 1: Main Package Import (Default)
+
+Import all components from the main package. You only need to install the `@rn-primitives` packages for components you actually use.
 
 ```tsx
 // Import CSS at the top of your app entry point (do this ONCE)
@@ -285,6 +305,50 @@ function App() {
 }
 ```
 
+### Option 2: Tree-Shakeable Imports (Recommended for Production)
+
+Import components individually for better tree-shaking and smaller bundle sizes. This ensures you only bundle what you use.
+
+```tsx
+// Import CSS at the top of your app entry point (do this ONCE)
+import '@campxdev/react-native-blueprint/global.css';
+
+import { Button } from '@campxdev/react-native-blueprint/Button';
+import { Card } from '@campxdev/react-native-blueprint/Card';
+import { Text } from '@campxdev/react-native-blueprint/Text';
+import { Input } from '@campxdev/react-native-blueprint/Input';
+import { Alert } from '@campxdev/react-native-blueprint/Alert';
+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
@@ -342,6 +406,72 @@ function App() {
 - **Toggle** - Toggle button
 - **Toggle Group** - Group of toggle buttons
 
+## Component Dependencies
+
+All peer dependencies are **optional** - only install what you need based on the components you use.
+
+### Core Dependencies (Required for Most Components)
+
+```bash
+npm install @rn-primitives/slot @rn-primitives/types
+```
+
+### Component-Specific Dependencies
+
+| Component | Required Packages | Notes |
+|-----------|------------------|-------|
+| **Accordion** | `@rn-primitives/accordion`<br/>`@rn-primitives/collapsible` | Collapsible content sections |
+| **Alert** | None | Always available |
+| **Alert-Dialog** | `@rn-primitives/alert-dialog`<br/>`@rn-primitives/portal` | Confirmation dialogs |
+| **AppBar** | None | Always available |
+| **Aspect-Ratio** | `@rn-primitives/aspect-ratio` | Fixed aspect ratio containers |
+| **Avatar** | `@rn-primitives/avatar` | User avatars with fallback |
+| **Badge** | None | Always available |
+| **Bottom-Sheet** | `@gorhom/bottom-sheet`<br/>`react-native-reanimated`<br/>`react-native-gesture-handler` | Bottom sheet modals |
+| **Button** | `@rn-primitives/slot` | Always available with slot |
+| **Card** | None | Always available |
+| **Checkbox** | `@rn-primitives/checkbox` | Checkbox inputs |
+| **Collapsible** | `@rn-primitives/collapsible` | Expandable content |
+| **Context-Menu** | `@rn-primitives/context-menu` | Right-click menus |
+| **Custom-Card** | None | Always available |
+| **Dialog** | `@rn-primitives/dialog`<br/>`@rn-primitives/portal` | Modal dialogs |
+| **Dropdown-Menu** | `@rn-primitives/dropdown-menu` | Dropdown menus |
+| **Floating-Action** | `react-native-floating-action` | Floating action button |
+| **Greeting-Card** | None | Always available |
+| **Hover-Card** | `@rn-primitives/hover-card` | Hover-triggered cards |
+| **Icon** | `lucide-react-native`<br/>`react-native-svg` | Icon library |
+| **Input** | None | Always available |
+| **Label** | `@rn-primitives/label` | Form labels |
+| **Menubar** | `@rn-primitives/menubar` | Menu bars |
+| **Native-Only-Animated-View** | `react-native-reanimated` | Animated views |
+| **NavBar** | None | Always available |
+| **Popover** | `@rn-primitives/popover` | Floating popovers |
+| **Progress** | `@rn-primitives/progress` | Progress bars |
+| **Radio-Group** | `@rn-primitives/radio-group` | Radio button groups |
+| **Select** | `@rn-primitives/select` | Dropdown selects |
+| **Separator** | None | Always available |
+| **SizedBox** | None | Always available |
+| **Skeleton** | None | Always available (loading states) |
+| **Slider** | `@rn-primitives/slider` | Range sliders |
+| **Switch** | `@rn-primitives/switch` | Toggle switches |
+| **Table** | None | Always available |
+| **Tabs** | `@rn-primitives/tabs` | Tab navigation |
+| **Text** | None | Always available |
+| **Textarea** | None | Always available |
+| **Theme-Toggle** | None | Always available |
+| **Toast** | Custom implementation | Toast notifications |
+| **Toggle** | `@rn-primitives/toggle` | Toggle buttons |
+| **Toggle-Group** | `@rn-primitives/toggle-group` | Toggle button groups |
+| **Tooltip** | `@rn-primitives/tooltip` | Hover tooltips |
+
+### Install All Optional Dependencies (For All Components)
+
+If you want to use all components without worrying about individual dependencies:
+
+```bash
+npm install @rn-primitives/accordion @rn-primitives/alert-dialog @rn-primitives/aspect-ratio @rn-primitives/avatar @rn-primitives/checkbox @rn-primitives/collapsible @rn-primitives/context-menu @rn-primitives/dialog @rn-primitives/dropdown-menu @rn-primitives/hover-card @rn-primitives/label @rn-primitives/menubar @rn-primitives/popover @rn-primitives/portal @rn-primitives/progress @rn-primitives/radio-group @rn-primitives/select @rn-primitives/separator @rn-primitives/slider @rn-primitives/slot @rn-primitives/switch @rn-primitives/tabs @rn-primitives/toggle @rn-primitives/toggle-group @rn-primitives/tooltip @rn-primitives/types @gorhom/bottom-sheet react-native-worklets
+```
+
 ## Theming
 
 Components use CSS variables for theming. Customize your app's appearance by modifying the CSS variables in `global.css`: