@longline/aqua-ui 1.0.0

package/controls/Chip/Chip.js

@@ -0,0 +1,83 @@
+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 { SVG } from '../../svg';
+var ChipBase = function (props) {
+    var handleKeyDown = function (e) {
+        if (props.disabled)
+            return;
+        if (e.key == 'Delete') {
+            e.stopPropagation();
+            if (props.onClick)
+                props.onClick();
+        }
+    };
+    return (
+    // "".chip" class is used, in the CSS, to check whether the previous 
+    // sibling is also a Chip.
+    React.createElement("div", { className: "".concat(props.className, " chip"), tabIndex: 0, onKeyDown: handleKeyDown },
+        React.createElement("div", { tabIndex: -1 }, props.children),
+        React.createElement("svg", { onClick: props.onClick },
+            React.createElement("use", { xlinkHref: SVG.Icons.Cross }))));
+};
+var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  .chip + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  & > div {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > svg {\n    transition: fill ", "ms ease-in-out,\n                background-color ", "ms ease-in-out;\n    fill: ", ";\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    padding: 2px;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  .chip + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  & > div {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > svg {\n    transition: fill ", "ms ease-in-out,\n                background-color ", "ms ease-in-out;\n    fill: ", ";\n    box-sizing: border-box;\n    width: 18px;\n    height: 18px;\n    padding: 2px;\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  &:focus {\n    outline: solid 2px ", ";;\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
+    /**
+     * A set of `Chip` instances show consecutive user inputs and are individually
+     * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
+     * when `Delete` is pressed, `onClick` is triggered.
+     *
+     * A `Chip` has a slight left margin to offset it from the preceding `Chip` in a
+     * set. This margin is only applied between `Chip` siblings.
+     *
+     * Chips have a minimum width and maximum width. Content that exceeds the
+     * maximum width is ellipsized. If `verticalAlign` is specified, then the contents
+     * of the `Chip` are aligned with flexbox. This is necessary when the chip label
+     * is not a string but JSX. If `verticalAlign` is enabled, the Chip
+     * content is no longer ellipsized.
+     */
+])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > svg {\n      fill: ", ";\n    }\n  "], ["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }); });
+/**
+ * A set of `Chip` instances show consecutive user inputs and are individually
+ * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
+ * when `Delete` is pressed, `onClick` is triggered.
+ *
+ * A `Chip` has a slight left margin to offset it from the preceding `Chip` in a
+ * set. This margin is only applied between `Chip` siblings.
+ *
+ * Chips have a minimum width and maximum width. Content that exceeds the
+ * maximum width is ellipsized. If `verticalAlign` is specified, then the contents
+ * of the `Chip` are aligned with flexbox. This is necessary when the chip label
+ * is not a string but JSX. If `verticalAlign` is enabled, the Chip
+ * content is no longer ellipsized.
+ */
+var Chip = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);
+    return React.createElement(ChipStyled, __assign({ disabled: disabled }, props));
+};
+export { Chip };
+var templateObject_1, templateObject_2;

package/controls/Fab/Fab.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Button content. Can be JSX.
+     */
+    children?: React.ReactNode;
+    /**
+     * Path to an SVG symbol, e.g. `/sprites.svg#close`. The `SVG` enumeration
+     * exists that offers preset paths.
+     */
+    icon: string;
+    /**
+     * A disabled button cannot be interacted with. This is implemented using
+     * `pointer-events: none`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional browser tooltip to show when the button is hovered.
+     */
+    title?: string;
+    /**
+     * A `positive` button will have an _icon_ color that indicates a _positive
+     * consequence_, taken from the theme (usually a shade of green).
+     * @default false
+     */
+    positive?: boolean;
+    /**
+     * A `negative` button will have an _icon_ color that indicates a _negative
+     * consequence_, taken from the theme (usually a shade of red).
+     * @default false
+     */
+    negative?: boolean;
+    /**
+     * `color` can be used to set a custom _icon_ color. This is only used
+     * if `positive` and `negative` are not present. The color is a valid
+     * CSS color value, e.g. `rgba(100,100,100,200)`.
+     */
+    color?: string;
+    /**
+     * A button in an `active` state is shown as depressed. This will override
+     * any color settings.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Fired when the button is clicked.
+     */
+    onClick: () => void;
+}
+/**
+ * Floating action buttons (FABs) help people take primary ations and are used
+ * to represent the most important action on a screen. A FAB renders as a
+ * `<button>` element.
+ *
+ * FABs always have an icon, but other button content is optional. The optional
+ * button content is usually a string, but may be any React component.
+ * The icon symbol path is passed in as a property.
+ *
+ * #### Colors
+ * The FAB surface and text always have the same color, but the icon has
+ * four options: `positive` (theme-dependent, usually a shade of green),
+ * `negative` (theme-dependent, usually a shade of red), custom, and themed
+ * (the default).
+ *
+ * #### States
+ * * The FAB can be in a `disabled` state where it cannot be clicked.
+ * * The FAB can be in an `active` state where it appears depressed.
+ */
+declare const Fab: ({ disabled, positive, negative, active, ...props }: IProps) => React.JSX.Element;
+export { Fab, IProps };

