npm - react-headless-color-picker - Versions diffs - 1.0.0 - Mend

react-headless-color-picker 1.0.0

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 (9) hide show

package/dist/index.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/hooks/useColorManipulation.ts","../src/utils/round.ts","../src/utils/convert.ts","../src/utils/compare.ts","../src/hooks/useEventCallback.ts","../src/components/Hue.tsx","../src/utils/clamp.ts","../src/components/Interactive.tsx","../src/components/Pointer.tsx","../src/components/Saturation.tsx","../src/components/Alpha.tsx","../src/components/ColorPicker.tsx","../src/components/HexColorPicker.tsx","../src/utils/validate.ts","../src/utils/nonce.ts","../src/utils/format.ts"],"sourcesContent":["import { useState, useEffect, useCallback, useRef } from \"react\";\n\nimport { equalColorObjects } from \"../utils/compare\";\nimport { useEventCallback } from \"./useEventCallback\";\nimport type { AnyColor, ColorModel, HsvaColor } from \"../types\";\n\nexport function useColorManipulation<T extends AnyColor>(\n colorModel: ColorModel<T>,\n color: T,\n onChange?: (color: T) => void\n): [HsvaColor, (color: Partial<HsvaColor>) => void] {\n // Save onChange callback in the ref for avoiding \"useCallback hell\"\n const onChangeCallback = useEventCallback<T>(onChange);\n\n // No matter which color model is used (HEX, RGB(A) or HSL(A)),\n // all internal calculations are based on HSVA model\n const [hsva, updateHsva] = useState<HsvaColor>(() => colorModel.toHsva(color));\n\n // By using this ref we're able to prevent extra updates\n // and the effects recursion during the color conversion\n const cache = useRef({ color, hsva });\n\n // Update local HSVA-value if `color` property value is changed,\n // but only if that's not the same color that we just sent to the parent\n useEffect(() => {\n if (!colorModel.equal(color, cache.current.color)) {\n const newHsva = colorModel.toHsva(color);\n cache.current = { hsva: newHsva, color };\n updateHsva(newHsva);\n }\n }, [color, colorModel]);\n\n // Trigger `onChange` callback only if an updated color is different from cached one;\n // save the new color to the ref to prevent unnecessary updates\n useEffect(() => {\n let newColor;\n if (\n !equalColorObjects(hsva, cache.current.hsva) &&\n !colorModel.equal((newColor = colorModel.fromHsva(hsva)), cache.current.color)\n ) {\n cache.current = { hsva, color: newColor };\n onChangeCallback(newColor);\n }\n }, [hsva, colorModel, onChangeCallback]);\n\n // Merge the current HSVA color object with updated params.\n // For example, when a child component sends `h` or `s` only\n const handleChange = useCallback((params: Partial<HsvaColor>) => {\n updateHsva((current) => Object.assign({}, current, params));\n }, []);\n\n return [hsva, handleChange];\n}\n","export const round = (number: number, digits = 0, base = Math.pow(10, digits)): number => {\n return Math.round(base * number) / base;\n};\n","import { round } from \"./round\";\nimport type { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from \"../types\";\n\n/**\n * Valid CSS <angle> units.\n * https://developer.mozilla.org/en-US/docs/Web/CSS/angle\n */\nconst angleUnits: Record<string, number> = {\n grad: 360 / 400,\n turn: 360,\n rad: 360 / (Math.PI * 2),\n};\n\nexport const hexToHsva = (hex: string): HsvaColor => rgbaToHsva(hexToRgba(hex));\n\nexport const hexToRgba = (hex: string): RgbaColor => {\n if (hex[0] === \"#\") hex = hex.substring(1);\n\n if (hex.length < 6) {\n return {\n r: parseInt(hex[0] + hex[0], 16),\n g: parseInt(hex[1] + hex[1], 16),\n b: parseInt(hex[2] + hex[2], 16),\n a: hex.length === 4 ? round(parseInt(hex[3] + hex[3], 16) / 255, 2) : 1,\n };\n }\n\n return {\n r: parseInt(hex.substring(0, 2), 16),\n g: parseInt(hex.substring(2, 4), 16),\n b: parseInt(hex.substring(4, 6), 16),\n a: hex.length === 8 ? round(parseInt(hex.substring(6, 8), 16) / 255, 2) : 1,\n };\n};\n\nexport const parseHue = (value: string, unit = \"deg\"): number => {\n return Number(value) * (angleUnits[unit] || 1);\n};\n\nexport const hslaStringToHsva = (hslString: string): HsvaColor => {\n const matcher = /hsla?\$?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\$?/i;\n const match = matcher.exec(hslString);\n\n if (!match) return { h: 0, s: 0, v: 0, a: 1 };\n\n return hslaToHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n l: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),\n });\n};\n\nexport const hslStringToHsva = hslaStringToHsva;\n\nexport const hslaToHsva = ({ h, s, l, a }: HslaColor): HsvaColor => {\n s *= (l < 50 ? l : 100 - l) / 100;\n\n return {\n h: h,\n s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,\n v: l + s,\n a,\n };\n};\n\nexport const hsvaToHex = (hsva: HsvaColor): string => rgbaToHex(hsvaToRgba(hsva));\n\nexport const hsvaToHsla = ({ h, s, v, a }: HsvaColor): HslaColor => {\n const hh = ((200 - s) * v) / 100;\n\n return {\n h: round(h),\n s: round(hh > 0 && hh < 200 ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100 : 0),\n l: round(hh / 2),\n a: round(a, 2),\n };\n};\n\nexport const hsvaToHslString = (hsva: HsvaColor): string => {\n const { h, s, l } = hsvaToHsla(hsva);\n return `hsl(${h}, ${s}%, ${l}%)`;\n};\n\nexport const hsvaToHsvString = (hsva: HsvaColor): string => {\n const { h, s, v } = roundHsva(hsva);\n return `hsv(${h}, ${s}%, ${v}%)`;\n};\n\nexport const hsvaToHsvaString = (hsva: HsvaColor): string => {\n const { h, s, v, a } = roundHsva(hsva);\n return `hsva(${h}, ${s}%, ${v}%, ${a})`;\n};\n\nexport const hsvaToHslaString = (hsva: HsvaColor): string => {\n const { h, s, l, a } = hsvaToHsla(hsva);\n return `hsla(${h}, ${s}%, ${l}%, ${a})`;\n};\n\nexport const hsvaToRgba = ({ h, s, v, a }: HsvaColor): RgbaColor => {\n h = (h / 360) * 6;\n s = s / 100;\n v = v / 100;\n\n const hh = Math.floor(h),\n b = v * (1 - s),\n c = v * (1 - (h - hh) * s),\n d = v * (1 - (1 - h + hh) * s),\n module = hh % 6;\n\n return {\n r: round([v, c, b, b, d, v][module] * 255),\n g: round([d, v, v, c, b, b][module] * 255),\n b: round([b, b, d, v, v, c][module] * 255),\n a: round(a, 2),\n };\n};\n\nexport const hsvaToRgbString = (hsva: HsvaColor): string => {\n const { r, g, b } = hsvaToRgba(hsva);\n return `rgb(${r}, ${g}, ${b})`;\n};\n\nexport const hsvaToRgbaString = (hsva: HsvaColor): string => {\n const { r, g, b, a } = hsvaToRgba(hsva);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n};\n\nexport const hsvaStringToHsva = (hsvString: string): HsvaColor => {\n const matcher = /hsva?\$?\\s*(-?\\d*\\.?\\d+)(deg|rad|grad|turn)?[,\\s]+(-?\\d*\\.?\\d+)%?[,\\s]+(-?\\d*\\.?\\d+)%?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\$?/i;\n const match = matcher.exec(hsvString);\n\n if (!match) return { h: 0, s: 0, v: 0, a: 1 };\n\n return roundHsva({\n h: parseHue(match[1], match[2]),\n s: Number(match[3]),\n v: Number(match[4]),\n a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),\n });\n};\n\nexport const hsvStringToHsva = hsvaStringToHsva;\n\nexport const rgbaStringToHsva = (rgbaString: string): HsvaColor => {\n const matcher = /rgba?\$?\\s*(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?[,\\s]+(-?\\d*\\.?\\d+)(%)?,?\\s*[/\\s]*(-?\\d*\\.?\\d+)?(%)?\\s*\$?/i;\n const match = matcher.exec(rgbaString);\n\n if (!match) return { h: 0, s: 0, v: 0, a: 1 };\n\n return rgbaToHsva({\n r: Number(match[1]) / (match[2] ? 100 / 255 : 1),\n g: Number(match[3]) / (match[4] ? 100 / 255 : 1),\n b: Number(match[5]) / (match[6] ? 100 / 255 : 1),\n a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),\n });\n};\n\nexport const rgbStringToHsva = rgbaStringToHsva;\n\nconst format = (number: number) => {\n const hex = number.toString(16);\n return hex.length < 2 ? \"0\" + hex : hex;\n};\n\nexport const rgbaToHex = ({ r, g, b, a }: RgbaColor): string => {\n const alphaHex = a < 1 ? format(round(a * 255)) : \"\";\n return \"#\" + format(r) + format(g) + format(b) + alphaHex;\n};\n\nexport const rgbaToHsva = ({ r, g, b, a }: RgbaColor): HsvaColor => {\n const max = Math.max(r, g, b);\n const delta = max - Math.min(r, g, b);\n\n // prettier-ignore\n const hh = delta\n ? max === r\n ? (g - b) / delta\n : max === g\n ? 2 + (b - r) / delta\n : 4 + (r - g) / delta\n : 0;\n\n return {\n h: round(60 * (hh < 0 ? hh + 6 : hh)),\n s: round(max ? (delta / max) * 100 : 0),\n v: round((max / 255) * 100),\n a,\n };\n};\n\nexport const roundHsva = (hsva: HsvaColor): HsvaColor => ({\n h: round(hsva.h),\n s: round(hsva.s),\n v: round(hsva.v),\n a: round(hsva.a, 2),\n});\n\nexport const rgbaToRgb = ({ r, g, b }: RgbaColor): RgbColor => ({ r, g, b });\n\nexport const hslaToHsl = ({ h, s, l }: HslaColor): HslColor => ({ h, s, l });\n\nexport const hsvaToHsv = (hsva: HsvaColor): HsvColor => {\n const { h, s, v } = roundHsva(hsva);\n return { h, s, v };\n};\n\nexport const hsvaToHueHsl = (h: number) =>{\n return `hsl(${Math.round(h)}, 100%, 50%)`;\n}\n","import type { ObjectColor } from \"../types\";\nimport { hexToRgba } from \"./convert\";\n\n\nexport const equalColorObjects = (first: ObjectColor, second: ObjectColor): boolean => {\n if (first === second) return true;\n\n for (const prop in first) {\n // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)\n // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)\n // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,\n // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if\n // there is or not), and then as a type TS can iterate over.\n if (\n ((first as unknown) as Record<string, number>)[prop] !==\n ((second as unknown) as Record<string, number>)[prop]\n )\n return false;\n }\n\n return true;\n};\n\nexport const equalColorString = (first: string, second: string): boolean => {\n return first.replace(/\\s/g, \"\") === second.replace(/\\s/g, \"\");\n};\n\nexport const equalHex = (first: string, second: string): boolean => {\n if (first.toLowerCase() === second.toLowerCase()) return true;\n\n // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects\n return equalColorObjects(hexToRgba(first), hexToRgba(second));\n};\n","import { useRef } from \"react\";\n\n// Saves incoming handler to the ref in order to avoid \"useCallback hell\"\nexport function useEventCallback<T>(handler?: (value: T) => void): (value: T) => void {\n const callbackRef = useRef(handler);\n const fn = useRef((value: T) => {\n callbackRef.current && callbackRef.current(value);\n });\n callbackRef.current = handler;\n\n return fn.current;\n}\n","import { memo, type HTMLAttributes, type ReactNode } from \"react\";\nimport { clamp } from \"../utils/clamp\";\nimport { round } from \"../utils/round\";\nimport { Interactive } from \"./Interactive\";\nimport { Pointer } from \"./Pointer\";\nimport type { HsvaColor, RenderPointerArgs } from \"../types\";\n\nexport interface HueProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n hue: number;\n onChange: (params: Partial<HsvaColor>) => void;\n renderPointer?: (args: RenderPointerArgs) => ReactNode;\n}\n\nexport const Hue = memo(function Hue({\n hue,\n onChange,\n renderPointer,\n style,\n ...rest\n}: HueProps) {\n const handleMove = ({ left }: { left: number }) => onChange({ h: 360 * left });\n const handleKey = ({ left }: { left: number }) =>\n onChange({ h: clamp(hue + left * 360, 0, 360) });\n\n return (\n <Interactive\n onMove={handleMove}\n onKey={handleKey}\n aria-label=\"Hue\"\n aria-valuenow={round(hue)}\n aria-valuemax={360}\n aria-valuemin={0}\n style={{\n background:\n \"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)\",\n ...style,\n }}\n {...rest}\n >\n {renderPointer ? (\n renderPointer({ left: hue / 360, top: 0.5, hue })\n ) : (\n <Pointer left={hue / 360} />\n )}\n </Interactive>\n );\n});\n","// Clamps a value between an upper and lower bound.\n// We use ternary operators because it makes the minified code\n// 2 times shorter then `Math.min(Math.max(a,b),c)`\nexport const clamp = (number: number, min = 0, max = 1): number => {\n return number > max ? max : number < min ? min : number;\n};\n","import { memo, useEffect, useMemo, useRef } from \"react\";\nimport { useEventCallback } from \"../hooks/useEventCallback\";\nimport { clamp } from \"../utils/clamp\";\n\nimport type {\n KeyboardEvent,\n MouseEvent as ReactMouseEvent,\n TouchEvent as ReactTouchEvent,\n HTMLAttributes,\n CSSProperties,\n} from \"react\";\n\ntype PointerEvent =\n | MouseEvent\n | TouchEvent\n | ReactMouseEvent<HTMLDivElement>\n | ReactTouchEvent<HTMLDivElement>;\n\ntype Position = {\n left: number;\n top: number;\n};\n\ntype InteractiveProps = HTMLAttributes<HTMLDivElement> & {\n onMove: (pos: Position) => void;\n onKey: (delta: Position) => void;\n children?: React.ReactNode;\n};\n\nconst isTouch = (e: PointerEvent): e is TouchEvent | ReactTouchEvent<HTMLDivElement> =>\n \"touches\" in e;\n\nconst getParentWindow = (node: HTMLElement | null): Window =>\n node?.ownerDocument?.defaultView ?? window;\n\nconst getRelativePosition = (\n node: HTMLElement,\n event: PointerEvent,\n touchId: number | null\n): Position => {\n const rect = node.getBoundingClientRect();\n\n const pointer = isTouch(event)\n ? Array.from(event.touches).find((t) => t.identifier === touchId) ??\n event.touches[0]\n : event;\n\n return {\n left: clamp(\n (pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) /\n rect.width\n ),\n top: clamp(\n (pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) /\n rect.height\n ),\n };\n};\n\nexport const Interactive = memo(function Interactive({\n onMove,\n onKey,\n children,\n style,\n ...rest\n}: InteractiveProps) {\n const container = useRef<HTMLDivElement | null>(null);\n\n const onMoveCallback = useEventCallback(onMove);\n const onKeyCallback = useEventCallback(onKey);\n\n const touchId = useRef<number | null>(null);\n const hasTouch = useRef(false);\n\n const [handleMoveStart, handleKeyDown, toggleDocumentEvents] = useMemo(() => {\n const handleMoveStart = ({\n nativeEvent,\n }: ReactMouseEvent<HTMLDivElement> | ReactTouchEvent<HTMLDivElement>) => {\n const el = container.current;\n if (!el) return;\n\n if (!isTouch(nativeEvent)) nativeEvent.preventDefault();\n\n if (hasTouch.current && !isTouch(nativeEvent)) return;\n\n if (isTouch(nativeEvent)) {\n hasTouch.current = true;\n touchId.current =\n nativeEvent.changedTouches?.[0]?.identifier ?? null;\n }\n\n el.focus();\n\n onMoveCallback(\n getRelativePosition(el, nativeEvent, touchId.current)\n );\n\n toggleDocumentEvents(true);\n };\n\n const handleMove = (event: MouseEvent | TouchEvent) => {\n if (!isTouch(event)) event.preventDefault();\n\n const isDown = isTouch(event)\n ? event.touches.length > 0\n : event.buttons > 0;\n\n if (isDown && container.current) {\n onMoveCallback(\n getRelativePosition(\n container.current,\n event,\n touchId.current\n )\n );\n } else {\n toggleDocumentEvents(false);\n }\n };\n\n const handleMoveEnd = () => {\n hasTouch.current = false;\n touchId.current = null;\n toggleDocumentEvents(false);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n const k = event.key;\n\n if (\n ![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(k)\n ) {\n return;\n }\n\n event.preventDefault();\n\n onKeyCallback({\n left:\n k === \"ArrowRight\"\n ? 0.05\n : k === \"ArrowLeft\"\n ? -0.05\n : 0,\n top:\n k === \"ArrowDown\"\n ? 0.05\n : k === \"ArrowUp\"\n ? -0.05\n : 0,\n });\n };\n\n function toggleDocumentEvents(state: boolean) {\n const el = container.current;\n const win = getParentWindow(el);\n\n const method = state\n ? win.addEventListener.bind(win)\n : win.removeEventListener.bind(win);\n\n if (hasTouch.current) {\n method(\"touchmove\", handleMove);\n method(\"touchend\", handleMoveEnd);\n } else {\n method(\"mousemove\", handleMove);\n method(\"mouseup\", handleMoveEnd);\n }\n }\n\n return [handleMoveStart, handleKeyDown, toggleDocumentEvents] as const;\n }, [onKeyCallback, onMoveCallback]);\n\n useEffect(() => {\n return () => toggleDocumentEvents(false);\n }, [toggleDocumentEvents]);\n\n return (\n <div\n {...rest}\n ref={container}\n onMouseDown={handleMoveStart}\n onTouchStart={handleMoveStart}\n onKeyDown={handleKeyDown}\n tabIndex={0}\n role=\"slider\"\n style={\n {\n position: \"relative\",\n cursor: \"crosshair\",\n outline: \"none\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </div>\n );\n});\n","import type {\n CSSProperties,\n HTMLAttributes,\n ReactNode,\n} from \"react\";\n\ntype PointerProps = HTMLAttributes<HTMLDivElement> & {\n left: number;\n top?: number;\n children?: ReactNode;\n};\n\nexport const Pointer = function Pointer({\n left,\n top = 0.5,\n children,\n style,\n ...rest\n}: PointerProps) {\n return (\n <div\n {...rest}\n style={\n {\n position: \"absolute\",\n left: `${left * 100}%`,\n top: `${top * 100}%`,\n transform: \"translate(-50%, -50%)\",\n ...style,\n } as CSSProperties\n }\n >\n {children}\n </div>\n );\n};\n","import { memo, type HTMLAttributes, type ReactNode } from \"react\";\nimport { clamp } from \"../utils/clamp\";\nimport { hsvaToHueHsl } from \"../utils/convert\";\nimport { round } from \"../utils/round\";\nimport { Interactive } from \"./Interactive\";\nimport { Pointer } from \"./Pointer\";\nimport type { HsvaColor, RenderPointerArgs } from \"../types\";\n\nexport interface SaturationProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n hsva: HsvaColor;\n onChange: (params: Partial<HsvaColor>) => void;\n renderPointer?: (args: RenderPointerArgs) => ReactNode;\n}\n\nexport const Saturation = memo(function Saturation({\n hsva,\n onChange,\n style,\n renderPointer,\n ...rest\n}: SaturationProps) {\n const handleMove = ({ left, top }: { left: number; top: number }) =>\n onChange({ s: left * 100, v: 100 - top * 100 });\n\n const handleKey = ({ left, top }: { left: number; top: number }) =>\n onChange({\n s: clamp(hsva.s + left * 100, 0, 100),\n v: clamp(hsva.v - top * 100, 0, 100),\n });\n\n return (\n <Interactive\n onMove={handleMove}\n onKey={handleKey}\n aria-label=\"Color\"\n aria-valuetext={`Saturation ${round(hsva.s)}%, Brightness ${round(hsva.v)}%`}\n style={{\n width: \"100%\",\n height: \"100%\",\n background: `\n linear-gradient(to top, #000, transparent),\n linear-gradient(to right, #fff, transparent),\n ${hsvaToHueHsl(hsva.h)}\n `,\n ...style,\n }}\n {...rest}\n >\n {renderPointer ? (\n renderPointer({ left: hsva.s / 100, top: 1 - hsva.v / 100, hsva })\n ) : (\n <Pointer left={hsva.s / 100} top={1 - hsva.v / 100} />\n )}\n </Interactive>\n );\n});\n","import { memo, type HTMLAttributes, type ReactNode } from \"react\";\nimport { clamp } from \"../utils/clamp\";\nimport { round } from \"../utils/round\";\nimport { Interactive } from \"./Interactive\";\nimport { Pointer } from \"./Pointer\";\nimport type { HsvaColor, RenderPointerArgs } from \"../types\";\n\nexport interface AlphaProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n hsva: HsvaColor;\n onChange: (params: Partial<HsvaColor>) => void;\n renderPointer?: (args: RenderPointerArgs) => ReactNode;\n}\n\nexport const Alpha = memo(function Alpha({\n hsva,\n onChange,\n renderPointer,\n style,\n ...rest\n}: AlphaProps) {\n const handleMove = ({ left }: { left: number }) => onChange({ a: left });\n const handleKey = ({ left }: { left: number }) =>\n onChange({ a: clamp(hsva.a + left) });\n\n const colorFrom = `hsla(${Math.round(hsva.h)}, 100%, 50%, 0)`;\n const colorTo = `hsla(${Math.round(hsva.h)}, 100%, 50%, 1)`;\n\n return (\n <div\n style={{\n position: \"relative\",\n backgroundImage: `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23ccc'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ccc'/%3E%3C/svg%3E\")`,\n ...style,\n }}\n >\n <Interactive\n onMove={handleMove}\n onKey={handleKey}\n aria-label=\"Alpha\"\n aria-valuenow={round(hsva.a * 100)}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuetext={`${round(hsva.a * 100)}%`}\n style={{\n width: \"100%\",\n height: \"100%\",\n background: `linear-gradient(90deg, ${colorFrom}, ${colorTo})`,\n }}\n {...rest}\n >\n {renderPointer ? (\n renderPointer({ left: hsva.a, top: 0.5, hsva })\n ) : (\n <Pointer left={hsva.a} />\n )}\n </Interactive>\n </div>\n );\n});\n","import type { HTMLAttributes, ReactNode } from \"react\";\nimport { useColorManipulation } from \"../hooks/useColorManipulation\";\nimport { Hue } from \"./Hue\";\nimport { Saturation } from \"./Saturation\";\nimport type { AnyColor, ColorModel, HsvaColor, RenderPointerArgs } from \"../types\";\nimport { Alpha } from \"./Alpha\";\nimport { Pointer } from \"./Pointer\";\n\nexport interface ColorPickerRenderProps {\n hsva: HsvaColor;\n updateHsva: (params: Partial<HsvaColor>) => void;\n Saturation: typeof Saturation;\n Hue: typeof Hue;\n Alpha: typeof Alpha;\n Pointer: typeof Pointer;\n}\n\nexport interface ColorPickerProps<T extends AnyColor>\n extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onChange\" | \"children\" | \"color\"\n > {\n colorModel: ColorModel<T>;\n color: T;\n onChange?: (color: T) => void;\n children?: (renderProps: ColorPickerRenderProps) => ReactNode;\n renderSaturationPointer?: (args: RenderPointerArgs) => ReactNode;\n renderHuePointer?: (args: RenderPointerArgs) => ReactNode;\n}\n\nexport function ColorPicker<T extends AnyColor>({\n colorModel,\n color,\n onChange,\n children,\n renderSaturationPointer,\n renderHuePointer,\n ...rest\n}: ColorPickerProps<T>) {\n const [hsva, updateHsva] = useColorManipulation(colorModel, color, onChange);\n\n if (children) {\n return (\n <>\n {children({ hsva, updateHsva, Saturation, Hue, Alpha, Pointer })}\n </>\n );\n }\n\n return (\n <div {...rest}>\n <Saturation\n hsva={hsva}\n onChange={updateHsva}\n renderPointer={renderSaturationPointer}\n style={{ width: \"100%\", aspectRatio: \"1\", borderRadius: \"4px 4px 0 0\" }}\n />\n <Hue\n hue={hsva.h}\n onChange={updateHsva}\n renderPointer={renderHuePointer}\n style={{ width: \"100%\", height: 24, borderRadius: \"0 0 4px 4px\", marginTop: 4 }}\n />\n </div>\n );\n}\n","import type { ColorModel } from \"../types\";\nimport { equalHex } from \"../utils/compare\";\nimport { hexToHsva, hsvaToHex } from \"../utils/convert\";\nimport { ColorPicker, type ColorPickerProps } from \"./ColorPicker\";\n\nexport interface HexColorPickerProps\n extends Omit<ColorPickerProps<string>, \"colorModel\"> { }\n\nexport const hexColorModel: ColorModel<string> = {\n defaultColor: \"#ff0000\",\n toHsva: hexToHsva,\n fromHsva: (hsva) => hsvaToHex(hsva),\n equal: equalHex,\n};\n\nexport function HexColorPicker({\n color = \"#ff0000\",\n ...rest\n}: HexColorPickerProps) {\n return <ColorPicker colorModel={hexColorModel} color={color} {...rest} />;\n}\n","const matcher = /^#?([0-9A-F]{3,8})$/i;\n\nexport const validHex = (value: string, alpha?: boolean): boolean => {\n const match = matcher.exec(value);\n const length = match ? match[1].length : 0;\n\n return (\n length === 3 || // '#rgb' format\n length === 6 || // '#rrggbb' format\n (!!alpha && length === 4) || // '#rgba' format\n (!!alpha && length === 8) // '#rrggbbaa' format\n );\n};\n","declare const __webpack_nonce__: string | undefined;\nlet nonce: string | undefined;\n\n/**\n * Returns a nonce hash included by Webpack or the one defined manually by developer.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce\n * https://webpack.js.org/guides/csp/\n */\nexport const getNonce = (): string | undefined => {\n if (nonce) return nonce;\n if (typeof __webpack_nonce__ !== \"undefined\") return __webpack_nonce__;\n return undefined;\n};\n\n/**\n * Signs the style tag with a base64-encoded string (nonce) to conforms to Content Security Policies.\n * This function has to be invoked before any picker is rendered if you aren't using Webpack for CSP.\n */\nexport const setNonce = (hash: string): void => {\n nonce = hash;\n};\n","export const formatClassName = (names: unknown[]): string => names.filter(Boolean).join(\" \");\n"],"mappings":"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","names":["useRef","matcher","useRef","memo","useEffect","useRef","Interactive","useRef","handleMoveStart","toggleDocumentEvents","handleKeyDown","useEffect","jsx","Pointer","jsx","memo","Hue","memo","jsx","memo","Saturation","memo","jsx","memo","Alpha","jsx","jsx"]}

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "name": "react-headless-color-picker",
+  "version": "1.0.0",
+  "description": "Headless React color picker",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": {
+    "name": "Orlando Cana",
+    "url": "https://github.com/Centinela2go"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Centinela2go/react-headless-color-picker.git"
+  },
+  "homepage": "https://github.com/Centinela2go/react-headless-color-picker",
+  "bugs": {
+    "url": "https://github.com/Centinela2go/react-headless-color-picker/issues"
+  },
+  "funding": "https://github.com/sponsors/Centinela2go",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "keywords": [
+    "react",
+    "color-picker",
+    "headless-ui",
+    "typescript"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}