@longline/aqua-ui 1.0.0

package/inputs/Selector/Selector.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { ISelectorProps } from './ISelectorProps';
+type TCheckboxType = 'check' | 'toggle' | 'slider' | 'circle';
+interface IProps extends ISelectorProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Checkbox name.
+     */
+    name?: string;
+    /**
+     * Radio value
+     */
+    value?: any;
+    /**
+     * Checkbox label. Appears to the right of the box. Can be JSX.
+     */
+    label?: React.ReactNode;
+    /**
+     * Checkbox visual style: `check`, `toggle`, `slider` or `circle`. Default is `check`.
+     * @default check
+     */
+    type?: TCheckboxType;
+}
+/**
+ * A Selector can be used to create either a HTML checkbox or a HTML radio button.
+ */
+declare const Selector: (props: IProps) => React.JSX.Element;
+export { Selector, IProps };

package/inputs/Selector/Selector.js

@@ -0,0 +1,77 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { Checkbox } from './widgets/Checkbox';
+import { Toggle } from './widgets/Toggle';
+var SelectorBase = function (props) {
+    var _a = React.useState(props.checked), checked = _a[0], setChecked = _a[1];
+    var inputRef = React.useRef(null);
+    React.useEffect(function () {
+        if (props.indeterminate === true)
+            inputRef.current.indeterminate = true;
+        if (props.indeterminate === false)
+            inputRef.current.indeterminate = false;
+    }, [props.indeterminate]);
+    React.useEffect(function () {
+        setChecked(props.checked);
+    }, [props.checked]);
+    var handleChange = function (e) {
+        // For radios, we use the value attribute.
+        // For checkboxes, we use the checked attribute.
+        var newValue = props.radio ? e.target.value : e.target.checked;
+        setChecked(newValue);
+        if (props.onChange) {
+            props.onChange(newValue);
+        }
+    };
+    var getWidget = function () {
+        var _a;
+        var className = props.className, otherProps = __rest(props, ["className"]);
+        // If type isn't set, then choose a default for radio/not-radio:
+        var type = (_a = props.type) !== null && _a !== void 0 ? _a : (props.radio ? 'radio' : 'check');
+        switch (type) {
+            case 'toggle': return React.createElement(Toggle, __assign({}, otherProps));
+            default: return React.createElement(Checkbox, __assign({}, otherProps));
+        }
+    };
+    return (React.createElement("label", { className: props.className },
+        React.createElement("input", { ref: inputRef, name: props.name, type: props.radio ? "radio" : "checkbox", value: props.value === null ? undefined : props.value, checked: checked === null ? false : checked, disabled: props.disabled, onChange: handleChange }),
+        getWidget(),
+        React.createElement("span", null, props.label)));
+};
+var SelectorStyled = styled(SelectorBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  pointer-events: ", ";\n\n  // Position and size:\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n\n  // Interaction:\n  cursor: ", ";\n  outline: none;\n\n  // The input[type='checkbox'] itself is not visible. display-none will cause \n  // it not to be tab-indexable, or keyboard-controllable, so we use\n  // \"appearance\".  It is also absolutely-positioned, or it will still cause \n  // the visible elements to shift right and down. \"outline:none\" removes a \n  // little dot that indicates that the input has focus.\n  input {\n    appearance: none;\n    -webkit-appearance: none;\n    position: absolute;\n    outline: none;\n  }\n\n  span {\n    color: ", ";\n    user-select: none;\n    ", "\n  }\n"], ["\n  pointer-events: ", ";\n\n  // Position and size:\n  display: inline-flex;\n  align-items: center;\n  gap: 12px;\n  position: relative;\n\n  // Interaction:\n  cursor: ", ";\n  outline: none;\n\n  // The input[type='checkbox'] itself is not visible. display-none will cause \n  // it not to be tab-indexable, or keyboard-controllable, so we use\n  // \"appearance\".  It is also absolutely-positioned, or it will still cause \n  // the visible elements to shift right and down. \"outline:none\" removes a \n  // little dot that indicates that the input has focus.\n  input {\n    appearance: none;\n    -webkit-appearance: none;\n    position: absolute;\n    outline: none;\n  }\n\n  span {\n    color: ", ";\n    user-select: none;\n    ", "\n  }\n"
+    /**
+     * A Selector can be used to create either a HTML checkbox or a HTML radio button.
+     */
+])), function (p) { return p.disabled ? 'none' : 'all'; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #aaa;\n    "], ["\n      color: #aaa;\n    "]))); });
+/**
+ * A Selector can be used to create either a HTML checkbox or a HTML radio button.
+ */
+var Selector = function (props) { return React.createElement(SelectorStyled, __assign({}, props)); };
+export { Selector };
+var templateObject_1, templateObject_2;

package/inputs/Selector/index.d.ts

@@ -0,0 +1 @@
+export * from './Selector';

package/inputs/Selector/index.js

@@ -0,0 +1 @@
+export * from './Selector';

package/inputs/Selector/widgets/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ISelectorProps } from '../ISelectorProps';
+declare const Checkbox: (props: {
+    className?: string;
+} & ISelectorProps) => React.JSX.Element;
+export { Checkbox };