package/controls/Fab/Fab.js

@@ -0,0 +1,94 @@
+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';
+var FabBase = function (props) {
+    var handleClick = function () {
+        if (props.disabled)
+            return;
+        if (props.onClick)
+            props.onClick();
+    };
+    return (React.createElement("button", { tabIndex: props.disabled ? -1 : 0, className: props.className, onClick: handleClick, title: props.title },
+        React.createElement("svg", null,
+            React.createElement("use", { xlinkHref: props.icon })),
+        props.children));
+};
+var FabStyled = styled(FabBase).attrs(function (p) {
+    return {
+        iconColor: p.disabled ? p.theme.colors.primary[2]
+            : p.positive ? p.theme.colors.positive
+                : p.negative ? p.theme.colors.negative
+                    : p.color ? p.color
+                        : p.theme.colors.primary[3]
+    };
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms, \n    color ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  ", "\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  gap: 12px;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n\n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms, \n    color ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  box-shadow: ", ";\n\n  ", "\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  gap: 12px;\n\n  svg {\n    fill: ", ";\n    width: 24px !important;\n    max-width: 24px;\n    height: 24px !important;\n    max-height: 24px;\n  }  \n\n  // Special active state overrides other states:\n  ", "\n\n  ", "\n"
+    /**
+     * Floating action buttons (FABs) help people take primary ations and are used
+     * to represent the most important action on a screen. A FAB renders as a
+     * `<button>` element.
+     *
+     * FABs always have an icon, but other button content is optional. The optional
+     * button content is usually a string, but may be any React component.
+     * The icon symbol path is passed in as a property.
+     *
+     * #### Colors
+     * The FAB surface and text always have the same color, but the icon has
+     * four options: `positive` (theme-dependent, usually a shade of green),
+     * `negative` (theme-dependent, usually a shade of red), custom, and themed
+     * (the default).
+     *
+     * #### States
+     * * The FAB can be in a `disabled` state where it cannot be clicked.
+     * * The FAB can be in an `active` state where it appears depressed.
+     */
+])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[95]; }, 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.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return !p.active && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "], ["\n    &:hover {\n      background-color: ", ";\n      box-shadow: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  "])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.shadows.large; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.iconColor; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "], ["\n    background-color: ", ";\n    color: ", ";\n    svg { fill: ", "; }\n    box-shadow: ", ";\n  "])), p.theme.colors.primary[4], p.theme.colors.accent, p.theme.colors.accent, p.theme.shadows.inner); }, function (p) { return p.disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    background-color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.neutral[50], p.theme.colors.primary[3]); });
+/**
+ * Floating action buttons (FABs) help people take primary ations and are used
+ * to represent the most important action on a screen. A FAB renders as a
+ * `<button>` element.
+ *
+ * FABs always have an icon, but other button content is optional. The optional
+ * button content is usually a string, but may be any React component.
+ * The icon symbol path is passed in as a property.
+ *
+ * #### Colors
+ * The FAB surface and text always have the same color, but the icon has
+ * four options: `positive` (theme-dependent, usually a shade of green),
+ * `negative` (theme-dependent, usually a shade of red), custom, and themed
+ * (the default).
+ *
+ * #### States
+ * * The FAB can be in a `disabled` state where it cannot be clicked.
+ * * The FAB can be in an `active` state where it appears depressed.
+ */
+var Fab = function (_a) {
+    var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.positive, positive = _c === void 0 ? false : _c, _d = _a.negative, negative = _d === void 0 ? false : _d, _e = _a.active, active = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "positive", "negative", "active"]);
+    return React.createElement(FabStyled, __assign({ disabled: disabled, positive: positive, negative: negative, active: active }, props));
+};
+export { Fab };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/controls/Icon/Icon.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Size } from '../../Types';
+interface IIconProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * URL of spritesheet and icon, e.g. 'sprites.svg#arrow'
+     */
+    url: string;
+    /**
+     * Optional icon tooltip title.
+     */
+    title?: string;
+    /**
+     * Disabled icons have a lighter color and cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Icon size: `mini`, `tiny`, `small`, `medium` (default), `large`, `big`, `huge` or `massive`.
+     * The default (medium) icon size is `1em`. Icon sizes increase or decrease by
+     * a _minor third_ (1.2x).
+     * Icon size can also be a **number**, in which case the size is in pixels.
+     * @default medium
+     */
+    size?: Size | number;
+    /**
+     * Flip icon vertically.
+     * @default false
+     */
+    flipped?: boolean;
+    /**
+     * Mirror icon horizontally.
+     * @default false
+     */
+    mirrored?: boolean;
+    /**
+     * Rotate icon by degrees, e.g. `90` for a quarter rotation to the right.
+     * @default 0
+     */
+    rotated?: number;
+    /**
+     * Icon color, e.g. `skyblue`. Color must be a valid CSS value.
+     * @default white
+     */
+    circle?: boolean;
+    /**
+     * If set, adds a circle around the icon.
+     * @default false
+     */
+    color?: string;
+    /**
+     * Add a rotation animation.
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * Adds spacing around the icon.
+     * @default false
+     */
+    padded?: boolean;
+    /**
+     * An icon can have an `onClick` handler. It is triggered when the icon
+     * is clicked.
+     */
+    onClick?: (e?: React.MouseEvent) => void;
+}
+declare const IconBase: (props: IIconProps) => React.JSX.Element;
+interface IStyledProps {
+    realSize?: string;
+    color?: string;
+}
+declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<IIconProps, IIconProps>, IStyledProps>, IIconProps>> & string & Omit<(props: IIconProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+/**
+ * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
+ * with an URL of the form `spritesheet.svg#my-icon`.
+ *
+ * An icon defaults to a white color unless overridden using `color`.
+ *
+ * #### Size
+ * The icon size defaults to `medium`, which corresponds to `1em`. Other
+ * preset sizes cause the icon to shrink or grow by a growth factor of 1.2
+ * (_minor third_).
+ *
+ * * `mini`: 0.578
+ * * `tiny`: 0.694
+ * * `small`: 0.833
+ * * `medium`: 1
+ * * `large`:  1.2
+ * * `big`: 1.44
+ * * `huge`: 1.728
+ * * `massive`: 2.0736
+ *
+ * For exact sizing, `size` also accepts a size in pixels. An icon is always
+ * square.
+ */
+declare const Icon: ({ size, disabled, flipped, mirrored, animated, padded, circle, ...props }: IIconProps) => React.JSX.Element;
+export { IconBase, Icon, IconStyled, IIconProps };

package/controls/Icon/Icon.js

@@ -0,0 +1,79 @@
+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, { keyframes, css } from 'styled-components';
+// Helpers
+import { lighten } from '../../helper/lighten';
+import { scaleSize } from '../../helper/SizeHelper';
+var IconBase = function (props) {
+    var handleClick = function (e) {
+        if (props.disabled)
+            return;
+        if (props.onClick)
+            props.onClick(e);
+    };
+    return (React.createElement("svg", { className: props.className, onClick: handleClick, focusable: "false" },
+        props.title && React.createElement("title", null, props.title),
+        React.createElement("use", { xlinkHref: props.url })));
+};
+var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { rotate: 0deg; }\n  to   { rotate: 360deg; }\n"], ["\n  from { rotate: 0deg; }\n  to   { rotate: 360deg; }\n"])));
+var IconStyled = styled(IconBase).attrs(function (p) {
+    var _a, _b;
+    return ({
+        realSize: typeof p.size === 'number' ? "".concat(p.size, "px") : "".concat(scaleSize((_a = p.size) !== null && _a !== void 0 ? _a : 'medium', 1, 'minorThird'), "em"),
+        color: (_b = p.color) !== null && _b !== void 0 ? _b : p.theme.colors.neutral[100]
+    });
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  ", "\n  ", "\n  ", "\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  ", "\n  ", "\n  ", "\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.realSize; }, function (p) { return p.flipped && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["scale: 1 -1;"], ["scale: 1 -1;"]))); }, function (p) { return p.mirrored && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["scale: -1 1;"], ["scale: -1 1;"]))); }, function (p) { return p.rotated && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["rotate: ", "deg;"], ["rotate: ", "deg;"])), p.rotated); }, function (p) { return p.color; }, function (p) { return p.onClick && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, p.color), lighten(0.3, p.color)); }, function (p) { return p.animated && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
+/**
+ * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
+ * with an URL of the form `spritesheet.svg#my-icon`.
+ *
+ * An icon defaults to a white color unless overridden using `color`.
+ *
+ * #### Size
+ * The icon size defaults to `medium`, which corresponds to `1em`. Other
+ * preset sizes cause the icon to shrink or grow by a growth factor of 1.2
+ * (_minor third_).
+ *
+ * * `mini`: 0.578
+ * * `tiny`: 0.694
+ * * `small`: 0.833
+ * * `medium`: 1
+ * * `large`:  1.2
+ * * `big`: 1.44
+ * * `huge`: 1.728
+ * * `massive`: 2.0736
+ *
+ * For exact sizing, `size` also accepts a size in pixels. An icon is always
+ * square.
+ */
+var Icon = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.flipped, flipped = _d === void 0 ? false : _d, _e = _a.mirrored, mirrored = _e === void 0 ? false : _e, _f = _a.animated, animated = _f === void 0 ? false : _f, _g = _a.padded, padded = _g === void 0 ? false : _g, _h = _a.circle, circle = _h === void 0 ? false : _h, props = __rest(_a, ["size", "disabled", "flipped", "mirrored", "animated", "padded", "circle"]);
+    return React.createElement(IconStyled, __assign({ size: size, disabled: disabled, flipped: flipped, mirrored: mirrored, animated: animated, padded: padded, circle: circle }, props));
+};
+export { IconBase, Icon, IconStyled };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/controls/Icon/index.d.ts

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

