@longline/aqua-ui 1.0.0

package/containers/InfoBox/elements/Content.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Add padding to content?
+     * @default false
+     */
+    padded?: boolean;
+    /**
+     * Minimum box height (in pixels).
+     * @default 0
+     */
+    minHeight?: number;
+    header?: React.ReactNode;
+}
+/**
+ * InfoBox.Content fills up all vertical space it can get.
+ */
+declare const Content: (props: IProps) => React.JSX.Element;
+export { Content, IProps };

package/containers/InfoBox/elements/Content.js

@@ -0,0 +1,37 @@
+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 { GlassPane } from '../../GlassPane';
+import { Header } from './Header';
+var ContentBase = function (props) {
+    return React.createElement("div", { className: props.className },
+        React.createElement(GlassPane, { bordered: true },
+            props.header && React.createElement(Header, null, props.header),
+            React.createElement(PaneContent, null, props.children)));
+};
+var PaneContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n"], ["\n  box-sizing: border-box;\n"])));
+var ContentStyled = styled(ContentBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  flex: 1;\n  ", "\n\n  // Content:\n  display: flex;\n\n  // Appearance:\n  color: ", ";\n  font: ", ";\n\n  // Behavior:\n  pointer-events: all; // undo InfoBox's events blocking.\n"], ["\n  // Size:\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  flex: 1;\n  ", "\n\n  // Content:\n  display: flex;\n\n  // Appearance:\n  color: ", ";\n  font: ", ";\n\n  // Behavior:\n  pointer-events: all; // undo InfoBox's events blocking.\n"
+    /**
+     * InfoBox.Content fills up all vertical space it can get.
+     */
+])), function (p) { return p.minHeight ? "".concat(p.minHeight, "px") : 'none'; }, function (p) { return p.padded && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", " {\n      padding: 10px 22px 10px 22px;\n    }\n  "], ["\n    ", " {\n      padding: 10px 22px 10px 22px;\n    }\n  "])), PaneContent); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; });
+/**
+ * InfoBox.Content fills up all vertical space it can get.
+ */
+var Content = function (props) { return React.createElement(ContentStyled, __assign({}, props)); };
+export { Content };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/InfoBox/elements/Footer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+}
+declare const Footer: (props: IProps) => React.JSX.Element;
+export { Footer, IProps };

package/containers/InfoBox/elements/Footer.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 from "styled-components";
+var FooterBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var FooterStyled = styled(FooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"], ["\n  // Position and size:\n  position: relative;\n  width: 100%;\n  padding-top: 8px;\n  padding-left:  16px;\n  padding-right: 16px;\n  box-sizing: border-box;\n  \n  // Appearance;\n  color: ", ";\n  font: ", ";\n\n  // Content:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 16px;\n\n  // While InfoBox blocks all pointer events, contents inside\n  // the footer must receive events:\n  & > * {\n    pointer-events: all;\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.bodyMedium; });
+var Footer = function (props) { return React.createElement(FooterStyled, __assign({}, props)); };
+export { Footer };
+var templateObject_1;

package/containers/InfoBox/elements/Header.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+}
+declare const Header: (props: IProps) => React.JSX.Element;
+export { Header, IProps };

