@kilivi/payloadcms-theme-management 0.3.1 → 0.3.3

package/dist/fields/VISUAL_EXAMPLES.js

@@ -1,148 +0,0 @@
-/**
- * Enhanced Font Selector - Visual Examples
- *
- * This file demonstrates how the font selector appears with actual fonts
- */ /**
- * BEFORE (Standard Payload Select):
- *
- * ┌──────────────────────────────┐
- * │ Body font             ▼      │
- * ├──────────────────────────────┤
- * │ System                       │
- * │ Inter                        │
- * │ Roboto                       │
- * │ Open Sans                    │
- * │ ...                          │
- * └──────────────────────────────┘
- *
- * Issues:
- * - No visual preview of fonts
- * - Can't see how font looks
- * - Generic dropdown appearance
- * - No distinction between fonts
- */ /**
- * AFTER (Custom Font Selector):
- *
- * ┌────────────────────────────────────┐
- * │ Body font                          │
- * │ ┌────────────────────────────┐     │
- * │ │ Inter               ▼      │     │
- * │ └────────────────────────────┘     │
- * └────────────────────────────────────┘
- *
- * Opens dropdown:
- *
- * ┌────────────────────────────────────┐
- * │ ✓ Inter                            │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Inter font)         │
- * ├────────────────────────────────────┤
- * │   Roboto                           │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Roboto font)        │
- * ├────────────────────────────────────┤
- * │   Playfair Display                 │
- * │   The quick brown fox jumps...     │
- * │   (rendered in Playfair font)      │
- * └────────────────────────────────────┘
- *
- * Features:
- * ✅ Live font preview
- * ✅ Check mark on selected
- * ✅ Hover effects
- * ✅ Smooth transitions
- * ✅ Font category badges
- */ /**
- * Color Picker BEFORE (Inline Popover):
- *
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * │   ┌──────────────────┐         │
- * │   │  Color Picker    │         │
- * │   │  [Hex Wheel]     │         │
- * │   │  #3b82f6         │         │
- * │   └──────────────────┘         │
- * └────────────────────────────────┘
- *
- * Issues:
- * - Takes up inline space
- * - Hard to use on mobile
- * - No quick color swatches
- * - Click-outside handling complex
- */ /**
- * Color Picker AFTER (Modal Drawer):
- *
- * Field:
- * ┌────────────────────────────────┐
- * │ Primary color                  │
- * │ ┌───┐ #3b82f6                  │
- * │ │███│ ────────────             │
- * │ └───┘                          │
- * └────────────────────────────────┘
- *
- * Click swatch → Opens Modal:
- *
- * ╔════════════════════════════════╗
- * ║ Choose Primary color      [×]  ║
- * ╠════════════════════════════════╣
- * ║                                ║
- * ║   ┌────────────────────┐       ║
- * ║   │                    │       ║
- * ║   │   [Color Wheel]    │       ║
- * ║   │                    │       ║
- * ║   └────────────────────┘       ║
- * ║                                ║
- * ║   #3b82f6          [Done]      ║
- * ║                                ║
- * ║   Quick Colors:                ║
- * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║
- * ║   │██│██│██│██│██│██│██│██│   ║
- * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║
- * ║                                ║
- * ╚════════════════════════════════╝
- *
- * Features:
- * ✅ Full-screen modal (Payload Drawer)
- * ✅ Larger color picker (220px)
- * ✅ Quick color swatches
- * ✅ Better mobile UX
- * ✅ Escape key to close
- */ /**
- * Theme Preset Selector (Already Had Swatches!):
- *
- * ┌─────────────────────────────────────┐
- * │ Cool & Professional     ●●●●●       │
- * │ cool                                │
- * ├─────────────────────────────────────┤
- * │ Warm & Inviting        ●●●●●       │
- * │ warm                                │
- * ├─────────────────────────────────────┤
- * │ Dark & Modern          ●●●●●       │
- * │ dark                                │
- * └─────────────────────────────────────┘
- *
- * Legend:
- * ● = Color swatch for:
- *     - Primary
- *     - Secondary
- *     - Accent
- *     - Background
- *     - Foreground
- */ export const examples = {
-    fontSelector: {
-        before: 'Standard dropdown with no preview',
-        after: 'Custom component with live font rendering'
-    },
-    colorPicker: {
-        before: 'Inline popover',
-        after: 'Modal drawer with quick swatches'
-    },
-    themePresets: {
-        status: 'Already implemented with color swatches!'
-    }
-};
-
-//# sourceMappingURL=VISUAL_EXAMPLES.js.map

