etudes 0.40.0 → 0.41.0

package/lib/BurgerButton.d.ts

@@ -1,37 +1,16 @@
-import { CSSProperties, PureComponent } from 'react';
-export interface Props {
-    className?: string;
-    style: CSSProperties;
-    isActiveByDefault: boolean;
-    isDoubleJointed: boolean;
-    isFunky: boolean;
-    height: number;
-    thickness: number;
-    width: number;
-    tintColor: string;
-    transitionDuration: number;
+import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
+export declare type Props = HTMLAttributes<HTMLButtonElement> & {
+    isActive?: boolean;
+    isDoubleJointed?: boolean;
+    isLastBarHalfWidth?: boolean;
+    height?: number;
+    thickness?: number;
+    width?: number;
+    tintColor?: string;
+    transitionDuration?: number;
     onActivate?: () => void;
     onDeactivate?: () => void;
-}
-export interface State {
-    isActive: boolean;
-}
-declare class BurgerButton extends PureComponent<Props, State> {
-    static defaultProps: {
-        height: number;
-        isActiveByDefault: boolean;
-        isDoubleJointed: boolean;
-        isFunky: boolean;
-        style: {};
-        thickness: number;
-        tintColor: string;
-        transitionDuration: number;
-        width: number;
-    };
-    constructor(props: Props);
-    toggle(): void;
-    activate(): void;
-    deactivate(): void;
-    render(): JSX.Element;
-}
-export default BurgerButton;
+    cssBar?: CSSProp<any>;
+};
+export default function BurgerButton({ isActive: externalIsActive, isDoubleJointed, isLastBarHalfWidth, height, thickness, width, tintColor, transitionDuration, onActivate, onDeactivate, cssBar, ...props }: Props): JSX.Element;

package/lib/BurgerButton.js