package/containers/InfoBox/elements/Header.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 from "styled-components";
+var HeaderBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var HeaderStyled = styled(HeaderBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: rgb(from #1E242A r g b / 80%);\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"], ["\n  // Size:\n  box-sizing: border-box;\n  padding-left: 22px;\n  padding-right: 22px;\n  padding-top: 12px;\n  padding-bottom: 12px;\n\n  // Appearance:\n  background: rgb(from #1E242A r g b / 80%);\n  color: ", ";\n  font: ", ";\n  \n  // Content:\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.headingMedium; });
+var Header = function (props) { return React.createElement(HeaderStyled, __assign({}, props)); };
+export { Header };
+var templateObject_1;

package/containers/List/List.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Max items to show in list before it scrolls.
+     */
+    maxItems?: number;
+    /**
+     * If set, contracts the list if there are fewer than `maxItems` items.
+     * @default false
+     */
+    contract?: boolean;
+    /**
+     * Search callback (optional)
+     */
+    onSearch?: (q: string) => void;
+    /**
+     * Current search value (optional).
+     */
+    search?: string;
+    /**
+     * Optional search placeholder.
+     */
+    placeholder?: string;
+    /**
+     * If set, list items are extra tall.
+     */
+    tall?: boolean;
+}
+/**
+ * A List presents a series of `ListRow` elements, each containing `ListCell`
+ * elements to form columns. It is the expanded part of a `Dropdown` but can
+ * also be used on its own.
+ *
+ * It isn't necessary to use `ListCell`; it is only relevant if columns are
+ * desired.
+ *
+ * A list takes a forward `ref` which will point to the list of rows, so that
+ * other code, using the ref, can scroll list items into view.
+ */
+declare const List: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
+export { List, IProps };

package/containers/List/List.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { SVG } from '../../svg';
+import { Input } from '../../inputs/Input';
+/**
+ * A List presents a series of `ListRow` elements, each containing `ListCell`
+ * elements to form columns. It is the expanded part of a `Dropdown` but can
+ * also be used on its own.
+ *
+ * It isn't necessary to use `ListCell`; it is only relevant if columns are
+ * desired.
+ *
+ * A list takes a forward `ref` which will point to the list of rows, so that
+ * other code, using the ref, can scroll list items into view.
+ */
+var List = React.forwardRef(function (props, ref) {
+    return React.createElement(ListStyled, { className: props.className, tabIndex: -1, "$count": React.Children.count(props.children), "$maxItems": props.maxItems, "$contract": props.contract, "$tall": props.tall },
+        props.onSearch &&
+            React.createElement(SearchBox, { onClick: function (e) { return e.stopPropagation(); } },
+                React.createElement(Input, { noTabIndex: true, icon: SVG.Icons.Search, placeholder: props.placeholder, clearable: true, value: props.search, transparent: true, fluid: true, type: "text", onChange: props.onSearch })),
+        React.createElement(Inner, { ref: ref, tabIndex: -1 }, props.children));
+});
+var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n"], ["\n"
+    /**
+     * A search input is contained within a SearchBox to give it the same
+     * height as other list items. This is important for opening/closing
+     * the list to the correct height.
+     */
+])));
+/**
+ * A search input is contained within a SearchBox to give it the same
+ * height as other list items. This is important for opening/closing
+ * the list to the correct height.
+ */
+var SearchBox = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  padding-left: 4px;\n  padding-right: 4px;\n  display: flex;\n  align-items: center;\n  border-bottom: solid 1px ", ";\n  & input {\n    font: ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  padding-left: 4px;\n  padding-right: 4px;\n  display: flex;\n  align-items: center;\n  border-bottom: solid 1px ", ";\n  & input {\n    font: ", ";\n  }\n"])), function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.font.bodyMedium; });
+var ListStyled = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  overflow: hidden;\n  font: ", ";\n\n  ", " {\n    height: ", ";\n    overflow-y: auto;\n  }\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " > div {\n    height: ", "px;\n  }\n"], ["\n  width: 100%;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  overflow: hidden;\n  font: ", ";\n\n  ", " {\n    height: ", ";\n    overflow-y: auto;\n  }\n\n  ", " {\n    height: ", "px;\n  }\n\n  ", " > div {\n    height: ", "px;\n  }\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.font.bodyMedium; }, Inner, function (p) { return p.$maxItems
+    ? ((p.$contract
+        ? Math.min(p.$count, p.$maxItems)
+        : p.$maxItems)
+        * (p.$tall ? 56 : 42)) + "px"
+    : "100%"; }, SearchBox, function (p) { return p.$tall ? 56 : 42; }, Inner, function (p) { return p.$tall ? 56 : 42; });
+export { List };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/List/ListCell.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Column width. Defaults to 1. */
+    width?: number | string;
+    /** Text alignment. Defaults to 'left'. */
+    align?: 'left' | 'right';
+}
+declare const ListCell: (props: IProps) => React.JSX.Element;
+export { ListCell };

