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

package/README.md

@@ -8,6 +8,9 @@ React Native UI components for Spelyco, powered by [Unistyles 3](https://www.uni
 
 ```bash
 bun add @spelyco/react-native \
+  @react-native-async-storage/async-storage \
+  expo-status-bar \
+  expo-system-ui \
   react-native-unistyles \
   react-native-edge-to-edge \
   react-native-nitro-modules \
@@ -44,48 +47,36 @@ module.exports = function (api) {
 };
 ```
 
-### 2. TypeScript theme augmentation (recommended)
+### 2. Wrap your app with `SpelycoProvider`
 
-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):
+`SpelycoProvider` boots Unistyles, owns the color scheme state (zustand + AsyncStorage persistence), and applies the status/system bars from the theme. Put it at the root — for Expo Router that means `app/_layout.tsx`:
 
 ```tsx
-import "@spelyco/react-native/configure";
-
+// app/_layout.tsx
+import { SpelycoProvider } from "@spelyco/react-native";
 import { Stack } from "expo-router";
 
 export default function RootLayout() {
-  return <Stack screenOptions={{ headerShown: false }} />;
+  return (
+    <SpelycoProvider>
+      <Stack screenOptions={{ headerShown: false }} />
+    </SpelycoProvider>
+  );
 }
 ```
 
-`@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:
+Pass a partial `theme` to override anything in `DEFAULT_THEME`, and `defaultColorScheme` to pin the first-launch preference (defaults to `"auto"`).
 
 ```tsx
-import { configureUnistyles } from "@spelyco/react-native";
-
-configureUnistyles({ adaptiveThemes: false, initialTheme: "dark" });
+<SpelycoProvider
+  theme={{ primaryColor: "brand", defaultRadius: "lg" }}
+  defaultColorScheme="dark"
+>
+  <Stack />
+</SpelycoProvider>
 ```
 
-### 4. New Architecture
+### 3. New Architecture
 
 Unistyles 3 requires React Native's New Architecture. Make sure your `app.json` (Expo) has:
 
@@ -97,17 +88,54 @@ Unistyles 3 requires React Native's New Architecture. Make sure your `app.json`
 
 ## Components
 
+### `Box`
+
+A `View` primitive with shorthand spacing props.
+
+```tsx
+import { Box } from "@spelyco/react-native";
+
+<Box p="md" gap="sm" bg="#f4f4f5">
+  {/* children */}
+</Box>
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `p` / `px` / `py` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number` | Padding |
+| `m` / `mx` / `my` | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| number` | Margin |
+| `gap` | same as above | Flex gap |
+| `bg` | `string` | Background color (hex) |
+| `...rest` | `ViewProps` | Any RN `View` prop |
+
+### `Text`
+
+A `Text` primitive with size/weight tokens. Color auto-resolves from the active color scheme unless you provide one.
+
+```tsx
+import { Text } from "@spelyco/react-native";
+
+<Text size="xl" weight="bold">Heading</Text>
+<Text size="sm">Body copy</Text>
+<Text color="#ef4444">Inline override</Text>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Maps to `theme.fontSizes` |
+| `weight` | `"normal" \| "medium" \| "bold"` | `"normal"` | |
+| `color` | `string` | scheme-aware default | Hex color |
+| `...rest` | `TextProps` | — | Any RN `Text` prop |
+
 ### `Button`
 
 ```tsx
 import { Button } from "@spelyco/react-native";
 
-<Button label="Tap me" />
 <Button label="Primary" variant="primary" />
 <Button label="Secondary" variant="secondary" />
 <Button label="Ghost" variant="ghost" />
 <Button label="Small" size="sm" />
-<Button label="Large" size="lg" />
 <Button label="Disabled" disabled />
 <Button label="Save" onPress={() => console.log("saved")} />
 ```
@@ -122,15 +150,50 @@ import { Button } from "@spelyco/react-native";
 
 ---
 
-## Theme
+## Color scheme
 
-Re-exports for the default themes:
+`SpelycoProvider` tracks the user preference (`light`/`dark`/`auto`) in a zustand store, persists it via AsyncStorage, and listens to OS appearance changes.
 
-```ts
-import { lightTheme, darkTheme, breakpoints, type AppTheme } from "@spelyco/react-native";
+```tsx
+import { useSpelycoColorScheme } from "@spelyco/react-native";
+
+function ThemeToggle() {
+  const {
+    colorScheme,           // user preference: 'light' | 'dark' | 'auto'
+    computedColorScheme,   // resolved scheme actually applied: 'light' | 'dark'
+    setColorScheme,
+    toggleColorScheme,
+    clearColorScheme,      // reset to 'auto'
+  } = useSpelycoColorScheme();
+
+  return (
+    <Button
+      label={`Switch to ${computedColorScheme === "dark" ? "light" : "dark"}`}
+      onPress={toggleColorScheme}
+    />
+  );
+}
+```
+
+---
+
+## Theming
+
+Customize defaults via `theme.components[ComponentName].defaultProps`:
+
+```tsx
+<SpelycoProvider
+  theme={{
+    components: {
+      Button: Button.extend({ defaultProps: { variant: "ghost" } }),
+    },
+  }}
+>
+  {/* every <Button> now defaults to variant="ghost" */}
+</SpelycoProvider>
 ```
 