@@ -1,23 +1,19 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -37,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
+};
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) return o;
@@ -53,79 +60,39 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var BurgerButton = /** @class */ (function (_super) {
-    __extends(BurgerButton, _super);
-    function BurgerButton(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
-            isActive: _this.props.isActiveByDefault,
-        };
-        return _this;
-    }
-    BurgerButton.prototype.toggle = function () {
-        if (this.state.isActive) {
-            this.deactivate();
+var Group_1 = __importDefault(require("./Group"));
+function BurgerButton(_a) {
+    var _b = _a.isActive, externalIsActive = _b === void 0 ? false : _b, _c = _a.isDoubleJointed, isDoubleJointed = _c === void 0 ? false : _c, _d = _a.isLastBarHalfWidth, isLastBarHalfWidth = _d === void 0 ? false : _d, _e = _a.height, height = _e === void 0 ? 20 : _e, _f = _a.thickness, thickness = _f === void 0 ? 2 : _f, _g = _a.width, width = _g === void 0 ? 20 : _g, _h = _a.tintColor, tintColor = _h === void 0 ? '#000' : _h, _j = _a.transitionDuration, transitionDuration = _j === void 0 ? 200 : _j, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate, cssBar = _a.cssBar, props = __rest(_a, ["isActive", "isDoubleJointed", "isLastBarHalfWidth", "height", "thickness", "width", "tintColor", "transitionDuration", "onActivate", "onDeactivate", "cssBar"]);
+    var _k = __read((0, react_1.useState)(externalIsActive), 2), isActive = _k[0], setIsActive = _k[1];
+    (0, react_1.useEffect)(function () {
+        if (isActive !== externalIsActive) {
+            setIsActive(externalIsActive);
+        }
+    }, [externalIsActive]);
+    (0, react_1.useEffect)(function () {
+        if (isActive) {
+            onActivate === null || onActivate === void 0 ? void 0 : onActivate();
         }
         else {
-            this.activate();
+            onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
         }
-    };
-    BurgerButton.prototype.activate = function () {
-        if (this.state.isActive)
-            return;
-        this.setState({ isActive: true });
-        if (this.props.onActivate)
-            this.props.onActivate();
-    };
-    BurgerButton.prototype.deactivate = function () {
-        if (!this.state.isActive)
-            return;
-        this.setState({ isActive: false });
-        if (this.props.onDeactivate)
-            this.props.onDeactivate();
-    };
-    BurgerButton.prototype.render = function () {
-        var _this = this;
-        var w = this.props.width * 0.5;
-        var h = this.props.height * 0.5;
-        var t = this.props.thickness * 0.5;
-        var d = 45;
-        var r = d * Math.PI / 180;
-        var n = this.props.isDoubleJointed ? 2 : 1;
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, height: this.props.height, isActive: this.state.isActive, isDoubleJointed: this.props.isDoubleJointed, isFunky: this.props.isFunky, onClick: function () { return _this.toggle(); }, style: this.props.style, thickness: this.props.thickness, tintColor: this.props.tintColor, transitionDuration: this.props.transitionDuration, width: this.props.width, w: w, h: h, t: t, d: d, r: r }, this.props.isDoubleJointed && (react_1.default.createElement(react_1.Fragment, null, __spreadArray([], __read(new Array(n)), false).map(function (v, i) { return (react_1.default.createElement("div", { key: "joint-".concat(i) },
-            react_1.default.createElement("span", null),
-            react_1.default.createElement("span", null),
-            react_1.default.createElement("span", null))); })))));
-    };
-    BurgerButton.defaultProps = {
-        height: 20,
-        isActiveByDefault: false,
-        isDoubleJointed: true,
-        isFunky: false,
-        style: {},
-        thickness: 2,
-        tintColor: '#000',
-        transitionDuration: 200,
-        width: 20,
-    };
-    return BurgerButton;
-}(react_1.PureComponent));
+    }, [isActive]);
+    return (react_1.default.createElement(StyledRoot, __assign({ width: width, height: height, thickness: thickness, onClick: function () { return setIsActive(!isActive); } }, props),
+        react_1.default.createElement(Group_1.default, { count: isDoubleJointed ? 2 : 1 },
+            react_1.default.createElement(StyledJoint, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), height: height, isLastBarHalfWidth: isLastBarHalfWidth, thickness: thickness, width: width },
+                react_1.default.createElement(Group_1.default, { count: 3 },
+                    react_1.default.createElement(StyledBar, { className: (0, classnames_1.default)({ active: isActive, half: isDoubleJointed }), style: { height: "".concat(thickness, "px") }, css: cssBar }))))));
+}
 exports.default = BurgerButton;
-var StyledRoot = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"], ["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ", "px;\n      transform-origin: center;\n      transform: ", ";\n    }\n\n    span:nth-child(3) {\n      top: ", ";\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ", ";\n      width: ", ";\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ", "px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ", ";\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ", "px;\n        transform: ", ";\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ", ";\n        width: ", ";\n        left: 0;\n        top: ", "px;\n      }\n    }\n  }\n\n  span {\n    background: ", ";\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ", "px;\n    transition-duration: ", "ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ", "px;\n      width: ", "px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ", "px;\n      width: ", "px;\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.h - props.t, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? '50%' : '100%'); }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.h - props.t, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? "translate3d(".concat(0, "px, ").concat(props.h - props.t, "px, 0) rotate(").concat(-props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.h - props.t; }, function (props) { return props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'; }, function (props) { return props.isActive ? "translate3d(0, ".concat(props.t - props.h, "px, 0) rotate(").concat(props.d, "deg)") : 'translate3d(0, 0, 0) rotate(0deg)'; }, function (props) { return props.isActive ? '100%' : (props.isFunky ? 0 : '100%'); }, function (props) { return props.height - props.thickness; }, function (props) { return props.tintColor; }, function (props) { return props.thickness; }, function (props) { return props.transitionDuration; }, function (props) { return props.thickness; }, function (props) { return props.w; }, function (props) { return props.thickness; }, function (props) { return props.width; });
-var templateObject_1;
+var StyledBar = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ", "\n"], ["\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ", "\n"])), function (props) { return props.css; });
+var StyledJoint = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"], ["\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ", ":nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ", ":nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ", ":nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      ", ":nth-child(1) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(2) {\n        transform: ", ";\n      }\n\n      ", ":nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ", ":nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ", ":nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ", "px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ", ";\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ", ";\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ", ";\n        width: 100%;\n      }\n    }\n  }\n"])), StyledBar, StyledBar, function (props) { return props.height * .5 - props.thickness * .5; }, StyledBar, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? '50%' : '100%'; }, StyledBar, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(45deg)"); }, StyledBar, function (props) { return 'translate3d(0, 0, 0) scale(0)'; }, StyledBar, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(-45deg)"); }, StyledBar, StyledBar, StyledBar, function (props) { return props.height * .5 - props.thickness * .5; }, function (props) { return props.height - props.thickness; }, function (props) { return props.isLastBarHalfWidth ? 0 : '100%'; }, function (props) { return "translate3d(0, ".concat(props.height * .5 - props.thickness * .5, "px, 0) rotate(-45deg)"); }, function (props) { return "translate3d(0, ".concat(props.thickness * .5 - props.height * .5, "px, 0) rotate(45deg)"); });
+var StyledRoot = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n  }\n"], ["\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ", "px;\n  margin: 0;\n  min-height: ", "px;\n  min-width: ", "px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ", "px;\n\n  html:not(.touch) &:hover {\n    ", ":not(.half) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n\n    ", ".half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ", "px;\n      }\n    }\n  }\n"])), function (props) { return props.height; }, function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.width; }, StyledJoint, function (props) { return props.width; }, StyledJoint, function (props) { return props.width * .5; });
+var templateObject_1, templateObject_2, templateObject_3;
 //# sourceMappingURL=BurgerButton.js.map

