@spelyco/react-native 0.0.1 → 1.0.0

package/src/provider/SpelycoProvider.tsx

@@ -0,0 +1,102 @@
+import { ThemeProvider } from "@react-navigation/native";
+import {
+  resolveTheme,
+  type SpelycoColorScheme,
+  SpelycoThemeContext,
+  type SpelycoThemeOverride,
+} from "@spelyco/react-lib";
+import { setBackgroundColorAsync } from "expo-system-ui";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { StatusBar } from "react-native";
+import { UnistylesRuntime } from "react-native-unistyles";
+import {
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+  useColorSchemeStore,
+} from "../store/colorScheme";
+import { toNavigationTheme } from "./toNavigationTheme";
+import { toUnistylesTheme } from "./toUnistylesTheme";
+
+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 function SpelycoProvider({
+  theme: themeOverride,
+  defaultColorScheme = "auto",
+  children,
+}: SpelycoProviderProps) {
+  const resolvedTheme = useMemo(() => resolveTheme(themeOverride), [themeOverride]);
+
+  const colorScheme = useColorSchemeStore((s) => s.colorScheme);
+  const systemColorScheme = useColorSchemeStore((s) => s.systemColorScheme);
+  const setColorScheme = useColorSchemeStore((s) => s.setColorScheme);
+
+  const computedColorScheme = colorScheme === "auto" ? systemColorScheme : colorScheme;
+
+  // Honour `defaultColorScheme` on first mount when no preference is persisted.
+  useState(() => {
+    if (colorScheme === "auto" && defaultColorScheme !== "auto") {
+      setColorScheme(defaultColorScheme);
+    }
+    return null;
+  });
+
+  // Push the user-supplied theme override into Unistyles. Boot already ran
+  // with DEFAULT_THEME in `bootUnistyles.ts`; here we replace both schemes if
+  // an override exists so components see the merged tokens.
+  useEffect(() => {
+    if (!themeOverride) return;
+    const nextLight = toUnistylesTheme(resolvedTheme, "light");
+    const nextDark = toUnistylesTheme(resolvedTheme, "dark");
+    UnistylesRuntime.updateTheme("light", () => nextLight);
+    UnistylesRuntime.updateTheme("dark", () => nextDark);
+  }, [themeOverride, resolvedTheme]);
+
+  useEffect(() => {
+    setupColorSchemeListener();
+    return () => teardownColorSchemeListener();
+  }, []);
+
+  useEffect(() => {
+    UnistylesRuntime.setTheme(computedColorScheme);
+  }, [computedColorScheme]);
+
+  // System bars: status bar + Android root background. Runs every time the
+  // computed scheme flips so the OS chrome stays in sync.
+  const systemBars = resolvedTheme.systemBars?.[computedColorScheme];
+  useEffect(() => {
+    if (systemBars?.statusBarBackgroundColor) {
+      setBackgroundColorAsync(systemBars.statusBarBackgroundColor).catch(() => {});
+    }
+  }, [systemBars?.statusBarBackgroundColor]);
+
+  const statusBarStyle = (() => {
+    const style = systemBars?.statusBarStyle ?? "auto";
+    if (style === "light") return "light-content" as const;
+    if (style === "dark") return "dark-content" as const;
+    return "default" as const;
+  })();
+
+  const navigationTheme = useMemo(
+    () => toNavigationTheme(resolvedTheme, computedColorScheme),
+    [resolvedTheme, computedColorScheme]
+  );
+
+  return (
+    <SpelycoThemeContext.Provider value={resolvedTheme}>
+      <ThemeProvider value={navigationTheme}>
+        <StatusBar
+          barStyle={statusBarStyle}
+          backgroundColor={systemBars?.statusBarBackgroundColor}
+          animated
+        />
+        {children}
+      </ThemeProvider>
+    </SpelycoThemeContext.Provider>
+  );
+}

package/src/provider/index.ts

@@ -0,0 +1,3 @@
+export { SpelycoProvider, type SpelycoProviderProps } from "./SpelycoProvider";
+export { toNavigationTheme } from "./toNavigationTheme";
+export { type SpelycoUnistylesTheme, toUnistylesTheme } from "./toUnistylesTheme";

