@chayns-components/color-picker 5.5.30 → 5.5.34

package/lib/esm/components/hue-slider/HueSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"HueSlider.js","names":["hslToRgb255","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","hexToRgb","isValidRGBA","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","onChange","onStart","onEnd","opacity","color","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HueSlider.js","names":["hslToRgb255","useFocusRingPortal","useKeyboardFocusHighlighting","setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","convertColorToHsl","extractHsl","hexToRgb","isValidRGBA","splitRgb","StyledHueSlider","StyledHueSliderInput","StyledHueSliderThumb","HueSlider","onChange","onStart","onEnd","opacity","color","shouldEnableKeyboardHighlighting","editedValue","setEditedValue","hslColor","setHslColor","internalOpacity","setInternalOpacity","sliderThumbRef","sliderRef","shouldShowKeyboardHighlighting","isEnabled","overlayRef","shape","padding","rgb","r","g","b","a","hsl","match","toString","parseInt","handleInputChange","event","Number","target","value","percentage","hue","saturation","lightness","h","s","l","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/hue-slider/HueSlider.tsx"],"sourcesContent":["import { hslToRgb255 } from '@chayns/colors';\nimport { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport { setRefreshScrollEnabled } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { convertColorToHsl, extractHsl, hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport { StyledHueSlider, StyledHueSliderInput, StyledHueSliderThumb } from './HueSlider.styles';\n\nexport type HueSliderProps = {\n    /**\n     * The color that should be selected.\n     */\n    color?: CSSProperties['color'];\n    /**\n     * Function that will be executed when the color is changed.\n     */\n    onChange?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is ending to change.\n     */\n    onEnd?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * Function that will be executed when the color is starting to change.\n     */\n    onStart?: (rgb: CSSProperties['color'], hsl: CSSProperties['color']) => void;\n    /**\n     * The opacity of the Color. Is used if the color has no opacity value.\n     */\n    opacity?: number;\n    /**\n     * Enables keyboard-only focus highlighting for the slider.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst HueSlider: FC<HueSliderProps> = ({\n    onChange,\n    onStart,\n    onEnd,\n    opacity,\n    color = 'rgba(255, 0, 0, 1)',\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [hslColor, setHslColor] = useState<CSSProperties['color']>('hsl(0, 0, 100)');\n    const [internalOpacity, setInternalOpacity] = useState(1);\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(sliderRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        overlayRef: sliderThumbRef,\n        shape: 'circle',\n        padding: 3,\n    });\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            setInternalOpacity(a);\n\n            const hsl = convertColorToHsl(`rgba(${r}, ${g}, ${b}, 1)`);\n            const match = hsl?.toString().match(/hsl\\((\\d+),\\s*([\\d.]+)%,\\s*([\\d.]+)%\\)/);\n\n            if (!match || !match[1]) {\n                return;\n            }\n\n            setHslColor(`hsl(${match[1]}, 100%, 50%)`);\n            setEditedValue(parseInt(match[1], 10));\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setEditedValue(Number(event.target.value));\n\n            const percentage = (Number(event.target.value) / 360) * 100;\n            const hue = (percentage / 100) * 360;\n            const saturation = 100;\n            const lightness = 50;\n\n            const hsl = `hsl(${hue}, ${saturation}%, ${lightness}%)`;\n            setHslColor(hsl);\n\n            if (typeof onChange === 'function') {\n                const rgb = hslToRgb255({ h: hue, s: 1, l: 0.5 });\n\n                if (!rgb) {\n                    return;\n                }\n\n                onChange(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity ?? internalOpacity})`, hsl);\n            }\n        },\n        [internalOpacity, onChange, opacity],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 360) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onStart(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onStart, opacity]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function' && hslColor) {\n            const hsl = extractHsl(hslColor);\n\n            if (!hsl) {\n                return;\n            }\n\n            const rgb = hslToRgb255(hsl);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            onEnd(`rgba(${r}, ${g}, ${b}, ${opacity ?? internalOpacity})`, hslColor);\n        }\n    }, [hslColor, internalOpacity, onEnd, opacity]);\n\n    return useMemo(\n        () => (\n            <StyledHueSlider>\n                <StyledHueSliderInput\n                    ref={sliderRef}\n                    $color={hslColor}\n                    type=\"range\"\n                    min={0}\n                    max={360}\n                    value={editedValue}\n                    onChange={handleInputChange}\n                    onPointerDown={handleStart}\n                    onPointerUp={handleEnd}\n                />\n                <StyledHueSliderThumb\n                    ref={sliderThumbRef}\n                    $position={sliderThumbPosition}\n                    $color={hslColor}\n                />\n            </StyledHueSlider>\n        ),\n        [editedValue, handleEnd, handleInputChange, handleStart, hslColor, sliderThumbPosition],\n    );\n};\n\nHueSlider.displayName = 'HueSlider';\n\nexport default HueSlider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/transparency-slider/TransparencySlider.js

@@ -1,4 +1,5 @@
 import { setRefreshScrollEnabled } from 'chayns-api';
+import { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';
 import { StyledTransparencySlider, StyledTransparencySliderBackground, StyledTransparencySliderInput, StyledTransparencySliderThumb, StyledTransparencySliderThumbBackground, StyledTransparencySliderThumbWrapper } from './TransparencySlider.styles';
@@ -6,13 +7,21 @@ const TransparencySlider = ({
   onChange,
   onStart,
   onEnd,
-  color = 'rgba(255, 0, 0, 1)'
+  color = 'rgba(255, 0, 0, 1)',
+  shouldEnableKeyboardHighlighting
 }) => {
   const [editedValue, setEditedValue] = useState(0);
   const [pureColor, setPureColor] = useState();
   const [previewColor, setPreviewColor] = useState();
   const sliderThumbRef = useRef(null);
   const sliderRef = useRef(null);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(sliderRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: sliderThumbRef,
+    shape: 'circle',
+    padding: 3
+  });
   useEffect(() => {
     if (color) {
       let rgb;

package/lib/esm/components/transparency-slider/TransparencySlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","hexToRgb","isValidRGBA","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","onChange","onStart","onEnd","color","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,OAAOC,KAAK,IAAiBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC7F,SAASC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AACnE,SACIC,wBAAwB,EACxBC,kCAAkC,EAClCC,6BAA6B,EAC7BC,6BAA6B,EAC7BC,uCAAuC,EACvCC,oCAAoC,QACjC,6BAA6B;AAqBpC,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK,GAAG;AACa,CAAC,KAAK;EAC3B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;EACjD,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAGlB,QAAQ,CAAS,CAAC;EACpD,MAAM,CAACmB,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAS,CAAC;EAE1D,MAAMqB,cAAc,GAAGtB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMuB,SAAS,GAAGvB,MAAM,CAAmB,IAAI,CAAC;EAEhDF,SAAS,CAAC,MAAM;IACZ,IAAIiB,KAAK,EAAE;MACP,IAAIS,GAAG;MAEP,IAAIrB,WAAW,CAACY,KAAK,CAAC,EAAE;QACpBS,GAAG,GAAGpB,QAAQ,CAACW,KAAK,CAAC;MACzB,CAAC,MAAM;QACHS,GAAG,GAAGtB,QAAQ,CAACa,KAAK,CAAC;MACzB;MAEA,IAAI,CAACS,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGJ,GAAG;MAE1B,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKC,CAAC,GAAG;MAE/CP,eAAe,CAACQ,QAAQ,CAAC;MACzBV,YAAY,CAAC,OAAOM,CAAC,IAAIC,CAAC,IAAIC,CAAC,KAAK,CAAC;MACrCV,cAAc,CAAC,GAAG,GAAGW,CAAC,GAAG,GAAG,CAAC;IACjC;EACJ,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,MAAMe,iBAAiB,GAAGjC,WAAW,CAChCkC,KAAoC,IAAK;IACtC,MAAMH,CAAC,GAAGI,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;IAEpCjB,cAAc,CAACW,CAAC,CAAC;IAEjB,MAAMJ,GAAG,GAAGpB,QAAQ,CAACc,SAAS,CAAC;IAE/B,IAAI,CAACM,GAAG,EAAE;MACN;IACJ;IAEA,MAAM;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAC,GAAGH,GAAG;IAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGC,CAAC,IAAI,GAAG,GAAG;IAE7DP,eAAe,CAACQ,QAAQ,CAAC;IAEzB,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACiB,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACjB,QAAQ,EAAEM,SAAS,CACxB,CAAC;EAED,MAAMiB,mBAAmB,GAAGpC,OAAO,CAAC,MAAM;IACtC,IAAIwB,SAAS,CAACa,OAAO,IAAId,cAAc,CAACc,OAAO,EAAE;MAC7C,OACKpB,WAAW,GAAG,GAAG,IACjBO,SAAS,CAACa,OAAO,CAACC,WAAW,GAAGf,cAAc,CAACc,OAAO,CAACC,WAAW,GAAG,CAAC,CAAC;IAEhF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAACrB,WAAW,CAAC,CAAC;EAEjB,MAAMsB,WAAW,GAAGzC,WAAW,CAAC,MAAM;IAClC,KAAKF,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,OAAOkB,OAAO,KAAK,UAAU,EAAE;MAC/B,MAAMW,GAAG,GAAGpB,QAAQ,CAACc,SAAS,CAAC;MAE/B,IAAI,CAACM,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGX,WAAW,IAAI,GAAG,GAAG;MAEvEH,OAAO,CAACgB,QAAQ,CAAC;IACrB;EACJ,CAAC,EAAE,CAACb,WAAW,EAAEH,OAAO,EAAEK,SAAS,CAAC,CAAC;EAErC,MAAMqB,SAAS,GAAG1C,WAAW,CAAC,MAAM;IAChC,KAAKF,uBAAuB,CAAC,IAAI,CAAC;IAElC,IAAI,OAAOmB,KAAK,KAAK,UAAU,EAAE;MAC7B,MAAMU,GAAG,GAAGpB,QAAQ,CAACc,SAAS,CAAC;MAE/B,IAAI,CAACM,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGX,WAAW,IAAI,GAAG,GAAG;MAEvEF,KAAK,CAACe,QAAQ,CAAC;IACnB;EACJ,CAAC,EAAE,CAACb,WAAW,EAAEF,KAAK,EAAEI,SAAS,CAAC,CAAC;EAEnC,oBACItB,KAAA,CAAA4C,aAAA,CAACnC,wBAAwB,qBACrBT,KAAA,CAAA4C,aAAA,CAACjC,6BAA6B;IAC1BkC,GAAG,EAAElB,SAAU;IACfmB,MAAM,EAAExB,SAAU;IAClByB,IAAI,EAAC,OAAO;IACZC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTX,KAAK,EAAElB,WAAY;IACnB8B,aAAa,EAAER,WAAY;IAC3BS,WAAW,EAAER,SAAU;IACvB3B,QAAQ,EAAEkB;EAAkB,CAC/B,CAAC,eACFlC,KAAA,CAAA4C,aAAA,CAAClC,kCAAkC,MAAE,CAAC,eACtCV,KAAA,CAAA4C,aAAA,CAAC9B,oCAAoC;IACjC+B,GAAG,EAAEnB,cAAe;IACpB0B,SAAS,EAAEb;EAAoB,gBAE/BvC,KAAA,CAAA4C,aAAA,CAAC/B,uCAAuC,MAAE,CAAC,eAC3Cb,KAAA,CAAA4C,aAAA,CAAChC,6BAA6B;IAACkC,MAAM,EAAEtB;EAAa,CAAE,CACpB,CAChB,CAAC;AAEnC,CAAC;AAEDT,kBAAkB,CAACsC,WAAW,GAAG,oBAAoB;AAErD,eAAetC,kBAAkB","ignoreList":[]}
+{"version":3,"file":"TransparencySlider.js","names":["setRefreshScrollEnabled","useFocusRingPortal","useKeyboardFocusHighlighting","React","useCallback","useEffect","useMemo","useRef","useState","hexToRgb","isValidRGBA","splitRgb","StyledTransparencySlider","StyledTransparencySliderBackground","StyledTransparencySliderInput","StyledTransparencySliderThumb","StyledTransparencySliderThumbBackground","StyledTransparencySliderThumbWrapper","TransparencySlider","onChange","onStart","onEnd","color","shouldEnableKeyboardHighlighting","editedValue","setEditedValue","pureColor","setPureColor","previewColor","setPreviewColor","sliderThumbRef","sliderRef","shouldShowKeyboardHighlighting","isEnabled","overlayRef","shape","padding","rgb","r","g","b","a","newColor","handleInputChange","event","Number","target","value","sliderThumbPosition","current","offsetWidth","handleStart","handleEnd","createElement","ref","$color","type","min","max","onPointerDown","onPointerUp","$position","displayName"],"sources":["../../../../src/components/transparency-slider/TransparencySlider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport { useFocusRingPortal, useKeyboardFocusHighlighting } from '@chayns-components/core';\nimport React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { hexToRgb, isValidRGBA, splitRgb } from '../../utils/color';\nimport {\n    StyledTransparencySlider,\n    StyledTransparencySliderBackground,\n    StyledTransparencySliderInput,\n    StyledTransparencySliderThumb,\n    StyledTransparencySliderThumbBackground,\n    StyledTransparencySliderThumbWrapper,\n} from './TransparencySlider.styles';\n\ninterface TransparencySliderProps {\n    /**\n     * The color that should be selected.\n     */\n    color?: string;\n    /**\n     * Function that will be executed when the opacity is changed.\n     */\n    onChange?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is ending to change.\n     */\n    onEnd?: (color: string) => void;\n    /**\n     * Function that will be executed when the opacity is starting to change.\n     */\n    onStart?: (color: string) => void;\n    /**\n     * Enables keyboard-only focus highlighting for the slider.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n}\n\nconst TransparencySlider = ({\n    onChange,\n    onStart,\n    onEnd,\n    color = 'rgba(255, 0, 0, 1)',\n    shouldEnableKeyboardHighlighting,\n}: TransparencySliderProps) => {\n    const [editedValue, setEditedValue] = useState(0);\n    const [pureColor, setPureColor] = useState<string>();\n    const [previewColor, setPreviewColor] = useState<string>();\n\n    const sliderThumbRef = useRef<HTMLDivElement>(null);\n    const sliderRef = useRef<HTMLInputElement>(null);\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting,\n    );\n\n    useFocusRingPortal(sliderRef, {\n        isEnabled: shouldShowKeyboardHighlighting,\n        overlayRef: sliderThumbRef,\n        shape: 'circle',\n        padding: 3,\n    });\n\n    useEffect(() => {\n        if (color) {\n            let rgb;\n\n            if (isValidRGBA(color)) {\n                rgb = splitRgb(color);\n            } else {\n                rgb = hexToRgb(color);\n            }\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b, a } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n            setPreviewColor(newColor);\n            setPureColor(`rgb(${r},${g},${b},1)`);\n            setEditedValue(100 - a * 100);\n        }\n    }, [color]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const a = Number(event.target.value);\n\n            setEditedValue(a);\n\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - a) / 100})`;\n\n            setPreviewColor(newColor);\n\n            if (typeof onChange === 'function') {\n                onChange(newColor);\n            }\n        },\n        [onChange, pureColor],\n    );\n\n    const sliderThumbPosition = useMemo(() => {\n        if (sliderRef.current && sliderThumbRef.current) {\n            return (\n                (editedValue / 100) *\n                (sliderRef.current.offsetWidth - sliderThumbRef.current.offsetWidth / 2)\n            );\n        }\n        return 0;\n    }, [editedValue]);\n\n    const handleStart = useCallback(() => {\n        void setRefreshScrollEnabled(false);\n\n        if (typeof onStart === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onStart(newColor);\n        }\n    }, [editedValue, onStart, pureColor]);\n\n    const handleEnd = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        if (typeof onEnd === 'function') {\n            const rgb = splitRgb(pureColor);\n\n            if (!rgb) {\n                return;\n            }\n\n            const { r, g, b } = rgb;\n\n            const newColor = `rgba(${r}, ${g}, ${b}, ${(100 - editedValue) / 100})`;\n\n            onEnd(newColor);\n        }\n    }, [editedValue, onEnd, pureColor]);\n\n    return (\n        <StyledTransparencySlider>\n            <StyledTransparencySliderInput\n                ref={sliderRef}\n                $color={pureColor}\n                type=\"range\"\n                min={0}\n                max={100}\n                value={editedValue}\n                onPointerDown={handleStart}\n                onPointerUp={handleEnd}\n                onChange={handleInputChange}\n            />\n            <StyledTransparencySliderBackground />\n            <StyledTransparencySliderThumbWrapper\n                ref={sliderThumbRef}\n                $position={sliderThumbPosition}\n            >\n                <StyledTransparencySliderThumbBackground />\n                <StyledTransparencySliderThumb $color={previewColor} />\n            </StyledTransparencySliderThumbWrapper>\n        </StyledTransparencySlider>\n    );\n};\n\nTransparencySlider.displayName = 'TransparencySlider';\n\nexport default TransparencySlider;\n"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,YAAY;AACpD,SAASC,kBAAkB,EAAEC,4BAA4B,QAAQ,yBAAyB;AAC1F,OAAOC,KAAK,IAAiBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC7F,SAASC,QAAQ,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,mBAAmB;AACnE,SACIC,wBAAwB,EACxBC,kCAAkC,EAClCC,6BAA6B,EAC7BC,6BAA6B,EAC7BC,uCAAuC,EACvCC,oCAAoC,QACjC,6BAA6B;AAyBpC,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,KAAK,GAAG,oBAAoB;EAC5BC;AACqB,CAAC,KAAK;EAC3B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGjB,QAAQ,CAAC,CAAC,CAAC;EACjD,MAAM,CAACkB,SAAS,EAAEC,YAAY,CAAC,GAAGnB,QAAQ,CAAS,CAAC;EACpD,MAAM,CAACoB,YAAY,EAAEC,eAAe,CAAC,GAAGrB,QAAQ,CAAS,CAAC;EAE1D,MAAMsB,cAAc,GAAGvB,MAAM,CAAiB,IAAI,CAAC;EACnD,MAAMwB,SAAS,GAAGxB,MAAM,CAAmB,IAAI,CAAC;EAChD,MAAMyB,8BAA8B,GAAG9B,4BAA4B,CAC/DqB,gCACJ,CAAC;EAEDtB,kBAAkB,CAAC8B,SAAS,EAAE;IAC1BE,SAAS,EAAED,8BAA8B;IACzCE,UAAU,EAAEJ,cAAc;IAC1BK,KAAK,EAAE,QAAQ;IACfC,OAAO,EAAE;EACb,CAAC,CAAC;EAEF/B,SAAS,CAAC,MAAM;IACZ,IAAIiB,KAAK,EAAE;MACP,IAAIe,GAAG;MAEP,IAAI3B,WAAW,CAACY,KAAK,CAAC,EAAE;QACpBe,GAAG,GAAG1B,QAAQ,CAACW,KAAK,CAAC;MACzB,CAAC,MAAM;QACHe,GAAG,GAAG5B,QAAQ,CAACa,KAAK,CAAC;MACzB;MAEA,IAAI,CAACe,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGJ,GAAG;MAE1B,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKC,CAAC,GAAG;MAE/CZ,eAAe,CAACa,QAAQ,CAAC;MACzBf,YAAY,CAAC,OAAOW,CAAC,IAAIC,CAAC,IAAIC,CAAC,KAAK,CAAC;MACrCf,cAAc,CAAC,GAAG,GAAGgB,CAAC,GAAG,GAAG,CAAC;IACjC;EACJ,CAAC,EAAE,CAACnB,KAAK,CAAC,CAAC;EAEX,MAAMqB,iBAAiB,GAAGvC,WAAW,CAChCwC,KAAoC,IAAK;IACtC,MAAMH,CAAC,GAAGI,MAAM,CAACD,KAAK,CAACE,MAAM,CAACC,KAAK,CAAC;IAEpCtB,cAAc,CAACgB,CAAC,CAAC;IAEjB,MAAMJ,GAAG,GAAG1B,QAAQ,CAACe,SAAS,CAAC;IAE/B,IAAI,CAACW,GAAG,EAAE;MACN;IACJ;IAEA,MAAM;MAAEC,CAAC;MAAEC,CAAC;MAAEC;IAAE,CAAC,GAAGH,GAAG;IAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGC,CAAC,IAAI,GAAG,GAAG;IAE7DZ,eAAe,CAACa,QAAQ,CAAC;IAEzB,IAAI,OAAOvB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACuB,QAAQ,CAAC;IACtB;EACJ,CAAC,EACD,CAACvB,QAAQ,EAAEO,SAAS,CACxB,CAAC;EAED,MAAMsB,mBAAmB,GAAG1C,OAAO,CAAC,MAAM;IACtC,IAAIyB,SAAS,CAACkB,OAAO,IAAInB,cAAc,CAACmB,OAAO,EAAE;MAC7C,OACKzB,WAAW,GAAG,GAAG,IACjBO,SAAS,CAACkB,OAAO,CAACC,WAAW,GAAGpB,cAAc,CAACmB,OAAO,CAACC,WAAW,GAAG,CAAC,CAAC;IAEhF;IACA,OAAO,CAAC;EACZ,CAAC,EAAE,CAAC1B,WAAW,CAAC,CAAC;EAEjB,MAAM2B,WAAW,GAAG/C,WAAW,CAAC,MAAM;IAClC,KAAKJ,uBAAuB,CAAC,KAAK,CAAC;IAEnC,IAAI,OAAOoB,OAAO,KAAK,UAAU,EAAE;MAC/B,MAAMiB,GAAG,GAAG1B,QAAQ,CAACe,SAAS,CAAC;MAE/B,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGhB,WAAW,IAAI,GAAG,GAAG;MAEvEJ,OAAO,CAACsB,QAAQ,CAAC;IACrB;EACJ,CAAC,EAAE,CAAClB,WAAW,EAAEJ,OAAO,EAAEM,SAAS,CAAC,CAAC;EAErC,MAAM0B,SAAS,GAAGhD,WAAW,CAAC,MAAM;IAChC,KAAKJ,uBAAuB,CAAC,IAAI,CAAC;IAElC,IAAI,OAAOqB,KAAK,KAAK,UAAU,EAAE;MAC7B,MAAMgB,GAAG,GAAG1B,QAAQ,CAACe,SAAS,CAAC;MAE/B,IAAI,CAACW,GAAG,EAAE;QACN;MACJ;MAEA,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC;MAAE,CAAC,GAAGH,GAAG;MAEvB,MAAMK,QAAQ,GAAG,QAAQJ,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAK,CAAC,GAAG,GAAGhB,WAAW,IAAI,GAAG,GAAG;MAEvEH,KAAK,CAACqB,QAAQ,CAAC;IACnB;EACJ,CAAC,EAAE,CAAClB,WAAW,EAAEH,KAAK,EAAEK,SAAS,CAAC,CAAC;EAEnC,oBACIvB,KAAA,CAAAkD,aAAA,CAACzC,wBAAwB,qBACrBT,KAAA,CAAAkD,aAAA,CAACvC,6BAA6B;IAC1BwC,GAAG,EAAEvB,SAAU;IACfwB,MAAM,EAAE7B,SAAU;IAClB8B,IAAI,EAAC,OAAO;IACZC,GAAG,EAAE,CAAE;IACPC,GAAG,EAAE,GAAI;IACTX,KAAK,EAAEvB,WAAY;IACnBmC,aAAa,EAAER,WAAY;IAC3BS,WAAW,EAAER,SAAU;IACvBjC,QAAQ,EAAEwB;EAAkB,CAC/B,CAAC,eACFxC,KAAA,CAAAkD,aAAA,CAACxC,kCAAkC,MAAE,CAAC,eACtCV,KAAA,CAAAkD,aAAA,CAACpC,oCAAoC;IACjCqC,GAAG,EAAExB,cAAe;IACpB+B,SAAS,EAAEb;EAAoB,gBAE/B7C,KAAA,CAAAkD,aAAA,CAACrC,uCAAuC,MAAE,CAAC,eAC3Cb,KAAA,CAAAkD,aAAA,CAACtC,6BAA6B;IAACwC,MAAM,EAAE3B;EAAa,CAAE,CACpB,CAChB,CAAC;AAEnC,CAAC;AAEDV,kBAAkB,CAAC4C,WAAW,GAAG,oBAAoB;AAErD,eAAe5C,kBAAkB","ignoreList":[]}

package/lib/esm/hooks/useColorAreaKeyboardNavigation.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+export const useColorAreaKeyboardNavigation = ({
+  move,
+  onChangeStart,
+  onChangeEnd,
+  x,
+  y
+}) => useCallback(event => {
+  const step = event.shiftKey ? 10 : 1;
+  const horizontalChange = event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;
+  const verticalChange = event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;
+  if (horizontalChange === 0 && verticalChange === 0) {
+    return;
+  }
+  event.preventDefault();
+  onChangeStart();
+  move(x.get() + horizontalChange, y.get() + verticalChange);
+  onChangeEnd();
+}, [move, onChangeEnd, onChangeStart, x, y]);
+//# sourceMappingURL=useColorAreaKeyboardNavigation.js.map

package/lib/esm/hooks/useColorAreaKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColorAreaKeyboardNavigation.js","names":["useCallback","useColorAreaKeyboardNavigation","move","onChangeStart","onChangeEnd","x","y","event","step","shiftKey","horizontalChange","key","verticalChange","preventDefault","get"],"sources":["../../../src/hooks/useColorAreaKeyboardNavigation.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback } from 'react';\n\ntype UseColorAreaKeyboardNavigationOptions = {\n    move: (x: number, y: number) => void;\n    onChangeStart: VoidFunction;\n    onChangeEnd: VoidFunction;\n    x: { get: () => number };\n    y: { get: () => number };\n};\n\nexport const useColorAreaKeyboardNavigation = ({\n    move,\n    onChangeStart,\n    onChangeEnd,\n    x,\n    y,\n}: UseColorAreaKeyboardNavigationOptions) =>\n    useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            const step = event.shiftKey ? 10 : 1;\n            const horizontalChange =\n                event.key === 'ArrowLeft' ? -step : event.key === 'ArrowRight' ? step : 0;\n            const verticalChange =\n                event.key === 'ArrowUp' ? -step : event.key === 'ArrowDown' ? step : 0;\n\n            if (horizontalChange === 0 && verticalChange === 0) {\n                return;\n            }\n\n            event.preventDefault();\n            onChangeStart();\n            move(x.get() + horizontalChange, y.get() + verticalChange);\n            onChangeEnd();\n        },\n        [move, onChangeEnd, onChangeStart, x, y],\n    );\n"],"mappings":"AAAA,SAA6BA,WAAW,QAAQ,OAAO;AAUvD,OAAO,MAAMC,8BAA8B,GAAGA,CAAC;EAC3CC,IAAI;EACJC,aAAa;EACbC,WAAW;EACXC,CAAC;EACDC;AACmC,CAAC,KACpCN,WAAW,CACNO,KAAoC,IAAK;EACtC,MAAMC,IAAI,GAAGD,KAAK,CAACE,QAAQ,GAAG,EAAE,GAAG,CAAC;EACpC,MAAMC,gBAAgB,GAClBH,KAAK,CAACI,GAAG,KAAK,WAAW,GAAG,CAACH,IAAI,GAAGD,KAAK,CAACI,GAAG,KAAK,YAAY,GAAGH,IAAI,GAAG,CAAC;EAC7E,MAAMI,cAAc,GAChBL,KAAK,CAACI,GAAG,KAAK,SAAS,GAAG,CAACH,IAAI,GAAGD,KAAK,CAACI,GAAG,KAAK,WAAW,GAAGH,IAAI,GAAG,CAAC;EAE1E,IAAIE,gBAAgB,KAAK,CAAC,IAAIE,cAAc,KAAK,CAAC,EAAE;IAChD;EACJ;EAEAL,KAAK,CAACM,cAAc,CAAC,CAAC;EACtBV,aAAa,CAAC,CAAC;EACfD,IAAI,CAACG,CAAC,CAACS,GAAG,CAAC,CAAC,GAAGJ,gBAAgB,EAAEJ,CAAC,CAACQ,GAAG,CAAC,CAAC,GAAGF,cAAc,CAAC;EAC1DR,WAAW,CAAC,CAAC;AACjB,CAAC,EACD,CAACF,IAAI,EAAEE,WAAW,EAAED,aAAa,EAAEE,CAAC,EAAEC,CAAC,CAC3C,CAAC","ignoreList":[]}

package/lib/esm/hooks/usePresetColorKeyboardNavigation.js

@@ -0,0 +1,39 @@
+import { useCallback } from 'react';
+export const usePresetColorKeyboardNavigation = ({
+  onFocusChange
+}) => useCallback(event => {
+  const currentPreset = event.target instanceof HTMLElement ? event.target.closest('[data-preset-color-index]') : null;
+  if (!currentPreset || !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+    return;
+  }
+  event.preventDefault();
+  const currentIndex = Number(currentPreset.dataset.presetColorIndex);
+  const presets = Array.from(currentPreset.parentElement?.querySelectorAll('[data-preset-color-index]') ?? []);
+  const currentRect = currentPreset.getBoundingClientRect();
+  let nextPreset;
+  if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+    nextPreset = presets[currentIndex + (event.key === 'ArrowLeft' ? -1 : 1)];
+  } else {
+    const rowDirection = event.key === 'ArrowUp' ? -1 : 1;
+    const targetTop = currentRect.top + rowDirection * currentRect.height;
+    nextPreset = presets.filter(preset => {
+      const {
+        top
+      } = preset.getBoundingClientRect();
+      return rowDirection < 0 ? top < currentRect.top : top > currentRect.top;
+    }).sort((left, right) => {
+      const leftRect = left.getBoundingClientRect();
+      const rightRect = right.getBoundingClientRect();
+      const leftDistance = Math.abs(leftRect.top - targetTop) * 1000 + Math.abs(leftRect.left - currentRect.left);
+      const rightDistance = Math.abs(rightRect.top - targetTop) * 1000 + Math.abs(rightRect.left - currentRect.left);
+      return leftDistance - rightDistance;
+    })[0];
+  }
+  const nextIndex = Number(nextPreset?.dataset.presetColorIndex);
+  if (!Number.isFinite(nextIndex) || nextIndex === currentIndex) {
+    return;
+  }
+  onFocusChange(nextIndex);
+  nextPreset?.focus();
+}, [onFocusChange]);
+//# sourceMappingURL=usePresetColorKeyboardNavigation.js.map

package/lib/esm/hooks/usePresetColorKeyboardNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePresetColorKeyboardNavigation.js","names":["useCallback","usePresetColorKeyboardNavigation","onFocusChange","event","currentPreset","target","HTMLElement","closest","includes","key","preventDefault","currentIndex","Number","dataset","presetColorIndex","presets","Array","from","parentElement","querySelectorAll","currentRect","getBoundingClientRect","nextPreset","rowDirection","targetTop","top","height","filter","preset","sort","left","right","leftRect","rightRect","leftDistance","Math","abs","rightDistance","nextIndex","isFinite","focus"],"sources":["../../../src/hooks/usePresetColorKeyboardNavigation.ts"],"sourcesContent":["import { type KeyboardEvent, useCallback } from 'react';\n\ntype UsePresetColorKeyboardNavigationOptions = {\n    onFocusChange: (index: number) => void;\n};\n\nexport const usePresetColorKeyboardNavigation = ({\n    onFocusChange,\n}: UsePresetColorKeyboardNavigationOptions) =>\n    useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            const currentPreset =\n                event.target instanceof HTMLElement\n                    ? event.target.closest<HTMLElement>('[data-preset-color-index]')\n                    : null;\n\n            if (\n                !currentPreset ||\n                !['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)\n            ) {\n                return;\n            }\n\n            event.preventDefault();\n\n            const currentIndex = Number(currentPreset.dataset.presetColorIndex);\n            const presets = Array.from(\n                currentPreset.parentElement?.querySelectorAll<HTMLElement>(\n                    '[data-preset-color-index]',\n                ) ?? [],\n            );\n            const currentRect = currentPreset.getBoundingClientRect();\n            let nextPreset: HTMLElement | undefined;\n\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n                nextPreset = presets[currentIndex + (event.key === 'ArrowLeft' ? -1 : 1)];\n            } else {\n                const rowDirection = event.key === 'ArrowUp' ? -1 : 1;\n                const targetTop = currentRect.top + rowDirection * currentRect.height;\n\n                nextPreset = presets\n                    .filter((preset) => {\n                        const { top } = preset.getBoundingClientRect();\n                        return rowDirection < 0 ? top < currentRect.top : top > currentRect.top;\n                    })\n                    .sort((left, right) => {\n                        const leftRect = left.getBoundingClientRect();\n                        const rightRect = right.getBoundingClientRect();\n                        const leftDistance =\n                            Math.abs(leftRect.top - targetTop) * 1000 +\n                            Math.abs(leftRect.left - currentRect.left);\n                        const rightDistance =\n                            Math.abs(rightRect.top - targetTop) * 1000 +\n                            Math.abs(rightRect.left - currentRect.left);\n                        return leftDistance - rightDistance;\n                    })[0];\n            }\n\n            const nextIndex = Number(nextPreset?.dataset.presetColorIndex);\n\n            if (!Number.isFinite(nextIndex) || nextIndex === currentIndex) {\n                return;\n            }\n\n            onFocusChange(nextIndex);\n            nextPreset?.focus();\n        },\n        [onFocusChange],\n    );\n"],"mappings":"AAAA,SAA6BA,WAAW,QAAQ,OAAO;AAMvD,OAAO,MAAMC,gCAAgC,GAAGA,CAAC;EAC7CC;AACqC,CAAC,KACtCF,WAAW,CACNG,KAAoC,IAAK;EACtC,MAAMC,aAAa,GACfD,KAAK,CAACE,MAAM,YAAYC,WAAW,GAC7BH,KAAK,CAACE,MAAM,CAACE,OAAO,CAAc,2BAA2B,CAAC,GAC9D,IAAI;EAEd,IACI,CAACH,aAAa,IACd,CAAC,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAACI,QAAQ,CAACL,KAAK,CAACM,GAAG,CAAC,EAC1E;IACE;EACJ;EAEAN,KAAK,CAACO,cAAc,CAAC,CAAC;EAEtB,MAAMC,YAAY,GAAGC,MAAM,CAACR,aAAa,CAACS,OAAO,CAACC,gBAAgB,CAAC;EACnE,MAAMC,OAAO,GAAGC,KAAK,CAACC,IAAI,CACtBb,aAAa,CAACc,aAAa,EAAEC,gBAAgB,CACzC,2BACJ,CAAC,IAAI,EACT,CAAC;EACD,MAAMC,WAAW,GAAGhB,aAAa,CAACiB,qBAAqB,CAAC,CAAC;EACzD,IAAIC,UAAmC;EAEvC,IAAInB,KAAK,CAACM,GAAG,KAAK,WAAW,IAAIN,KAAK,CAACM,GAAG,KAAK,YAAY,EAAE;IACzDa,UAAU,GAAGP,OAAO,CAACJ,YAAY,IAAIR,KAAK,CAACM,GAAG,KAAK,WAAW,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;EAC7E,CAAC,MAAM;IACH,MAAMc,YAAY,GAAGpB,KAAK,CAACM,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC;IACrD,MAAMe,SAAS,GAAGJ,WAAW,CAACK,GAAG,GAAGF,YAAY,GAAGH,WAAW,CAACM,MAAM;IAErEJ,UAAU,GAAGP,OAAO,CACfY,MAAM,CAAEC,MAAM,IAAK;MAChB,MAAM;QAAEH;MAAI,CAAC,GAAGG,MAAM,CAACP,qBAAqB,CAAC,CAAC;MAC9C,OAAOE,YAAY,GAAG,CAAC,GAAGE,GAAG,GAAGL,WAAW,CAACK,GAAG,GAAGA,GAAG,GAAGL,WAAW,CAACK,GAAG;IAC3E,CAAC,CAAC,CACDI,IAAI,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;MACnB,MAAMC,QAAQ,GAAGF,IAAI,CAACT,qBAAqB,CAAC,CAAC;MAC7C,MAAMY,SAAS,GAAGF,KAAK,CAACV,qBAAqB,CAAC,CAAC;MAC/C,MAAMa,YAAY,GACdC,IAAI,CAACC,GAAG,CAACJ,QAAQ,CAACP,GAAG,GAAGD,SAAS,CAAC,GAAG,IAAI,GACzCW,IAAI,CAACC,GAAG,CAACJ,QAAQ,CAACF,IAAI,GAAGV,WAAW,CAACU,IAAI,CAAC;MAC9C,MAAMO,aAAa,GACfF,IAAI,CAACC,GAAG,CAACH,SAAS,CAACR,GAAG,GAAGD,SAAS,CAAC,GAAG,IAAI,GAC1CW,IAAI,CAACC,GAAG,CAACH,SAAS,CAACH,IAAI,GAAGV,WAAW,CAACU,IAAI,CAAC;MAC/C,OAAOI,YAAY,GAAGG,aAAa;IACvC,CAAC,CAAC,CAAC,CAAC,CAAC;EACb;EAEA,MAAMC,SAAS,GAAG1B,MAAM,CAACU,UAAU,EAAET,OAAO,CAACC,gBAAgB,CAAC;EAE9D,IAAI,CAACF,MAAM,CAAC2B,QAAQ,CAACD,SAAS,CAAC,IAAIA,SAAS,KAAK3B,YAAY,EAAE;IAC3D;EACJ;EAEAT,aAAa,CAACoC,SAAS,CAAC;EACxBhB,UAAU,EAAEkB,KAAK,CAAC,CAAC;AACvB,CAAC,EACD,CAACtC,aAAa,CAClB,CAAC","ignoreList":[]}

package/lib/types/components/color-picker/ColorPicker.d.ts

@@ -66,9 +66,13 @@ interface ColorPickerProps {
      * The alignment of the popup
      */
     alignment?: PopupAlignment;
+    /**
+     * Enables keyboard-only focus highlighting for color picker controls.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 }
 declare const ColorPicker: {
-    ({ children, onPresetColorAdd, onPresetColorRemove, onSelect, shouldHideColorArea, shouldHideDefaultPresetColors, presetColors, selectedColor, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, alignment, }: ColorPickerProps): React.JSX.Element;
+    ({ children, onPresetColorAdd, onPresetColorRemove, onSelect, shouldHideColorArea, shouldHideDefaultPresetColors, presetColors, selectedColor, shouldShowAsPopup, shouldShowMoreOptions, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldShowTransparencySlider, shouldUseSiteColors, alignment, shouldEnableKeyboardHighlighting, }: ColorPickerProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPicker;

package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.d.ts

@@ -16,9 +16,10 @@ interface ColorPickerWrapperProps {
     shouldHideColorArea: boolean;
     shouldHideDefaultPresetColors: boolean;
     alignment?: PopupAlignment;
+    shouldEnableKeyboardHighlighting?: boolean;
 }
 declare const ColorPickerWrapper: {
-    ({ children, onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowAsPopup, shouldShowMoreOptions, shouldHideDefaultPresetColors, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldHideColorArea, shouldShowTransparencySlider, shouldUseSiteColors, alignment, }: ColorPickerWrapperProps): React.JSX.Element;
+    ({ children, onPresetColorAdd, onPresetColorRemove, presetColors, shouldShowAsPopup, shouldShowMoreOptions, shouldHideDefaultPresetColors, shouldShowPresetColors, shouldShowPreviewColorString, shouldShowRoundPreviewColor, shouldHideColorArea, shouldShowTransparencySlider, shouldUseSiteColors, alignment, shouldEnableKeyboardHighlighting, }: ColorPickerWrapperProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPickerWrapper;

package/lib/types/components/color-picker/color-picker-wrapper/ColorPickerWrapper.styles.d.ts

@@ -16,13 +16,13 @@ export declare const StyledColorPickerWrapperInfoColor: import("styled-component
     $color?: string;
 } & {
     theme: import("@chayns-components/core").Theme;
-}, "slot" | "style" | "title" | "children" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "color" | "children" | "onSelect" | "ref" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | "$color"> & {
     $color?: string;
 } & {
     theme: import("@chayns-components/core").Theme;
-}, "slot" | "style" | "title" | "children" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color">>> & string;
+}, "color" | "children" | "onSelect" | "ref" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color">>> & string;
 export declare const StyledColorPickerWrapperInfoText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {
     theme: import("@chayns-components/core").Theme;
 }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme"> & {

package/lib/types/components/color-picker-popup/ColorPickerPopup.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { IPresetColor } from '../../types/colorPicker';
-interface ColorPickerPopupProps {
+export interface ColorPickerPopupProps {
     presetColors?: IPresetColor[];
     shouldShowPresetColors: boolean;
     onPresetColorAdd?: (presetColor: IPresetColor) => void;
@@ -10,9 +10,17 @@ interface ColorPickerPopupProps {
     shouldUseSiteColors: boolean;
     shouldHideColorArea: boolean;
     shouldHideDefaultPresetColors: boolean;
+    shouldEnableKeyboardHighlighting?: boolean;
+    selectedColor?: string;
+    onSelect?: (color: string) => void;
 }
+type ColorPickerPopupContentProps = Omit<ColorPickerPopupProps, 'onSelect' | 'selectedColor'>;
+export declare const ColorPickerPopupContent: {
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldHideDefaultPresetColors, shouldUseSiteColors, shouldShowMoreOptions, shouldHideColorArea, shouldEnableKeyboardHighlighting, }: ColorPickerPopupContentProps): React.JSX.Element;
+    displayName: string;
+};
 declare const ColorPickerPopup: {
-    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldShowPresetColors, shouldShowTransparencySlider, shouldHideDefaultPresetColors, shouldUseSiteColors, shouldShowMoreOptions, shouldHideColorArea, }: ColorPickerPopupProps): React.JSX.Element;
+    ({ onSelect, selectedColor, ...props }: ColorPickerPopupProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorPickerPopup;

package/lib/types/components/color-picker-popup/color-area/ColorArea.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+type ColorAreaProps = {
+    shouldEnableKeyboardHighlighting?: boolean;
+};
 declare const ColorArea: {
-    (): React.JSX.Element;
+    ({ shouldEnableKeyboardHighlighting }: ColorAreaProps): React.JSX.Element;
     displayName: string;
 };
 export default ColorArea;

package/lib/types/components/color-picker-popup/more-options/MoreOptions.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
+type MoreOptionsProps = {
+    shouldEnableKeyboardHighlighting?: boolean;
+};
 declare const MoreOptions: {
-    (): React.JSX.Element;
+    ({ shouldEnableKeyboardHighlighting }: MoreOptionsProps): React.JSX.Element;
     displayName: string;
 };
 export default MoreOptions;

package/lib/types/components/color-picker-popup/preset-colors/PresetColors.d.ts

@@ -6,9 +6,10 @@ interface PresetColorsProps {
     onPresetColorRemove?: (presetColorId: IPresetColor['id']) => void;
     shouldUseSiteColors: boolean;
     shouldHideDefaultPresetColors: boolean;
+    shouldEnableKeyboardHighlighting?: boolean;
 }
 declare const PresetColors: {
-    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldUseSiteColors, shouldHideDefaultPresetColors, }: PresetColorsProps): React.JSX.Element;
+    ({ presetColors, onPresetColorRemove, onPresetColorAdd, shouldUseSiteColors, shouldHideDefaultPresetColors, shouldEnableKeyboardHighlighting, }: PresetColorsProps): React.JSX.Element;
     displayName: string;
 };
 export default PresetColors;

package/lib/types/components/color-picker-popup/preset-colors/preset-button/PresetButton.d.ts

@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { FocusEventHandler } from 'react';
 import type { IPresetColor } from '../../../../types/colorPicker';
 interface PresetButtonProps {
     id?: IPresetColor['id'];
     isCustom?: IPresetColor['isCustom'];
     onAdd?: (color: IPresetColor) => void;
     onRemove?: (id: IPresetColor['id']) => void;
+    shouldEnableKeyboardHighlighting?: boolean;
+    isKeyboardFocusable?: boolean;
+    onFocus?: FocusEventHandler<HTMLButtonElement>;
+    presetIndex?: number;
 }
 declare const PresetButton: {
-    ({ id, isCustom, onRemove, onAdd }: PresetButtonProps): React.JSX.Element;
+    ({ id, isCustom, onRemove, onAdd, shouldEnableKeyboardHighlighting, isKeyboardFocusable, onFocus, presetIndex, }: PresetButtonProps): React.JSX.Element;
     displayName: string;
 };
 export default PresetButton;

package/lib/types/components/color-picker-popup/preset-colors/preset-button/PresetButton.styles.d.ts

@@ -1,8 +1,8 @@
-export declare const StyledPresetButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled"> & {
+export declare const StyledPresetButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$isDisabled"> & {
     $isDisabled: boolean;
 } & {
     theme: import("@chayns-components/core").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$isDisabled"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "theme" | "$isDisabled"> & {
     $isDisabled: boolean;
 } & {
     theme: import("@chayns-components/core").Theme;

package/lib/types/components/color-picker-popup/preset-colors/preset-color/PresetColor.d.ts

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, { FocusEventHandler } from 'react';
 import type { IPresetColor } from '../../../../types/colorPicker';
 interface PresetColorProps {
     color: IPresetColor['color'];
+    shouldEnableKeyboardHighlighting?: boolean;
+    isKeyboardFocusable?: boolean;
+    presetIndex?: number;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
 }
 declare const PresetColor: {
-    ({ color }: PresetColorProps): React.JSX.Element;
+    ({ color, shouldEnableKeyboardHighlighting, isKeyboardFocusable, presetIndex, onFocus, }: PresetColorProps): React.JSX.Element;
     displayName: string;
 };
 export default PresetColor;

package/lib/types/components/color-picker-popup/sliders/Sliders.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 interface SlidersProps {
     shouldShowTransparencySlider: boolean;
+    shouldEnableKeyboardHighlighting?: boolean;
 }
 declare const Sliders: {
-    ({ shouldShowTransparencySlider }: SlidersProps): React.JSX.Element;
+    ({ shouldShowTransparencySlider, shouldEnableKeyboardHighlighting, }: SlidersProps): React.JSX.Element;
     displayName: string;
 };
 export default Sliders;

package/lib/types/components/color-picker-popup/sliders/color-preview/ColorPreview.styles.d.ts

@@ -7,10 +7,10 @@ export declare const StyledColorPreviewColor: import("styled-components/dist/typ
     $color?: string;
 } & {
     theme: Theme;
-}, "slot" | "style" | "title" | "children" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+}, "color" | "children" | "onSelect" | "ref" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "theme" | "$color"> & {
     $color?: string;
 } & {
     theme: Theme;
-}, "slot" | "style" | "title" | "children" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "ref" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color">>> & string;
+}, "color" | "children" | "onSelect" | "ref" | "slot" | "style" | "title" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "theme" | "$color">>> & string;

package/lib/types/components/hue-slider/HueSlider.d.ts

@@ -20,6 +20,10 @@ export type HueSliderProps = {
      * The opacity of the Color. Is used if the color has no opacity value.
      */
     opacity?: number;
+    /**
+     * Enables keyboard-only focus highlighting for the slider.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const HueSlider: FC<HueSliderProps>;
 export default HueSlider;