@madebywild/sanity-color-field 0.3.18 → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Made by Wild
+
+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

@@ -1 +1,43 @@
+> [!IMPORTANT]
+> This package is primarily intended for internal use.
+
 # @madebywild/sanity-color-field
+
+Sanity field type for curated color selection with optional filtering.
+
+
+## Install
+
+```bash
+pnpm add @madebywild/sanity-color-field
+```
+
+## Configure Plugin
+
+```ts
+import { wildSanityColorFieldPlugin } from "@madebywild/sanity-color-field";
+
+export default defineConfig({
+  plugins: [
+    wildSanityColorFieldPlugin({
+      colorList: [
+        { label: "Brand Red", value: "#d92d20" },
+        { label: "Brand Blue", value: "#175cd3" },
+      ],
+    }),
+  ],
+});
+```
+
+## Use in Schema
+
+```ts
+defineField({
+  name: "themeColor",
+  type: "wild.color",
+  options: {
+    // Per-field subset of the plugin's global `colorList`.
+    whitelist: ["#d92d20", "#175cd3"],
+  },
+});
+```

package/dist/index.cjs

@@ -1,32 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-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"), color2k = require("color2k");
-function maybeGetColorValue(source) {
-  const varMatch = source.match(/^var\((.+)\)$/), cssVarName = (varMatch?.[1] ? varMatch[1].trim() : source.trim()).split(",")[0]?.trim();
-  return (cssVarName?.startsWith("--") ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() : null) || source;
-}
-function safeGetLuminance(maybeColor) {
-  try {
-    return color2k.getLuminance(maybeColor);
-  } catch (e) {
-    console.warn("Failed to get luminance", e);
-    return;
-  }
-}
+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");
 function defaultRenderSelected(value) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { style: {
+  return typeof value == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { style: {
     backgroundColor: value
-  } });
+  } }) : value;
 }
 function defaultRenderOption({
   label,
   value
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { as: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", padding: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { size: 1, style: {
+    typeof value == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { size: 1, style: {
       backgroundColor: value
-    } }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: label }) })
+    } }) : value,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, padding: 2, children: typeof label == "string" ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: label }) : label ?? value })
   ] }) });
 }
 function ColorInput(t0) {
@@ -36,33 +24,27 @@ function ColorInput(t0) {
     pluginConfig,
     ...props
   } = t0, $[0] = t0, $[1] = pluginConfig, $[2] = props) : (pluginConfig = $[1], props = $[2]);
-  const options = props.schemaType.options, colorList = pluginConfig.colorList, renderOption = pluginConfig.renderOption ?? defaultRenderOption, renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected, whitelist = options?.whitelist, blacklist = options?.blacklist, t1 = props.value?.value;
+  const options = props.schemaType.options, colorList = pluginConfig.colorList, renderOption = pluginConfig.renderOption ?? defaultRenderOption, renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected, whitelist = options?.whitelist, blacklist = options?.blacklist;
+  let t1;
+  $[3] !== props ? (t1 = (value_0) => {
+    const next = value_0 ? sanity.set(value_0) : sanity.unset();
+    return props.onChange(next);
+  }, $[3] = props, $[4] = t1) : t1 = $[4];
   let t2;
-  $[3] !== props ? (t2 = (value_0) => {
-    if (!value_0)
-      return props.onChange(sanity.unset());
-    const color = maybeGetColorValue(value_0), luminance = color ? safeGetLuminance(color) : void 0;
-    return props.onChange(sanity.set({
-      ...props.value,
-      value: value_0,
-      luminance
-    }));
-  }, $[3] = props, $[4] = t2) : t2 = $[4];
+  $[5] !== renderSelected ? (t2 = (value_1) => renderSelected(value_1), $[5] = renderSelected, $[6] = t2) : t2 = $[6];
   let t3;
