@tpitre/story-ui 3.3.0 → 3.4.0

package/dist/playground/components/PropertyEditors/PropertyEditors.module.css

@@ -0,0 +1,432 @@
+/* Shared styles for property editors */
+
+.propertyEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+  font-family: inherit;
+}
+
+.label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #374151;
+  font-family: inherit;
+}
+
+.description {
+  font-size: 11px;
+  color: #6b7280;
+  margin-top: 2px;
+}
+
+/* Text Input */
+.input {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: inherit;
+  color: #374151;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.input:hover {
+  border-color: #d1d5db;
+}
+
+.input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.input:disabled {
+  background: #f3f4f6;
+  color: #9ca3af;
+  cursor: not-allowed;
+}
+
+/* Textarea */
+.textarea {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: inherit;
+  color: #374151;
+  outline: none;
+  resize: vertical;
+  min-height: 60px;
+  transition: all 0.2s;
+}
+
+.textarea:hover {
+  border-color: #d1d5db;
+}
+
+.textarea:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Select */
+.select {
+  width: 100%;
+  padding: 6px 10px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 13px;
+  font-family: inherit;
+  color: #374151;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s;
+}
+
+.select:hover {
+  border-color: #d1d5db;
+}
+
+.select:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Number Input */
+.numberInput {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.numberInput .input {
+  flex: 1;
+  text-align: center;
+}
+
+.stepButton {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 16px;
+  color: #6b7280;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.stepButton:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+  color: #374151;
+}
+
+.stepButton:active {
+  background: #e5e7eb;
+}
+
+.unit {
+  padding: 0 8px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+/* Boolean Toggle */
+.booleanEditor {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.booleanLabel {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.toggle {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: #e5e7eb;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  padding: 2px;
+}
+
+.toggle:hover {
+  background: #d1d5db;
+}
+
+.toggle.toggleOn {
+  background: #3b82f6;
+}
+
+.toggle.toggleOn:hover {
+  background: #2563eb;
+}
+
+.toggleThumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 10px;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toggleOn .toggleThumb {
+  transform: translateX(20px);
+}
+
+/* Color Editor */
+.colorEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.colorInputWrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.colorSwatch {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid #e5e7eb;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.colorSwatch:hover {
+  border-color: #d1d5db;
+  transform: scale(1.05);
+}
+
+.colorPicker {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.colorPresets {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  padding: 8px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.colorPreset {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.colorPreset:hover {
+  transform: scale(1.1);
+  border-color: #d1d5db;
+}
+
+/* Token Editor */
+.tokenEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.tokenGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
+  gap: 6px;
+}
+
+.tokenButton {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 6px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 11px;
+  color: #374151;
+}
+
+.tokenButton:hover {
+  background: #f9fafb;
+  border-color: #d1d5db;
+}
+
+.tokenButton.tokenSelected {
+  background: #eff6ff;
+  border-color: #3b82f6;
+  color: #1d4ed8;
+}
+
+.tokenLabel {
+  font-weight: 500;
+  text-align: center;
+  line-height: 1.2;
+}
+
+.tokenDescription {
+  font-size: 10px;
+  color: #6b7280;
+  text-align: center;
+}
+
+.tokenSelected .tokenDescription {
+  color: #1d4ed8;
+}
+
+.tokenPreview {
+  display: block;
+  background: #3b82f6;
+  border-radius: 1px;
+}
+
+.customTokenInput {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.selectedToken {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  background: #f3f4f6;
+  border-radius: 6px;
+  font-size: 12px;
+}
+
+.selectedLabel {
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.selectedValue {
+  color: #374151;
+}
+
+/* MUI Component Overrides */
+.propertyEditor .MuiFormControl-root {
+  margin-bottom: 0;
+}
+
+.propertyEditor .MuiInputLabel-root {
+  font-size: 12px;
+  font-family: inherit;
+}
+
+.propertyEditor .MuiInputBase-input {
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.propertyEditor .MuiFormControlLabel-label {
+  font-size: 13px;
+  font-family: inherit;
+}
+
+.propertyEditor .MuiSwitch-root {
+  margin-left: 0;
+}
+
+.propertyEditor .MuiIconButton-root {
+  padding: 4px;
+}
+
+/* Enhanced Boolean Editor */
+.booleanEditor .MuiFormGroup-root {
+  margin: 0;
+}
+
+.booleanEditor .MuiFormControlLabel-root {
+  margin: 0;
+  gap: 8px;
+}
+
+/* Enhanced Select Editor */
+.propertyEditor .MuiSelect-select {
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.propertyEditor .MuiMenuItem-root {
+  font-size: 13px;
+  min-height: 32px;
+}
+
+/* Enhanced Number Editor */
+.propertyEditor .MuiTextField-root {
+  margin: 0;
+}
+
+/* Enhanced Color Editor */
+.colorEditor .MuiPopover-paper {
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+/* Enhanced Icon Editor */
+.iconEditor .MuiGrid-item {
+  padding: 2px;
+}
+
+.iconEditor .MuiChip-root {
+  font-size: 12px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .tokenGrid {
+    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+  }
+  
+  .tokenButton {
+    padding: 6px 4px;
+    font-size: 10px;
+  }
+  
+  .iconEditor .MuiPopover-paper {
+    width: 90vw !important;
+    max-width: 350px;
+  }
+}

package/dist/playground/components/PropertyEditors/SelectEditor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * SelectEditor - Dropdown selector for enum properties using MUI Select
+ */
+import React from 'react';
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface SelectEditorProps {
+    value?: string | number;
+    onChange: (value: string | number) => void;
+    options: SelectOption[];
+    label?: string;
+    placeholder?: string;
+}
+export declare const SelectEditor: React.FC<SelectEditorProps>;
+//# sourceMappingURL=SelectEditor.d.ts.map

package/dist/playground/components/PropertyEditors/SelectEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEditor.d.ts","sourceRoot":"","sources":["../../../../playground/components/PropertyEditors/SelectEditor.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC3C,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4CpD,CAAC"}

package/dist/playground/components/PropertyEditors/SelectEditor.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SelectEditor - Dropdown selector for enum properties using MUI Select
+ */
+import { useCallback } from 'react';
+import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';
+import styles from './PropertyEditors.module.css';
+export const SelectEditor = ({ value, onChange, options, label, placeholder = 'Select...' }) => {
+    const handleChange = useCallback((e) => {
+        const newValue = e.target.value;
+        // Try to parse as number if it looks like one
+        const numValue = Number(newValue);
+        onChange(!isNaN(numValue) && newValue !== '' ? numValue : newValue);
+    }, [onChange]);
+    return (_jsx("div", { className: styles.propertyEditor, children: _jsxs(FormControl, { fullWidth: true, size: "small", children: [label && _jsx(InputLabel, { sx: { fontSize: '12px' }, children: label }), _jsxs(Select, { value: value ?? '', onChange: handleChange, displayEmpty: !label, sx: { fontSize: '13px' }, children: [!label && (_jsx(MenuItem, { value: "", disabled: true, children: _jsx("em", { children: placeholder }) })), options.map((option) => (_jsxs(MenuItem, { value: option.value, disabled: option.disabled, sx: { fontSize: '13px' }, children: [option.icon && `${option.icon} `, option.label] }, option.value)))] })] }) }));
+};
+//# sourceMappingURL=SelectEditor.js.map

package/dist/playground/components/PropertyEditors/SelectEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectEditor.js","sourceRoot":"","sources":["../../../../playground/components/PropertyEditors/SelectEditor.tsx"],"names":[],"mappings":";AAAA;;GAEG;AAEH,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAqB,MAAM,eAAe,CAAC;AAC7F,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAiBlD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EACxD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,GAAG,WAAW,EAC1B,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAqC,EAAE,EAAE;QACzE,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,8CAA8C;QAC9C,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;QAClC,QAAQ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACtE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,cAAc,YACnC,MAAC,WAAW,IAAC,SAAS,QAAC,IAAI,EAAC,OAAO,aAChC,KAAK,IAAI,KAAC,UAAU,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAG,KAAK,GAAc,EACpE,MAAC,MAAM,IACL,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,CAAC,KAAK,EACpB,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,aAEvB,CAAC,KAAK,IAAI,CACT,KAAC,QAAQ,IAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,kBACzB,uBAAK,WAAW,GAAM,GACb,CACZ,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,MAAC,QAAQ,IAEP,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,EAAE,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,aAEvB,MAAM,CAAC,IAAI,IAAI,GAAG,MAAM,CAAC,IAAI,GAAG,EAChC,MAAM,CAAC,KAAK,KANR,MAAM,CAAC,KAAK,CAOR,CACZ,CAAC,IACK,IACG,GACV,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/playground/components/PropertyEditors/SpacingEditor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * SpacingEditor - Visual editor for margin and padding with linked/unlinked modes
+ */
+import React from 'react';
+export interface SpacingValue {
+    top: string | number;
+    right: string | number;
+    bottom: string | number;
+    left: string | number;
+}
+export interface SpacingEditorProps {
+    value?: SpacingValue | string | number;
+    onChange: (value: SpacingValue | string) => void;
+    property: 'margin' | 'padding';
+    units?: string[];
+    label?: string;
+}
+export declare const SpacingEditor: React.FC<SpacingEditorProps>;
+//# sourceMappingURL=SpacingEditor.d.ts.map

package/dist/playground/components/PropertyEditors/SpacingEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingEditor.d.ts","sourceRoot":"","sources":["../../../../playground/components/PropertyEditors/SpacingEditor.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuDD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+OtD,CAAC"}

package/dist/playground/components/PropertyEditors/SpacingEditor.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SpacingEditor - Visual editor for margin and padding with linked/unlinked modes
+ */
+import { useState, useCallback, useEffect } from 'react';
+import styles from './SpacingEditor.module.css';
+const DEFAULT_UNITS = ['px', 'rem', 'em', '%', 'auto'];
+const parseSpacingValue = (value) => {
+    if (!value) {
+        return { top: 0, right: 0, bottom: 0, left: 0 };
+    }
+    if (typeof value === 'object') {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return { top: value, right: value, bottom: value, left: value };
+    }
+    // Parse string values like "10px", "10px 20px", "10px 20px 30px", "10px 20px 30px 40px"
+    const parts = value.toString().trim().split(/\s+/);
+    switch (parts.length) {
+        case 1:
+            const val = parts[0];
+            return { top: val, right: val, bottom: val, left: val };
+        case 2:
+            return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };
+        case 3:
+            return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[1] };
+        case 4:
+            return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };
+        default:
+            return { top: 0, right: 0, bottom: 0, left: 0 };
+    }
+};
+const extractUnit = (value) => {
+    if (typeof value === 'number') {
+        return { value, unit: 'px' };
+    }
+    if (value === 'auto') {
+        return { value: 0, unit: 'auto' };
+    }
+    const match = value.toString().match(/^(-?\d*\.?\d+)(.*)$/);
+    if (match) {
+        return {
+            value: parseFloat(match[1]) || 0,
+            unit: match[2] || 'px'
+        };
+    }
+    return { value: 0, unit: 'px' };
+};
+export const SpacingEditor = ({ value, onChange, property, units = DEFAULT_UNITS, label }) => {
+    const parsedValue = parseSpacingValue(value);
+    const [linked, setLinked] = useState(parsedValue.top === parsedValue.right &&
+        parsedValue.top === parsedValue.bottom &&
+        parsedValue.top === parsedValue.left);
+    const [currentUnit, setCurrentUnit] = useState(() => {
+        const { unit } = extractUnit(parsedValue.top);
+        return unit;
+    });
+    const [localValues, setLocalValues] = useState(() => {
+        return {
+            top: extractUnit(parsedValue.top).value,
+            right: extractUnit(parsedValue.right).value,
+            bottom: extractUnit(parsedValue.bottom).value,
+            left: extractUnit(parsedValue.left).value
+        };
+    });
+    useEffect(() => {
+        const parsed = parseSpacingValue(value);
+        setLocalValues({
+            top: extractUnit(parsed.top).value,
+            right: extractUnit(parsed.right).value,
+            bottom: extractUnit(parsed.bottom).value,
+            left: extractUnit(parsed.left).value
+        });
+    }, [value]);
+    const formatValue = (val, unit) => {
+        if (unit === 'auto')
+            return 'auto';
+        if (val === 0 && unit !== '%')
+            return '0';
+        return `${val}${unit}`;
+    };
+    const handleValueChange = useCallback((side, newValue) => {
+        const numValue = parseFloat(newValue) || 0;
+        let updatedValues;
+        if (linked) {
+            updatedValues = {
+                top: numValue,
+                right: numValue,
+                bottom: numValue,
+                left: numValue
+            };
+        }
+        else {
+            updatedValues = {
+                ...localValues,
+                [side]: numValue
+            };
+        }
+        setLocalValues(updatedValues);
+        // Format the output
+        const formatted = {
+            top: formatValue(updatedValues.top, currentUnit),
+            right: formatValue(updatedValues.right, currentUnit),
+            bottom: formatValue(updatedValues.bottom, currentUnit),
+            left: formatValue(updatedValues.left, currentUnit)
+        };
+        // Optimize output string
+        if (formatted.top === formatted.right && formatted.top === formatted.bottom && formatted.top === formatted.left) {
+            onChange(formatted.top);
+        }
+        else if (formatted.top === formatted.bottom && formatted.left === formatted.right) {
+            onChange(`${formatted.top} ${formatted.right}`);
+        }
+        else if (formatted.left === formatted.right) {
+            onChange(`${formatted.top} ${formatted.right} ${formatted.bottom}`);
+        }
+        else {
+            onChange(`${formatted.top} ${formatted.right} ${formatted.bottom} ${formatted.left}`);
+        }
+    }, [linked, localValues, currentUnit, onChange]);
+    const handleUnitChange = useCallback((newUnit) => {
+        setCurrentUnit(newUnit);
+        const formatted = {
+            top: formatValue(localValues.top, newUnit),
+            right: formatValue(localValues.right, newUnit),
+            bottom: formatValue(localValues.bottom, newUnit),
+            left: formatValue(localValues.left, newUnit)
+        };
+        // Optimize output string
+        if (formatted.top === formatted.right && formatted.top === formatted.bottom && formatted.top === formatted.left) {
+            onChange(formatted.top);
+        }
+        else if (formatted.top === formatted.bottom && formatted.left === formatted.right) {
+            onChange(`${formatted.top} ${formatted.right}`);
+        }
+        else if (formatted.left === formatted.right) {
+            onChange(`${formatted.top} ${formatted.right} ${formatted.bottom}`);
+        }
+        else {
+            onChange(`${formatted.top} ${formatted.right} ${formatted.bottom} ${formatted.left}`);
+        }
+    }, [localValues, onChange]);
+    const toggleLinked = useCallback(() => {
+        const newLinked = !linked;
+        setLinked(newLinked);
+        if (newLinked) {
+            // Use top value for all when linking
+            const topValue = localValues.top;
+            const updatedValues = {
+                top: topValue,
+                right: topValue,
+                bottom: topValue,
+                left: topValue
+            };
+            setLocalValues(updatedValues);
+            onChange(formatValue(topValue, currentUnit));
+        }
+    }, [linked, localValues, currentUnit, onChange]);
+    return (_jsxs("div", { className: styles.spacingEditor, children: [label && (_jsxs("div", { className: styles.header, children: [_jsx("label", { className: styles.label, children: label }), _jsxs("div", { className: styles.controls, children: [_jsx("button", { className: `${styles.linkButton} ${linked ? styles.linked : ''}`, onClick: toggleLinked, title: linked ? 'Unlink values' : 'Link values', children: linked ? '🔗' : '🔗' }), _jsx("select", { className: styles.unitSelect, value: currentUnit, onChange: (e) => handleUnitChange(e.target.value), children: units.map(unit => (_jsx("option", { value: unit, children: unit }, unit))) })] })] })), _jsx("div", { className: styles.visualEditor, children: _jsxs("div", { className: styles.boxModel, children: [_jsx("input", { type: "number", className: `${styles.input} ${styles.inputTop}`, value: localValues.top, onChange: (e) => handleValueChange('top', e.target.value), placeholder: "0", disabled: currentUnit === 'auto' }), _jsx("input", { type: "number", className: `${styles.input} ${styles.inputRight}`, value: localValues.right, onChange: (e) => handleValueChange('right', e.target.value), placeholder: "0", disabled: currentUnit === 'auto' || linked }), _jsx("input", { type: "number", className: `${styles.input} ${styles.inputBottom}`, value: localValues.bottom, onChange: (e) => handleValueChange('bottom', e.target.value), placeholder: "0", disabled: currentUnit === 'auto' || linked }), _jsx("input", { type: "number", className: `${styles.input} ${styles.inputLeft}`, value: localValues.left, onChange: (e) => handleValueChange('left', e.target.value), placeholder: "0", disabled: currentUnit === 'auto' || linked }), _jsx("div", { className: styles.centerBox, children: _jsx("span", { className: styles.propertyName, children: property }) })] }) }), _jsxs("div", { className: styles.presets, children: [_jsx("button", { className: styles.preset, onClick: () => onChange('0'), title: "Reset to 0", children: "None" }), _jsx("button", { className: styles.preset, onClick: () => onChange('8px'), title: "Small (8px)", children: "S" }), _jsx("button", { className: styles.preset, onClick: () => onChange('16px'), title: "Medium (16px)", children: "M" }), _jsx("button", { className: styles.preset, onClick: () => onChange('24px'), title: "Large (24px)", children: "L" }), _jsx("button", { className: styles.preset, onClick: () => onChange('32px'), title: "Extra Large (32px)", children: "XL" })] })] }));
+};
+//# sourceMappingURL=SpacingEditor.js.map

package/dist/playground/components/PropertyEditors/SpacingEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpacingEditor.js","sourceRoot":"","sources":["../../../../playground/components/PropertyEditors/SpacingEditor.tsx"],"names":[],"mappings":"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"}