@sanity/color-input
6.1.86.1.9
−
Removed (2 files)
+
Added (2 files)
~
Modified (6 files)
Index: package/dist/bundle.css
===================================================================
--- package/dist/bundle.css
+++ package/dist/bundle.css
@@ -1,1 +1,246 @@
-._1cggvdy2{background-color:var(--_1cggvdy0);opacity:var(--_1cggvdy1);width:100%;height:100%;position:absolute;top:0;left:0}._1r8gcyi1{gap:.25em}._1r8gcyi2{cursor:pointer;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) 0;border-radius:3px;width:2.1em;height:2.1em;position:relative;overflow:hidden}._1r8gcyi3{border-radius:inherit;box-shadow:inset 0 0 0 1px var(--card-shadow-outline-color);z-index:1;background:var(--_1r8gcyi0);position:absolute;inset:0}.nkxww53{border-radius:var(--nkxww50);box-shadow:var(--nkxww51);background:var(--nkxww52);position:absolute;inset:0}.z3auq35{border-radius:var(--z3auq30);position:absolute;inset:0}.z3auq36{border-radius:var(--z3auq30);position:absolute;inset:0;overflow:hidden}.z3auq37{background:var(--z3auq32);box-shadow:var(--z3auq31);border-radius:var(--z3auq30);position:absolute;inset:0}.z3auq38{height:100%;margin:0 3px;position:relative}.z3auq39{left:var(--z3auq33);position:absolute}.z3auq3a{left:0;top:var(--z3auq34);position:absolute}.z3auq3b{background:#fff;border-radius:1px;width:4px;height:8px;margin-top:1px;transform:translate(-2px);box-shadow:0 0 2px #0009}._2fc6qh6{position:relative}._2fc6qh7{width:80%;box-shadow:inset 0 0 0 1px var(--_2fc6qh0);color:var(--_2fc6qh1);background-color:var(--_2fc6qh2);font-size:var(--_2fc6qh3);text-align:center;border:none;padding:4px 10% 3px}._2fc6qh8{text-align:center;font-size:var(--_2fc6qh4);color:var(--_2fc6qh5);text-transform:capitalize;padding-top:3px;padding-bottom:4px;display:block}._2fc6qh9{cursor:ew-resize}._1thb6yi4{border-radius:var(--_1thb6yi0);box-shadow:var(--_1thb6yi1);position:absolute;inset:0}._1thb6yi5{border-radius:var(--_1thb6yi0);background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);height:100%;padding:0 2px;position:relative}._1thb6yi6{border-radius:var(--_1thb6yi0);background:linear-gradient(red 0%,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%);height:100%;padding:0 2px;position:relative}._1thb6yi7{left:var(--_1thb6yi2);position:absolute}._1thb6yi8{left:0;top:var(--_1thb6yi3);position:absolute}._1thb6yi9{background:#fff;border-radius:1px;width:4px;height:8px;margin-top:1px;transform:translate(-2px);box-shadow:0 0 2px #0009}._1fdna2u5{background:var(--_1fdna2u2);border-radius:var(--_1fdna2u0);position:absolute;inset:0}._1fdna2u6{border-radius:var(--_1fdna2u0);background:linear-gradient(90deg,#fff,#fff0);position:absolute;inset:0}._1fdna2u7{box-shadow:var(--_1fdna2u1);border-radius:var(--_1fdna2u0);background:linear-gradient(#0000,#000);position:absolute;inset:0}._1fdna2u8{top:var(--_1fdna2u3);left:var(--_1fdna2u4);cursor:default;position:absolute}._1fdna2u9{cursor:pointer;border-radius:50%;width:4px;height:4px;transform:translate(-2px,-2px);box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px #0000004d,0 0 1px 2px #0006}.np92li2{width:var(--np92li0)}.np92li3{height:5em;position:relative}.np92li4,.np92li5{height:10px;position:relative}.np92li5.np92li5{background:#fff}.np92li6{min-width:4em;position:relative}.np92li6.np92li6{background:#fff}.np92li7{background-color:var(--np92li1);width:100%;height:100%;position:absolute;top:0;left:0}.np92li8{background-color:var(--card-bg-color);width:100%;margin-top:6rem;position:relative}.np92li9{width:200px}
+._175fse22 {
+ background-color: var(--_175fse20);
+ opacity: var(--_175fse21);
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+._3tuj0r1 {
+ gap: .25em;
+}
+
+._3tuj0r2 {
+ cursor: pointer;
+ background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=") 0;
+ border-radius: 3px;
+ width: 2.1em;
+ height: 2.1em;
+ position: relative;
+ overflow: hidden;
+}
+
+._3tuj0r3 {
+ border-radius: inherit;
+ box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
+ z-index: 1;
+ background: var(--_3tuj0r0);
+ position: absolute;
+ inset: 0;
+}
+
+.nkjpuc3 {
+ border-radius: var(--nkjpuc0);
+ box-shadow: var(--nkjpuc1);
+ background: var(--nkjpuc2);
+ position: absolute;
+ inset: 0;
+}
+
+._1jk6upy5 {
+ border-radius: var(--_1jk6upy0);
+ position: absolute;
+ inset: 0;
+}
+
+._1jk6upy6 {
+ border-radius: var(--_1jk6upy0);
+ position: absolute;
+ inset: 0;
+ overflow: hidden;
+}
+
+._1jk6upy7 {
+ background: var(--_1jk6upy2);
+ box-shadow: var(--_1jk6upy1);
+ border-radius: var(--_1jk6upy0);
+ position: absolute;
+ inset: 0;
+}
+
+._1jk6upy8 {
+ height: 100%;
+ margin: 0 3px;
+ position: relative;
+}
+
+._1jk6upy9 {
+ left: var(--_1jk6upy3);
+ position: absolute;
+}
+
+._1jk6upya {
+ left: 0;
+ top: var(--_1jk6upy4);
+ position: absolute;
+}
+
+._1jk6upyb {
+ background: #fff;
+ border-radius: 1px;
+ width: 4px;
+ height: 8px;
+ margin-top: 1px;
+ transform: translateX(-2px);
+ box-shadow: 0 0 2px #0009;
+}
+
+._1sf41v46 {
+ position: relative;
+}
+
+._1sf41v47 {
+ width: 80%;
+ box-shadow: inset 0 0 0 1px var(--_1sf41v40);
+ color: var(--_1sf41v41);
+ background-color: var(--_1sf41v42);
+ font-size: var(--_1sf41v43);
+ text-align: center;
+ border: none;
+ padding: 4px 10% 3px;
+}
+
+._1sf41v48 {
+ text-align: center;
+ font-size: var(--_1sf41v44);
+ color: var(--_1sf41v45);
+ text-transform: capitalize;
+ padding-top: 3px;
+ padding-bottom: 4px;
+ display: block;
+}
+
+._1sf41v49 {
+ cursor: ew-resize;
+}
+
+._8k21vg4 {
+ border-radius: var(--_8k21vg0);
+ box-shadow: var(--_8k21vg1);
+ position: absolute;
+ inset: 0;
+}
+
+._8k21vg5 {
+ border-radius: var(--_8k21vg0);
+ background: linear-gradient(to right, red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
+ height: 100%;
+ padding: 0 2px;
+ position: relative;
+}
+
+._8k21vg6 {
+ border-radius: var(--_8k21vg0);
+ background: linear-gradient(to top, red 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
+ height: 100%;
+ padding: 0 2px;
+ position: relative;
+}
+
+._8k21vg7 {
+ left: var(--_8k21vg2);
+ position: absolute;
+}
+
+._8k21vg8 {
+ left: 0;
+ top: var(--_8k21vg3);
+ position: absolute;
+}
+
+._8k21vg9 {
+ background: #fff;
+ border-radius: 1px;
+ width: 4px;
+ height: 8px;
+ margin-top: 1px;
+ transform: translateX(-2px);
+ box-shadow: 0 0 2px #0009;
+}
+
+._644e75 {
+ background: var(--_644e72);
+ border-radius: var(--_644e70);
+ position: absolute;
+ inset: 0;
+}
+
+._644e76 {
+ border-radius: var(--_644e70);
+ background: linear-gradient(to right, #fff, #fff0);
+ position: absolute;
+ inset: 0;
+}
+
+._644e77 {
+ box-shadow: var(--_644e71);
+ border-radius: var(--_644e70);
+ background: linear-gradient(to top, #000, #0000);
+ position: absolute;
+ inset: 0;
+}
+
+._644e78 {
+ top: var(--_644e73);
+ left: var(--_644e74);
+ cursor: default;
+ position: absolute;
+}
+
+._644e79 {
+ cursor: pointer;
+ border-radius: 50%;
+ width: 4px;
+ height: 4px;
+ transform: translate(-2px, -2px);
+ box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px #0000004d, 0 0 1px 2px #0006;
+}
+
+._10mejog2 {
+ width: var(--_10mejog0);
+}
+
+._10mejog3 {
+ height: 5em;
+ position: relative;
+}
+
+._10mejog4, ._10mejog5 {
+ height: 10px;
+ position: relative;
+}
+
+._10mejog5._10mejog5 {
+ background: #fff;
+}
+
+._10mejog6 {
+ min-width: 4em;
+ position: relative;
+}
+
+._10mejog6._10mejog6 {
+ background: #fff;
+}
+
+._10mejog7 {
+ background-color: var(--_10mejog1);
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+._10mejog8 {
+ background-color: var(--card-bg-color);
+ width: 100%;
+ margin-top: 6rem;
+ position: relative;
+}
+
+._10mejog9 {
+ width: 200px;
+}Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -2,12 +2,28 @@
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 { Box, Text } from "@sanity/ui";
+import { Suspense, lazy } from "react";
import { jsx } from "react/jsx-runtime";
-const ColorInput = lazy(() => import("./ColorInput-Bk3g75c0.js"));
-var backgroundColorVar = "var(--_1cggvdy0)", colorPreview = "_1cggvdy2", opacityVar = "var(--_1cggvdy1)";
+const ColorInputLazy = lazy(() => import("./ColorInput-EY_NI5Gu.js")), fallback = /* @__PURE__ */ jsx(Box, {
+ padding: 3,
+ children: /* @__PURE__ */ jsx(Text, { children: "Loading color input..." })
+});
+/**
+* The document form suspends as one tree, and that tree includes the field
+* group tabs. Loading the picker here keeps that fallback inside the field,
+* so the tabs stay mounted and keep the width they already measured.
+*/
+function ColorInput(props) {
+ let $ = c(2), t0;
+ return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Suspense, {
+ fallback,
+ children: /* @__PURE__ */ jsx(ColorInputLazy, { ...props })
+ }), $[0] = props, $[1] = t0), t0;
+}
+var backgroundColorVar = "var(--_175fse20)", colorPreview = "_175fse22", opacityVar = "var(--_175fse21)";
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({Index: package/package.json
===================================================================
--- package/package.json
+++ package/package.json
@@ -1,7 +1,7 @@
{
"name": "@sanity/color-input",
- "version": "6.1.8",
+ "version": "6.1.9",
"description": "Color input",
"keywords": [
"cms",
"color-input",
@@ -39,25 +39,25 @@
"./package.json": "./package.json"
},
"dependencies": {
"@sanity/icons": "^5.2.3",
- "@sanity/ui": "^4.4.5",
+ "@sanity/ui": "^4.4.9",
"@vanilla-extract/dynamic": "^2.1.5",
"lodash-es": "^4.18.1",
"tinycolor2": "^1.6.0"
},
"devDependencies": {
"@sanity/tsconfig": "^2.2.1",
- "@sanity/tsdown-config": "^0.29.0",
+ "@sanity/tsdown-config": "^0.31.1",
"@sanity/vanilla-extract-vite-plugin": "^0.3.0",
"@types/lodash-es": "^4.17.12",
"@types/node": "^24.19.2",
"@types/react": "^19.3.0",
"@types/tinycolor2": "^1.4.6",
"@vanilla-extract/css": "^1.21.3",
- "oxc-transform-react": "^0.153.0",
- "react": "^19.3.0",
- "sanity": "^6.18.0",
+ "oxc-transform-react": "^0.154.0",
+ "react": "^19.3.1",
+ "sanity": "^6.19.0",
"tsdown": "^0.23.1"
},
"peerDependencies": {
"react": "^19.2",Index: package/dist/index.d.ts.map
===================================================================
--- package/dist/index.d.ts.map
+++ package/dist/index.d.ts.map
@@ -1,1 +1,1 @@
-{"version":3,"file":"index.d.ts","names":["ColorInput","_$___ColorInput0.default","_$__ColorInput0.default"],"sources":["../src/ColorInput.tsx","../src/react-color/types.ts","../src/types.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/LazyColorInput.tsx","../src/index.ts"],"mappings":";;;iBAiLwBA,aAAW,OAAO,mBAAmB,MAAM,IAAI;UCtKtD;EACf;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;KAGU,iBAAiB,WAAW,WAAW,WAAW;UCpC7C;EACf;EACA,KAAK;EACL,KAAK;EACL,KAAK;;UAGU,qBAAqB,KAAK;EACzC;EACA,YAAY,MAAM;;KAGR,kBAAkB,KAAK;EACjC,UAAU;;KAEA,kBAAkB,iBAAiB,YAAY;cCTrD;;;;UAKW,wBAAwB,KAAK;EAC5C,aAAa;EACb,UAAU;;;YAKO;IACf,OAAO;;;qBAgBE;;;;;IAIE,uBAAK,2BAJPC;;;;;;;;IAiCT;MACE;MACA;MACA;MACA;;IAEF,UAAO,OAAA,KAAA,KAAA;MAML;MACA;MACA;MACA;QAAO;QAAW;QAAW;;;;;;;;;qBCrFtB;;;;;;;;;;qBCAA;;;;;;;;;;qBCAA;;;;;;;;;;qBCAA,4BAAU,2BAAVC;qBCMA,6BAAU"}
\ No newline at end of file
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/LazyColorInput.tsx","../src/react-color/types.ts","../src/types.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"mappings":";;;;;;;;wBAiBgB,WAAW,OAAO,mCAAgB,IAAA;UCNjC;EACf;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;EACA;;KAGU,iBAAiB,WAAW,WAAW,WAAW;UCpC7C;EACf;EACA,KAAK;EACL,KAAK;EACL,KAAK;;UAGU,qBAAqB,KAAK;EACzC;EACA,YAAY,MAAM;;KAGR,kBAAkB,KAAK;EACjC,UAAU;;KAEA,kBAAkB,iBAAiB,YAAY;cCTrD;;;;UAKW,wBAAwB,KAAK;EAC5C,aAAa;EACb,UAAU;;;YAKO;IACf,OAAO;;;qBAgBE;;;;;IAIE,cAAK;;;;;;;;IA6BhB;MACE;MACA;MACA;MACA;;IAEF,UAAO,OAAA,KAAA,KAAA;MAML;MACA;MACA;MACA;QAAO;QAAW;QAAW;;;;;;;;;qBCrFtB;;;;;;;;;;qBCAA;;;;;;;;;;qBCAA;;;;;;;;;;qBCMA,6BAAU"}
\ No newline at end of fileIndex: package/dist/index.js.map
===================================================================
--- package/dist/index.js.map
+++ package/dist/index.js.map
@@ -1,1 +1,1 @@
-{"version":3,"file":"index.js","names":["{hex, alpha}: {hex?: string; alpha?: number}","assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })","hex ?? '#000'","String(alpha ?? 1)","<div\n className={colorPreview}\n style={assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })}\n />","_c"],"sources":["../src/LazyColorInput.tsx","../src/schemas/colorPreview.css.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"sourcesContent":["import {lazy} from 'react'\n\nexport const ColorInput = lazy(() => import('./ColorInput'))\n","import {createVar, style} from '@vanilla-extract/css'\n\nexport const backgroundColorVar = createVar()\nexport const opacityVar = createVar()\n\nexport const colorPreview = style({\n backgroundColor: backgroundColorVar,\n opacity: opacityVar,\n position: 'absolute',\n height: '100%',\n width: '100%',\n top: 0,\n left: 0,\n})\n","import {assignInlineVars} from '@vanilla-extract/dynamic'\nimport {defineType, type ObjectDefinition} from 'sanity'\n\nimport {ColorInput} from '../LazyColorInput'\nimport {type ColorOptions} from '../types'\n\nimport {backgroundColorVar, colorPreview, opacityVar} from './colorPreview.css'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color'\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n type: typeof colorTypeName\n options?: ColorOptions\n}\n\ndeclare module 'sanity' {\n // makes type: 'color' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n color: ColorDefinition\n }\n}\n\nfunction ColorPreviewMedia({hex, alpha}: {hex?: string; alpha?: number}) {\n return (\n <div\n className={colorPreview}\n style={assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })}\n />\n )\n}\n\nexport const color = defineType({\n name: colorTypeName,\n type: 'object',\n title: 'Color',\n components: {input: ColorInput},\n fields: [\n {\n title: 'Hex',\n name: 'hex',\n type: 'string',\n },\n {\n title: 'Alpha',\n name: 'alpha',\n type: 'number',\n },\n {\n title: 'Hue Saturation Lightness',\n name: 'hsl',\n type: 'hslaColor',\n },\n {\n title: 'Hue Saturation Value',\n name: 'hsv',\n type: 'hsvaColor',\n },\n {\n title: 'Red Green Blue (rgb)',\n name: 'rgb',\n type: 'rgbaColor',\n },\n ],\n preview: {\n select: {\n title: 'hex',\n alpha: 'alpha',\n hex: 'hex',\n hsl: 'hsl',\n },\n prepare({\n title,\n hex,\n hsl,\n alpha,\n }: {\n title?: string\n alpha?: number\n hex?: string\n hsl?: {h: number; s: number; l: number}\n }) {\n let subtitle = hex || 'No color set'\n if (hsl) {\n subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n }\n return {\n title: title || 'Color',\n subtitle: subtitle,\n media: () => <ColorPreviewMedia hex={hex} alpha={alpha} />,\n }\n },\n },\n})\n","import {defineType} from 'sanity'\n\nexport const hslaColor = defineType({\n title: 'Hue Saturation Lightness',\n name: 'hslaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'l', type: 'number', title: 'Lightness'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n title: 'Hue Saturation Value',\n name: 'hsvaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'v', type: 'number', title: 'Value'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {defineType} from 'sanity'\n\nexport const rgbaColor = defineType({\n title: 'Red Green Blue (rgb)',\n name: 'rgbaColor',\n type: 'object',\n fields: [\n {name: 'r', type: 'number', title: 'Red'},\n {name: 'g', type: 'number', title: 'Green'},\n {name: 'b', type: 'number', title: 'Blue'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import '@sanity/ui/styles.css'\nimport {definePlugin} from 'sanity'\n\nimport {color, type ColorDefinition} from './schemas/color'\nimport {hslaColor} from './schemas/hslaColor'\nimport {hsvaColor} from './schemas/hsvaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\n\nexport const colorInput = definePlugin({\n name: '@sanity/color-input',\n schema: {\n types: [hslaColor, hsvaColor, rgbaColor, color],\n },\n})\n\nexport {color, hslaColor, hsvaColor, rgbaColor}\nexport {ColorInput} from './LazyColorInput'\nexport type {ColorDefinition}\nexport type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'\n"],"mappings":";;;;;;;AAEA,MAAA,aAAA,WAAA,OAAA,2BAAA;;AEMA,MAAA,SAAA,MAAA,MAAA,KAAA,MAAA,MAAA,GAAA;AAmBA,SAAA,kBAAA,IAAA;eAA2B,EAAA,KAAA,UAAA,IAKG,KAAA,OAAA,QACR,KAAA,OAAA,SAAA,CAAA,GAFTC;CACiBC,AAAAA,EAAAA,OAAAA,MAAAA,EAAAA,OAAAA,MADjB,KAAA,iBAAA;GACJ,qBAAA;GACA,aAAA;CACH,CAAA,GAFwBA,EAAAA,KAAAA,IACRC,EAAAA,KAAAA;CAJlBC,IAAAA;CADF,OAGWH,EAAAA,OAAAA,kBAFT,KAAA,oBAAA,OAAA;EACE,WAAA;EACA,OAAA;CAID,CAAA,GAJQA,EAAAA,KAAAA,gBAHX;AASF;AAEA,MAAA,QAAA,WAAA;CACE,MAAA;CACA,MAAA;CACA,OAAA;CACA,YAAA,EAAA,OAAA,WAAA;CACA,QAAA;EACE;GACE,OAAA;GACA,MAAA;GACA,MAAA;EACF;EACA;GACE,OAAA;GACA,MAAA;GACA,MAAA;EACF;EACA;GACE,OAAA;GACA,MAAA;GACA,MAAA;EACF;EACA;GACE,OAAA;GACA,MAAA;GACA,MAAA;EACF;EACA;GACE,OAAA;GACA,MAAA;GACA,MAAA;EACF;CACF;CACA,SAAA;EACE,QAAA;GACE,OAAA;GACA,OAAA;GACA,KAAA;GACA,KAAA;EACF;EACA,QAAA,EAAA,OAAA,KAAA,KAAA,SAAA;GAWE,IAAA,WAAA,OAAA;GAIA,OAHA,QAAA,WAAA,KAAA,MAAA,IAAA,CAAA,EAAA,KAAA,MAAA,IAAA,CAAA,EAAA,KAAA,MAAA,IAAA,CAAA,EAAA,KAAA,MAAA,KAAA,MAGA;IACE,OAAA,SAAA;IACU;IACV,aAAA,oBAAA,mBAAA;KAAqC;KAAY;IAAQ,CAAA;GAC3D;EACF;CACF;AACF,CAAA,GClGA,YAAA,WAAA;CACE,OAAA;CACA,MAAA;CACA,MAAA;CACA,QAAA;EACE;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAY;EACxC;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAmB;EAC/C;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAkB;EAC9C;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAc;CAC5C;AACF,CAAA,GCVA,YAAA,WAAA;CACE,OAAA;CACA,MAAA;CACA,MAAA;CACA,QAAA;EACE;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAY;EACxC;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAmB;EAC/C;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAc;EAC1C;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAc;CAC5C;AACF,CAAA,GCVA,YAAA,WAAA;CACE,OAAA;CACA,MAAA;CACA,MAAA;CACA,QAAA;EACE;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAY;EACxC;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAc;EAC1C;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAa;EACzC;GAAC,MAAA;GAAW,MAAA;GAAgB,OAAA;EAAc;CAC5C;AACF,CAAA,GCJA,aAAA,aAAA;CACE,MAAA;CACA,QAAA,EAAA,OAAA;EACU;EAAW;EAAW;EAAW;CAAK,EAAA;AAElD,CAAA"}
\ No newline at end of file
+{"version":3,"file":"index.js","names":["<Suspense fallback={fallback}>\n <ColorInputLazy {...props} />\n </Suspense>","_c","{hex, alpha}: {hex?: string; alpha?: number}","assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })","hex ?? '#000'","String(alpha ?? 1)","<div\n className={colorPreview}\n style={assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })}\n />","_c"],"sources":["../src/LazyColorInput.tsx","../src/schemas/colorPreview.css.ts","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"sourcesContent":["import {Box, Text} from '@sanity/ui'\nimport {lazy, Suspense} from 'react'\nimport {type ObjectInputProps} from 'sanity'\n\nconst ColorInputLazy = lazy(() => import('./ColorInput'))\n\nconst fallback = (\n <Box padding={3}>\n <Text>Loading color input...</Text>\n </Box>\n)\n\n/**\n * The document form suspends as one tree, and that tree includes the field\n * group tabs. Loading the picker here keeps that fallback inside the field,\n * so the tabs stay mounted and keep the width they already measured.\n */\nexport function ColorInput(props: ObjectInputProps) {\n return (\n <Suspense fallback={fallback}>\n <ColorInputLazy {...props} />\n </Suspense>\n )\n}\n","import {createVar, style} from '@vanilla-extract/css'\n\nexport const backgroundColorVar = createVar()\nexport const opacityVar = createVar()\n\nexport const colorPreview = style({\n backgroundColor: backgroundColorVar,\n opacity: opacityVar,\n position: 'absolute',\n height: '100%',\n width: '100%',\n top: 0,\n left: 0,\n})\n","import {assignInlineVars} from '@vanilla-extract/dynamic'\nimport {defineType, type ObjectDefinition} from 'sanity'\n\nimport {ColorInput} from '../LazyColorInput'\nimport {type ColorOptions} from '../types'\n\nimport {backgroundColorVar, colorPreview, opacityVar} from './colorPreview.css'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color'\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n type: typeof colorTypeName\n options?: ColorOptions\n}\n\ndeclare module 'sanity' {\n // makes type: 'color' narrow correctly when using defineType/defineField/defineArrayMember\n export interface IntrinsicDefinitions {\n color: ColorDefinition\n }\n}\n\nfunction ColorPreviewMedia({hex, alpha}: {hex?: string; alpha?: number}) {\n return (\n <div\n className={colorPreview}\n style={assignInlineVars({\n [backgroundColorVar]: hex ?? '#000',\n [opacityVar]: String(alpha ?? 1),\n })}\n />\n )\n}\n\nexport const color = defineType({\n name: colorTypeName,\n type: 'object',\n title: 'Color',\n components: {input: ColorInput},\n fields: [\n {\n title: 'Hex',\n name: 'hex',\n type: 'string',\n },\n {\n title: 'Alpha',\n name: 'alpha',\n type: 'number',\n },\n {\n title: 'Hue Saturation Lightness',\n name: 'hsl',\n type: 'hslaColor',\n },\n {\n title: 'Hue Saturation Value',\n name: 'hsv',\n type: 'hsvaColor',\n },\n {\n title: 'Red Green Blue (rgb)',\n name: 'rgb',\n type: 'rgbaColor',\n },\n ],\n preview: {\n select: {\n title: 'hex',\n alpha: 'alpha',\n hex: 'hex',\n hsl: 'hsl',\n },\n prepare({\n title,\n hex,\n hsl,\n alpha,\n }: {\n title?: string\n alpha?: number\n hex?: string\n hsl?: {h: number; s: number; l: number}\n }) {\n let subtitle = hex || 'No color set'\n if (hsl) {\n subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n }\n return {\n title: title || 'Color',\n subtitle: subtitle,\n media: () => <ColorPreviewMedia hex={hex} alpha={alpha} />,\n }\n },\n },\n})\n","import {defineType} from 'sanity'\n\nexport const hslaColor = defineType({\n title: 'Hue Saturation Lightness',\n name: 'hslaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'l', type: 'number', title: 'Lightness'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n title: 'Hue Saturation Value',\n name: 'hsvaColor',\n type: 'object',\n fields: [\n {name: 'h', type: 'number', title: 'Hue'},\n {name: 's', type: 'number', title: 'Saturation'},\n {name: 'v', type: 'number', title: 'Value'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import {defineType} from 'sanity'\n\nexport const rgbaColor = defineType({\n title: 'Red Green Blue (rgb)',\n name: 'rgbaColor',\n type: 'object',\n fields: [\n {name: 'r', type: 'number', title: 'Red'},\n {name: 'g', type: 'number', title: 'Green'},\n {name: 'b', type: 'number', title: 'Blue'},\n {name: 'a', type: 'number', title: 'Alpha'},\n ],\n})\n","import '@sanity/ui/styles.css'\nimport {definePlugin} from 'sanity'\n\nimport {color, type ColorDefinition} from './schemas/color'\nimport {hslaColor} from './schemas/hslaColor'\nimport {hsvaColor} from './schemas/hsvaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\n\nexport const colorInput = definePlugin({\n name: '@sanity/color-input',\n schema: {\n types: [hslaColor, hsvaColor, rgbaColor, color],\n },\n})\n\nexport {color, hslaColor, hsvaColor, rgbaColor}\nexport {ColorInput} from './LazyColorInput'\nexport type {ColorDefinition}\nexport type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'\n"],"mappings":"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"}
\ No newline at end of fileIndex: package/dist/index.d.ts
===================================================================
--- package/dist/index.d.ts
+++ package/dist/index.d.ts
@@ -1,8 +1,13 @@
import "@sanity/ui/styles.css";
import { ObjectDefinition, ObjectInputProps, ObjectOptions, ObjectSchemaType } from "sanity";
import "react";
-declare function ColorInput$1(props: ObjectInputProps): React.JSX.Element;
+/**
+ * The document form suspends as one tree, and that tree includes the field
+ * group tabs. Loading the picker here keeps that fallback inside the field,
+ * so the tabs stay mounted and keep the width they already measured.
+ */
+export declare function ColorInput(props: ObjectInputProps): import("react").JSX.Element;
interface HEXColor {
hex: string;
source?: string | undefined;
}
@@ -59,9 +64,9 @@
name: "color";
type: "object";
title: string;
components: {
- input: import("react").LazyExoticComponent<typeof ColorInput$1>;
+ input: typeof ColorInput;
};
fields: {
title: string;
name: string;
@@ -119,8 +124,7 @@
type: "number";
title: string;
}[];
};
-export declare const ColorInput: import("react").LazyExoticComponent<typeof ColorInput$1>;
export declare const colorInput: import("sanity").Plugin<void>;
export type { ColorDefinition, ColorInputProps, ColorOptions, ColorSchemaType, ColorValue };
//# sourceMappingURL=index.d.ts.map
\ No newline at end of file