@longline/aqua-ui 1.0.9 → 1.0.11

package/controls/Mouse/Mouse.js

@@ -0,0 +1,51 @@
+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 MouseBase = function (props) {
+    return (React.createElement("svg", { className: props.className, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z", fill: props.color }),
+        props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),
+        props.right && React.createElement("path", { className: "right", d: "M21.875 12.2562V11.3812C21.875 7.33539 18.806 3.995 14.875 3.5575V8.04193C15.8911 8.40397 16.625 9.36647 16.625 10.5062V12.2562H21.875Z" }),
+        props.wheel && React.createElement("path", { className: "wheel", d: "M15.875 10.5062C15.875 9.47241 15.0365 8.63123 14 8.63123C12.9635 8.63123 12.125 9.47241 12.125 10.5062V13.1312C12.125 14.165 12.9635 15.0062 14 15.0062C15.0365 15.0062 15.875 14.165 15.875 13.1312V10.5062Z" })));
+};
+var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
+    /**
+     * `Mouse` renders an SVG with a mouse image, optionally with its
+     * `left`, `right` or `wheel` buttons pressed.
+     */
+])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
+/**
+ * `Mouse` renders an SVG with a mouse image, optionally with its
+ * `left`, `right` or `wheel` buttons pressed.
+ */
+var Mouse = function (_a) {
+    var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);
+    return React.createElement(MouseStyled, __assign({ left: left, right: right, wheel: wheel }, props));
+};
+export { Mouse };
+var templateObject_1, templateObject_2;

package/controls/Mouse/index.d.ts

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

package/controls/Mouse/index.js

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

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** Button content. Can be JSX. */
+    children?: React.ReactNode;
+    /**
+     * A disabled button cannot be interacted with. this is implemented using
+     * `pointer-events: none`.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A `positive` button will have a color that indicates a _positive
+     * consequence_, taken from the theme (usually a shade of green).
+     * @default false
+     */
+    positive?: boolean;
+    /**
+     * A `negative` button will have a 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 button 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;
+    /**
+     * Optional browser tooltip to show when the button is hovered.
+     */
+    title?: string;
+    /**
+     * Path to an SVG symbol, e.g. `/sprites.svg#close`. The `SVG` enumeration
+     * exists that offers preset paths.
+     */
+    icon?: string;
+    /**
+     * The icon color defaults to the lightest neutral color, but can be
+     * overridden. This must be a valid CSS color value.
+     */
+    iconColor?: string;
+    /**
+     * Fired when the button is clicked.
+     */
+    onClick: () => void;
+}
+/**
+ * Primary buttons denote the primary action. They may have icons or not and
+ * have three colors: `positive`, `negative`, and themed (the default).
+ * It renders as a `<button>` element.
+ *
+ * The `icon` name is passed in as a property. However, the other children of
+ * the button can be any React component.
+ *
+ * The color of the button defaults to a primary theme color, unless overridden
+ * with `positive`, `negative` or `color`. The button can be in a `disabled`
+ * state where it cannot be clicked.
+ */
+declare const PrimaryButton: ({ disabled, positive, negative, ...props }: IProps) => React.JSX.Element;
+export { PrimaryButton, IProps };

package/controls/PrimaryButton/PrimaryButton.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 { darken } from '../../helper/darken';
+var PrimaryButtonBase = 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 },
+        props.icon && React.createElement("svg", null,
+            React.createElement("use", { xlinkHref: props.icon })),
+        props.children));
+};
+var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
+    return {
+        backgroundColor: p.disabled ? p.theme.colors.neutral[80]
+            : p.positive ? p.theme.colors.positive
+                : p.negative ? p.theme.colors.negative
+                    : p.color ? p.color
+                        : p.theme.colors.primary[1],
+        outlineColor: (p.positive || p.negative) ? p.theme.colors.primary[1]
+            : p.theme.colors.accent
+    };
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\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  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    fill: ", ";\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 56px;\n  padding-left: 16px;\n  padding-right: 16px;\n  min-width: 90px;\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  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 12px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    fill: ", ";\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
+    /**
+     * Primary buttons denote the primary action. They may have icons or not and
+     * have three colors: `positive`, `negative`, and themed (the default).
+     * It renders as a `<button>` element.
+     *
+     * The `icon` name is passed in as a property. However, the other children of
+     * the button can be any React component.
+     *
+     * The color of the button defaults to a primary theme color, unless overridden
+     * with `positive`, `negative` or `color`. The button can be in a `disabled`
+     * state where it cannot be clicked.
+     */
+])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.backgroundColor; }, 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 darken(0.025, p.backgroundColor); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.backgroundColor; }, function (p) { return p.outlineColor; }, function (p) { var _a; return (_a = p.iconColor) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
+/**
+ * Primary buttons denote the primary action. They may have icons or not and
+ * have three colors: `positive`, `negative`, and themed (the default).
+ * It renders as a `<button>` element.
+ *
+ * The `icon` name is passed in as a property. However, the other children of
+ * the button can be any React component.
+ *
+ * The color of the button defaults to a primary theme color, unless overridden
+ * with `positive`, `negative` or `color`. The button can be in a `disabled`
+ * state where it cannot be clicked.
+ */
+var PrimaryButton = 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, props = __rest(_a, ["disabled", "positive", "negative"]);
+    return React.createElement(PrimaryButtonStyled, __assign({ disabled: disabled, positive: positive, negative: negative }, props));
+};
+export { PrimaryButton };
+var templateObject_1, templateObject_2;

