@macive/ui 0.0.1 → 0.0.3

package/dist/src/components/ChoiceList/ChoiceList.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChoiceList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const unique_id_1 = require("../../utilities/unique-id");
+const Bleed_1 = require("../Bleed");
+const Box_1 = require("../Box");
+const Checkbox_1 = require("../Checkbox");
+const InlineError_1 = require("../InlineError");
+const RadioButton_1 = require("../RadioButton");
+const VerticalStack_1 = require("../VerticalStack");
+function ChoiceList({ title, titleHidden, allowMultiple, choices, selected, onChange = noop, error, disabled = false, name: nameProp, }) {
+    // Type asserting to any is required for TS3.2 but can be removed when we update to 3.3
+    // see https://github.com/Microsoft/TypeScript/issues/28768
+    const ControlComponent = allowMultiple ? Checkbox_1.Checkbox : RadioButton_1.RadioButton;
+    const name = (0, unique_id_1.useUniqueId)('ChoiceList', nameProp);
+    const finalName = allowMultiple ? `${name}[]` : name;
+    const titleMarkup = title ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { as: 'legend', paddingBlockEnd: { xs: '5', md: '1' }, visuallyHidden: titleHidden, children: title })) : null;
+    const choicesMarkup = choices.map((choice) => {
+        const { value, id, label, helpText, disabled: choiceDisabled, describedByError } = choice;
+        function handleChange(checked) {
+            onChange(updateSelectedChoices(choice, checked, selected, allowMultiple), name);
+        }
+        const isSelected = choiceIsSelected(choice, selected);
+        const renderedChildren = choice.renderChildren ? choice.renderChildren(isSelected) : null;
+        const children = renderedChildren ? ((0, jsx_runtime_1.jsx)("div", { 
+            //  className={styles.ChoiceChildren}
+            style: {
+                paddingLeft: 'calc(1 + 20px)',
+            }, children: (0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: { xs: '4', md: '0' }, children: renderedChildren }) })) : null;
+        return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsxs)(Bleed_1.Bleed, { marginBlockEnd: helpText ? { xs: '1', md: '0' } : { xs: '0' }, children: [(0, jsx_runtime_1.jsx)(ControlComponent, { name: finalName, value: value, id: id, label: label, disabled: choiceDisabled || disabled, checked: choiceIsSelected(choice, selected), helpText: helpText, onChange: handleChange, ariaDescribedBy: error && describedByError ? (0, InlineError_1.errorTextID)(finalName) : null }), children] }) }, value));
+    });
+    const errorMarkup = error && ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: { xs: '0', md: '1' }, paddingBlockEnd: '2', children: (0, jsx_runtime_1.jsx)(InlineError_1.InlineError, { message: error, fieldID: finalName }) }));
+    return ((0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { as: 'fieldset', gap: { xs: '4', md: '0' }, "aria-invalid": error != null, id: finalName, children: [titleMarkup, (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { as: 'ul', gap: { xs: '4', md: '0' }, children: choicesMarkup }), errorMarkup] }));
+}
+exports.ChoiceList = ChoiceList;
+function noop() { }
+function choiceIsSelected({ value }, selected) {
+    return selected.includes(value);
+}
+function updateSelectedChoices({ value }, checked, selected, allowMultiple = false) {
+    if (checked) {
+        return allowMultiple ? [...selected, value] : [value];
+    }
+    return selected.filter((selectedChoice) => selectedChoice !== value);
+}

package/dist/src/components/ChoiceList/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ChoiceList"), exports);

package/dist/src/components/Collapsible/Collapsible.classnames.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CollapsibleClassnames = {
+    "Collapsible": "Collapsible-Collapsible",
+    "isFullyClosed": "Collapsible-isFullyClosed",
+    "expandOnPrint": "Collapsible-expandOnPrint"
+};
+exports.default = CollapsibleClassnames;

