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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +23 -6
  2. package/dist/index.mjs +23 -6
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -8522,7 +8522,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8522
8522
  title: "Alterar Cor"
8523
8523
  },
8524
8524
  /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
8525
- ), 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-[0_10px_40px_rgba(0,0,0,0.7)] w-[200px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ import_react13.default.createElement("div", { className: "mb-3 custom-react-colorful" }, /* @__PURE__ */ import_react13.default.createElement(import_react_colorful.HexColorPicker, { color, onChange })), /* @__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(
8525
+ ), 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(
8526
+ "input",
8527
+ {
8528
+ type: "text",
8529
+ value: (color || "").replace("#", ""),
8530
+ onChange: handleInputChange,
8531
+ className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
8532
+ maxLength: 6
8533
+ }
8534
+ )), /* @__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(
8526
8535
  "button",
8527
8536
  {
8528
8537
  key: preset,
@@ -8531,28 +8540,32 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8531
8540
  onChange(preset);
8532
8541
  setIsOpen(false);
8533
8542
  },
8534
- 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",
8543
+ 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",
8535
8544
  style: { backgroundColor: preset },
8536
8545
  title: preset
8537
8546
  },
8538
8547
  (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ import_react13.default.createElement(
8539
8548
  import_fi12.FiCheck,
8540
8549
  {
8541
- className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8550
+ className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8542
8551
  size: 12
8543
8552
  }
8544
- )
8553
+ ),
8554
+ /* @__PURE__ */ import_react13.default.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
8545
8555
  )))), /* @__PURE__ */ import_react13.default.createElement("style", null, `
8546
8556
  .custom-react-colorful .react-colorful {
8547
8557
  width: 100%;
8548
8558
  height: 150px;
8549
8559
  }
8560
+ .custom-react-colorful.compact .react-colorful {
8561
+ height: 120px;
8562
+ }
8550
8563
  .custom-react-colorful .react-colorful__saturation {
8551
8564
  border-radius: 8px 8px 0 0;
8552
8565
  border-bottom: 1px solid rgba(255,255,255,0.1);
8553
8566
  }
8554
8567
  .custom-react-colorful .react-colorful__hue {
8555
- height: 16px;
8568
+ height: 14px;
8556
8569
  border-radius: 0 0 8px 8px;
8557
8570
  margin-top: 2px;
8558
8571
  }
@@ -8560,7 +8573,11 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8560
8573
  width: 16px;
8561
8574
  height: 16px;
8562
8575
  border: 2px solid #fff;
8563
- box-shadow: 0 1px 4px rgba(0,0,0,0.5);
8576
+ box-shadow: 0 1px 5px rgba(0,0,0,0.5);
8577
+ }
8578
+ /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
8579
+ .aspect-square {
8580
+ aspect-ratio: 1 / 1;
8564
8581
  }
8565
8582
  `));
8566
8583
  }
package/dist/index.mjs CHANGED
@@ -8514,7 +8514,16 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8514
8514
  title: "Alterar Cor"
8515
8515
  },
8516
8516
  /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 shadow-[inset_0_0_2px_rgba(255,255,255,0.2)]" })
8517
- ), 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-[0_10px_40px_rgba(0,0,0,0.7)] w-[200px] animate-in fade-in zoom-in-95 duration-100" }, /* @__PURE__ */ React12.createElement("div", { className: "mb-3 custom-react-colorful" }, /* @__PURE__ */ React12.createElement(HexColorPicker, { color, onChange })), /* @__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(
8517
+ ), 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(
8518
+ "input",
8519
+ {
8520
+ type: "text",
8521
+ value: (color || "").replace("#", ""),
8522
+ onChange: handleInputChange,
8523
+ className: "w-full bg-transparent border-none focus:ring-0 text-xs text-slate-200 uppercase font-mono placeholder-slate-600 p-0",
8524
+ maxLength: 6
8525
+ }
8526
+ )), /* @__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(
8518
8527
  "button",
8519
8528
  {
8520
8529
  key: preset,
@@ -8523,28 +8532,32 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8523
8532
  onChange(preset);
8524
8533
  setIsOpen(false);
8525
8534
  },
8526
- 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",
8535
+ 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",
8527
8536
  style: { backgroundColor: preset },
8528
8537
  title: preset
8529
8538
  },
8530
8539
  (color || "").toLowerCase() === (preset || "").toLowerCase() && /* @__PURE__ */ React12.createElement(
8531
8540
  FiCheck6,
8532
8541
  {
8533
- className: `drop-shadow-md ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8542
+ className: `drop-shadow-md z-10 ${["#ffffff", "#4df5cb", "#84cc16", "#f59e0b"].includes(preset) ? "text-black" : "text-white"}`,
8534
8543
  size: 12
8535
8544
  }
8536
- )
8545
+ ),
8546
+ /* @__PURE__ */ React12.createElement("div", { className: "absolute inset-0 bg-white opacity-0 group-hover/swatch:opacity-10 transition-opacity" })
8537
8547
  )))), /* @__PURE__ */ React12.createElement("style", null, `
8538
8548
  .custom-react-colorful .react-colorful {
8539
8549
  width: 100%;
8540
8550
  height: 150px;
8541
8551
  }
8552
+ .custom-react-colorful.compact .react-colorful {
8553
+ height: 120px;
8554
+ }
8542
8555
  .custom-react-colorful .react-colorful__saturation {
8543
8556
  border-radius: 8px 8px 0 0;
8544
8557
  border-bottom: 1px solid rgba(255,255,255,0.1);
8545
8558
  }
8546
8559
  .custom-react-colorful .react-colorful__hue {
8547
- height: 16px;
8560
+ height: 14px;
8548
8561
  border-radius: 0 0 8px 8px;
8549
8562
  margin-top: 2px;
8550
8563
  }
@@ -8552,7 +8565,11 @@ function ColorPicker({ color, onChange, disabled, isCompact = false }) {
8552
8565
  width: 16px;
8553
8566
  height: 16px;
8554
8567
  border: 2px solid #fff;
8555
- box-shadow: 0 1px 4px rgba(0,0,0,0.5);
8568
+ box-shadow: 0 1px 5px rgba(0,0,0,0.5);
8569
+ }
8570
+ /* Ajuste para swatches n\xE3o ficarem espremidos em flex/grid */
8571
+ .aspect-square {
8572
+ aspect-ratio: 1 / 1;
8556
8573
  }
8557
8574
  `));
8558
8575
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lv-x-software-house/x_view",
3
- "version": "1.2.6-dev.40",
3
+ "version": "1.2.6-dev.42",
4
4
  "description": "Pacote privado contendo os componentes e lógica de renderização 3D do X View.",
5
5
  "author": "iv.x - Engenharia de Software - ivxsoftwarehouse@gmail.com",
6
6
  "license": "UNLICENSED",