@crystin001/theme-settings-lib 1.0.0 → 1.2.0

package/dist/components/ThemeShowcase.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ThemeShowcase Component
+ *
+ * A visual component to showcase all available themes for development purposes.
+ * Displays all theme families with their light and dark variants, showing
+ * color palettes and sample UI components.
+ */
+import React from 'react';
+export declare function ThemeShowcase(): React.JSX.Element;
+//# sourceMappingURL=ThemeShowcase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeShowcase.d.ts","sourceRoot":"","sources":["../../src/components/ThemeShowcase.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAmIxC,wBAAgB,aAAa,sBA0E5B"}

package/dist/components/ThemeShowcase.js

@@ -0,0 +1,357 @@
+"use strict";
+/**
+ * ThemeShowcase Component
+ *
+ * A visual component to showcase all available themes for development purposes.
+ * Displays all theme families with their light and dark variants, showing
+ * color palettes and sample UI components.
+ */
+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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeShowcase = ThemeShowcase;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const theme_1 = require("../theme");
+const settings_context_1 = require("../settings-context");
+const { width } = react_native_1.Dimensions.get('window');
+const CARD_WIDTH = width > 600 ? (width - 60) / 2 : width - 40;
+function ColorSwatch({ label, color, textColor }) {
+    return (<react_native_1.View style={[styles.swatch, { backgroundColor: color }]}>
+      <react_native_1.Text style={[styles.swatchLabel, { color: textColor || '#000' }]} numberOfLines={1}>
+        {label}
+      </react_native_1.Text>
+      <react_native_1.Text style={[styles.swatchValue, { color: textColor || '#000' }]} numberOfLines={1}>
+        {color}
+      </react_native_1.Text>
+    </react_native_1.View>);
+}
+function ThemeCard({ themeName, colors, isSelected, onSelect }) {
+    const displayName = themeName.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase());
+    const isDark = themeName.endsWith('-dark');
+    return (<react_native_1.Pressable onPress={onSelect} style={[
+            styles.themeCard,
+            {
+                backgroundColor: colors.card,
+                borderColor: isSelected ? colors.primary : colors.border,
+                borderWidth: isSelected ? 3 : 1,
+            },
+            isSelected && styles.selectedCard,
+        ]}>
+      <react_native_1.View style={[styles.themeHeader, { backgroundColor: colors.background }]}>
+        <react_native_1.Text style={[styles.themeTitle, { color: colors.text }]}>{displayName}</react_native_1.Text>
+        {isSelected && (<react_native_1.View style={[styles.selectedBadge, { backgroundColor: colors.primary }]}>
+            <react_native_1.Text style={[styles.selectedBadgeText, { color: colors.buttonText }]}>Active</react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.colorGrid}>
+        <ColorSwatch label="Background" color={colors.background} textColor={colors.text}/>
+        <ColorSwatch label="Text" color={colors.text}/>
+        <ColorSwatch label="Primary" color={colors.primary}/>
+        <ColorSwatch label="Secondary" color={colors.secondary}/>
+        <ColorSwatch label="Tint" color={colors.tint}/>
+        <ColorSwatch label="Card" color={colors.card} textColor={colors.cardText}/>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.sampleSection}>
+        <react_native_1.Text style={[styles.sampleLabel, { color: colors.text }]}>Sample UI:</react_native_1.Text>
+        
+        <react_native_1.View style={[styles.sampleCard, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <react_native_1.Text style={[styles.sampleText, { color: colors.cardText }]}>
+            Sample card content
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.buttonRow}>
+          <react_native_1.Pressable style={[styles.sampleButton, { backgroundColor: colors.button }]} onPress={() => { }}>
+            <react_native_1.Text style={[styles.sampleButtonText, { color: colors.buttonText }]}>
+              Primary
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+          <react_native_1.Pressable style={[styles.sampleButton, styles.sampleButtonSecondary, { backgroundColor: colors.buttonSecondary }]} onPress={() => { }}>
+            <react_native_1.Text style={[styles.sampleButtonText, { color: colors.buttonSecondaryText }]}>
+              Secondary
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.statusRow}>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.success }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Success</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.warning }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#000' }]}>Warning</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.error }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Error</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={[styles.statusBadge, { backgroundColor: colors.info }]}>
+            <react_native_1.Text style={[styles.statusText, { color: '#FFF' }]}>Info</react_native_1.Text>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={[styles.sampleInput, { backgroundColor: colors.input, borderColor: colors.inputBorder }]}>
+          <react_native_1.Text style={[styles.sampleInputText, { color: colors.inputText }]}>
+            Sample input field
+          </react_native_1.Text>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Pressable>);
+}
+function ThemeShowcase() {
+    const { currentTheme, setThemeFamily, availableThemeFamilies } = (0, settings_context_1.useSettings)();
+    const [filter, setFilter] = (0, react_1.useState)('all');
+    const themeEntries = Object.entries(theme_1.Themes);
+    const filteredThemes = themeEntries.filter(([name]) => {
+        if (filter === 'light')
+            return name.endsWith('-light');
+        if (filter === 'dark')
+            return name.endsWith('-dark');
+        return true;
+    });
+    const handleThemeSelect = (themeName) => {
+        // Extract theme family from theme name (e.g., 'neon-surf-light' -> 'neon-surf')
+        const family = themeName.replace(/-light$|-dark$/, '');
+        setThemeFamily(family);
+    };
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.header}>
+        <react_native_1.Text style={styles.headerTitle}>Theme Showcase</react_native_1.Text>
+        <react_native_1.Text style={styles.headerSubtitle}>
+          Tap any theme card to apply it
+        </react_native_1.Text>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.filterContainer}>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'all' && styles.filterButtonActive]} onPress={() => setFilter('all')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'all' && styles.filterTextActive]}>
+            All
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'light' && styles.filterButtonActive]} onPress={() => setFilter('light')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'light' && styles.filterTextActive]}>
+            Light
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        <react_native_1.TouchableOpacity style={[styles.filterButton, filter === 'dark' && styles.filterButtonActive]} onPress={() => setFilter('dark')}>
+          <react_native_1.Text style={[styles.filterText, filter === 'dark' && styles.filterTextActive]}>
+            Dark
+          </react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+      </react_native_1.View>
+
+      <react_native_1.ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={true}>
+        {filteredThemes.map(([themeName, colors]) => {
+            const isSelected = currentTheme === themeName;
+            return (<ThemeCard key={themeName} themeName={themeName} colors={colors} isSelected={isSelected} onSelect={() => handleThemeSelect(themeName)}/>);
+        })}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+}
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5F5F5',
+    },
+    header: {
+        padding: 20,
+        paddingTop: 40,
+        backgroundColor: '#FFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E0E0E0',
+    },
+    headerTitle: {
+        fontSize: 28,
+        fontWeight: 'bold',
+        color: '#000',
+        marginBottom: 4,
+    },
+    headerSubtitle: {
+        fontSize: 14,
+        color: '#666',
+    },
+    filterContainer: {
+        flexDirection: 'row',
+        padding: 12,
+        backgroundColor: '#FFF',
+        borderBottomWidth: 1,
+        borderBottomColor: '#E0E0E0',
+        gap: 8,
+    },
+    filterButton: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        backgroundColor: '#F0F0F0',
+    },
+    filterButtonActive: {
+        backgroundColor: '#007AFF',
+    },
+    filterText: {
+        fontSize: 14,
+        color: '#666',
+        fontWeight: '500',
+    },
+    filterTextActive: {
+        color: '#FFF',
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        padding: 20,
+        gap: 20,
+    },
+    themeCard: {
+        width: CARD_WIDTH,
+        alignSelf: 'center',
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 8,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 3,
+    },
+    selectedCard: {
+        shadowOpacity: 0.2,
+        shadowRadius: 8,
+        elevation: 6,
+    },
+    themeHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 16,
+        padding: 12,
+        borderRadius: 8,
+    },
+    themeTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        flex: 1,
+    },
+    selectedBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 12,
+    },
+    selectedBadgeText: {
+        fontSize: 12,
+        fontWeight: '600',
+    },
+    colorGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 16,
+    },
+    swatch: {
+        width: (CARD_WIDTH - 48) / 3 - 6,
+        height: 60,
+        borderRadius: 6,
+        padding: 6,
+        justifyContent: 'flex-end',
+    },
+    swatchLabel: {
+        fontSize: 10,
+        fontWeight: '600',
+        marginBottom: 2,
+    },
+    swatchValue: {
+        fontSize: 9,
+        opacity: 0.8,
+    },
+    sampleSection: {
+        marginTop: 8,
+    },
+    sampleLabel: {
+        fontSize: 14,
+        fontWeight: '600',
+        marginBottom: 8,
+    },
+    sampleCard: {
+        padding: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        marginBottom: 12,
+    },
+    sampleText: {
+        fontSize: 14,
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        gap: 8,
+        marginBottom: 12,
+    },
+    sampleButton: {
+        flex: 1,
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 6,
+        alignItems: 'center',
+    },
+    sampleButtonSecondary: {
+    // Additional styles if needed
+    },
+    sampleButtonText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    statusRow: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 8,
+        marginBottom: 12,
+    },
+    statusBadge: {
+        paddingHorizontal: 10,
+        paddingVertical: 6,
+        borderRadius: 12,
+    },
+    statusText: {
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    sampleInput: {
+        padding: 12,
+        borderRadius: 6,
+        borderWidth: 1,
+    },
+    sampleInputText: {
+        fontSize: 14,
+    },
+});