package/dist/src/components/Collapsible/Collapsible.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Collapsible = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../utilities/css");
+const Collapsible_classnames_1 = __importDefault(require("./Collapsible.classnames"));
+function Collapsible({ id, expandOnPrint, open, transition = true, preventMeasuringOnChildrenUpdate: _preventMeasuringOnChildrenUpdate, children, onAnimationEnd, }) {
+    const [height, setHeight] = (0, react_1.useState)(0);
+    const [isOpen, setIsOpen] = (0, react_1.useState)(open);
+    const [animationState, setAnimationState] = (0, react_1.useState)('idle');
+    const collapsibleContainer = (0, react_1.useRef)(null);
+    const isFullyOpen = animationState === 'idle' && open && isOpen;
+    const isFullyClosed = animationState === 'idle' && !open && !isOpen;
+    const content = expandOnPrint || !isFullyClosed ? children : null;
+    const wrapperClassName = (0, css_1.classNames)(Collapsible_classnames_1.default.Collapsible, isFullyClosed && Collapsible_classnames_1.default.isFullyClosed, expandOnPrint && Collapsible_classnames_1.default.expandOnPrint);
+    const transitionDisabled = isTransitionDisabled(transition);
+    const transitionStyles = typeof transition === 'object' && {
+        transitionDuration: transition.duration,
+        transitionTimingFunction: transition.timingFunction,
+    };
+    const collapsibleStyles = {
+        ...transitionStyles,
+        ...{
+            maxHeight: isFullyOpen ? 'none' : `${height}px`,
+            overflow: isFullyOpen ? 'visible' : 'hidden',
+        },
+    };
+    const handleCompleteAnimation = (0, react_1.useCallback)(({ target }) => {
+        if (target === collapsibleContainer.current) {
+            setAnimationState('idle');
+            setIsOpen(open);
+            onAnimationEnd && onAnimationEnd();
+        }
+    }, [onAnimationEnd, open]);
+    const startAnimation = (0, react_1.useCallback)(() => {
+        if (transitionDisabled) {
+            setIsOpen(open);
+            setAnimationState('idle');
+            if (open && collapsibleContainer.current) {
+                setHeight(collapsibleContainer.current.scrollHeight);
+            }
+            else {
+                setHeight(0);
+            }
+        }
+        else {
+            setAnimationState('measuring');
+        }
+    }, [open, transitionDisabled]);
+    (0, react_1.useEffect)(() => {
+        if (open !== isOpen) {
+            startAnimation();
+        }
+        // startAnimation should only be fired if the open state changes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!open || !collapsibleContainer.current)
+            return;
+        // If collapsible defaults to open, set an initial height
+        setHeight(collapsibleContainer.current.scrollHeight);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!collapsibleContainer.current)
+            return;
+        switch (animationState) {
+            case 'idle':
+                break;
+            case 'measuring':
+                setHeight(collapsibleContainer.current.scrollHeight);
+                setAnimationState('animating');
+                break;
+            case 'animating':
+                setHeight(open ? collapsibleContainer.current.scrollHeight : 0);
+        }
+    }, [animationState, open, isOpen]);
+    return ((0, jsx_runtime_1.jsx)("div", { id: id, style: collapsibleStyles, ref: collapsibleContainer, className: wrapperClassName, onTransitionEnd: handleCompleteAnimation, "aria-hidden": !open, children: content }));
+}
+exports.Collapsible = Collapsible;
+const zeroDurationRegex = /^0(ms|s)$/;
+function isTransitionDisabled(transitionProp) {
+    if (typeof transitionProp === 'boolean') {
+        return !transitionProp;
+    }
+    const { duration } = transitionProp;
+    if (duration && zeroDurationRegex.test(duration.trim())) {
+        return true;
+    }
+    return false;
+}

package/dist/src/components/Collapsible/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Collapsible"), exports);

