@kilivi/payloadcms-theme-management 0.3.1 → 0.3.2

package/dist/fields/ExtendedThemeAutoPopulateField.js

@@ -1,176 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useField, useForm } from '@payloadcms/ui';
-import { useCallback, useEffect, useRef } from 'react';
-import { allExtendedThemePresets } from '../extended-presets.js';
-/**
- * Extended Theme Field with Auto-Population
- *
- * This component:
- * 1. Shows color swatches for each theme option
- * 2. Auto-populates ALL color fields when a theme is selected
- * 3. Fills in ALL light mode and dark mode colors with preset defaults
- */ const ExtendedThemeAutoPopulateField = ({ field, path })=>{
-    const { value, setValue } = useField({
-        path
-    });
-    const { dispatchFields } = useForm();
-    const hasInitializedRef = useRef(false);
-    const options = field.options || [];
-    const selectedOption = options.find((opt)=>opt.value === value);
-    // Auto-populate colors when theme is selected
-    const applyThemePreset = useCallback((presetKey)=>{
-        const preset = allExtendedThemePresets[presetKey];
-        if (!preset) return;
-        // Apply all light mode colors
-        Object.entries(preset.styles.light).forEach(([key, colorValue])=>{
-            dispatchFields({
-                type: 'UPDATE',
-                path: `themeConfiguration.extendedLightMode.${key}`,
-                value: colorValue
-            });
-        });
-        // Apply all dark mode colors
-        Object.entries(preset.styles.dark).forEach(([key, colorValue])=>{
-            dispatchFields({
-                type: 'UPDATE',
-                path: `themeConfiguration.extendedDarkMode.${key}`,
-                value: colorValue
-            });
-        });
-    }, [
-        dispatchFields
-    ]);
-    const handleChange = useCallback((newValue)=>{
-        setValue(newValue);
-        if (newValue) {
-            applyThemePreset(newValue);
-        }
-    }, [
-        setValue,
-        applyThemePreset
-    ]);
-    // Auto-populate on initial load if value exists
-    useEffect(()=>{
-        if (!hasInitializedRef.current && value) {
-            applyThemePreset(value);
-            hasInitializedRef.current = true;
-        }
-    }, [
-        value,
-        applyThemePreset
-    ]);
-    // Get color swatches for a preset
-    const getPresetColors = (presetValue)=>{
-        const preset = allExtendedThemePresets[presetValue];
-        if (!preset) return [];
-        const colors = [
-            preset.styles.light.primary,
-            preset.styles.light.secondary,
-            preset.styles.light.accent,
-            preset.styles.light.background,
-            preset.styles.light.foreground
-        ].filter(Boolean);
-        return colors.slice(0, 5);
-    };
-    const label = typeof field.label === 'string' ? field.label : field.label?.en || field.label?.cs || 'Theme Preset';
-    const description = typeof field.admin?.description === 'string' ? field.admin.description : field.admin?.description?.en || field.admin?.description?.cs;
-    return /*#__PURE__*/ _jsxs("div", {
-        style: {
-            marginBottom: '16px'
-        },
-        children: [
-            /*#__PURE__*/ _jsx("label", {
-                style: {
-                    display: 'block',
-                    marginBottom: '6px',
-                    fontSize: '13px',
-                    fontWeight: 600,
-                    color: 'var(--theme-elevation-800)'
-                },
-                children: label
-            }),
-            description && /*#__PURE__*/ _jsx("div", {
-                style: {
-                    fontSize: '12px',
-                    color: 'var(--theme-elevation-500)',
-                    marginBottom: '8px'
-                },
-                children: description
-            }),
-            /*#__PURE__*/ _jsxs("select", {
-                value: value || '',
-                onChange: (e)=>handleChange(e.target.value),
-                style: {
-                    width: '100%',
-                    padding: '10px 12px',
-                    borderRadius: '6px',
-                    border: '1px solid var(--theme-elevation-200)',
-                    backgroundColor: 'var(--theme-input-bg)',
-                    color: 'var(--theme-elevation-800)',
-                    fontSize: '14px',
-                    cursor: 'pointer'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx("option", {
-                        value: "",
-                        children: "Select a theme..."
-                    }),
-                    options.map((option)=>/*#__PURE__*/ _jsx("option", {
-                            value: option.value,
-                            children: option.label
-                        }, option.value))
-                ]
-            }),
-            selectedOption && /*#__PURE__*/ _jsxs("div", {
-                style: {
-                    marginTop: '12px',
-                    padding: '12px',
-                    borderRadius: '8px',
-                    backgroundColor: 'var(--theme-elevation-50)',
-                    border: '1px solid var(--theme-elevation-200)'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        style: {
-                            fontSize: '12px',
-                            fontWeight: 600,
-                            marginBottom: '8px',
-                            color: 'var(--theme-elevation-700)'
-                        },
-                        children: selectedOption.label
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        style: {
-                            display: 'flex',
-                            gap: '8px',
-                            alignItems: 'center'
-                        },
-                        children: getPresetColors(selectedOption.value).map((color, index)=>/*#__PURE__*/ _jsx("div", {
-                                style: {
-                                    width: '32px',
-                                    height: '32px',
-                                    borderRadius: '6px',
-                                    backgroundColor: color,
-                                    border: '1px solid rgba(0, 0, 0, 0.1)',
-                                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)'
-                                },
-                                title: color
-                            }, `${selectedOption.value}-${index}`))
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        style: {
-                            marginTop: '8px',
-                            fontSize: '11px',
-                            color: 'var(--theme-elevation-500)'
-                        },
-                        children: "✅ All colors auto-populated from this theme"
-                    })
-                ]
-            })
-        ]
-    });
-};
-export default ExtendedThemeAutoPopulateField;
-
-//# sourceMappingURL=ExtendedThemeAutoPopulateField.js.map