-For now these are minimal placeholders (colors, spacing, radii). A proper design-system release will follow in a subsequent version.
+Theme tokens (`colors`, `spacing`, `radius`, `fontSizes`, `lineHeights`, `shadows`, `breakpoints`, `systemBars`, `other`) all flow through the same `theme` prop. See `@spelyco/react-lib` for the full `SpelycoTheme` contract.
 
 ---
 
@@ -144,6 +207,9 @@ For now these are minimal placeholders (colors, spacing, radii). A proper design
 | `react-native-edge-to-edge` | `*` |
 | `react-native-nitro-modules` | `*` |
 | `react-native-reanimated` | `*` |
+| `@react-native-async-storage/async-storage` | `*` |
+| `expo-status-bar` | `*` |
+| `expo-system-ui` | `*` |
 
 ---
 

package/dist/bootUnistyles.d.ts

@@ -0,0 +1,2 @@
+import "./types";
+//# sourceMappingURL=bootUnistyles.d.ts.map

package/dist/bootUnistyles.d.ts.map

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

package/dist/components/ActionIcon/ActionIcon.d.ts

@@ -0,0 +1,37 @@
+import { type PressableProps } from "react-native";
+import { type UnistylesVariants } from "react-native-unistyles";
+type ActionIconVariants = UnistylesVariants<typeof styles>;
+export type ActionIconProps = PressableProps & ActionIconVariants;
+export declare const ActionIcon: import("@spelyco/react-lib").SpelycoComponent<ActionIconProps>;
+declare const styles: {
+    root: {
+        opacity: number;
+    } & {
+        backgroundColor: string;
+    } & {
+        backgroundColor: string;
+    } & {
+        backgroundColor: string;
+    } & {
+        width: number;
+        height: number;
+    } & {
+        width: number;
+        height: number;
+    } & {
+        width: number;
+        height: number;
+    } & {
+        borderRadius: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+} & {
+    useVariants: (variants: {
+        variant?: "transparent" | "subtle" | "filled" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        disabled?: boolean | "true" | undefined;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=ActionIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionIcon.d.ts","sourceRoot":"","sources":["../../../src/components/ActionIcon/ActionIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAE5E,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,OAAO,MAAM,CAAC,CAAC;AAE3D,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAElE,eAAO,MAAM,UAAU,gEAgBrB,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BT,CAAC"}

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,20 @@
+import { type SpelycoSize } from "@spelyco/react-lib";
+import { type ViewProps } from "react-native";
+type SpacingToken = SpelycoSize | number;
+export interface BoxProps extends ViewProps {
+    /** padding shorthand */
+    p?: SpacingToken;
+    px?: SpacingToken;
+    py?: SpacingToken;
+    /** margin shorthand */
+    m?: SpacingToken;
+    mx?: SpacingToken;
+    my?: SpacingToken;
+    /** Flex gap between children */
+    gap?: SpacingToken;
+    /** Background color (hex). Theme palette tokens land in a later phase. */
+    bg?: string;
+}
+export declare const Box: import("@spelyco/react-lib").SpelycoComponent<BoxProps>;
+export {};
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,KAAK,YAAY,GAAG,WAAW,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,QAAS,SAAQ,SAAS;IACzC,wBAAwB;IACxB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,uBAAuB;IACvB,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,gCAAgC;IAChC,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAQD,eAAO,MAAM,GAAG,yDAgBd,CAAC"}

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

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

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

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

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

@@ -4,7 +4,7 @@ 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;
+export declare const Button: import("@spelyco/react-lib").SpelycoComponent<ButtonProps>;
 declare const styles: {
     root: {
         opacity: number;

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

@@ -1 +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"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,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,4DAwBjB,CAAC;AAEH,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDT,CAAC"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,12 @@
+import { type SpelycoSize } from "@spelyco/react-lib";
+import { type TextProps as RNTextProps } from "react-native";
+export type TextWeight = "normal" | "medium" | "bold";
+export interface TextProps extends RNTextProps {
+    size?: SpelycoSize;
+    weight?: TextWeight;
+    /** Direct hex color. When omitted, auto-resolves to the neutral text color
+     *  for the active color scheme. */
+    color?: string;
+}
+export declare const Text: import("@spelyco/react-lib").SpelycoComponent<TextProps>;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAkB,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAG7E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEtD,MAAM,WAAW,SAAU,SAAQ,WAAW;IAC5C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;uCACmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,IAAI,0DAWf,CAAC"}

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

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

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

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

package/dist/components/index.d.ts

@@ -1,2 +1,4 @@
-export { Button } from "./Button";
+export { Box, type BoxProps } from "./Box";
+export { Button, type ButtonProps } from "./Button";
+export { Text, type TextProps, type TextWeight } from "./Text";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAC"}

package/dist/hooks/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,2BAA2B,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/hooks/useSpelycoColorScheme.d.ts

@@ -0,0 +1,14 @@
+import type { SpelycoColorScheme, SpelycoComputedColorScheme } from "@spelyco/react-lib";
+export interface UseSpelycoColorSchemeReturn {
+    /** User preference: 'light' | 'dark' | 'auto'. */
+    colorScheme: SpelycoColorScheme;
+    /** Resolved scheme actually applied: 'light' | 'dark'. */
+    computedColorScheme: SpelycoComputedColorScheme;
+    setColorScheme: (scheme: SpelycoColorScheme) => void;
+    /** Cycles light ↔ dark. If currently 'auto', toggles from the OS value. */
+    toggleColorScheme: () => void;
+    /** Resets back to 'auto' (follow OS). */
+    clearColorScheme: () => void;
+}
+export declare const useSpelycoColorScheme: () => UseSpelycoColorSchemeReturn;
+//# sourceMappingURL=useSpelycoColorScheme.d.ts.map

package/dist/hooks/useSpelycoColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpelycoColorScheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useSpelycoColorScheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAGzF,MAAM,WAAW,2BAA2B;IAC1C,kDAAkD;IAClD,WAAW,EAAE,kBAAkB,CAAC;IAChC,0DAA0D;IAC1D,mBAAmB,EAAE,0BAA0B,CAAC;IAChD,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,2EAA2E;IAC3E,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,yCAAyC;IACzC,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB,QAAO,2BAiBxC,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,7 @@
+import "./bootUnistyles";
+export * from "@spelyco/react-lib";
 export * from "./components";
-export { type AppBreakpoints, type AppTheme, breakpoints, darkTheme, lightTheme, } from "./themes";
-export { type ConfigureUnistylesOptions, configureUnistyles, type UnistylesInitialTheme, } from "./unistyles";
+export * from "./hooks";
+export * from "./provider";
+export * from "./store";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,CAAC;AAKzB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}

package/dist/provider/SpelycoProvider.d.ts

@@ -0,0 +1,11 @@
+import { type SpelycoColorScheme, type SpelycoThemeOverride } from "@spelyco/react-lib";
+import { type ReactNode } from "react";
+export interface SpelycoProviderProps {
+    /** Partial theme override merged on top of `DEFAULT_THEME`. */
+    theme?: SpelycoThemeOverride;
+    /** User-facing default if no persisted preference exists. */
+    defaultColorScheme?: SpelycoColorScheme;
+    children: ReactNode;
+}
+export declare function SpelycoProvider({ theme: themeOverride, defaultColorScheme, children, }: SpelycoProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SpelycoProvider.d.ts.map

package/dist/provider/SpelycoProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpelycoProvider.d.ts","sourceRoot":"","sources":["../../src/provider/SpelycoProvider.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,kBAAkB,EAEvB,KAAK,oBAAoB,EAC1B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAWrE,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,6DAA6D;IAC7D,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EAAE,aAAa,EACpB,kBAA2B,EAC3B,QAAQ,GACT,EAAE,oBAAoB,2CAsEtB"}

package/dist/provider/index.d.ts

@@ -0,0 +1,4 @@
+export { SpelycoProvider, type SpelycoProviderProps } from "./SpelycoProvider";
+export { toNavigationTheme } from "./toNavigationTheme";
+export { type SpelycoUnistylesTheme, toUnistylesTheme } from "./toUnistylesTheme";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,KAAK,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/provider/toNavigationTheme.d.ts

@@ -0,0 +1,20 @@
+import { type Theme } from "@react-navigation/native";
+import type { SpelycoComputedColorScheme, SpelycoTheme } from "@spelyco/react-lib";
+/**
+ * Adapts a `SpelycoTheme` into a `@react-navigation/native` `Theme` so the
+ * drawer chrome, screen background, headers, dividers and route transitions
+ * pick up Spelyco's palette automatically.
+ *
+ * Colour mapping (10-shade tuples):
+ *   primary     → resolved primary hex (from `theme.primary`)
+ *   background  → neutral[0] / neutral[9]
+ *   card        → neutral[1] / neutral[8]      (headers, tab/drawer surface)
+ *   text        → neutral[9] / neutral[0]
+ *   border      → neutral[2] / neutral[7]
+ *   notification→ red[6]     / red[4]          (badge/alert colour)
+ *
+ * Fonts pass through React Navigation's defaults — Phase 1 will wire them to
+ * `theme.fontFamily`/`fontFamilyMono` once a typography contract lands.
+ */
+export declare function toNavigationTheme(theme: SpelycoTheme, scheme: SpelycoComputedColorScheme): Theme;
+//# sourceMappingURL=toNavigationTheme.d.ts.map

package/dist/provider/toNavigationTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toNavigationTheme.d.ts","sourceRoot":"","sources":["../../src/provider/toNavigationTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,KAAK,EAAE,0BAA0B,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEnF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,0BAA0B,GAAG,KAAK,CAqBhG"}

package/dist/provider/toUnistylesTheme.d.ts

@@ -0,0 +1,24 @@
+import type { SpelycoColors, SpelycoComputedColorScheme, SpelycoFontSizes, SpelycoLineHeights, SpelycoRadius, SpelycoShadows, SpelycoSpacing, SpelycoTheme } from "@spelyco/react-lib";
+/**
+ * The shape consumed by Unistyles' `StyleSheet.configure({ themes })`. Each
+ * scheme gets its own copy with `colorScheme` and a precomputed `primary`
+ * color so component styles can do `theme.primary` without recomputing shades.
+ */
+export interface SpelycoUnistylesTheme {
+    colorScheme: SpelycoComputedColorScheme;
+    colors: SpelycoColors;
+    spacing: SpelycoSpacing;
+    radius: SpelycoRadius;
+    fontSizes: SpelycoFontSizes;
+    lineHeights: SpelycoLineHeights;
+    shadows: SpelycoShadows;
+    primaryColor: string;
+    /** Shade index resolved for this color scheme. */
+    primaryShade: number;
+    /** `colors[primaryColor][primaryShade]` — the actual hex used by components. */
+    primary: string;
+    fontFamily: string;
+    fontFamilyMono: string;
+}
+export declare function toUnistylesTheme(theme: SpelycoTheme, scheme: SpelycoComputedColorScheme): SpelycoUnistylesTheme;
+//# sourceMappingURL=toUnistylesTheme.d.ts.map

package/dist/provider/toUnistylesTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toUnistylesTheme.d.ts","sourceRoot":"","sources":["../../src/provider/toUnistylesTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,0BAA0B,EAC1B,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,cAAc,EACd,YAAY,EACb,MAAM,oBAAoB,CAAC;AAE5B;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,WAAW,EAAE,0BAA0B,CAAC;IACxC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,cAAc,CAAC;IACxB,MAAM,EAAE,aAAa,CAAC;IACtB,SAAS,EAAE,gBAAgB,CAAC;IAC5B,WAAW,EAAE,kBAAkB,CAAC;IAChC,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,0BAA0B,GACjC,qBAAqB,CAqBvB"}

package/dist/store/colorScheme.d.ts

@@ -0,0 +1,31 @@
+import type { SpelycoColorScheme, SpelycoComputedColorScheme } from "@spelyco/react-lib";
+interface ColorSchemeState {
+    /** User preference: 'light' | 'dark' | 'auto'. Persisted. */
+    colorScheme: SpelycoColorScheme;
+    /** Current OS color scheme. Tracked via Appearance, not persisted. */
+    systemColorScheme: SpelycoComputedColorScheme;
+    setColorScheme: (scheme: SpelycoColorScheme) => void;
+    toggleColorScheme: () => void;
+    clearColorScheme: () => void;
+}
+export declare const useColorSchemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ColorSchemeState>, "setState" | "persist"> & {
+    setState(partial: ColorSchemeState | Partial<ColorSchemeState> | ((state: ColorSchemeState) => ColorSchemeState | Partial<ColorSchemeState>), replace?: false | undefined): unknown;
+    setState(state: ColorSchemeState | ((state: ColorSchemeState) => ColorSchemeState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ColorSchemeState, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ColorSchemeState) => void) => () => void;
+        onFinishHydration: (fn: (state: ColorSchemeState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ColorSchemeState, unknown, unknown>>;
+    };
+}>;
+/**
+ * Subscribes the store to OS color scheme changes. Idempotent — calling more
+ * than once is a no-op. Should be invoked once from `SpelycoProvider`.
+ */
+export declare const setupColorSchemeListener: () => void;
+export declare const teardownColorSchemeListener: () => void;
+export {};
+//# sourceMappingURL=colorScheme.d.ts.map

package/dist/store/colorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorScheme.d.ts","sourceRoot":"","sources":["../../src/store/colorScheme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAKzF,UAAU,gBAAgB;IACxB,6DAA6D;IAC7D,WAAW,EAAE,kBAAkB,CAAC;IAChC,sEAAsE;IACtE,iBAAiB,EAAE,0BAA0B,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACrD,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AASD,eAAO,MAAM,mBAAmB;;;;;;;;;;;;EAmB/B,CAAC;AAIF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,YAOpC,CAAC;AAEF,eAAO,MAAM,2BAA2B,YAGvC,CAAC"}

package/dist/store/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/store/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,EACxB,2BAA2B,EAC3B,mBAAmB,GACpB,MAAM,eAAe,CAAC"}

package/dist/types.d.ts

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

package/dist/types.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAEzE,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,eAAe;QAC9B,KAAK,EAAE,qBAAqB,CAAC;QAC7B,IAAI,EAAE,qBAAqB,CAAC;KAC7B;IACD,UAAiB,oBAAqB,SAAQ,kBAAkB;KAAG;CACpE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spelyco/react-native",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0",
   "description": "React Native UI components for Spelyco, powered by Unistyles 3",
   "keywords": [
     "react-native",
@@ -20,12 +20,6 @@
       "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": [
@@ -42,6 +36,10 @@
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": "*",
+    "@react-navigation/native": "^7",
+    "expo-status-bar": "*",
+    "expo-system-ui": "*",
     "react": ">=18",
     "react-native": ">=0.76",
     "react-native-edge-to-edge": "*",
@@ -50,11 +48,16 @@
     "react-native-unistyles": "^3.2.4"
   },
   "dependencies": {
-    "@spelyco/react-lib": "1.2.0"
+    "@spelyco/react-lib": "1.3.0",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/native": "^7.2.2",
     "@spelyco/tsconfig": "*",
     "@types/react": "^19.2.14",
+    "expo-status-bar": "~55.0.6",
+    "expo-system-ui": "~55.0.18",
     "react": "^19.2.4",
     "react-native": "^0.83.6",
     "react-native-edge-to-edge": "^1.8.1",

package/src/bootUnistyles.ts

@@ -0,0 +1,27 @@
+import { DEFAULT_THEME } from "@spelyco/react-lib";
+import { StyleSheet } from "react-native-unistyles";
+import { toUnistylesTheme } from "./provider/toUnistylesTheme";
+import "./types";
+
+/**
+ * Boots Unistyles with the default theme at module-load time.
+ *
+ * `StyleSheet.configure` must run before any `StyleSheet.create` call,
+ * otherwise Unistyles emits "StyleSheet.configure was not called" warnings.
+ * Component files (e.g. `Button.tsx`) invoke `StyleSheet.create` at module
+ * evaluation, so configuration cannot wait for `SpelycoProvider` to mount.
+ *
+ * The side-effect here is loaded by `src/index.ts` ahead of any component
+ * re-exports, guaranteeing the correct boot order.
+ *
+ * Theme overrides passed to `<SpelycoProvider theme={...}>` are applied later
+ * via `UnistylesRuntime.updateTheme()` once the provider mounts.
+ */
+StyleSheet.configure({
+  themes: {
+    light: toUnistylesTheme(DEFAULT_THEME, "light"),
+    dark: toUnistylesTheme(DEFAULT_THEME, "dark"),
+  },
+  breakpoints: DEFAULT_THEME.breakpoints,
+  settings: { initialTheme: "light" },
+});