README.md

@@ -1,4 +1,4 @@
-## 🌸 Jacaranda
+![Discover Jacaranda](./docs/meta-jacaranda.jpg)
 
 ![NPM Version](https://img.shields.io/npm/v/jacaranda?style=flat)
 ![NPM License](https://img.shields.io/npm/l/jacaranda?style=flat)
@@ -10,20 +10,42 @@
 
 Provides a way to styling components in React Native with better experience and composability. The key feature is the ability to create multi-variants styles with a type-safe definition inspired by [Stitches](https://stitches.dev/docs/variants) and [CVA](https://cva.style/docs/getting-started/variants) (for React apps).
 
-#### Available properties:
+## Features
 
-- `base`: The base styles for the element.
-- `variants`: The different visual styles for the element.
-- `compoundVariants`: Styles that apply when multiple other variant conditions are met.
-- `defaultVariants`: Set a variant by default when no variant is provided.
+- 🎨 Token-based styling system
+- 🧩 Variant API for conditional styling
+- 🔄 Compound variants for complex style combinations
+- 🧠 Type-safe with full TypeScript support
+- 🏎️ Lightweight and performant
+- 🧪 Fully tested
 
 #### Roadmap
 
 - [x] Variants definition.
 - [x] Default variants.
 - [x] Support to define design tokens.
+- [x] Styled function to styling component using design tokens.
+- [x] Use `Stylesheet.create` instead a simple objects.
+- [x] Access to `props` from styles defined into `styled` components.
+- [ ] Type-safe registered tokens inside styles.
 - [ ] Default design tokens.
 
+### How to install
+
+Add the package to your project using one of the following:
+
+```sh
+yarn add jacaranda
+```
+
+```sh
+npm install jacaranda
+```
+
+```sh
+npx expo install jacaranda
+```
+
 ### Create your config file
 
 To configure `Jacaranda`, create a `jacaranda.config.ts` file (`.js` works too) to define your reusable design tokens and import the `defineTokens` function.
@@ -41,13 +63,13 @@ This function receives an object with the design tokens.
 - `fontSize`: Define your font sizes.
 - `lineHeight`: Define your line heights.
 
-And returns a `styles` function that you can use to style your components.
+And returns a `sva` function that you can use to style your components.
 
 ```tsx
 // jacaranda.config.ts
 import { defineTokens } from 'jacaranda';
 
-export const { styles } = defineTokens({
+export const { sva, tokens } = defineTokens({
   colors: {
     primary50: '#ecfeff',
     primary100: '#cffafe',
@@ -79,13 +101,20 @@ export const { styles } = defineTokens({
 
 ### Import and use it
 
-After the tokens are defined, you can use the design tokens in your components. You'll be importing the `styles` function from the `jacaranda.config.ts` file.
+After the tokens are defined, you can use the design tokens in your components. You'll be importing the `sva` function from the `jacaranda.config.ts` file.
+
+#### Available properties:
+
+- `base`: The base styles for the element.
+- `variants`: The different visual styles for the element.
+- `compoundVariants`: Styles that apply when multiple other variant conditions are met.
+- `defaultVariants`: Set a variant by default when no variant is provided.
 
 ```tsx
 // Button.tsx
 import { TouchableOpacity } from 'react-native';
 import { type VariantProps } from 'jacaranda';
-import { styles } from './jacaranda.config';
+import { sva } from './jacaranda.config';
 
 type ButtonProps = VariantProps<typeof buttonStyles> & {
   children?: React.ReactNode;
@@ -99,7 +128,7 @@ export const Button = (props: ButtonProps) => {
   );
 };
 
-const buttonStyles = styles({
+const buttonStyles = sva({
   base: {
     borderRadius: 8,
   },
@@ -137,4 +166,35 @@ import { type VariantProps } from 'jacaranda';
 type ButtonProps = VariantProps<typeof buttonStyles>;
 ```
 
+### Styled Components with Design Tokens
+
+Jacaranda provides a `styled` function similar to `styled-components` that allows you to create styled React Native components with access to your design tokens.
+
+#### Key features:
+
+- Create reusable styled components from any React Native component
+- Access design tokens using the `$` prefix (e.g. `$colors.primary50`)
+- Supports all React Native style properties
+
+```tsx
+import { View } from 'react-native';
+import { styled } from './jacaranda.config';
+
+const StyledView = styled(View)({
+  backgroundColor: '$colors.primary50',
+});
+
+export const Screen = () => {
+  return <StyledView></StyledView>;
+};
+```
+
+#### Access to `props` for conditional properties:
+
+```tsx
+const StyledView = styled(View)((props) => ({
+  backgroundColor: '$colors.primary50',
+}));
+```
+
 Copyright @ 2025 by Javier Diaz

package.json

@@ -6,13 +6,11 @@
     "ios": "pnpm run --filter './packages/app' ios",
     "ios-typescript": "pnpm run --filter './packages/app-typescript' ios",
     "prettier": "prettier --log-level=warn --ignore-unknown --no-error-on-unmatched-pattern",
-    "test": "vitest run --coverage"
+    "test": "pnpm run --filter './packages/jacaranda' test"
   },
   "devDependencies": {
-    "@vitest/coverage-v8": "3.0.7",
     "prettier": "3.5.2",
-    "typescript": "^5.7.3",
-    "vitest": "^3.0.7"
+    "typescript": "^5.7.3"
   },
   "engines": {
     "node": ">=18.x.x"

packages/app-typescript/App.tsx

@@ -1,28 +1,27 @@
+import { View } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, View } from 'react-native';
+import { styled } from './jacaranda.config';
 import { Typography } from './components/Typography';
 import { Button } from './components/Button';
 
+const StyledView = styled(View)({
+  flex: 1,
+  backgroundColor: '$colors.white',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$space.3',
+});
+
 export default function App() {
   return (
-    <View style={sty.container}>
+    <StyledView>
       <StatusBar style="auto" />
       <Button color="secondary">
         <Typography color="white">Hello</Typography>
       </Button>
       <Button color="primary">
         <Typography color="black">Hello</Typography>
       </Button>
-    </View>
+    </StyledView>
   );
 }
-
-const sty = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 12,
-  },
-});

packages/app-typescript/jacaranda.config.ts

@@ -1,6 +1,6 @@
 import { defineTokens } from 'jacaranda';
 
-export const { sva, tokens } = defineTokens({
+export const { sva, tokens, styled } = defineTokens({
   colors: {
     white: '#ffffff',
     black: '#000000',

packages/app/App.js

@@ -1,5 +1,5 @@
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { sva } from './jacaranda.config';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { sva, styled } from './jacaranda.config';
 
 export const Button = (props) => {
   return (
@@ -33,19 +33,18 @@ const buttonStyles = sva({
   },
 });
 
+const StyledView = styled(View)({
+  flex: 1,
+  backgroundColor: '$colors.white',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$space.3',
+});
+
 export default function App() {
   return (
-    <View style={sty.container}>
+    <StyledView>
       <Button intent="primary" />
-    </View>
+    </StyledView>
   );
 }
-
-const sty = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

packages/jacaranda/IMPROVEMENT_IDEAS.md

@@ -0,0 +1,37 @@
+# Ideas for Future Improvements to Jacaranda
+
+## Performance & Optimization
+
+1. **Memoization for style functions**: Implement React.memo or useMemo in the styled components to prevent unnecessary recalculations when props haven't changed.
+
+2. **Style caching system**: Cache resolved styles based on input parameters to avoid redundant style calculations, especially for complex compound variants.
+
+3. **Lazy evaluation**: Only resolve token references when they're actually used rather than upfront.
+
+## Enhanced Features
+
+1. **Media queries support**: Add responsive styling capabilities similar to how frameworks like Tailwind handle breakpoints.
+
+2. **Platform-specific styling**: Add built-in utilities for platform-specific styles (iOS vs Android).
+
+3. **Animation integration**: Built-in support for React Native Animated or Reanimated libraries.
+
+4. **Theme switching**: Add support for light/dark mode or custom themes with smooth transitions.
+
+## Developer Experience
+
+1. **TypeScript improvements**:
+
+   - Better autocomplete for token references
+   - Stricter type checking for style properties
+   - Improved error messages for invalid token references
+
+## Testing & Tooling
+
+1. **Snapshot testing utilities**: Dedicated utilities to make testing styled components easier.
+
+2. **Bundle size optimization**: Tree-shaking improvements and smaller runtime for production.
+
+## Ecosystem
+
+1. **Preset component library**: A collection of pre-styled, accessible components built with Jacaranda.

packages/jacaranda/package.json

@@ -1,8 +1,9 @@
 {
   "name": "jacaranda",
   "description": "A lightweight styling library for React Native",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.7",
   "license": "ISC",
+  "type": "module",
   "author": {
     "name": "Javier Diaz Chamorro",
     "email": "hey@coderdiaz.com",
@@ -14,7 +15,8 @@
     "build:esm": "swc ./src/index.ts --config-file ./.swcrc -o dist/index.js -C module.type=es6",
     "build:tsc": "tsc --project tsconfig.build.json",
     "check": "tsc --project tsconfig.json --noEmit",
-    "prepublishOnly": "pnpm build"
+    "prepublishOnly": "pnpm build",
+    "test": "vitest run --coverage"
   },
   "files": [
     "dist"
@@ -25,9 +27,20 @@
   "devDependencies": {
     "@swc/cli": "0.3.12",
     "@swc/core": "1.4.16",
-    "react-native": "^0.76.0"
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/react-native": "^12.4.3",
+    "@types/react": "~18.3.12",
+    "@vitest/coverage-v8": "3.0.7",
+    "jsdom": "^26.0.0",
+    "react": "^18.3.1",
+    "react-native": "^0.76.0",
+    "react-test-renderer": "18.2.0",
+    "vitest": "3.0.7",
+    "vitest-react-native": "^0.1.5"
   },
   "peerDependencies": {
+    "react": "*",
     "react-native": "*",
     "typescript": ">=4.5.5"
   },