-  $[5] !== renderSelected ? (t3 = (value_1) => renderSelected(value_1), $[5] = renderSelected, $[6] = t3) : t3 = $[6];
-  let t4;
-  $[7] !== renderOption ? (t4 = (t52) => {
+  $[7] !== renderOption ? (t3 = (t42) => {
     const {
       label,
       value: value_2
-    } = t52;
+    } = t42;
     return renderOption({
       label,
       value: value_2
     });
-  }, $[7] = renderOption, $[8] = t4) : t4 = $[8];
-  let t5;
-  return $[9] !== blacklist || $[10] !== colorList || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== whitelist ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(asyncAutocomplete.AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: t1, renderValue: _temp, onChange: t2, renderSelected: t3, renderOption: t4 }), $[9] = blacklist, $[10] = colorList, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = whitelist, $[16] = t5) : t5 = $[16], t5;
+  }, $[7] = renderOption, $[8] = t3) : t3 = $[8];
+  let t4;
+  return $[9] !== blacklist || $[10] !== colorList || $[11] !== props.value || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== whitelist ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(asyncAutocomplete.AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: props.value, renderValue: _temp, onChange: t1, renderSelected: t2, renderOption: t3 }), $[9] = blacklist, $[10] = colorList, $[11] = props.value, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = whitelist, $[16] = t4) : t4 = $[16], t4;
 }
 function _temp(value, opt) {
   return opt?.label ?? value;
@@ -72,23 +54,18 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = sanity.definePlugin(
   schema: {
     types: [sanity.defineType({
       name: typeName,
-      type: "object",
+      type: "string",
       title: "Color",
       description: "Select a color.",
       icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F3A8}" }),
       components: {
         input: (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { pluginConfig: config, ...props })
-      },
-      fields: [sanity.defineField({
-        name: "value",
-        type: "string"
-      }), sanity.defineField({
-        name: "luminance",
-        type: "number"
-      })]
+      }
     })]
   }
 }));
+exports.defaultRenderOption = defaultRenderOption;
+exports.defaultRenderSelected = defaultRenderSelected;
 exports.typeName = typeName;
 exports.wildSanityColorFieldPlugin = wildSanityColorFieldPlugin;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n  // The selected value from the color list.\n  value?: string;\n  // The calculated luminance of the selected color (0 to 1).\n  luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n  const varMatch = source.match(/^var\\((.+)\\)$/);\n  const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n  // Only take the first part for var(--variable, fallback) and ignore the fallback.\n  const cssVarName = inner.split(\",\")[0]?.trim();\n  const resolved = cssVarName?.startsWith(\"--\")\n    ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n    : null;\n\n  // Fallback to the source if we couldn't resolve the CSS variable.\n  return resolved || source;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n  try {\n    return getLuminance(maybeColor);\n  } catch (e) {\n    console.warn(\"Failed to get luminance\", e);\n    return undefined;\n  }\n}\n\nfunction defaultRenderSelected(value: string) {\n  return <Avatar style={{ backgroundColor: value }} />;\n}\n\nfunction defaultRenderOption({ label, value }: { label?: string; value: string }) {\n  return (\n    <Card as=\"button\">\n      <Flex align=\"center\" padding={2}>\n        <Avatar size={1} style={{ backgroundColor: value }} />\n        <Box flex={1} padding={2}>\n          <Text size={2}>{label}</Text>\n        </Box>\n      </Flex>\n    </Card>\n  );\n}\n\nfunction ColorInput({\n  pluginConfig,\n  ...props\n}: ObjectInputProps<FieldValues> & {\n  pluginConfig: PluginConfig;\n}) {\n  const options = props.schemaType.options as FieldOptions | undefined;\n  const colorList = pluginConfig.colorList;\n  const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n  const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\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?.value}\n      renderValue={(value, opt) => opt?.label ?? value}\n      onChange={(value) => {\n        if (!value) return props.onChange(unset());\n        const color = maybeGetColorValue(value);\n        const luminance = color ? safeGetLuminance(color) : undefined;\n        return props.onChange(set({ ...props.value, value, luminance }));\n      }}\n      renderSelected={(value) => {\n        return renderSelected(value);\n      }}\n      renderOption={({ label, value }) => {\n        return renderOption({ label, value });\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   * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n   * ```\n   */\n  renderSelected?: (value: string) => React.JSX.Element;\n  /** A function to render each color option in the dropdown.\n   * @example\n   * ```ts\n   * renderOption: (item) => <div>{item.label}</div>\n   * ```\n   */\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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 { defineField, 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: \"object\",\n          title: \"Color\",\n          description: \"Select a color.\",\n          icon: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput pluginConfig={config} {...props} />,\n          },\n          fields: [\n            defineField({\n              name: \"value\",\n              type: \"string\",\n            }),\n            defineField({\n              name: \"luminance\",\n              type: \"number\",\n            }),\n          ],\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["maybeGetColorValue","source","varMatch","match","cssVarName","trim","split","startsWith","getComputedStyle","document","documentElement","getPropertyValue","safeGetLuminance","maybeColor","getLuminance","e","console","warn","defaultRenderSelected","value","jsx","Avatar","backgroundColor","defaultRenderOption","label","Card","Flex","Box","Text","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","t2","value_0","onChange","unset","color","luminance","undefined","set","t3","value_1","t4","t5","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input","fields","defineField"],"mappings":"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"}
