@spelyco/react-native 0.0.1-e4f7457e-alpha → 1.0.0-alpha.1

package/README.md

@@ -1,13 +1,96 @@
 # @spelyco/react-native
 
-React Native UI components for Spelyco mobile projects.
+React Native UI components for Spelyco, powered by [Unistyles 3](https://www.unistyl.es).
 
 ---
 
 ## Install
 
 ```bash
-bun add @spelyco/react-native @spelyco/react-lib react react-native
+bun add @spelyco/react-native \
+  react-native-unistyles \
+  react-native-edge-to-edge \
+  react-native-nitro-modules \
+  react-native-reanimated
+```
+
+This package is published as TypeScript source. Your bundler (Metro for React Native / Expo) transpiles it directly. Make sure your Babel config processes it (see [Setup](#setup) below).
+
+---
+
+## Setup
+
+### 1. Babel plugin (required)
+
+Unistyles 3 ships a Babel plugin that wires up the C++ shadow tree bindings. Because this package is shipped as source, you must include it in `autoProcessPaths` so the plugin processes our files inside `node_modules`.
+
+`babel.config.js`:
+
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      [
+        "react-native-unistyles/plugin",
+        {
+          root: "src",
+          autoProcessPaths: ["@spelyco/react-native"],
+        },
+      ],
+    ],
+  };
+};
+```
+
+### 2. TypeScript theme augmentation (recommended)
+
+Because TypeScript module augmentations don't auto-propagate from `node_modules` packages, add a one-time augmentation file in your app so Unistyles' `StyleSheet.create((theme) => ...)` knows the theme shape:
+
+```ts
+// unistyles.d.ts (anywhere TypeScript picks it up, e.g. project root)
+import type { AppBreakpoints, AppTheme } from "@spelyco/react-native";
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes {
+    light: AppTheme;
+    dark: AppTheme;
+  }
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+}
+```
+
+### 3. Configure Unistyles at app startup
+
+Add this **as the very first line** of your entry file (e.g. `app/_layout.tsx` for Expo Router):
+
+```tsx
+import "@spelyco/react-native/configure";
+
+import { Stack } from "expo-router";
+
+export default function RootLayout() {
+  return <Stack screenOptions={{ headerShown: false }} />;
+}
+```
+
+`@spelyco/react-native/configure` is a side-effect import that runs `StyleSheet.configure` with the bundled themes before any component using `StyleSheet.create` is loaded. It enables `adaptiveThemes` (OS color scheme drives the active theme).
+
+For full control (custom themes, pinned initial theme, etc.) skip the side-effect import and call `configureUnistyles` yourself **before** importing any component that uses styles:
+
+```tsx
+import { configureUnistyles } from "@spelyco/react-native";
+
+configureUnistyles({ adaptiveThemes: false, initialTheme: "dark" });
+```
+
+### 4. New Architecture
+
+Unistyles 3 requires React Native's New Architecture. Make sure your `app.json` (Expo) has:
+
+```json
+{ "expo": { "newArchEnabled": true } }
 ```
 
 ---
@@ -16,47 +99,38 @@ bun add @spelyco/react-native @spelyco/react-lib react react-native
 
 ### `Button`
 
-A basic button built on React Native's `Pressable`. Supports variants and sizes.
-
 ```tsx
 import { Button } from "@spelyco/react-native";
 
-// Default
 <Button label="Tap me" />
-
-// Variants
 <Button label="Primary" variant="primary" />
 <Button label="Secondary" variant="secondary" />
 <Button label="Ghost" variant="ghost" />
-
-// Sizes
 <Button label="Small" size="sm" />
 <Button label="Large" size="lg" />
-
-// Disabled
 <Button label="Disabled" disabled />
