sanity-plugin-color-input 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Code-Journey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,114 @@
+# sanity-plugin-color-input
+
+A beautifully designed, highly customizable color picker plugin for Sanity Studio v3.
+
+## Features
+
+- 🎨 **Visual Color Picker**: A stunning visual interface to pick any color.
+- 🌈 **Gradient Support**: Toggle between solid colors and gorgeous linear gradients.
+- 💅 **Rich Return Format**: Provides HEX, RGBA, and HSL for solids, plus full CSS `linear-gradient` strings for gradients.
+- ✨ **Customizable Color Presets**: Use our meticulously crafted predefined presets or provide your own custom branded colors via options.
+- 📋 **One-Click Copy**: Easily copy HEX, RGBA, HSL, and CSS Gradient values to clipboard.
+- 🚀 **Built for Sanity v3**: Fully compatible with the modern Sanity Studio V3 architecture.
+
+## Installation
+
+```bash
+# Using npm
+npm install sanity-plugin-color-input
+
+# Using yarn
+yarn add sanity-plugin-color-input
+
+# Using pnpm
+pnpm add sanity-plugin-color-input
+```
+
+## Setup & Usage
+
+Compatible with **Node.js 18, 20, 22, and 24**.
+
+Add it as a plugin in your `sanity.config.ts` (or `sanity.config.js`):
+
+```typescript
+import {defineConfig} from 'sanity'
+import {customColorPicker} from 'sanity-plugin-color-input'
+
+export default defineConfig({
+  // ...other config settings
+  plugins: [
+    // Add the plugin here
+    customColorPicker(),
+  ],
+})
+```
+
+## Schema Usage
+
+Now you can use the `color` type in your schemas.
+
+```typescript
+export default {
+  name: 'myDocument',
+  title: 'My Document',
+  type: 'document',
+  fields: [
+    {
+      name: 'brandColor',
+      title: 'Brand Color',
+      type: 'color',
+    },
+  ],
+}
+```
+
+### Customizing the Preset Colors
+
+You can easily override the default color presets by providing your own `colors` array in your field's `options`:
+
+```typescript
+export default {
+  name: 'myDocument',
+  title: 'My Document',
+  type: 'document',
+  fields: [
+    {
+      name: 'brandColor',
+      title: 'Brand Color',
+      type: 'color',
+      options: {
+        // This will override the default presets, useful for restricting choices
+        // to brand-specific color palettes.
+        colors: [
+          // Solid color presets
+          '#1A1A1A',
+          '#F5F5F5',
+          // Gradient preset
+          {hex: '#E91E63', hex2: '#2196F3', angle: 45},
+        ],
+      },
+    },
+  ],
+}
+```
+
+## Data Structure
+
+The `color` field returns a solid color by default, or a gradient if selected:
+
+```json
+{
+  "_type": "color",
+  "hex": "#f44336",
+  "rgba": "rgba(244, 67, 54, 1)",
+  "hsl": "hsl(4, 90%, 58%)",
+  "isGradient": true,
+  "hex2": "#000000",
+  "angle": 180,
+  "css": "linear-gradient(180deg, #f44336, #000000)"
+}
+```
+
+## License
+
+MIT © Code-Journey

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import * as sanity from 'sanity';
+
+interface ColorPickerPluginConfig {
+}
+declare const customColorPicker: sanity.Plugin<void | ColorPickerPluginConfig>;
+
+export { type ColorPickerPluginConfig, customColorPicker };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import * as sanity from 'sanity';
+
+interface ColorPickerPluginConfig {
+}
+declare const customColorPicker: sanity.Plugin<void | ColorPickerPluginConfig>;
+
+export { type ColorPickerPluginConfig, customColorPicker };

package/dist/index.js

