@kilivi/payloadcms-theme-management 0.1.6 → 0.1.8

package/dist/fields/RadiusField.js

@@ -0,0 +1,174 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from '@payloadcms/ui';
+import { useMemo } from 'react';
+import { borderRadiusPresets } from '../providers/Theme/themeConfig.js';
+export default function RadiusField({ field, ...props }) {
+    const { value, setValue } = useField({
+        path: props.path
+    });
+    const label = typeof field.label === 'string' ? field.label : '';
+    const radiusOptions = useMemo(()=>{
+        const entries = Object.entries(borderRadiusPresets);
+        return entries.map(([key, preset])=>({
+                key,
+                label: preset.label,
+                css: preset.css
+            }));
+    }, []);
+    const fallbackKey = radiusOptions[2]?.key ?? radiusOptions[0]?.key ?? 'medium';
+    const currentKey = typeof value === 'string' && value in borderRadiusPresets ? value : fallbackKey;
+    const description = typeof field.admin?.description === 'string' ? field.admin.description : field.admin?.description?.en || field.admin?.description?.cs || null;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "field-type",
+        children: [
+            /*#__PURE__*/ _jsxs("label", {
+                className: "field-label",
+                htmlFor: props.path,
+                children: [
+                    label,
+                    field.required && /*#__PURE__*/ _jsx("span", {
+                        className: "required",
+                        children: "*"
+                    })
+                ]
+            }),
+            description && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    marginTop: '4px',
+                    fontSize: '12px',
+                    lineHeight: 1.5,
+                    color: 'var(--theme-elevation-600)'
+                },
+                children: description
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
+                    gap: '16px',
+                    marginTop: '16px'
+                },
+                children: radiusOptions.map((option)=>{
+                    const isSelected = option.key === currentKey;
+                    const cardRadius = option.css['--radius-large'] ?? option.css['--radius-default'] ?? option.css['--radius-medium'];
+                    const chipRadius = option.css['--radius-default'] ?? option.css['--radius-small'];
+                    const pillRadius = option.css['--radius-xl'] ?? option.css['--radius-large'] ?? '999px';
+                    return /*#__PURE__*/ _jsxs("button", {
+                        type: "button",
+                        onClick: ()=>setValue(option.key),
+                        "aria-pressed": isSelected,
+                        style: {
+                            border: isSelected ? '2px solid var(--theme-success-500)' : '1px solid var(--theme-elevation-150)',
+                            borderRadius: '14px',
+                            backgroundColor: 'var(--theme-elevation-25)',
+                            padding: '16px',
+                            display: 'grid',
+                            gap: '10px',
+                            textAlign: 'left',
+                            cursor: 'pointer',
+                            transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease',
+                            boxShadow: isSelected ? '0 10px 20px rgba(34, 197, 94, 0.18)' : '0 6px 18px rgba(15, 23, 42, 0.08)',
+                            transform: isSelected ? 'translateY(-2px)' : 'translateY(0)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    fontWeight: 600,
+                                    fontSize: '13px',
+                                    color: 'var(--theme-elevation-800)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: option.label
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            fontSize: '11px',
+                                            opacity: 0.7
+                                        },
+                                        children: option.key
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'grid',
+                                    gap: '10px'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            gap: '8px',
+                                            alignItems: 'center'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                style: {
+                                                    width: '50px',
+                                                    height: '34px',
+                                                    backgroundColor: 'var(--theme-elevation-100)',
+                                                    border: '1px solid var(--theme-elevation-200)',
+                                                    borderRadius: cardRadius ?? '0'
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx("div", {
+                                                style: {
+                                                    flex: 1,
+                                                    height: '14px',
+                                                    backgroundColor: 'var(--theme-primary-500)',
+                                                    borderRadius: pillRadius
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            gap: '6px',
+                                            flexWrap: 'wrap',
+                                            fontSize: '11px',
+                                            color: 'var(--theme-elevation-600)'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                children: [
+                                                    "Card ",
+                                                    cardRadius ?? '—'
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                children: [
+                                                    "Chip ",
+                                                    chipRadius ?? '—'
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                children: [
+                                                    "Pill ",
+                                                    pillRadius
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }, option.key);
+                })
+            }),
+            /*#__PURE__*/ _jsx("input", {
+                type: "hidden",
+                id: props.path,
+                value: currentKey,
+                readOnly: true
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=RadiusField.js.map

package/dist/fields/RadiusField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/RadiusField.tsx"],"sourcesContent":["'use client'\n\nimport { useField } from '@payloadcms/ui'\nimport type { SelectFieldClientProps } from 'payload'\nimport { useMemo } from 'react'\nimport { borderRadiusPresets } from '../providers/Theme/themeConfig.js'\n\ntype RadiusPresetKey = Extract<keyof typeof borderRadiusPresets, string>\n\ninterface RadiusOptionCard {\n  key: RadiusPresetKey\n  label: string\n  css: Record<string, string>\n}\n\nexport default function RadiusField({ field, ...props }: SelectFieldClientProps) {\n  const { value, setValue } = useField<string>({ path: props.path })\n  const label = typeof field.label === 'string' ? field.label : ''\n\n  const radiusOptions = useMemo<RadiusOptionCard[]>(() => {\n    const entries = Object.entries(borderRadiusPresets) as Array<\n      [RadiusPresetKey, (typeof borderRadiusPresets)[RadiusPresetKey]]\n    >\n    return entries.map(([key, preset]) => ({\n      key,\n      label: preset.label,\n      css: preset.css,\n    }))\n  }, [])\n\n  const fallbackKey: RadiusPresetKey = radiusOptions[2]?.key ?? radiusOptions[0]?.key ?? 'medium'\n  const currentKey =\n    typeof value === 'string' && value in borderRadiusPresets\n      ? (value as RadiusPresetKey)\n      : fallbackKey\n\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : field.admin?.description?.en || field.admin?.description?.cs || null\n\n  return (\n    <div className=\"field-type\">\n      <label className=\"field-label\" htmlFor={props.path}>\n        {label}\n        {field.required && <span className=\"required\">*</span>}\n      </label>\n\n      {description && (\n        <p\n          style={{\n            marginTop: '4px',\n            fontSize: '12px',\n            lineHeight: 1.5,\n            color: 'var(--theme-elevation-600)',\n          }}\n        >\n          {description}\n        </p>\n      )}\n\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',\n          gap: '16px',\n          marginTop: '16px',\n        }}\n      >\n  {radiusOptions.map((option) => {\n          const isSelected = option.key === currentKey\n          const cardRadius =\n            option.css['--radius-large'] ??\n            option.css['--radius-default'] ??\n            option.css['--radius-medium']\n          const chipRadius = option.css['--radius-default'] ?? option.css['--radius-small']\n          const pillRadius = option.css['--radius-xl'] ?? option.css['--radius-large'] ?? '999px'\n\n          return (\n            <button\n              key={option.key}\n              type=\"button\"\n              onClick={() => setValue(option.key)}\n              aria-pressed={isSelected}\n              style={{\n                border: isSelected\n                  ? '2px solid var(--theme-success-500)'\n                  : '1px solid var(--theme-elevation-150)',\n                borderRadius: '14px',\n                backgroundColor: 'var(--theme-elevation-25)',\n                padding: '16px',\n                display: 'grid',\n                gap: '10px',\n                textAlign: 'left',\n                cursor: 'pointer',\n                transition: 'border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease',\n                boxShadow: isSelected\n                  ? '0 10px 20px rgba(34, 197, 94, 0.18)'\n                  : '0 6px 18px rgba(15, 23, 42, 0.08)',\n                transform: isSelected ? 'translateY(-2px)' : 'translateY(0)',\n              }}\n            >\n              <div\n                style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'space-between',\n                  fontWeight: 600,\n                  fontSize: '13px',\n                  color: 'var(--theme-elevation-800)',\n                }}\n              >\n                <span>{option.label}</span>\n                  <span style={{ fontSize: '11px', opacity: 0.7 }}>{option.key}</span>\n              </div>\n\n              <div\n                style={{\n                  display: 'grid',\n                  gap: '10px',\n                }}\n              >\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: '8px',\n                    alignItems: 'center',\n                  }}\n                >\n                  <div\n                    style={{\n                      width: '50px',\n                      height: '34px',\n                      backgroundColor: 'var(--theme-elevation-100)',\n                      border: '1px solid var(--theme-elevation-200)',\n                      borderRadius: cardRadius ?? '0',\n                    }}\n                  />\n                  <div\n                    style={{\n                      flex: 1,\n                      height: '14px',\n                      backgroundColor: 'var(--theme-primary-500)',\n                      borderRadius: pillRadius,\n                    }}\n                  />\n                </div>\n\n                <div\n                  style={{\n                    display: 'flex',\n                    gap: '6px',\n                    flexWrap: 'wrap',\n                    fontSize: '11px',\n                    color: 'var(--theme-elevation-600)',\n                  }}\n                >\n                  <span>Card {cardRadius ?? '—'}</span>\n                  <span>Chip {chipRadius ?? '—'}</span>\n                  <span>Pill {pillRadius}</span>\n                </div>\n              </div>\n            </button>\n          )\n        })}\n      </div>\n\n  <input type=\"hidden\" id={props.path} value={currentKey} readOnly />\n    </div>\n  )\n}\n"],"names":["useField","useMemo","borderRadiusPresets","RadiusField","field","props","value","setValue","path","label","radiusOptions","entries","Object","map","key","preset","css","fallbackKey","currentKey","description","admin","en","cs","div","className","htmlFor","required","span","p","style","marginTop","fontSize","lineHeight","color","display","gridTemplateColumns","gap","option","isSelected","cardRadius","chipRadius","pillRadius","button","type","onClick","aria-pressed","border","borderRadius","backgroundColor","padding","textAlign","cursor","transition","boxShadow","transform","alignItems","justifyContent","fontWeight","opacity","width","height","flex","flexWrap","input","id","readOnly"],"mappings":"AAAA;;AAEA,SAASA,QAAQ,QAAQ,iBAAgB;AAEzC,SAASC,OAAO,QAAQ,QAAO;AAC/B,SAASC,mBAAmB,QAAQ,oCAAmC;AAUvE,eAAe,SAASC,YAAY,EAAEC,KAAK,EAAE,GAAGC,OAA+B;IAC7E,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGP,SAAiB;QAAEQ,MAAMH,MAAMG,IAAI;IAAC;IAChE,MAAMC,QAAQ,OAAOL,MAAMK,KAAK,KAAK,WAAWL,MAAMK,KAAK,GAAG;IAE9D,MAAMC,gBAAgBT,QAA4B;QAChD,MAAMU,UAAUC,OAAOD,OAAO,CAACT;QAG/B,OAAOS,QAAQE,GAAG,CAAC,CAAC,CAACC,KAAKC,OAAO,GAAM,CAAA;gBACrCD;gBACAL,OAAOM,OAAON,KAAK;gBACnBO,KAAKD,OAAOC,GAAG;YACjB,CAAA;IACF,GAAG,EAAE;IAEL,MAAMC,cAA+BP,aAAa,CAAC,EAAE,EAAEI,OAAOJ,aAAa,CAAC,EAAE,EAAEI,OAAO;IACvF,MAAMI,aACJ,OAAOZ,UAAU,YAAYA,SAASJ,sBACjCI,QACDW;IAEN,MAAME,cACJ,OAAOf,MAAMgB,KAAK,EAAED,gBAAgB,WAChCf,MAAMgB,KAAK,CAACD,WAAW,GACvBf,MAAMgB,KAAK,EAAED,aAAaE,MAAMjB,MAAMgB,KAAK,EAAED,aAAaG,MAAM;IAEtE,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACf;gBAAMe,WAAU;gBAAcC,SAASpB,MAAMG,IAAI;;oBAC/CC;oBACAL,MAAMsB,QAAQ,kBAAI,KAACC;wBAAKH,WAAU;kCAAW;;;;YAG/CL,6BACC,KAACS;gBACCC,OAAO;oBACLC,WAAW;oBACXC,UAAU;oBACVC,YAAY;oBACZC,OAAO;gBACT;0BAECd;;0BAIL,KAACI;gBACCM,OAAO;oBACLK,SAAS;oBACTC,qBAAqB;oBACrBC,KAAK;oBACLN,WAAW;gBACb;0BAELpB,cAAcG,GAAG,CAAC,CAACwB;oBACZ,MAAMC,aAAaD,OAAOvB,GAAG,KAAKI;oBAClC,MAAMqB,aACJF,OAAOrB,GAAG,CAAC,iBAAiB,IAC5BqB,OAAOrB,GAAG,CAAC,mBAAmB,IAC9BqB,OAAOrB,GAAG,CAAC,kBAAkB;oBAC/B,MAAMwB,aAAaH,OAAOrB,GAAG,CAAC,mBAAmB,IAAIqB,OAAOrB,GAAG,CAAC,iBAAiB;oBACjF,MAAMyB,aAAaJ,OAAOrB,GAAG,CAAC,cAAc,IAAIqB,OAAOrB,GAAG,CAAC,iBAAiB,IAAI;oBAEhF,qBACE,MAAC0B;wBAECC,MAAK;wBACLC,SAAS,IAAMrC,SAAS8B,OAAOvB,GAAG;wBAClC+B,gBAAcP;wBACdT,OAAO;4BACLiB,QAAQR,aACJ,uCACA;4BACJS,cAAc;4BACdC,iBAAiB;4BACjBC,SAAS;4BACTf,SAAS;4BACTE,KAAK;4BACLc,WAAW;4BACXC,QAAQ;4BACRC,YAAY;4BACZC,WAAWf,aACP,wCACA;4BACJgB,WAAWhB,aAAa,qBAAqB;wBAC/C;;0CAEA,MAACf;gCACCM,OAAO;oCACLK,SAAS;oCACTqB,YAAY;oCACZC,gBAAgB;oCAChBC,YAAY;oCACZ1B,UAAU;oCACVE,OAAO;gCACT;;kDAEA,KAACN;kDAAMU,OAAO5B,KAAK;;kDACjB,KAACkB;wCAAKE,OAAO;4CAAEE,UAAU;4CAAQ2B,SAAS;wCAAI;kDAAIrB,OAAOvB,GAAG;;;;0CAGhE,MAACS;gCACCM,OAAO;oCACLK,SAAS;oCACTE,KAAK;gCACP;;kDAEA,MAACb;wCACCM,OAAO;4CACLK,SAAS;4CACTE,KAAK;4CACLmB,YAAY;wCACd;;0DAEA,KAAChC;gDACCM,OAAO;oDACL8B,OAAO;oDACPC,QAAQ;oDACRZ,iBAAiB;oDACjBF,QAAQ;oDACRC,cAAcR,cAAc;gDAC9B;;0DAEF,KAAChB;gDACCM,OAAO;oDACLgC,MAAM;oDACND,QAAQ;oDACRZ,iBAAiB;oDACjBD,cAAcN;gDAChB;;;;kDAIJ,MAAClB;wCACCM,OAAO;4CACLK,SAAS;4CACTE,KAAK;4CACL0B,UAAU;4CACV/B,UAAU;4CACVE,OAAO;wCACT;;0DAEA,MAACN;;oDAAK;oDAAMY,cAAc;;;0DAC1B,MAACZ;;oDAAK;oDAAMa,cAAc;;;0DAC1B,MAACb;;oDAAK;oDAAMc;;;;;;;;uBA/EXJ,OAAOvB,GAAG;gBAoFrB;;0BAGN,KAACiD;gBAAMpB,MAAK;gBAASqB,IAAI3D,MAAMG,IAAI;gBAAEF,OAAOY;gBAAY+C,QAAQ;;;;AAGlE"}

package/dist/fields/ThemeColorPickerField.js

@@ -0,0 +1,163 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField, useFormFields } from '@payloadcms/ui';
+import { useEffect, useMemo, useState } from 'react';
+import './ThemeColorPickerField.css';
+function resolveLocalizedValue(value, fallback) {
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'object' && value !== null) {
+        const localized = value;
+        const resolved = localized.en ?? localized.cs ?? localized[''];
+        if (typeof resolved === 'string') {
+            return resolved;
+        }
+    }
+    return fallback;
+}
+const ThemeColorPickerField = ({ field, path })=>{
+    const { value, setValue } = useField({
+        path
+    });
+    const [localValue, setLocalValue] = useState(value || '');
+    const allFields = useFormFields(([fields])=>fields);
+    const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode';
+    const modePrefix = `themeConfiguration.${mode}`;
+    useEffect(()=>{
+        setLocalValue(value || '');
+    }, [
+        value
+    ]);
+    const colorValues = useMemo(()=>{
+        if (!allFields) {
+            return {};
+        }
+        const names = [
+            'background',
+            'foreground',
+            'card',
+            'cardForeground',
+            'popover',
+            'popoverForeground',
+            'primary',
+            'primaryForeground',
+            'secondary',
+            'secondaryForeground',
+            'muted',
+            'mutedForeground',
+            'accent',
+            'accentForeground',
+            'destructive',
+            'destructiveForeground',
+            'border',
+            'input',
+            'ring'
+        ];
+        return names.reduce((accumulator, name)=>{
+            const fieldState = allFields[`${modePrefix}.${name}`];
+            const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined;
+            accumulator[name] = parsedValue ?? '';
+            return accumulator;
+        }, {});
+    }, [
+        allFields,
+        modePrefix
+    ]);
+    function handleChange(nextValue) {
+        setLocalValue(nextValue);
+        setValue(nextValue);
+    }
+    const fieldName = path.split('.').pop() || '';
+    const label = resolveLocalizedValue(field.label, fieldName);
+    const description = resolveLocalizedValue(field.admin?.description, '');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "theme-color-picker-field",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "field-header",
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        className: "field-label",
+                        children: label
+                    }),
+                    description && /*#__PURE__*/ _jsx("div", {
+                        className: "field-description",
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "color-picker-container",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "color-input-wrapper",
+                        children: [
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "color",
+                                value: localValue || '#000000',
+                                onChange: (event)=>handleChange(event.target.value),
+                                className: "color-input"
+                            }),
+                            /*#__PURE__*/ _jsx("input", {
+                                type: "text",
+                                value: localValue || '',
+                                onChange: (event)=>handleChange(event.target.value),
+                                placeholder: "#000000",
+                                className: "text-input",
+                                pattern: "^#[0-9A-Fa-f]{6}$"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "color-preview",
+                        style: {
+                            backgroundColor: localValue || '#000000'
+                        },
+                        children: /*#__PURE__*/ _jsx("span", {
+                            className: "preview-label",
+                            children: localValue || 'Not set'
+                        })
+                    })
+                ]
+            }),
+            (fieldName === 'primary' || fieldName === 'background') && /*#__PURE__*/ _jsx("div", {
+                className: "mini-preview",
+                style: {
+                    backgroundColor: colorValues.background || '#ffffff',
+                    color: colorValues.foreground || '#000000',
+                    borderColor: colorValues.border || '#e2e8f0'
+                },
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "preview-card",
+                    style: {
+                        backgroundColor: colorValues.card || '#ffffff',
+                        color: colorValues.cardForeground || '#000000',
+                        borderColor: colorValues.border || '#e2e8f0'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            className: "preview-button",
+                            style: {
+                                backgroundColor: colorValues.primary || '#0070f3',
+                                color: colorValues.primaryForeground || '#ffffff'
+                            },
+                            children: "Primary Button"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            className: "preview-button secondary",
+                            style: {
+                                backgroundColor: colorValues.secondary || '#f1f5f9',
+                                color: colorValues.secondaryForeground || '#0f172a'
+                            },
+                            children: "Secondary"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export default ThemeColorPickerField;
+
+//# sourceMappingURL=ThemeColorPickerField.js.map

package/dist/fields/ThemeColorPickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ThemeColorPickerField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useFormFields } from '@payloadcms/ui'\nimport type { TextFieldClientComponent } from 'payload'\nimport { useEffect, useMemo, useState } from 'react'\nimport './ThemeColorPickerField.css'\n\nfunction resolveLocalizedValue(value: unknown, fallback: string) {\n  if (typeof value === 'string') {\n    return value\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const localized = value as Record<string, unknown>\n    const resolved = localized.en ?? localized.cs ?? localized['']\n    if (typeof resolved === 'string') {\n      return resolved\n    }\n  }\n\n  return fallback\n}\n\nconst ThemeColorPickerField: TextFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const [localValue, setLocalValue] = useState(value || '')\n  const allFields = useFormFields(([fields]) => fields)\n\n  const mode = path.includes('lightMode') ? 'lightMode' : 'darkMode'\n  const modePrefix = `themeConfiguration.${mode}`\n\n  useEffect(() => {\n    setLocalValue(value || '')\n  }, [value])\n\n  const colorValues = useMemo(() => {\n    if (!allFields) {\n      return {}\n    }\n\n    const names = [\n      'background',\n      'foreground',\n      'card',\n      'cardForeground',\n      'popover',\n      'popoverForeground',\n      'primary',\n      'primaryForeground',\n      'secondary',\n      'secondaryForeground',\n      'muted',\n      'mutedForeground',\n      'accent',\n      'accentForeground',\n      'destructive',\n      'destructiveForeground',\n      'border',\n      'input',\n      'ring',\n    ]\n\n    return names.reduce<Record<string, string>>((accumulator, name) => {\n      const fieldState = allFields[`${modePrefix}.${name}`]\n      const parsedValue = typeof fieldState?.value === 'string' ? fieldState.value : undefined\n      accumulator[name] = parsedValue ?? ''\n      return accumulator\n    }, {})\n  }, [allFields, modePrefix])\n\n  function handleChange(nextValue: string) {\n    setLocalValue(nextValue)\n    setValue(nextValue)\n  }\n\n  const fieldName = path.split('.').pop() || ''\n  const label = resolveLocalizedValue(field.label, fieldName)\n  const description = resolveLocalizedValue(field.admin?.description, '')\n\n  return (\n    <div className=\"theme-color-picker-field\">\n      <div className=\"field-header\">\n        <label className=\"field-label\">{label}</label>\n        {description && <div className=\"field-description\">{description}</div>}\n      </div>\n\n      <div className=\"color-picker-container\">\n        <div className=\"color-input-wrapper\">\n          <input\n            type=\"color\"\n            value={localValue || '#000000'}\n            onChange={(event) => handleChange(event.target.value)}\n            className=\"color-input\"\n          />\n          <input\n            type=\"text\"\n            value={localValue || ''}\n            onChange={(event) => handleChange(event.target.value)}\n            placeholder=\"#000000\"\n            className=\"text-input\"\n            pattern=\"^#[0-9A-Fa-f]{6}$\"\n          />\n        </div>\n\n        <div className=\"color-preview\" style={{ backgroundColor: localValue || '#000000' }}>\n          <span className=\"preview-label\">{localValue || 'Not set'}</span>\n        </div>\n      </div>\n\n      {(fieldName === 'primary' || fieldName === 'background') && (\n        <div\n          className=\"mini-preview\"\n          style={{\n            backgroundColor: colorValues.background || '#ffffff',\n            color: colorValues.foreground || '#000000',\n            borderColor: colorValues.border || '#e2e8f0',\n          }}\n        >\n          <div\n            className=\"preview-card\"\n            style={{\n              backgroundColor: colorValues.card || '#ffffff',\n              color: colorValues.cardForeground || '#000000',\n              borderColor: colorValues.border || '#e2e8f0',\n            }}\n          >\n            <button\n              className=\"preview-button\"\n              style={{\n                backgroundColor: colorValues.primary || '#0070f3',\n                color: colorValues.primaryForeground || '#ffffff',\n              }}\n            >\n              Primary Button\n            </button>\n            <button\n              className=\"preview-button secondary\"\n              style={{\n                backgroundColor: colorValues.secondary || '#f1f5f9',\n                color: colorValues.secondaryForeground || '#0f172a',\n              }}\n            >\n              Secondary\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ThemeColorPickerField\n"],"names":["useField","useFormFields","useEffect","useMemo","useState","resolveLocalizedValue","value","fallback","localized","resolved","en","cs","ThemeColorPickerField","field","path","setValue","localValue","setLocalValue","allFields","fields","mode","includes","modePrefix","colorValues","names","reduce","accumulator","name","fieldState","parsedValue","undefined","handleChange","nextValue","fieldName","split","pop","label","description","admin","div","className","input","type","onChange","event","target","placeholder","pattern","style","backgroundColor","span","background","color","foreground","borderColor","border","card","cardForeground","button","primary","primaryForeground","secondary","secondaryForeground"],"mappings":"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"}