-
-// With onPress
 <Button label="Save" onPress={() => console.log("saved")} />
 ```
 
-**Props:**
-
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `label` | `string` | required | The button text |
+| `label` | `string` | required | Button text |
 | `variant` | `"primary" \| "secondary" \| "ghost"` | `"primary"` | Visual style |
-| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Padding size |
+| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Padding/font size |
 | `disabled` | `boolean` | `false` | Disable the button |
-| `...rest` | `PressableProps` | — | Any React Native Pressable prop |
+| `...rest` | `PressableProps` | — | Any RN `Pressable` prop |
 
-**Variants:**
+---
 
-| Variant | Background |
-| --- | --- |
-| `primary` | Indigo (`#6366f1`) |
-| `secondary` | Light gray (`#e5e7eb`) |
-| `ghost` | Transparent |
+## Theme
+
+Re-exports for the default themes:
+
+```ts
+import { lightTheme, darkTheme, breakpoints, type AppTheme } from "@spelyco/react-native";
+```
+
+For now these are minimal placeholders (colors, spacing, radii). A proper design-system release will follow in a subsequent version.
 
 ---
 
@@ -65,7 +139,11 @@ import { Button } from "@spelyco/react-native";
 | Package | Version |
 | --- | --- |
 | `react` | `>=18` |