@@ -0,0 +1,423 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  customColorPicker: () => customColorPicker
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/plugin.ts
+var import_sanity3 = require("sanity");
+
+// src/schemas/colorType.ts
+var import_sanity2 = require("sanity");
+
+// src/components/ColorInput.tsx
+var import_react = require("react");
+var import_ui = require("@sanity/ui");
+var import_sanity = require("sanity");
+
+// src/components/icons/EditIcon.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", fill: "currentColor", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" }) });
+
+// src/constants/index.ts
+var PRESET_COLORS = [
+  "#f44336",
+  "#e91e63",
+  "#9c27b0",
+  "#673ab7",
+  "#3f51b5",
+  "#2196f3",
+  "#03a9f4",
+  "#00bcd4",
+  "#009688",
+  "#4caf50",
+  "#8bc34a",
+  "#cddc39",
+  "#ffeb3b",
+  "#ffc107",
+  "#ff9800",
+  "#ff5722",
+  "#795548",
+  "#9e9e9e",
+  "#607d8b",
+  "#000000",
+  { hex: "#ff9a9e", hex2: "#fad0c4", angle: 90 },
+  { hex: "#a1c4fd", hex2: "#c2e9fb", angle: 180 },
+  { hex: "#84fab0", hex2: "#8fd3f4", angle: 45 }
+];
+
+// src/utils/index.ts
+function isValidHex(hex) {
+  return /^#([0-9A-F]{6})$/i.test(hex);
+}
+function getContrastColor(hex) {
+  if (!hex || !isValidHex(hex)) return "rgba(0,0,0,0.6)";
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+  return brightness > 128 ? "rgba(0,0,0,0.6)" : "white";
+}
+function hexToRgba(hex) {
+  if (!isValidHex(hex)) return "";
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, 1)`;
+}
+function hexToHsl(hex) {
+  if (!isValidHex(hex)) return "";
+  let r = parseInt(hex.slice(1, 3), 16) / 255;
+  let g = parseInt(hex.slice(3, 5), 16) / 255;
+  let b = parseInt(hex.slice(5, 7), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
+}
+function getGradientString(angle, color1, color2) {
+  return `linear-gradient(${angle}deg, ${color1}, ${color2})`;
+}
+
+// src/components/ColorInput.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CustomColorPicker(props) {
+  const { value, onChange, elementProps, schemaType } = props;
+  const toast = (0, import_ui.useToast)();
+  const optionsColors = schemaType?.options?.colors;
+  const colorsList = Array.isArray(optionsColors) && optionsColors.length > 0 ? optionsColors : PRESET_COLORS;
+  const currentHex = value?.hex || "";
+  const currentHex2 = value?.hex2 || "#000000";
+  const currentIsGradient = value?.isGradient || false;
+  const currentAngle = value?.angle || 180;
+  const [localValue, setLocalValue] = (0, import_react.useState)(currentHex);
+  const [localValue2, setLocalValue2] = (0, import_react.useState)(currentHex2);
+  const [isGradient, setIsGradient] = (0, import_react.useState)(currentIsGradient);
+  const [angle, setAngle] = (0, import_react.useState)(currentAngle);
+  (0, import_react.useEffect)(() => {
+    setLocalValue(currentHex);
+    setLocalValue2(currentHex2);
+    setIsGradient(currentIsGradient);
+    setAngle(currentAngle);
+  }, [currentHex, currentHex2, currentIsGradient, currentAngle]);
+  (0, import_react.useEffect)(() => {
+    if (localValue === currentHex && localValue2 === currentHex2 && isGradient === currentIsGradient && angle === currentAngle)
+      return;
+    const timeout = setTimeout(() => {
+      if (!localValue) {
+        onChange(import_sanity.PatchEvent.from((0, import_sanity.unset)()));
+        return;
+      }
+      if (!isValidHex(localValue)) return;
+      const patches = [
+        (0, import_sanity.setIfMissing)({ _type: "color" }),
+        (0, import_sanity.set)(localValue, ["hex"]),
+        (0, import_sanity.set)(hexToRgba(localValue), ["rgba"]),
+        (0, import_sanity.set)(hexToHsl(localValue), ["hsl"]),
+        (0, import_sanity.set)(isGradient, ["isGradient"])
+      ];
+      if (isGradient) {
+        patches.push((0, import_sanity.set)(localValue2, ["hex2"]));
+        patches.push((0, import_sanity.set)(angle, ["angle"]));
+        patches.push((0, import_sanity.set)(getGradientString(angle, localValue, localValue2), ["css"]));
+      }
+      onChange(import_sanity.PatchEvent.from(patches));
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [
+    localValue,
+    localValue2,
+    isGradient,
+    angle,
+    currentHex,
+    currentHex2,
+    currentIsGradient,
+    currentAngle,
+    onChange
+  ]);
+  const handleInputChange = (0, import_react.useCallback)((e) => {
+    setLocalValue(e.currentTarget.value);
+  }, []);
+  const handleInput2Change = (0, import_react.useCallback)((e) => {
+    setLocalValue2(e.currentTarget.value);
+  }, []);
+  const handleAngleChange = (0, import_react.useCallback)((e) => {
+    setAngle(Number(e.currentTarget.value));
+  }, []);
+  const handlePresetClick = (0, import_react.useCallback)(
+    (preset) => {
+      if (typeof preset === "string") {
+        setLocalValue(preset);
+        setIsGradient(false);
+      } else {
+        setLocalValue(preset.hex);
+        if (preset.hex2) {
+          setLocalValue2(preset.hex2);
+          setIsGradient(true);
+          if (preset.angle !== void 0) setAngle(preset.angle);
+        } else {
+          setIsGradient(false);
+        }
+      }
+    },
+    []
+  );
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.push({ title: `Copied ${label}`, status: "success" });
+    } catch {
+      toast.push({ title: "Copy failed", status: "error" });
+    }
+  };
+  const contrastColor = (0, import_react.useMemo)(() => getContrastColor(localValue), [localValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Stack, { space: 3, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Card, { padding: 3, border: true, radius: 3, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Switch, { checked: isGradient, onChange: () => setIsGradient(!isGradient) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Label, { children: "Gradient Mode" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Stack, { space: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: 3, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Box, { style: { position: "relative", width: 40, height: 40 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_ui.Flex,
+            {
+              align: "center",
+              justify: "center",
+              style: {
+                width: "100%",
+                height: "100%",
+                backgroundColor: localValue || "#ffffff",
+                borderRadius: 4,
+                border: "1px solid #dfe1e5",
+                position: "absolute"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditIcon, { style: { color: getContrastColor(localValue), fontSize: 18 } })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "color",
+              value: isValidHex(localValue) ? localValue : "#000000",
+              onChange: handleInputChange,
+              style: {
+                position: "absolute",
+                width: "100%",
+                height: "100%",
+                opacity: 0,
+                cursor: "pointer"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_ui.TextInput,
+          {
+            ...elementProps,
+            value: localValue,
+            onChange: handleInputChange,
+            placeholder: "#000000"
+          }
+        ) })
+      ] }),
+      isGradient && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Box, { style: { position: "relative", width: 40, height: 40 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_ui.Flex,
+              {
+                align: "center",
+                justify: "center",
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  backgroundColor: localValue2 || "#ffffff",
+                  borderRadius: 4,
+                  border: "1px solid #dfe1e5",
+                  position: "absolute"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EditIcon, { style: { color: getContrastColor(localValue2), fontSize: 18 } })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "input",
+              {
+                type: "color",
+                value: isValidHex(localValue2) ? localValue2 : "#000000",
+                onChange: handleInput2Change,
+                style: {
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  opacity: 0,
+                  cursor: "pointer"
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_ui.TextInput,
+            {
+              value: localValue2,
+              onChange: handleInput2Change,
+              placeholder: "#000000"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Stack, { space: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { justify: "space-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Text, { size: 1, weight: "bold", children: "Angle" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Text, { size: 1, children: [
+              angle,
+              "\xB0"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "range",
+              min: "0",
+              max: "360",
+              value: angle,
+              onChange: handleAngleChange,
+              style: { width: "100%" }
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Card, { padding: 3, border: true, radius: 3, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Stack, { space: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Text, { size: 1, weight: "bold", muted: true, children: "Preview" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_ui.Box,
+        {
+          style: {
+            height: 100,
+            width: "100%",
+            borderRadius: 8,
+            background: isGradient ? getGradientString(angle, localValue, localValue2) : localValue,
+            border: "1px solid #dfe1e5"
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Card, { padding: 2, border: true, radius: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Grid, { columns: [5, 10], gap: 2, children: colorsList.map((color, index) => {
+      const isObj = typeof color === "object";
+      const h1 = isObj ? color.hex : color;
+      const h2 = isObj ? color.hex2 : null;
+      const ang = isObj ? color.angle || 180 : 180;
+      const bg = h2 ? getGradientString(ang, h1, h2) : h1;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_ui.Box,
+        {
+          onClick: () => handlePresetClick(color),
+          style: {
+            width: 24,
+            height: 24,
+            borderRadius: "50%",
+            background: bg,
+            cursor: "pointer",
+            border: localValue === h1 ? "2px solid #1a0dab" : "2px solid transparent"
+          }
+        },
+        index
+      );
+    }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Card, { padding: 3, border: true, radius: 3, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Stack, { space: 3, children: [
+      { label: "HEX", value: localValue.toUpperCase(), show: true },
+      { label: "HEX 2", value: localValue2.toUpperCase(), show: isGradient },
+      { label: "RGBA", value: hexToRgba(localValue), show: !isGradient },
+      { label: "HSL", value: hexToHsl(localValue), show: !isGradient },
+      {
+        label: "CSS Gradient",
+        value: getGradientString(angle, localValue, localValue2),
+        show: isGradient
+      }
+    ].filter((item) => item.show).map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Flex, { justify: "space-between", align: "center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_ui.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui.Text, { size: 1, weight: "bold", muted: true, children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { style: { fontSize: 13, wordBreak: "break-all" }, children: item.value })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_ui.Button,
+        {
+          mode: "ghost",
+          fontSize: 1,
+          text: "Copy",
+          onClick: () => copyToClipboard(item.value, item.label)
+        }
+      )
+    ] }, item.label)) }) })
+  ] });
+}
+
+// src/schemas/colorType.ts
+var colorType = (0, import_sanity2.defineType)({
+  name: "color",
+  title: "Color",
+  type: "object",
+  components: {
+    input: CustomColorPicker
+  },
+  fields: [
+    (0, import_sanity2.defineField)({ name: "hex", type: "string" }),
+    (0, import_sanity2.defineField)({ name: "rgba", type: "string" }),
+    (0, import_sanity2.defineField)({ name: "hsl", type: "string" }),
+    (0, import_sanity2.defineField)({ name: "isGradient", type: "boolean" }),
+    (0, import_sanity2.defineField)({ name: "hex2", type: "string" }),
+    (0, import_sanity2.defineField)({ name: "angle", type: "number" }),
+    (0, import_sanity2.defineField)({ name: "css", type: "string" })
+  ]
+});
+
+// src/plugin.ts
+var customColorPicker = (0, import_sanity3.definePlugin)((config) => {
+  return {
+    name: "sanity-plugin-color-input",
+    schema: {
+      types: [colorType]
+    }
+  };
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  customColorPicker
+});