package/inputs/Selector/widgets/Checkbox.js

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { SVG } from '../../../svg';
+var CheckboxBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement("svg", { className: "checked" },
+            React.createElement("use", { xlinkHref: SVG.Icons.Check })),
+        React.createElement("svg", { className: "indeterminate" },
+            React.createElement("use", { xlinkHref: SVG.Icons.Minus })));
+};
+var CheckboxStyled = styled(CheckboxBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n\n  // Dimensions:\n  width: 18px;\n  height: 18px;\n\n  // Appearance:\n  box-sizing: border-box;\n  border-radius: 2px;\n\n  ", "\n\n  ", "  \n\n  // SVG position:\n  svg {\n    position: absolute;\n    left: calc(50% - 6px);\n    top: calc(50% - 6px);\n    width: 12px;\n    height: 12px;\n    fill: ", ";\n    display: none;\n  }    \n  // SVG selection:\n  input:checked + & {\n    svg.checked {\n      display: block;\n    }\n    svg.indeterminate {\n      display: none;\n    }\n  }    \n  input:indeterminate + & {\n    svg.checked {\n      display: none;\n    }\n    svg.indeterminate {\n      display: block;\n    }\n  }      \n\n  // Circle behind hovered/focused/active checkbox.\n  // The circle is always present, although transparent when in default\n  // unfocused state. This is so that a background color transition may work.\n  &:before {\n    content: '';\n    position: absolute;\n    left: calc(50% - 20px);\n    top: calc(50% - 20px);\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    z-index: -1;\n    background-color: transparent;\n    transition: background-color ease-in-out ", "ms; \n  }\n  &:hover:before, input:focus + &:before {\n    // Normal highlight = primary1 (10% opacity)\n    // Error highlight = error (8% opacity)\n    background-color: ", ";\n  }\n  &:active:before {\n    // Normal highlight = primary2 \n    // Error highlight = error (16% opacity)\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n\n  // Dimensions:\n  width: 18px;\n  height: 18px;\n\n  // Appearance:\n  box-sizing: border-box;\n  border-radius: 2px;\n\n  ", "\n\n  ", "  \n\n  // SVG position:\n  svg {\n    position: absolute;\n    left: calc(50% - 6px);\n    top: calc(50% - 6px);\n    width: 12px;\n    height: 12px;\n    fill: ", ";\n    display: none;\n  }    \n  // SVG selection:\n  input:checked + & {\n    svg.checked {\n      display: block;\n    }\n    svg.indeterminate {\n      display: none;\n    }\n  }    \n  input:indeterminate + & {\n    svg.checked {\n      display: none;\n    }\n    svg.indeterminate {\n      display: block;\n    }\n  }      \n\n  // Circle behind hovered/focused/active checkbox.\n  // The circle is always present, although transparent when in default\n  // unfocused state. This is so that a background color transition may work.\n  &:before {\n    content: '';\n    position: absolute;\n    left: calc(50% - 20px);\n    top: calc(50% - 20px);\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    z-index: -1;\n    background-color: transparent;\n    transition: background-color ease-in-out ", "ms; \n  }\n  &:hover:before, input:focus + &:before {\n    // Normal highlight = primary1 (10% opacity)\n    // Error highlight = error (8% opacity)\n    background-color: ", ";\n  }\n  &:active:before {\n    // Normal highlight = primary2 \n    // Error highlight = error (16% opacity)\n    background-color: ", ";\n  }\n"])), function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background: none;\n    border: solid 2px ", ";\n    input:checked + &, input:indeterminate + & { \n      background-color: ", ";\n      border: none;\n    }\n  "], ["\n    background: none;\n    border: solid 2px ", ";\n    input:checked + &, input:indeterminate + & { \n      background-color: ", ";\n      border: none;\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, p.theme.colors.primary[5]); }, function (p) { return !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background: none;\n    border: solid 2px ", ";\n    input:checked + &, input:indeterminate + & { \n      background-color: ", ";\n      border: none; \n    }\n  "], ["\n    background: none;\n    border: solid 2px ", ";\n    input:checked + &, input:indeterminate + & { \n      background-color: ", ";\n      border: none; \n    }\n  "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[80], p.error ? p.theme.colors.negative : p.theme.colors.primary[1]); }, function (p) { return p.disabled ? "rgb(from ".concat(p.theme.colors.neutral[95], " r g b / 38%)") : p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.error ? "rgb(from ".concat(p.theme.colors.negative, " r g b / 8%)") : "rgb(from ".concat(p.theme.colors.primary[1], " r g b / 10%)"); }, function (p) { return p.error ? "rgb(from ".concat(p.theme.colors.negative, " r g b / 16%)") : p.theme.colors.primary[2]; });
+var Checkbox = function (props) { return React.createElement(CheckboxStyled, __assign({}, props)); };
+export { Checkbox };
+var templateObject_1, templateObject_2, templateObject_3;

package/inputs/Selector/widgets/Toggle.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ISelectorProps } from '../ISelectorProps';
+declare const Toggle: (props: {
+    className?: string;
+} & ISelectorProps) => React.JSX.Element;
+export { Toggle };

