@lv-x-software-house/x_view 1.2.6-dev.41 → 1.2.6-dev.42

package/dist/index.js

@@ -8522,7 +8522,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
         title: "Alterar Cor"
       },
       /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
-    ), isOpen && !disabled && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute top-full right-0 mt-1 z-[9999] p-2 bg-slate-950 rounded-lg border border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)] w-[170px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-2 custom-react-colorful compact" }, /* @__PURE__ */ import_react13.default.createElement(import_react_colorful.HexColorPicker, { color, onChange })), /* @__PURE__ */ import_react13.default.createElement("div", { className: "h-px bg-white/5 my-2" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "grid grid-cols-5 gap-1.5" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ import_react13.default.createElement(
+    ), isOpen && !disabled && /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute top-full right-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[210px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-3 custom-react-colorful compact" }, /* @__PURE__ */ import_react13.default.createElement(import_react_colorful.HexColorPicker, { color, onChange })), /* @__PURE__ */ import_react13.default.createElement("div", { className: "flex items-center gap-2 bg-slate-800/50 rounded-lg px-2.5 py-1.5 border border-white/5 focus-within:border-indigo-500/50 transition-all mb-3" }, /* @__PURE__ */ import_react13.default.createElement(import_fi12.FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ import_react13.default.createElement(
+      "input",
+      {
+        type: "text",
+        value: (color || "").replace("#", ""),
+        onChange: handleInputChange,
+        className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
+        maxLength: 6
+      }
+    )), /* @__PURE__ */ import_react13.default.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ import_react13.default.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ import_react13.default.createElement(
       "button",
       {
         key: preset,
@@ -8531,39 +8540,44 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
           onChange(preset);
           setIsOpen(false);
         },
-        className: "w-full aspect-square rounded border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center",
+        className: "w-full aspect-square rounded-md border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center relative overflow-hidden group/swatch",
         style: { backgroundColor: preset },
         title: preset
       },
       (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ import_react13.default.createElement(
         import_fi12.FiCheck,
         {
-          className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
-          size: 10
+          className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
+          size: 12
         }
-      )
+      ),
+      /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
     )))), /* @__PURE__ */ import_react13.default.createElement("style", null, `
         .custom-react-colorful .react-colorful {
           width: 100%;
           height: 150px;
         }
         .custom-react-colorful.compact .react-colorful {
-          height: 100px;
+          height: 120px;
         }
         .custom-react-colorful .react-colorful__saturation {
-          border-radius: 6px 6px 0 0;
+          border-radius: 8px 8px 0 0;
           border-bottom: 1px solid rgba(255,255,255,0.1);
         }
         .custom-react-colorful .react-colorful__hue {
-          height: 12px;
-          border-radius: 0 0 6px 6px;
+          height: 14px;
+          border-radius: 0 0 8px 8px;
           margin-top: 2px;
         }
         .custom-react-colorful .react-colorful__pointer {
-          width: 14px;
-          height: 14px;
+          width: 16px;
+          height: 16px;
           border: 2px solid #fff;
-          box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+          box-shadow: 0 1px 5px rgba(0,0,0,0.5);
+        }
+        /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
+        .aspect-square {
+          aspect-ratio: 1 / 1;
         }
       `));
   }

package/dist/index.mjs

@@ -8514,7 +8514,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
         title: "Alterar Cor"
       },
       /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
-    ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full right-0 mt-1 z-[9999] p-2 bg-slate-950 rounded-lg border border-white/10 shadow-[0_10px_40px_rgba(0,0,0,0.7)] w-[170px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-2 custom-react-colorful compact" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/5 my-2" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-1.5" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
+    ), isOpen && !disabled && /* @__PURE__ */ React12.createElement("div", { className: "absolute top-full right-0 mt-2 z-[9999] p-3 bg-slate-950 rounded-xl border border-white/10 shadow-2xl w-[210px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful compact" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-2 bg-slate-800/50 rounded-lg px-2.5 py-1.5 border border-white/5 focus-within:border-indigo-500/50 transition-all mb-3" }, /* @__PURE__ */ React12.createElement(FiHash, { className: "text-slate-500", size: 14 }), /* @__PURE__ */ React12.createElement(
+      "input",
+      {
+        type: "text",
+        value: (color || "").replace("#", ""),
+        onChange: handleInputChange,
+        className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
+        maxLength: 6
+      }
+    )), /* @__PURE__ */ React12.createElement("div", { className: "h-px bg-white/10 my-3" }), /* @__PURE__ */ React12.createElement("div", { className: "grid grid-cols-5 gap-2" }, PRESET_COLORS.map((preset) => /* @__PURE__ */ React12.createElement(
       "button",
       {
         key: preset,
@@ -8523,39 +8532,44 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
           onChange(preset);
           setIsOpen(false);
         },
-        className: "w-full aspect-square rounded border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center",
+        className: "w-full aspect-square rounded-md border border-white/5 hover:border-white/30 hover:scale-110 transition-all shadow-sm flex items-center justify-center relative overflow-hidden group/swatch",
         style: { backgroundColor: preset },
         title: preset
       },
       (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ React12.createElement(
         FiCheck6,
         {
-          className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
-          size: 10
+          className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
+          size: 12
         }
-      )
+      ),
+      /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
     )))), /* @__PURE__ */ React12.createElement("style", null, `
         .custom-react-colorful .react-colorful {
           width: 100%;
           height: 150px;
         }
         .custom-react-colorful.compact .react-colorful {
-          height: 100px;
+          height: 120px;
         }
         .custom-react-colorful .react-colorful__saturation {
-          border-radius: 6px 6px 0 0;
+          border-radius: 8px 8px 0 0;
           border-bottom: 1px solid rgba(255,255,255,0.1);
         }
         .custom-react-colorful .react-colorful__hue {
-          height: 12px;
-          border-radius: 0 0 6px 6px;
+          height: 14px;
+          border-radius: 0 0 8px 8px;
           margin-top: 2px;
         }
         .custom-react-colorful .react-colorful__pointer {
-          width: 14px;
-          height: 14px;
+          width: 16px;
+          height: 16px;
           border: 2px solid #fff;
-          box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+          box-shadow: 0 1px 5px rgba(0,0,0,0.5);
+        }
+        /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
+        .aspect-square {
+          aspect-ratio: 1 / 1;
         }
       `));
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lv-x-software-house/x_view",
-  "version": "1.2.6-dev.41",
+  "version": "1.2.6-dev.42",
   "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
   "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
   "license": "UNLICENSED",