-| `react-native` | `>=0.73` |
+| `react-native` | `>=0.76` |
+| `react-native-unistyles` | `^3.2.4` |
+| `react-native-edge-to-edge` | `*` |
+| `react-native-nitro-modules` | `*` |
+| `react-native-reanimated` | `*` |
 
 ---
 

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,59 @@
+import type { PressableProps } from "react-native";
+import { type UnistylesVariants } from "react-native-unistyles";
+type ButtonVariants = UnistylesVariants<typeof styles>;
+export type ButtonProps = Omit<PressableProps, "children"> & ButtonVariants & {
+    label: string;
+};
+export declare const Button: ({ label, variant, size, disabled, style, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const styles: {
+    root: {
+        opacity: number;
+    } & {
+        backgroundColor: string;
+    } & {
+        backgroundColor: string;
+    } & {
+        backgroundColor: string;
+        borderWidth: number;
+        borderColor: string;
+    } & {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    } & {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    } & {
+        paddingHorizontal: number;
+        paddingVertical: number;
+    } & {
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    label: {
+        color: string;
+    } & {
+        color: string;
+    } & {
+        color: string;
+    } & {
+        fontSize: number;
+    } & {
+        fontSize: number;
+    } & {
+        fontSize: number;
+    } & {
+        fontWeight: "600";
+    };
+} & {
+    useVariants: (variants: {
+        variant?: "primary" | "secondary" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | "true" | undefined;
+    } | {
+        variant?: "primary" | "secondary" | "ghost" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,KAAK,cAAc,GAAG,iBAAiB,CAAC,OAAO,MAAM,CAAC,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GACxD,cAAc,GAAG;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,eAAO,MAAM,MAAM,GAAI,oDAOpB,WAAW,4CAab,CAAC;AAEF,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDT,CAAC"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps } from "./Button";
+export { Button } from "./Button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/configure.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=configure.d.ts.map

package/dist/configure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configure.d.ts","sourceRoot":"","sources":["../src/configure.ts"],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -1,11 +1,4 @@
-import * as react from 'react';
-import { PressableProps } from 'react-native';
-
-interface ButtonProps extends PressableProps {
-    variant?: "primary" | "secondary" | "ghost";
-    size?: "sm" | "md" | "lg";
-    label: string;
-}
-declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
-
-export { Button };
+export * from "./components";
+export { type AppBreakpoints, type AppTheme, breakpoints, darkTheme, lightTheme, } from "./themes";
+export { type ConfigureUnistylesOptions, configureUnistyles, type UnistylesInitialTheme, } from "./unistyles";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,QAAQ,EACb,WAAW,EACX,SAAS,EACT,UAAU,GACX,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,KAAK,yBAAyB,EAC9B,kBAAkB,EAClB,KAAK,qBAAqB,GAC3B,MAAM,aAAa,CAAC"}

package/dist/themes/dark.d.ts

@@ -0,0 +1,3 @@
+import type { AppTheme } from "./light";
+export declare const darkTheme: AppTheme;
+//# sourceMappingURL=dark.d.ts.map

package/dist/themes/dark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark.d.ts","sourceRoot":"","sources":["../../src/themes/dark.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,eAAO,MAAM,SAAS,EAAE,QA0BvB,CAAC"}

package/dist/themes/index.d.ts

@@ -0,0 +1,12 @@
+export { darkTheme } from "./dark";
+export type { AppTheme } from "./light";
+export { lightTheme } from "./light";
+export declare const breakpoints: {
+    readonly xs: 0;
+    readonly sm: 360;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export type AppBreakpoints = typeof breakpoints;
+//# sourceMappingURL=index.d.ts.map

package/dist/themes/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,OAAO,WAAW,CAAC"}

package/dist/themes/light.d.ts

@@ -0,0 +1,29 @@
+export interface AppTheme {
+    colors: {
+        primary: string;
+        onPrimary: string;
+        secondary: string;
+        onSecondary: string;
+        ghost: string;
+        onGhost: string;
+        background: string;
+        text: string;
+        border: string;
+        disabled: string;
+    };
+    spacing: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+    };
+    radii: {
+        sm: number;
+        md: number;
+        lg: number;
+        pill: number;
+    };
+}
+export declare const lightTheme: AppTheme;
+//# sourceMappingURL=light.d.ts.map

package/dist/themes/light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../src/themes/light.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,MAAM,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,OAAO,EAAE;QACP,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,eAAO,MAAM,UAAU,EAAE,QA0BxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+import type { AppBreakpoints, AppTheme } from "./themes";
+declare module "react-native-unistyles" {
+    interface UnistylesThemes {
+        light: AppTheme;
+        dark: AppTheme;
+    }
+    interface UnistylesBreakpoints extends AppBreakpoints {
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEzD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,eAAe;QAC9B,KAAK,EAAE,QAAQ,CAAC;QAChB,IAAI,EAAE,QAAQ,CAAC;KAChB;IACD,UAAiB,oBAAqB,SAAQ,cAAc;KAAG;CAChE"}

package/dist/unistyles.d.ts

@@ -0,0 +1,8 @@
+import "./types";
+export type UnistylesInitialTheme = "light" | "dark";
+export interface ConfigureUnistylesOptions {
+    initialTheme?: UnistylesInitialTheme;
+    adaptiveThemes?: boolean;
+}
+export declare const configureUnistyles: ({ initialTheme, adaptiveThemes, }?: ConfigureUnistylesOptions) => void;
+//# sourceMappingURL=unistyles.d.ts.map

package/dist/unistyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unistyles.d.ts","sourceRoot":"","sources":["../src/unistyles.ts"],"names":[],"mappings":"AAGA,OAAO,SAAS,CAAC;AAEjB,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,yBAAyB;IACxC,YAAY,CAAC,EAAE,qBAAqB,CAAC;IACrC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAOD,eAAO,MAAM,kBAAkB,GAAI,oCAGhC,yBAA8B,SAMhC,CAAC"}

package/package.json

@@ -1,30 +1,40 @@
 {
   "name": "@spelyco/react-native",
-  "version": "0.0.1-e4f7457e-alpha",
-  "description": "React Native UI components for Spelyco",
+  "version": "1.0.0-alpha.1",
+  "description": "React Native UI components for Spelyco, powered by Unistyles 3",
   "keywords": [
     "react-native",
     "ui",
     "components",
-    "spelyco"
+    "spelyco",
+    "unistyles"
   ],
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "react-native": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "react-native": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./configure": {
+      "types": "./dist/configure.d.ts",
+      "react-native": "./src/configure.ts",
+      "import": "./src/configure.ts",
+      "require": "./src/configure.ts"
     }
   },
   "files": [
+    "src",
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
     "lint": "biome check src/",
     "lint:fix": "biome check --write src/",
     "test": "vitest run --passWithNoTests",
@@ -33,7 +43,11 @@
   },
   "peerDependencies": {
     "react": ">=18",
-    "react-native": ">=0.73"
+    "react-native": ">=0.76",
+    "react-native-edge-to-edge": "*",
+    "react-native-nitro-modules": "*",
+    "react-native-reanimated": "*",
+    "react-native-unistyles": "^3.2.4"
   },
   "dependencies": {
     "@spelyco/react-lib": "1.2.0"
@@ -42,8 +56,11 @@
     "@spelyco/tsconfig": "*",
     "@types/react": "^19.2.14",
     "react": "^19.2.4",
-    "react-native": "^0.84.1",
-    "tsup": "^8.3.5",
+    "react-native": "^0.83.6",
+    "react-native-edge-to-edge": "^1.8.1",
+    "react-native-nitro-modules": "^0.35.6",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-unistyles": "^3.2.4",
     "vitest": "^4.1.1"
   }
 }

package/src/components/Button/Button.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Pressable: "Pressable",
+  Text: "Text",
+}));
+
+vi.mock("react-native-unistyles", () => {
+  type StylesObject = Record<string, unknown>;
+  return {
+    StyleSheet: {
+      create: (stylesFn: ((theme: unknown) => StylesObject) | StylesObject) => {
+        const styles =
+          typeof stylesFn === "function"
+            ? stylesFn({
+                colors: {
+                  primary: "#000",
+                  onPrimary: "#fff",
+                  secondary: "#000",
+                  onSecondary: "#fff",
+                  ghost: "transparent",
+                  onGhost: "#000",
+                  border: "#000",
+                },
+                spacing: { xs: 4, sm: 8, md: 12, lg: 16, xl: 24 },
+                radii: { sm: 4, md: 8, lg: 12, pill: 999 },
+              })
+            : stylesFn;
+        return Object.assign({}, styles, { useVariants: () => undefined });
+      },
+    },
+  };
+});
+
+const { Button } = await import("./Button");
+
+describe("Button", () => {
+  it("is exported as a function", () => {
+    expect(typeof Button).toBe("function");
+  });
+
+  it("has a name of Button", () => {
+    expect(Button.name).toBe("Button");
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,89 @@
+import type { PressableProps } from "react-native";
+import { Pressable, Text } from "react-native";
+import { StyleSheet, type UnistylesVariants } from "react-native-unistyles";
+
+type ButtonVariants = UnistylesVariants<typeof styles>;
+
+export type ButtonProps = Omit<PressableProps, "children"> &
+  ButtonVariants & {
+    label: string;
+  };
+
+export const Button = ({
+  label,
+  variant = "primary",
+  size = "md",
+  disabled,
+  style,
+  ...rest
+}: ButtonProps) => {
+  styles.useVariants({ variant, size, disabled: disabled ?? false });
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      style={(state) => [styles.root, typeof style === "function" ? style(state) : style]}
+      {...rest}
+    >
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create((theme) => ({
+  root: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radii.md,
+    variants: {
+      variant: {
+        primary: {
+          backgroundColor: theme.colors.primary,
+        },
+        secondary: {
+          backgroundColor: theme.colors.secondary,
+        },
+        ghost: {
+          backgroundColor: theme.colors.ghost,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+        },
+      },
+      size: {
+        sm: {
+          paddingHorizontal: theme.spacing.md,
+          paddingVertical: theme.spacing.xs,
+        },
+        md: {
+          paddingHorizontal: theme.spacing.lg,
+          paddingVertical: theme.spacing.sm,
+        },
+        lg: {
+          paddingHorizontal: theme.spacing.xl,
+          paddingVertical: theme.spacing.md,
+        },
+      },
+      disabled: {
+        true: {
+          opacity: 0.5,
+        },
+      },
+    },
+  },
+  label: {
+    fontWeight: "600",
+    variants: {
+      variant: {
+        primary: { color: theme.colors.onPrimary },
+        secondary: { color: theme.colors.onSecondary },
+        ghost: { color: theme.colors.onGhost },
+      },
+      size: {
+        sm: { fontSize: 14 },
+        md: { fontSize: 16 },
+        lg: { fontSize: 18 },
+      },
+    },
+  },
+}));

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./Button";
+export { Button } from "./Button";

package/src/components/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/src/configure.ts

@@ -0,0 +1,3 @@
+import { configureUnistyles } from "./unistyles";
+
+configureUnistyles();

package/src/index.ts

@@ -0,0 +1,13 @@
+export * from "./components";
+export {
+  type AppBreakpoints,
+  type AppTheme,
+  breakpoints,
+  darkTheme,
+  lightTheme,
+} from "./themes";
+export {
+  type ConfigureUnistylesOptions,
+  configureUnistyles,
+  type UnistylesInitialTheme,
+} from "./unistyles";

package/src/themes/dark.ts

@@ -0,0 +1,29 @@
+import type { AppTheme } from "./light";
+
+export const darkTheme: AppTheme = {
+  colors: {
+    primary: "#818cf8",
+    onPrimary: "#0b1020",
+    secondary: "#1f2937",
+    onSecondary: "#f9fafb",
+    ghost: "transparent",
+    onGhost: "#f9fafb",
+    background: "#0b1020",
+    text: "#f9fafb",
+    border: "#374151",
+    disabled: "#4b5563",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  },
+  radii: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    pill: 999,
+  },
+};

package/src/themes/index.ts

@@ -0,0 +1,13 @@
+export { darkTheme } from "./dark";
+export type { AppTheme } from "./light";
+export { lightTheme } from "./light";
+
+export const breakpoints = {
+  xs: 0,
+  sm: 360,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+} as const;
+
+export type AppBreakpoints = typeof breakpoints;

package/src/themes/light.ts

@@ -0,0 +1,55 @@
+export interface AppTheme {
+  colors: {
+    primary: string;
+    onPrimary: string;
+    secondary: string;
+    onSecondary: string;
+    ghost: string;
+    onGhost: string;
+    background: string;
+    text: string;
+    border: string;
+    disabled: string;
+  };
+  spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+  };
+  radii: {
+    sm: number;
+    md: number;
+    lg: number;
+    pill: number;
+  };
+}
+
+export const lightTheme: AppTheme = {
+  colors: {
+    primary: "#6366f1",
+    onPrimary: "#ffffff",
+    secondary: "#e5e7eb",
+    onSecondary: "#111827",
+    ghost: "transparent",
+    onGhost: "#111827",
+    background: "#ffffff",
+    text: "#111827",
+    border: "#d1d5db",
+    disabled: "#9ca3af",
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+  },
+  radii: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    pill: 999,
+  },
+};

package/src/types.ts

@@ -0,0 +1,9 @@
+import type { AppBreakpoints, AppTheme } from "./themes";
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes {
+    light: AppTheme;
+    dark: AppTheme;
+  }
+  export interface UnistylesBreakpoints extends AppBreakpoints {}
+}

package/src/unistyles.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from "react-native-unistyles";
+import { breakpoints, darkTheme, lightTheme } from "./themes";
+
+import "./types";
+
+export type UnistylesInitialTheme = "light" | "dark";
+
+export interface ConfigureUnistylesOptions {
+  initialTheme?: UnistylesInitialTheme;
+  adaptiveThemes?: boolean;
+}
+
+const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+export const configureUnistyles = ({
+  initialTheme = "light",
+  adaptiveThemes = true,
+}: ConfigureUnistylesOptions = {}) => {
+  StyleSheet.configure({
+    themes,
+    breakpoints,
+    settings: adaptiveThemes ? { adaptiveThemes: true } : { initialTheme },
+  });
+};

package/dist/index.d.mts

@@ -1,11 +0,0 @@
-import * as react from 'react';
-import { PressableProps } from 'react-native';
-
-interface ButtonProps extends PressableProps {
-    variant?: "primary" | "secondary" | "ghost";
-    size?: "sm" | "md" | "lg";
-    label: string;
-}
-declare function Button({ variant, size, label, style, ...props }: ButtonProps): react.JSX.Element;
-
-export { Button };

package/dist/index.js

@@ -1,28 +0,0 @@
-'use strict';
-
-var reactNative = require('react-native');
-
-// src/components/Button/Button.tsx
-function Button({ variant = "primary", size = "md", label, style, ...props }) {
-  return /* @__PURE__ */ React.createElement(reactNative.Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(reactNative.Text, { style: styles.label }, label));
-}
-var styles = reactNative.StyleSheet.create({
-  base: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 8
-  },
-  label: {
-    fontWeight: "600"
-  },
-  primary: { backgroundColor: "#6366f1" },
-  secondary: { backgroundColor: "#e5e7eb" },
-  ghost: { backgroundColor: "transparent" },
-  sm: { paddingHorizontal: 12, paddingVertical: 6 },
-  md: { paddingHorizontal: 16, paddingVertical: 10 },
-  lg: { paddingHorizontal: 24, paddingVertical: 14 }
-});
-
-exports.Button = Button;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":["Pressable","Text","StyleSheet"],"mappings":";;;;;AASO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAgB;AAChG,EAAA,uBACE,KAAA,CAAA,aAAA,CAACA,yBAAU,KAAA,EAAO,CAAC,OAAO,IAAA,EAAM,MAAA,CAAO,OAAO,CAAA,EAAG,MAAA,CAAO,IAAI,GAAG,KAAkB,CAAA,EAAI,GAAG,KAAA,EAAA,kBACtF,KAAA,CAAA,aAAA,CAACC,oBAAK,KAAA,EAAO,MAAA,CAAO,KAAA,EAAA,EAAQ,KAAM,CACpC,CAAA;AAEJ;AAEA,IAAM,MAAA,GAASC,uBAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,GACd;AAAA,EACA,OAAA,EAAS,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACtC,SAAA,EAAW,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACxC,KAAA,EAAO,EAAE,eAAA,EAAiB,aAAA,EAAc;AAAA,EACxC,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,CAAA,EAAE;AAAA,EAChD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA,EAAG;AAAA,EACjD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA;AAChD,CAAC,CAAA","file":"index.js","sourcesContent":["import type { PressableProps, TextStyle, ViewStyle } from \"react-native\";\nimport { Pressable, StyleSheet, Text } from \"react-native\";\n\nexport interface ButtonProps extends PressableProps {\n  variant?: \"primary\" | \"secondary\" | \"ghost\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  label: string;\n}\n\nexport function Button({ variant = \"primary\", size = \"md\", label, style, ...props }: ButtonProps) {\n  return (\n    <Pressable style={[styles.base, styles[variant], styles[size], style as ViewStyle]} {...props}>\n      <Text style={styles.label}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  base: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: 8,\n  },\n  label: {\n    fontWeight: \"600\",\n  } as TextStyle,\n  primary: { backgroundColor: \"#6366f1\" } as ViewStyle,\n  secondary: { backgroundColor: \"#e5e7eb\" } as ViewStyle,\n  ghost: { backgroundColor: \"transparent\" } as ViewStyle,\n  sm: { paddingHorizontal: 12, paddingVertical: 6 } as ViewStyle,\n  md: { paddingHorizontal: 16, paddingVertical: 10 } as ViewStyle,\n  lg: { paddingHorizontal: 24, paddingVertical: 14 } as ViewStyle,\n});\n"]}

