@sanity/color-input 4.0.1-canary.0 → 4.0.2

package/lib/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.mjs","sources":["../src/LazyColorInput.tsx","../src/schemas/color.tsx","../src/schemas/hslaColor.ts","../src/schemas/hsvaColor.ts","../src/schemas/rgbaColor.ts","../src/index.ts"],"sourcesContent":["import {lazy} from 'react'\n\nexport const ColorInput = lazy(() => import('./ColorInput'))\n","import {defineType, type ObjectDefinition} from 'sanity'\n\nimport {ColorInput} from '../LazyColorInput'\nimport {type ColorOptions} from '../types'\n\nconst round = (val: number = 1) => Math.round(val * 100)\n\nconst colorTypeName = 'color' as const\n\n/**\n * @public\n */\nexport interface ColorDefinition extends Omit<ObjectDefinition, 'type' | 'fields' | 'options'> {\n  type: typeof colorTypeName\n  options?: ColorOptions\n}\n\ndeclare module '@sanity/types' {\n  // makes type: 'color' narrow correctly when using defineTyp/defineField/defineArrayMember\n  export interface IntrinsicDefinitions {\n    color: ColorDefinition\n  }\n}\n\nexport const color = defineType({\n  name: colorTypeName,\n  type: 'object',\n  title: 'Color',\n  components: {input: ColorInput},\n  fields: [\n    {\n      title: 'Hex',\n      name: 'hex',\n      type: 'string',\n    },\n    {\n      title: 'Alpha',\n      name: 'alpha',\n      type: 'number',\n    },\n    {\n      title: 'Hue Saturation Lightness',\n      name: 'hsl',\n      type: 'hslaColor',\n    },\n    {\n      title: 'Hue Saturation Value',\n      name: 'hsv',\n      type: 'hsvaColor',\n    },\n    {\n      title: 'Red Green Blue (rgb)',\n      name: 'rgb',\n      type: 'rgbaColor',\n    },\n  ],\n  preview: {\n    select: {\n      title: 'hex',\n      alpha: 'alpha',\n      hex: 'hex',\n      hsl: 'hsl',\n    },\n    prepare({\n      title,\n      hex,\n      hsl,\n      alpha,\n    }: {\n      title?: string\n      alpha?: number\n      hex?: string\n      hsl?: {h: number; s: number; l: number}\n    }) {\n      let subtitle = hex || 'No color set'\n      if (hsl) {\n        subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`\n      }\n      return {\n        title: title,\n        subtitle: subtitle,\n        media: () => (\n          <div\n            style={{\n              backgroundColor: hex ?? '#000',\n              opacity: alpha ?? 1,\n              position: 'absolute',\n              height: '100%',\n              width: '100%',\n              top: '0',\n              left: '0',\n            }}\n          />\n        ),\n      }\n    },\n  },\n})\n","import {defineType} from 'sanity'\n\nexport const hslaColor = defineType({\n  title: 'Hue Saturation Lightness',\n  name: 'hslaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'l', type: 'number', title: 'Lightness'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const hsvaColor = defineType({\n  title: 'Hue Saturation Value',\n  name: 'hsvaColor',\n  type: 'object',\n  fields: [\n    {name: 'h', type: 'number', title: 'Hue'},\n    {name: 's', type: 'number', title: 'Saturation'},\n    {name: 'v', type: 'number', title: 'Value'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {defineType} from 'sanity'\n\nexport const rgbaColor = defineType({\n  title: 'Red Green Blue (rgb)',\n  name: 'rgbaColor',\n  type: 'object',\n  fields: [\n    {name: 'r', type: 'number', title: 'Red'},\n    {name: 'g', type: 'number', title: 'Green'},\n    {name: 'b', type: 'number', title: 'Blue'},\n    {name: 'a', type: 'number', title: 'Alpha'},\n  ],\n})\n","import {definePlugin} from 'sanity'\n\nimport {color, type ColorDefinition} from './schemas/color'\nimport {hslaColor} from './schemas/hslaColor'\nimport {hsvaColor} from './schemas/hsvaColor'\nimport {rgbaColor} from './schemas/rgbaColor'\n\nexport const colorInput = definePlugin({\n  name: '@sanity/color-input',\n  schema: {\n    types: [hslaColor, hsvaColor, rgbaColor, color],\n  },\n})\n\nexport {color, hslaColor, hsvaColor, rgbaColor}\nexport {ColorInput} from './LazyColorInput'\nexport type {ColorDefinition}\nexport type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/color-input",
-  "version": "4.0.1-canary.0",
+  "version": "4.0.2",
   "description": "Color input",
   "keywords": [
     "sanity",
@@ -53,9 +53,9 @@
   "browserslist": "extends @sanity/browserslist-config",
   "prettier": "@sanity/prettier-config",
   "dependencies": {
-    "@sanity/icons": "^3.4.0",
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^2.8.9",
+    "@sanity/icons": "^3.5.3",
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/ui": "^2.10.10",
     "react-color": "^2.19.3",
     "use-effect-event": "^1.0.2"
   },
@@ -83,13 +83,13 @@
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.57.3",
+    "sanity": "^3.67.1",
     "semantic-release": "^24.1.1",
     "styled-components": "^6.1",
     "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "react": "^18.3",
+    "react": "^18.3 || ^19",
     "sanity": "^3.23.0",
     "styled-components": "^6.1"
   },

package/src/ColorInput.tsx

@@ -1,25 +1,11 @@
 import {AddIcon} from '@sanity/icons'
 import {Button} from '@sanity/ui'
 import {startTransition, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'
-import type {Color, HSLColor, HSVColor, RGBColor} from 'react-color'
-import {
-  type ObjectInputProps,
-  type ObjectOptions,
-  type ObjectSchemaType,
-  set,
-  setIfMissing,
-  unset,
-} from 'sanity'
+import {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'
 import {useEffectEvent} from 'use-effect-event'
 
 import {ColorPicker} from './ColorPicker'
-
-export interface ColorValue {
-  hex: string
-  hsl: HSLColor
-  hsv: HSVColor
-  rgb: RGBColor
-}
+import type {ColorSchemaType, ColorValue} from './types'
 
 const DEFAULT_COLOR: ColorValue & {source: string} = {
   hex: '#24a3e3',
@@ -29,16 +15,6 @@ const DEFAULT_COLOR: ColorValue & {source: string} = {
   source: 'hex',
 }
 
-export interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
-  disableAlpha?: boolean
-  colorList?: Array<Color>
-}
-
-export type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
-  options?: ColorOptions
-}
-export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>
-
 export default function ColorInput(props: ObjectInputProps) {
   const {onChange, readOnly} = props
   const value = props.value as ColorValue | undefined

package/src/ColorPicker.tsx

@@ -5,9 +5,9 @@ import {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/com
 import type {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'
 import {styled} from 'styled-components'
 
-import type {ColorValue} from './ColorInput'
 import {ColorList} from './ColorList'
 import {ColorPickerFields} from './ColorPickerFields'
+import type {ColorValue} from './types'
 
 const ColorBox = styled(Box)`
   position: absolute;

package/src/index.ts

@@ -15,4 +15,4 @@ export const colorInput = definePlugin({
 export {color, hslaColor, hsvaColor, rgbaColor}
 export {ColorInput} from './LazyColorInput'
 export type {ColorDefinition}
-export type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './ColorInput'
+export type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'

package/src/schemas/color.tsx

@@ -1,7 +1,7 @@
 import {defineType, type ObjectDefinition} from 'sanity'
 
-import {type ColorOptions} from '../ColorInput'
 import {ColorInput} from '../LazyColorInput'
+import {type ColorOptions} from '../types'
 
 const round = (val: number = 1) => Math.round(val * 100)
 

package/src/types.ts

@@ -0,0 +1,19 @@
+import type {Color, HSLColor, HSVColor, RGBColor} from 'react-color'
+import type {ObjectInputProps, ObjectOptions, ObjectSchemaType} from 'sanity'
+
+export interface ColorValue {
+  hex: string
+  hsl: HSLColor
+  hsv: HSVColor
+  rgb: RGBColor
+}
+
+export interface ColorOptions extends Omit<ObjectOptions, 'columns'> {
+  disableAlpha?: boolean
+  colorList?: Array<Color>
+}
+
+export type ColorSchemaType = Omit<ObjectSchemaType, 'options'> & {
+  options?: ColorOptions
+}
+export type ColorInputProps = ObjectInputProps<ColorValue, ColorSchemaType>