package/inputs/Selector/widgets/Toggle.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+var ToggleBase = function (props) {
+    return React.createElement("div", { className: props.className });
+};
+var ToggleStyled = styled(ToggleBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n\n  width: 40px;\n  height: 18px;\n  border-radius: 9px;\n  background-color: ", ";\n\n  // Default circle:\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: -1px;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    background-color: transparent;\n    border: solid 2px ", ";\n    transition: \n      left ease-in-out ", "ms, \n      background-color ease-in-out ", "ms, \n      border-color ease-in-out ", "ms;\n  }\n\n  // Checked circle:\n  input:checked + &:after {\n    background-color: ", ";\n    left: 20px;\n  }\n\n  // Disabled circle:\n  ", "\n"], ["\n  position: relative;\n\n  width: 40px;\n  height: 18px;\n  border-radius: 9px;\n  background-color: ", ";\n\n  // Default circle:\n  &:after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: -1px;\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    background-color: transparent;\n    border: solid 2px ", ";\n    transition: \n      left ease-in-out ", "ms, \n      background-color ease-in-out ", "ms, \n      border-color ease-in-out ", "ms;\n  }\n\n  // Checked circle:\n  input:checked + &:after {\n    background-color: ", ";\n    left: 20px;\n  }\n\n  // Disabled circle:\n  ", "\n"])), function (p) { return p.disabled ? p.theme.colors.neutral[30] : p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:after {\n      background-color: ", " !important;\n      border-color: ", ";\n    }\n  "], ["\n    &:after {\n      background-color: ", " !important;\n      border-color: ", ";\n    }\n  "])), p.theme.colors.primary[5], p.theme.colors.primary[5]); });
+var Toggle = function (props) { return React.createElement(ToggleStyled, __assign({}, props)); };
+export { Toggle };
+var templateObject_1, templateObject_2;

package/inputs/Slider/Slider.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Current value.
+     */
+    value?: number;
+    /**
+     * Minimum value.
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * If set, `onChange` is called continuously while the slide is being moved.
+     * If not, `onChange` is called only when the slider is released.
+     * @default false
+     */
+    immediate?: boolean;
+    /**
+     * Sets the value change when an arrow key is pressed. If omitted,
+     * `delta` will be 10% of the value range.
+     */
+    delta?: number;
+    /**
+     * Event is triggered when slider's value changes.
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Should ticks be displayed? If so, how many?
+     * @default 0
+     */
+    ticks?: number;
+    /**
+     * Should the control snap to ticks (if present)?
+     * @default false
+     */
+    snapToTicks?: boolean;
+    /**
+     * A disabled `Slider` cannot be interacted with.
+     */
+    disabled?: boolean;
+    /**
+     * Adds left and right padding.
+     */
+    padded?: boolean;
+    /**
+     * A `Slider` can be in an `error` state.
+     */
+    error?: boolean;
+}
+/**
+ * Sliders allow users to view and select a value (or range) along a track.
+ * They’re ideal for adjusting settings such as volume and brightness, or for
+ * applying image filters.
+ */
+declare const Slider: ({ min, max, ...props }: IProps) => React.JSX.Element;
+export { Slider, IProps };

