@koine/react 1.0.14 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/Details/Details.d.ts +6 -12
  2. package/hooks/useScrollPosition.d.ts +1 -1
  3. package/node/Alert/Alert.js +14 -0
  4. package/node/Alert/index.js +4 -0
  5. package/node/Animations/Reveal.js +21 -0
  6. package/node/Animations/Underline.js +8 -0
  7. package/node/Animations/index.js +6 -0
  8. package/node/Animations/useReveal.js +75 -0
  9. package/node/Autocomplete/AutocompleteDownshift.js +161 -0
  10. package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +356 -0
  11. package/node/Autocomplete/AutocompleteMui.js +180 -0
  12. package/node/Autocomplete/AutocompleteReach.js +115 -0
  13. package/node/Autocomplete/components.js +37 -0
  14. package/node/Autocomplete/helpers.js +32 -0
  15. package/node/Autocomplete/index.js +7 -0
  16. package/node/Bg/BgColor.js +25 -0
  17. package/node/Bg/BgPhoto.js +20 -0
  18. package/node/Bg/BgSvg.js +16 -0
  19. package/node/Bg/index.js +6 -0
  20. package/node/Breadcrumbs/Breadcrumbs.js +31 -0
  21. package/node/Breadcrumbs/index.js +4 -0
  22. package/node/Buttons/Button.js +17 -0
  23. package/node/Buttons/ButtonComposite.js +32 -0
  24. package/node/Buttons/ButtonFab.js +9 -0
  25. package/node/Buttons/ButtonLink.js +15 -0
  26. package/node/Buttons/IconButton.js +10 -0
  27. package/node/Buttons/index.js +8 -0
  28. package/node/Calendar/CalendarDaygridCell.js +61 -0
  29. package/node/Calendar/CalendarDaygridNav.js +28 -0
  30. package/node/Calendar/CalendarDaygridTable.js +61 -0
  31. package/node/Calendar/CalendarLegend.js +20 -0
  32. package/node/Calendar/calendar-api-google.js +131 -0
  33. package/node/Calendar/index.js +9 -0
  34. package/node/Calendar/types.js +2 -0
  35. package/node/Calendar/useCalendar.js +187 -0
  36. package/node/Calendar/utils.js +215 -0
  37. package/node/Carousel/Carousel.js +381 -0
  38. package/node/Carousel/CarouselCss.js +27 -0
  39. package/node/Carousel/index.js +4 -0
  40. package/node/Collapsable/Collapsable.js +4 -0
  41. package/node/Collapsable/CollapsableReach.js +253 -0
  42. package/node/Collapsable/index.js +5 -0
  43. package/node/Debug/Debug.js +13 -0
  44. package/node/Debug/index.js +4 -0
  45. package/node/Details/Details.js +67 -0
  46. package/node/Details/index.js +4 -0
  47. package/node/Dialog/DialogMui.js +83 -0
  48. package/node/Dialog/css/bare.js +24 -0
  49. package/node/Dialog/index.js +5 -0
  50. package/node/Dialog/m/bare.js +55 -0
  51. package/node/Dialog/m/basic.js +35 -0
  52. package/node/Dialog/m/index.js +8 -0
  53. package/node/Dialog/sc/bare.js +46 -0
  54. package/node/Dialog/sc/framer.js +19 -0
  55. package/node/Dialog/sc/framerMaterial.js +19 -0
  56. package/node/Dialog/sc/material.js +24 -0
  57. package/node/Dialog/tw/bare.js +45 -0
  58. package/node/Dialog/tw/elegant.js +23 -0
  59. package/node/Dialog/tw/framer.js +19 -0
  60. package/node/Dialog/tw/framerMaterial.js +19 -0
  61. package/node/Dialog/tw/material.js +23 -0
  62. package/node/Editor/Editor--tiptap.js +31 -0
  63. package/node/Editor/components.js +15 -0
  64. package/node/Editor/index.js +4 -0
  65. package/node/Favicon/FaviconTags.js +19 -0
  66. package/node/Favicon/index.js +4 -0
  67. package/node/Form/Form.js +65 -0
  68. package/node/Form/index.js +4 -0
  69. package/node/Form/sc/bare.js +23 -0
  70. package/node/Forms/Checkbox/Checkbox.js +21 -0
  71. package/node/Forms/Checkbox/index.js +4 -0
  72. package/node/Forms/Feedback/Feedback.js +13 -0
  73. package/node/Forms/Feedback/index.js +4 -0
  74. package/node/Forms/Field/Field.js +52 -0
  75. package/node/Forms/Field/FieldControl.js +51 -0
  76. package/node/Forms/Field/FieldHint.js +7 -0
  77. package/node/Forms/Field/index.js +5 -0
  78. package/node/Forms/Input/Input.js +20 -0
  79. package/node/Forms/Input/index.js +4 -0
  80. package/node/Forms/InputGroup/InputGroup.js +19 -0
  81. package/node/Forms/InputGroup/index.js +4 -0
  82. package/node/Forms/Label/Label.js +9 -0
  83. package/node/Forms/Label/index.js +4 -0
  84. package/node/Forms/Password/Password.js +20 -0
  85. package/node/Forms/Password/index.js +4 -0
  86. package/node/Forms/Radio/Radio.js +28 -0
  87. package/node/Forms/Radio/index.js +4 -0
  88. package/node/Forms/Switch/Switch.js +23 -0
  89. package/node/Forms/Switch/index.js +4 -0
  90. package/node/Forms/Textarea/Textarea.js +15 -0
  91. package/node/Forms/Textarea/TextareaRich.js +31 -0
  92. package/node/Forms/Textarea/index.js +5 -0
  93. package/node/Forms/Toggle/Toggle.js +37 -0
  94. package/node/Forms/Toggle/index.js +4 -0
  95. package/node/Forms/Toggle/useToggle.js +149 -0
  96. package/node/Forms/antispam.js +61 -0
  97. package/node/Forms/helpers.js +52 -0
  98. package/node/Forms/index.js +19 -0
  99. package/node/Forms/styles.js +32 -0
  100. package/node/Gauge/Gauge.js +106 -0
  101. package/node/Grid/Grid.js +56 -0
  102. package/node/Grid/index.js +4 -0
  103. package/node/Hamburger/Hamburger.js +56 -0
  104. package/node/Hamburger/index.js +4 -0
  105. package/node/Header/index.js +4 -0
  106. package/node/Header/useHeader.js +34 -0
  107. package/node/Hidden/Hidden.js +13 -0
  108. package/node/Hidden/index.js +4 -0
  109. package/node/Img/index.js +4 -0
  110. package/node/Img/sc/bare.js +42 -0
  111. package/node/Img/types.js +2 -0
  112. package/node/Link/Link.js +7 -0
  113. package/node/Link/LinkBlank.js +21 -0
  114. package/node/Link/index.js +5 -0
  115. package/node/Menu/Menu.js +7 -0
  116. package/node/Menu/index.js +4 -0
  117. package/node/MenuItem/MenuItem.js +7 -0
  118. package/node/MenuItem/index.js +4 -0
  119. package/node/Meta/Meta.js +9 -0
  120. package/node/Meta/index.js +4 -0
  121. package/node/NoJs/NoJs.js +10 -0
  122. package/node/NoJs/index.js +4 -0
  123. package/node/Pagination/PaginationNav.js +65 -0
  124. package/node/Pagination/PaginationResults.js +15 -0
  125. package/node/Pagination/index.js +5 -0
  126. package/node/Pill/Pill.js +10 -0
  127. package/node/Pill/index.js +4 -0
  128. package/node/Progress/ProgressCircular.js +19 -0
  129. package/node/Progress/ProgressLinear.js +28 -0
  130. package/node/Progress/ProgressOverlay.js +28 -0
  131. package/node/Progress/index.js +6 -0
  132. package/node/Rating/Rating.js +76 -0
  133. package/node/Rating/index.js +57 -0
  134. package/node/Select/SelectDownshift.js +41 -0
  135. package/node/Select/components.js +15 -0
  136. package/node/Select/index.js +7 -0
  137. package/node/Sidebar/Sidebar.js +27 -0
  138. package/node/Sidebar/index.js +4 -0
  139. package/node/Spacing/Spacing.js +49 -0
  140. package/node/Spacing/index.js +4 -0
  141. package/node/Sticky/Sticky.js +222 -0
  142. package/node/Sticky/StickyCss.js +10 -0
  143. package/node/Sticky/index.js +4 -0
  144. package/node/Tabs/TabsMui.js +49 -0
  145. package/node/Tabs/index.js +4 -0
  146. package/node/Tabs/sc/bare.js +87 -0
  147. package/node/Tabs/tw/bare.js +20 -0
  148. package/node/Tabs/tw/material.js +21 -0
  149. package/node/Tabs/useTabs.js +48 -0
  150. package/node/Typography/CopyPasteVisible.js +7 -0
  151. package/node/Typography/Native.js +17 -0
  152. package/node/Typography/ReadMore.js +47 -0
  153. package/node/Typography/TextLoop.js +51 -0
  154. package/node/Typography/TypeStairs.js +53 -0
  155. package/node/Typography/index.js +8 -0
  156. package/node/css/index.js +36 -0
  157. package/node/helpers/classed.js +72 -0
  158. package/node/helpers/extend-component.js +16 -0
  159. package/node/helpers/index.js +5 -0
  160. package/node/hooks/index.js +18 -0
  161. package/node/hooks/types.js +2 -0
  162. package/node/hooks/useAsyncFn.js +40 -0
  163. package/node/hooks/useDateLocale.js +42 -0
  164. package/node/hooks/useEffectOnce.js +12 -0
  165. package/node/hooks/useFirstMountState.js +16 -0
  166. package/node/hooks/useFocus.js +15 -0
  167. package/node/hooks/useId.js +12 -0
  168. package/node/hooks/useIsomorphicLayoutEffect.js +11 -0
  169. package/node/hooks/useMount.js +13 -0
  170. package/node/hooks/useMountedState.js +19 -0
  171. package/node/hooks/usePrevious.js +12 -0
  172. package/node/hooks/useScrollPosition.js +84 -0
  173. package/node/hooks/useScrollTo.js +25 -0
  174. package/node/hooks/useTraceUpdate.js +25 -0
  175. package/node/hooks/useUpdateEffect.js +18 -0
  176. package/node/hooks/useWindowSize.js +17 -0
  177. package/node/index.js +8 -0
  178. package/node/m/MotionProvider.js +43 -0
  179. package/node/m/index.js +9 -0
  180. package/node/m/lite.js +4 -0
  181. package/node/m/max.js +4 -0
  182. package/node/sc/index.js +37 -0
  183. package/node/scm/index.js +36 -0
  184. package/node/shared/index.js +11 -0
  185. package/node/styles/Body.js +16 -0
  186. package/node/styles/Global.js +21 -0
  187. package/node/styles/index.js +10 -0
  188. package/node/styles/media.js +160 -0
  189. package/node/styles/spacing.js +52 -0
  190. package/node/styles/styled.js +17 -0
  191. package/node/styles/theme--vanilla.js +61 -0
  192. package/node/styles/theme.js +45 -0
  193. package/node/tw/index.js +36 -0
  194. package/node/twm/index.js +36 -0
  195. package/node/types.js +2 -0
  196. package/package.json +3 -3
  197. package/styles/theme--vanilla.d.ts +1 -1