package/controls/Icon/index.js

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

package/controls/Key/Key.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * `Key` value must be a key from the OnKeyDown key enumeration.
+     */
+    value: string;
+    /**
+     * @ignore
+     * Fakes a Mac keyboard.
+     */
+    _fakeMac?: boolean;
+}
+/**
+ * A `Key` displays a keyboard key. The value is the key description,
+ * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+ * is longer than 1 character, in which case the width becomes 36px.
+ * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+ */
+declare const Key: (props: IProps) => React.JSX.Element;
+export { Key };

package/controls/Key/Key.js

@@ -0,0 +1,74 @@
+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 from 'styled-components';
+import { Icon } from '../Icon';
+import { SVG } from '../../svg';
+var KeyBase = function (props) {
+    var isMac = navigator.userAgent.includes('Mac') || props._fakeMac;
+    var symbol = props.value;
+    var wide = false;
+    // Key replacement:
+    switch (props.value) {
+        case 'Ctrl':
+            // On a Mac, the Ctrl key becomes a Mac symbol.
+            if (isMac) {
+                symbol = React.createElement(Icon, { url: SVG.Icons.Cmd });
+            }
+            else {
+                wide = true;
+            }
+            break;
+        case 'ArrowUp':
+            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: -90 });
+            break;
+        case 'ArrowDown':
+            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 90 });
+            break;
+        case 'ArrowRight':
+            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow });
+            break;
+        case 'ArrowLeft':
+            symbol = React.createElement(Icon, { url: SVG.Icons.Arrow, rotated: 180 });
+            break;
+        default:
+            if (props.value.length > 1)
+                wide = true;
+    }
+    return (React.createElement("span", { className: props.className, style: {
+            maxWidth: wide ? 'auto' : '16px',
+            minWidth: wide ? '36px' : 'auto'
+        } },
+        React.createElement(Inner, { style: { justifyContent: wide ? 'start' : 'center' } }, symbol)));
+};
+var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"])));
+var KeyStyled = styled(KeyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display:       inline-block;\n  color:         ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px 0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"], ["\n  display:       inline-block;\n  color:         ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px 0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"
+    /**
+     * A `Key` displays a keyboard key. The value is the key description,
+     * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+     * is longer than 1 character, in which case the width becomes 36px.
+     * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+     */
+])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.font.labelSmall; });
+/**
+ * A `Key` displays a keyboard key. The value is the key description,
+ * e.g. "Ctrl" or "Alt". A key is 16x16px square, unless the key description
+ * is longer than 1 character, in which case the width becomes 36px.
+ * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+ */
+var Key = function (props) { return React.createElement(KeyStyled, __assign({}, props)); };
+export { Key };
+var templateObject_1, templateObject_2;