package/containers/List/ListCell.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 ListCellBase = function (props) {
+    return React.createElement("div", { className: props.className }, props.children);
+};
+var ListCellStyled = styled(ListCellBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  ", ";\n  ", ";\n  ", "\n\n  // Content alignment:\n  text-align: ", ";\n\n  // Text is truncated with an ellipsis\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (p) { return p.width && typeof p.width === 'string' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["width: ", ""], ["width: ", ""])), p.width); }, function (p) { return p.width && typeof p.width !== 'string' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.width); }, function (p) { return !p.width && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["flex: 1;"], ["flex: 1;"]))); }, function (p) { return p.align === 'right' ? 'right' : 'left'; });
+var ListCell = function (props) { return React.createElement(ListCellStyled, __assign({}, props)); };
+export { ListCell };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/containers/List/ListRow.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /** Gap between columns. */
+    gap?: number;
+    /** An `active` row will be highlighted. */
+    active?: boolean;
+    /** Triggered when row is clicked. */
+    onClick?: () => void;
+}
+declare const ListRow: (props: IProps) => React.JSX.Element;
+export { ListRow };

package/containers/List/ListRow.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 ListRowBase = function (props) {
+    return (React.createElement("div", { className: props.className, onClick: props.onClick }, props.children));
+};
+var ListRowStyled = styled(ListRowBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\n  ", "\n\n  ", "\n"], ["\n  padding-left: 16px;\n  padding-right: 16px;\n  min-height: 42px;\n  user-select: none;\n  outline: none;\n  color: ", ";\n\n  // Entire row is clickable:\n  cursor: ", ";\n\n  // Cells are flex-aligned:\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  gap: ", "px;\n\n  // Background color on hover:\n  &:hover {\n    background-color: ", ";\n  }\n\n  // Background color on pressed:\n  ", "\n\n  ", "\n"])), function (p) { return p.theme.colors.neutral[30]; }, function (p) { return p.onClick ? 'pointer' : 'auto'; }, function (p) { return p.gap; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.onClick && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &:active {\n      background-color: rgb(from ", " r g b / 65%) !important;\n      color: ", ";\n    }\n  "], ["\n    &:active {\n      background-color: rgb(from ", " r g b / 65%) !important;\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: rgb(from ", " r g b / 45%) !important;\n    color: ", ";\n  "], ["\n    background-color: rgb(from ", " r g b / 45%) !important;\n    color: ", ";\n  "])), function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }); });
+var ListRow = function (props) { return React.createElement(ListRowStyled, __assign({}, props)); };
+export { ListRow };
+var templateObject_1, templateObject_2, templateObject_3;

package/containers/List/index.d.ts

@@ -0,0 +1,3 @@
+export * from './List';
+export * from './ListRow';
+export * from './ListCell';

package/containers/List/index.js

@@ -0,0 +1,3 @@
+export * from './List';
+export * from './ListRow';
+export * from './ListCell';

package/containers/Tabs/Pane.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * Tab label. Can be JSX.
+     */
+    label: React.ReactNode;
+    /** @ignore */
+    active?: boolean;
+    /** @ignore */
+    nohiddenrender?: boolean;
+    /**
+     * Optional top padding, in pixels.
+     * @default 0
+     */
+    padding?: number;
+}
+/**
+ * Label and ontent for a single tab pane. The `label` can be JSX.
+ *
+ * By default, a pane adds no padding around its content in order to
+ * accommodate maps or images that must be rendered right against the tab bar
+ * itself. The `padding` prop can be used to add some top padding.
+ */
+declare const Pane: (props: IProps) => React.JSX.Element;
+export { Pane, IProps };

package/containers/Tabs/Pane.js