package/dist/src/components/ColorPicker/ColorPicker.classnames.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ColorPickerClassnames = {
+    "ColorPicker": "ColorPicker-ColorPicker",
+    "MainColor": "ColorPicker-MainColor",
+    "Dragger": "ColorPicker-Dragger",
+    "ColorLayer": "ColorPicker-ColorLayer",
+    "AlphaPicker": "ColorPicker-AlphaPicker",
+    "HuePicker": "ColorPicker-HuePicker",
+    "Slidable": "ColorPicker-Slidable"
+};
+exports.default = ColorPickerClassnames;

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clamp_1 = require("../../utilities/clamp");
+const color_transformers_1 = require("../../utilities/color-transformers");
+const css_1 = require("../../utilities/css");
+const debounce_1 = require("../../utilities/debounce");
+// eslint-disable-next-line import/no-deprecated
+const EventListener_1 = require("../EventListener");
+const ColorPicker_styles_1 = __importDefault(require("./ColorPicker.styles"));
+const components_1 = require("./components");
+const RESIZE_DEBOUNCE_TIME_MS = 200;
+class ColorPicker extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            pickerSize: {
+                width: 0,
+                height: 0,
+            },
+        };
+        this.colorNode = null;
+        this.handleResize = (0, debounce_1.debounce)(() => {
+            const { colorNode } = this;
+            if (colorNode == null) {
+                return;
+            }
+            this.setState({
+                pickerSize: {
+                    width: colorNode.clientWidth,
+                    height: colorNode.clientHeight,
+                },
+            });
+        }, RESIZE_DEBOUNCE_TIME_MS, { leading: true, trailing: true, maxWait: RESIZE_DEBOUNCE_TIME_MS });
+        this.setColorNode = (node) => {
+            this.colorNode = node;
+        };
+        this.handleHueChange = (hue) => {
+            const { color: { brightness, saturation, alpha = 1 }, onChange, } = this.props;
+            onChange({ hue, brightness, saturation, alpha });
+        };
+        this.handleAlphaChange = (alpha) => {
+            const { color: { hue, brightness, saturation }, onChange, } = this.props;
+            onChange({ hue, brightness, saturation, alpha });
+        };
+        this.handleDraggerMove = ({ x, y }) => {
+            const { pickerSize } = this.state;
+            const { color: { hue, alpha = 1 }, onChange, } = this.props;
+            const saturation = (0, clamp_1.clamp)(x / pickerSize.width, 0, 1);
+            const brightness = (0, clamp_1.clamp)(1 - y / pickerSize.height, 0, 1);
+            onChange({ hue, saturation, brightness, alpha });
+        };
+        this.handlePickerDrag = (event) => {
+            // prevents external elements from being selected
+            event.preventDefault();
+        };
+    }
+    componentDidMount() {
+        const { colorNode } = this;
+        if (colorNode == null) {
+            return;
+        }
+        this.setState({
+            pickerSize: {
+                width: colorNode.clientWidth,
+                height: colorNode.clientHeight,
+            },
+        });
+        if (process.env.NODE_ENV === 'development') {
+            setTimeout(() => {
+                this.setState({
+                    pickerSize: {
+                        width: colorNode.clientWidth,
+                        height: colorNode.clientHeight,
+                    },
+                });
+            }, 0);
+        }
+    }
+    render() {
+        const { id, color, allowAlpha, fullWidth } = this.props;
+        const { hue, saturation, brightness, alpha: providedAlpha } = color;
+        const { pickerSize } = this.state;
+        const alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
+        const { red, green, blue } = (0, color_transformers_1.hsbToRgb)({ hue, saturation: 1, brightness: 1 });
+        const colorString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+        const draggerX = (0, clamp_1.clamp)(saturation * pickerSize.width, 0, pickerSize.width);
+        const draggerY = (0, clamp_1.clamp)(pickerSize.height - brightness * pickerSize.height, 0, pickerSize.height);
+        const alphaSliderMarkup = allowAlpha ? ((0, jsx_runtime_1.jsx)(components_1.AlphaPicker, { alpha: alpha, color: color, onChange: this.handleAlphaChange })) : null;
+        const className = (0, css_1.classNames)(ColorPicker_styles_1.default.ColorPicker, fullWidth && ColorPicker_styles_1.default.fullWidth);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: className, id: id, onMouseDown: this.handlePickerDrag, children: [(0, jsx_runtime_1.jsxs)("div", { ref: this.setColorNode, className: ColorPicker_styles_1.default.MainColor, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.ColorLayer, style: { backgroundColor: colorString } }), (0, jsx_runtime_1.jsx)(components_1.Slidable, { onChange: this.handleDraggerMove, draggerX: draggerX, draggerY: draggerY })] }), (0, jsx_runtime_1.jsx)(components_1.HuePicker, { hue: hue, onChange: this.handleHueChange }), alphaSliderMarkup, (0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: this.handleResize })] }));
+    }
+}
+exports.ColorPicker = ColorPicker;

