@kilivi/payloadcms-theme-management 0.1.6 → 0.1.7

package/dist/fields/ColorPickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/fields/ColorPickerField.tsx"],"sourcesContent":["'use client'\r\n\r\nimport { useField } from '@payloadcms/ui'\r\nimport type { TextFieldClientProps } from 'payload'\r\nimport { useCallback, useEffect, useRef, useState } from 'react'\r\n\r\nconst colorPresets: Record<string, string[]> = {\r\n  'Theme Colors': ['#3b82f6', '#1e40af', '#b45309', '#78716c', '#8b5cf6', '#f97316'],\r\n  'Common Colors': ['#ef4444', '#10b981', '#f59e0b', '#06b6d4', '#ec4899', '#6b7280'],\r\n  'Neutral Tones': ['#000000', '#1f2937', '#6b7280', '#d1d5db', '#f3f4f6', '#ffffff'],\r\n}\r\n\r\nfunction resolveLocalizedValue(value: unknown): string {\r\n  if (typeof value === 'string') {\r\n    return value\r\n  }\r\n\r\n  if (typeof value === 'object' && value !== null) {\r\n    const localized = value as Record<string, unknown>\r\n    const fallback = localized.en ?? localized.cs ?? localized['']\r\n    return typeof fallback === 'string' ? fallback : ''\r\n  }\r\n\r\n  return ''\r\n}\r\n\r\nexport default function ColorPickerField(props: TextFieldClientProps) {\r\n  const { field, path } = props\r\n  const { value = '#000000', setValue } = useField<string>({ path })\r\n  const [isPickerOpen, setIsPickerOpen] = useState(false)\r\n  const pickerRef = useRef<HTMLDivElement>(null)\r\n\r\n  const fieldLabel = resolveLocalizedValue(field.label)\r\n  const fieldDescription = resolveLocalizedValue(field.admin?.description)\r\n  const placeholder = resolveLocalizedValue(field.admin?.placeholder) || 'e.g., #3b82f6, hsl(...)'\r\n\r\n  const handleColorChange = useCallback(\r\n    (color: string) => {\r\n      setValue(color)\r\n    },\r\n    [setValue],\r\n  )\r\n\r\n  const handleInputChange = useCallback(\r\n    (event: React.ChangeEvent<HTMLInputElement>) => {\r\n      handleColorChange(event.target.value)\r\n    },\r\n    [handleColorChange],\r\n  )\r\n\r\n  const togglePicker = useCallback(() => {\r\n    setIsPickerOpen((previous) => !previous)\r\n  }, [])\r\n\r\n  useEffect(() => {\r\n    if (!isPickerOpen) {\r\n      return\r\n    }\r\n\r\n    function handleClickOutside(event: MouseEvent) {\r\n      if (!pickerRef.current) {\r\n        return\r\n      }\r\n\r\n      if (!pickerRef.current.contains(event.target as Node)) {\r\n        setIsPickerOpen(false)\r\n      }\r\n    }\r\n\r\n    document.addEventListener('mousedown', handleClickOutside)\r\n\r\n    return () => {\r\n      document.removeEventListener('mousedown', handleClickOutside)\r\n    }\r\n  }, [isPickerOpen])\r\n\r\n  return (\r\n    <div className=\"field-type color-picker-field\" style={{ position: 'relative' }}>\r\n      {fieldLabel && (\r\n        <label\r\n          htmlFor={path}\r\n          className=\"field-label\"\r\n          style={{ display: 'block', marginBottom: '8px', fontSize: '13px', fontWeight: 600 }}\r\n        >\r\n          {fieldLabel}\r\n          {field.required && (\r\n            <span\r\n              className=\"required\"\r\n              style={{ color: 'var(--theme-error-500)', marginLeft: '4px' }}\r\n            >\r\n              *\r\n            </span>\r\n          )}\r\n        </label>\r\n      )}\r\n\r\n      {fieldDescription && (\r\n        <div\r\n          className=\"field-description\"\r\n          style={{\r\n            marginBottom: '8px',\r\n            fontSize: '13px',\r\n            color: 'var(--theme-elevation-500)',\r\n            lineHeight: 1.5,\r\n          }}\r\n        >\r\n          {fieldDescription}\r\n        </div>\r\n      )}\r\n\r\n      <div\r\n        className=\"color-picker-input-group\"\r\n        style={{ display: 'flex', alignItems: 'center', gap: '8px' }}\r\n      >\r\n        <button\r\n          type=\"button\"\r\n          onClick={togglePicker}\r\n          className=\"color-preview-button\"\r\n          style={{\r\n            width: '40px',\r\n            height: '40px',\r\n            borderRadius: '6px',\r\n            border: '2px solid #e5e7eb',\r\n            backgroundColor: value || '#ffffff',\r\n            cursor: 'pointer',\r\n            position: 'relative',\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n          }}\r\n          title={value ? `Current color: ${value}` : 'Select a color'}\r\n        >\r\n          {!value && <span style={{ fontSize: '20px', color: '#9ca3af' }}>?</span>}\r\n        </button>\r\n\r\n        <input\r\n          id={path}\r\n          type=\"text\"\r\n          value={value || ''}\r\n          onChange={handleInputChange}\r\n          placeholder={placeholder}\r\n          style={{\r\n            flex: 1,\r\n            padding: '8px 12px',\r\n            border: '1px solid var(--theme-elevation-150)',\r\n            borderRadius: '6px',\r\n            fontSize: '14px',\r\n            fontFamily: 'monospace',\r\n            backgroundColor: 'var(--theme-elevation-0)',\r\n            color: 'var(--theme-elevation-1000)',\r\n          }}\r\n        />\r\n\r\n        <input\r\n          type=\"color\"\r\n          value={value?.startsWith('#') ? value : '#3b82f6'}\r\n          onChange={handleInputChange}\r\n          title=\"Pick a color\"\r\n          style={{\r\n            width: '40px',\r\n            height: '40px',\r\n            border: 'none',\r\n            borderRadius: '6px',\r\n            cursor: 'pointer',\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {isPickerOpen && (\r\n        <div\r\n          ref={pickerRef}\r\n          className=\"color-presets\"\r\n          style={{\r\n            position: 'absolute',\r\n            top: '100%',\r\n            left: 0,\r\n            right: 0,\r\n            zIndex: 1000,\r\n            marginTop: '4px',\r\n            padding: '16px',\r\n            border: '1px solid var(--theme-elevation-150)',\r\n            borderRadius: '8px',\r\n            backgroundColor: 'var(--theme-elevation-0)',\r\n            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',\r\n            maxHeight: '300px',\r\n            overflowY: 'auto',\r\n          }}\r\n        >\r\n          <div\r\n            style={{\r\n              marginBottom: '16px',\r\n              fontSize: '14px',\r\n              fontWeight: 600,\r\n              color: 'var(--theme-elevation-800)',\r\n            }}\r\n          >\r\n            🎨 Professional Color Picker\r\n          </div>\r\n\r\n          {Object.entries(colorPresets).map(([groupName, colors]) => (\r\n            <div key={groupName} style={{ marginBottom: '16px' }}>\r\n              <div\r\n                style={{\r\n                  marginBottom: '8px',\r\n                  fontSize: '12px',\r\n                  fontWeight: 500,\r\n                  color: 'var(--theme-elevation-600)',\r\n                  textTransform: 'uppercase',\r\n                  letterSpacing: '0.05em',\r\n                }}\r\n              >\r\n                {groupName}\r\n              </div>\r\n              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: '6px' }}>\r\n                {colors.map((color) => (\r\n                  <button\r\n                    key={color}\r\n                    type=\"button\"\r\n                    onClick={() => handleColorChange(color)}\r\n                    style={{\r\n                      width: '36px',\r\n                      height: '36px',\r\n                      borderRadius: '6px',\r\n                      border:\r\n                        value === color\r\n                          ? '3px solid var(--theme-primary-500)'\r\n                          : '1px solid var(--theme-elevation-150)',\r\n                      backgroundColor: color,\r\n                      cursor: 'pointer',\r\n                      transition: 'all 0.2s ease',\r\n                      position: 'relative',\r\n                      overflow: 'hidden',\r\n                      boxShadow:\r\n                        value === color\r\n                          ? '0 0 0 2px var(--theme-primary-200)'\r\n                          : '0 1px 3px rgba(0, 0, 0, 0.1)',\r\n                    }}\r\n                    title={`${color} - Click to select`}\r\n                    onMouseEnter={(event) => {\r\n                      event.currentTarget.style.transform = 'scale(1.1)'\r\n                    }}\r\n                    onMouseLeave={(event) => {\r\n                      event.currentTarget.style.transform = 'scale(1)'\r\n                    }}\r\n                  >\r\n                    {color === '#ffffff' && (\r\n                      <div\r\n                        style={{\r\n                          position: 'absolute',\r\n                          inset: 0,\r\n                          border: '1px solid var(--theme-elevation-150)',\r\n                          borderRadius: 'inherit',\r\n                        }}\r\n                      />\r\n                    )}\r\n                  </button>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          ))}\r\n\r\n          <div\r\n            style={{\r\n              marginTop: '16px',\r\n              paddingTop: '16px',\r\n              borderTop: '1px solid var(--theme-elevation-100)',\r\n            }}\r\n          >\r\n            <div\r\n              style={{\r\n                marginBottom: '8px',\r\n                fontSize: '12px',\r\n                fontWeight: 500,\r\n                color: 'var(--theme-elevation-600)',\r\n              }}\r\n            >\r\n              CUSTOM COLOR\r\n            </div>\r\n            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\r\n              <input\r\n                type=\"color\"\r\n                value={value?.startsWith('#') ? value : '#3b82f6'}\r\n                onChange={handleInputChange}\r\n                style={{\r\n                  width: '36px',\r\n                  height: '36px',\r\n                  border: 'none',\r\n                  borderRadius: '6px',\r\n                  cursor: 'pointer',\r\n                }}\r\n              />\r\n              <div style={{ fontSize: '11px', color: '#9ca3af', lineHeight: 1.3 }}>\r\n                <div>\r\n                  <strong>Formats:</strong>\r\n                </div>\r\n                <div>Hex, RGB, HSL, CSS vars</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":["useField","useCallback","useEffect","useRef","useState","colorPresets","resolveLocalizedValue","value","localized","fallback","en","cs","ColorPickerField","props","field","path","setValue","isPickerOpen","setIsPickerOpen","pickerRef","fieldLabel","label","fieldDescription","admin","description","placeholder","handleColorChange","color","handleInputChange","event","target","togglePicker","previous","handleClickOutside","current","contains","document","addEventListener","removeEventListener","div","className","style","position","htmlFor","display","marginBottom","fontSize","fontWeight","required","span","marginLeft","lineHeight","alignItems","gap","button","type","onClick","width","height","borderRadius","border","backgroundColor","cursor","justifyContent","title","input","id","onChange","flex","padding","fontFamily","startsWith","ref","top","left","right","zIndex","marginTop","boxShadow","maxHeight","overflowY","Object","entries","map","groupName","colors","textTransform","letterSpacing","gridTemplateColumns","transition","overflow","onMouseEnter","currentTarget","transform","onMouseLeave","inset","paddingTop","borderTop","strong"],"mappings":"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"}

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

@@ -1,138 +1,138 @@
-.theme-color-picker-field {
-  margin-bottom: 1rem;
-}
-
-.theme-color-picker-field .field-header {
-  margin-bottom: 0.5rem;
-}
-
-.theme-color-picker-field .field-label {
-  display: block;
-  font-weight: 500;
-  font-size: 0.875rem;
-  color: var(--theme-text);
-  margin-bottom: 0.25rem;
-}
-
-.theme-color-picker-field .field-description {
-  font-size: 0.75rem;
-  color: var(--theme-elevation-400);
-  margin-top: 0.25rem;
-}
-
-.theme-color-picker-field .color-picker-container {
-  display: flex;
-  gap: 0.75rem;
-  align-items: center;
-}
-
-.theme-color-picker-field .color-input-wrapper {
-  display: flex;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.theme-color-picker-field .color-input {
-  width: 60px;
-  height: 38px;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  cursor: pointer;
-  padding: 2px;
-}
-
-.theme-color-picker-field .color-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .color-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-}
-
-.theme-color-picker-field .text-input {
-  flex: 1;
-  height: 38px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: 4px;
-  font-family: monospace;
-  font-size: 0.875rem;
-  background: var(--theme-elevation-0);
-  color: var(--theme-text);
-}
-
-.theme-color-picker-field .text-input:hover {
-  border-color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:focus {
-  outline: 2px solid var(--theme-elevation-500);
-  outline-offset: 1px;
-  border-color: var(--theme-elevation-500);
-}
-
-.theme-color-picker-field .text-input::placeholder {
-  color: var(--theme-elevation-400);
-}
-
-.theme-color-picker-field .text-input:invalid {
-  border-color: #ef4444;
-}
-
-.theme-color-picker-field .color-preview {
-  width: 120px;
-  height: 38px;
-  border-radius: 4px;
-  border: 1px solid var(--theme-elevation-200);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.theme-color-picker-field .color-preview .preview-label {
-  font-size: 0.75rem;
-  font-family: monospace;
-  padding: 0.25rem 0.5rem;
-  background: rgba(255, 255, 255, 0.9);
-  border-radius: 2px;
-  backdrop-filter: blur(4px);
-  color: #000;
-  font-weight: 500;
-}
-
-.theme-color-picker-field .mini-preview {
-  margin-top: 1rem;
-  padding: 1rem;
-  border-radius: 6px;
-  border: 1px solid;
-}
-
-.theme-color-picker-field .mini-preview .preview-card {
-  padding: 1rem;
-  border-radius: 4px;
-  border: 1px solid;
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.theme-color-picker-field .mini-preview .preview-button {
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: opacity 0.2s;
-}
-
-.theme-color-picker-field .mini-preview .preview-button:hover {
-  opacity: 0.9;
-}
-
-.theme-color-picker-field .mini-preview .preview-button.secondary {
-  border: 1px solid currentColor;
-}
+.theme-color-picker-field {
+  margin-bottom: 1rem;
+}
+
+.theme-color-picker-field .field-header {
+  margin-bottom: 0.5rem;
+}
+
+.theme-color-picker-field .field-label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--theme-text);
+  margin-bottom: 0.25rem;
+}
+
+.theme-color-picker-field .field-description {
+  font-size: 0.75rem;
+  color: var(--theme-elevation-400);
+  margin-top: 0.25rem;
+}
+
+.theme-color-picker-field .color-picker-container {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.theme-color-picker-field .color-input-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+.theme-color-picker-field .color-input {
+  width: 60px;
+  height: 38px;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.theme-color-picker-field .color-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .color-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+}
+
+.theme-color-picker-field .text-input {
+  flex: 1;
+  height: 38px;
+  padding: 0 0.75rem;
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 0.875rem;
+  background: var(--theme-elevation-0);
+  color: var(--theme-text);
+}
+
+.theme-color-picker-field .text-input:hover {
+  border-color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:focus {
+  outline: 2px solid var(--theme-elevation-500);
+  outline-offset: 1px;
+  border-color: var(--theme-elevation-500);
+}
+
+.theme-color-picker-field .text-input::placeholder {
+  color: var(--theme-elevation-400);
+}
+
+.theme-color-picker-field .text-input:invalid {
+  border-color: #ef4444;
+}
+
+.theme-color-picker-field .color-preview {
+  width: 120px;
+  height: 38px;
+  border-radius: 4px;
+  border: 1px solid var(--theme-elevation-200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-color-picker-field .color-preview .preview-label {
+  font-size: 0.75rem;
+  font-family: monospace;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 2px;
+  backdrop-filter: blur(4px);
+  color: #000;
+  font-weight: 500;
+}
+
+.theme-color-picker-field .mini-preview {
+  margin-top: 1rem;
+  padding: 1rem;
+  border-radius: 6px;
+  border: 1px solid;
+}
+
+.theme-color-picker-field .mini-preview .preview-card {
+  padding: 1rem;
+  border-radius: 4px;
+  border: 1px solid;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.theme-color-picker-field .mini-preview .preview-button {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.theme-color-picker-field .mini-preview .preview-button:hover {
+  opacity: 0.9;
+}
+
+.theme-color-picker-field .mini-preview .preview-button.secondary {
+  border: 1px solid currentColor;
+}