@koine/react 2.0.0-beta.2 → 2.0.0-beta.5

package/Sidebar/Sidebar.mjs

@@ -1,23 +1,54 @@
-import { __makeTemplateObject } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import styled from "styled-components";
-import { GrFolderOpen as IconOpen } from "react-icons/gr";
 import { CgCloseR as IconClose } from "react-icons/cg";
-import { max, min } from "../styles/media";
+import { GrFolderOpen as IconOpen } from "react-icons/gr";
+import styled from "styled-components";
 import { IconButtonFab } from "../Buttons";
 import { useHeader } from "../Header";
-var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
-    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
-});
-var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
-export var Sidebar = function (_a) {
-    var children = _a.children;
-    var _b = useState(false), open = _b[0], setOpen = _b[1];
-    var _c = useHeader(), headerHeight = _c[2];
-    var handleClickToggle = useCallback(function () {
-        setOpen(function (prevOpen) { return !prevOpen; });
+import { max, min } from "../styles/media";
+const SidebarWrapper = styled.div`
+  ${(p)=>`${max.md} {
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+      position: fixed;
+      right: 0;
+      left: var(--gutter-half);
+      top: ${p.$top || 0}px;
+      bottom: 0;
+      padding: var(--gutter-half);
+      transform: ${p.$open ? `translateX(0)` : `translateX(100%)`};
+      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;
+      background: white;
+      box-shadow: ${p.$open ? `0 0 0 100vh rgba(0, 0, 0, .3)` : `0 0 100vh rgba(0, 0, 0, 0)`};
+      will-change: transform, box-shadow;
+      pointer-events: ${p.$open ? "all" : "none"}
+    }`}
+`;
+const SidebarToggle = styled.span`
+  z-index: 21;
+  position: fixed;
+  right: var(--gutter-half);
+  bottom: var(--gutter-half);
+  ${min.md} {
+    display: none;
+  }
+
+  path {
+    stroke: currentColor;
+  }
+`;
+export const Sidebar = ({ children })=>{
+    const [open, setOpen] = useState(false);
+    const [, , headerHeight] = useHeader();
+    const handleClickToggle = useCallback(()=>{
+        setOpen((prevOpen)=>!prevOpen);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(SidebarToggle, {
+        onClick: handleClickToggle
+    }, /*#__PURE__*/ React.createElement(IconButtonFab, {
+        $variant: "contained"
+    }, open ? /*#__PURE__*/ React.createElement(IconClose, null) : /*#__PURE__*/ React.createElement(IconOpen, null))), /*#__PURE__*/ React.createElement(SidebarWrapper, {
+        $open: open,
+        $top: headerHeight
+    }, children));
 };
-var templateObject_1, templateObject_2;

package/Sidebar/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Sidebar"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Sidebar"), exports);

package/Spacing/Spacing.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
+import { SpacingDevices, SpacingDirectionAxis, SpacingFactor, SpacingProperty, SpacingSize } from "../styles/spacing";
 export type SpacingPropsStyled = {
     $top?: SpacingFnArgs;
     $bottom?: SpacingFnArgs;

package/Spacing/Spacing.js

@@ -1,34 +1,35 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacing = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-var spacing_1 = require("../styles/spacing");
-var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__spreadArray([p.theme], p.$bottom, false)); });
-var extractDirectionArgs = function (raw) {
-    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = (0, isUndefined_1.default)(factor) ? undefined : parseFloat(factor);
-    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
-    return [size, factorArg, property, devicesArg];
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Spacing", {
+    enumerable: true,
+    get: function() {
+        return Spacing;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _isUndefined = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isUndefined"));
+const _spacing = require("../styles/spacing");
+const Root = _styledcomponents.default.div`
+  ${(p)=>p.$top && _spacing.spacingTop.call(p.theme, ...p.$top)}
+  ${(p)=>p.$bottom && _spacing.spacingBottom.call(p.theme, ...p.$bottom)}
+`;
+const extractDirectionArgs = (raw)=>{
+    const [size, factor, property, devices] = raw.split(":");
+    const factorArg = (0, _isUndefined.default)(factor) ? undefined : parseFloat(factor);
+    const devicesArg = devices?.split(",");
+    return [
+        size,
+        factorArg,
+        property,
+        devicesArg
+    ];
 };
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
-var Spacing = function (_a) {
-    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
-    var $top;
-    var $bottom;
+const Spacing = ({ top, bottom, vertical, ...props })=>{
+    let $top;
+    let $bottom;
     if (top) {
         $top = extractDirectionArgs(top);
     }
@@ -41,9 +42,11 @@ var Spacing = function (_a) {
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
     }
-    return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
+    return /*#__PURE__*/ React.createElement(Root, {
+        $top: $top,
+        $bottom: $bottom,
+        ...props
+    });
 };
-exports.Spacing = Spacing;
-var templateObject_1;

package/Spacing/Spacing.mjs

@@ -1,14 +1,20 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import isUndefined from "@koine/utils/isUndefined";
-import { spacingTop, spacingBottom, } from "../styles/spacing";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
-var extractDirectionArgs = function (raw) {
-    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
-    return [size, factorArg, property, devicesArg];
+import { spacingBottom, spacingTop } from "../styles/spacing";
+const Root = styled.div`
+  ${(p)=>p.$top && spacingTop.call(p.theme, ...p.$top)}
+  ${(p)=>p.$bottom && spacingBottom.call(p.theme, ...p.$bottom)}
+`;
+const extractDirectionArgs = (raw)=>{
+    const [size, factor, property, devices] = raw.split(":");
+    const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    const devicesArg = devices?.split(",");
+    return [
+        size,
+        factorArg,
+        property,
+        devicesArg
+    ];
 };
 /**
  * Usage:
@@ -21,11 +27,9 @@ var extractDirectionArgs = function (raw) {
  * <Spacing top="sm:1.5:padding:mobile" />
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
- */
-export var Spacing = function (_a) {
-    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
-    var $top;
-    var $bottom;
+ */ export const Spacing = ({ top, bottom, vertical, ...props })=>{
+    let $top;
+    let $bottom;
     if (top) {
         $top = extractDirectionArgs(top);
     }
@@ -38,8 +42,11 @@ export var Spacing = function (_a) {
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return _jsx(_Fragment, { children: props.children });
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
     }
-    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+    return /*#__PURE__*/ React.createElement(Root, {
+        $top: $top,
+        $bottom: $bottom,
+        ...props
+    });
 };
-var templateObject_1;

package/Spacing/index.js

@@ -1,4 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./Spacing"), exports);
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Spacing"), exports);