package/inputs/Slider/Slider.js

@@ -0,0 +1,198 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import styled, { css, keyframes } from 'styled-components';
+var SliderBase = function (props) {
+    // Current value. This is not the same as props.value: it is the value
+    // while the knob is being dragged. Upon release, this value is called back
+    // with onChange. Or continuously, if `immediate` is set.
+    var value = React.useRef(props.value);
+    // Reference: slider body
+    var sliderRef = React.useRef(null);
+    // Reference: track fill.
+    var trackFillRef = React.useRef(null);
+    // Reference: knob
+    var knobRef = React.useRef(null);
+    // Reference: tear value
+    var tearValueRef = React.useRef(null);
+    // Currently dragging? This is set when mouse is down, unset when mouse
+    // is released.
+    var dragging = React.useRef(false);
+    // Clamp value in range min..max (inclusive)
+    var clamp = function (value, min, max) {
+        return Math.max(min, Math.min(max, value));
+    };
+    // Snap value to ticks (if there are ticks).
+    var snapToTicks = function (value) {
+        // Do nothing if there are no ticks, or if snapToTicks not specified:
+        if (!props.snapToTicks)
+            return value;
+        if (!props.ticks || props.ticks <= 1)
+            return value;
+        // If ticks are present, then clamp x-position to ticks:
+        var section = (props.max - props.min) / (props.ticks - 1);
+        return Math.round((value - props.min) / section) * section + props.min;
+    };
+    //
+    // Change current value. If notify is set, also call onChange.
+    //
+    var setValue = function (v, notify) {
+        value.current = Math.round(snapToTicks(clamp(v, props.min, props.max)));
+        // Calculate position in 0..1 range:
+        var pos = (value.current - props.min) / (props.max - props.min);
+        // Set knob position as a percentage:
+        knobRef.current.style.left = "".concat(pos * 100, "%");
+        trackFillRef.current.style.width = "".concat(pos * 100, "%");
+        tearValueRef.current.textContent = value.current.toString();
+        if (notify && props.onChange)
+            props.onChange(value.current);
+    };
+    // Calculate value change for a single arrow key press:
+    var getDelta = function () {
+        // If ticks are present and snapToTicks is on, then snap to ticks:
+        if (props.snapToTicks && props.ticks && props.ticks > 1) {
+            return (props.max - props.min) / (props.ticks - 1);
+        }
+        // If a custom delta was specified, use it:
+        if (props.delta)
+            return props.delta;
+        // If no custom delta was specified, then use 10% of value range:
+        return (props.max - props.min) / 10;
+    };
+    // When the value or the range changes, reposition the knob.
+    React.useEffect(function () {
+        setValue(props.value);
+    }, [props.value, props.min, props.max, props.ticks, props.snapToTicks]);
+    // Mouseup and mousemove and document-wide events. They are only relevant
+    // when dragging is on.
+    React.useEffect(function () {
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('mousemove', handleMouseMove);
+        return function () {
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('mousemove', handleMouseMove);
+        };
+    });
+    var handleMouseEvent = function (clientX) {
+        var rect = sliderRef.current.getBoundingClientRect();
+        // Calculate x-position in range 0..1:
+        var x = clamp((clientX - rect.left) / sliderRef.current.offsetWidth, 0, 1);
+        // Derive value from x-position:
+        var v = Math.round((props.max - props.min) * x + props.min);
+        // Set new value. If props.immediate, then call onChange immediately.
+        setValue(v, props.immediate);
+    };
+    var handleMouseDown = function (e) {
+        dragging.current = true;
+        handleMouseEvent(e.clientX);
+    };
+    // When the mouse moves (while dragging is on), calculate the new position
+    // of the knob. Derive a value, and call it back if `immediate` is set.
+    var handleMouseMove = function (e) {
+        if (!dragging.current)
+            return;
+        handleMouseEvent(e.clientX);
+    };
+    // When mouse is released, call back value.
+    var handleMouseUp = function () {
+        if (dragging.current) {
+            dragging.current = false;
+            if (props.onChange)
+                props.onChange(value.current);
+        }
+    };
+    var handleKeyDown = function (e) {
+        switch (e.key) {
+            case 'ArrowLeft':
+                setValue(value.current - getDelta(), true);
+                break;
+            case 'ArrowRight':
+                setValue(value.current + getDelta(), true);
+                break;
+            // Home moves to minimum:
+            case "Home":
+                setValue(props.min, true);
+                break;
+            // End moves to maximum.
+            case "End":
+                setValue(props.max, true);
+                break;
+            // PageUp/PageDown take 3x size steps:
+            case "PageUp":
+                setValue(value.current - getDelta() * 3, true);
+                break;
+            case "PageDown":
+                setValue(value.current + getDelta() * 3, true);
+                break;
+        }
+    };
+    var renderTicks = function () {
+        // Create a number of ticks and return them.
+        return Array(props.ticks).fill(0).map(function (t, idx) { return React.createElement(Tick, { key: idx }); });
+    };
+    var className = props.className, restProps = __rest(props, ["className"]);
+    return (React.createElement("div", { className: props.className, ref: sliderRef, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, tabIndex: 0 },
+        React.createElement(Track, null,
+            React.createElement(TrackFill, { "$disabled": props.disabled, "$error": props.error, ref: trackFillRef }),
+            props.ticks && renderTicks(),
+            React.createElement(KnobPosition, { ref: knobRef },
+                React.createElement(Knob, { "$disabled": props.disabled, "$error": props.error },
+                    React.createElement(Teardrop, { "$disabled": props.disabled, "$error": props.error },
+                        React.createElement("path", { d: "M14.293 34L4.39347 24.0416C-1.07387 18.5418 -1.07387 9.62475 4.39347 4.12489C9.86081 -1.37496 18.7251 -1.37496 24.1925 4.12489C29.6598 9.62475 29.6598 18.5418 24.1925 24.0416L14.293 34Z" })),
+                    React.createElement(TearValue, { "$disabled": props.disabled, "$error": props.error, ref: tearValueRef }))))));
+};
+var Tick = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 2px;\n  height: 2px;\n  background-color: ", ";\n  border-radius: 1px;\n"], ["\n  width: 2px;\n  height: 2px;\n  background-color: ", ";\n  border-radius: 1px;\n"])), function (p) { return p.theme.colors.accent; });
+var Teardrop = styled.svg(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: -38px;\n  left: -3.5px;\n  width: 28px;\n  height: 34px; \n  fill: ", ";\n  ", "\n  ", "\n"], ["\n  position: absolute;\n  top: -38px;\n  left: -3.5px;\n  width: 28px;\n  height: 34px; \n  fill: ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["fill: ", ";"], ["fill: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["fill: ", ";"], ["fill: ", ";"])), p.theme.colors.neutral[30]); });
+var TearValue = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: absolute;\n  top: -32px;\n  left: -5px;\n  width: 30px;\n  text-align: center;\n  font: ", ";\n  white-space: nowrap;\n  color: ", ";\n  ", "\n  ", "  \n"], ["\n  position: absolute;\n  top: -32px;\n  left: -5px;\n  width: 30px;\n  text-align: center;\n  font: ", ";\n  white-space: nowrap;\n  color: ", ";\n  ", "\n  ", "  \n"])), function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.$error && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[100]); }, function (p) { return p.$disabled && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), p.theme.colors.neutral[50]); });
+var Pulse = keyframes(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  0% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.6;\n  }\n  100% {\n    opacity: 0.3;\n  }\n"], ["\n  0% {\n    opacity: 0.3;\n  }\n  50% {\n    opacity: 0.6;\n  }\n  100% {\n    opacity: 0.3;\n  }\n"])));
+var Knob = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: absolute;\n  left: -10px;\n  top: -8px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background-color: ", ";\n  ", "\n  ", "    \n  box-shadow: ", ";\n\n  // Disabled control has no focus ring at all.\n  ", "\n"], ["\n  position: absolute;\n  left: -10px;\n  top: -8px;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background-color: ", ";\n  ", "\n  ", "    \n  box-shadow: ", ";\n\n  // Disabled control has no focus ring at all.\n  ", "\n"
+    // This is a 0x0 <div> used to mark where the knob is. The Knob will paint
+    // itself with the right offsets from this.
+])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); }, function (p) { return p.theme.shadows.small; }, function (p) { return !p.$disabled && css(templateObject_11 || (templateObject_11 = __makeTemplateObject([" \n    &:before {\n      content: '';\n      position: absolute;\n      left: -10px;\n      right: -10px;\n      top: -10px;\n      bottom: -10px;     \n      border-radius: 50%;\n      background-color: rgba(255, 255, 255, 0.1);\n      z-index: -1;\n      transition: opacity ease ", "ms;\n      opacity: 0;\n    }\n  "], [" \n    &:before {\n      content: '';\n      position: absolute;\n      left: -10px;\n      right: -10px;\n      top: -10px;\n      bottom: -10px;     \n      border-radius: 50%;\n      background-color: rgba(255, 255, 255, 0.1);\n      z-index: -1;\n      transition: opacity ease ", "ms;\n      opacity: 0;\n    }\n  "])), function (p) { return p.theme.animation.duration; }); });
+// This is a 0x0 <div> used to mark where the knob is. The Knob will paint
+// itself with the right offsets from this.
+var KnobPosition = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0px;\n  z-index: 0; // Required z-offset for Knob::before\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0px;\n  z-index: 0; // Required z-offset for Knob::before\n"])));
+var TrackFill = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 50%;\n  background-color: ", ";\n  ", "\n  ", "     \n  border-radius: 2px;\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 50%;\n  background-color: ", ";\n  ", "\n  ", "     \n  border-radius: 2px;\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.$error && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.negative); }, function (p) { return p.$disabled && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[30]); });
+var Track = styled.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"], ["\n  position: relative;\n  height: 4px;\n  border-radius: 2px;\n  box-sizing: border-box;\n  background-color: ", ";\n\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding-top: 1px;\n  padding-left: 2px;\n  padding-right: 2px;\n"])), function (p) { return p.theme.colors.primary[5]; });
+var SliderStyled = styled(SliderBase)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: relative;\n  min-width: 200px;\n  margin-top: 44px;\n  padding-top: 8px;    // Padding above and below to capture mouse-down\n  padding-bottom: 8px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"], ["\n  position: relative;\n  min-width: 200px;\n  margin-top: 44px;\n  padding-top: 8px;    // Padding above and below to capture mouse-down\n  padding-bottom: 8px;\n  ", "\n  cursor: ", ";\n  user-select: none;\n  outline: none;\n  ", "\n\n  ", "\n"
+    /**
+     * Sliders allow users to view and select a value (or range) along a track.
+     * They’re ideal for adjusting settings such as volume and brightness, or for
+     * applying image filters.
+     */
+])), function (p) { return p.padded && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    padding-left: 12px;\n    padding-right: 12px;\n  "], ["\n    padding-left: 12px;\n    padding-right: 12px;\n  "]))); }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.disabled && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return !p.disabled && css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "], ["\n    // Focus ring:\n    &:focus ", ":before {\n      animation: ", " 2s linear infinite;\n    }\n\n    &:hover ", ":before {\n      animation: none;\n      opacity: 0.7;\n    }    \n\n    // Active focus ring:\n    &:active ", ":before {\n      animation: none;\n      opacity: 1;\n    }\n  "])), Knob, Pulse, Knob, Knob); });
+/**
+ * Sliders allow users to view and select a value (or range) along a track.
+ * They’re ideal for adjusting settings such as volume and brightness, or for
+ * applying image filters.
+ */
+var Slider = function (_a) {
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, props = __rest(_a, ["min", "max"]);
+    return React.createElement(SliderStyled, __assign({ min: min, max: max }, props));
+};
+export { Slider };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