package/src/provider/toNavigationTheme.ts

@@ -0,0 +1,41 @@
+import { DefaultTheme, 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 function toNavigationTheme(theme: SpelycoTheme, scheme: SpelycoComputedColorScheme): Theme {
+  const primaryShade =
+    typeof theme.primaryShade === "number" ? theme.primaryShade : theme.primaryShade[scheme];
+  const primary = theme.colors[theme.primaryColor]?.[primaryShade] ?? DefaultTheme.colors.primary;
+
+  const neutral = theme.colors.neutral;
+  const red = theme.colors.red;
+  const isDark = scheme === "dark";
+
+  return {
+    dark: isDark,
+    colors: {
+      primary,
+      background: neutral?.[isDark ? 9 : 0] ?? DefaultTheme.colors.background,
+      card: neutral?.[isDark ? 8 : 1] ?? DefaultTheme.colors.card,
+      text: neutral?.[isDark ? 0 : 9] ?? DefaultTheme.colors.text,
+      border: neutral?.[isDark ? 7 : 2] ?? DefaultTheme.colors.border,
+      notification: red?.[isDark ? 4 : 6] ?? DefaultTheme.colors.notification,
+    },
+    fonts: DefaultTheme.fonts,
+  };
+}

package/src/provider/toUnistylesTheme.ts

@@ -0,0 +1,58 @@
+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 function toUnistylesTheme(
+  theme: SpelycoTheme,
+  scheme: SpelycoComputedColorScheme
+): SpelycoUnistylesTheme {
+  const primaryShade =
+    typeof theme.primaryShade === "number" ? theme.primaryShade : theme.primaryShade[scheme];
+
+  const primaryTuple = theme.colors[theme.primaryColor];
+  const primary = primaryTuple?.[primaryShade] ?? primaryTuple?.[6] ?? "#000000";
+
+  return {
+    colorScheme: scheme,
+    colors: theme.colors,
+    spacing: theme.spacing,
+    radius: theme.radius,
+    fontSizes: theme.fontSizes,
+    lineHeights: theme.lineHeights,
+    shadows: theme.shadows,
+    primaryColor: theme.primaryColor,
+    primaryShade,
+    primary,
+    fontFamily: theme.fontFamily,
+    fontFamilyMono: theme.fontFamilyMono,
+  };
+}

package/src/store/colorScheme.test.ts

@@ -0,0 +1,105 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const appearanceListeners: Array<
+  (event: { colorScheme: "light" | "dark" | null }) => void
+> = [];
+
+vi.mock("react-native", () => ({
+  Appearance: {
+    getColorScheme: () => "light",
+    addChangeListener: (
+      cb: (event: { colorScheme: "light" | "dark" | null }) => void,
+    ) => {
+      appearanceListeners.push(cb);
+      return {
+        remove: () => {
+          const i = appearanceListeners.indexOf(cb);
+          if (i >= 0) appearanceListeners.splice(i, 1);
+        },
+      };
+    },
+  },
+}));
+
+vi.mock("@react-native-async-storage/async-storage", () => {
+  const store = new Map<string, string>();
+  return {
+    default: {
+      getItem: vi.fn(async (key: string) => store.get(key) ?? null),
+      setItem: vi.fn(async (key: string, value: string) => {
+        store.set(key, value);
+      }),
+      removeItem: vi.fn(async (key: string) => {
+        store.delete(key);
+      }),
+    },
+  };
+});
+
+const {
+  useColorSchemeStore,
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+} = await import("./colorScheme");
+
+const resetStore = () => {
+  useColorSchemeStore.setState({
+    colorScheme: "auto",
+    systemColorScheme: "light",
+  });
+  teardownColorSchemeListener();
+};
+
+describe("colorScheme store", () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  it("starts with 'auto' and resolves system scheme to 'light' by default", () => {
+    const state = useColorSchemeStore.getState();
+    expect(state.colorScheme).toBe("auto");
+    expect(state.systemColorScheme).toBe("light");
+  });
+
+  it("setColorScheme updates the user preference", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("toggleColorScheme flips dark <-> light explicitly", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("light");
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("toggleColorScheme from 'auto' uses systemColorScheme as the basis", () => {
+    useColorSchemeStore.setState({
+      colorScheme: "auto",
+      systemColorScheme: "light",
+    });
+    useColorSchemeStore.getState().toggleColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("dark");
+  });
+
+  it("clearColorScheme resets back to 'auto'", () => {
+    useColorSchemeStore.getState().setColorScheme("dark");
+    useColorSchemeStore.getState().clearColorScheme();
+    expect(useColorSchemeStore.getState().colorScheme).toBe("auto");
+  });
+
+  it("setupColorSchemeListener is idempotent", () => {
+    setupColorSchemeListener();
+    setupColorSchemeListener();
+    expect(appearanceListeners.length).toBe(1);
+  });
+
+  it("system change events update systemColorScheme", () => {
+    setupColorSchemeListener();
+    appearanceListeners[0]?.({ colorScheme: "dark" });
+    expect(useColorSchemeStore.getState().systemColorScheme).toBe("dark");
+    appearanceListeners[0]?.({ colorScheme: null });
+    expect(useColorSchemeStore.getState().systemColorScheme).toBe("light");
+  });
+});

package/src/store/colorScheme.ts

@@ -0,0 +1,63 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import type { SpelycoColorScheme, SpelycoComputedColorScheme } from "@spelyco/react-lib";
+import { Appearance } from "react-native";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+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;
+}
+
+const STORAGE_KEY = "@spelyco/color-scheme";
+
+const resolveSystemScheme = (): SpelycoComputedColorScheme => {
+  const scheme = Appearance.getColorScheme();
+  return scheme === "dark" ? "dark" : "light";
+};
+
+export const useColorSchemeStore = create<ColorSchemeState>()(
+  persist(
+    (set, get) => ({
+      colorScheme: "auto",
+      systemColorScheme: resolveSystemScheme(),
+      setColorScheme: (scheme) => set({ colorScheme: scheme }),
+      toggleColorScheme: () => {
+        const { colorScheme, systemColorScheme } = get();
+        const current = colorScheme === "auto" ? systemColorScheme : colorScheme;
+        set({ colorScheme: current === "light" ? "dark" : "light" });
+      },
+      clearColorScheme: () => set({ colorScheme: "auto" }),
+    }),
+    {
+      name: STORAGE_KEY,
+      storage: createJSONStorage(() => AsyncStorage),
+      partialize: (state) => ({ colorScheme: state.colorScheme }),
+    }
+  )
+);
+
+let listenerSubscription: { remove: () => void } | null = null;
+
+/**
+ * Subscribes the store to OS color scheme changes. Idempotent — calling more
+ * than once is a no-op. Should be invoked once from `SpelycoProvider`.
+ */
+export const setupColorSchemeListener = () => {
+  if (listenerSubscription) return;
+  listenerSubscription = Appearance.addChangeListener(({ colorScheme }) => {
+    useColorSchemeStore.setState({
+      systemColorScheme: colorScheme === "dark" ? "dark" : "light",
+    });
+  });
+};
+
+export const teardownColorSchemeListener = () => {
+  listenerSubscription?.remove();
+  listenerSubscription = null;
+};

package/src/store/index.ts

@@ -0,0 +1,5 @@
+export {
+  setupColorSchemeListener,
+  teardownColorSchemeListener,
+  useColorSchemeStore,
+} from "./colorScheme";

package/src/types.ts

@@ -0,0 +1,10 @@
+import type { SpelycoBreakpoints } from "@spelyco/react-lib";
+import type { SpelycoUnistylesTheme } from "./provider/toUnistylesTheme";
+
+declare module "react-native-unistyles" {
+  export interface UnistylesThemes {
+    light: SpelycoUnistylesTheme;
+    dark: SpelycoUnistylesTheme;
+  }
+  export interface UnistylesBreakpoints extends SpelycoBreakpoints {}
+}

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"]}