@dashadmin/dash-components 1.3.24 → 1.3.26

package/dist/components/JsonColorSelector/components/ColorEditDialog.js

@@ -1 +1,426 @@
-import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as n,Button as I,TextField as W,Typography as p,Drawer as U,InputAdornment as $,FormControl as N,InputLabel as O,Select as X,MenuItem as f,Tabs as Y,Tab as M,Avatar as _,IconButton as q}from"@mui/material";import J from"@mui/icons-material/Delete";import Q from"@mui/icons-material/Close";import{ChromePicker as Z}from"react-color";import{useState as y,useEffect as ee,useRef as te,useMemo as re}from"react";import{convertColor as ae,getContrastColor as P,rgbArrayToHex as F}from"../helpers/functions";const oe=({open:S,pair:d,onClose:g,onSave:A,onDelete:z,existingKeys:D,updateSingleDomColor:v,extractedColors:w=[]})=>{const[r,b]=y(null),[s,u]=y("hex"),[m,B]=y(""),[C,R]=y(0),T=te(0),E=re(()=>({default:{picker:{width:"100%",boxShadow:"none"}}}),[]);ee(()=>{if(d){b({...d});const e=d.value.toLowerCase().trim();e.startsWith("rgba(")?u("rgba"):e.startsWith("rgb(")?u("rgb"):e.startsWith("hsla(")?u("hsla"):e.startsWith("hsl(")?u("hsl"):e.startsWith("#")&&e.length===9?u("rgba"):u("hex")}B("")},[d]);const V=e=>{if(!r)return;const o=D.some(a=>a===e&&e!==d?.key);B(o?"Key already exists":""),b({...r,key:e})},ne=e=>{const o=e.toLowerCase().trim();if(o.startsWith("rgba(")){const a=o.match(/rgba?\(([^)]+)\)/);if(a){const l=a[1].split(",").map(G=>parseFloat(G.trim())),[c,h,x,k=1]=l;return{r:Math.round(c),g:Math.round(h),b:Math.round(x),a:k}}}else if(o.startsWith("rgb(")){const a=o.match(/rgb\(([^)]+)\)/);if(a){const l=a[1].split(",").map(k=>parseFloat(k.trim())),[c,h,x]=l;return{r:Math.round(c),g:Math.round(h),b:Math.round(x),a:1}}}else{if(o.startsWith("hsla("))return e;if(o.startsWith("hsl("))return e;if(o.startsWith("#")){const a=o.replace("#","");if(a.length===8){const l=parseInt(a.substr(0,2),16),c=parseInt(a.substr(2,2),16),h=parseInt(a.substr(4,2),16),x=parseInt(a.substr(6,2),16)/255;return{r:l,g:c,b:h,a:x}}else if(a.length===6){const l=parseInt(a.substr(0,2),16),c=parseInt(a.substr(2,2),16),h=parseInt(a.substr(4,2),16);return{r:l,g:c,b:h,a:1}}}}return e},K=e=>{if(!r)return;const o={hex:e.hex,rgb:{r:Math.round(e.rgb.r),g:Math.round(e.rgb.g),b:Math.round(e.rgb.b),a:e.rgb.a!==void 0?e.rgb.a:1},hsl:{h:Math.round(e.hsl.h||0),s:e.hsl.s||0,l:e.hsl.l||0,a:e.hsl.a!==void 0?e.hsl.a:e.rgb.a!==void 0?e.rgb.a:1}},a=ae(o,s);b({...r,value:a});const l=Date.now();l-T.current>=16&&(v(r.key,a),T.current=l)},L=e=>{if(!r)return;const o=F(e);b({...r,value:o}),v(r.key,o)},j=()=>{!r||m||!r.key.trim()||(A(r),g())},H=()=>{r&&(z(r.id),g())};return r?i(U,{anchor:"right",open:S,onClose:g,BackdropProps:{invisible:!0},PaperProps:{sx:{width:{xs:"100%",sm:460},maxWidth:"100vw",display:"flex",flexDirection:"column"}},children:[i(n,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:2,py:1.5,borderBottom:"1px solid",borderColor:"divider",flexShrink:0},children:[t(p,{variant:"h6",sx:{fontWeight:600},children:d?.key?`Edit: ${d.key}`:"Add New Color"}),t(q,{onClick:g,size:"small",children:t(Q,{})})]}),i(n,{sx:{flex:1,overflowY:"auto",px:2,py:2,display:"flex",flexDirection:"column",gap:3},children:[t(W,{fullWidth:!0,label:"Color Name",value:r.key,onChange:e=>V(e.target.value),error:!!m,helperText:m,placeholder:"e.g., primary-color--light, background-dark--dark",size:"small"}),i(N,{fullWidth:!0,size:"small",children:[t(O,{children:"Color Format"}),i(X,{value:s,label:"Color Format",onChange:e=>u(e.target.value),children:[t(f,{value:"hex",children:"HEX"}),t(f,{value:"rgb",children:"RGB"}),t(f,{value:"rgba",children:"RGBA (with alpha)"}),t(f,{value:"hsl",children:"HSL"}),t(f,{value:"hsla",children:"HSLA (with alpha)"})]})]}),i(n,{children:[t(p,{variant:"subtitle2",gutterBottom:!0,children:"Color Picker"}),i(n,{children:[i(Y,{value:C,onChange:(e,o)=>R(o),variant:"fullWidth",children:[t(M,{label:"Picker"}),t(M,{label:"Manual"})]}),C===0&&t(n,{sx:{mt:2,display:"flex",justifyContent:"center"},children:t(Z,{color:r.value,onChange:K,disableAlpha:!1,styles:E})}),C===1&&t(n,{sx:{mt:2},children:t(W,{fullWidth:!0,size:"small",label:`Color Value (${s.toUpperCase()})`,value:r.value,onChange:e=>{const o=e.target.value;b({...r,value:o}),v(r.key,o)},placeholder:s==="hex"?"#ff0000":s==="rgb"?"rgb(255, 0, 0)":s==="rgba"?"rgba(255, 0, 0, 0.5)":s==="hsl"?"hsl(0, 100%, 50%)":"hsla(0, 100%, 50%, 0.5)",helperText:s==="rgba"||s==="hsla"?"Alpha value should be between 0 and 1 (e.g., 0.1, 0.5, 1)":void 0,InputProps:{startAdornment:t($,{position:"start",children:t(n,{sx:{width:20,height:20,backgroundColor:r.value,border:"1px solid #ccc",borderRadius:1,backgroundImage:s==="rgba"||s==="hsla"?"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)":"none",backgroundSize:"4px 4px",backgroundPosition:"0 0, 0 2px, 2px -2px, -2px 0px"}})})}})})]})]}),w.length>0&&i(n,{children:[t(p,{variant:"subtitle2",gutterBottom:!0,children:"Extracted Colors"}),t(n,{sx:{display:"flex",flexWrap:"wrap",gap:1,p:2,border:"1px solid",borderColor:"divider",borderRadius:1,backgroundColor:"action.hover"},children:w.map((e,o)=>{const a=F(e),l=r.value===a;return t(_,{sx:{width:36,height:36,backgroundColor:a,border:l?"3px solid #1976d2":"2px solid #ccc",cursor:"pointer",transition:"all 0.2s","&:hover":{transform:"scale(1.1)",boxShadow:2},color:P(a),fontWeight:"bold",fontSize:"0.7rem"},onClick:()=>L(e),title:`Use extracted color: ${a}`,children:o+1},o)})}),t(p,{variant:"caption",color:"textSecondary",sx:{mt:1,display:"block"},children:"Click any color to use it"})]}),i(n,{children:[t(p,{variant:"subtitle2",gutterBottom:!0,children:"Preview"}),t(n,{sx:{width:"100%",height:80,backgroundColor:r.value,border:"1px solid #ccc",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",backgroundImage:r.value.includes("rgba")||r.value.includes("hsla")?"linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)":"none",backgroundSize:"10px 10px",backgroundPosition:"0 0, 0 5px, 5px -5px, -5px 0px"},children:t(n,{sx:{width:"100%",height:"100%",backgroundColor:r.value,borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center"},children:t(p,{variant:"body2",sx:{color:P(r.value),fontWeight:"bold",backgroundColor:"rgba(0,0,0,0.1)",padding:"4px 8px",borderRadius:1},children:r.key||"Color Preview"})})})]})]}),i(n,{sx:{display:"flex",alignItems:"center",gap:1,px:2,py:1.5,borderTop:"1px solid",borderColor:"divider",flexShrink:0,backgroundColor:"background.paper"},children:[d?.key&&t(I,{onClick:H,color:"error",startIcon:t(J,{}),size:"small",children:"Delete"}),t(n,{sx:{flexGrow:1}}),t(I,{onClick:g,size:"small",children:"Cancel"}),t(I,{onClick:j,variant:"contained",disabled:!!m||!r.key.trim(),size:"small",children:"Save"})]})]}):null};var xe=oe;export{xe as default};
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Button,
+  TextField,
+  Typography,
+  Drawer,
+  InputAdornment,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Tabs,
+  Tab,
+  Avatar,
+  IconButton
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CloseIcon from "@mui/icons-material/Close";
+import { ChromePicker } from "react-color";
+import { useState, useEffect, useRef, useMemo } from "react";
+import { convertColor, getContrastColor, rgbArrayToHex } from "../helpers/functions";
+const ColorEditDialog = ({ open, pair, onClose, onSave, onDelete, existingKeys, updateSingleDomColor, extractedColors = [] }) => {
+  const [editedPair, setEditedPair] = useState(null);
+  const [colorFormat, setColorFormat] = useState("hex");
+  const [keyError, setKeyError] = useState("");
+  const [tabValue, setTabValue] = useState(0);
+  const lastUpdateRef = useRef(0);
+  const pickerStyles = useMemo(() => ({
+    default: {
+      picker: {
+        width: "100%",
+        boxShadow: "none"
+      }
+    }
+  }), []);
+  useEffect(() => {
+    if (pair) {
+      setEditedPair(__spreadValues({}, pair));
+      const value = pair.value.toLowerCase().trim();
+      if (value.startsWith("rgba(")) {
+        setColorFormat("rgba");
+      } else if (value.startsWith("rgb(")) {
+        setColorFormat("rgb");
+      } else if (value.startsWith("hsla(")) {
+        setColorFormat("hsla");
+      } else if (value.startsWith("hsl(")) {
+        setColorFormat("hsl");
+      } else if (value.startsWith("#") && value.length === 9) {
+        setColorFormat("rgba");
+      } else {
+        setColorFormat("hex");
+      }
+    }
+    setKeyError("");
+  }, [pair]);
+  const handleKeyChange = (newKey) => {
+    if (!editedPair) return;
+    const isDuplicate = existingKeys.some((key) => key === newKey && newKey !== (pair == null ? void 0 : pair.key));
+    setKeyError(isDuplicate ? "Key already exists" : "");
+    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { key: newKey }));
+  };
+  const parseColorForPicker = (colorString) => {
+    const trimmed = colorString.toLowerCase().trim();
+    if (trimmed.startsWith("rgba(")) {
+      const match = trimmed.match(/rgba?\(([^)]+)\)/);
+      if (match) {
+        const values = match[1].split(",").map((v) => parseFloat(v.trim()));
+        const [r, g, b, a = 1] = values;
+        return {
+          r: Math.round(r),
+          g: Math.round(g),
+          b: Math.round(b),
+          a
+        };
+      }
+    } else if (trimmed.startsWith("rgb(")) {
+      const match = trimmed.match(/rgb\(([^)]+)\)/);
+      if (match) {
+        const values = match[1].split(",").map((v) => parseFloat(v.trim()));
+        const [r, g, b] = values;
+        return {
+          r: Math.round(r),
+          g: Math.round(g),
+          b: Math.round(b),
+          a: 1
+        };
+      }
+    } else if (trimmed.startsWith("hsla(")) {
+      return colorString;
+    } else if (trimmed.startsWith("hsl(")) {
+      return colorString;
+    } else if (trimmed.startsWith("#")) {
+      const hex = trimmed.replace("#", "");
+      if (hex.length === 8) {
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        const a = parseInt(hex.substr(6, 2), 16) / 255;
+        return { r, g, b, a };
+      } else if (hex.length === 6) {
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+        return { r, g, b, a: 1 };
+      }
+    }
+    return colorString;
+  };
+  const handleColorChange = (color) => {
+    if (!editedPair) return;
+    const colorFormatObj = {
+      hex: color.hex,
+      rgb: {
+        r: Math.round(color.rgb.r),
+        g: Math.round(color.rgb.g),
+        b: Math.round(color.rgb.b),
+        a: color.rgb.a !== void 0 ? color.rgb.a : 1
+      },
+      hsl: {
+        h: Math.round(color.hsl.h || 0),
+        s: color.hsl.s || 0,
+        l: color.hsl.l || 0,
+        a: color.hsl.a !== void 0 ? color.hsl.a : color.rgb.a !== void 0 ? color.rgb.a : 1
+      }
+    };
+    const newValue = convertColor(colorFormatObj, colorFormat);
+    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { value: newValue }));
+    const now = Date.now();
+    if (now - lastUpdateRef.current >= 16) {
+      updateSingleDomColor(editedPair.key, newValue);
+      lastUpdateRef.current = now;
+    }
+  };
+  const handleExtractedColorSelect = (colorRgb) => {
+    if (!editedPair) return;
+    const hexColor = rgbArrayToHex(colorRgb);
+    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { value: hexColor }));
+    updateSingleDomColor(editedPair.key, hexColor);
+  };
+  const handleSave = () => {
+    if (!editedPair || keyError || !editedPair.key.trim()) return;
+    onSave(editedPair);
+    onClose();
+  };
+  const handleDelete = () => {
+    if (!editedPair) return;
+    onDelete(editedPair.id);
+    onClose();
+  };
+  if (!editedPair) return null;
+  return /* @__PURE__ */ jsxs(
+    Drawer,
+    {
+      anchor: "right",
+      open,
+      onClose,
+      BackdropProps: { invisible: true },
+      PaperProps: {
+        sx: {
+          width: { xs: "100%", sm: 460 },
+          maxWidth: "100vw",
+          display: "flex",
+          flexDirection: "column"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          px: 2,
+          py: 1.5,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          flexShrink: 0
+        }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: 600 }, children: (pair == null ? void 0 : pair.key) ? `Edit: ${pair.key}` : "Add New Color" }),
+          /* @__PURE__ */ jsx(IconButton, { onClick: onClose, size: "small", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          flex: 1,
+          overflowY: "auto",
+          px: 2,
+          py: 2,
+          display: "flex",
+          flexDirection: "column",
+          gap: 3
+        }, children: [
+          /* @__PURE__ */ jsx(
+            TextField,
+            {
+              fullWidth: true,
+              label: "Color Name",
+              value: editedPair.key,
+              onChange: (e) => handleKeyChange(e.target.value),
+              error: !!keyError,
+              helperText: keyError,
+              placeholder: "e.g., primary-color--light, background-dark--dark",
+              size: "small"
+            }
+          ),
+          /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
+            /* @__PURE__ */ jsx(InputLabel, { children: "Color Format" }),
+            /* @__PURE__ */ jsxs(
+              Select,
+              {
+                value: colorFormat,
+                label: "Color Format",
+                onChange: (e) => setColorFormat(e.target.value),
+                children: [
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hex", children: "HEX" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "rgb", children: "RGB" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "rgba", children: "RGBA (with alpha)" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hsl", children: "HSL" }),
+                  /* @__PURE__ */ jsx(MenuItem, { value: "hsla", children: "HSLA (with alpha)" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Color Picker" }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsxs(Tabs, { value: tabValue, onChange: (_, newValue) => setTabValue(newValue), variant: "fullWidth", children: [
+                /* @__PURE__ */ jsx(Tab, { label: "Picker" }),
+                /* @__PURE__ */ jsx(Tab, { label: "Manual" })
+              ] }),
+              tabValue === 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 2, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(
+                ChromePicker,
+                {
+                  color: editedPair.value,
+                  onChange: handleColorChange,
+                  disableAlpha: false,
+                  styles: pickerStyles
+                }
+              ) }),
+              tabValue === 1 && /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  fullWidth: true,
+                  size: "small",
+                  label: `Color Value (${colorFormat.toUpperCase()})`,
+                  value: editedPair.value,
+                  onChange: (e) => {
+                    const newValue = e.target.value;
+                    setEditedPair(__spreadProps(__spreadValues({}, editedPair), { value: newValue }));
+                    updateSingleDomColor(editedPair.key, newValue);
+                  },
+                  placeholder: colorFormat === "hex" ? "#ff0000" : colorFormat === "rgb" ? "rgb(255, 0, 0)" : colorFormat === "rgba" ? "rgba(255, 0, 0, 0.5)" : colorFormat === "hsl" ? "hsl(0, 100%, 50%)" : "hsla(0, 100%, 50%, 0.5)",
+                  helperText: colorFormat === "rgba" ? "Alpha value should be between 0 and 1 (e.g., 0.1, 0.5, 1)" : colorFormat === "hsla" ? "Alpha value should be between 0 and 1 (e.g., 0.1, 0.5, 1)" : void 0,
+                  InputProps: {
+                    startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: {
+                          width: 20,
+                          height: 20,
+                          backgroundColor: editedPair.value,
+                          border: "1px solid #ccc",
+                          borderRadius: 1,
+                          // Add a checkerboard pattern background for transparency preview
+                          backgroundImage: colorFormat === "rgba" || colorFormat === "hsla" ? "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)" : "none",
+                          backgroundSize: "4px 4px",
+                          backgroundPosition: "0 0, 0 2px, 2px -2px, -2px 0px"
+                        }
+                      }
+                    ) })
+                  }
+                }
+              ) })
+            ] })
+          ] }),
+          extractedColors.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Extracted Colors" }),
+            /* @__PURE__ */ jsx(Box, { sx: {
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 1,
+              p: 2,
+              border: "1px solid",
+              borderColor: "divider",
+              borderRadius: 1,
+              backgroundColor: "action.hover"
+            }, children: extractedColors.map((color, index) => {
+              const hexColor = rgbArrayToHex(color);
+              const isSelected = editedPair.value === hexColor;
+              return /* @__PURE__ */ jsx(
+                Avatar,
+                {
+                  sx: {
+                    width: 36,
+                    height: 36,
+                    backgroundColor: hexColor,
+                    border: isSelected ? "3px solid #1976d2" : "2px solid #ccc",
+                    cursor: "pointer",
+                    transition: "all 0.2s",
+                    "&:hover": {
+                      transform: "scale(1.1)",
+                      boxShadow: 2
+                    },
+                    color: getContrastColor(hexColor),
+                    fontWeight: "bold",
+                    fontSize: "0.7rem"
+                  },
+                  onClick: () => handleExtractedColorSelect(color),
+                  title: `Use extracted color: ${hexColor}`,
+                  children: index + 1
+                },
+                index
+              );
+            }) }),
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "textSecondary", sx: { mt: 1, display: "block" }, children: "Click any color to use it" })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Preview" }),
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                sx: {
+                  width: "100%",
+                  height: 80,
+                  backgroundColor: editedPair.value,
+                  border: "1px solid #ccc",
+                  borderRadius: 1,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  position: "relative",
+                  // Add checkerboard background for alpha preview
+                  backgroundImage: editedPair.value.includes("rgba") || editedPair.value.includes("hsla") ? "linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)" : "none",
+                  backgroundSize: "10px 10px",
+                  backgroundPosition: "0 0, 0 5px, 5px -5px, -5px 0px"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      width: "100%",
+                      height: "100%",
+                      backgroundColor: editedPair.value,
+                      borderRadius: 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body2",
+                        sx: {
+                          color: getContrastColor(editedPair.value),
+                          fontWeight: "bold",
+                          backgroundColor: "rgba(0,0,0,0.1)",
+                          padding: "4px 8px",
+                          borderRadius: 1
+                        },
+                        children: editedPair.key || "Color Preview"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 1,
+          px: 2,
+          py: 1.5,
+          borderTop: "1px solid",
+          borderColor: "divider",
+          flexShrink: 0,
+          backgroundColor: "background.paper"
+        }, children: [
+          (pair == null ? void 0 : pair.key) && /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleDelete,
+              color: "error",
+              startIcon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+              size: "small",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+          /* @__PURE__ */ jsx(Button, { onClick: onClose, size: "small", children: "Cancel" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleSave,
+              variant: "contained",
+              disabled: !!keyError || !editedPair.key.trim(),
+              size: "small",
+              children: "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ColorEditDialog_default = ColorEditDialog;
+export {
+  ColorEditDialog_default as default
+};

package/dist/components/JsonColorSelector/components/ColorPaletteItem.js

@@ -1 +1,75 @@
-import{jsx as o,jsxs as g}from"react/jsx-runtime";import{Box as a,Chip as r}from"@mui/material";import{getContrastColor as d,getModeIcon as x,parseColorKey as f}from"../helpers/functions";const c=({pair:e,onEdit:l,onDelete:u})=>{const C=d(e.value),{baseChips:i,mode:t}=f(e.key),n=x(t);return g(a,{sx:{aspectRatio:"unset",height:"30px",cursor:"pointer",transition:"all 0.2s ease-in-out","&:hover":{transform:"translateY(-2px)",boxShadow:3},position:"relative",overflow:"hidden",backgroundColor:e.value,display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"flex-start",padding:"0 8px",gap:.5},onClick:()=>l(e),children:[o(a,{sx:{display:"flex",flexWrap:"wrap",gap:.25,justifyContent:"center"},children:i.map((s,p)=>o(r,{label:s,size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:"rgba(255,255,255,0.9)",color:"#333","& .MuiChip-label":{padding:"0 4px"}}},p))}),t&&o(r,{label:n,size:"small",sx:{height:16,fontSize:"0.6rem",backgroundColor:"rgba(0,0,0,0.7)",color:"#fff","& .MuiChip-label":{padding:"0 4px"}}})]})};var v=c;export{v as default};
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Box,
+  Chip
+} from "@mui/material";
+import { getContrastColor, getModeIcon, parseColorKey } from "../helpers/functions";
+const ColorPaletteItem = ({ pair, onEdit, onDelete }) => {
+  const textColor = getContrastColor(pair.value);
+  const { baseChips, mode } = parseColorKey(pair.key);
+  const modeIcon = getModeIcon(mode);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        aspectRatio: "unset",
+        height: "30px",
+        cursor: "pointer",
+        transition: "all 0.2s ease-in-out",
+        "&:hover": {
+          transform: "translateY(-2px)",
+          boxShadow: 3
+        },
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: pair.value,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        padding: "0 8px",
+        gap: 0.5
+      },
+      onClick: () => onEdit(pair),
+      children: [
+        /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.25, justifyContent: "center" }, children: baseChips.map((chip, index) => /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: chip,
+            size: "small",
+            sx: {
+              height: 16,
+              fontSize: "0.6rem",
+              backgroundColor: "rgba(255,255,255,0.9)",
+              color: "#333",
+              "& .MuiChip-label": {
+                padding: "0 4px"
+              }
+            }
+          },
+          index
+        )) }),
+        mode && /* @__PURE__ */ jsx(
+          Chip,
+          {
+            label: modeIcon,
+            size: "small",
+            sx: {
+              height: 16,
+              fontSize: "0.6rem",
+              backgroundColor: "rgba(0,0,0,0.7)",
+              color: "#fff",
+              "& .MuiChip-label": {
+                padding: "0 4px"
+              }
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var ColorPaletteItem_default = ColorPaletteItem;
+export {
+  ColorPaletteItem_default as default
+};