package/dist/src/components/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    ColorPicker: 'flex select-none',
+    MainColor: 'relative overflow-hidden h-24 w-24 rounded ',
+    fullWidth: 'flex-grow w-auto',
+    ColorLayer: 'rounded color-layer absolute left-0 h-full w-full select-none top-0',
+    Dragger: 'relative z-99 bottom-10 w-4 m-auto bg-transparent border rounded shadow',
+    DraggerSmall: 'relative z-99 bottom-10 h-24 w-24 m-auto bg-transparent border rounded shadow',
+    HuePicker: 'relative overflow-hidden z-40 top-0 left-0 border rounded-3xl',
+    AlphaPicker: 'relative overflow-hidden z-40 top-0 left-0 border rounded-3xl cursor-pointer',
+    Slidable: 'h-full w-full cursor-pointer',
+};
+exports.default = styles;

package/dist/src/components/ColorPicker/components/AlphaPicker/AlphaPicker.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlphaPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_transformers_1 = require("../../../../utilities/color-transformers");
+const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+const Slidable_1 = require("../Slidable");
+const utilities_1 = require("./utilities");
+class AlphaPicker extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            sliderHeight: 0,
+            draggerHeight: 0,
+        };
+        this.setSliderHeight = (node) => {
+            if (node == null) {
+                return;
+            }
+            this.setState({ sliderHeight: node.clientHeight });
+            if (process.env.NODE_ENV === 'development') {
+                setTimeout(() => {
+                    this.setState({ sliderHeight: node.clientHeight });
+                }, 0);
+            }
+        };
+        this.setDraggerHeight = (height) => {
+            this.setState({
+                draggerHeight: height,
+            });
+        };
+        this.handleChange = ({ y }) => {
+            const { onChange } = this.props;
+            const { sliderHeight } = this.state;
+            const alpha = (0, utilities_1.alphaForDraggerY)(y, sliderHeight);
+            onChange(alpha);
+        };
+    }
+    render() {
+        const { color, alpha } = this.props;
+        const { sliderHeight, draggerHeight } = this.state;
+        const draggerY = (0, utilities_1.calculateDraggerY)(alpha, sliderHeight, draggerHeight);
+        const background = alphaGradientForColor(color);
+        return ((0, jsx_runtime_1.jsxs)("div", { className: ColorPicker_styles_1.default.AlphaPicker, ref: this.setSliderHeight, children: [(0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.ColorLayer, style: { background } }), (0, jsx_runtime_1.jsx)(Slidable_1.Slidable, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight })] }));
+    }
+}
+exports.AlphaPicker = AlphaPicker;
+function alphaGradientForColor(color) {
+    const { red, green, blue } = (0, color_transformers_1.hsbToRgb)(color);
+    const rgb = `${red}, ${green}, ${blue}`;
+    return `linear-gradient(to top, rgba(${rgb}, 0) 18px, rgba(${rgb}, 1) calc(100% - 18px))`;
+}

package/dist/src/components/ColorPicker/components/AlphaPicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AlphaPicker"), exports);

