@madebywild/sanity-color-field 3.0.0 → 3.1.0
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.
- package/README.md +6 -4
- package/dist/index.cjs +2 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -3
- package/src/index.tsx +2 -1
package/README.md
CHANGED
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
Sanity field type for curated color selection with optional filtering.
|
|
7
7
|
|
|
8
|
-
|
|
9
8
|
## Install
|
|
10
9
|
|
|
11
10
|
```bash
|
|
@@ -15,6 +14,7 @@ pnpm add @madebywild/sanity-color-field
|
|
|
15
14
|
## Configure Plugin
|
|
16
15
|
|
|
17
16
|
```ts
|
|
17
|
+
import { defineConfig } from "sanity";
|
|
18
18
|
import { wildSanityColorFieldPlugin } from "@madebywild/sanity-color-field";
|
|
19
19
|
|
|
20
20
|
export default defineConfig({
|
|
@@ -23,9 +23,9 @@ export default defineConfig({
|
|
|
23
23
|
colorList: [
|
|
24
24
|
{ label: "Brand Red", value: "#d92d20" },
|
|
25
25
|
{ label: "Brand Blue", value: "#175cd3" },
|
|
26
|
+
{ label: "Neutral", value: "#667085" },
|
|
26
27
|
],
|
|
27
|
-
|
|
28
|
-
renderValue: (value) => <span style={{ backgroundColor: value }} />,
|
|
28
|
+
renderValue: (value) => <span style={{ backgroundColor: value, width: 16, height: 16, borderRadius: 999 }} />,
|
|
29
29
|
}),
|
|
30
30
|
],
|
|
31
31
|
});
|
|
@@ -34,12 +34,14 @@ export default defineConfig({
|
|
|
34
34
|
## Use in Schema
|
|
35
35
|
|
|
36
36
|
```ts
|
|
37
|
+
import { defineField } from "sanity";
|
|
38
|
+
|
|
37
39
|
defineField({
|
|
38
40
|
name: "themeColor",
|
|
39
41
|
type: "wild.color",
|
|
40
42
|
options: {
|
|
41
|
-
// Per-field subset of the plugin's global `colorList`.
|
|
42
43
|
whitelist: ["#d92d20", "#175cd3"],
|
|
44
|
+
blacklist: ["#667085"],
|
|
43
45
|
},
|
|
44
46
|
});
|
|
45
47
|
```
|
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: !0 });
|
|
3
|
-
var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), compilerRuntime = require("react/compiler-runtime"), asyncAutocomplete = require("@madebywild/sanity-utils/async-autocomplete"), ui = require("@sanity/ui");
|
|
3
|
+
var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), sanity = require("sanity"), compilerRuntime = require("react/compiler-runtime"), asyncAutocomplete = require("@madebywild/sanity-utils/async-autocomplete"), ui = require("@sanity/ui");
|
|
4
4
|
function defaultRenderValuePreview(value) {
|
|
5
5
|
return /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { style: {
|
|
6
6
|
backgroundColor: value
|
|
@@ -55,7 +55,7 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = sanity.definePlugin(
|
|
|
55
55
|
type: "string",
|
|
56
56
|
title: "Color",
|
|
57
57
|
description: "Select a color.",
|
|
58
|
-
icon:
|
|
58
|
+
icon: icons.ColorWheelIcon,
|
|
59
59
|
components: {
|
|
60
60
|
input: (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { pluginConfig: config, ...props })
|
|
61
61
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValue = pluginConfig.renderValue ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValue(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValue(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValue: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValue?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon:
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValue = pluginConfig.renderValue ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValue(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValue(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValue: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValue?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { ColorWheelIcon } from \"@sanity/icons\";\nimport { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: ColorWheelIcon,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderValuePreview","value","jsx","Avatar","backgroundColor","defaultRenderOption","label","preview","Card","Flex","Box","Text","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderValue","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","t3","value_1","t4","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","ColorWheelIcon","components","input"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { jsx, jsxs
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ColorWheelIcon } from "@sanity/icons";
|
|
2
3
|
import { set, unset, definePlugin, defineType } from "sanity";
|
|
3
4
|
import { c } from "react/compiler-runtime";
|
|
4
5
|
import { AsyncAutocomplete } from "@madebywild/sanity-utils/async-autocomplete";
|
|
@@ -57,7 +58,7 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = definePlugin((config
|
|
|
57
58
|
type: "string",
|
|
58
59
|
title: "Color",
|
|
59
60
|
description: "Select a color.",
|
|
60
|
-
icon:
|
|
61
|
+
icon: ColorWheelIcon,
|
|
61
62
|
components: {
|
|
62
63
|
input: (props) => /* @__PURE__ */ jsx(ColorInput, { pluginConfig: config, ...props })
|
|
63
64
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValue = pluginConfig.renderValue ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValue(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValue(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValue: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValue?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon:
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.tsx","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\n/** @public */\nfunction defaultRenderValuePreview(value: string) {\n return <Avatar style={{ backgroundColor: value }} />;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value, preview }: { label?: React.ReactNode; value: string; preview: React.ReactNode }) {\n return (\n <Card as=\"button\">\n <Flex align=\"center\" padding={2}>\n {preview}\n <Box flex={1} padding={2}>\n <Text size={2}>{label ?? value}</Text>\n </Box>\n </Flex>\n </Card>\n );\n}\n\nfunction ColorInput({\n pluginConfig,\n ...props\n}: StringInputProps & {\n pluginConfig: PluginConfig;\n}) {\n const options = props.schemaType.options as FieldOptions | undefined;\n const colorList = pluginConfig.colorList;\n const renderValue = pluginConfig.renderValue ?? defaultRenderValuePreview;\n\n const whitelist = options?.whitelist;\n const blacklist = options?.blacklist;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n whitelist={whitelist}\n blacklist={blacklist}\n value={props.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n const next = value ? set(value) : unset();\n return props.onChange(next);\n }}\n renderSelected={(value) => {\n return renderValue(value);\n }}\n renderOption={({ label, value }) => {\n const preview = renderValue(value);\n return defaultRenderOption({ label, value, preview });\n }}\n />\n );\n}\n\nexport { ColorInput };\n","import type { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { ObjectOptions, StringDefinition } from \"sanity\";\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\n\n/** @public */\nexport type PluginConfig = {\n /**\n * A list of colors to show in the color picker.\n * In addition to the value, the field will also calculate\n * and store the color's luminance in a separate field.\n * @example\n * ```ts\n * colorList: [\n * { label: \"Red\", value: \"#ff0000\" },\n * { label: \"Green\", value: \"#00ff00\" },\n * { label: \"Blue\", value: \"#0000ff\" },\n * ]\n * ```\n */\n colorList: ListItems;\n /**\n * A function to render the selected color value.\n * @example\n * ```ts\n * renderValue: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n * ```\n */\n renderValue?: (value: string) => React.ReactNode;\n};\n\n/** @public */\nexport type FieldOptions = ObjectOptions & {\n /**\n * Whitelist colors by their values.\n */\n whitelist?: string[];\n /**\n * Blacklist colors by their values.\n */\n blacklist?: string[];\n};\n\n// Add the custom field definition to Sanity's intrinsic definitions\n// so that type checking works correctly when using this field type.\ndeclare module \"sanity\" {\n export interface IntrinsicDefinitions {\n [typeName]: Omit<StringDefinition, \"type\" | \"fields\" | \"options\" | \"components\"> & {\n type: typeof typeName;\n options?: FieldOptions;\n };\n }\n}\n","import { ColorWheelIcon } from \"@sanity/icons\";\nimport { definePlugin, defineType } from \"sanity\";\nimport { ColorInput } from \"./input\";\nimport { type FieldOptions, type PluginConfig, typeName } from \"./types\";\n\n/** @public */\nconst wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {\n return {\n name: \"@madebywild/sanity-color-field\",\n schema: {\n types: [\n defineType({\n name: typeName,\n type: \"string\",\n title: \"Color\",\n description: \"Select a color.\",\n icon: ColorWheelIcon,\n components: {\n input: (props) => <ColorInput pluginConfig={config} {...props} />,\n },\n }),\n ],\n },\n };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderValuePreview","value","backgroundColor","defaultRenderOption","label","preview","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderValue","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","t3","value_1","t4","value_2","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","ColorWheelIcon","components","input"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@madebywild/sanity-color-field",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
|
-
"license": "
|
|
6
|
+
"license": "MIT",
|
|
7
7
|
"browserslist": "extends @sanity/browserslist-config",
|
|
8
8
|
"exports": {
|
|
9
9
|
"./package.json": "./package.json",
|
|
@@ -21,15 +21,17 @@
|
|
|
21
21
|
"access": "public"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@madebywild/sanity-utils": "1.
|
|
24
|
+
"@madebywild/sanity-utils": "1.1.0"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
+
"@sanity/icons": "^3.7.4",
|
|
27
28
|
"@sanity/ui": "^3.1",
|
|
28
29
|
"react": "^19.2.2",
|
|
29
30
|
"react-dom": "^19.2.2",
|
|
30
31
|
"sanity": "^4.17 || ^5.0.0"
|
|
31
32
|
},
|
|
32
33
|
"devDependencies": {
|
|
34
|
+
"@sanity/icons": "^3.7.4",
|
|
33
35
|
"@sanity/pkg-utils": "^9.2",
|
|
34
36
|
"@types/react": "^19.2.2",
|
|
35
37
|
"@types/react-dom": "^19.2.2",
|
package/src/index.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ColorWheelIcon } from "@sanity/icons";
|
|
1
2
|
import { definePlugin, defineType } from "sanity";
|
|
2
3
|
import { ColorInput } from "./input";
|
|
3
4
|
import { type FieldOptions, type PluginConfig, typeName } from "./types";
|
|
@@ -13,7 +14,7 @@ const wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {
|
|
|
13
14
|
type: "string",
|
|
14
15
|
title: "Color",
|
|
15
16
|
description: "Select a color.",
|
|
16
|
-
icon:
|
|
17
|
+
icon: ColorWheelIcon,
|
|
17
18
|
components: {
|
|
18
19
|
input: (props) => <ColorInput pluginConfig={config} {...props} />,
|
|
19
20
|
},
|