+{"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 defaultRenderSelected(value: React.ReactNode) {\n  if (typeof value === \"string\") return <Avatar style={{ backgroundColor: value }} />;\n  return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {\n  const Color = typeof value === \"string\" ? <Avatar size={1} style={{ backgroundColor: value }} /> : value;\n  const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n  return (\n    <Card as=\"button\">\n      <Flex align=\"center\" padding={2}>\n        {Color}\n        <Box flex={1} padding={2}>\n          {Label}\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 renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n  const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\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 renderSelected(value);\n      }}\n      renderOption={({ label, value }) => {\n        return renderOption({ label, value });\n      }}\n    />\n  );\n}\n\nexport { ColorInput, defaultRenderSelected, defaultRenderOption };\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   * Note: Import `defaultRenderSelected` to use the default rendering.\n   * @example\n   * ```ts\n   * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n   * ```\n   */\n  renderSelected?: (value: string) => React.JSX.Element;\n  /** A function to render each color option in the dropdown.\n   * Note: Import `defaultRenderOption` to use the default rendering.\n   * @example\n   * ```ts\n   * renderOption: (item) => <div>{item.label}</div>\n   * ```\n   */\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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, defaultRenderOption, defaultRenderSelected } 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: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput pluginConfig={config} {...props} />,\n          },\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","jsx","Avatar","backgroundColor","defaultRenderOption","label","Card","Flex","Color","Box","Label","Text","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","AsyncAutocomplete","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","Fragment","components","input"],"mappings":"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"}

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as sanity0 from "sanity";
 import { ObjectOptions, StringDefinition } from "sanity";
+import * as react7 from "react";
 /** @public */
 type ListItem = {
   value: string;
@@ -28,6 +29,7 @@ type PluginConfig = {
   colorList: ListItems;
   /**
    * A function to render the selected color value.
+   * Note: Import `defaultRenderSelected` to use the default rendering.
    * @example
    * ```ts
    * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
@@ -35,6 +37,7 @@ type PluginConfig = {
    */
   renderSelected?: (value: string) => React.JSX.Element;
   /** A function to render each color option in the dropdown.
+   * Note: Import `defaultRenderOption` to use the default rendering.
    * @example
    * ```ts
    * renderOption: (item) => <div>{item.label}</div>
@@ -65,5 +68,15 @@ declare module "sanity" {
   }
 }
 /** @public */
+declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
+/** @public */
+declare function defaultRenderOption({
+  label,
+  value
+}: {
+  label?: React.ReactNode;
+  value: React.ReactNode;
+}): react7.JSX.Element;
+/** @public */
 declare const wildSanityColorFieldPlugin: sanity0.Plugin<PluginConfig>;
-export { type FieldOptions, type PluginConfig, typeName, wildSanityColorFieldPlugin };
+export { type FieldOptions, type PluginConfig, defaultRenderOption, defaultRenderSelected, typeName, wildSanityColorFieldPlugin };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as sanity0 from "sanity";
 import { ObjectOptions, StringDefinition } from "sanity";
+import * as react7 from "react";
 /** @public */
 type ListItem = {
   value: string;
@@ -28,6 +29,7 @@ type PluginConfig = {
   colorList: ListItems;
   /**
    * A function to render the selected color value.
+   * Note: Import `defaultRenderSelected` to use the default rendering.
    * @example
    * ```ts
    * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
@@ -35,6 +37,7 @@ type PluginConfig = {
    */
   renderSelected?: (value: string) => React.JSX.Element;
   /** A function to render each color option in the dropdown.
+   * Note: Import `defaultRenderOption` to use the default rendering.
    * @example
    * ```ts
    * renderOption: (item) => <div>{item.label}</div>
@@ -65,5 +68,15 @@ declare module "sanity" {
   }
 }
 /** @public */
+declare function defaultRenderSelected(value: React.ReactNode): number | bigint | boolean | react7.JSX.Element | Iterable<react7.ReactNode> | Promise<string | number | bigint | boolean | react7.ReactPortal | react7.ReactElement<unknown, string | react7.JSXElementConstructor<any>> | Iterable<react7.ReactNode> | null | undefined> | null | undefined;
+/** @public */
+declare function defaultRenderOption({
+  label,
+  value
+}: {
+  label?: React.ReactNode;
+  value: React.ReactNode;
+}): react7.JSX.Element;
+/** @public */
 declare const wildSanityColorFieldPlugin: sanity0.Plugin<PluginConfig>;
-export { type FieldOptions, type PluginConfig, typeName, wildSanityColorFieldPlugin };
+export { type FieldOptions, type PluginConfig, defaultRenderOption, defaultRenderSelected, typeName, wildSanityColorFieldPlugin };

package/dist/index.js

@@ -1,35 +1,22 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { unset, set, definePlugin, defineType, defineField } from "sanity";
+import { set, unset, definePlugin, defineType } from "sanity";
 import { c } from "react/compiler-runtime";
 import { AsyncAutocomplete } from "@madebywild/sanity-utils/async-autocomplete";
 import { Avatar, Card, Flex, Box, Text } from "@sanity/ui";
-import { getLuminance } from "color2k";
-function maybeGetColorValue(source) {
-  const varMatch = source.match(/^var\((.+)\)$/), cssVarName = (varMatch?.[1] ? varMatch[1].trim() : source.trim()).split(",")[0]?.trim();
-  return (cssVarName?.startsWith("--") ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() : null) || source;
-}
-function safeGetLuminance(maybeColor) {
-  try {
-    return getLuminance(maybeColor);
-  } catch (e) {
-    console.warn("Failed to get luminance", e);
-    return;
-  }
-}
 function defaultRenderSelected(value) {
-  return /* @__PURE__ */ jsx(Avatar, { style: {
+  return typeof value == "string" ? /* @__PURE__ */ jsx(Avatar, { style: {
     backgroundColor: value
-  } });
+  } }) : value;
 }
 function defaultRenderOption({
   label,
   value
 }) {
   return /* @__PURE__ */ jsx(Card, { as: "button", children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 2, children: [
-    /* @__PURE__ */ jsx(Avatar, { size: 1, style: {
+    typeof value == "string" ? /* @__PURE__ */ jsx(Avatar, { size: 1, style: {
       backgroundColor: value
-    } }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 2, children: label }) })
+    } }) : value,
+    /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: typeof label == "string" ? /* @__PURE__ */ jsx(Text, { size: 2, children: label }) : label ?? value })
   ] }) });
 }
 function ColorInput(t0) {
@@ -39,33 +26,27 @@ function ColorInput(t0) {
     pluginConfig,
     ...props
   } = t0, $[0] = t0, $[1] = pluginConfig, $[2] = props) : (pluginConfig = $[1], props = $[2]);