@@ -0,0 +1,45 @@
+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';
+var PaneBase = function (props) {
+    var shouldRender = function () {
+        return !props.nohiddenrender || props.active;
+    };
+    // By default, all children are rendered (but hidden when
+    // not active). With nohiddenrender enabled, only the active
+    // tab is rendered.
+    return (React.createElement("div", { className: props.className }, shouldRender() ? props.children : null));
+};
+var PaneStyled = styled(PaneBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  display: ", ";\n  height: 100%;\n  padding-top: ", "px;\n  font: ", ";\n"
+    /**
+     * Label and ontent for a single tab pane. The `label` can be JSX.
+     *
+     * By default, a pane adds no padding around its content in order to
+     * accommodate maps or images that must be rendered right against the tab bar
+     * itself. The `padding` prop can be used to add some top padding.
+     */
+])), function (p) { return !p.active ? 'none' : ''; }, function (p) { var _a; return (_a = p.padding) !== null && _a !== void 0 ? _a : 0; }, function (p) { return p.theme.font.bodyMedium; });
+/**
+ * Label and ontent for a single tab pane. The `label` can be JSX.
+ *
+ * By default, a pane adds no padding around its content in order to
+ * accommodate maps or images that must be rendered right against the tab bar
+ * itself. The `padding` prop can be used to add some top padding.
+ */
+var Pane = function (props) { return React.createElement(PaneStyled, __assign({}, props)); };
+export { Pane };
+var templateObject_1;

package/containers/Tabs/Tabs.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /** @ignore */
+    children?: React.ReactNode;
+    /**
+     * If set, the content of hidden panes is not rendered.
+     * @default false
+     */
+    nohiddenrender?: boolean;
+    /**
+     * Index of active tab by default (0-based).
+     */
+    active?: number;
+    /**
+     * Tabs use a fluid width by default. A fixed width (in pixels) can be
+     * provided.
+     */
+    tabWidth?: number;
+    /**
+     * Event triggered when active tab changes. `idx` is the index of the new active tab.
+     */
+    onChange?: (idx: number) => void;
+}
+/**
+ * Collection of tabs.
+ *
+ * ```jsx
+ * <Tabs>
+ *   <Tabs.Pane label="One">
+ *     Content for first tab.
+ *   </Tabs.Pane>
+ *   <Tabs.Pane label="Two">
+ *     Content for second tab.
+ *   </Tabs.Pane>
+ *   <Tabs.Pane label="Three">
+ *     Content for third tab.
+ *   </Tabs.Pane>
+ * </Tabs>
+ * ```
+ *
+ * #### Vertical spacing
+ * There is no padding or margin about the tab content, so that plain text
+ * will be printed very tightly against the tab bar. This is on purpose, so
+ * that tabs containing images or maps an line up right against the tab bar.
+ *
+ * ### Rendering
+ * Rendering the content of inactive tabs may slow the browser down. The
+ * `nohiddenrender` prop causes hidden tabs not to be rendered. This will
+ * break Mapbox.
+ *
+ * ### Note
+ * If you need a tab bar, but not panes, then use the `TabBar` control.
+ */
+declare const Tabs: {
+    (props: IProps): React.JSX.Element;
+    /**
+     * A single tab pane.
+     *
+     * The Pane label can contain arbitrary content.
+     * To get the content to vertically align properly, a Flex.Quick can help.
+     */
+    Pane: (props: import("./Pane").IProps) => React.JSX.Element;
+};
+export { Tabs, IProps };

package/containers/Tabs/Tabs.js

