@sanity/color-input 4.0.6 → 5.0.0

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","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":["lazy","defineType","jsx","definePlugin"],"mappings":"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"}

package/lib/index.mjs

@@ -1,114 +0,0 @@
-import { defineType, definePlugin } from "sanity";
-import { jsx } from "react/jsx-runtime";
-import { lazy } from "react";
-const ColorInput = lazy(() => import("./_chunks-es/ColorInput.mjs")), round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = defineType({
-  name: colorTypeName,
-  type: "object",
-  title: "Color",
-  components: { input: ColorInput },
-  fields: [
-    {
-      title: "Hex",
-      name: "hex",
-      type: "string"
-    },
-    {
-      title: "Alpha",
-      name: "alpha",
-      type: "number"
-    },
-    {
-      title: "Hue Saturation Lightness",
-      name: "hsl",
-      type: "hslaColor"
-    },
-    {
-      title: "Hue Saturation Value",
-      name: "hsv",
-      type: "hsvaColor"
-    },
-    {
-      title: "Red Green Blue (rgb)",
-      name: "rgb",
-      type: "rgbaColor"
-    }
-  ],
-  preview: {
-    select: {
-      title: "hex",
-      alpha: "alpha",
-      hex: "hex",
-      hsl: "hsl"
-    },
-    prepare({
-      title,
-      hex,
-      hsl,
-      alpha
-    }) {
-      let subtitle = hex || "No color set";
-      return hsl && (subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`), {
-        title,
-        subtitle,
-        media: () => /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              backgroundColor: hex ?? "#000",
-              opacity: alpha ?? 1,
-              position: "absolute",
-              height: "100%",
-              width: "100%",
-              top: "0",
-              left: "0"
-            }
-          }
-        )
-      };
-    }
-  }
-}), hslaColor = defineType({
-  title: "Hue Saturation Lightness",
-  name: "hslaColor",
-  type: "object",
-  fields: [
-    { name: "h", type: "number", title: "Hue" },
-    { name: "s", type: "number", title: "Saturation" },
-    { name: "l", type: "number", title: "Lightness" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), hsvaColor = defineType({
-  title: "Hue Saturation Value",
-  name: "hsvaColor",
-  type: "object",
-  fields: [
-    { name: "h", type: "number", title: "Hue" },
-    { name: "s", type: "number", title: "Saturation" },
-    { name: "v", type: "number", title: "Value" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), rgbaColor = defineType({
-  title: "Red Green Blue (rgb)",
-  name: "rgbaColor",
-  type: "object",
-  fields: [
-    { name: "r", type: "number", title: "Red" },
-    { name: "g", type: "number", title: "Green" },
-    { name: "b", type: "number", title: "Blue" },
-    { name: "a", type: "number", title: "Alpha" }
-  ]
-}), colorInput = definePlugin({
-  name: "@sanity/color-input",
-  schema: {
-    types: [hslaColor, hsvaColor, rgbaColor, color]
-  }
-});
-export {
-  ColorInput,
-  color,
-  colorInput,
-  hslaColor,
-  hsvaColor,
-  rgbaColor
-};
-//# sourceMappingURL=index.mjs.map

package/lib/index.mjs.map

@@ -1 +0,0 @@
-{"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/sanity.json

@@ -1,8 +0,0 @@
-{
-  "parts": [
-    {
-      "implements": "part:@sanity/base/sanity-root",
-      "path": "./v2-incompatible.js"
-    }
-  ]
-}

package/src/ColorInput.tsx

@@ -1,97 +0,0 @@
-import {AddIcon} from '@sanity/icons'
-import {Button} from '@sanity/ui'
-import {startTransition, useCallback, useDeferredValue, useEffect, useRef, useState} from 'react'
-import {type ObjectInputProps, set, setIfMissing, unset} from 'sanity'
-import {useEffectEvent} from 'use-effect-event'
-
-import {ColorPicker} from './ColorPicker'
-import type {ColorSchemaType, ColorValue} from './types'
-
-const DEFAULT_COLOR: ColorValue & {source: string} = {
-  hex: '#24a3e3',
-  hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1},
-  hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1},
-  rgb: {r: 46, g: 163, b: 227, a: 1},
-  source: 'hex',
-}
-
-export default function ColorInput(props: ObjectInputProps) {
-  const {onChange, readOnly} = props
-  const value = props.value as ColorValue | undefined
-  const type = props.schemaType as ColorSchemaType
-  const focusRef = useRef<HTMLButtonElement>(null)
-
-  // use local state so we can have instant ui updates while debouncing patch emits
-  const [color, setColor] = useState(value)
-  // Marking the `setColor` in a transition allows React to interrupt render should the user start dragging the input before React is finished rendering
-  useEffect(() => startTransition(() => setColor(value)), [value])
-
-  // The color picker emits onChange events continuously while the user is sliding the
-  // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches
-  // and massively improve render performance and avoid jank
-  const [emitColor, setEmitColor] = useState<typeof value>(undefined)
-  const debouncedColor = useDeferredValue(emitColor)
-  const handleChange = useEffectEvent((nextColor: ColorValue) => {
-    const fieldPatches = type.fields
-      .filter((field) => field.name in nextColor)
-      .map((field) => {
-        const nextFieldValue = nextColor[field.name as keyof ColorValue]
-        const isObject = field.type.jsonType === 'object'
-        return set(
-          isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue,
-          [field.name],
-        )
-      })
-
-    onChange([
-      setIfMissing({_type: type.name}),
-      set(type.name, ['_type']),
-      set(nextColor.rgb?.a, ['alpha']),
-      ...fieldPatches,
-    ])
-  })
-  useEffect(() => {
-    if (!debouncedColor) return undefined
-    const raf = requestAnimationFrame(() => handleChange(debouncedColor))
-    return () => cancelAnimationFrame(raf)
-  }, [debouncedColor])
-
-  const handleCreateColor = useCallback(() => {
-    setColor(DEFAULT_COLOR)
-    setEmitColor(DEFAULT_COLOR)
-  }, [])
-
-  const handleColorChange = useCallback((nextColor: ColorValue) => {
-    setColor(nextColor)
-    setEmitColor(nextColor)
-  }, [])
-
-  const handleUnset = useCallback(() => {
-    setColor(undefined)
-    onChange(unset())
-  }, [onChange])
-
-  return (
-    <>
-      {value && value.hex ? (
-        <ColorPicker
-          color={color}
-          onChange={handleColorChange}
-          readOnly={readOnly || (typeof type.readOnly === 'boolean' && type.readOnly)}
-          disableAlpha={!!type.options?.disableAlpha}
-          colorList={type.options?.colorList}
-          onUnset={handleUnset}
-        />
-      ) : (
-        <Button
-          icon={AddIcon}
-          mode="ghost"
-          text="Create color"
-          ref={focusRef}
-          disabled={Boolean(readOnly)}
-          onClick={handleCreateColor}
-        />
-      )}
-    </>
-  )
-}

package/src/ColorList.tsx

@@ -1,70 +0,0 @@
-import {Flex} from '@sanity/ui'
-import {memo} from 'react'
-import type {Color, ColorChangeHandler} from 'react-color'
-import {styled} from 'styled-components'
-import tinycolor from 'tinycolor2'
-
-const ColorListWrap = styled(Flex)`
-  gap: 0.25em;
-`
-
-const ColorBoxContainer = styled.div`
-  width: 2.1em;
-  height: 2.1em;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  border-radius: 3px;
-  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
-    left center #fff;
-`
-
-const ColorBox = styled.div`
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-`
-
-interface ValidatedColor {
-  color: Color
-  backgroundColor: string
-}
-
-interface ColorListProps {
-  colors?: Array<Color>
-  onChange: ColorChangeHandler<Color>
-}
-
-const validateColors = (colors: Array<Color>) =>
-  colors.reduce((cls: Array<ValidatedColor>, c) => {
-    // @ts-expect-error fix types later
-    const color = c.hex ? tinycolor(c.hex) : tinycolor(c)
-    if (color.isValid()) {
-      cls.push({
-        color: c,
-        backgroundColor: color.toRgbString(),
-      })
-    }
-    return cls
-  }, [])
-
-export const ColorList = memo(function ColorList({colors, onChange}: ColorListProps) {
-  if (!colors) return null
-  return (
-    <ColorListWrap wrap="wrap">
-      {validateColors(colors).map(({color, backgroundColor}, idx) => (
-        <ColorBoxContainer
-          key={`${backgroundColor}-${idx}`}
-          onClick={() => {
-            onChange(color)
-          }}
-        >
-          <ColorBox style={{background: backgroundColor}} />
-        </ColorBoxContainer>
-      ))}
-    </ColorListWrap>
-  )
-})

package/src/ColorPicker.tsx

@@ -1,152 +0,0 @@
-import {TrashIcon} from '@sanity/icons'
-import {Box, Button, Card, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {type Color, CustomPicker} from 'react-color'
-import {Alpha, Checkboard, Hue, Saturation} from 'react-color/lib/components/common'
-import type {CustomPickerInjectedProps} from 'react-color/lib/components/common/ColorWrap'
-import {styled} from 'styled-components'
-
-import {ColorList} from './ColorList'
-import {ColorPickerFields} from './ColorPickerFields'
-import type {ColorValue} from './types'
-
-const ColorBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-`
-
-const ReadOnlyContainer = styled(Flex)`
-  margin-top: 6rem;
-  background-color: var(--card-bg-color);
-  position: relative;
-  width: 100%;
-`
-
-export interface ColorPickerProps extends CustomPickerInjectedProps<Color> {
-  width?: string
-  disableAlpha: boolean
-  colorList?: Array<Color>
-  readOnly?: boolean
-  onUnset: () => void
-  color: ColorValue
-}
-
-const ColorPickerInner = (props: ColorPickerProps) => {
-  const {
-    width,
-    color: {rgb, hex, hsv, hsl},
-    onChange,
-    onUnset,
-    disableAlpha,
-    colorList,
-    readOnly,
-  } = props
-
-  if (!hsl || !hsv) {
-    return null
-  }
-
-  return (
-    <div style={{width}}>
-      <Card padding={1} border radius={1}>
-        <Stack space={2}>
-          {!readOnly && (
-            <>
-              <Card overflow="hidden" style={{position: 'relative', height: '5em'}}>
-                <Saturation onChange={onChange} hsl={hsl} hsv={hsv} />
-              </Card>
-
-              <Card
-                shadow={1}
-                radius={3}
-                overflow="hidden"
-                style={{position: 'relative', height: '10px'}}
-              >
-                <Hue hsl={hsl} onChange={!readOnly && onChange} />
-              </Card>
-
-              {!disableAlpha && (
-                <Card
-                  shadow={1}
-                  radius={3}
-                  overflow="hidden"
-                  style={{position: 'relative', height: '10px', background: '#fff'}}
-                >
-                  <Alpha rgb={rgb} hsl={hsl} onChange={onChange} />
-                </Card>
-              )}
-            </>
-          )}
-          <Flex>
-            <Card
-              flex={1}
-              radius={2}
-              overflow="hidden"
-              style={{position: 'relative', minWidth: '4em', background: '#fff'}}
-            >
-              <Checkboard
-                size={8}
-                white="transparent"
-                grey="rgba(0,0,0,.08)"
-                renderers={{} as {canvas: unknown}}
-              />
-              <ColorBox
-                style={{
-                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`,
-                }}
-              />
-
-              {readOnly && (
-                <ReadOnlyContainer
-                  padding={2}
-                  paddingBottom={1}
-                  sizing="border"
-                  justify="space-between"
-                >
-                  <Stack space={3} marginTop={1}>
-                    <Text size={3} weight="bold">
-                      {hex}
-                    </Text>
-
-                    <Inline space={3}>
-                      <Text size={1}>
-                        <strong>RGB: </strong>
-                        {rgb?.r} {rgb?.g} {rgb?.b}
-                      </Text>
-                      <Text size={1}>
-                        <strong>HSL: </strong> {Math.round(hsl?.h ?? 0)}{' '}
-                        {Math.round((hsl?.s ?? 0) * 100)}% {Math.round((hsl?.l ?? 0) * 100)}%
-                      </Text>
-                    </Inline>
-                  </Stack>
-                </ReadOnlyContainer>
-              )}
-            </Card>
-
-            {!readOnly && (
-              <Flex align="flex-start" marginLeft={2}>
-                <Box style={{width: 200}}>
-                  <ColorPickerFields
-                    rgb={rgb}
-                    hsl={hsl}
-                    hex={hex}
-                    onChange={onChange}
-                    disableAlpha={disableAlpha}
-                  />
-                </Box>
-                <Box marginLeft={2}>
-                  <Button onClick={onUnset} title="Delete color" icon={TrashIcon} tone="critical" />
-                </Box>
-              </Flex>
-            )}
-          </Flex>
-          {colorList && <ColorList colors={colorList} onChange={onChange} />}
-        </Stack>
-      </Card>
-    </div>
-  )
-}
-
-export const ColorPicker = CustomPicker(ColorPickerInner)

package/src/ColorPickerFields.tsx

@@ -1,144 +0,0 @@
-import {Box, Flex, useTheme} from '@sanity/ui'
-import {useCallback, useMemo} from 'react'
-import type {Color, ColorChangeHandler, HSLColor, RGBColor} from 'react-color'
-import {EditableInput} from 'react-color/lib/components/common'
-import type {EditableInputStyles} from 'react-color/lib/components/common/EditableInput'
-// @ts-expect-error missing export
-import {isValidHex} from 'react-color/lib/helpers/color'
-
-interface ColorPickerFieldsProps {
-  rgb?: RGBColor
-  hsl?: HSLColor
-  hex?: string
-  disableAlpha: boolean
-  onChange: ColorChangeHandler<Color>
-}
-
-export const ColorPickerFields = ({
-  onChange,
-  rgb,
-  hsl,
-  hex,
-  disableAlpha,
-}: ColorPickerFieldsProps) => {
-  const {sanity} = useTheme()
-
-  const inputStyles: EditableInputStyles = useMemo(
-    () => ({
-      input: {
-        width: '80%',
-        padding: '4px 10% 3px',
-        border: 'none',
-        boxShadow: `inset 0 0 0 1px ${sanity.color.input.default.enabled.border}`,
-        color: sanity.color.input.default.enabled.fg,
-        backgroundColor: sanity.color.input.default.enabled.bg,
-        fontSize: sanity.fonts.text.sizes[0].fontSize,
-        textAlign: 'center',
-      },
-      label: {
-        display: 'block',
-        textAlign: 'center',
-        fontSize: sanity.fonts.label.sizes[0].fontSize,
-        color: sanity.color.base.fg,
-        paddingTop: '3px',
-        paddingBottom: '4px',
-        textTransform: 'capitalize',
-      },
-    }),
-    [sanity],
-  )
-
-  const handleChange: ColorChangeHandler<Record<string, string>> = useCallback(
-    (data) => {
-      if ('hex' in data && data['hex'] && isValidHex(data['hex'])) {
-        onChange({
-          hex: data['hex'],
-          source: 'hex',
-        })
-      } else if (
-        rgb &&
-        (('r' in data && data['r']) || ('g' in data && data['g']) || ('b' in data && data['b']))
-      ) {
-        onChange({
-          r: Number(data['r']) || rgb.r,
-          g: Number(data['g']) || rgb.g,
-          b: Number(data['b']) || rgb.b,
-          a: rgb.a,
-          source: 'rgb',
-        })
-      } else if (hsl && 'a' in data && data['a']) {
-        let alpha = Number(data['a'])
-        if (alpha < 0) {
-          alpha = 0
-        } else if (alpha > 100) {
-          alpha = 100
-        }
-        alpha /= 100
-
-        onChange({
-          h: hsl.h,
-          s: hsl.s,
-          l: hsl.l,
-          a: alpha,
-          source: 'hsl',
-        })
-      }
-    },
-    [onChange, hsl, rgb],
-  )
-
-  return (
-    <Flex>
-      <Box flex={2} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="hex"
-          value={hex?.replace('#', '')}
-          onChange={handleChange}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="r"
-          value={rgb?.r}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="g"
-          value={rgb?.g}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      <Box flex={1} marginRight={1}>
-        <EditableInput
-          style={inputStyles}
-          label="b"
-          value={rgb?.b}
-          onChange={handleChange}
-          dragLabel
-          dragMax={255}
-        />
-      </Box>
-      {!disableAlpha && (
-        <Box flex={1}>
-          <EditableInput
-            style={inputStyles}
-            label="a"
-            value={Math.round((rgb?.a ?? 1) * 100)}
-            onChange={handleChange}
-            dragLabel
-            dragMax={100}
-          />
-        </Box>
-      )}
-    </Flex>
-  )
-}

package/src/LazyColorInput.tsx

@@ -1,3 +0,0 @@
-import {lazy} from 'react'
-
-export const ColorInput = lazy(() => import('./ColorInput'))

package/src/index.ts

@@ -1,18 +0,0 @@
-import {definePlugin} from 'sanity'
-
-import {color, type ColorDefinition} from './schemas/color'
-import {hslaColor} from './schemas/hslaColor'
-import {hsvaColor} from './schemas/hsvaColor'
-import {rgbaColor} from './schemas/rgbaColor'
-
-export const colorInput = definePlugin({
-  name: '@sanity/color-input',
-  schema: {
-    types: [hslaColor, hsvaColor, rgbaColor, color],
-  },
-})
-
-export {color, hslaColor, hsvaColor, rgbaColor}
-export {ColorInput} from './LazyColorInput'
-export type {ColorDefinition}
-export type {ColorInputProps, ColorOptions, ColorSchemaType, ColorValue} from './types'