@expo-forge/forge-ui 0.0.47

package/types/index.d.ts

@@ -0,0 +1,140 @@
+// ForgeUI type augmentation — ships with the @expo-forge/forge-ui npm package.
+// Loaded automatically by TypeScript when forge-ui is in your devDependencies
+// and listed under compilerOptions.types in tsconfig.json.
+//
+// Adds `className?: string` to React Native component prop types so
+// TypeScript accepts <View className="..." /> without errors.
+
+import "react-native";
+import * as React from "react";
+import * as JSX from "react/jsx-runtime";
+
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+  }
+  interface TouchableOpacityProps {
+    className?: string;
+  }
+  interface TouchableHighlightProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  // ModalProps is already declared in react-native types, do not redeclare.
+  interface SafeAreaViewProps {
+    className?: string;
+  }
+  interface KeyboardAvoidingViewProps {
+    className?: string;
+  }
+  interface ActivityIndicatorProps {
+    className?: string;
+  }
+  interface SwitchProps {
+    className?: string;
+  }
+}
+
+// ── @expo-forge/forge-ui/theme ───────────────────────────────────────────────
+
+export type ForgeTheme = "light" | "dark";
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  /** Override the system color scheme with a fixed value. */
+  theme?: ForgeTheme;
+}
+
+/**
+ * Wrap your app with `<ThemeProvider>` so components using `dark:` classes
+ * re-render when the device color scheme changes.
+ */
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+
+/**
+ * Returns the current theme (`"light"` | `"dark"`).
+ * Requires `<ThemeProvider>` to be in the component tree for reactive updates.
+ */
+export declare function useForgeTheme(): ForgeTheme;
+
+/**
+ * Returns the current theme and a toggle function.
+ * Requires `<ThemeProvider>` to be in the component tree for reactive updates.
+ */
+export declare function useTheme(): {
+  theme: ForgeTheme;
+  toggleTheme: () => void;
+};
+
+export interface ForgeColors {
+  slate: string[];
+  gray: string[];
+  zinc: string[];
+  neutral: string[];
+  stone: string[];
+  red: string[];
+  orange: string[];
+  amber: string[];
+  yellow: string[];
+  lime: string[];
+  green: string[];
+  emerald: string[];
+  teal: string[];
+  cyan: string[];
+  sky: string[];
+  blue: string[];
+  indigo: string[];
+  violet: string[];
+  purple: string[];
+  fuchsia: string[];
+  pink: string[];
+  rose: string[];
+  brown: string[];
+  tan: string[];
+  sand: string[];
+  chocolate: string[];
+  sienna: string[];
+  mint: string[];
+  sage: string[];
+  olive: string[];
+  moss: string[];
+  forest: string[];
+  navy: string[];
+  cobalt: string[];
+  royal: string[];
+  cerulean: string[];
+  crimson: string[];
+  ruby: string[];
+  wine: string[];
+  burgundy: string[];
+  maroon: string[];
+  gold: string[];
+  bronze: string[];
+  copper: string[];
+  lavender: string[];
+  lilac: string[];
+  mauve: string[];
+  orchid: string[];
+  coral: string[];
+  salmon: string[];
+  peach: string[];
+  turquoise: string[];
+  aqua: string[];
+}
+
+/**
+ * Returns Forge color palettes (11 shades each, 0-10).
+ * Use in native components: `const colors = useColors(); <View style={{ backgroundColor: colors.blue[5] }} />`
+ */
+export declare function useColors(): ForgeColors;

package/types/theme.d.ts

@@ -0,0 +1,93 @@
+import * as React from "react";
+import * as JSX from "react/jsx-runtime";
+
+export type ForgeTheme = "light" | "dark";
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  /** Override the system color scheme with a fixed value. */
+  theme?: ForgeTheme;
+}
+
+/**
+ * Wrap your app with `<ThemeProvider>` so components using `dark:` classes
+ * re-render when the device color scheme changes.
+ */
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+
+/**
+ * Returns the current theme (`"light"` | `"dark"`).
+ * Requires `<ThemeProvider>` to be in the component tree for reactive updates.
+ */
+export declare function useForgeTheme(): ForgeTheme;
+
+/**
+ * Returns the current theme and a toggle function.
+ * Requires `<ThemeProvider>` to be in the component tree for reactive updates.
+ */
+export declare function useTheme(): {
+  theme: ForgeTheme;
+  toggleTheme: () => void;
+};
+
+export interface ForgeColors {
+  slate: string[];
+  gray: string[];
+  zinc: string[];
+  neutral: string[];
+  stone: string[];
+  red: string[];
+  orange: string[];
+  amber: string[];
+  yellow: string[];
+  lime: string[];
+  green: string[];
+  emerald: string[];
+  teal: string[];
+  cyan: string[];
+  sky: string[];
+  blue: string[];
+  indigo: string[];
+  violet: string[];
+  purple: string[];
+  fuchsia: string[];
+  pink: string[];
+  rose: string[];
+  brown: string[];
+  tan: string[];
+  sand: string[];
+  chocolate: string[];
+  sienna: string[];
+  mint: string[];
+  sage: string[];
+  olive: string[];
+  moss: string[];
+  forest: string[];
+  navy: string[];
+  cobalt: string[];
+  royal: string[];
+  cerulean: string[];
+  crimson: string[];
+  ruby: string[];
+  wine: string[];
+  burgundy: string[];
+  maroon: string[];
+  gold: string[];
+  bronze: string[];
+  copper: string[];
+  lavender: string[];
+  lilac: string[];
+  mauve: string[];
+  orchid: string[];
+  coral: string[];
+  salmon: string[];
+  peach: string[];
+  turquoise: string[];
+  aqua: string[];
+}
+
+/**
+ * Returns Forge color palettes (11 shades each, 0-10).
+ * Use in native components: `const colors = useColors(); <View style={{ backgroundColor: colors.blue[5] }} />`
+ */
+export declare function useColors(): ForgeColors;