@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/Favicon/FaviconTags.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.FaviconTags = void 0;
4
+ var jsx_runtime_1 = require("react/jsx-runtime");
5
+ /**
6
+ * Favicon tags.
7
+ *
8
+ * This component is meant to be wrapped in a `<head>` manager component.
9
+ *
10
+ * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
11
+ * on _**16 Feb 2022**_.
12
+ *
13
+ * @see https://realfavicongenerator.net/
14
+ */
15
+ var FaviconTags = function (_a) {
16
+ var name = _a.name, color = _a.color, safariTabColor = _a.safariTabColor, tileColor = _a.tileColor, themeColor = _a.themeColor;
17
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), (0, jsx_runtime_1.jsx)("link", { rel: "manifest", href: "/site.webmanifest" }), (0, jsx_runtime_1.jsx)("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "apple-mobile-web-app-title", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "application-name", content: name }), (0, jsx_runtime_1.jsx)("meta", { name: "msapplication-TileColor", content: tileColor || color }), (0, jsx_runtime_1.jsx)("meta", { name: "theme-color", content: themeColor || color })] }));
18
+ };
19
+ exports.FaviconTags = FaviconTags;
package/node/Favicon/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("./FaviconTags"), exports);
package/node/Form/Form.js ADDED
@@ -0,0 +1,65 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.KoineForm = exports.Form = exports.Fail = exports.Ok = exports.Collapsable = exports.Progress = exports.Overlay = exports.Root = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ var react_1 = require("react");
7
+ // import { type MotionProps } from "framer-motion";
8
+ var helpers_1 = require("../helpers");
9
+ exports.Root = "form";
10
+ exports.Overlay = "div";
11
+ exports.Progress = "div";
12
+ exports.Collapsable = "div";
13
+ exports.Ok = null;
14
+ exports.Fail = null;
15
+ var Form = function (_a) {
16
+ var _Root = _a.Root, _Overlay = _a.Overlay, _Progress = _a.Progress, _Collapsable = _a.Collapsable, ok = _a.ok, fail = _a.fail, loading = _a.loading, _Ok = _a.Ok, _b = _a.okProps, okProps = _b === void 0 ? {
17
+ children: "Sent!",
18
+ } : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
19
+ children: "Failed.",
20
+ } : _c, collapseOnOk = _a.collapseOnOk, collapseOnFail = _a.collapseOnFail, _d = _a.okTimeout, okTimeout = _d === void 0 ? 3000 : _d, _e = _a.failTimeout, failTimeout = _e === void 0 ? 3000 : _e, children = _a.children, props = tslib_1.__rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
21
+ var _f = (0, react_1.useState)(""), open = _f[0], setOpen = _f[1];
22
+ var commonProps = {
23
+ head: null,
24
+ components: {
25
+ HeadIcon: null,
26
+ },
27
+ };
28
+ (0, react_1.useEffect)(function () {
29
+ if (!loading) {
30
+ if (ok)
31
+ setOpen("ok");
32
+ else if (fail)
33
+ setOpen("fail");
34
+ }
35
+ }, [ok, fail, loading]);
36
+ (0, react_1.useEffect)(function () {
37
+ var timeout;
38
+ if (open === "fail" && failTimeout) {
39
+ timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
40
+ }
41
+ else if (open === "ok" && okTimeout) {
42
+ timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
43
+ }
44
+ return function () {
45
+ if (timeout) {
46
+ clearTimeout(timeout);
47
+ }
48
+ };
49
+ }, [open, failTimeout, okTimeout]);
50
+ var formExpanded = true;
51
+ if (collapseOnFail && fail)
52
+ formExpanded = false;
53
+ if (collapseOnOk && ok)
54
+ formExpanded = false;
55
+ return ((0, jsx_runtime_1.jsxs)(exports.Root, tslib_1.__assign({ method: "post", noValidate: true }, props, { children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, loading && ((0, jsx_runtime_1.jsx)(exports.Overlay, { children: (0, jsx_runtime_1.jsx)(exports.Progress, {}) }))] }) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, tslib_1.__assign({}, okProps)) })), (0, jsx_runtime_1.jsx)(exports.Collapsable, tslib_1.__assign({}, commonProps, { "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, tslib_1.__assign({}, failProps)) }))] })));
56
+ };
57
+ exports.Form = Form;
58
+ exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
59
+ Root: exports.Root,
60
+ Overlay: exports.Overlay,
61
+ Progress: exports.Progress,
62
+ Collapsable: exports.Collapsable,
63
+ Ok: exports.Ok,
64
+ Fail: exports.Fail,
65
+ });
package/node/Form/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("./Form"), exports);
package/node/Form/sc/bare.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.KoineForm = exports.Feedback = exports.Overlay = exports.Root = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ var styled_1 = require("../../styles/styled");
7
+ var Collapsable_1 = require("../../Collapsable");
8
+ var Progress_1 = require("../../Progress");
9
+ var Alert_1 = require("../../Alert");
10
+ var helpers_1 = require("../../helpers");
11
+ var _ = tslib_1.__importStar(require("../Form"));
12
+ exports.Root = (0, styled_components_1.default)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
13
+ exports.Overlay = (0, styled_components_1.default)(_.Overlay)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n z-index: 4;\n ", "\n ", "\n background: rgba(var(--bodyBg--rgb),.8);\n pointer-events: none;\n backdrop-filter: blur(2px);\n"], ["\n z-index: 4;\n ", "\n ", "\n background: rgba(var(--bodyBg--rgb),.8);\n pointer-events: none;\n backdrop-filter: blur(2px);\n"])), styled_1.overlay, styled_1.centered);
14
+ exports.Feedback = (0, styled_components_1.default)(Alert_1.Alert)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n padding: 2em 0;\n"], ["\n padding: 2em 0;\n"])));
15
+ exports.KoineForm = (0, helpers_1.extendComponent)(_.KoineForm, {
16
+ Root: exports.Root,
17
+ Overlay: exports.Overlay,
18
+ Progress: Progress_1.ProgressCircular,
19
+ Collapsable: Collapsable_1.Collapsable,
20
+ Ok: exports.Feedback,
21
+ Fail: exports.Feedback,
22
+ });
23
+ var templateObject_1, templateObject_2, templateObject_3;
package/node/Forms/Checkbox/Checkbox.js ADDED
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Checkbox = exports.CheckboxLabel = exports.CheckboxIndicator = exports.CheckboxToggle = exports.CheckboxRoot = 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 Toggle_1 = require("../Toggle");
9
+ var useToggle_1 = require("../Toggle/useToggle");
10
+ exports.CheckboxRoot = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
11
+ exports.CheckboxToggle = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n pointer-events: none;\n"], ["\n pointer-events: none;\n"])));
12
+ exports.CheckboxIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
13
+ exports.CheckboxLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n font-size: 0.8em;\n"], ["\n font-size: 0.8em;\n"])));
14
+ /**
15
+ * All logic and invisible Inputs come from the `useToggle` hook
16
+ */
17
+ exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(props, ref) {
18
+ var _a = (0, useToggle_1.useToggle)(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
19
+ return ((0, jsx_runtime_1.jsxs)(exports.CheckboxRoot, tslib_1.__assign({}, rootProps, { children: [(0, jsx_runtime_1.jsxs)(exports.CheckboxToggle, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.CheckboxIndicator, {})] }), label && (0, jsx_runtime_1.jsx)(exports.CheckboxLabel, { children: label })] })));
20
+ });
21
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/node/Forms/Checkbox/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("./Checkbox"), exports);
package/node/Forms/Feedback/Feedback.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Feedback = 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 Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n margin-top: 0.2em;\n font-size: 12px;\n ", "\n"], ["\n margin-top: 0.2em;\n font-size: 12px;\n ", "\n"])), function (p) { return (p.$danger ? "color: var(--danger);" : ""); });
8
+ var Feedback = function (_a) {
9
+ var $danger = _a.$danger, children = _a.children;
10
+ return ((0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ role: "alert", "$danger": $danger }, { children: children })));
11
+ };
12
+ exports.Feedback = Feedback;
13
+ var templateObject_1;
package/node/Forms/Feedback/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("./Feedback"), exports);
package/node/Forms/Field/Field.js ADDED
@@ -0,0 +1,52 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = 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 Feedback_1 = require("../Feedback");
8
+ exports.field = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n padding-bottom: 20px;\n"], ["\n padding-bottom: 20px;\n"])));
9
+ exports.FieldBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.field);
10
+ exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
11
+ return (p.$danger &&
12
+ "\n color: var(--danger);\n \n textarea,\n input,\n select {\n color: var(--danger);\n }\n ");
13
+ });
14
+ /**
15
+ * Yup's errors produce by these validations:
16
+ *
17
+ * ```
18
+ * email: string().email().required(),
19
+ * name: string().required()
20
+ * ```
21
+ *
22
+ * determine the `error.type` of the `FieldError` to be "required" and "email".
23
+ * We assume these as standard translations keys without needing to pass
24
+ * a string into the validation, e.g. `required("mySpecialKey")`.
25
+ */
26
+ var YUP_ERROR_TYPES_AS_KEYS = {
27
+ required: 1,
28
+ email: 1,
29
+ };
30
+ var Field = function (_a) {
31
+ var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = tslib_1.__rest(_a, ["name", "t", "error", "errors", "children"]);
32
+ var err = errors && name ? errors[name] : error;
33
+ var msg = "";
34
+ if (err) {
35
+ if (name && t && err.type !== "plain") {
36
+ var translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
37
+ msg = t("errors.".concat(name, ".").concat(translationKey || err.message));
38
+ }
39
+ else {
40
+ msg = err.message;
41
+ }
42
+ }
43
+ // dynamic i18n namespace loading does not seem to work yet
44
+ // const t = useT("core.Forms");
45
+ // const { locale } = useRouter();
46
+ // useEffect(() => {
47
+ // i18n.addResourceBundle(locale, "core.Forms", null);
48
+ // }, []);
49
+ return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, tslib_1.__assign({ "$danger": !!err }, props, { children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, tslib_1.__assign({ "$danger": true }, { children: msg }))] })));
50
+ };
51
+ exports.Field = Field;
52
+ var templateObject_1, templateObject_2, templateObject_3;
package/node/Forms/Field/FieldControl.js ADDED
@@ -0,0 +1,51 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.FieldControl = 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 react_hook_form_1 = require("react-hook-form");
8
+ var utils_1 = require("@koine/utils");
9
+ var Field_1 = require("./Field");
10
+ var FieldHint_1 = require("./FieldHint");
11
+ var styles_1 = require("../styles");
12
+ /**
13
+ *
14
+ * - it expects the `field` object from our `useForm` wrapper around react-hook-form
15
+ * - automatically get translated strings from the given `t` function` for the
16
+ * field `label`, `placeholder` and `errors`. The .json expected by the `t` function
17
+ * look like this:
18
+ *
19
+ * ```json
20
+ * ```
21
+ */
22
+ var FieldControl = function (_a) {
23
+ var control = _a.control, register = _a.register, setValue = _a.setValue, maybeEncodedName = _a.name, label = _a.label, placeholder = _a.placeholder, hint = _a.hint, t = _a.t, _b = _a.showError, showError = _b === void 0 ? true : _b, children = _a.children, encode = _a.encode, props = tslib_1.__rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
24
+ var name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
25
+ var errors = (0, react_hook_form_1.useFormState)({ name: name, control: control }).errors;
26
+ var error = showError && errors[name] ? errors[name] : null;
27
+ var FormFieldContent = (0, react_1.useMemo)(function () {
28
+ return children({
29
+ control: control,
30
+ register: register,
31
+ setValue: setValue,
32
+ name: maybeEncodedName,
33
+ // @see https://github.com/vinissimus/next-translate/pull/461
34
+ // @see https://github.com/vinissimus/next-translate/issues/429
35
+ label: label || t("labels.".concat(name), undefined, { default: "" }),
36
+ placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
37
+ });
38
+ }, [
39
+ children,
40
+ control,
41
+ register,
42
+ setValue,
43
+ name,
44
+ label,
45
+ t,
46
+ maybeEncodedName,
47
+ placeholder,
48
+ ]);
49
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, tslib_1.__assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && (0, jsx_runtime_1.jsx)(FieldHint_1.FieldHint, { children: hint })] })), encode && register && (0, jsx_runtime_1.jsx)(styles_1.InputHoneypot, tslib_1.__assign({}, register(name)))] }));
50
+ };
51
+ exports.FieldControl = FieldControl;
package/node/Forms/Field/FieldHint.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.FieldHint = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.FieldHint = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n padding-top: 0.6em;\n opacity: 0.7;\n font-size: 75%;\n"], ["\n padding-top: 0.6em;\n opacity: 0.7;\n font-size: 75%;\n"])));
7
+ var templateObject_1;
package/node/Forms/Field/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("./Field"), exports);
5
+ tslib_1.__exportStar(require("./FieldControl"), exports);
package/node/Forms/Input/Input.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Input = exports.InputNative = exports.InputPost = exports.InputPre = exports.InputMain = exports.InputWrap = 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 Label_1 = require("../Label/Label");
9
+ var styles_1 = require("../styles");
10
+ exports.InputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n"])));
11
+ exports.InputMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
12
+ exports.InputPre = styled_components_1.default.div(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject([""], [""])));
13
+ exports.InputPost = styled_components_1.default.div(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
14
+ exports.InputNative = styled_components_1.default.input(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), styles_1.inputBase, styles_1.inputFocus);
15
+ exports.Input = (0, react_1.forwardRef)(function Input(_a, ref) {
16
+ var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
17
+ // console.log("Input: render");
18
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.InputNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
19
+ });
20
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/node/Forms/Input/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("./Input"), exports);
package/node/Forms/InputGroup/InputGroup.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.InputGroup = exports.InputGroupButtonPost = exports.InputGroupButtonPre = exports.InputGroupMain = exports.InputGroupRoot = 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 Buttons_1 = require("../../Buttons");
8
+ var Field_1 = require("../Field");
9
+ var media_1 = require("../../styles/media");
10
+ exports.InputGroupRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n display: flex;\n ", " {\n flex-direction: column;\n }\n"], ["\n ", "\n display: flex;\n ", " {\n flex-direction: column;\n }\n"])), Field_1.field, media_1.max.sm);
11
+ exports.InputGroupMain = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
12
+ exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n ", " {\n border-bottom: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n ", " {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n"], ["\n ", " {\n border-bottom: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n ", " {\n border-right: 0;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n"])), media_1.max.sm, media_1.min.sm);
13
+ exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n ", " {\n border-top: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n ", " {\n border-left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n"], ["\n ", " {\n border-top: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n ", " {\n border-left: 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n"])), media_1.max.sm, media_1.min.sm);
14
+ var InputGroup = function (_a) {
15
+ var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? Buttons_1.KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = tslib_1.__rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
16
+ return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, tslib_1.__assign({}, props, { children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, tslib_1.__assign({ as: Button }, btnProps)), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, tslib_1.__assign({ as: Button }, btnProps))] })));
17
+ };
18
+ exports.InputGroup = InputGroup;
19
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/node/Forms/InputGroup/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("./InputGroup"), exports);
package/node/Forms/Label/Label.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Label = exports.labelMaterial = exports.label = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
+ exports.label = "\n display: flex;\n font-size: 13px;\n cursor: pointer;\n";
7
+ exports.labelMaterial = "\n z-index: 2;\n position: relative;\n display: inline-block;\n padding: 0 5px;\n font-weight: 100;\n font-size: 10px;\n background: var(--bodyBg);\n transform: translateY(-0.3em) translateX(1em);\n cursor: pointer;\n\n + * {\n margin-top: -1em;\n }\n";
8
+ exports.Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.labelMaterial);
9
+ var templateObject_1;
package/node/Forms/Label/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("./Label"), exports);
package/node/Forms/Password/Password.js ADDED
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Password = exports.PasswordInputNative = 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 im_1 = require("react-icons/im");
9
+ var Label_1 = require("../Label/Label");
10
+ var Input_1 = require("../Input/Input");
11
+ var ICON_WIDTH = "2em";
12
+ var PasswordInputWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
13
+ exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: relative;\n padding-right: ", ";\n"], ["\n position: relative;\n padding-right: ", ";\n"])), ICON_WIDTH);
14
+ var PasswordIcon = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0.5;\n"], ["\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n opacity: 0.5;\n"])), ICON_WIDTH);
15
+ exports.Password = (0, react_1.forwardRef)(function Password(_a, ref) {
16
+ var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
17
+ var _b = (0, react_1.useState)(false), visible = _b[0], setVisible = _b[1];
18
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsxs)(PasswordInputWrap, { children: [(0, jsx_runtime_1.jsx)(exports.PasswordInputNative, tslib_1.__assign({ type: visible ? "text" : "password", autoComplete: "new-password" }, (register ? register(name) : { name: name, ref: ref }), props)), (0, jsx_runtime_1.jsx)(PasswordIcon, tslib_1.__assign({ onClick: function () { return setVisible(function (prev) { return !prev; }); } }, { children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) }))] })] }));
19
+ });
20
+ var templateObject_1, templateObject_2, templateObject_3;
package/node/Forms/Password/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("./Password"), exports);
package/node/Forms/Radio/Radio.js ADDED
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Radio = 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 Label_1 = require("../Label/Label");
9
+ var Toggle_1 = require("../Toggle");
10
+ var styles_1 = require("../styles");
11
+ var RadioRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject([""], [""])));
12
+ var RadioLabel = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), Label_1.label);
13
+ var RadioOptionRoot = styled_components_1.default.label(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n padding: 0.05em;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n padding: 0.05em;\n cursor: pointer;\n"])));
14
+ var RadioToggle = (0, styled_components_1.default)(Toggle_1.Toggle)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject([""], [""])));
15
+ var RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject([""], [""])));
16
+ var RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel)(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject([""], [""])));
17
+ var RadioOption = (0, react_1.forwardRef)(function RadioOption(_a, ref) {
18
+ var register = _a.register, name = _a.name, label = _a.label, $ref = _a.$ref, props = tslib_1.__rest(_a, ["register", "name", "label", "$ref"]);
19
+ var inputProps = register ? register(name) : { name: name, ref: $ref || ref };
20
+ return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ type: "radio" }, inputProps, props)), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
21
+ });
22
+ exports.Radio = (0, react_1.forwardRef)(function Radio(_a, ref) {
23
+ var label = _a.label, options = _a.options, props = tslib_1.__rest(_a, ["label", "options"]);
24
+ if (!options)
25
+ return null;
26
+ return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map(function (option, idx) { return ((0, jsx_runtime_1.jsx)(RadioOption, tslib_1.__assign({}, option, props, { "$ref": ref }), idx)); })] }));
27
+ });
28
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
package/node/Forms/Radio/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("./Radio"), exports);
package/node/Forms/Switch/Switch.js ADDED
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Switch = exports.SwitchHandle = exports.SwitchTrack = 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 Checkbox_1 = require("../Checkbox");
9
+ var Toggle_1 = require("../Toggle");
10
+ var useToggle_1 = require("../Toggle/useToggle");
11
+ var styled_1 = require("../../styles/styled");
12
+ var SWITCH_GUTTER = 0.25;
13
+ var SWITCH_HANDLE_SIZE = 1;
14
+ exports.SwitchTrack = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n width: ", "em;\n height: ", "em;\n padding: ", "em;\n border-radius: ", "em;\n ", "\n\n input:focus ~ & {\n ", "\n }\n\n input:disabled ~ & {\n opacity: 0.5;\n cursor: not-allowed;\n }\n"], ["\n position: relative;\n width: ", "em;\n height: ", "em;\n padding: ", "em;\n border-radius: ", "em;\n ", "\n\n input:focus ~ & {\n ", "\n }\n\n input:disabled ~ & {\n opacity: 0.5;\n cursor: not-allowed;\n }\n"])), SWITCH_HANDLE_SIZE * 3, SWITCH_HANDLE_SIZE * 1.5, SWITCH_GUTTER, SWITCH_HANDLE_SIZE, Toggle_1.toggleBase, styled_1.stateFocus);
15
+ exports.SwitchHandle = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n position: absolute;\n width: ", "em;\n height: ", "em;\n left: ", "em;\n margin-top: -1px;\n /* border: 1px solid currentColor; */\n background: currentColor;\n opacity: 0.5;\n border-radius: 100%;\n transition: all 0.18s ease-in-out;\n\n input:checked + ", " & {\n opacity: 1;\n left: calc(100% - ", "em - ", "em);\n }\n"], ["\n position: absolute;\n width: ", "em;\n height: ", "em;\n left: ", "em;\n margin-top: -1px;\n /* border: 1px solid currentColor; */\n background: currentColor;\n opacity: 0.5;\n border-radius: 100%;\n transition: all 0.18s ease-in-out;\n\n input:checked + ", " & {\n opacity: 1;\n left: calc(100% - ", "em - ", "em);\n }\n"])), SWITCH_HANDLE_SIZE, SWITCH_HANDLE_SIZE, SWITCH_GUTTER, exports.SwitchTrack, SWITCH_HANDLE_SIZE, SWITCH_GUTTER);
16
+ /**
17
+ * All logic and invisible Inputs come from the `useToggle` hook
18
+ */
19
+ exports.Switch = (0, react_1.forwardRef)(function Switch(props, ref) {
20
+ var _a = (0, useToggle_1.useToggle)(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
21
+ return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, tslib_1.__assign({}, rootProps, { children: [Inputs, (0, jsx_runtime_1.jsx)(exports.SwitchTrack, { children: (0, jsx_runtime_1.jsx)(exports.SwitchHandle, {}) }), label && (0, jsx_runtime_1.jsx)(Checkbox_1.CheckboxLabel, { children: label })] })));
22
+ });
23
+ var templateObject_1, templateObject_2;
package/node/Forms/Switch/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("./Switch"), exports);
package/node/Forms/Textarea/Textarea.js ADDED
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Textarea = exports.TextareaNative = 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 Label_1 = require("../Label/Label");
9
+ var styles_1 = require("../styles");
10
+ exports.TextareaNative = styled_components_1.default.textarea(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n ", "\n resize: vertical;\n"], ["\n ", "\n ", "\n resize: vertical;\n"])), styles_1.inputBase, styles_1.inputFocus);
11
+ exports.Textarea = (0, react_1.forwardRef)(function Textarea(_a, ref) {
12
+ var register = _a.register, name = _a.name, label = _a.label, props = tslib_1.__rest(_a, ["register", "name", "label"]);
13
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(exports.TextareaNative, tslib_1.__assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
14
+ });
15
+ var templateObject_1;
package/node/Forms/Textarea/TextareaRich.js ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TextareaRich = 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
+ // import TextareaAutosize from "@mui/base/TextareaAutosize";
9
+ var Label_1 = require("../Label/Label");
10
+ var Editor_1 = require("../../Editor");
11
+ var helpers_1 = require("../helpers");
12
+ var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n .ProseMirror {\n max-height: 160px;\n overflow: auto;\n }\n .EditorContent {\n position: relative;\n &:after {\n position: absolute;\n content: \"\";\n bottom: 0;\n left: 0;\n right: 16px; /* scrollbar width? */\n height: 3em;\n background: linear-gradient(0deg, white, white 33%, transparent);\n pointer-events: none;\n }\n }\n"], ["\n .ProseMirror {\n max-height: 160px;\n overflow: auto;\n }\n .EditorContent {\n position: relative;\n &:after {\n position: absolute;\n content: \"\";\n bottom: 0;\n left: 0;\n right: 16px; /* scrollbar width? */\n height: 3em;\n background: linear-gradient(0deg, white, white 33%, transparent);\n pointer-events: none;\n }\n }\n"])));
13
+ exports.TextareaRich = (0, react_1.forwardRef)(function TextareaRich(_a, ref) {
14
+ var register = _a.register, setValue = _a.setValue, name = _a.name, label = _a.label, _b = _a.defaultValue, defaultValue = _b === void 0 ? "" : _b, onChange = _a.onChange, props = tslib_1.__rest(_a, ["register", "setValue", "name", "label", "defaultValue", "onChange"]);
15
+ if (register)
16
+ register(name);
17
+ return ((0, jsx_runtime_1.jsxs)(Root, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.Label, { children: label }), (0, jsx_runtime_1.jsx)(Editor_1.Editor, tslib_1.__assign({ options: {
18
+ // element: <TextareaAutosize />,
19
+ content: defaultValue,
20
+ onUpdate: (onChange || setValue) && name
21
+ ? function (_a) {
22
+ var editor = _a.editor;
23
+ var value = editor.getHTML();
24
+ if (setValue)
25
+ setValue(name, value);
26
+ (0, helpers_1.triggerOnChange)(onChange, name, value);
27
+ }
28
+ : undefined,
29
+ } }, props))] }));
30
+ });
31
+ var templateObject_1;
package/node/Forms/Textarea/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("./Textarea"), exports);
5
+ tslib_1.__exportStar(require("./TextareaRich"), exports);
package/node/Forms/Toggle/Toggle.js ADDED
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ToggleIndicatorRounded = exports.ToggleIndicatorSquared = exports.ToggleIndicatorFg = exports.ToggleIndicatorBgCircle = exports.ToggleIndicatorBgSquare = exports.ToggleIndicatorHolder = exports.ToggleLabelSub = exports.ToggleLabel = exports.Toggle = exports.toggleIndicatorFg = exports.toggleIndicatorBgShape = exports.toggleIndicatorBg = exports.toggleBase = void 0;
4
+ var tslib_1 = require("tslib");
5
+ var jsx_runtime_1 = require("react/jsx-runtime");
6
+ /**
7
+ * @file
8
+ *
9
+ * About accessibility:
10
+ * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
11
+ */
12
+ // import { useId } from "react";
13
+ var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
14
+ var styled_1 = require("../../styles/styled");
15
+ var useId_1 = require("../../hooks/useId");
16
+ exports.toggleBase = "\n border: 1px solid var(--forms-border-color);\n";
17
+ exports.toggleIndicatorBg = "\n display: inline-block;\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n";
18
+ exports.toggleIndicatorBgShape = "\n ".concat(exports.toggleIndicatorBg, "\n fill: none;\n stroke-width: 2px;\n stroke: var(--forms-border-color);\n");
19
+ exports.toggleIndicatorFg = "\n position: absolute;\n left: 0;\n width: 100%;\n height: 100%;\n fill: currentcolor;\n";
20
+ exports.Toggle = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n height: 2em;\n margin: 0 -0.3em; /* rtl */\n padding: 0.3em;\n"], ["\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 2em;\n height: 2em;\n margin: 0 -0.3em; /* rtl */\n padding: 0.3em;\n"])));
21
+ exports.ToggleLabel = styled_components_1.default.span(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n margin-left: 0.6em; /* rtl */\n"], ["\n margin-left: 0.6em; /* rtl */\n"])));
22
+ exports.ToggleLabelSub = styled_components_1.default.small(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n opacity: 0.7;\n font-size: 0.7em; ;\n"], ["\n opacity: 0.7;\n font-size: 0.7em; ;\n"])));
23
+ exports.ToggleIndicatorHolder = styled_components_1.default.span(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["\n position: relative;\n display: flex;\n\n input:focus ~ & {\n ", "\n }\n"], ["\n position: relative;\n display: flex;\n\n input:focus ~ & {\n ", "\n }\n"])), styled_1.stateFocus);
24
+ exports.ToggleIndicatorBgSquare = styled_components_1.default.svg(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.toggleIndicatorBgShape);
25
+ exports.ToggleIndicatorBgCircle = styled_components_1.default.svg(templateObject_6 || (templateObject_6 = tslib_1.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), exports.toggleIndicatorBgShape);
26
+ exports.ToggleIndicatorFg = styled_components_1.default.svg(templateObject_7 || (templateObject_7 = tslib_1.__makeTemplateObject(["\n ", "\n transform: scale(0);\n transition: transform 0.18s ease;\n\n input:checked + ", " & {\n transform: scale(1);\n }\n"], ["\n ", "\n transform: scale(0);\n transition: transform 0.18s ease;\n\n input:checked + ", " & {\n transform: scale(1);\n }\n"])), exports.toggleIndicatorFg, exports.ToggleIndicatorHolder);
27
+ var ToggleIndicatorSquared = function (props) {
28
+ return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsx)(exports.ToggleIndicatorBgSquare, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("rect", { width: "24", height: "24" }) })), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) }))] }));
29
+ };
30
+ exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
31
+ var ToggleIndicatorRounded = function (_a) {
32
+ var _b = _a.r, r = _b === void 0 ? 6 : _b;
33
+ var id = (0, useId_1.useId)();
34
+ return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorBgCircle, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: [(0, jsx_runtime_1.jsx)("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), (0, jsx_runtime_1.jsx)("clipPath", tslib_1.__assign({ id: "c_".concat(id) }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#r_".concat(id) }) }))] })), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("circle", { r: r, cx: "12", cy: "12" }) }))] }));
35
+ };
36
+ exports.ToggleIndicatorRounded = ToggleIndicatorRounded;
37
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/node/Forms/Toggle/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("./Toggle"), exports);