-  const options = props.schemaType.options, colorList = pluginConfig.colorList, renderOption = pluginConfig.renderOption ?? defaultRenderOption, renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected, whitelist = options?.whitelist, blacklist = options?.blacklist, t1 = props.value?.value;
+  const options = props.schemaType.options, colorList = pluginConfig.colorList, renderOption = pluginConfig.renderOption ?? defaultRenderOption, renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected, whitelist = options?.whitelist, blacklist = options?.blacklist;
+  let t1;
+  $[3] !== props ? (t1 = (value_0) => {
+    const next = value_0 ? set(value_0) : unset();
+    return props.onChange(next);
+  }, $[3] = props, $[4] = t1) : t1 = $[4];
   let t2;
-  $[3] !== props ? (t2 = (value_0) => {
-    if (!value_0)
-      return props.onChange(unset());
-    const color = maybeGetColorValue(value_0), luminance = color ? safeGetLuminance(color) : void 0;
-    return props.onChange(set({
-      ...props.value,
-      value: value_0,
-      luminance
-    }));
-  }, $[3] = props, $[4] = t2) : t2 = $[4];
+  $[5] !== renderSelected ? (t2 = (value_1) => renderSelected(value_1), $[5] = renderSelected, $[6] = t2) : t2 = $[6];
   let t3;
-  $[5] !== renderSelected ? (t3 = (value_1) => renderSelected(value_1), $[5] = renderSelected, $[6] = t3) : t3 = $[6];
-  let t4;
-  $[7] !== renderOption ? (t4 = (t52) => {
+  $[7] !== renderOption ? (t3 = (t42) => {
     const {
       label,
       value: value_2
-    } = t52;
+    } = t42;
     return renderOption({
       label,
       value: value_2
     });
-  }, $[7] = renderOption, $[8] = t4) : t4 = $[8];
-  let t5;
-  return $[9] !== blacklist || $[10] !== colorList || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== whitelist ? (t5 = /* @__PURE__ */ jsx(AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: t1, renderValue: _temp, onChange: t2, renderSelected: t3, renderOption: t4 }), $[9] = blacklist, $[10] = colorList, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = whitelist, $[16] = t5) : t5 = $[16], t5;
+  }, $[7] = renderOption, $[8] = t3) : t3 = $[8];
+  let t4;
+  return $[9] !== blacklist || $[10] !== colorList || $[11] !== props.value || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== whitelist ? (t4 = /* @__PURE__ */ jsx(AsyncAutocomplete, { placeholder: "Select color", noOptionsPlaceholder: "No colors found", listItems: colorList, whitelist, blacklist, value: props.value, renderValue: _temp, onChange: t1, renderSelected: t2, renderOption: t3 }), $[9] = blacklist, $[10] = colorList, $[11] = props.value, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = whitelist, $[16] = t4) : t4 = $[16], t4;
 }
 function _temp(value, opt) {
   return opt?.label ?? value;
@@ -75,24 +56,19 @@ const typeName = "wild.color", wildSanityColorFieldPlugin = definePlugin((config
   schema: {
     types: [defineType({
       name: typeName,
-      type: "object",
+      type: "string",
       title: "Color",
       description: "Select a color.",
       icon: () => /* @__PURE__ */ jsx(Fragment, { children: "\u{1F3A8}" }),
       components: {
         input: (props) => /* @__PURE__ */ jsx(ColorInput, { pluginConfig: config, ...props })
-      },
-      fields: [defineField({
-        name: "value",
-        type: "string"
-      }), defineField({
-        name: "luminance",
-        type: "number"
-      })]
+      }
     })]
   }
 }));
 export {
+  defaultRenderOption,
+  defaultRenderSelected,
   typeName,
   wildSanityColorFieldPlugin
 };

