@kilivi/payloadcms-theme-management 0.2.1 → 0.2.3

package/dist/fields/ThemeLivePreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemeLivePreview.tsx"],"sourcesContent":["'use client'\n\n/**\n * Theme Live Preview Component\n * Real-time preview of theme configuration\n * Inspired by Payload CMS 3 Live Preview\n */\n\nimport { useFormFields } from '@payloadcms/ui'\nimport { useEffect, useState } from 'react'\nimport './ThemeLivePreview.css'\n\nexport const ThemeLivePreview = () => {\n  const allFields = useFormFields(([fields]) => fields)\n  const [previewMode, setPreviewMode] = useState<'light' | 'dark'>('light')\n\n  const themeConfig = allFields?.themeConfiguration?.value as Record<string, any> | undefined\n\n  // Extract colors from theme configuration\n  const lightMode = themeConfig?.lightMode\n  const darkMode = themeConfig?.darkMode\n  const activeMode = previewMode === 'light' ? lightMode : darkMode\n\n  // Apply theme colors to preview\n  useEffect(() => {\n    if (!activeMode) return\n\n    const root = document.documentElement\n    Object.entries(activeMode).forEach(([key, value]) => {\n      if (typeof value === 'string') {\n        root.style.setProperty(`--preview-${key}`, value)\n      }\n    })\n  }, [activeMode])\n\n  if (!themeConfig) {\n    return (\n      <div className=\"theme-live-preview-empty\">\n        <p>Configure your theme to see live preview</p>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"theme-live-preview-container\" data-mode={previewMode}>\n      {/* Mode Toggle */}\n      <div className=\"preview-header\">\n        <h3>Live Theme Preview</h3>\n        <div className=\"mode-toggle\">\n          <button\n            type=\"button\"\n            className={previewMode === 'light' ? 'active' : ''}\n            onClick={() => setPreviewMode('light')}\n          >\n            ☀️ Light\n          </button>\n          <button\n            type=\"button\"\n            className={previewMode === 'dark' ? 'active' : ''}\n            onClick={() => setPreviewMode('dark')}\n          >\n            🌙 Dark\n          </button>\n        </div>\n      </div>\n\n      {/* Preview Content */}\n      <div\n        className=\"preview-content\"\n        style={{\n          backgroundColor: activeMode?.background || '#ffffff',\n          color: activeMode?.foreground || '#000000',\n        }}\n      >\n        {/* Header Section */}\n        <div className=\"preview-section\">\n          <h1 style={{ color: activeMode?.foreground }}>Welcome to Your Site</h1>\n          <p style={{ color: activeMode?.mutedForeground }}>\n            This is a live preview of your theme configuration\n          </p>\n        </div>\n\n        {/* Card Section */}\n        <div className=\"preview-cards\">\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: activeMode?.card || '#ffffff',\n              color: activeMode?.cardForeground || '#000000',\n              borderColor: activeMode?.border || '#e2e8f0',\n            }}\n          >\n            <h3>Featured Content</h3>\n            <p style={{ color: activeMode?.mutedForeground }}>\n              Card component with theme colors\n            </p>\n            <button\n              className=\"preview-btn-primary\"\n              style={{\n                backgroundColor: activeMode?.primary || '#0070f3',\n                color: activeMode?.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Action\n            </button>\n          </div>\n\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: activeMode?.card || '#ffffff',\n              color: activeMode?.cardForeground || '#000000',\n              borderColor: activeMode?.border || '#e2e8f0',\n            }}\n          >\n            <h3>Secondary Card</h3>\n            <p style={{ color: activeMode?.mutedForeground }}>\n              Another card to showcase your theme\n            </p>\n            <button\n              className=\"preview-btn-secondary\"\n              style={{\n                backgroundColor: activeMode?.secondary || '#f1f5f9',\n                color: activeMode?.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n\n        {/* UI Elements */}\n        <div className=\"preview-ui-elements\">\n          <input\n            type=\"text\"\n            placeholder=\"Input field\"\n            className=\"preview-input\"\n            style={{\n              backgroundColor: activeMode?.background,\n              color: activeMode?.foreground,\n              borderColor: activeMode?.input || activeMode?.border,\n            }}\n          />\n\n          <div\n            className=\"preview-badge\"\n            style={{\n              backgroundColor: activeMode?.accent || '#f1f5f9',\n              color: activeMode?.accentForeground || '#0f172a',\n            }}\n          >\n            Accent Badge\n          </div>\n\n          <button\n            className=\"preview-btn-destructive\"\n            style={{\n              backgroundColor: activeMode?.destructive || '#ef4444',\n              color: activeMode?.destructiveForeground || '#ffffff',\n            }}\n          >\n            Destructive\n          </button>\n        </div>\n\n        {/* Muted Section */}\n        <div\n          className=\"preview-muted\"\n          style={{\n            backgroundColor: activeMode?.muted || '#f1f5f9',\n            color: activeMode?.mutedForeground || '#64748b',\n          }}\n        >\n          <p>Muted background section for less prominent content</p>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default ThemeLivePreview\n"],"names":["useFormFields","useEffect","useState","ThemeLivePreview","allFields","fields","previewMode","setPreviewMode","themeConfig","themeConfiguration","value","lightMode","darkMode","activeMode","root","document","documentElement","Object","entries","forEach","key","style","setProperty","div","className","p","data-mode","h3","button","type","onClick","backgroundColor","background","color","foreground","h1","mutedForeground","card","cardForeground","borderColor","border","primary","primaryForeground","secondary","secondaryForeground","input","placeholder","accent","accentForeground","destructive","destructiveForeground","muted"],"mappings":"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"}

package/dist/fields/extendedThemeFields.d.ts

@@ -1,26 +1,138 @@
 import type { Field } from 'payload';
 /**
- * Extended Theme Color Fields for Light Mode
+ * Base Color Tokens (19 tokens)
+ * Required for all themes
  */
-export declare const extendedLightModeFields: Field[];
+export declare const baseColorFields: Field[];
 /**
- * Chart color fields (for data visualization)
+ * Chart Colors (5 tokens)
+ * For data visualization
  */
 export declare const chartColorFields: Field[];
 /**
- * Extended Theme Selection 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
  */
 export declare const extendedThemeSelectionField: Field;
 /**
- * Extended Light Mode Configuration
+ * 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 extendedLightModeField: Field;
+export declare const shadowConfigField: Field;
 /**
- * Extended Dark Mode Configuration
+ * Typography Configuration Section
  */
-export declare const extendedDarkModeField: Field;
+export declare const typographyConfigField: Field;
 /**
- * Chart Colors Configuration
+ * 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 +1 @@
-{"version":3,"file":"extendedThemeFields.d.ts","sourceRoot":"","sources":["../../src/fields/extendedThemeFields.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAoCpC;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,EAgG1C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EA0BnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAezC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAoBpC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAoBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAA"}
+{"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,EAoC/B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,EAmBnC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,EAa3C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,EAOrC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAezC,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;;;;;kBAOmuhB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAPx0C,CAAA;AAC1D,eAAO,MAAM,qBAAqB;;;;;kBAMouhB,CAAC;sBAA0B,CAAC;uBAA4C,CAAC;iBAAsC,CAAC;;;;;;;;qBAAsJ,CAAC;;;;gBAA9jgB,CAAC;uBAAmG,CAAC;gBAA0F,CAAC;iBAA6E,CAAC;kBAAoK,CAAC;;;;;;;;;;;;;;;;wGAN10C,CAAA;AACxD,eAAO,MAAM,gBAAgB,EAIxB,KAAK,CAAA"}