package/lib/BurgerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, Fragment, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  isActiveByDefault: boolean\n  isDoubleJointed: boolean\n  isFunky: boolean\n  height: number\n  thickness: number\n  width: number\n  tintColor: string\n  transitionDuration: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n}\n\nexport interface State {\n  isActive: boolean\n}\n\nclass BurgerButton extends PureComponent<Props, State> {\n  static defaultProps = {\n    height: 20,\n    isActiveByDefault: false,\n    isDoubleJointed: true,\n    isFunky: false,\n    style: {},\n    thickness: 2,\n    tintColor: '#000',\n    transitionDuration: 200,\n    width: 20,\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      isActive: this.props.isActiveByDefault,\n    }\n  }\n\n  toggle() {\n    if (this.state.isActive) {\n      this.deactivate()\n    }\n    else {\n      this.activate()\n    }\n  }\n\n  activate() {\n    if (this.state.isActive) return\n    this.setState({ isActive: true })\n    if (this.props.onActivate) this.props.onActivate()\n  }\n\n  deactivate() {\n    if (!this.state.isActive) return\n    this.setState({ isActive: false })\n    if (this.props.onDeactivate) this.props.onDeactivate()\n  }\n\n  render() {\n    const w = this.props.width * 0.5\n    const h = this.props.height * 0.5\n    const t = this.props.thickness * 0.5\n    const d = 45\n    const r = d * Math.PI / 180\n    const n = this.props.isDoubleJointed ? 2 : 1\n\n    return (\n      <StyledRoot\n        className={this.props.className}\n        height={this.props.height}\n        isActive={this.state.isActive}\n        isDoubleJointed={this.props.isDoubleJointed}\n        isFunky={this.props.isFunky}\n        onClick={() => this.toggle()}\n        style={this.props.style}\n        thickness={this.props.thickness}\n        tintColor={this.props.tintColor}\n        transitionDuration={this.props.transitionDuration}\n        width={this.props.width}\n        w={w}\n        h={h}\n        t={t}\n        d={d}\n        r={r}\n      >\n        {this.props.isDoubleJointed && (\n          <Fragment>\n            {[...new Array(n)].map((v, i) => (\n              <div key={`joint-${i}`}>\n                <span/>\n                <span/>\n                <span/>\n              </div>\n            ))}\n          </Fragment>\n        )}\n      </StyledRoot>\n    )\n  }\n}\n\nexport default BurgerButton\n\nconst StyledRoot = styled.button<{\n  isActive: boolean\n  width: number\n  height: number\n  thickness: number\n  tintColor: string\n  isDoubleJointed: boolean\n  isFunky: boolean\n  transitionDuration: number\n  w: number\n  h: number\n  t: number\n  d: number\n  r: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  > div:only-of-type {\n    width: 100%;\n    height: 100%;\n\n    span:nth-child(1) {\n      left: 0;\n      position: absolute;\n      top: 0;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      position: absolute;\n      top: ${props => props.h - props.t}px;\n      transform-origin: center;\n      transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n    }\n\n    span:nth-child(3) {\n      top: ${props => props.height - props.thickness};\n      left: 0;\n      position: absolute;\n      transform-origin: center;\n      transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      width: ${props => props.isActive ? '100%' : (props.isFunky ? '50%' : '100%')};\n    }\n  }\n\n  > div:not(:only-of-type) {\n    height: 100%;\n    width: 50%;\n\n    &:nth-of-type(1) {\n      left: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.h - props.t}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: right center;\n      }\n\n      span:nth-child(3) {\n        top: ${props => props.height - props.thickness}px;\n        left: 0;\n        width: 100%;\n        transform-origin: right center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n    }\n\n    &:nth-of-type(2) {\n      right: 0;\n      top: 0;\n      position: absolute;\n\n      span:nth-child(1) {\n        top: 0;\n        left: 0;\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(${0}px, ${props.h - props.t}px, 0) rotate(${-props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n      }\n\n      span:nth-child(2) {\n        left: 0;\n        top: ${props => props.h - props.t}px;\n        transform: ${props => props.isActive ? 'translate3d(0, 0, 0) scale(0)' : 'translate3d(0, 0, 0) scale(1)'};\n        transform-origin: left center;\n      }\n\n      span:nth-child(3) {\n        transform-origin: left center;\n        transform: ${props => props.isActive ? `translate3d(0, ${props.t - props.h}px, 0) rotate(${props.d}deg)` : 'translate3d(0, 0, 0) rotate(0deg)'};\n        width: ${props => props.isActive ? '100%' : (props.isFunky ? 0 : '100%')};\n        left: 0;\n        top: ${props => props.height - props.thickness}px;\n      }\n    }\n  }\n\n  span {\n    background: ${props => props.tintColor};\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n    height: ${props => props.thickness}px;\n    transition-duration: ${props => props.transitionDuration}ms;\n    transition-property: width, height, transform, opacity, background;\n    transition-timing-function: ease-out;\n  }\n\n  &:hover {\n    div:not(:only-of-type):nth-of-type(2)::after {\n      height: ${props => props.thickness}px;\n      width: ${props => props.w}px;\n    }\n\n    div:only-of-type span:nth-child(3) {\n      height: ${props => props.thickness}px;\n      width: ${props => props.width}px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"BurgerButton.js","sourceRoot":"/","sources":["BurgerButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { HTMLAttributes, useEffect, useState } from 'react'\nimport styled, { CSSProp } from 'styled-components'\nimport Group from './Group'\n\nexport type Props = HTMLAttributes<HTMLButtonElement> & {\n  isActive?: boolean\n  isDoubleJointed?: boolean\n  isLastBarHalfWidth?: boolean\n  height?: number\n  thickness?: number\n  width?: number\n  tintColor?: string\n  transitionDuration?: number\n  onActivate?: () => void\n  onDeactivate?: () => void\n  cssBar?: CSSProp<any>\n}\n\nexport default function BurgerButton({\n  isActive: externalIsActive = false,\n  isDoubleJointed = false,\n  isLastBarHalfWidth = false,\n  height = 20,\n  thickness = 2,\n  width = 20,\n  tintColor = '#000',\n  transitionDuration = 200,\n  onActivate,\n  onDeactivate,\n  cssBar,\n  ...props\n}: Props) {\n  const [isActive, setIsActive] = useState(externalIsActive)\n\n  useEffect(() => {\n    if (isActive !== externalIsActive) {\n      setIsActive(externalIsActive)\n    }\n  }, [externalIsActive])\n\n  useEffect(() => {\n    if (isActive) {\n      onActivate?.()\n    }\n    else {\n      onDeactivate?.()\n    }\n  }, [isActive])\n\n  return (\n    <StyledRoot width={width} height={height} thickness={thickness} onClick={() => setIsActive(!isActive)} {...props}>\n      <Group count={isDoubleJointed ? 2 : 1}>\n        <StyledJoint\n          className={classNames({ active: isActive, half: isDoubleJointed })}\n          height={height}\n          isLastBarHalfWidth={isLastBarHalfWidth}\n          thickness={thickness}\n          width={width}\n        >\n          <Group count={3}>\n            <StyledBar className={classNames({ active: isActive, half: isDoubleJointed })} style={{ height: `${thickness}px` }} css={cssBar}/>\n          </Group>\n        </StyledJoint>\n      </Group>\n    </StyledRoot>\n  )\n}\n\nconst StyledBar = styled.span`\n  background: #fff;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  transition-duration: 100ms;\n  transition-property: width, height, transform, opacity, background;\n  transition-timing-function: ease-out;\n  width: 100%;\n\n  ${props => props.css}\n`\n\nconst StyledJoint = styled.div<{\n  height: number\n  isLastBarHalfWidth: boolean\n  thickness: number\n  width: number\n}>`\n  height: 100%;\n  position: absolute;\n  width: 100%;\n\n  &.half {\n    width: 50%;\n  }\n\n  &:nth-of-type(1) {\n    left: 0;\n    top: 0;\n\n    ${StyledBar}:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    ${StyledBar}:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    ${StyledBar}:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? '50%' : '100%'};\n    }\n\n    &.active {\n      ${StyledBar}:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(45deg)`};\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform: ${props => 'translate3d(0, 0, 0) scale(0)'};\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(-45deg)`};\n        width: 100%;\n      }\n    }\n\n    &.half {\n      ${StyledBar}:nth-child(1) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(2) {\n        transform-origin: right center;\n      }\n\n      ${StyledBar}:nth-child(3) {\n        transform-origin: right center;\n        width: 100%;\n      }\n    }\n  }\n\n  &:nth-of-type(2) {\n    right: 0;\n    top: 0;\n\n    span:nth-child(1) {\n      left: 0;\n      top: 0;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n    }\n\n    span:nth-child(2) {\n      left: 0;\n      top: ${props => props.height*.5 - props.thickness*.5}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) scale(1);\n    }\n\n    span:nth-child(3) {\n      left: 0;\n      top: ${props => props.height - props.thickness}px;\n      transform-origin: left center;\n      transform: translate3d(0, 0, 0) rotate(0deg);\n      width: ${props => props.isLastBarHalfWidth ? 0 : '100%'};\n    }\n\n    &.active {\n      span:nth-child(1) {\n        transform: ${props => `translate3d(0, ${props.height*.5 - props.thickness*.5}px, 0) rotate(-45deg)`};\n      }\n\n      span:nth-child(2) {\n        transform: translate3d(0, 0, 0) scale(0);\n      }\n\n      span:nth-child(3) {\n        transform: ${props => `translate3d(0, ${props.thickness*.5 - props.height*.5}px, 0) rotate(45deg)`};\n        width: 100%;\n      }\n    }\n  }\n`\n\nconst StyledRoot = styled.button<{\n  height: number\n  thickness: number\n  width: number\n}>`\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  display: block;\n  height: ${props => props.height}px;\n  margin: 0;\n  min-height: ${props => props.height}px;\n  min-width: ${props => props.width}px;\n  outline: none;\n  padding: 0;\n  pointer-events: auto;\n  position: relative;\n  width: ${props => props.width}px;\n\n  html:not(.touch) &:hover {\n    ${StyledJoint}:not(.half) {\n      span:nth-child(3) {\n        width: ${props => props.width}px;\n      }\n    }\n\n    ${StyledJoint}.half:nth-of-type(2) {\n      span:nth-child(3) {\n        width: ${props => props.width*.5}px;\n      }\n    }\n  }\n`\n"]}

package/lib/Dial.d.ts

@@ -20,24 +20,24 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     radius?: number;
     /**
      * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.
-     * Note that this overwrites the `stroke-width` set inside `knobCSS`.
+     * Note that this overwrites the `stroke-width` set inside `cssKnob`.
      */
     knobThickness?: number;
     /**
      * CSS of the knob, which is a `<path>` element.
      */
-    knobCSS?: CSSProp<any>;
+    cssKnob?: CSSProp<any>;
     /**
      * The thickness of the circular track, which is equivalent to the `stroke-width` of the
-     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.
+     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.
      */
     trackThickness?: number;
     /**
      * CSS of the track, which is a `<circle>` element.
      */
-    trackCSS?: CSSProp<any>;
+    cssTrack?: CSSProp<any>;
 };
 /**
  * A circular dial with a knob and a track.
  */
-export default function Dial({ angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, style, ...props }: Props): JSX.Element;
+export default function Dial({ angle, radius, knobLength, knobThickness, cssKnob, trackThickness, cssTrack, style, ...props }: Props): JSX.Element;

package/lib/Dial.js

@@ -52,16 +52,16 @@ function arcPath(x, y, radius, startAngle, endAngle) {
  * A circular dial with a knob and a track.
  */
 function Dial(_a) {
-    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "knobCSS", "trackThickness", "trackCSS", "style"]);
+    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, cssKnob = _a.cssKnob, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, cssTrack = _a.cssTrack, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "cssKnob", "trackThickness", "cssTrack", "style"]);
     var diameter = radius * 2;
     var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
     return (react_1.default.createElement(StyledRoot, __assign({ style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) }, props),
         react_1.default.createElement(StyledTrack, null,
             react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
-                react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: trackCSS, strokeWidth: trackThickness }))),
+                react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: cssTrack, strokeWidth: trackThickness }))),
         react_1.default.createElement(StyledKnob, { style: { transform: "rotate(".concat((angle + 360) % 360, "deg)") } },
             react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg' },
-                react_1.default.createElement(StyledKnobPath, { css: knobCSS, strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
+                react_1.default.createElement(StyledKnobPath, { css: cssKnob, strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
 }
 exports.default = Dial;
 var StyledTrack = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"], ["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"])));

package/lib/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `cssKnob`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  cssKnob?: CSSProp<any>\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  cssTrack?: CSSProp<any>\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  cssKnob,\n  trackThickness = 2,\n  cssTrack,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={cssTrack}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={cssKnob} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/FlatSVG.d.ts

@@ -28,7 +28,7 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Extended CSS to be provided to the SVG root node.
      */
-    svgCSS?: CSSProp<any>;
+    cssSVG?: CSSProp<any>;
     /**
      * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is
      * enabled. By default, only `viewBox` is whitelisted.
@@ -39,4 +39,4 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
  * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to
  * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
  */
-export default function FlatSVG({ markup, stripClasses, stripExtraneousAttributes, stripIds, stripStyles, svgCSS, whitelistedAttributes, ...props }: Props): JSX.Element;
+export default function FlatSVG({ markup, stripClasses, stripExtraneousAttributes, stripIds, stripStyles, cssSVG, whitelistedAttributes, ...props }: Props): JSX.Element;

package/lib/FlatSVG.js

@@ -93,7 +93,7 @@ function removeAttributes(element, attributes, recursive, whitelist) {
  * sanitize the markup (i.e. stripping useless attributes) according to the props specified.
  */
 function FlatSVG(_a) {
-    var markup = _a.markup, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, svgCSS = _a.svgCSS, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["markup", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "svgCSS", "whitelistedAttributes"]);
+    var markup = _a.markup, _b = _a.stripClasses, stripClasses = _b === void 0 ? true : _b, _c = _a.stripExtraneousAttributes, stripExtraneousAttributes = _c === void 0 ? true : _c, _d = _a.stripIds, stripIds = _d === void 0 ? true : _d, _e = _a.stripStyles, stripStyles = _e === void 0 ? true : _e, cssSVG = _a.cssSVG, _f = _a.whitelistedAttributes, whitelistedAttributes = _f === void 0 ? ['viewBox'] : _f, props = __rest(_a, ["markup", "stripClasses", "stripExtraneousAttributes", "stripIds", "stripStyles", "cssSVG", "whitelistedAttributes"]);
     function sanitizedMarkup() {
         var mockContainer = document.createElement('div');
         mockContainer.innerHTML = markup;
@@ -113,9 +113,9 @@ function FlatSVG(_a) {
             removeStyles(svgElement);
         return svgElement.outerHTML;
     }
-    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, svgCSS: svgCSS }, props)));
+    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: sanitizedMarkup() }, cssSVG: cssSVG }, props)));
 }
 exports.default = FlatSVG;
