@crystin001/theme-settings-lib 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Theme and Settings Library
+ *
+ * A reusable library for theme management, settings, and internationalization
+ * that can be shared across multiple mobile applications.
+ *
+ * @example
+ * ```tsx
+ * import { SettingsProvider, useTheme, useTranslation } from '@crystin001/theme-settings-lib';
+ *
+ * function App() {
+ *   return (
+ *     <SettingsProvider>
+ *       <YourApp />
+ *     </SettingsProvider>
+ *   );
+ * }
+ * ```
+ */
+export * from './theme';
+export * from './settings-context';
+export * from './i18n';
+export * from './hooks/use-theme-color';
+export * from './hooks/use-translation';
+export * from './color-utils';
+export { default as i18n } from './i18n';
+//# 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;;;;;;;;;;;;;;;;;;GAkBG;AAGH,cAAc,SAAS,CAAC;AAGxB,cAAc,oBAAoB,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,eAAe,CAAC;AAG9B,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -0,0 +1,53 @@
+"use strict";
+/**
+ * Theme and Settings Library
+ *
+ * A reusable library for theme management, settings, and internationalization
+ * that can be shared across multiple mobile applications.
+ *
+ * @example
+ * ```tsx
+ * import { SettingsProvider, useTheme, useTranslation } from '@crystin001/theme-settings-lib';
+ *
+ * function App() {
+ *   return (
+ *     <SettingsProvider>
+ *       <YourApp />
+ *     </SettingsProvider>
+ *   );
+ * }
+ * ```
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+// Theme exports
+__exportStar(require("./theme"), exports);
+// Settings context exports
+__exportStar(require("./settings-context"), exports);
+// i18n exports
+__exportStar(require("./i18n"), exports);
+// Hook exports
+__exportStar(require("./hooks/use-theme-color"), exports);
+__exportStar(require("./hooks/use-translation"), exports);
+// Utility exports
+__exportStar(require("./color-utils"), exports);
+// Re-export i18n instance for apps that need direct access
+var i18n_1 = require("./i18n");
+Object.defineProperty(exports, "i18n", { enumerable: true, get: function () { return __importDefault(i18n_1).default; } });

package/dist/settings-context.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { ThemeName, ThemeFamily } from './theme';
+import { SUPPORTED_LANGUAGES, SupportedLanguage } from './i18n';
+export type { SupportedLanguage, ThemeName, ThemeFamily };
+interface ThemeFamilyInfo {
+    family: ThemeFamily;
+    label: string;
+    lightTheme: ThemeName;
+    darkTheme: ThemeName;
+}
+interface SettingsContextType {
+    selectedThemeFamily: ThemeFamily;
+    currentTheme: ThemeName;
+    setThemeFamily: (family: ThemeFamily) => void;
+    language: SupportedLanguage;
+    setLanguage: (lang: SupportedLanguage) => void;
+    availableLanguages: typeof SUPPORTED_LANGUAGES;
+    availableThemeFamilies: ThemeFamilyInfo[];
+}
+export declare function SettingsProvider({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+export declare function useSettings(): SettingsContextType;
+//# sourceMappingURL=settings-context.d.ts.map

package/dist/settings-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-context.d.ts","sourceRoot":"","sources":["../src/settings-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkD,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EAAE,SAAS,EAAE,WAAW,EAAU,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGhE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAE1D,UAAU,eAAe;IACvB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,SAAS,CAAC;IACtB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,mBAAmB;IAC3B,mBAAmB,EAAE,WAAW,CAAC;IACjC,YAAY,EAAE,SAAS,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,WAAW,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC/C,kBAAkB,EAAE,OAAO,mBAAmB,CAAC;IAC/C,sBAAsB,EAAE,eAAe,EAAE,CAAC;CAC3C;AAoBD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAuFrE;AAED,wBAAgB,WAAW,wBAM1B"}

package/dist/settings-context.js

@@ -0,0 +1,144 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsProvider = SettingsProvider;
+exports.useSettings = useSettings;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+const i18n_1 = require("./i18n");
+const i18n_2 = __importDefault(require("./i18n"));
+const SettingsContext = (0, react_1.createContext)(undefined);
+const STORAGE_KEYS = {
+    THEME_NAME: '@app/theme_name',
+    LANGUAGE: '@app/language',
+};
+const THEME_FAMILY_LABELS = {
+    system: 'System',
+    'neon-surf': 'Neon Surf',
+    'pink-purple': 'Pink & Purple',
+    pastel: 'Pastel',
+    github: 'GitHub',
+    'high-contrast': 'High Contrast',
+    solarized: 'Solarized',
+    'dark-plus': 'Dark Plus',
+};
+function SettingsProvider({ children }) {
+    const systemColorScheme = (0, react_native_1.useColorScheme)();
+    const [themeFamily, setThemeFamilyState] = (0, react_1.useState)('system');
+    const [language, setLanguageState] = (0, react_1.useState)('en-US');
+    // Load settings from storage on mount
+    (0, react_1.useEffect)(() => {
+        const loadSettings = async () => {
+            try {
+                const [savedThemeFamily, savedLanguage] = await Promise.all([
+                    async_storage_1.default.getItem(STORAGE_KEYS.THEME_NAME),
+                    async_storage_1.default.getItem(STORAGE_KEYS.LANGUAGE),
+                ]);
+                if (savedThemeFamily) {
+                    const family = savedThemeFamily;
+                    if (Object.keys(THEME_FAMILY_LABELS).includes(family)) {
+                        setThemeFamilyState(family);
+                    }
+                }
+                if (savedLanguage) {
+                    const lang = savedLanguage;
+                    setLanguageState(lang);
+                    i18n_2.default.changeLanguage(lang);
+                }
+            }
+            catch (error) {
+                console.warn('Failed to load settings:', error);
+            }
+        };
+        loadSettings();
+    }, []);
+    // Calculate the actual theme to use based on current selection
+    const getEffectiveTheme = () => {
+        if (themeFamily === 'system') {
+            return (systemColorScheme || 'light') === 'dark' ? 'system-dark' : 'system-light';
+        }
+        const variant = (systemColorScheme || 'light') === 'dark' ? 'dark' : 'light';
+        return `${themeFamily}-${variant}`;
+    };
+    const currentTheme = getEffectiveTheme();
+    const setThemeFamily = async (family) => {
+        try {
+            setThemeFamilyState(family);
+            await async_storage_1.default.setItem(STORAGE_KEYS.THEME_NAME, family);
+        }
+        catch (error) {
+            console.warn('Failed to save theme:', error);
+        }
+    };
+    // Create theme family info
+    const availableThemeFamilies = Object.keys(THEME_FAMILY_LABELS).map((family) => ({
+        family,
+        label: THEME_FAMILY_LABELS[family],
+        lightTheme: family === 'system' ? 'system-light' : `${family}-light`,
+        darkTheme: family === 'system' ? 'system-dark' : `${family}-dark`,
+    }));
+    const setLanguage = async (lang) => {
+        try {
+            setLanguageState(lang);
+            i18n_2.default.changeLanguage(lang);
+            await async_storage_1.default.setItem(STORAGE_KEYS.LANGUAGE, lang);
+        }
+        catch (error) {
+            console.warn('Failed to save language:', error);
+        }
+    };
+    return (<SettingsContext.Provider value={{
+            selectedThemeFamily: themeFamily,
+            currentTheme,
+            setThemeFamily,
+            language,
+            setLanguage,
+            availableLanguages: i18n_1.SUPPORTED_LANGUAGES,
+            availableThemeFamilies,
+        }}>
+      {children}
+    </SettingsContext.Provider>);
+}
+function useSettings() {
+    const context = (0, react_1.useContext)(SettingsContext);
+    if (context === undefined) {
+        throw new Error('useSettings must be used within a SettingsProvider');
+    }
+    return context;
+}

package/dist/theme.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme system with theme families that have light and dark variants
+ * Each theme family has both a light and dark mode
+ */
+export type ThemeFamily = 'system' | 'neon-surf' | 'pink-purple' | 'pastel' | 'github' | 'high-contrast' | 'solarized' | 'dark-plus';
+export type ThemeVariant = 'light' | 'dark';
+export type ThemeName = `${ThemeFamily}-${ThemeVariant}` | 'system';
+export type ActualThemeName = Exclude<ThemeName, 'system'>;
+export interface ThemeColors {
+    text: string;
+    background: string;
+    tint: string;
+    icon: string;
+    tabIconDefault: string;
+    tabIconSelected: string;
+    border: string;
+    card: string;
+    cardText: string;
+    button: string;
+    buttonText: string;
+    buttonSecondary: string;
+    buttonSecondaryText: string;
+    input: string;
+    inputText: string;
+    inputBorder: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    primary: string;
+    secondary: string;
+    muted: string;
+}
+export declare const Themes: Record<ActualThemeName, ThemeColors>;
+export declare const Colors: {
+    light: ThemeColors;
+    dark: ThemeColors;
+};
+export declare const Fonts: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: string;
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: string;
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: string;
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: string;
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,MAAM,WAAW,GACnB,QAAQ,GACR,WAAW,GACX,aAAa,GACb,QAAQ,GACR,QAAQ,GACR,eAAe,GACf,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,GAAG,WAAW,IAAI,YAAY,EAAE,GAAG,QAAQ,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAE3D,MAAM,WAAW,WAAW;IAE1B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IAExB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAEb,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAyZvD,CAAC;AAGF,eAAO,MAAM,MAAM;;;CAGlB,CAAC;AAEF,eAAO,MAAM,KAAK;IAEd,gDAAgD;;IAEhD,8CAA8C;;IAE9C,gDAAgD;;IAEhD,mDAAmD;;CAerD,CAAC"}