package/dist/fields/VISUAL_EXAMPLES.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/VISUAL_EXAMPLES.ts"],"sourcesContent":["/**\n * Enhanced Font Selector - Visual Examples\n *\n * This file demonstrates how the font selector appears with actual fonts\n */\n\n/**\n * BEFORE (Standard Payload Select):\n *\n * ┌──────────────────────────────┐\n * │ Body font             ▼      │\n * ├──────────────────────────────┤\n * │ System                       │\n * │ Inter                        │\n * │ Roboto                       │\n * │ Open Sans                    │\n * │ ...                          │\n * └──────────────────────────────┘\n *\n * Issues:\n * - No visual preview of fonts\n * - Can't see how font looks\n * - Generic dropdown appearance\n * - No distinction between fonts\n */\n\n/**\n * AFTER (Custom Font Selector):\n *\n * ┌────────────────────────────────────┐\n * │ Body font                          │\n * │ ┌────────────────────────────┐     │\n * │ │ Inter               ▼      │     │\n * │ └────────────────────────────┘     │\n * └────────────────────────────────────┘\n *\n * Opens dropdown:\n *\n * ┌────────────────────────────────────┐\n * │ ✓ Inter                            │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Inter font)         │\n * ├────────────────────────────────────┤\n * │   Roboto                           │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Roboto font)        │\n * ├────────────────────────────────────┤\n * │   Playfair Display                 │\n * │   The quick brown fox jumps...     │\n * │   (rendered in Playfair font)      │\n * └────────────────────────────────────┘\n *\n * Features:\n * ✅ Live font preview\n * ✅ Check mark on selected\n * ✅ Hover effects\n * ✅ Smooth transitions\n * ✅ Font category badges\n */\n\n/**\n * Color Picker BEFORE (Inline Popover):\n *\n * ┌────────────────────────────────┐\n * │ Primary color                  │\n * │ ┌───┐ #3b82f6                  │\n * │ │███│ ────────────             │\n * │ └───┘                          │\n * │   ┌──────────────────┐         │\n * │   │  Color Picker    │         │\n * │   │  [Hex Wheel]     │         │\n * │   │  #3b82f6         │         │\n * │   └──────────────────┘         │\n * └────────────────────────────────┘\n *\n * Issues:\n * - Takes up inline space\n * - Hard to use on mobile\n * - No quick color swatches\n * - Click-outside handling complex\n */\n\n/**\n * Color Picker AFTER (Modal Drawer):\n *\n * Field:\n * ┌────────────────────────────────┐\n * │ Primary color                  │\n * │ ┌───┐ #3b82f6                  │\n * │ │███│ ────────────             │\n * │ └───┘                          │\n * └────────────────────────────────┘\n *\n * Click swatch → Opens Modal:\n *\n * ╔════════════════════════════════╗\n * ║ Choose Primary color      [×]  ║\n * ╠════════════════════════════════╣\n * ║                                ║\n * ║   ┌────────────────────┐       ║\n * ║   │                    │       ║\n * ║   │   [Color Wheel]    │       ║\n * ║   │                    │       ║\n * ║   └────────────────────┘       ║\n * ║                                ║\n * ║   #3b82f6          [Done]      ║\n * ║                                ║\n * ║   Quick Colors:                ║\n * ║   ┌──┬──┬──┬──┬──┬──┬──┬──┐   ║\n * ║   │██│██│██│██│██│██│██│██│   ║\n * ║   └──┴──┴──┴──┴──┴──┴──┴──┘   ║\n * ║                                ║\n * ╚════════════════════════════════╝\n *\n * Features:\n * ✅ Full-screen modal (Payload Drawer)\n * ✅ Larger color picker (220px)\n * ✅ Quick color swatches\n * ✅ Better mobile UX\n * ✅ Escape key to close\n */\n\n/**\n * Theme Preset Selector (Already Had Swatches!):\n *\n * ┌─────────────────────────────────────┐\n * │ Cool & Professional     ●●●●●       │\n * │ cool                                │\n * ├─────────────────────────────────────┤\n * │ Warm & Inviting        ●●●●●       │\n * │ warm                                │\n * ├─────────────────────────────────────┤\n * │ Dark & Modern          ●●●●●       │\n * │ dark                                │\n * └─────────────────────────────────────┘\n *\n * Legend:\n * ● = Color swatch for:\n *     - Primary\n *     - Secondary\n *     - Accent\n *     - Background\n *     - Foreground\n */\n\nexport const examples = {\n  fontSelector: {\n    before: 'Standard dropdown with no preview',\n    after: 'Custom component with live font rendering',\n  },\n  colorPicker: {\n    before: 'Inline popover',\n    after: 'Modal drawer with quick swatches',\n  },\n  themePresets: {\n    status: 'Already implemented with color swatches!',\n  },\n}\n"],"names":["examples","fontSelector","before","after","colorPicker","themePresets","status"],"mappings":"AAAA;;;;CAIC,GAED;;;;;;;;;;;;;;;;;;CAkBC,GAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCC,GAED;;;;;;;;;;;;;;;;;;;;CAoBC,GAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCC,GAED;;;;;;;;;;;;;;;;;;;;;CAqBC,GAED,OAAO,MAAMA,WAAW;IACtBC,cAAc;QACZC,QAAQ;QACRC,OAAO;IACT;IACAC,aAAa;QACXF,QAAQ;QACRC,OAAO;IACT;IACAE,cAAc;QACZC,QAAQ;IACV;AACF,EAAC"}

