npm - @madebywild/sanity-color-field - Versions diffs - 0.2.2 → 0.2.3 - Mend

@madebywild/sanity-color-field 0.2.2 → 0.2.3

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.

Files changed (6) hide show

package/dist/index.cjs.map CHANGED Viewed

	@@ -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 { 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\nfunction maybeGetLuminance(maybeColor: string) {\n try {\n // Try to unwrap CSS variable and look up its value.\n // If it's not a CSS variable, assume it's a valid color string.\n const safeVar = maybeColor.replace(/^var\$(.)\$$/, \"$1\");\n const parsedVar = safeVar.startsWith(\"--\") ? getComputedStyle(document.documentElement).getPropertyValue(safeVar) : undefined;\n const color = parsedVar?.trim() \|\| maybeColor;\n return getLuminance(color);\n } catch (e) {\n console.warn(\"Failed to extract color luminance\", e);\n return undefined;\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 = options?.colorList ?? pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n value={props.value?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const luminance = maybeGetLuminance(value);\n return props.onChange(set({ ...props.value, value, luminance }));\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 { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/* @public /\nexport const typeName = \"wild.color\" as const;\n\n/* @public /\nexport type PluginConfig = {\n colorList: ListItems;\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?: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\n type: typeof typeName;\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":["getLuminance","jsx","AsyncAutocomplete","unset","set","Avatar","Card","Flex","Box","Text","definePlugin","defineType","Fragment","defineField"],"mappings":";;;AAaA,SAAS,kBAAkB,YAAoB;AAC7C,MAAI;AAGF,UAAM,UAAU,WAAW,QAAQ,iBAAiB,IAAI,GAElD,SADY,QAAQ,WAAW,IAAI,IAAI,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,OAAO,IAAI,SAC3F,UAAU;AACnC,WAAOA,QAAAA,aAAa,KAAK;AAAA,EAC3B,SAAS,GAAG;AACV,YAAQ,KAAK,qCAAqC,CAAC;AACnD;AAAA,EACF;AACF;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,UAAU,MAAM,WAAW,SAC3B,YAAY,SAAS,aAAa,aAAa,WAC/C,eAAe,SAAS,gBAAgB,aAAa,cACrD,iBAAiB,SAAS,kBAAkB,aAAa;AAE/D,SACEC,2BAAAA;AAAAA,IAACC,kBAAAA;AAAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,sBAAqB;AAAA,MACrB,WAAW;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa,CAAC,OAAO,QAAQ,KAAK,SAAS;AAAA,MAC3C,UAAU,CAAC,UAAU;AACnB,YAAI,CAAC,MAAO,QAAO,MAAM,SAASC,OAAAA,OAAO;AACzC,cAAM,YAAY,kBAAkB,KAAK;AACzC,eAAO,MAAM,SAASC,OAAAA,IAAI,EAAE,GAAG,MAAM,OAAO,OAAO,UAAA,CAAW,CAAC;AAAA,MACjE;AAAA,MACA,gBAAgB,CAAC,UACX,iBAAuB,eAAe,KAAK,IACxCH,+BAACI,GAAAA,QAAA,EAAO,OAAO,EAAE,iBAAiB,QAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,YAClB,eAAqB,aAAa,EAAE,OAAO,MAAA,CAAO,IAEpDJ,2BAAAA,IAACK,WAAK,IAAG,UACP,0CAACC,GAAAA,MAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAAN,+BAACI,GAAAA,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiB,SAAS;AAAA,QACpDJ,2BAAAA,IAACO,GAAAA,KAAA,EAAI,MAAM,GAAG,SAAS,GACrB,UAAAP,2BAAAA,IAACQ,GAAAA,MAAA,EAAK,MAAM,GAAI,UAAA,MAAA,CAAM,EAAA,CACxB;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAKV;ACjEO,MAAM,WAAW,cCClB,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,MAAMV,2BAAAA,IAAAW,WAAAA,UAAA,EAAE,UAAA,YAAA,CAAE;AAAA,QAChB,YAAY;AAAA,UACV,OAAO,CAAC,UAAUX,+BAAC,cAAW,cAAc,QAAS,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,QAEjE,QAAQ;AAAA,UACNY,mBAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,UACDA,mBAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,QAAA;AAAA,MACH,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;;;"}
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\nfunction maybeGetLuminance(maybeColor: string) {\n try {\n // Try to unwrap CSS variable and look up its value.\n // If it's not a CSS variable, assume it's a valid color string.\n const safeVar = maybeColor.replace(/^var\$(.)\$$/, \"$1\");\n const parsedVar = safeVar.startsWith(\"--\") ? getComputedStyle(document.documentElement).getPropertyValue(safeVar) : undefined;\n const color = parsedVar?.trim() \|\| maybeColor;\n return getLuminance(color);\n } catch (e) {\n console.warn(\"Failed to extract color luminance\", e);\n return undefined;\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 = options?.colorList ?? pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n value={props.value?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const luminance = maybeGetLuminance(value);\n return props.onChange(set({ ...props.value, value, luminance }));\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 { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/* @public /\nexport const typeName = \"wild.color\" as const;\n\n/* @public /\nexport type PluginConfig = {\n colorList: ListItems;\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?: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\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":["getLuminance","jsx","AsyncAutocomplete","unset","set","Avatar","Card","Flex","Box","Text","definePlugin","defineType","Fragment","defineField"],"mappings":";;;AAaA,SAAS,kBAAkB,YAAoB;AAC7C,MAAI;AAGF,UAAM,UAAU,WAAW,QAAQ,iBAAiB,IAAI,GAElD,SADY,QAAQ,WAAW,IAAI,IAAI,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,OAAO,IAAI,SAC3F,UAAU;AACnC,WAAOA,QAAAA,aAAa,KAAK;AAAA,EAC3B,SAAS,GAAG;AACV,YAAQ,KAAK,qCAAqC,CAAC;AACnD;AAAA,EACF;AACF;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,UAAU,MAAM,WAAW,SAC3B,YAAY,SAAS,aAAa,aAAa,WAC/C,eAAe,SAAS,gBAAgB,aAAa,cACrD,iBAAiB,SAAS,kBAAkB,aAAa;AAE/D,SACEC,2BAAAA;AAAAA,IAACC,kBAAAA;AAAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,sBAAqB;AAAA,MACrB,WAAW;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa,CAAC,OAAO,QAAQ,KAAK,SAAS;AAAA,MAC3C,UAAU,CAAC,UAAU;AACnB,YAAI,CAAC,MAAO,QAAO,MAAM,SAASC,OAAAA,OAAO;AACzC,cAAM,YAAY,kBAAkB,KAAK;AACzC,eAAO,MAAM,SAASC,OAAAA,IAAI,EAAE,GAAG,MAAM,OAAO,OAAO,UAAA,CAAW,CAAC;AAAA,MACjE;AAAA,MACA,gBAAgB,CAAC,UACX,iBAAuB,eAAe,KAAK,IACxCH,+BAACI,GAAAA,QAAA,EAAO,OAAO,EAAE,iBAAiB,QAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,YAClB,eAAqB,aAAa,EAAE,OAAO,MAAA,CAAO,IAEpDJ,2BAAAA,IAACK,WAAK,IAAG,UACP,0CAACC,GAAAA,MAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAAN,+BAACI,GAAAA,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiB,SAAS;AAAA,QACpDJ,2BAAAA,IAACO,GAAAA,KAAA,EAAI,MAAM,GAAG,SAAS,GACrB,UAAAP,2BAAAA,IAACQ,GAAAA,MAAA,EAAK,MAAM,GAAI,UAAA,MAAA,CAAM,EAAA,CACxB;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAKV;ACjEO,MAAM,WAAW,cCClB,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,MAAMV,2BAAAA,IAAAW,WAAAA,UAAA,EAAE,UAAA,YAAA,CAAE;AAAA,QAChB,YAAY;AAAA,UACV,OAAO,CAAC,UAAUX,+BAAC,cAAW,cAAc,QAAS,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,QAEjE,QAAQ;AAAA,UACNY,mBAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,UACDA,mBAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,QAAA;AAAA,MACH,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;;;"}

package/dist/index.d.cts CHANGED Viewed

@@ -30,8 +30,9 @@ type FieldOptions = StringOptions & {
 };
 declare module "sanity" {
   interface IntrinsicDefinitions {
-    [typeName]: Omit<StringDefinition, "type" | "fields"> & {
+    [typeName]: Omit<StringDefinition, "type" | "fields" | "options"> & {
       type: typeof typeName;
+      options?: FieldOptions;
     };
   }
 }

package/dist/index.d.ts CHANGED Viewed

@@ -30,8 +30,9 @@ type FieldOptions = StringOptions & {
 };
 declare module "sanity" {
   interface IntrinsicDefinitions {
-    [typeName]: Omit<StringDefinition, "type" | "fields"> & {
+    [typeName]: Omit<StringDefinition, "type" | "fields" | "options"> & {
       type: typeof typeName;
+      options?: FieldOptions;
     };
   }
 }

package/dist/index.js.map CHANGED Viewed

	@@ -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 { 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\nfunction maybeGetLuminance(maybeColor: string) {\n try {\n // Try to unwrap CSS variable and look up its value.\n // If it's not a CSS variable, assume it's a valid color string.\n const safeVar = maybeColor.replace(/^var\$(.)\$$/, \"$1\");\n const parsedVar = safeVar.startsWith(\"--\") ? getComputedStyle(document.documentElement).getPropertyValue(safeVar) : undefined;\n const color = parsedVar?.trim() \|\| maybeColor;\n return getLuminance(color);\n } catch (e) {\n console.warn(\"Failed to extract color luminance\", e);\n return undefined;\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 = options?.colorList ?? pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n value={props.value?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const luminance = maybeGetLuminance(value);\n return props.onChange(set({ ...props.value, value, luminance }));\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 { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/* @public /\nexport const typeName = \"wild.color\" as const;\n\n/* @public /\nexport type PluginConfig = {\n colorList: ListItems;\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?: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\n type: typeof typeName;\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":[],"mappings":";;;;;AAaA,SAAS,kBAAkB,YAAoB;AAC7C,MAAI;AAGF,UAAM,UAAU,WAAW,QAAQ,iBAAiB,IAAI,GAElD,SADY,QAAQ,WAAW,IAAI,IAAI,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,OAAO,IAAI,SAC3F,UAAU;AACnC,WAAO,aAAa,KAAK;AAAA,EAC3B,SAAS,GAAG;AACV,YAAQ,KAAK,qCAAqC,CAAC;AACnD;AAAA,EACF;AACF;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,UAAU,MAAM,WAAW,SAC3B,YAAY,SAAS,aAAa,aAAa,WAC/C,eAAe,SAAS,gBAAgB,aAAa,cACrD,iBAAiB,SAAS,kBAAkB,aAAa;AAE/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,sBAAqB;AAAA,MACrB,WAAW;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa,CAAC,OAAO,QAAQ,KAAK,SAAS;AAAA,MAC3C,UAAU,CAAC,UAAU;AACnB,YAAI,CAAC,MAAO,QAAO,MAAM,SAAS,OAAO;AACzC,cAAM,YAAY,kBAAkB,KAAK;AACzC,eAAO,MAAM,SAAS,IAAI,EAAE,GAAG,MAAM,OAAO,OAAO,UAAA,CAAW,CAAC;AAAA,MACjE;AAAA,MACA,gBAAgB,CAAC,UACX,iBAAuB,eAAe,KAAK,IACxC,oBAAC,QAAA,EAAO,OAAO,EAAE,iBAAiB,QAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,YAClB,eAAqB,aAAa,EAAE,OAAO,MAAA,CAAO,IAEpD,oBAAC,QAAK,IAAG,UACP,+BAAC,MAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiB,SAAS;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;ACjEO,MAAM,WAAW,cCClB,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,UAAU,oBAAC,cAAW,cAAc,QAAS,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,QAEjE,QAAQ;AAAA,UACN,YAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,UACD,YAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,QAAA;AAAA,MACH,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;"}
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\nfunction maybeGetLuminance(maybeColor: string) {\n try {\n // Try to unwrap CSS variable and look up its value.\n // If it's not a CSS variable, assume it's a valid color string.\n const safeVar = maybeColor.replace(/^var\$(.)\$$/, \"$1\");\n const parsedVar = safeVar.startsWith(\"--\") ? getComputedStyle(document.documentElement).getPropertyValue(safeVar) : undefined;\n const color = parsedVar?.trim() \|\| maybeColor;\n return getLuminance(color);\n } catch (e) {\n console.warn(\"Failed to extract color luminance\", e);\n return undefined;\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 = options?.colorList ?? pluginConfig.colorList;\n const renderOption = options?.renderOption ?? pluginConfig.renderOption;\n const renderSelected = options?.renderSelected ?? pluginConfig.renderSelected;\n\n return (\n <AsyncAutocomplete\n placeholder=\"Select color\"\n noOptionsPlaceholder=\"No colors found\"\n listItems={colorList}\n value={props.value?.value}\n renderValue={(value, opt) => opt?.label ?? value}\n onChange={(value) => {\n if (!value) return props.onChange(unset());\n const luminance = maybeGetLuminance(value);\n return props.onChange(set({ ...props.value, value, luminance }));\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 { ListItems } from \"@madebywild/sanity-utils/async-autocomplete\";\nimport type { StringDefinition, StringOptions } from \"sanity\";\n\n/* @public /\nexport const typeName = \"wild.color\" as const;\n\n/* @public /\nexport type PluginConfig = {\n colorList: ListItems;\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?: ListItems;\n renderSelected?: (value: string) => React.JSX.Element;\n renderOption?: (item: { label?: string; value: string }) => React.JSX.Element;\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\"> & {\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":[],"mappings":";;;;;AAaA,SAAS,kBAAkB,YAAoB;AAC7C,MAAI;AAGF,UAAM,UAAU,WAAW,QAAQ,iBAAiB,IAAI,GAElD,SADY,QAAQ,WAAW,IAAI,IAAI,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,OAAO,IAAI,SAC3F,UAAU;AACnC,WAAO,aAAa,KAAK;AAAA,EAC3B,SAAS,GAAG;AACV,YAAQ,KAAK,qCAAqC,CAAC;AACnD;AAAA,EACF;AACF;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAEG;AACD,QAAM,UAAU,MAAM,WAAW,SAC3B,YAAY,SAAS,aAAa,aAAa,WAC/C,eAAe,SAAS,gBAAgB,aAAa,cACrD,iBAAiB,SAAS,kBAAkB,aAAa;AAE/D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAY;AAAA,MACZ,sBAAqB;AAAA,MACrB,WAAW;AAAA,MACX,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa,CAAC,OAAO,QAAQ,KAAK,SAAS;AAAA,MAC3C,UAAU,CAAC,UAAU;AACnB,YAAI,CAAC,MAAO,QAAO,MAAM,SAAS,OAAO;AACzC,cAAM,YAAY,kBAAkB,KAAK;AACzC,eAAO,MAAM,SAAS,IAAI,EAAE,GAAG,MAAM,OAAO,OAAO,UAAA,CAAW,CAAC;AAAA,MACjE;AAAA,MACA,gBAAgB,CAAC,UACX,iBAAuB,eAAe,KAAK,IACxC,oBAAC,QAAA,EAAO,OAAO,EAAE,iBAAiB,QAAM,CAAG;AAAA,MAEpD,cAAc,CAAC,EAAE,OAAO,YAClB,eAAqB,aAAa,EAAE,OAAO,MAAA,CAAO,IAEpD,oBAAC,QAAK,IAAG,UACP,+BAAC,MAAA,EAAK,OAAM,UAAS,SAAS,GAC5B,UAAA;AAAA,QAAA,oBAAC,UAAO,MAAM,GAAG,OAAO,EAAE,iBAAiB,SAAS;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;ACjEO,MAAM,WAAW,cCClB,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,UAAU,oBAAC,cAAW,cAAc,QAAS,GAAG,MAAA,CAAO;AAAA,QAAA;AAAA,QAEjE,QAAQ;AAAA,UACN,YAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,UACD,YAAY;AAAA,YACV,MAAM;AAAA,YACN,MAAM;AAAA,UAAA,CACP;AAAA,QAAA;AAAA,MACH,CACD;AAAA,IAAA;AAAA,EACH;AAEJ,EACD;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@madebywild/sanity-color-field",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": false,
   "license": "UNLICENSED",
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "color2k": "2.0.3",
-    "@madebywild/sanity-utils": "0.2.2"
+    "@madebywild/sanity-utils": "0.2.3"
   },
   "peerDependencies": {
     "@sanity/ui": "^3.1",

package/src/types.tsx CHANGED Viewed

@@ -22,8 +22,9 @@ export type FieldOptions = StringOptions & {
 // so that type checking works correctly when using this field type.
 declare module "sanity" {
   export interface IntrinsicDefinitions {
-    [typeName]: Omit<StringDefinition, "type" | "fields"> & {
+    [typeName]: Omit<StringDefinition, "type" | "fields" | "options"> & {
       type: typeof typeName;
+      options?: FieldOptions;
     };
   }
 }