package/dist/fields/ExtendedThemeAutoPopulateField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/fields/ExtendedThemeAutoPopulateField.tsx"],"sourcesContent":["'use client'\n\nimport { useField, useForm } from '@payloadcms/ui'\nimport type { SelectFieldClientComponent } from 'payload'\nimport { useCallback, useEffect, useRef } from 'react'\nimport { allExtendedThemePresets } from '../extended-presets.js'\n\n/**\n * Extended Theme Field with Auto-Population\n *\n * This component:\n * 1. Shows color swatches for each theme option\n * 2. Auto-populates ALL color fields when a theme is selected\n * 3. Fills in ALL light mode and dark mode colors with preset defaults\n */\nconst ExtendedThemeAutoPopulateField: SelectFieldClientComponent = ({ field, path }) => {\n  const { value, setValue } = useField<string>({ path })\n  const { dispatchFields } = useForm()\n  const hasInitializedRef = useRef(false)\n\n  const options = (field.options as Array<{ label: string; value: string }>) || []\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  // Auto-populate colors when theme is selected\n  const applyThemePreset = useCallback(\n    (presetKey: string) => {\n      const preset = allExtendedThemePresets[presetKey as keyof typeof allExtendedThemePresets]\n      if (!preset) return\n\n      // Apply all light mode colors\n      Object.entries(preset.styles.light).forEach(([key, colorValue]) => {\n        dispatchFields({\n          type: 'UPDATE',\n          path: `themeConfiguration.extendedLightMode.${key}`,\n          value: colorValue,\n        })\n      })\n\n      // Apply all dark mode colors\n      Object.entries(preset.styles.dark).forEach(([key, colorValue]) => {\n        dispatchFields({\n          type: 'UPDATE',\n          path: `themeConfiguration.extendedDarkMode.${key}`,\n          value: colorValue,\n        })\n      })\n    },\n    [dispatchFields],\n  )\n\n  const handleChange = useCallback(\n    (newValue: string) => {\n      setValue(newValue)\n      if (newValue) {\n        applyThemePreset(newValue)\n      }\n    },\n    [setValue, applyThemePreset],\n  )\n\n  // Auto-populate on initial load if value exists\n  useEffect(() => {\n    if (!hasInitializedRef.current && value) {\n      applyThemePreset(value)\n      hasInitializedRef.current = true\n    }\n  }, [value, applyThemePreset])\n\n  // Get color swatches for a preset\n  const getPresetColors = (presetValue: string) => {\n    const preset = allExtendedThemePresets[presetValue as keyof typeof allExtendedThemePresets]\n    if (!preset) return []\n\n    const colors = [\n      preset.styles.light.primary,\n      preset.styles.light.secondary,\n      preset.styles.light.accent,\n      preset.styles.light.background,\n      preset.styles.light.foreground,\n    ].filter(Boolean)\n\n    return colors.slice(0, 5)\n  }\n\n  const label =\n    typeof field.label === 'string'\n      ? field.label\n      : field.label?.en || field.label?.cs || 'Theme Preset'\n  const description =\n    typeof field.admin?.description === 'string'\n      ? field.admin.description\n      : field.admin?.description?.en || field.admin?.description?.cs\n\n  return (\n    <div style={{ marginBottom: '16px' }}>\n      <label\n        style={{\n          display: 'block',\n          marginBottom: '6px',\n          fontSize: '13px',\n          fontWeight: 600,\n          color: 'var(--theme-elevation-800)',\n        }}\n      >\n        {label}\n      </label>\n\n      {description && (\n        <div\n          style={{\n            fontSize: '12px',\n            color: 'var(--theme-elevation-500)',\n            marginBottom: '8px',\n          }}\n        >\n          {description}\n        </div>\n      )}\n\n      <select\n        value={value || ''}\n        onChange={(e) => handleChange(e.target.value)}\n        style={{\n          width: '100%',\n          padding: '10px 12px',\n          borderRadius: '6px',\n          border: '1px solid var(--theme-elevation-200)',\n          backgroundColor: 'var(--theme-input-bg)',\n          color: 'var(--theme-elevation-800)',\n          fontSize: '14px',\n          cursor: 'pointer',\n        }}\n      >\n        <option value=\"\">Select a theme...</option>\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n\n      {/* Show color swatches for selected theme */}\n      {selectedOption && (\n        <div\n          style={{\n            marginTop: '12px',\n            padding: '12px',\n            borderRadius: '8px',\n            backgroundColor: 'var(--theme-elevation-50)',\n            border: '1px solid var(--theme-elevation-200)',\n          }}\n        >\n          <div\n            style={{\n              fontSize: '12px',\n              fontWeight: 600,\n              marginBottom: '8px',\n              color: 'var(--theme-elevation-700)',\n            }}\n          >\n            {selectedOption.label}\n          </div>\n          <div\n            style={{\n              display: 'flex',\n              gap: '8px',\n              alignItems: 'center',\n            }}\n          >\n            {getPresetColors(selectedOption.value).map((color, index) => (\n              <div\n                key={`${selectedOption.value}-${index}`}\n                style={{\n                  width: '32px',\n                  height: '32px',\n                  borderRadius: '6px',\n                  backgroundColor: color,\n                  border: '1px solid rgba(0, 0, 0, 0.1)',\n                  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.05)',\n                }}\n                title={color}\n              />\n            ))}\n          </div>\n          <div\n            style={{\n              marginTop: '8px',\n              fontSize: '11px',\n              color: 'var(--theme-elevation-500)',\n            }}\n          >\n            ✅ All colors auto-populated from this theme\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default ExtendedThemeAutoPopulateField\n"],"names":["useField","useForm","useCallback","useEffect","useRef","allExtendedThemePresets","ExtendedThemeAutoPopulateField","field","path","value","setValue","dispatchFields","hasInitializedRef","options","selectedOption","find","opt","applyThemePreset","presetKey","preset","Object","entries","styles","light","forEach","key","colorValue","type","dark","handleChange","newValue","current","getPresetColors","presetValue","colors","primary","secondary","accent","background","foreground","filter","Boolean","slice","label","en","cs","description","admin","div","style","marginBottom","display","fontSize","fontWeight","color","select","onChange","e","target","width","padding","borderRadius","border","backgroundColor","cursor","option","map","marginTop","gap","alignItems","index","height","boxShadow","title"],"mappings":"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"}

package/dist/fields/RadiusField.d.ts

@@ -1,3 +0,0 @@
-import type { SelectFieldClientProps } from 'payload';
-export default function RadiusField({ field, ...props }: SelectFieldClientProps): import("react").JSX.Element;
-//# sourceMappingURL=RadiusField.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"RadiusField.d.ts","sourceRoot":"","sources":["../../src/fields/RadiusField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAYrD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BA2J9E"}

package/dist/fields/RadiusField.js

@@ -1,174 +0,0 @@
-'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

@@ -1 +0,0 @@
-{"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":"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"}

package/dist/fields/ThemeLivePreview.css

@@ -1,190 +0,0 @@
-/* Theme Live Preview Styles */
-.theme-live-preview-container {
-  position: sticky;
-  top: 0;
-  height: 100vh;
-  overflow-y: auto;
-  background: var(--theme-elevation-50);
-  border-left: 1px solid var(--theme-elevation-200);
-}
-
-.theme-live-preview-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 2rem;
-  color: var(--theme-elevation-400);
-  font-size: 0.875rem;
-  text-align: center;
-}
-
-.preview-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: var(--theme-elevation-0);
-  border-bottom: 1px solid var(--theme-elevation-200);
-  padding: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.preview-header h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--theme-text);
-}
-
-.mode-toggle {
-  display: flex;
-  gap: 0.5rem;
-  background: var(--theme-elevation-100);
-  padding: 0.25rem;
-  border-radius: 8px;
-}
-
-.mode-toggle button {
-  padding: 0.5rem 1rem;
-  border: none;
-  background: transparent;
-  color: var(--theme-text);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: all 0.2s;
-}
-
-.mode-toggle button.active {
-  background: white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-}
-
-.preview-content {
-  padding: 2rem;
-  min-height: calc(100vh - 80px);
-  transition: all 0.3s;
-}
-
-.preview-section {
-  margin-bottom: 2rem;
-}
-
-.preview-section h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  margin: 0 0 0.5rem 0;
-}
-
-.preview-section p {
-  font-size: 1rem;
-  margin: 0;
-}
-
-.preview-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 1.5rem;
-  margin-bottom: 2rem;
-}
-
-.preview-card {
-  padding: 1.5rem;
-  border-radius: 12px;
-  border: 2px solid;
-  transition: all 0.2s;
-}
-
-.preview-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.preview-card h3 {
-  margin: 0 0 0.5rem 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.preview-card p {
-  margin: 0 0 1rem 0;
-  font-size: 0.875rem;
-}
-
-.preview-btn-primary,
-.preview-btn-secondary,
-.preview-btn-destructive {
-  padding: 0.625rem 1.25rem;
-  border: none;
-  border-radius: 8px;
-  font-weight: 600;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.preview-btn-primary:hover,
-.preview-btn-secondary:hover,
-.preview-btn-destructive:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-
-.preview-ui-elements {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 2rem;
-}
-
-.preview-input {
-  padding: 0.625rem 1rem;
-  border: 2px solid;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  min-width: 200px;
-  transition: all 0.2s;
-}
-
-.preview-input:focus {
-  outline: none;
-  border-color: var(--preview-ring, #3b82f6);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.preview-badge {
-  padding: 0.375rem 0.875rem;
-  border-radius: 6px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.preview-muted {
-  padding: 1.5rem;
-  border-radius: 8px;
-  margin-bottom: 2rem;
-}
-
-.preview-muted p {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-/* Dark mode adjustments */
-.theme-live-preview-container[data-mode="dark"] .preview-content {
-  background: #1a1a1a;
-}
-
-.theme-live-preview-container[data-mode="dark"] .preview-card {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.theme-live-preview-container[data-mode="dark"] .preview-card:hover {
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-}

package/dist/fields/ThemeLivePreview.d.ts

@@ -1,3 +0,0 @@
-export declare const ThemeLivePreview: () => import("react").JSX.Element;
-export default ThemeLivePreview;
-//# sourceMappingURL=ThemeLivePreview.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeLivePreview.d.ts","sourceRoot":"","sources":["../../src/fields/ThemeLivePreview.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,gBAAgB,mCA6J5B,CAAA;AAED,eAAe,gBAAgB,CAAA"}