package/dist/index.d.ts

@@ -23,5 +23,6 @@ export * from './i18n';
 export * from './hooks/use-theme-color';
 export * from './hooks/use-translation';
 export * from './color-utils';
+export * from './theme-validation';
 export { default as i18n } from './i18n';
 //# 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;;;;;;;;;;;;;;;;;;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"}
+{"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;AAC9B,cAAc,oBAAoB,CAAC;AAGnC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -48,6 +48,7 @@ __exportStar(require("./hooks/use-theme-color"), exports);
 __exportStar(require("./hooks/use-translation"), exports);
 // Utility exports
 __exportStar(require("./color-utils"), exports);
+__exportStar(require("./theme-validation"), 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.map

@@ -1 +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"}
+{"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;AAsBD,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,qBAuFrE;AAED,wBAAgB,WAAW,wBAM1B"}

package/dist/settings-context.js

@@ -51,9 +51,11 @@ const STORAGE_KEYS = {
 const THEME_FAMILY_LABELS = {
     system: 'System',
     'neon-surf': 'Neon Surf',
-    'pink-purple': 'Pink & Purple',
-    pastel: 'Pastel',
-    github: 'GitHub',
+    'cotton-candy': 'Cotton Candy',
+    'midnight-forest': 'Midnight Forest',
+    'desert-sunset': 'Desert Sunset',
+    'cyber-amethyst': 'Cyber Amethyst',
+    'cosmic-orchid': 'Cosmic Orchid',
     'high-contrast': 'High Contrast',
     solarized: 'Solarized',
     'dark-plus': 'Dark Plus',

package/dist/stories/ThemeStories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const AllThemes: () => React.JSX.Element;
+export declare const LightThemes: () => React.JSX.Element;
+export declare const DarkThemes: () => React.JSX.Element;
+export declare const IndividualThemes: () => React.JSX.Element;
+//# sourceMappingURL=ThemeStories.d.ts.map

package/dist/stories/ThemeStories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeStories.d.ts","sourceRoot":"","sources":["../../src/stories/ThemeStories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkG1B,eAAO,MAAM,SAAS,yBAgBrB,CAAC;AAGF,eAAO,MAAM,WAAW,yBAevB,CAAC;AAGF,eAAO,MAAM,UAAU,yBAetB,CAAC;AAGF,eAAO,MAAM,gBAAgB,yBAsB5B,CAAC"}