package/dist/index.js.map

@@ -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 { getLuminance } from \"color2k\";\nimport { type ObjectInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\ntype FieldValues = {\n  // The selected value from the color list.\n  value?: string;\n  // The calculated luminance of the selected color (0 to 1).\n  luminance?: number;\n};\n\n// Maybe parse CSS variable and return its computed value.\n// Handles var(--variable), --variable.\n// If the input is not a CSS variable, returns it as-is.\nfunction maybeGetColorValue(source: string) {\n  const varMatch = source.match(/^var\\((.+)\\)$/);\n  const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();\n\n  // Only take the first part for var(--variable, fallback) and ignore the fallback.\n  const cssVarName = inner.split(\",\")[0]?.trim();\n  const resolved = cssVarName?.startsWith(\"--\")\n    ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()\n    : null;\n\n  // Fallback to the source if we couldn't resolve the CSS variable.\n  return resolved || source;\n}\n\n// The getLuminance function can throw for invalid colors.\nfunction safeGetLuminance(maybeColor: string) {\n  try {\n    return getLuminance(maybeColor);\n  } catch (e) {\n    console.warn(\"Failed to get luminance\", e);\n    return undefined;\n  }\n}\n\nfunction defaultRenderSelected(value: string) {\n  return <Avatar style={{ backgroundColor: value }} />;\n}\n\nfunction defaultRenderOption({ label, value }: { label?: string; value: string }) {\n  return (\n    <Card as=\"button\">\n      <Flex align=\"center\" padding={2}>\n        <Avatar size={1} style={{ backgroundColor: value }} />\n        <Box flex={1} padding={2}>\n          <Text size={2}>{label}</Text>\n        </Box>\n      </Flex>\n    </Card>\n  );\n}\n\nfunction ColorInput({\n  pluginConfig,\n  ...props\n}: ObjectInputProps<FieldValues> & {\n  pluginConfig: PluginConfig;\n}) {\n  const options = props.schemaType.options as FieldOptions | undefined;\n  const colorList = pluginConfig.colorList;\n  const renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n  const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\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?.value}\n      renderValue={(value, opt) => opt?.label ?? value}\n      onChange={(value) => {\n        if (!value) return props.onChange(unset());\n        const color = maybeGetColorValue(value);\n        const luminance = color ? safeGetLuminance(color) : undefined;\n        return props.onChange(set({ ...props.value, value, luminance }));\n      }}\n      renderSelected={(value) => {\n        return renderSelected(value);\n      }}\n      renderOption={({ label, value }) => {\n        return renderOption({ label, value });\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   * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n   * ```\n   */\n  renderSelected?: (value: string) => React.JSX.Element;\n  /** A function to render each color option in the dropdown.\n   * @example\n   * ```ts\n   * renderOption: (item) => <div>{item.label}</div>\n   * ```\n   */\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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 { defineField, 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: \"object\",\n          title: \"Color\",\n          description: \"Select a color.\",\n          icon: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput pluginConfig={config} {...props} />,\n          },\n          fields: [\n            defineField({\n              name: \"value\",\n              type: \"string\",\n            }),\n            defineField({\n              name: \"luminance\",\n              type: \"number\",\n            }),\n          ],\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };\n"],"names":["maybeGetColorValue","source","varMatch","match","cssVarName","trim","split","startsWith","getComputedStyle","document","documentElement","getPropertyValue","safeGetLuminance","maybeColor","getLuminance","e","console","warn","defaultRenderSelected","value","backgroundColor","defaultRenderOption","label","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","t2","value_0","onChange","unset","color","luminance","undefined","set","t3","value_1","t4","t5","value_2","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input","fields","defineField"],"mappings":"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"}
+{"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 defaultRenderSelected(value: React.ReactNode) {\n  if (typeof value === \"string\") return <Avatar style={{ backgroundColor: value }} />;\n  return value;\n}\n\n/** @public */\nfunction defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {\n  const Color = typeof value === \"string\" ? <Avatar size={1} style={{ backgroundColor: value }} /> : value;\n  const Label = typeof label === \"string\" ? <Text size={2}>{label}</Text> : (label ?? value);\n\n  return (\n    <Card as=\"button\">\n      <Flex align=\"center\" padding={2}>\n        {Color}\n        <Box flex={1} padding={2}>\n          {Label}\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 renderOption = pluginConfig.renderOption ?? defaultRenderOption;\n  const renderSelected = pluginConfig.renderSelected ?? defaultRenderSelected;\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 renderSelected(value);\n      }}\n      renderOption={({ label, value }) => {\n        return renderOption({ label, value });\n      }}\n    />\n  );\n}\n\nexport { ColorInput, defaultRenderSelected, defaultRenderOption };\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   * Note: Import `defaultRenderSelected` to use the default rendering.\n   * @example\n   * ```ts\n   * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />\n   * ```\n   */\n  renderSelected?: (value: string) => React.JSX.Element;\n  /** A function to render each color option in the dropdown.\n   * Note: Import `defaultRenderOption` to use the default rendering.\n   * @example\n   * ```ts\n   * renderOption: (item) => <div>{item.label}</div>\n   * ```\n   */\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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, defaultRenderOption, defaultRenderSelected } 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: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput pluginConfig={config} {...props} />,\n          },\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };\n"],"names":["defaultRenderSelected","value","backgroundColor","defaultRenderOption","label","Color","Label","ColorInput","t0","$","_c","pluginConfig","props","options","schemaType","colorList","renderOption","renderSelected","whitelist","blacklist","t1","value_0","next","set","unset","onChange","t2","value_1","t3","t4","value_2","_temp","opt","typeName","wildSanityColorFieldPlugin","definePlugin","config","name","schema","types","defineType","type","title","description","icon","components","input"],"mappings":";;;;;AAMA,SAASA,sBAAsBC,OAAwB;AACrD,SAAI,OAAOA,SAAU,WAAiB,oBAAC,UAAO,OAAO;AAAA,IAAEC,iBAAiBD;AAAAA,EAAAA,GAAQ,IACzEA;AACT;AAGA,SAASE,oBAAoB;AAAA,EAAEC;AAAAA,EAAOH;AAA2D,GAAG;AAIlG,SACE,oBAAC,QAAK,IAAG,UACP,+BAAC,MAAA,EAAK,OAAM,UAAS,SAAS,GAC3BI,UAAAA;AAAAA,IANO,OAAOJ,SAAU,+BAAY,QAAA,EAAO,MAAM,GAAG,OAAO;AAAA,MAAEC,iBAAiBD;AAAAA,IAAAA,GAAQ,IAAMA;AAAAA,wBAO5F,KAAA,EAAI,MAAM,GAAG,SAAS,GACpBK,UAPK,OAAOF,SAAU,+BAAY,MAAA,EAAK,MAAM,GAAIA,UAAAA,MAAAA,CAAM,IAAWA,SAASH,MAAAA,CAQ9E;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,SAAAM,WAAAC,IAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA;AAAA,MAAAC,cAAAC;AAAAH,WAAAD,MAAoB;AAAA,IAAAG;AAAAA,IAAA,GAAAC;AAAAA,EAAAA,IAAAJ,IAKnBC,OAAAD,IAAAC,OAAAE,cAAAF,OAAAG,UAAAD,eAAAF,EAAA,CAAA,GAAAG,QAAAH,EAAA,CAAA;AACC,QAAAI,UAAgBD,MAAKE,WAAWD,SAChCE,YAAkBJ,aAAYI,WAC9BC,eAAqBL,aAAYK,gBAAZb,qBACrBc,iBAAuBN,aAAYM,kBAAZjB,uBAEvBkB,YAAkBL,SAAOK,WACzBC,YAAkBN,SAAOM;AAAY,MAAAC;AAAAX,WAAAG,SAWvBQ,KAAAC,CAAAA,YAAA;AACR,UAAAC,OAAarB,UAAQsB,IAAItB,OAAe,IAANuB,MAAAA;AAAQ,WACnCZ,MAAKa,SAAUH,IAAI;AAAA,EAAC,GAC5Bb,OAAAG,OAAAH,OAAAW,MAAAA,KAAAX,EAAA,CAAA;AAAA,MAAAiB;AAAAjB,WAAAQ,kBACeS,KAAAC,CAAAA,YACPV,eAAehB,OAAK,GAC5BQ,OAAAQ,gBAAAR,OAAAiB,MAAAA,KAAAjB,EAAA,CAAA;AAAA,MAAAmB;AAAAnB,WAAAO,gBACaY,KAAAC,CAAAA,QAAA;AAAC,UAAA;AAAA,MAAAzB;AAAAA,MAAAH,OAAA6B;AAAAA,IAAAA,IAAAD;AAAgB,WACtBb,aAAa;AAAA,MAAAZ;AAAAA,MAAAH,OAASA;AAAAA,IAAAA,CAAO;AAAA,EAAC,GACtCQ,OAAAO,cAAAP,OAAAmB,MAAAA,KAAAnB,EAAA,CAAA;AAAA,MAAAoB;AAAA,SAAApB,EAAA,CAAA,MAAAU,aAAAV,EAAA,EAAA,MAAAM,aAAAN,EAAA,EAAA,MAAAG,MAAAX,SAAAQ,EAAA,EAAA,MAAAW,MAAAX,EAAA,EAAA,MAAAiB,MAAAjB,EAAA,EAAA,MAAAmB,MAAAnB,EAAA,EAAA,MAAAS,aAjBHW,KAAA,oBAAC,mBAAA,EACa,aAAA,gBACS,sBAAA,mBACVd,sBACAG,WACAC,WACJ,OAAAP,MAAKX,OACC,aAAA8B,OACH,UAAAX,IAIM,gBAAAM,IAGF,cAAAE,GAAAA,CAEb,GACDnB,OAAAU,WAAAV,QAAAM,WAAAN,EAAA,EAAA,IAAAG,MAAAX,OAAAQ,QAAAW,IAAAX,QAAAiB,IAAAjB,QAAAmB,IAAAnB,QAAAS,WAAAT,QAAAoB,MAAAA,KAAApB,EAAA,EAAA,GAlBFoB;AAkBE;AAjCN,SAAAE,MAAA9B,OAAA+B,KAAA;AAAA,SAsBmCA,KAAG5B,SAAHH;AAAmB;AC9C/C,MAAMgC,WAAW,cCClBC,6BAA6BC,aAA4BC,CAAAA,YACtD;AAAA,EACLC,MAAM;AAAA,EACNC,QAAQ;AAAA,IACNC,OAAO,CACLC,WAAW;AAAA,MACTH,MAAMJ;AAAAA,MACNQ,MAAM;AAAA,MACNC,OAAO;AAAA,MACPC,aAAa;AAAA,MACbC,MAAMA,MAAM,oBAAA,UAAA,EAAE,UAAA,YAAA,CAAE;AAAA,MAChBC,YAAY;AAAA,QACVC,OAAQlC,CAAAA,UAAU,oBAAC,cAAW,cAAcwB,QAAQ,GAAIxB,MAAAA,CAAM;AAAA,MAAA;AAAA,IAChE,CACD,CAAC;AAAA,EAAA;AAGR,EACD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madebywild/sanity-color-field",
-  "version": "0.3.18",
+  "version": "1.0.0",
   "type": "module",
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -21,22 +21,21 @@
     "access": "public"
   },
   "dependencies": {
-    "color2k": "2.0.3",
-    "@madebywild/sanity-utils": "0.3.16"
+    "@madebywild/sanity-utils": "1.0.0"
   },
   "peerDependencies": {
     "@sanity/ui": "^3.1",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "^19.2.2",
+    "react-dom": "^19.2.2",
     "sanity": "^4.17 || ^5.0.0"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^9.2",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "babel-plugin-react-compiler": "1.0.0",
-    "react": "^19",
-    "react-dom": "^19",
+    "react": "^19.2.2",
+    "react-dom": "^19.2.2",
     "sanity": "^4.17 || ^5.0.0",
     "typescript": "^5"
   },