@@ -0,0 +1,144 @@
+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';
+// Other controls
+import { Pane } from './Pane';
+import { TabBar } from '../../controls/TabBar';
+var TabsBase = function (props) {
+    var _a;
+    // Currently active tab (0-based).
+    // Initialize state. Default active tab is tab #0,
+    // unless the active prop is passed.
+    var _b = React.useState((_a = props.active) !== null && _a !== void 0 ? _a : 0), index = _b[0], setIndex = _b[1];
+    // When the active prop changes, then force the current tab index to
+    // that tab.
+    React.useEffect(function () {
+        if (typeof props.active === 'number' && props.active >= 0)
+            setIndex(props.active);
+    }, [props.active]);
+    var tabClicked = function (idx) {
+        // Only interesting if active tab changes.
+        if (idx != index)
+            return;
+        setIndex(idx);
+        if (props.onChange) {
+            props.onChange(idx);
+        }
+    };
+    var getTabs = function () {
+        return React.Children.map(props.children, function (child, i) {
+            if (child == null)
+                return null;
+            return React.createElement(TabBar.Tab, {
+                active: i === index,
+                tabWidth: props.tabWidth,
+                children: child.props.label
+            });
+        });
+    };
+    //
+    // Clone all the panes, marking the active one.
+    // All panes are rendered, because they may contain controls
+    // that must be in the DOM. Inactive panes are invisible.
+    //
+    var getPanes = function () {
+        return React.Children.map(props.children, function (child, i) {
+            if (child == null)
+                return null;
+            return React.cloneElement(child, {
+                active: i === index,
+                nohiddenrender: props.nohiddenrender
+            });
+        });
+    };
+    return (React.createElement("div", { className: props.className },
+        React.createElement(TabBar, { active: index, onChange: tabClicked, tabWidth: props.tabWidth }, getTabs()),
+        React.createElement(Panes, null, getPanes())));
+};
+var Panes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  flex: 1;\n"], ["\n  height: 100%;\n  flex: 1;\n"])));
+var TabsStyled = styled(TabsBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: relative;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"
+    /**
+     * Collection of tabs.
+     *
+     * ```jsx
+     * <Tabs>
+     *   <Tabs.Pane label="One">
+     *     Content for first tab.
+     *   </Tabs.Pane>
+     *   <Tabs.Pane label="Two">
+     *     Content for second tab.
+     *   </Tabs.Pane>
+     *   <Tabs.Pane label="Three">
+     *     Content for third tab.
+     *   </Tabs.Pane>
+     * </Tabs>
+     * ```
+     *
+     * #### Vertical spacing
+     * There is no padding or margin about the tab content, so that plain text
+     * will be printed very tightly against the tab bar. This is on purpose, so
+     * that tabs containing images or maps an line up right against the tab bar.
+     *
+     * ### Rendering
+     * Rendering the content of inactive tabs may slow the browser down. The
+     * `nohiddenrender` prop causes hidden tabs not to be rendered. This will
+     * break Mapbox.
+     *
+     * ### Note
+     * If you need a tab bar, but not panes, then use the `TabBar` control.
+     */
+])));
+/**
+ * Collection of tabs.
+ *
+ * ```jsx
+ * <Tabs>
+ *   <Tabs.Pane label="One">
+ *     Content for first tab.
+ *   </Tabs.Pane>
+ *   <Tabs.Pane label="Two">
+ *     Content for second tab.
+ *   </Tabs.Pane>
+ *   <Tabs.Pane label="Three">
+ *     Content for third tab.
+ *   </Tabs.Pane>
+ * </Tabs>
+ * ```
+ *
+ * #### Vertical spacing
+ * There is no padding or margin about the tab content, so that plain text
+ * will be printed very tightly against the tab bar. This is on purpose, so
+ * that tabs containing images or maps an line up right against the tab bar.
+ *
+ * ### Rendering
+ * Rendering the content of inactive tabs may slow the browser down. The
+ * `nohiddenrender` prop causes hidden tabs not to be rendered. This will
+ * break Mapbox.
+ *
+ * ### Note
+ * If you need a tab bar, but not panes, then use the `TabBar` control.
+ */
+var Tabs = function (props) { return React.createElement(TabsStyled, __assign({}, props)); };
+/**
+ * A single tab pane.
+ *
+ * The Pane label can contain arbitrary content.
+ * To get the content to vertically align properly, a Flex.Quick can help.
+ */
+Tabs.Pane = Pane;
+export { Tabs };
+var templateObject_1, templateObject_2;

package/controls/Chip/Chip.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+interface IProps {
+    /** @ignore */
+    className?: string;
+    /**
+     * Content of the `Chip`. Can be a string, or JSX.
+     */
+    children?: React.ReactNode;
+    /**
+     * A disabled `Chip` cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Triggered when the X button on the `Chip` is clicked, or when Delete is
+     * pressed while the `Chip` has focus.
+     */
+    onClick?: () => void;
+}
+/**
+ * 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.
+ */
+declare const Chip: ({ disabled, ...props }: IProps) => React.JSX.Element;
+export { Chip, IProps };