package/inputs/Textarea/Textarea.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+/**
+ * Textarea validates itself using the HTML validation API whenever its
+ * content changes. Listeners can use onValidate to obtain the resulting
+ * ValidityState.
+ */
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Textarea name.
+     */
+    name?: string;
+    /**
+     * Textarea value.
+     */
+    value?: any;
+    /**
+     * Placeholder to show when the Textarea is empty.
+     */
+    placeholder?: string;
+    /**
+     * Mark Textarea as disabled. A disabled Textarea cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Removes Textarea border and background.
+     * @default false
+     */
+    transparent?: boolean;
+    /**
+     * A Textarea can be in a ghost state, where content is being loaded.
+     * @default false
+     */
+    ghost?: boolean;
+    /**
+     * Textarea takes up all available horizontal space.
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Height in rows.
+     */
+    rows?: number;
+    /**
+     * Minimum height in pixels.
+     */
+    minHeight?: number;
+    /**
+     * Is the Textarea in an error state?
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * If set, Textarea will use a monospaced font.
+     * @default false
+     */
+    monospaced?: boolean;
+    /**
+     * If set, `Textarea` can be resized vertically.
+     */
+    resizable?: boolean;
+    /**
+     * If set, `Textarea` can be made fullscreen (by the user).
+     */
+    fullscreen?: boolean;
+    /**
+     * Listeners are notified whenever the user interacts with the Textarea.
+     */
+    onChange?: (value: any) => void;
+}
+/**
+ * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
+ * it can be contained in a `Form.Field`. A (vertical) resizer can be added
+ * using `resizable`, and a fullscreen toggle is added using `fullscreen`.
+ */
+declare const Textarea: (props: IProps) => React.JSX.Element;
+export { Textarea, IProps };