package/controls/PrimaryButton/index.d.ts

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

package/controls/PrimaryButton/index.js

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

package/controls/Progress/Progress.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Progress value (in range 0..100)
+     */
+    value: number;
+    /**
+     * If set, a percentage number is shown on the Progress bar.
+     * @default false
+     */
+    numbered?: boolean;
+    /**
+     * A padded `Progress` has a margin around it (of 10px).
+     * @default false
+     */
+    padded?: boolean;
+    /**
+     * Set progress bar thickness in pixels. Defaults to 5.
+     * @default 5
+     */
+    thickness?: number;
+    /**
+     * If set, sets the color of the Progress bar. By default,
+     * the color is the theme primary color.
+     */
+    color?: string;
+}
+/**
+ * The Progress component shows a progress bar, filled to a percentage equal to
+ * value. The bar always stretches to fill all horizontal space available to it.
+ */
+declare const Progress: ({ thickness, numbered, padded, ...props }: IProps) => React.JSX.Element;
+export { Progress, IProps };

package/controls/Progress/Progress.js

@@ -0,0 +1,49 @@
+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 ProgressBase = function (props) {
+    return React.createElement("div", { className: props.className });
+};
+var ProgressStyled = styled(ProgressBase).attrs(function (p) { return ({
+    percentageStr: Math.round(Math.min(100, Math.max(0, p.value))).toString() + '%'
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ", ";\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    background-color: ", ";\n    border-radius: ", "px;\n  }\n\n  ", "\n"], [" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n  \n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: ", ";\n    height: 100%;\n    box-sizing: border-box;\n    transition: width ", "ms ease;\n    background-color: ", ";\n    border-radius: ", "px;\n  }\n\n  ", "\n"
+    /**
+     * The Progress component shows a progress bar, filled to a percentage equal to
+     * value. The bar always stretches to fill all horizontal space available to it.
+     */
+])), function (p) { return p.thickness; }, function (p) { return p.padded && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, function (p) { return p.value + '%'; }, function (p) { return p.theme.animation.duration * 2; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.thickness / 2; }, function (p) { return p.numbered && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "], ["\n    &:after {\n      content: '", "';\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      font-size: 8px;\n      line-height: 0;\n      color: ", ";\n      text-shadow: 0px 0px 4px #000;\n    }\n  "])), p.percentageStr, function (p) { return p.theme.colors.neutral[100]; }); });
+/**
+ * The Progress component shows a progress bar, filled to a percentage equal to
+ * value. The bar always stretches to fill all horizontal space available to it.
+ */
+var Progress = function (_a) {
+    var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.numbered, numbered = _c === void 0 ? false : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["thickness", "numbered", "padded"]);
+    return React.createElement(ProgressStyled, __assign({ thickness: thickness, numbered: numbered, padded: padded }, props));
+};
+export { Progress };
+var templateObject_1, templateObject_2, templateObject_3;

package/controls/Progress/index.d.ts

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

package/controls/Progress/index.js

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

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * A disabled button cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Path to an SVG symbol, e.g. `/sprites.svg#close`. The `SVG` enumeration
+     * exists that offers preset paths.
+     */
+    icon: string;
+    /**
+     * A `positive` button will have a color that indicates a _positive
+     * consequence_, taken from the theme (usually a shade of green).
+     * @default false
+     */
+    positive?: boolean;
+    /**
+     * A `negative` button will have a 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 button 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;
+    /**
+     * Optional browser tooltip to show when the button is hovered. This may
+     * be relevant since this type of button has no text.
+     */
+    title?: string;
+    /**
+     * The icon color defaults to the lightest neutral color, but can be
+     * overridden. This must be a valid CSS color value.
+     */
+    iconColor?: string;
+    /**
+     * Fired when the button is clicked.
+     */
+    onClick: () => void;
+}
+/**
+ * The `SecondaryButton` is a small button that holds only an icon. It has no
+ * other content. It renders as a `<button>` element.
+ *
+ * The color of the button defaults to a neutral theme color, unless overridden
+ * with `positive`, `negative` or `color`.
+ *
+ * A `disabled` button cannot be clicked at all.
+ */
+declare const SecondaryButton: ({ disabled, positive, negative, ...props }: IProps) => React.JSX.Element;
+export { SecondaryButton, IProps };

package/controls/SecondaryButton/SecondaryButton.js

@@ -0,0 +1,73 @@
+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 SecondaryButtonBase = 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 }))));
+};
+var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
+    return {
+        backgroundColor: p.disabled ? p.theme.colors.neutral[50]
+            : p.positive ? p.theme.colors.positive
+                : p.negative ? p.theme.colors.negative
+                    : p.color ? p.color
+                        : p.theme.colors.neutral[10]
+    };
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow 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  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    fill: ", ";\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow 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  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & inset dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    fill: ", ";\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
+    /**
+     * The `SecondaryButton` is a small button that holds only an icon. It has no
+     * other content. It renders as a `<button>` element.
+     *
+     * The color of the button defaults to a neutral theme color, unless overridden
+     * with `positive`, `negative` or `color`.
+     *
+     * A `disabled` button cannot be clicked at all.
+     */
+])), function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { var _a; return (_a = p.iconColor) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
+/**
+ * The `SecondaryButton` is a small button that holds only an icon. It has no
+ * other content. It renders as a `<button>` element.
+ *
+ * The color of the button defaults to a neutral theme color, unless overridden
+ * with `positive`, `negative` or `color`.
+ *
+ * A `disabled` button cannot be clicked at all.
+ */
+var SecondaryButton = 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, props = __rest(_a, ["disabled", "positive", "negative"]);
+    return React.createElement(SecondaryButtonStyled, __assign({ disabled: disabled, positive: positive, negative: negative }, props));
+};
+export { SecondaryButton };
+var templateObject_1, templateObject_2, templateObject_3;