-var StyledRoot = styled_components_1.default.figure(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"])), function (props) { return props.svgCSS; });
+var StyledRoot = styled_components_1.default.figure(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ", "\n  }\n"])), function (props) { return props.cssSVG; });
 var templateObject_1;
 //# sourceMappingURL=FlatSVG.js.map

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Extended CSS to be provided to the SVG root node.\n   */\n  svgCSS?: CSSProp<any>\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default function FlatSVG({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  svgCSS,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}: Props) {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      svgCSS={svgCSS}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{ svgCSS: Props['svgCSS'] }>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ${props => props.svgCSS}\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The SVG string markup, i.e. \"<svg>...</svg>\".\n   */\n  markup: string\n\n  /**\n   * Specifies whether the 'class' should be removed in the SVG root node and all of its child\n   * nodes.\n   */\n  stripClasses?: boolean\n\n  /**\n   * Specifies whether extraneous attributes should be removed from the SVG root node. The\n   * `whitelistedAttributes` prop defines what attributes should be kept.\n   */\n  stripExtraneousAttributes?: boolean\n\n  /**\n   * Specifies whether the 'id' attribute should be removed in the SVG root node and all of its\n   * child nodes.\n   */\n  stripIds?: boolean\n\n  /**\n   * Specifies whether the 'style' atribute and any <style> nodes should be removed in the SVG root\n   * node and all of its child nodes.\n   */\n  stripStyles?: boolean\n\n  /**\n   * Extended CSS to be provided to the SVG root node.\n   */\n  cssSVG?: CSSProp<any>\n\n  /**\n   * Specifies attribute names to exclude from being stripped if `stripExtraneousAttributes` is\n   * enabled. By default, only `viewBox` is whitelisted.\n   */\n  whitelistedAttributes?: string[]\n}\n\nfunction removeStyles(element: Element) {\n  element.removeAttribute('style')\n\n  const inlineStyles = element.getElementsByTagName('style')\n  const numInlineStyles = inlineStyles.length\n\n  for (let i = 0; i < numInlineStyles; i++) {\n    const inlineStyle = inlineStyles[i]\n    inlineStyle.remove()\n  }\n\n  const numChildren = element.children.length\n\n  for (let i = 0; i < numChildren; i++) {\n    removeStyles(element.children[i])\n  }\n}\n\nfunction removeAttributes(element: Element, attributes: string[] | undefined = undefined, recursive = false, whitelist: string[] = []) {\n  const attrs = attributes ?? element.getAttributeNames()\n  const numAttrs = attrs.length\n\n  for (let i = 0; i < numAttrs; i++) {\n    const attr = attrs[i]\n    const keep = whitelist.indexOf(attr) > -1\n    if (!keep) element.removeAttribute(attr)\n  }\n\n  if (recursive) {\n    const numChildren = element.children.length\n\n    for (let i = 0; i < numChildren; i++) {\n      removeAttributes(element.children[i], attributes, recursive, whitelist)\n    }\n  }\n}\n\n/**\n * A component whose root element wraps an SVG markup. When wrapping the SVG, it will attempt to\n * sanitize the markup (i.e. stripping useless attributes) according to the props specified.\n */\nexport default function FlatSVG({\n  markup,\n  stripClasses = true,\n  stripExtraneousAttributes = true,\n  stripIds = true,\n  stripStyles = true,\n  cssSVG,\n  whitelistedAttributes = ['viewBox'],\n  ...props\n}: Props) {\n  function sanitizedMarkup(): string {\n    const mockContainer = document.createElement('div')\n    mockContainer.innerHTML = markup\n\n    const elements = mockContainer.getElementsByTagName('svg')\n    if (elements.length > 1) throw new Error('More than one SVG element found in provided markup')\n\n    const svgElement = elements[0]\n    if (!svgElement) throw new Error('No SVG in provided markup')\n\n    if (stripExtraneousAttributes) removeAttributes(svgElement, undefined, false, [...whitelistedAttributes, 'style', 'class', 'id'])\n    if (stripIds) removeAttributes(svgElement, ['id'], true)\n    if (stripClasses) removeAttributes(svgElement, ['class'], true)\n    if (stripStyles) removeStyles(svgElement)\n\n    return svgElement.outerHTML\n  }\n\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: sanitizedMarkup() }}\n      cssSVG={cssSVG}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{ cssSVG: Props['cssSVG'] }>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: auto;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: auto;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n    }\n\n    ${props => props.cssSVG}\n  }\n`\n"]}