package/dist/src/components/ColorPicker/components/AlphaPicker/utilities.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alphaForOffset = exports.alphaForDraggerY = exports.calculateDraggerY = void 0;
+const clamp_1 = require("../../../../utilities/clamp");
+const VERTICAL_PADDING = 13;
+function calculateDraggerY(alpha, sliderHeight, draggerHeight) {
+    const offset = offsetForAlpha(alpha, sliderHeight, draggerHeight);
+    return (0, clamp_1.clamp)(offset, 0, sliderHeight);
+}
+exports.calculateDraggerY = calculateDraggerY;
+function alphaForDraggerY(y, sliderHeight) {
+    const offsetY = (0, clamp_1.clamp)(y, 0, sliderHeight);
+    return alphaForOffset(offsetY, sliderHeight);
+}
+exports.alphaForDraggerY = alphaForDraggerY;
+function alphaForOffset(offset, sliderHeight) {
+    const selectionHeight = offset - VERTICAL_PADDING;
+    const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
+    return (0, clamp_1.clamp)(1 - selectionHeight / slidableArea, 0, 1);
+}
+exports.alphaForOffset = alphaForOffset;
+function offsetForAlpha(alpha, sliderHeight, draggerHeight) {
+    const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
+    return (0, clamp_1.clamp)((1 - alpha) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
+}

package/dist/src/components/ColorPicker/components/HuePicker/HuePicker.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HuePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+const Slidable_1 = require("../Slidable");
+const utilities_1 = require("./utilities");
+class HuePicker extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            sliderHeight: 0,
+            draggerHeight: 0,
+        };
+        this.setSliderHeight = (node) => {
+            if (node == null) {
+                return;
+            }
+            this.setState({ sliderHeight: node.clientHeight });
+            if (process.env.NODE_ENV === 'development') {
+                setTimeout(() => {
+                    this.setState({ sliderHeight: node.clientHeight });
+                }, 0);
+            }
+        };
+        this.setDraggerHeight = (height) => {
+            this.setState({
+                draggerHeight: height,
+            });
+        };
+        this.handleChange = ({ y }) => {
+            const { onChange } = this.props;
+            const { sliderHeight } = this.state;
+            const hue = (0, utilities_1.hueForDraggerY)(y, sliderHeight);
+            onChange(hue);
+        };
+    }
+    render() {
+        const { hue } = this.props;
+        const { sliderHeight, draggerHeight } = this.state;
+        const draggerY = (0, utilities_1.calculateDraggerY)(hue, sliderHeight, draggerHeight);
+        return ((0, jsx_runtime_1.jsx)("div", { className: ColorPicker_styles_1.default.HuePicker, ref: this.setSliderHeight, style: {
+                backgroundImage: `linear-gradient(
+          to bottom,
+          yellow,
+          green,
+          cyan,
+          blue,
+          purple,
+          red
+        )`,
+            }, children: (0, jsx_runtime_1.jsx)(Slidable_1.Slidable, { draggerY: draggerY, draggerX: 0, onChange: this.handleChange, onDraggerHeight: this.setDraggerHeight }) }));
+    }
+}
+exports.HuePicker = HuePicker;

package/dist/src/components/ColorPicker/components/HuePicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./HuePicker"), exports);

package/dist/src/components/ColorPicker/components/HuePicker/utilities.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hueForDraggerY = exports.calculateDraggerY = void 0;
+const clamp_1 = require("../../../../utilities/clamp");
+const VERTICAL_PADDING = 13;
+function calculateDraggerY(hue, sliderHeight, draggerHeight) {
+    const offset = offsetForHue(hue, sliderHeight, draggerHeight);
+    return (0, clamp_1.clamp)(offset, 0, sliderHeight);
+}
+exports.calculateDraggerY = calculateDraggerY;
+function hueForDraggerY(y, sliderHeight) {
+    const offsetY = (0, clamp_1.clamp)(y, 0, sliderHeight);
+    return hueForOffset(offsetY, sliderHeight);
+}
+exports.hueForDraggerY = hueForDraggerY;
+function hueForOffset(offset, sliderHeight) {
+    const selectionHeight = offset - VERTICAL_PADDING;
+    const slidableArea = sliderHeight - VERTICAL_PADDING * 2;
+    return (0, clamp_1.clamp)((selectionHeight / slidableArea) * 360, 0, 360);
+}
+function offsetForHue(hue, sliderHeight, draggerHeight) {
+    const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING);
+    return (0, clamp_1.clamp)((hue / 360) * slidableArea + VERTICAL_PADDING, 0, sliderHeight - draggerHeight);
+}