package/dist/index.mjs

@@ -1,26 +0,0 @@
-import { StyleSheet, Pressable, Text } from 'react-native';
-
-// src/components/Button/Button.tsx
-function Button({ variant = "primary", size = "md", label, style, ...props }) {
-  return /* @__PURE__ */ React.createElement(Pressable, { style: [styles.base, styles[variant], styles[size], style], ...props }, /* @__PURE__ */ React.createElement(Text, { style: styles.label }, label));
-}
-var styles = StyleSheet.create({
-  base: {
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: 8
-  },
-  label: {
-    fontWeight: "600"
-  },
-  primary: { backgroundColor: "#6366f1" },
-  secondary: { backgroundColor: "#e5e7eb" },
-  ghost: { backgroundColor: "transparent" },
-  sm: { paddingHorizontal: 12, paddingVertical: 6 },
-  md: { paddingHorizontal: 16, paddingVertical: 10 },
-  lg: { paddingHorizontal: 24, paddingVertical: 14 }
-});
-
-export { Button };
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AASO,SAAS,MAAA,CAAO,EAAE,OAAA,GAAU,SAAA,EAAW,IAAA,GAAO,MAAM,KAAA,EAAO,KAAA,EAAO,GAAG,KAAA,EAAM,EAAgB;AAChG,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,aAAU,KAAA,EAAO,CAAC,OAAO,IAAA,EAAM,MAAA,CAAO,OAAO,CAAA,EAAG,MAAA,CAAO,IAAI,GAAG,KAAkB,CAAA,EAAI,GAAG,KAAA,EAAA,kBACtF,KAAA,CAAA,aAAA,CAAC,QAAK,KAAA,EAAO,MAAA,CAAO,KAAA,EAAA,EAAQ,KAAM,CACpC,CAAA;AAEJ;AAEA,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY,QAAA;AAAA,IACZ,cAAA,EAAgB,QAAA;AAAA,IAChB,YAAA,EAAc;AAAA,GAChB;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,GACd;AAAA,EACA,OAAA,EAAS,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACtC,SAAA,EAAW,EAAE,eAAA,EAAiB,SAAA,EAAU;AAAA,EACxC,KAAA,EAAO,EAAE,eAAA,EAAiB,aAAA,EAAc;AAAA,EACxC,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,CAAA,EAAE;AAAA,EAChD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA,EAAG;AAAA,EACjD,EAAA,EAAI,EAAE,iBAAA,EAAmB,EAAA,EAAI,iBAAiB,EAAA;AAChD,CAAC,CAAA","file":"index.mjs","sourcesContent":["import type { PressableProps, TextStyle, ViewStyle } from \"react-native\";\nimport { Pressable, StyleSheet, Text } from \"react-native\";\n\nexport interface ButtonProps extends PressableProps {\n  variant?: \"primary\" | \"secondary\" | \"ghost\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  label: string;\n}\n\nexport function Button({ variant = \"primary\", size = \"md\", label, style, ...props }: ButtonProps) {\n  return (\n    <Pressable style={[styles.base, styles[variant], styles[size], style as ViewStyle]} {...props}>\n      <Text style={styles.label}>{label}</Text>\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create({\n  base: {\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    borderRadius: 8,\n  },\n  label: {\n    fontWeight: \"600\",\n  } as TextStyle,\n  primary: { backgroundColor: \"#6366f1\" } as ViewStyle,\n  secondary: { backgroundColor: \"#e5e7eb\" } as ViewStyle,\n  ghost: { backgroundColor: \"transparent\" } as ViewStyle,\n  sm: { paddingHorizontal: 12, paddingVertical: 6 } as ViewStyle,\n  md: { paddingHorizontal: 16, paddingVertical: 10 } as ViewStyle,\n  lg: { paddingHorizontal: 24, paddingVertical: 14 } as ViewStyle,\n});\n"]}