package/src/index.tsx

@@ -1,5 +1,5 @@
-import { defineField, definePlugin, defineType } from "sanity";
-import { ColorInput } from "./input";
+import { definePlugin, defineType } from "sanity";
+import { ColorInput, defaultRenderOption, defaultRenderSelected } from "./input";
 import { type FieldOptions, type PluginConfig, typeName } from "./types";
 
 /** @public */
@@ -10,27 +10,17 @@ const wildSanityColorFieldPlugin = definePlugin<PluginConfig>((config) => {
       types: [
         defineType({
           name: typeName,
-          type: "object",
+          type: "string",
           title: "Color",
           description: "Select a color.",
           icon: () => <>🎨</>,
           components: {
             input: (props) => <ColorInput pluginConfig={config} {...props} />,
           },
-          fields: [
-            defineField({
-              name: "value",
-              type: "string",
-            }),
-            defineField({
-              name: "luminance",
-              type: "number",
-            }),
-          ],
         }),
       ],
     },
   };
 });
 
-export { wildSanityColorFieldPlugin, typeName, type PluginConfig, type FieldOptions };
+export { wildSanityColorFieldPlugin, typeName, defaultRenderOption, defaultRenderSelected, type PluginConfig, type FieldOptions };

package/src/input.tsx

@@ -1,54 +1,25 @@
 import { AsyncAutocomplete } from "@madebywild/sanity-utils/async-autocomplete";
 import { Avatar, Box, Card, Flex, Text } from "@sanity/ui";