package/controls/Key/index.d.ts

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

package/controls/Key/index.js

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

package/controls/LinearChart/LinearChart.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * LinearChart value (in range 0..100)
+     */
+    value: number;
+    /**
+     * If set, a percentage number is shown on the LinearChart bar.
+     * @default false
+     */
+    numbered?: boolean;
+    /**
+     * Optional label.
+     */
+    label?: React.ReactNode;
+    /**
+     * If set, sets the color of the LinearChart bar. By default,
+     * the color is the theme primary color.
+     */
+    color?: string;
+}
+/**
+ * Data visualization element.
+ *
+ * The `LinearChart` will fill all horizontal space available to it.
+ * A percentage value and a text label are optional.
+ */
+declare const LinearChart: ({ numbered, ...props }: IProps) => React.JSX.Element;
+export { LinearChart, IProps };

package/controls/LinearChart/LinearChart.js

@@ -0,0 +1,58 @@
+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 from 'styled-components';
+var LinearChartBase = function (props) {
+    var percentage = Math.round(Math.max(0, Math.min(100, props.value))) + "%";
+    return (React.createElement("div", { className: props.className },
+        props.label && React.createElement(Label, null, props.label),
+        props.numbered && React.createElement(Number, null, percentage),
+        React.createElement(Bar, null)));
+};
+var Label = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"], ["\n  width: 120px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  height: 18px;\n  line-height: 18px; // If not, will chop accents of \u00C3 and \u00C7.\n  font-weight: 700; // TODO: Needs to use theme font weight\n"])));
+var Number = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"], ["\n  width: 40px;\n  text-align: right;\n  height: 18px;     // If not, will chop accents of \u00C3 and \u00C7.\n  line-height: 18px;\n"])));
+var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"], ["\n  position: relative; \n  box-sizing: border-box;\n  flex: 1;\n  height: 14px;\n\n  background-color: ", ";\n  border-radius: 7px;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    border-radius: 7px;\n  }  \n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.animation.duration * 2; });
+var LinearChartStyled = styled(LinearChartBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  margin: 8px 0 8px 0;\n  min-width: 200px;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  margin: 8px 0 8px 0;\n  min-width: 200px;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
+    /**
+     * Data visualization element.
+     *
+     * The `LinearChart` will fill all horizontal space available to it.
+     * A percentage value and a text label are optional.
+     */
+])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.font; }, Bar, function (p) { return Math.max(0, Math.min(100, p.value)); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+/**
+ * Data visualization element.
+ *
+ * The `LinearChart` will fill all horizontal space available to it.
+ * A percentage value and a text label are optional.
+ */
+var LinearChart = function (_a) {
+    var _b = _a.numbered, numbered = _b === void 0 ? false : _b, props = __rest(_a, ["numbered"]);
+    return React.createElement(LinearChartStyled, __assign({ numbered: numbered }, props));
+};
+export { LinearChart };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;