package/lib/Group.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    children: JSX.Element | ((index: number) => JSX.Element);
+    count?: number;
+};
+export default function Group({ count, children, }: Props): JSX.Element;
+export {};

package/lib/Group.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+function Group(_a) {
+    var _b = _a.count, count = _b === void 0 ? 1 : _b, children = _a.children;
+    return (react_1.default.createElement(react_1.default.Fragment, null, __spreadArray([], __read(Array(count)), false).map(function (_, i) { return (react_1.default.createElement(react_1.Fragment, { key: "element-".concat(i) }, typeof children === 'function' ? children(i) : children)); })));
+}
+exports.default = Group;
+//# sourceMappingURL=Group.js.map

package/lib/Group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sourceRoot":"/","sources":["Group.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AAOvC,SAAwB,KAAK,CAAC,EAGtB;QAFN,aAAS,EAAT,KAAK,mBAAG,CAAC,KAAA,EACT,QAAQ,cAAA;IAER,OAAO,CACL,8DACG,yBAAI,KAAK,CAAC,KAAK,CAAC,UAAE,GAAG,CAAC,UAAC,CAAC,EAAE,CAAC,IAAK,OAAA,CAC/B,8BAAC,gBAAQ,IAAC,GAAG,EAAE,kBAAW,CAAC,CAAE,IAC1B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAC/C,CACZ,EAJgC,CAIhC,CAAC,CACD,CACJ,CAAA;AACH,CAAC;AAbD,wBAaC","sourcesContent":["import React, { Fragment } from 'react'\n\ntype Props = {\n  children: JSX.Element | ((index: number) => JSX.Element)\n  count?: number\n}\n\nexport default function Group({\n  count = 1,\n  children,\n}: Props) {\n  return (\n    <>\n      {[...Array(count)].map((_, i) => (\n        <Fragment key={`element-${i}`}>\n          {typeof children === 'function' ? children(i) : children}\n        </Fragment>\n      ))}\n    </>\n  )\n}\n"]}

package/lib/Panorama.js

@@ -70,7 +70,6 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var useDragEffect_1 = __importDefault(require("./hooks/useDragEffect"));
 var useLoadImageEffect_1 = __importDefault(require("./hooks/useLoadImageEffect"));
 var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
-var debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:panorama') : function () { };
 function getFilledImageSize(originalSize, sizeToFill) {
     var originalWidth = originalSize.width, originalHeight = originalSize.height;
     var filledHeignt = sizeToFill.height;
@@ -123,7 +122,6 @@ function Panorama(_a) {
             return;
         var newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor);
         if (newDisplacement !== displacement) {
-            // debug('Updating drag effect value from angle prop...', 'OK', `old=${displacement} new=${newDisplacement}`)
             setDisplacement(newDisplacement);
         }
         if (externalAngle !== angle) {

package/lib/Panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nconst debug = process.env.NODE_ENV === 'development' ? require('debug')('etudes:panorama') : () => {}\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      // debug('Updating drag effect value from angle prop...', 'OK', `old=${displacement} new=${newDisplacement}`)\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}
+{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  function transform(currentDisplacement: number, dx: number, dy: number): number {\n    const newDisplacement = currentDisplacement - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}