package/controls/SecondaryButton/index.d.ts

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

package/controls/SecondaryButton/index.js

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

package/controls/TabBar/Tab.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Is this tab currently active?
+     */
+    active?: boolean;
+    /**
+     * Tabs use a fluid width. A fixed width (in pixels) can be provided.
+     */
+    tabWidth?: number;
+    /**
+     * Fired when tab is clicked.
+     */
+    onClick?: () => void;
+}
+declare const Tab: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
+export { Tab, IProps };

package/controls/TabBar/Tab.js

@@ -0,0 +1,25 @@
+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 TabBase = React.forwardRef(function (props, ref) {
+    return React.createElement("div", { className: props.className, ref: ref, onClick: props.onClick }, props.children);
+});
+var TabStyled = styled(TabBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"], ["\n  display: table-cell;\n  vertical-align: middle;\n  text-align: center;\n  white-space: nowrap;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: 40px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n"])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; });
+var Tab = React.forwardRef(function (props, ref) { return React.createElement(TabStyled, __assign({ ref: ref }, props)); });
+Tab.displayName = "TabBar.Tab";
+export { Tab };
+var templateObject_1, templateObject_2, templateObject_3;

package/controls/TabBar/TabBar.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Children must be of type `TabBar.Tab`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Index of the active tab.
+     * @default 0
+     */
+    active?: number;
+    /**
+     * Tabs use a fluid width. A fixed width (in pixels) can be provided.
+     */
+    tabWidth?: number;
+    /**
+     * Fired when the active tab changes. `idx` is the index of the new tab.
+     */
+    onChange?: (idx: number) => void;
+}
+/**
+ * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
+ * with an underliner under the active child. The `onClick(idx)` event is fired
+ * when a tab is clicked.
+ *
+ * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
+ */
+declare const TabBar: {
+    ({ active, ...props }: IProps): React.JSX.Element;
+    Tab: React.ForwardRefExoticComponent<import("./Tab").IProps & React.RefAttributes<HTMLDivElement>>;
+};
+export { TabBar };