@sanity/color-input/dist/index.js

Color input

import "@sanity/color-input/bundle.css";
import "@sanity/ui/styles.css";
import { definePlugin, defineType } from "sanity";
import { c } from "react/compiler-runtime";
import { assignInlineVars } from "@vanilla-extract/dynamic";
import { lazy } from "react";
import { jsx } from "react/jsx-runtime";
const ColorInput = lazy(() => import("./ColorInput-CMhbbfkK.js"));
var backgroundColorVar = "var(--aabeth0)", colorPreview = "aabeth2", opacityVar = "var(--aabeth1)";
const round = (val = 1) => Math.round(val * 100);
function ColorPreviewMedia(t0) {
	let $ = c(5), { hex, alpha } = t0, t1 = hex ?? "#000", t2 = String(alpha ?? 1), t3;
	$[0] !== t1 || $[1] !== t2 ? (t3 = assignInlineVars({
		[backgroundColorVar]: t1,
		[opacityVar]: t2
	}), $[0] = t1, $[1] = t2, $[2] = t3) : t3 = $[2];
	let t4;
	return $[3] === t3 ? t4 = $[4] : (t4 = /* @__PURE__ */ jsx("div", {
		className: colorPreview,
		style: t3
	}), $[3] = t3, $[4] = t4), t4;
}
const color = defineType({
	name: "color",
	type: "object",
	title: "Color",
	components: { input: ColorInput },
	fields: [
		{
			title: "Hex",
			name: "hex",
			type: "string"
		},
		{
			title: "Alpha",
			name: "alpha",
			type: "number"
		},
		{
			title: "Hue Saturation Lightness",
			name: "hsl",
			type: "hslaColor"
		},
		{
			title: "Hue Saturation Value",
			name: "hsv",
			type: "hsvaColor"
		},
		{
			title: "Red Green Blue (rgb)",
			name: "rgb",
			type: "rgbaColor"
		}
	],
	preview: {
		select: {
			title: "hex",
			alpha: "alpha",
			hex: "hex",
			hsl: "hsl"
		},
		prepare({ title, hex, hsl, alpha }) {
			let subtitle = hex || "No color set";
			return hsl && (subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`), {
				title: title || "Color",
				subtitle,
				media: () => /* @__PURE__ */ jsx(ColorPreviewMedia, {
					hex,
					alpha
				})
			};
		}
	}
}), hslaColor = defineType({
	title: "Hue Saturation Lightness",
	name: "hslaColor",
	type: "object",
	fields: [
		{
			name: "h",
			type: "number",
			title: "Hue"
		},
		{
			name: "s",
			type: "number",
			title: "Saturation"
		},
		{
			name: "l",
			type: "number",
			title: "Lightness"
		},
		{
			name: "a",
			type: "number",
			title: "Alpha"
		}
	]
}), hsvaColor = defineType({
	title: "Hue Saturation Value",
	name: "hsvaColor",
	type: "object",
	fields: [
		{
			name: "h",
			type: "number",
			title: "Hue"
		},
		{
			name: "s",
			type: "number",
			title: "Saturation"
		},
		{
			name: "v",
			type: "number",
			title: "Value"
		},
		{
			name: "a",
			type: "number",
			title: "Alpha"
		}
	]
}), rgbaColor = defineType({
	title: "Red Green Blue (rgb)",
	name: "rgbaColor",
	type: "object",
	fields: [
		{
			name: "r",
			type: "number",
			title: "Red"
		},
		{
			name: "g",
			type: "number",
			title: "Green"
		},
		{
			name: "b",
			type: "number",
			title: "Blue"
		},
		{
			name: "a",
			type: "number",
			title: "Alpha"
		}
	]
}), colorInput = definePlugin({
	name: "@sanity/color-input",
	schema: { types: [
		hslaColor,
		hsvaColor,
		rgbaColor,
		color
	] }
});
export { ColorInput, color, colorInput, hslaColor, hsvaColor, rgbaColor };

//# sourceMappingURL=index.js.map