package/inputs/Textarea/Textarea.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+// Helpers
+import { SVG } from '../../svg';
+import { InputWrapper } from '../Input/InputWrapper';
+var TextareaBase = function (props) {
+    // Ref to <textarea>: used to set fullscreen.
+    var textareaRef = React.useRef(null);
+    // Current value:
+    var _a = React.useState(props.value), value = _a[0], setValue = _a[1];
+    // Update value state when value prop changes.
+    React.useEffect(function () {
+        setValue(props.value);
+    }, [props.value]);
+    var handleChange = function (e) {
+        setValue(e.target.value);
+        if (props.onChange) {
+            props.onChange(e.target.value);
+        }
+    };
+    var toggleFullscreen = function () {
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            textareaRef.current.requestFullscreen();
+        }
+    };
+    return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent },
+        React.createElement("textarea", { className: props.className, ref: textareaRef, name: props.name, value: value == null ? '' : value, placeholder: props.placeholder, disabled: props.disabled, rows: props.rows, tabIndex: 0, onChange: handleChange }),
+        props.fullscreen &&
+            React.createElement(FullscreenToggle, { onClick: toggleFullscreen },
+                React.createElement("use", { xlinkHref: SVG.Icons.Fullscreen }))));
+};
+var FullscreenToggle = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  fill: ", ";\n"], ["\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  fill: ", ";\n"])), function (p) { return p.theme.colors.primary[3]; });
+var TextareaStyled = styled(TextareaBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  // No resize grip\n  resize: ", "; \n\n  // Height\n  ", "\n  ", "\n  \n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  color:            ", ";\n  border:           none;\n  outline:          none;\n  background:       ", ";\n\n  // Font:\n  font: ", ";\n  ", "\n  text-align: left;\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Define colors for selected text.\n  &::selection {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }  \n\n  // Make sure HTML5 validation does not show up. \n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n"], ["\n  position: relative;\n  // No resize grip\n  resize: ", "; \n\n  // Height\n  ", "\n  ", "\n  \n  width:            100%;\n  box-sizing:       border-box;\n  z-index:          0;\n  color:            ", ";\n  border:           none;\n  outline:          none;\n  background:       ", ";\n\n  // Font:\n  font: ", ";\n  ", "\n  text-align: left;\n\n  // Define colors for placeholder text.\n  &::placeholder {\n    color: rgb(from ", " r g b / 50%);\n    opacity: 1 !important; /* Firefox applies opacity */\n  }\n\n  // Define colors for selected text.\n  &::selection {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  // Focus:\n  &:focus {\n    &::placeholder {\n      color: rgb(from ", " r g b / 30%);\n    }\n  }  \n\n  // Make sure HTML5 validation does not show up. \n  &:valid {\n    box-shadow: none;\n  }\n  &:invalid {\n    box-shadow: none;\n  }\n"
+    /**
+     * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
+     * it can be contained in a `Form.Field`. A (vertical) resizer can be added
+     * using `resizable`, and a fullscreen toggle is added using `fullscreen`.
+     */
+])), function (p) { return p.resizable ? 'vertical' : 'none'; }, function (p) { return !p.minHeight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["min-height: 80px;"], ["min-height: 80px;"]))); }, function (p) { return p.minHeight && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["min-height: ", "px;"], ["min-height: ", "px;"])), p.minHeight); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return (p.disabled || p.transparent || p.ghost) ? 'transparent' : p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.monospaced && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["font: ", ";"], ["font: ", ";"])), p.theme.font.dataLarge); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; });
+/**
+ * `Textarea` encapsulated and styles the `<textarea>` element. Like `Input`,
+ * it can be contained in a `Form.Field`. A (vertical) resizer can be added
+ * using `resizable`, and a fullscreen toggle is added using `fullscreen`.
+ */
+var Textarea = function (props) { return React.createElement(TextareaStyled, __assign({}, props)); };
+export { Textarea };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;