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

package/Forms/styles.js

@@ -1,32 +1,93 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputFocus = exports.inputBase = exports.inputReset = exports.inputPadding = exports.inputBorder = exports.inputResetAutofill = exports.InputProgress = exports.InputHoneypot = exports.InputInvisible = 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 styled_1 = require("../styles/styled");
-var ProgressLinear_1 = require("../Progress/ProgressLinear");
-var styled_2 = require("../styles/styled");
-exports.InputInvisible = styled_components_1.default.input(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styled_2.invisible);
-exports.InputHoneypot = (0, styled_components_1.default)(exports.InputInvisible).attrs({
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    InputInvisible: function() {
+        return InputInvisible;
+    },
+    InputHoneypot: function() {
+        return InputHoneypot;
+    },
+    InputProgress: function() {
+        return InputProgress;
+    },
+    inputResetAutofill: function() {
+        return inputResetAutofill;
+    },
+    inputBorder: function() {
+        return inputBorder;
+    },
+    inputPadding: function() {
+        return inputPadding;
+    },
+    inputReset: function() {
+        return inputReset;
+    },
+    inputBase: function() {
+        return inputBase;
+    },
+    inputFocus: function() {
+        return inputFocus;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
+const _ProgressLinear = require("../Progress/ProgressLinear");
+const _styled = require("../styles/styled");
+const InputInvisible = _styledcomponents.default.input`
+  ${_styled.invisible}
+`;
+const InputHoneypot = (0, _styledcomponents.default)(InputInvisible).attrs({
     type: "text",
     autoComplete: "new-password",
-    tabIndex: -1,
-})(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
-exports.InputProgress = (0, styled_components_1.default)(function (p) { return ((0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, tslib_1.__assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
-/**
- * Remove the default light blue background on autofilled inputs. To be used as
- * a function that outputs a CSS string.
- *
- * @see https://stackoverflow.com/a/62624824/1938970
- */
-exports.inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-/* FIXME: find a nice way to override this styling from implementation */
-// border-bottom: 1px solid var(--forms-border-color);
-// border: 0;
-exports.inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-exports.inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-exports.inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(exports.inputBorder, "\n  ").concat(exports.inputPadding, "\n");
-exports.inputBase = "\n  ".concat(exports.inputReset, "\n  ").concat(exports.inputResetAutofill, "\n  background: transparent;\n");
-exports.inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(styled_1.stateFocus, "\n  }\n");
-var templateObject_1, templateObject_2, templateObject_3;
+    tabIndex: -1
+})``;
+const InputProgress = (0, _styledcomponents.default)((p)=>/*#__PURE__*/ React.createElement(_ProgressLinear.ProgressLinear, {
+        fg: "var(--accent300)",
+        bg: "var(--accent400)",
+        ...p
+    }))`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
+const inputResetAutofill = `
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-background-clip: text;
+  }
+`;
+const inputBorder = `
+  border: 1px solid var(--forms-border-color);
+`;
+const inputPadding = `
+  padding: var(--forms-gutter-y) var(--forms-gutter-x);
+`;
+const inputReset = `
+  width: 100%;
+  min-height: 44px;
+  ${inputBorder}
+  ${inputPadding}
+`;
+const inputBase = `
+  ${inputReset}
+  ${inputResetAutofill}
+  background: transparent;
+`;
+const inputFocus = `
+  &:focus {
+    outline: 0px;
+    appearance: none;
+    ${_styled.stateFocus}
+  }
+`;

package/Forms/styles.mjs

@@ -1,29 +1,60 @@
-import { __assign, __makeTemplateObject } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
-import { stateFocus } from "../styles/styled";
 import { ProgressLinear } from "../Progress/ProgressLinear";
-import { invisible } from "../styles/styled";
-export var InputInvisible = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), invisible);
-export var InputHoneypot = styled(InputInvisible).attrs({
+import { invisible, stateFocus } from "../styles/styled";
+export const InputInvisible = styled.input`
+  ${invisible}
+`;
+export const InputHoneypot = styled(InputInvisible).attrs({
     type: "text",
     autoComplete: "new-password",
-    tabIndex: -1,
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-export var InputProgress = styled(function (p) { return (_jsx(ProgressLinear, __assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
+    tabIndex: -1
+})``;
+export const InputProgress = styled((p)=>/*#__PURE__*/ React.createElement(ProgressLinear, {
+        fg: "var(--accent300)",
+        bg: "var(--accent400)",
+        ...p
+    }))`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+`;
 /**
  * Remove the default light blue background on autofilled inputs. To be used as
  * a function that outputs a CSS string.
  *
  * @see https://stackoverflow.com/a/62624824/1938970
- */
-export var inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-/* FIXME: find a nice way to override this styling from implementation */
-// border-bottom: 1px solid var(--forms-border-color);
+ */ export const inputResetAutofill = `
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus,
+  &:-webkit-autofill:active {
+    -webkit-background-clip: text;
+  }
+`;
+/* FIXME: find a nice way to override this styling from implementation */ // border-bottom: 1px solid var(--forms-border-color);
 // border: 0;
-export var inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-export var inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-export var inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(inputBorder, "\n  ").concat(inputPadding, "\n");
-export var inputBase = "\n  ".concat(inputReset, "\n  ").concat(inputResetAutofill, "\n  background: transparent;\n");
-export var inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(stateFocus, "\n  }\n");
-var templateObject_1, templateObject_2, templateObject_3;
+export const inputBorder = `
+  border: 1px solid var(--forms-border-color);
+`;
+export const inputPadding = `
+  padding: var(--forms-gutter-y) var(--forms-gutter-x);
+`;
+export const inputReset = `
+  width: 100%;
+  min-height: 44px;
+  ${inputBorder}
+  ${inputPadding}
+`;
+export const inputBase = `
+  ${inputReset}
+  ${inputResetAutofill}
+  background: transparent;
+`;
+export const inputFocus = `
+  &:focus {
+    outline: 0px;
+    appearance: none;
+    ${stateFocus}
+  }
+`;

package/Gauge/Gauge.js

@@ -1,106 +1,111 @@
-"use strict";
 // import styled, { keyframes } from "styled-components";
 // import { m } from "framer-motion";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Gauge = void 0;
-var Gauge = function (_props) { return null; };
-exports.Gauge = Gauge;
-// export type GaugeProps = {
-//   /** In percentage */
-//   value: number;
-// };
-// export const Gauge = ({
-//   value,
-//   counter = true,
-//   stroke,
-//   // emptyStroke = "#e2e2e2",
-//   emptyStroke = stroke,
-//   emptyStrokeOpacity = 0.25,
-//   // emptyStrokeOpacity = 1,
-//   duration = 3,
-//   delay = 0.5,
-//   size = 100,
-//   strokeWidth = 6,
-// }) => {
-//   const radius = 45;
-//   const circumference = Math.ceil(2 * Math.PI * radius);
-//   const fillPercents = Math.abs(
-//     Math.ceil((circumference / 100) * (value - 100))
-//   );
-//   const transition = {
-//     duration: duration,
-//     delay: delay,
-//     ease: "easeIn",
-//   };
-//   const variants = {
-//     hidden: {
-//       strokeDashoffset: circumference,
-//       transition,
-//     },
-//     show: {
-//       strokeDashoffset: fillPercents,
-//       transition,
-//     },
-//   };
-//   return (
-//     <>
-//       <Flex justifyContent="center" alignItems="center">
-//         {counter && (
-//           <Box
-//             position="absolute"
-//             fontSize={size >= 100 ? 6 : 3}
-//             fontWeight={2}
-//             color="text500"
-//           >
-//             <Counter valueTo={value} totalDuration={duration + delay} />%
-//           </Box>
-//         )}
-//         <Box height={size}>
-//           <svg
-//             viewBox="0 0 100 100"
-//             version="1.1"
-//             xmlns="http://www.w3.org/2000/svg"
-//             width={size}
-//             height={size}
-//           >
-//             <circle
-//               cx="50"
-//               cy="50"
-//               r={radius}
-//               className="circle"
-//               strokeWidth={strokeWidth}
-//               stroke={emptyStroke}
-//               strokeOpacity={emptyStrokeOpacity}
-//               fill="transparent"
-//             />
-//           </svg>
-//           <svg
-//             viewBox="0 0 100 100"
-//             width={size}
-//             height={size}
-//             style={{
-//               position: "absolute",
-//               transform: "rotate(-90deg)",
-//               overflow: "visible",
-//               marginLeft: -size,
-//             }}
-//           >
-//             <m.circle
-//               cx="50"
-//               cy="50"
-//               r={radius}
-//               strokeWidth={strokeWidth}
-//               stroke={stroke}
-//               fill="transparent"
-//               strokeDashoffset={fillPercents}
-//               strokeDasharray={circumference}
-//               variants={variants}
-//               initial="hidden"
-//               animate={"show"}
-//             />
-//           </svg>
-//         </Box>
-//       </Flex>
-//     </>
-//   );
-// };
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Gauge", {
+    enumerable: true,
+    get: function() {
+        return Gauge;
+    }
+});
+const Gauge = (_props)=>null; // export type GaugeProps = {
+ //   /** In percentage */
+ //   value: number;
+ // };
+ // export const Gauge = ({
+ //   value,
+ //   counter = true,
+ //   stroke,
+ //   // emptyStroke = "#e2e2e2",
+ //   emptyStroke = stroke,
+ //   emptyStrokeOpacity = 0.25,
+ //   // emptyStrokeOpacity = 1,
+ //   duration = 3,
+ //   delay = 0.5,
+ //   size = 100,
+ //   strokeWidth = 6,
+ // }) => {
+ //   const radius = 45;
+ //   const circumference = Math.ceil(2 * Math.PI * radius);
+ //   const fillPercents = Math.abs(
+ //     Math.ceil((circumference / 100) * (value - 100))
+ //   );
+ //   const transition = {
+ //     duration: duration,
+ //     delay: delay,
+ //     ease: "easeIn",
+ //   };
+ //   const variants = {
+ //     hidden: {
+ //       strokeDashoffset: circumference,
+ //       transition,
+ //     },
+ //     show: {
+ //       strokeDashoffset: fillPercents,
+ //       transition,
+ //     },
+ //   };
+ //   return (
+ //     <>
+ //       <Flex justifyContent="center" alignItems="center">
+ //         {counter && (
+ //           <Box
+ //             position="absolute"
+ //             fontSize={size >= 100 ? 6 : 3}
+ //             fontWeight={2}
+ //             color="text500"
+ //           >
+ //             <Counter valueTo={value} totalDuration={duration + delay} />%
+ //           </Box>
+ //         )}
+ //         <Box height={size}>
+ //           <svg
+ //             viewBox="0 0 100 100"
+ //             version="1.1"
+ //             xmlns="http://www.w3.org/2000/svg"
+ //             width={size}
+ //             height={size}
+ //           >
+ //             <circle
+ //               cx="50"
+ //               cy="50"
+ //               r={radius}
+ //               className="circle"
+ //               strokeWidth={strokeWidth}
+ //               stroke={emptyStroke}
+ //               strokeOpacity={emptyStrokeOpacity}
+ //               fill="transparent"
+ //             />
+ //           </svg>
+ //           <svg
+ //             viewBox="0 0 100 100"
+ //             width={size}
+ //             height={size}
+ //             style={{
+ //               position: "absolute",
+ //               transform: "rotate(-90deg)",
+ //               overflow: "visible",
+ //               marginLeft: -size,
+ //             }}
+ //           >
+ //             <m.circle
+ //               cx="50"
+ //               cy="50"
+ //               r={radius}
+ //               strokeWidth={strokeWidth}
+ //               stroke={stroke}
+ //               fill="transparent"
+ //               strokeDashoffset={fillPercents}
+ //               strokeDasharray={circumference}
+ //               variants={variants}
+ //               initial="hidden"
+ //               animate={"show"}
+ //             />
+ //           </svg>
+ //         </Box>
+ //       </Flex>
+ //     </>
+ //   );
+ // };

package/Gauge/Gauge.mjs

@@ -1,102 +1,101 @@
 // import styled, { keyframes } from "styled-components";
 // import { m } from "framer-motion";
-export var Gauge = function (_props) { return null; };
-// export type GaugeProps = {
-//   /** In percentage */
-//   value: number;
-// };
-// export const Gauge = ({
-//   value,
-//   counter = true,
-//   stroke,
-//   // emptyStroke = "#e2e2e2",
-//   emptyStroke = stroke,
-//   emptyStrokeOpacity = 0.25,
-//   // emptyStrokeOpacity = 1,
-//   duration = 3,
-//   delay = 0.5,
-//   size = 100,
-//   strokeWidth = 6,
-// }) => {
-//   const radius = 45;
-//   const circumference = Math.ceil(2 * Math.PI * radius);
-//   const fillPercents = Math.abs(
-//     Math.ceil((circumference / 100) * (value - 100))
-//   );
-//   const transition = {
-//     duration: duration,
-//     delay: delay,
-//     ease: "easeIn",
-//   };
-//   const variants = {
-//     hidden: {
-//       strokeDashoffset: circumference,
-//       transition,
-//     },
-//     show: {
-//       strokeDashoffset: fillPercents,
-//       transition,
-//     },
-//   };
-//   return (
-//     <>
-//       <Flex justifyContent="center" alignItems="center">
-//         {counter && (
-//           <Box
-//             position="absolute"
-//             fontSize={size >= 100 ? 6 : 3}
-//             fontWeight={2}
-//             color="text500"
-//           >
-//             <Counter valueTo={value} totalDuration={duration + delay} />%
-//           </Box>
-//         )}
-//         <Box height={size}>
-//           <svg
-//             viewBox="0 0 100 100"
-//             version="1.1"
-//             xmlns="http://www.w3.org/2000/svg"
-//             width={size}
-//             height={size}
-//           >
-//             <circle
-//               cx="50"
-//               cy="50"
-//               r={radius}
-//               className="circle"
-//               strokeWidth={strokeWidth}
-//               stroke={emptyStroke}
-//               strokeOpacity={emptyStrokeOpacity}
-//               fill="transparent"
-//             />
-//           </svg>
-//           <svg
-//             viewBox="0 0 100 100"
-//             width={size}
-//             height={size}
-//             style={{
-//               position: "absolute",
-//               transform: "rotate(-90deg)",
-//               overflow: "visible",
-//               marginLeft: -size,
-//             }}
-//           >
-//             <m.circle
-//               cx="50"
-//               cy="50"
-//               r={radius}
-//               strokeWidth={strokeWidth}
-//               stroke={stroke}
-//               fill="transparent"
-//               strokeDashoffset={fillPercents}
-//               strokeDasharray={circumference}
-//               variants={variants}
-//               initial="hidden"
-//               animate={"show"}
-//             />
-//           </svg>
-//         </Box>
-//       </Flex>
-//     </>
-//   );
-// };
+export const Gauge = (_props)=>null; // export type GaugeProps = {
+ //   /** In percentage */
+ //   value: number;
+ // };
+ // export const Gauge = ({
+ //   value,
+ //   counter = true,
+ //   stroke,
+ //   // emptyStroke = "#e2e2e2",
+ //   emptyStroke = stroke,
+ //   emptyStrokeOpacity = 0.25,
+ //   // emptyStrokeOpacity = 1,
+ //   duration = 3,
+ //   delay = 0.5,
+ //   size = 100,
+ //   strokeWidth = 6,
+ // }) => {
+ //   const radius = 45;
+ //   const circumference = Math.ceil(2 * Math.PI * radius);
+ //   const fillPercents = Math.abs(
+ //     Math.ceil((circumference / 100) * (value - 100))
+ //   );
+ //   const transition = {
+ //     duration: duration,
+ //     delay: delay,
+ //     ease: "easeIn",
+ //   };
+ //   const variants = {
+ //     hidden: {
+ //       strokeDashoffset: circumference,
+ //       transition,
+ //     },
+ //     show: {
+ //       strokeDashoffset: fillPercents,
+ //       transition,
+ //     },
+ //   };
+ //   return (
+ //     <>
+ //       <Flex justifyContent="center" alignItems="center">
+ //         {counter && (
+ //           <Box
+ //             position="absolute"
+ //             fontSize={size >= 100 ? 6 : 3}
+ //             fontWeight={2}
+ //             color="text500"
+ //           >
+ //             <Counter valueTo={value} totalDuration={duration + delay} />%
+ //           </Box>
+ //         )}
+ //         <Box height={size}>
+ //           <svg
+ //             viewBox="0 0 100 100"
+ //             version="1.1"
+ //             xmlns="http://www.w3.org/2000/svg"
+ //             width={size}
+ //             height={size}
+ //           >
+ //             <circle
+ //               cx="50"
+ //               cy="50"
+ //               r={radius}
+ //               className="circle"
+ //               strokeWidth={strokeWidth}
+ //               stroke={emptyStroke}
+ //               strokeOpacity={emptyStrokeOpacity}
+ //               fill="transparent"
+ //             />
+ //           </svg>
+ //           <svg
+ //             viewBox="0 0 100 100"
+ //             width={size}
+ //             height={size}
+ //             style={{
+ //               position: "absolute",
+ //               transform: "rotate(-90deg)",
+ //               overflow: "visible",
+ //               marginLeft: -size,
+ //             }}
+ //           >
+ //             <m.circle
+ //               cx="50"
+ //               cy="50"
+ //               r={radius}
+ //               strokeWidth={strokeWidth}
+ //               stroke={stroke}
+ //               fill="transparent"
+ //               strokeDashoffset={fillPercents}
+ //               strokeDasharray={circumference}
+ //               variants={variants}
+ //               initial="hidden"
+ //               animate={"show"}
+ //             />
+ //           </svg>
+ //         </Box>
+ //       </Flex>
+ //     </>
+ //   );
+ // };