package/node/Img/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/node/Link/Link.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.KoineLink = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.KoineLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
7
+ var templateObject_1;
package/node/Link/LinkBlank.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.LinkBlank = exports.LinkBlankIcon = exports.LinkBlankA = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
+ var md_1 = require("react-icons/md");
8
+ var media_1 = require("../styles/media");
9
+ exports.LinkBlankA = styled_components_1.default.a.attrs({
10
+ target: "_blank",
11
+ rel: "noopener",
12
+ })(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
13
+ // TODO: use `touch` class on <html> instead of relying on screenwidth,
14
+ // probably implement a lean Modernizr like thing with react-helmet
15
+ exports.LinkBlankIcon = (0, styled_components_1.default)(md_1.MdLaunch)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n color: var(---grey100);\n font-size: inherit;\n margin-left: 3px;\n line-height: inherit;\n vertical-align: middle;\n width: 0px;\n transition: width 0.1s ease-in-out;\n ", " {\n width: 20px;\n opacity: 0.8;\n }\n"], ["\n color: var(---grey100);\n font-size: inherit;\n margin-left: 3px;\n line-height: inherit;\n vertical-align: middle;\n width: 0px;\n transition: width 0.1s ease-in-out;\n ", " {\n width: 20px;\n opacity: 0.8;\n }\n"])), media_1.max.sm);
16
+ var LinkBlank = function (_a) {
17
+ var children = _a.children, target = _a.target, rel = _a.rel, props = tslib_1.__rest(_a, ["children", "target", "rel"]);
18
+ return ((0, jsx_runtime_1.jsxs)(exports.LinkBlankA, tslib_1.__assign({}, props, { children: [children, (0, jsx_runtime_1.jsx)(exports.LinkBlankIcon, {})] })));
19
+ };
20
+ exports.LinkBlank = LinkBlank;
21
+ var templateObject_1, templateObject_2;
package/node/Link/index.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Link"), exports);
5
+ tslib_1.__exportStar(require("./LinkBlank"), exports);
package/node/Menu/Menu.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Menu = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.Menu = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n z-index: 3;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n background: #fff;\n width: 100%;\n box-shadow: var(--shadow);\n"], ["\n z-index: 3;\n position: absolute;\n list-style-type: none;\n margin: 0;\n padding: 0;\n background: #fff;\n width: 100%;\n box-shadow: var(--shadow);\n"])));
7
+ var templateObject_1;
package/node/Menu/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Menu"), exports);
package/node/MenuItem/MenuItem.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.MenuItem = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.MenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n padding: 8px 16px;\n\n &[aria-selected=\"true\"] {\n background: var(--accent400);\n }\n\n /** DEP: this is just for MultiselectMui? */\n &.Mui-focused,\n &[data-focus=\"true\"] {\n background: var(--accent300);\n color: white;\n }\n\n &:not([disabled]):hover {\n cursor: pointer;\n background: var(--accent300);\n }\n"], ["\n padding: 8px 16px;\n\n &[aria-selected=\"true\"] {\n background: var(--accent400);\n }\n\n /** DEP: this is just for MultiselectMui? */\n &.Mui-focused,\n &[data-focus=\"true\"] {\n background: var(--accent300);\n color: white;\n }\n\n &:not([disabled]):hover {\n cursor: pointer;\n background: var(--accent300);\n }\n"])));
7
+ var templateObject_1;
package/node/MenuItem/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./MenuItem"), exports);
package/node/Meta/Meta.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Meta = void 0;
4
+ var jsx_runtime_1 = require("react/jsx-runtime");
5
+ var Meta = function (_a) {
6
+ var zoom = _a.zoom;
7
+ return ((0, jsx_runtime_1.jsx)("meta", { name: "viewport", content: "width=device-width, initial-scale=1, maximum-scale=1".concat(zoom ? "" : ", user-scalable=0") }));
8
+ };
9
+ exports.Meta = Meta;
package/node/Meta/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Meta"), exports);
package/node/NoJs/NoJs.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.NoJs = void 0;
4
+ var jsx_runtime_1 = require("react/jsx-runtime");
5
+ var NoJs = function (_props) {
6
+ return ((0, jsx_runtime_1.jsx)("script", { id: "no-js", dangerouslySetInnerHTML: {
7
+ __html: "document.querySelector(\"html\").className=document.querySelector(\"html\").className.replace(/no-js/,\"\") + \"js\";",
8
+ } }));
9
+ };
10
+ exports.NoJs = NoJs;
package/node/NoJs/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./NoJs"), exports);
package/node/Pagination/PaginationNav.js ADDED
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.KoinePaginationNav = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
+ var cg_1 = require("react-icons/cg");
8
+ var utils_1 = require("@koine/utils");
9
+ var Root = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 0 40px;\n font-weight: 600;\n\n & a {\n text-decoration: none;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 20px 0 40px;\n font-weight: 600;\n\n & a {\n text-decoration: none;\n }\n"])));
10
+ var item = "\n display: block;\n padding: 5px 10px;\n";
11
+ var ItemCurrent = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n background: var(--accent400);\n border-radius: 2px;\n"], ["\n ", "\n background: var(--accent400);\n border-radius: 2px;\n"])), item);
12
+ var ItemLink = styled_components_1.default.a(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), item, function (props) { return (props.prev ? "color: var(--grey100);" : ""); });
13
+ var DotsSeparator = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n color: var(--grey100);\n"], ["\n color: var(--grey100);\n"])));
14
+ var arrow = "display: flex; font-size: 20px;";
15
+ var ItemPrev = styled_components_1.default.a(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), arrow);
16
+ var ItemNext = styled_components_1.default.a(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), arrow);
17
+ /*
18
+ * Possible outcomes:
19
+ * [1] 2 3 ... 78 >
20
+ * < 1 2 [3] 4 5 ... 78 >
21
+ * < 1 ... 6 7 [8] 9 10 ... 78 >
22
+ * < 1 ... 75 76 [77] 78 >
23
+ * < 1 ... 76 77 [78]
24
+ */
25
+ var KoinePaginationNav = function (_a) {
26
+ var total = _a.total, perPage = _a.perPage, currentPage = _a.currentPage, baseUrl = _a.baseUrl, _b = _a.showOffset, showOffset = _b === void 0 ? 2 : _b, _c = _a.currentUrl, currentUrl = _c === void 0 ? "/" : _c, _d = _a.Link, Link = _d === void 0 ? "a" : _d;
27
+ total = (0, utils_1.ensureInt)(total);
28
+ currentPage = (0, utils_1.ensureInt)(currentPage);
29
+ perPage = (0, utils_1.ensureInt)(perPage);
30
+ // page 0 means 1
31
+ currentPage = currentPage || 1;
32
+ baseUrl = baseUrl || currentUrl;
33
+ // don't output anything if pagination is not needed
34
+ if (total < perPage) {
35
+ return null;
36
+ }
37
+ var firstPage = 1;
38
+ var lastPage = Math.ceil(total / perPage);
39
+ var prevPage = currentPage - 1 > firstPage ? currentPage - 1 : "";
40
+ var nextPage = currentPage + 1 < lastPage ? currentPage + 1 : lastPage;
41
+ var prevArrow = currentPage > firstPage;
42
+ var nextArrow = currentPage < lastPage;
43
+ var pages = [];
44
+ // fill the pages before the current
45
+ for (var i = currentPage - showOffset; i < currentPage; i++) {
46
+ if (i > 1) {
47
+ pages.push(i);
48
+ }
49
+ }
50
+ // add the current
51
+ pages.push(currentPage);
52
+ // fill the pages after the current
53
+ for (var i = currentPage + 1; i < currentPage + 1 + showOffset; i++) {
54
+ if (i < lastPage) {
55
+ pages.push(i);
56
+ }
57
+ }
58
+ var prevDots = pages[0] > firstPage + 1;
59
+ var nextDots = pages[pages.length - 1] < lastPage - 1;
60
+ return ((0, jsx_runtime_1.jsxs)(Root, { children: [prevArrow && ((0, jsx_runtime_1.jsx)(ItemPrev, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(prevPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowLeftR, {}) }))), firstPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl), prev: true }, { children: firstPage }))), prevDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), pages.map(function (page) {
61
+ return page === currentPage ? ((0, jsx_runtime_1.jsx)(ItemCurrent, { children: page }, page)) : ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(page), prev: page < currentPage, next: page > currentPage }, { children: page }), "pagination-".concat(page)));
62
+ }), nextDots && (0, jsx_runtime_1.jsx)(DotsSeparator, { children: "..." }), lastPage !== currentPage && ((0, jsx_runtime_1.jsx)(ItemLink, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(lastPage), next: true }, { children: lastPage }))), nextArrow && ((0, jsx_runtime_1.jsx)(ItemNext, tslib_1.__assign({ as: Link, href: "".concat(baseUrl, "/").concat(nextPage) }, { children: (0, jsx_runtime_1.jsx)(cg_1.CgArrowRightR, {}) })))] }));
63
+ };
64
+ exports.KoinePaginationNav = KoinePaginationNav;
65
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/node/Pagination/PaginationResults.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.PaginationResults = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
+ var framer_motion_1 = require("framer-motion");
8
+ var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n // overflow: hidden;\n"], ["\n // overflow: hidden;\n"])));
9
+ var Inner = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
10
+ var PaginationResults = function (_a) {
11
+ var children = _a.children;
12
+ return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, tslib_1.__assign({ exitBeforeEnter: true, initial: true }, { children: (0, jsx_runtime_1.jsx)(Root, { children: (0, jsx_runtime_1.jsx)(Inner, tslib_1.__assign({ initial: { opacity: 0, x: -100 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: 100 }, transition: { type: "linear", staggerChildren: 0.3 } }, { children: children })) }) })));
13
+ };
14
+ exports.PaginationResults = PaginationResults;
15
+ var templateObject_1, templateObject_2;
package/node/Pagination/index.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./PaginationNav"), exports);
5
+ tslib_1.__exportStar(require("./PaginationResults"), exports);
package/node/Pill/Pill.js ADDED
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.PillAccentLightOutlined = exports.PillAccentLight = exports.PillGreyLight = exports.Pill = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.Pill = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-block;\n padding: 5px 10px;\n margin: 0 0.5em 0.5em 0;\n border-radius: 2px;\n text-decoration: none;\n font-size: 13px;\n font-weight: 600;\n"], ["\n display: inline-block;\n padding: 5px 10px;\n margin: 0 0.5em 0.5em 0;\n border-radius: 2px;\n text-decoration: none;\n font-size: 13px;\n font-weight: 600;\n"])));
7
+ exports.PillGreyLight = (0, styled_components_1.default)(exports.Pill)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n background: var(--grey800);\n color: var(--grey100);\n\n &:hover {\n color: white;\n background: var(--grey300);\n }\n"], ["\n background: var(--grey800);\n color: var(--grey100);\n\n &:hover {\n color: white;\n background: var(--grey300);\n }\n"])));
8
+ exports.PillAccentLight = (0, styled_components_1.default)(exports.Pill)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n background: var(--accent400);\n color: var(--grey100);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"], ["\n background: var(--accent400);\n color: var(--grey100);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"])));
9
+ exports.PillAccentLightOutlined = (0, styled_components_1.default)(exports.Pill)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n border: 1px solid var(--accent300);\n color: var(--accent200);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"], ["\n border: 1px solid var(--accent300);\n color: var(--accent200);\n\n &:hover {\n color: #fff;\n background: var(--accent300);\n }\n"])));
10
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/node/Pill/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Pill"), exports);
package/node/Progress/ProgressCircular.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ProgressCircular = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importStar(require("styled-components"));
7
+ var animationRotation = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
8
+ var animationCircle = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"], ["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"])));
9
+ var ProgressCircularSvg = styled_components_1.default.svg(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n animation: ", " 1.5s linear infinite;\n"], ["\n animation: ", " 1.5s linear infinite;\n"])), animationRotation);
10
+ var ProgressCircularCircle = styled_components_1.default.circle(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n animation: ", " 1.5s linear infinite;\n"], ["\n animation: ", " 1.5s linear infinite;\n"])), animationCircle);
11
+ /**
12
+ * @see https://mui.com/components/progress/
13
+ */
14
+ var ProgressCircular = function (_a) {
15
+ var _b = _a.size, size = _b === void 0 ? "1em" : _b, _c = _a.thickness, thickness = _c === void 0 ? 1 : _c, _d = _a.color, color = _d === void 0 ? "currentColor" : _d, props = tslib_1.__rest(_a, ["size", "thickness", "color"]);
16
+ return ((0, jsx_runtime_1.jsx)(ProgressCircularSvg, tslib_1.__assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 44 44", style: { width: size, height: size } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressCircularCircle, { cx: "22", cy: "22", r: "20", fill: "none", strokeWidth: thickness, style: { stroke: color } }) })));
17
+ };
18
+ exports.ProgressCircular = ProgressCircular;
19
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/node/Progress/ProgressLinear.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ProgressLinear = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
+ var framer_motion_1 = require("framer-motion");
8
+ var ProgressLinearBg = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: block;\n height: 4px;\n"], ["\n position: relative;\n overflow: hidden;\n display: block;\n height: 4px;\n"])));
9
+ var ProgressLinearFg = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n"], ["\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 100%;\n"])));
10
+ /**
11
+ * @see https://mui.com/components/progress/#linear
12
+ */
13
+ var ProgressLinear = function (_a) {
14
+ var _b = _a.done, done = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? "2px" : _c, _d = _a.bg, bg = _d === void 0 ? "transparent" : _d, _e = _a.fg, fg = _e === void 0 ? "currentColor" : _e, props = tslib_1.__rest(_a, ["done", "height", "bg", "fg"]);
15
+ return ((0, jsx_runtime_1.jsx)(ProgressLinearBg, tslib_1.__assign({ style: { height: height, background: bg } }, props, { children: (0, jsx_runtime_1.jsx)(ProgressLinearFg, { style: { height: height, background: fg }, initial: {
16
+ x: "-100%",
17
+ }, animate: {
18
+ x: done ? "-100%" : "0%",
19
+ }, transition: done
20
+ ? {}
21
+ : {
22
+ repeat: Infinity,
23
+ repeatType: "reverse",
24
+ duration: 2,
25
+ } }) })));
26
+ };
27
+ exports.ProgressLinear = ProgressLinear;
28
+ var templateObject_1, templateObject_2;
package/node/Progress/ProgressOverlay.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ProgressOverlay = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var react_1 = require("react");
7
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
+ var framer_motion_1 = require("framer-motion");
9
+ var ProgressCircular_1 = require("./ProgressCircular");
10
+ var ProgressLinear_1 = require("./ProgressLinear");
11
+ var Header_1 = require("../Header");
12
+ var ProgressOverlayWrap = (0, styled_components_1.default)(framer_motion_1.m.div)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n z-index: 10000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n cursor: wait;\n"], ["\n z-index: 10000;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n cursor: wait;\n"])));
13
+ var ProgressOverlayCenterer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--progress-overlay-bg);\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--progress-overlay-bg);\n"])));
14
+ var ProgressOverlay = function (_a) {
15
+ var running = _a.running;
16
+ var _b = (0, Header_1.useHeader)(), headerHeight = _b[2];
17
+ // const [progress, setProgress] = useState(0);
18
+ (0, react_1.useEffect)(function () {
19
+ document.body.style.cursor = running ? "wait" : "";
20
+ }, [running]);
21
+ return ((0, jsx_runtime_1.jsxs)(ProgressOverlayWrap, tslib_1.__assign({ animate: {
22
+ opacity: running ? 1 : 0,
23
+ }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [(0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), (0, jsx_runtime_1.jsx)(ProgressOverlayCenterer, tslib_1.__assign({ style: {
24
+ top: headerHeight + "px",
25
+ } }, { children: (0, jsx_runtime_1.jsx)(ProgressCircular_1.ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
26
+ };
27
+ exports.ProgressOverlay = ProgressOverlay;
28
+ var templateObject_1, templateObject_2;
package/node/Progress/index.js ADDED
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./ProgressCircular"), exports);
5
+ tslib_1.__exportStar(require("./ProgressLinear"), exports);
6
+ tslib_1.__exportStar(require("./ProgressOverlay"), exports);
package/node/Rating/Rating.js ADDED
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Rating = exports.RatingRoot = exports.RatingValue = exports.RatingCount = exports.RatingDetails = exports.RatingStar = exports.RatingStarRoot = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var react_1 = require("react");
7
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
+ var useId_1 = require("../hooks/useId");
9
+ exports.RatingStarRoot = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"], ["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"])));
10
+ var RatingStar = function (_a) {
11
+ var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = tslib_1.__rest(_a, ["value", "colorBg", "colorStroke", "size"]);
12
+ var id = (0, useId_1.useId)();
13
+ return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", tslib_1.__assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
14
+ };
15
+ exports.RatingStar = RatingStar;
16
+ exports.RatingDetails = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n padding-left: 0.5em;\n font-size: 12px;\n color: var(--grey100);\n\n &:before {\n content: \"(\";\n }\n &:after {\n content: \")\";\n }\n"], ["\n padding-left: 0.5em;\n font-size: 12px;\n color: var(--grey100);\n\n &:before {\n content: \"(\";\n }\n &:after {\n content: \")\";\n }\n"])));
17
+ exports.RatingCount = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
18
+ exports.RatingValue = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n display: none;\n"], ["\n display: none;\n"])));
19
+ exports.RatingRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"], ["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"])), exports.RatingValue);
20
+ var Rating = function (_a) {
21
+ var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
22
+ var id = (0, useId_1.useId)();
23
+ var currentValue = (0, react_1.useState)(value)[0] /* , _setCurrentValue */;
24
+ var _g = (0, react_1.useState)([]), stars = _g[0], setStars = _g[1];
25
+ var getStars = (0, react_1.useCallback)(function (activeCount) {
26
+ var stars = [];
27
+ for (var currentStar = min + 1; currentStar < max + 1; currentStar++) {
28
+ var starValue = void 0;
29
+ var roundedActiveCount = Math.floor(activeCount);
30
+ // we have a rating of 3.4, when we get to the 4th star:
31
+ if (roundedActiveCount === currentStar - 1) {
32
+ starValue = 1 - (currentStar - activeCount);
33
+ }
34
+ else if (roundedActiveCount >= currentStar) {
35
+ starValue = 1;
36
+ }
37
+ else {
38
+ starValue = 0;
39
+ }
40
+ stars.push({ value: starValue });
41
+ }
42
+ return stars;
43
+ }, [min, max]);
44
+ (0, react_1.useEffect)(function () {
45
+ setStars(getStars(currentValue));
46
+ }, [currentValue, getStars]);
47
+ // function updateStars(index) {
48
+ // var currentActive = stars.filter((x) => x.active);
49
+ // if (index !== currentActive.length) {
50
+ // setStars(getStars(index));
51
+ // }
52
+ // }
53
+ // function handleMouseOver(event) {
54
+ // let index = Number(event.currentTarget.getAttribute("data-idx")) + 1;
55
+ // updateStars(index);
56
+ // }
57
+ // function handleMouseLeave() {
58
+ // setStars(getStars());
59
+ // }
60
+ // const handleClick = useCallback((event) => {
61
+ // let index = Number(event.currentTarget.getAttribute("data-idx"));
62
+ // let value = index = index + 1;
63
+ // if (value !== currentValue) {
64
+ // setStars(getStars(value));
65
+ // setCurrentValue(value);
66
+ // onChange(value);
67
+ // }
68
+ // }, [onChange];
69
+ return ((0, jsx_runtime_1.jsxs)(exports.RatingRoot, { children: [stars.map(function (star, idx) { return ((0, jsx_runtime_1.jsx)(exports.RatingStar, { idx: idx, dataIdx: idx, size: starSize,
70
+ // onMouseOver={handleMouseOver}
71
+ // onMouseLeave={handleMouseLeave}
72
+ // onClick={handleClick}
73
+ value: star.value, colorBg: colorBg, colorStroke: colorStroke }, id + idx)); }), " ", showDetails && count && ((0, jsx_runtime_1.jsxs)(exports.RatingDetails, { children: [(0, jsx_runtime_1.jsx)(exports.RatingCount, { children: count }), (0, jsx_runtime_1.jsx)(exports.RatingValue, { children: " - ".concat(value) })] }))] }));
74
+ };
75
+ exports.Rating = Rating;
76
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/node/Rating/index.js ADDED
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.deriveRating = exports.convertRange = exports.getRatingValue = exports.getRatingWord = void 0;
4
+ var tslib_1 = require("tslib");
5
+ tslib_1.__exportStar(require("./Rating"), exports);
6
+ var RATING_WORDS = {
7
+ 0: "Worst",
8
+ 1: "Bad",
9
+ 2: "Mediocre",
10
+ 3: "Good",
11
+ 4: "Great",
12
+ 4.5: "Excellent",
13
+ 5: "Best",
14
+ };
15
+ var getRatingWord = function (value, precision) {
16
+ if (precision === void 0) { precision = 0.5; }
17
+ var buffer = 0;
18
+ var word;
19
+ while (buffer < value) {
20
+ // @ts-expect-error can't remember
21
+ word = RATING_WORDS[buffer];
22
+ buffer += precision;
23
+ }
24
+ return word;
25
+ };
26
+ exports.getRatingWord = getRatingWord;
27
+ var getRatingValue = function (value) {
28
+ var converted = convertRange(value, [0, 5], [0, 10]);
29
+ if (converted % 1 === 0) {
30
+ return converted;
31
+ }
32
+ return converted.toFixed(1);
33
+ };
34
+ exports.getRatingValue = getRatingValue;
35
+ /**
36
+ * @see https://stackoverflow.com/a/14224813
37
+ */
38
+ function convertRange(value, r1, r2) {
39
+ return ((value - r1[0]) * (r2[1] - r2[0])) / (r1[1] - r1[0]) + r2[0];
40
+ }
41
+ exports.convertRange = convertRange;
42
+ var deriveRating = function (title, date, minValue, maxValue, minQuantity) {
43
+ if (minValue === void 0) { minValue = 3.8; }
44
+ if (maxValue === void 0) { maxValue = 5; }
45
+ if (minQuantity === void 0) { minQuantity = 9; }
46
+ var entityTime = date.getTime();
47
+ var nowTime = new Date().getTime();
48
+ var length = title.length;
49
+ var value = Number(convertRange(length, [0, 90], [minValue, maxValue]).toFixed(2));
50
+ var timeDifference = convertRange(nowTime - entityTime, [0, 10000000000000], [minQuantity, 999999]);
51
+ var count = Math.round(timeDifference / length);
52
+ return {
53
+ value: value,
54
+ count: count,
55
+ };
56
+ };
57
+ exports.deriveRating = deriveRating;
package/node/Select/SelectDownshift.js ADDED
@@ -0,0 +1,41 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Select = void 0;
4
+ exports.Select = null;
5
+ // import { useSelect } from "downshift";
6
+ // export type SelectProps = {
7
+ // options?: Option[];
8
+ // };
9
+ // export const Select = ({ options = [] }: SelectProps) => {
10
+ // const {
11
+ // isOpen,
12
+ // selectedItem,
13
+ // getToggleButtonProps,
14
+ // getLabelProps,
15
+ // getMenuProps,
16
+ // highlightedIndex,
17
+ // getItemProps,
18
+ // } = useSelect({ items: options });
19
+ // return (
20
+ // <div>
21
+ // <label {...getLabelProps()}>Choose an element:</label>
22
+ // <button type="button" {...getToggleButtonProps()}>
23
+ // {selectedItem || "Elements"}
24
+ // </button>
25
+ // <ul {...getMenuProps()}>
26
+ // {isOpen &&
27
+ // options.map((item, index) => (
28
+ // <li
29
+ // style={
30
+ // highlightedIndex === index ? { backgroundColor: "#bde4ff" } : {}
31
+ // }
32
+ // key={`${item.value}${index}`}
33
+ // {...getItemProps({ item, index })}
34
+ // >
35
+ // {item.label}
36
+ // </li>
37
+ // ))}
38
+ // </ul>
39
+ // </div>
40
+ // );
41
+ // };
package/node/Select/components.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SelectArrow = exports.SelectArrowStyled = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var react_1 = require("react");
7
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
+ var framer_motion_1 = require("framer-motion");
9
+ var bs_1 = require("react-icons/bs");
10
+ exports.SelectArrowStyled = (0, styled_components_1.default)(framer_motion_1.m.span)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n\n &:not([disabled]) {\n cursor: pointer;\n }\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n\n &:not([disabled]) {\n cursor: pointer;\n }\n"])));
11
+ exports.SelectArrow = (0, react_1.forwardRef)(function SelectArrow(_a, ref) {
12
+ var isOpen = _a.isOpen, props = tslib_1.__rest(_a, ["isOpen"]);
13
+ return ((0, jsx_runtime_1.jsx)(exports.SelectArrowStyled, tslib_1.__assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: (0, jsx_runtime_1.jsx)(bs_1.BsBoxArrowInDown, {}) })));
14
+ });
15
+ var templateObject_1;
package/node/Select/index.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Select = void 0;
4
+ var SelectDownshift_1 = require("./SelectDownshift");
5
+ Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return SelectDownshift_1.Select; } });
6
+ // export type { SelectProps } from "./SelectReach";
7
+ // export { Select } from "./SelectReach";
package/node/Sidebar/Sidebar.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Sidebar = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var react_1 = require("react");
7
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
+ var gr_1 = require("react-icons/gr");
9
+ var cg_1 = require("react-icons/cg");
10
+ var media_1 = require("../styles/media");
11
+ var Buttons_1 = require("../Buttons");
12
+ var Header_1 = require("../Header");
13
+ var SidebarWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
14
+ return "".concat(media_1.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 }");
15
+ });
16
+ var SidebarToggle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__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"])), media_1.min.md);
17
+ var Sidebar = function (_a) {
18
+ var children = _a.children;
19
+ var _b = (0, react_1.useState)(false), open = _b[0], setOpen = _b[1];
20
+ var _c = (0, Header_1.useHeader)(), headerHeight = _c[2];
21
+ var handleClickToggle = (0, react_1.useCallback)(function () {
22
+ setOpen(function (prevOpen) { return !prevOpen; });
23
+ }, []);
24
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SidebarToggle, tslib_1.__assign({ onClick: handleClickToggle }, { children: (0, jsx_runtime_1.jsx)(Buttons_1.IconButtonFab, tslib_1.__assign({ "$variant": "contained" }, { children: open ? (0, jsx_runtime_1.jsx)(cg_1.CgCloseR, {}) : (0, jsx_runtime_1.jsx)(gr_1.GrFolderOpen, {}) })) })), (0, jsx_runtime_1.jsx)(SidebarWrapper, tslib_1.__assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
25
+ };
26
+ exports.Sidebar = Sidebar;
27
+ var templateObject_1, templateObject_2;
package/node/Sidebar/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Sidebar"), exports);
package/node/Spacing/Spacing.js ADDED
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Spacing = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
+ var utils_1 = require("@koine/utils");
8
+ var spacing_1 = require("../styles/spacing");
9
+ 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)); });
10
+ var extractDirectionArgs = function (raw) {
11
+ var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
12
+ var factorArg = (0, utils_1.isUndefined)(factor) ? undefined : parseFloat(factor);
13
+ var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
14
+ return [size, factorArg, property, devicesArg];
15
+ };
16
+ /**
17
+ * Usage:
18
+ *
19
+ * ```jsx
20
+ * <Spacing top="sm" />
21
+ * <Spacing top="sm:1.5" />
22
+ * <Spacing top="sm:1.5" bottom="lg" />
23
+ * <Spacing vertical="sm:1.5:margin:mobile" />
24
+ * <Spacing top="sm:1.5:padding:mobile" />
25
+ * <Spacing top="sm:2:padding:tablet,desktop" />
26
+ * ```
27
+ */
28
+ var Spacing = function (_a) {
29
+ var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
30
+ var $top;
31
+ var $bottom;
32
+ if (top) {
33
+ $top = extractDirectionArgs(top);
34
+ }
35
+ if (bottom) {
36
+ $bottom = extractDirectionArgs(bottom);
37
+ }
38
+ if (vertical) {
39
+ $top = extractDirectionArgs(vertical);
40
+ $bottom = $top;
41
+ }
42
+ if (!$top && !$bottom && !vertical) {
43
+ // eslint-disable-next-line react/jsx-no-useless-fragment
44
+ return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
45
+ }
46
+ return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
47
+ };
48
+ exports.Spacing = Spacing;
49
+ var templateObject_1;
package/node/Spacing/index.js ADDED
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ var tslib_1 = require("tslib");
4
+ tslib_1.__exportStar(require("./Spacing"), exports);