@madebywild/sanity-color-field 0.0.4 → 0.0.5

package/dist/index.cjs

@@ -1,8 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-require("react/jsx-runtime");
-require("sanity");
-var index = require("./_chunks-cjs/index.cjs");
-exports.typeName = index.typeName;
-exports.wildSanityColorFieldPlugin = index.wildSanityColorFieldPlugin;
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), sanityUtils = require("@madebywild/sanity-utils"), ui = require("@sanity/ui");
+function ColorInput({
+  config,
+  schemaType,
+  onChange,
+  value
+}) {
+  const options = schemaType.options, colorList = options?.colorList ?? config.colorList, renderOption = options?.renderOption ?? config.renderOption, renderSelected = options?.renderSelected ?? config.renderSelected;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sanityUtils.AsyncAutocomplete,
+    {
+      defaultValue: value,
+      placeholder: "Select color",
+      listItems: colorList,
+      renderValue: (value2, opt) => opt?.label ?? value2,
+      onChange: (value2) => {
+        const next = value2 ? sanity.set(value2) : sanity.unset();
+        return onChange(next);
+      },
+      renderSelected: (value2) => renderSelected ? renderSelected(value2) : /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { style: { backgroundColor: value2 } }),
+      renderOption: ({ label, value: value2 }) => renderOption ? renderOption({ label, value: value2 }) : /* @__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: { backgroundColor: value2 } }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 2, children: label }) })
+      ] }) })
+    }
+  );
+}
+const typeName = "wild.color", wildSanityColorFieldPlugin = sanity.definePlugin((config) => ({
+  name: "@madebywild/sanity-color-field",
+  schema: {
+    types: [
+      sanity.defineType({
+        name: typeName,
+        type: "string",
+        title: "Color",
+        description: "Select a color.",
+        icon: () => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u{1F3A8}" }),
+        components: {
+          input: (props) => /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { config, ...props })
+        }
+      })
+    ]
+  }
+}));
+exports.typeName = typeName;
+exports.wildSanityColorFieldPlugin = wildSanityColorFieldPlugin;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/input.tsx","../src/types.ts","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\nfunction ColorInput({\n  config,\n  schemaType,\n  onChange,\n  value,\n}: StringInputProps & {\n  config: PluginConfig;\n}) {\n  const options = schemaType.options as FieldOptions | undefined;\n  const colorList = options?.colorList ?? config.colorList;\n  const renderOption = options?.renderOption ?? config.renderOption;\n  const renderSelected = options?.renderSelected ?? config.renderSelected;\n\n  return (\n    <AsyncAutocomplete\n      defaultValue={value}\n      placeholder=\"Select color\"\n      listItems={colorList}\n      renderValue={(value, opt) => opt?.label ?? value}\n      onChange={(value) => {\n        const next = value ? set(value) : unset();\n        return onChange(next);\n      }}\n      renderSelected={(value) => {\n        if (renderSelected) return renderSelected(value);\n        return <Avatar style={{ backgroundColor: value }} />;\n      }}\n      renderOption={({ label, value }) => {\n        if (renderOption) return renderOption({ label, value });\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    />\n  );\n}\n\nexport { ColorInput };\n","import type { ListItemsGetter } from \"@madebywild/sanity-utils\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/** @public */\nexport type PluginConfig = {\n  colorList: ListItemsGetter;\n  renderSelected?: (value: string) => React.JSX.Element;\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = StringOptions & {\n  colorList?: ListItemsGetter;\n  renderSelected?: (value: string) => React.JSX.Element;\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\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\"> & {\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: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput config={config} {...props} />,\n          },\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, type PluginConfig, type FieldOptions, typeName };\n"],"names":["jsx","AsyncAutocomplete","value","set","unset","Avatar","Card","Flex","Box","Text","definePlugin","defineType","Fragment"],"mappings":";;;AAKA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEG;AACD,QAAM,UAAU,WAAW,SACrB,YAAY,SAAS,aAAa,OAAO,WACzC,eAAe,SAAS,gBAAgB,OAAO,cAC/C,iBAAiB,SAAS,kBAAkB,OAAO;AAEzD,SACEA,2BAAAA;AAAAA,IAACC,YAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,aAAY;AAAA,MACZ,WAAW;AAAA,MACX,aAAa,CAACC,QAAO,QAAQ,KAAK,SAASA;AAAAA,MAC3C,UAAU,CAACA,WAAU;AACnB,cAAM,OAAOA,SAAQC,OAAAA,IAAID,MAAK,IAAIE,OAAAA,MAAA;AAClC,eAAO,SAAS,IAAI;AAAA,MACtB;AAAA,MACA,gBAAgB,CAACF,WACX,iBAAuB,eAAeA,MAAK,IACxCF,+BAACK,GAAAA,QAAA,EAAO,OAAO,EAAE,iBAAiBH,SAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,OAAAA,aAClB,eAAqB,aAAa,EAAE,OAAO,OAAAA,QAAO,IAEpDF,+BAACM,GAAAA,MAAA,EAAK,IAAG,UACP,0CAACC,SAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAAP,+BAACK,GAAAA,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiBH,UAAS;AAAA,QACpDF,2BAAAA,IAACQ,GAAAA,KAAA,EAAI,MAAM,GAAG,SAAS,GACrB,UAAAR,2BAAAA,IAACS,GAAAA,MAAA,EAAK,MAAM,GAAI,UAAA,MAAA,CAAM,EAAA,CACxB;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAKV;AC7BO,MAAM,WAAW,cCblB,6BAA6BC,OAAAA,aAA2B,CAAC,YACtD;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,OAAO;AAAA,MACLC,kBAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,MAAM,MAAMX,2BAAAA,IAAAY,WAAAA,UAAA,EAAE,UAAA,YAAA,CAAE;AAAA,QAChB,YAAY;AAAA,UACV,OAAO,CAAC,yCAAW,YAAA,EAAW,QAAiB,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,MAC3D,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;;;"}

package/dist/index.js

@@ -1,6 +1,50 @@
-import "react/jsx-runtime";
-import "sanity";
-import { typeName, wildSanityColorFieldPlugin } from "./_chunks-es/index.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { set, unset, definePlugin, defineType } from "sanity";
+import { AsyncAutocomplete } from "@madebywild/sanity-utils";
+import { Card, Flex, Avatar, Box, Text } from "@sanity/ui";
+function ColorInput({
+  config,
+  schemaType,
+  onChange,
+  value
+}) {
+  const options = schemaType.options, colorList = options?.colorList ?? config.colorList, renderOption = options?.renderOption ?? config.renderOption, renderSelected = options?.renderSelected ?? config.renderSelected;
+  return /* @__PURE__ */ jsx(
+    AsyncAutocomplete,
+    {
+      defaultValue: value,
+      placeholder: "Select color",
+      listItems: colorList,
+      renderValue: (value2, opt) => opt?.label ?? value2,
+      onChange: (value2) => {
+        const next = value2 ? set(value2) : unset();
+        return onChange(next);
+      },
+      renderSelected: (value2) => renderSelected ? renderSelected(value2) : /* @__PURE__ */ jsx(Avatar, { style: { backgroundColor: value2 } }),
+      renderOption: ({ label, value: value2 }) => renderOption ? renderOption({ label, value: value2 }) : /* @__PURE__ */ jsx(Card, { as: "button", children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 2, children: [
+        /* @__PURE__ */ jsx(Avatar, { size: 1, style: { backgroundColor: value2 } }),
+        /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 2, children: label }) })
+      ] }) })
+    }
+  );
+}
+const typeName = "wild.color", wildSanityColorFieldPlugin = definePlugin((config) => ({
+  name: "@madebywild/sanity-color-field",
+  schema: {
+    types: [
+      defineType({
+        name: typeName,
+        type: "string",
+        title: "Color",
+        description: "Select a color.",
+        icon: () => /* @__PURE__ */ jsx(Fragment, { children: "\u{1F3A8}" }),
+        components: {
+          input: (props) => /* @__PURE__ */ jsx(ColorInput, { config, ...props })
+        }
+      })
+    ]
+  }
+}));
 export {
   typeName,
   wildSanityColorFieldPlugin

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.js","sources":["../src/input.tsx","../src/types.ts","../src/index.tsx"],"sourcesContent":["import { AsyncAutocomplete } from \"@madebywild/sanity-utils\";\nimport { Avatar, Box, Card, Flex, Text } from \"@sanity/ui\";\nimport { type StringInputProps, set, unset } from \"sanity\";\nimport type { FieldOptions, PluginConfig } from \"./types\";\n\nfunction ColorInput({\n  config,\n  schemaType,\n  onChange,\n  value,\n}: StringInputProps & {\n  config: PluginConfig;\n}) {\n  const options = schemaType.options as FieldOptions | undefined;\n  const colorList = options?.colorList ?? config.colorList;\n  const renderOption = options?.renderOption ?? config.renderOption;\n  const renderSelected = options?.renderSelected ?? config.renderSelected;\n\n  return (\n    <AsyncAutocomplete\n      defaultValue={value}\n      placeholder=\"Select color\"\n      listItems={colorList}\n      renderValue={(value, opt) => opt?.label ?? value}\n      onChange={(value) => {\n        const next = value ? set(value) : unset();\n        return onChange(next);\n      }}\n      renderSelected={(value) => {\n        if (renderSelected) return renderSelected(value);\n        return <Avatar style={{ backgroundColor: value }} />;\n      }}\n      renderOption={({ label, value }) => {\n        if (renderOption) return renderOption({ label, value });\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    />\n  );\n}\n\nexport { ColorInput };\n","import type { ListItemsGetter } from \"@madebywild/sanity-utils\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/** @public */\nexport type PluginConfig = {\n  colorList: ListItemsGetter;\n  renderSelected?: (value: string) => React.JSX.Element;\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport type FieldOptions = StringOptions & {\n  colorList?: ListItemsGetter;\n  renderSelected?: (value: string) => React.JSX.Element;\n  renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\n};\n\n/** @public */\nexport const typeName = \"wild.color\" as const;\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\"> & {\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: () => <>🎨</>,\n          components: {\n            input: (props) => <ColorInput config={config} {...props} />,\n          },\n        }),\n      ],\n    },\n  };\n});\n\nexport { wildSanityColorFieldPlugin, type PluginConfig, type FieldOptions, typeName };\n"],"names":["value"],"mappings":";;;;AAKA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEG;AACD,QAAM,UAAU,WAAW,SACrB,YAAY,SAAS,aAAa,OAAO,WACzC,eAAe,SAAS,gBAAgB,OAAO,cAC/C,iBAAiB,SAAS,kBAAkB,OAAO;AAEzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,aAAY;AAAA,MACZ,WAAW;AAAA,MACX,aAAa,CAACA,QAAO,QAAQ,KAAK,SAASA;AAAAA,MAC3C,UAAU,CAACA,WAAU;AACnB,cAAM,OAAOA,SAAQ,IAAIA,MAAK,IAAI,MAAA;AAClC,eAAO,SAAS,IAAI;AAAA,MACtB;AAAA,MACA,gBAAgB,CAACA,WACX,iBAAuB,eAAeA,MAAK,IACxC,oBAAC,QAAA,EAAO,OAAO,EAAE,iBAAiBA,SAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,OAAAA,aAClB,eAAqB,aAAa,EAAE,OAAO,OAAAA,QAAO,IAEpD,oBAAC,MAAA,EAAK,IAAG,UACP,+BAAC,MAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiBA,UAAS;AAAA,QACpD,oBAAC,KAAA,EAAI,MAAM,GAAG,SAAS,GACrB,UAAA,oBAAC,MAAA,EAAK,MAAM,GAAI,UAAA,MAAA,CAAM,EAAA,CACxB;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAKV;AC7BO,MAAM,WAAW,cCblB,6BAA6B,aAA2B,CAAC,YACtD;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,WAAW;AAAA,QACT,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAa;AAAA,QACb,MAAM,MAAM,oBAAA,UAAA,EAAE,UAAA,YAAA,CAAE;AAAA,QAChB,YAAY;AAAA,UACV,OAAO,CAAC,8BAAW,YAAA,EAAW,QAAiB,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,MAC3D,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;"}

package/package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "sideEffects": false,
   "browserslist": "extends @sanity/browserslist-config",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -30,6 +30,7 @@
     "@madebywild/sanity-utils": "*"
   },
   "peerDependencies": {
+    "@sanity/ui": "^3.1.11",
     "sanity": "^4.17",
     "react": "^19",
     "react-dom": "^19"