-import { getLuminance } from "color2k";
-import { type ObjectInputProps, set, unset } from "sanity";
+import { type StringInputProps, set, unset } from "sanity";
 import type { FieldOptions, PluginConfig } from "./types";
 
-type FieldValues = {
-  // The selected value from the color list.
-  value?: string;
-  // The calculated luminance of the selected color (0 to 1).
-  luminance?: number;
-};
-
-// Maybe parse CSS variable and return its computed value.
-// Handles var(--variable), --variable.
-// If the input is not a CSS variable, returns it as-is.
-function maybeGetColorValue(source: string) {
-  const varMatch = source.match(/^var\((.+)\)$/);
-  const inner = varMatch?.[1] ? varMatch[1].trim() : source.trim();
-
-  // Only take the first part for var(--variable, fallback) and ignore the fallback.
-  const cssVarName = inner.split(",")[0]?.trim();
-  const resolved = cssVarName?.startsWith("--")
-    ? getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim()
-    : null;
-
-  // Fallback to the source if we couldn't resolve the CSS variable.
-  return resolved || source;
+/** @public */
+function defaultRenderSelected(value: React.ReactNode) {
+  if (typeof value === "string") return <Avatar style={{ backgroundColor: value }} />;
+  return value;
 }
 
-// The getLuminance function can throw for invalid colors.
-function safeGetLuminance(maybeColor: string) {
-  try {
-    return getLuminance(maybeColor);
-  } catch (e) {
-    console.warn("Failed to get luminance", e);
-    return undefined;
-  }
-}
-
-function defaultRenderSelected(value: string) {
-  return <Avatar style={{ backgroundColor: value }} />;
-}
+/** @public */
+function defaultRenderOption({ label, value }: { label?: React.ReactNode; value: React.ReactNode }) {
+  const Color = typeof value === "string" ? <Avatar size={1} style={{ backgroundColor: value }} /> : value;
+  const Label = typeof label === "string" ? <Text size={2}>{label}</Text> : (label ?? value);
 
-function defaultRenderOption({ label, value }: { label?: string; value: string }) {
   return (
     <Card as="button">
       <Flex align="center" padding={2}>
-        <Avatar size={1} style={{ backgroundColor: value }} />
+        {Color}
         <Box flex={1} padding={2}>
-          <Text size={2}>{label}</Text>
+          {Label}
         </Box>
       </Flex>
     </Card>
@@ -58,7 +29,7 @@ function defaultRenderOption({ label, value }: { label?: string; value: string }
 function ColorInput({
   pluginConfig,
   ...props
-}: ObjectInputProps<FieldValues> & {
+}: StringInputProps & {
   pluginConfig: PluginConfig;
 }) {
   const options = props.schemaType.options as FieldOptions | undefined;
@@ -76,13 +47,11 @@ function ColorInput({
       listItems={colorList}
       whitelist={whitelist}
       blacklist={blacklist}
-      value={props.value?.value}
+      value={props.value}
       renderValue={(value, opt) => opt?.label ?? value}
       onChange={(value) => {
-        if (!value) return props.onChange(unset());
-        const color = maybeGetColorValue(value);
-        const luminance = color ? safeGetLuminance(color) : undefined;
-        return props.onChange(set({ ...props.value, value, luminance }));
+        const next = value ? set(value) : unset();
+        return props.onChange(next);
       }}
       renderSelected={(value) => {
         return renderSelected(value);
@@ -94,4 +63,4 @@ function ColorInput({
   );
 }
 
-export { ColorInput };
+export { ColorInput, defaultRenderSelected, defaultRenderOption };

package/src/types.tsx

@@ -22,6 +22,7 @@ export type PluginConfig = {
   colorList: ListItems;
   /**
    * A function to render the selected color value.
+   * Note: Import `defaultRenderSelected` to use the default rendering.
    * @example
    * ```ts
    * renderSelected: (value) => <div style={{ backgroundColor: value, width: 20, height: 20 }} />
@@ -29,6 +30,7 @@ export type PluginConfig = {
    */
   renderSelected?: (value: string) => React.JSX.Element;
   /** A function to render each color option in the dropdown.
+   * Note: Import `defaultRenderOption` to use the default rendering.
    * @example
    * ```ts
    * renderOption: (item) => <div>{item.label}</div>