package/dist/src/components/ColorPicker/components/Slidable/Slidable.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slidable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const target_1 = require("../../../../utilities/target");
+// eslint-disable-next-line import/no-deprecated
+const EventListener_1 = require("../../../EventListener");
+const ColorPicker_styles_1 = __importDefault(require("../../ColorPicker.styles"));
+let isDragging = false;
+// Required to solve a bug causing the underlying page/container to scroll
+// while trying to drag the ColorPicker controls.
+// This must be called as soon as possible to properly prevent the event.
+// `passive: false` must also be set, as it seems webkit has changed the "default" behaviour
+// https://bugs.webkit.org/show_bug.cgi?id=182521
+if (!target_1.isServer) {
+    window.addEventListener('touchmove', (event) => {
+        if (!isDragging) {
+            return;
+        }
+        event.preventDefault();
+    }, { passive: false });
+}
+class Slidable extends react_1.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            dragging: false,
+        };
+        this.node = null;
+        this.draggerNode = null;
+        this.setDraggerNode = (node) => {
+            this.draggerNode = node;
+        };
+        this.setNode = (node) => {
+            this.node = node;
+        };
+        this.startDrag = (event) => {
+            if (isMouseDownEvent(event)) {
+                this.handleDraggerMove(event.clientX, event.clientY);
+            }
+            isDragging = true;
+            this.setState({ dragging: true });
+        };
+        this.handleDragEnd = () => {
+            isDragging = false;
+            this.setState({ dragging: false });
+        };
+        this.handleMove = (event) => {
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            if (isMouseMoveEvent(event)) {
+                this.handleDraggerMove(event.clientX, event.clientY);
+                return;
+            }
+            this.handleDraggerMove(event.touches[0].clientX, event.touches[0].clientY);
+        };
+        this.handleDraggerMove = (x, y) => {
+            if (this.node == null) {
+                return;
+            }
+            const { onChange } = this.props;
+            const rect = this.node.getBoundingClientRect();
+            const offsetX = x - rect.left;
+            const offsetY = y - rect.top;
+            onChange({ x: offsetX, y: offsetY });
+        };
+    }
+    componentDidMount() {
+        const { onDraggerHeight } = this.props;
+        if (onDraggerHeight == null) {
+            return;
+        }
+        const { draggerNode } = this;
+        if (draggerNode == null) {
+            return;
+        }
+        onDraggerHeight(draggerNode.clientWidth);
+        if (process.env.NODE_ENV === 'development') {
+            setTimeout(() => {
+                onDraggerHeight(draggerNode.clientWidth);
+            }, 0);
+        }
+    }
+    render() {
+        const { dragging } = this.state;
+        const { draggerX = 0, draggerY = 0 } = this.props;
+        const draggerPositioning = {
+            transform: `translate3d(${draggerX}px, ${draggerY}px, 0)`,
+        };
+        const moveListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'mousemove', handler: this.handleMove, passive: false })) : null;
+        const touchMoveListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'touchmove', handler: this.handleMove, passive: false })) : null;
+        const endDragListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'mouseup', handler: this.handleDragEnd })) : null;
+        const touchEndListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'touchend', handler: this.handleDragEnd })) : null;
+        const touchCancelListener = dragging ? ((0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'touchcancel', handler: this.handleDragEnd })) : null;
+        return ((0, jsx_runtime_1.jsxs)("div", { ref: this.setNode, className: ColorPicker_styles_1.default.Slidable, onMouseDown: this.startDrag, onTouchStart: this.startDrag, children: [endDragListener, moveListener, touchMoveListener, touchEndListener, touchCancelListener, (0, jsx_runtime_1.jsx)("div", { style: draggerPositioning, className: ColorPicker_styles_1.default.Dragger, ref: this.setDraggerNode })] }));
+    }
+}
+exports.Slidable = Slidable;
+function isMouseMoveEvent(event) {
+    return event.type === 'mousemove';
+}
+function isMouseDownEvent(event) {
+    return event.type === 'mousedown';
+}

package/dist/src/components/ColorPicker/components/Slidable/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Slidable"), exports);