package/dist/fields/extendedThemeFields.d.ts

@@ -1,139 +0,0 @@
-import type { Field } from 'payload';
-/**
- * Base Color Tokens (19 tokens)
- * Required for all themes
- */
-export declare const baseColorFields: Field[];
-/**
- * Chart Colors (5 tokens)
- * For data visualization
- */
-export declare const chartColorFields: Field[];
-/**
- * Shadow Controls (6 properties)
- * TweakCN essential feature
- */
-export declare const shadowFields: Field[];
-/**
- * Font Family Configuration (3 families)
- * TweakCN essential feature
- */
-export declare const fontFamilyFields: Field[];
-/**
- * Advanced Typography (2 properties)
- */
-export declare const advancedTypographyFields: Field[];
-/**
- * Border Radius Configuration
- */
-export declare const designSystemFields: Field[];
-/**
- * Extended Theme Selection Field with Visual Preview and Auto-Population
- * Automatically fills all color fields when a theme is selected
- */
-export declare const extendedThemeSelectionField: Field;
-/**
- * Unified Light Mode Configuration
- * Combines all color tokens in one place
- */
-export declare const lightModeColorsField: Field;
-/**
- * Unified Dark Mode Configuration
- */
-export declare const darkModeColorsField: Field;
-/**
- * Shadow Configuration Section
- */
-export declare const shadowConfigField: Field;
-/**
- * Typography Configuration Section
- */
-export declare const typographyConfigField: Field;
-/**
- * Design System Configuration
- */
-export declare const designSystemConfigField: Field;
-export declare const extendedLightModeField: {
-    fields: Field[];
-    type: "collapsible";
-} & {
-    admin?: {
-        components?: {
-            afterInput?: import("payload").CustomPreviewButton[];
-            beforeInput?: import("payload").CustomPreviewButton[];
-            Label?: import("payload").CustomPreviewButton<import("payload").CollapsibleFieldLabelClientComponent | import("payload").CollapsibleFieldLabelServerComponent>;
-        } & {
-            Cell?: import("payload").PayloadComponent<import("payload").DefaultServerCellComponentProps, import("payload").DefaultCellComponentProps>;
-            Description?: import("payload").PayloadComponent<import("payload").FieldDescriptionServerProps, import("payload").FieldDescriptionClientProps>;
-            Diff?: import("payload").PayloadComponent<import("payload").FieldDiffServerProps, import("payload").FieldDiffClientProps>;
-            Field?: import("payload").PayloadComponent<import("payload").FieldClientComponent | import("payload").FieldServerComponent>;
-            Filter?: import("payload").PayloadComponent;
-        };
-        initCollapsed?: boolean;
-    } & {
-        className?: string;
-        components?: {
-            Cell?: import("payload").PayloadComponent<import("payload").DefaultServerCellComponentProps, import("payload").DefaultCellComponentProps>;
-            Description?: import("payload").PayloadComponent<import("payload").FieldDescriptionServerProps, import("payload").FieldDescriptionClientProps>;
-            Diff?: import("payload").PayloadComponent<import("payload").FieldDiffServerProps, import("payload").FieldDiffClientProps>;
-            Field?: import("payload").PayloadComponent<import("payload").FieldClientComponent | import("payload").FieldServerComponent>;
-            Filter?: import("payload").PayloadComponent;
-        };
-        condition?: import("payload").Condition;
-        custom?: Record<string, any>;
-        description?: import("payload").Description;
-        disableBulkEdit?: boolean;
-        disabled?: boolean;
-        disableListColumn?: boolean;
-        disableListFilter?: boolean;
-        hidden?: boolean;
-        position?: "sidebar";
-        readOnly?: boolean;
-        style?: import("react").CSSProperties;
-        width?: import("react").CSSProperties["width"];
-    };
-    label: Required<import("payload").FieldBase["label"]>;
-} & Omit<import("payload").FieldBase, "validate" | "hooks" | "label" | "localized" | "name" | "virtual">;
-export declare const extendedDarkModeField: {
-    fields: Field[];
-    type: "collapsible";
-} & {
-    admin?: {
-        components?: {
-            afterInput?: import("payload").CustomPreviewButton[];
-            beforeInput?: import("payload").CustomPreviewButton[];
-            Label?: import("payload").CustomPreviewButton<import("payload").CollapsibleFieldLabelClientComponent | import("payload").CollapsibleFieldLabelServerComponent>;
-        } & {
-            Cell?: import("payload").PayloadComponent<import("payload").DefaultServerCellComponentProps, import("payload").DefaultCellComponentProps>;
-            Description?: import("payload").PayloadComponent<import("payload").FieldDescriptionServerProps, import("payload").FieldDescriptionClientProps>;
-            Diff?: import("payload").PayloadComponent<import("payload").FieldDiffServerProps, import("payload").FieldDiffClientProps>;
-            Field?: import("payload").PayloadComponent<import("payload").FieldClientComponent | import("payload").FieldServerComponent>;
-            Filter?: import("payload").PayloadComponent;
-        };
-        initCollapsed?: boolean;
-    } & {
-        className?: string;
-        components?: {
-            Cell?: import("payload").PayloadComponent<import("payload").DefaultServerCellComponentProps, import("payload").DefaultCellComponentProps>;
-            Description?: import("payload").PayloadComponent<import("payload").FieldDescriptionServerProps, import("payload").FieldDescriptionClientProps>;
-            Diff?: import("payload").PayloadComponent<import("payload").FieldDiffServerProps, import("payload").FieldDiffClientProps>;
-            Field?: import("payload").PayloadComponent<import("payload").FieldClientComponent | import("payload").FieldServerComponent>;
-            Filter?: import("payload").PayloadComponent;
-        };
-        condition?: import("payload").Condition;
-        custom?: Record<string, any>;
-        description?: import("payload").Description;
-        disableBulkEdit?: boolean;
-        disabled?: boolean;
-        disableListColumn?: boolean;
-        disableListFilter?: boolean;
-        hidden?: boolean;
-        position?: "sidebar";
-        readOnly?: boolean;
-        style?: import("react").CSSProperties;
-        width?: import("react").CSSProperties["width"];
-    };
-    label: Required<import("payload").FieldBase["label"]>;
-} & Omit<import("payload").FieldBase, "validate" | "hooks" | "label" | "localized" | "name" | "virtual">;
-export declare const chartColorsField: Field;
-//# sourceMappingURL=extendedThemeFields.d.ts.map

package/dist/fields/extendedThemeFields.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"extendedThemeFields.d.ts","sourceRoot":"","sources":["../../src/fields/extendedThemeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAsEpC;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,EAgGlC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EA0BnC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,EA0B/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EAiBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,EAS3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,EAKrC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAkBzC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAoBlC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAoBjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAoB/B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAoBrC,CAAA;AAID,eAAO,MAAM,sBAAsB;;;;;kBAOwhhB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAP7nC,CAAA;AAC1D,eAAO,MAAM,qBAAqB;;;;;kBAMyhhB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAN/nC,CAAA;AACxD,eAAO,MAAM,gBAAgB,EAIxB,KAAK,CAAA"}