@koine/react 1.0.12 → 1.0.13

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 (196) hide show
  1. package/Forms/Toggle/useToggle.d.ts +1 -1
  2. package/Forms/Toggle/useToggle.js +1 -1
  3. package/package.json +6 -7
  4. package/node/Alert/Alert.js +0 -14
  5. package/node/Alert/index.js +0 -4
  6. package/node/Animations/Reveal.js +0 -21
  7. package/node/Animations/Underline.js +0 -8
  8. package/node/Animations/index.js +0 -6
  9. package/node/Animations/useReveal.js +0 -75
  10. package/node/Autocomplete/AutocompleteDownshift.js +0 -161
  11. package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
  12. package/node/Autocomplete/AutocompleteMui.js +0 -180
  13. package/node/Autocomplete/AutocompleteReach.js +0 -115
  14. package/node/Autocomplete/components.js +0 -37
  15. package/node/Autocomplete/helpers.js +0 -32
  16. package/node/Autocomplete/index.js +0 -7
  17. package/node/Bg/BgColor.js +0 -25
  18. package/node/Bg/BgPhoto.js +0 -20
  19. package/node/Bg/BgSvg.js +0 -16
  20. package/node/Bg/index.js +0 -6
  21. package/node/Breadcrumbs/Breadcrumbs.js +0 -31
  22. package/node/Breadcrumbs/index.js +0 -4
  23. package/node/Buttons/Button.js +0 -17
  24. package/node/Buttons/ButtonComposite.js +0 -32
  25. package/node/Buttons/ButtonFab.js +0 -9
  26. package/node/Buttons/ButtonLink.js +0 -15
  27. package/node/Buttons/IconButton.js +0 -10
  28. package/node/Buttons/index.js +0 -8
  29. package/node/Calendar/CalendarDaygridCell.js +0 -61
  30. package/node/Calendar/CalendarDaygridNav.js +0 -28
  31. package/node/Calendar/CalendarDaygridTable.js +0 -61
  32. package/node/Calendar/CalendarLegend.js +0 -20
  33. package/node/Calendar/calendar-api-google.js +0 -131
  34. package/node/Calendar/index.js +0 -9
  35. package/node/Calendar/types.js +0 -2
  36. package/node/Calendar/useCalendar.js +0 -187
  37. package/node/Calendar/utils.js +0 -215
  38. package/node/Carousel/Carousel.js +0 -381
  39. package/node/Carousel/CarouselCss.js +0 -27
  40. package/node/Carousel/index.js +0 -4
  41. package/node/Collapsable/Collapsable.js +0 -4
  42. package/node/Collapsable/CollapsableReach.js +0 -253
  43. package/node/Collapsable/index.js +0 -5
  44. package/node/Debug/Debug.js +0 -13
  45. package/node/Debug/index.js +0 -4
  46. package/node/Details/Details.js +0 -67
  47. package/node/Details/index.js +0 -4
  48. package/node/Dialog/DialogMui.js +0 -83
  49. package/node/Dialog/css/bare.js +0 -24
  50. package/node/Dialog/index.js +0 -5
  51. package/node/Dialog/m/bare.js +0 -55
  52. package/node/Dialog/m/basic.js +0 -35
  53. package/node/Dialog/m/index.js +0 -8
  54. package/node/Dialog/sc/bare.js +0 -46
  55. package/node/Dialog/sc/framer.js +0 -19
  56. package/node/Dialog/sc/framerMaterial.js +0 -19
  57. package/node/Dialog/sc/material.js +0 -24
  58. package/node/Dialog/tw/bare.js +0 -45
  59. package/node/Dialog/tw/elegant.js +0 -23
  60. package/node/Dialog/tw/framer.js +0 -19
  61. package/node/Dialog/tw/framerMaterial.js +0 -19
  62. package/node/Dialog/tw/material.js +0 -23
  63. package/node/Editor/Editor--tiptap.js +0 -31
  64. package/node/Editor/components.js +0 -15
  65. package/node/Editor/index.js +0 -4
  66. package/node/Favicon/FaviconTags.js +0 -19
  67. package/node/Favicon/index.js +0 -4
  68. package/node/Form/Form.js +0 -65
  69. package/node/Form/index.js +0 -4
  70. package/node/Form/sc/bare.js +0 -23
  71. package/node/Forms/Checkbox/Checkbox.js +0 -21
  72. package/node/Forms/Checkbox/index.js +0 -4
  73. package/node/Forms/Feedback/Feedback.js +0 -13
  74. package/node/Forms/Feedback/index.js +0 -4
  75. package/node/Forms/Field/Field.js +0 -52
  76. package/node/Forms/Field/FieldControl.js +0 -51
  77. package/node/Forms/Field/FieldHint.js +0 -7
  78. package/node/Forms/Field/index.js +0 -5
  79. package/node/Forms/Input/Input.js +0 -20
  80. package/node/Forms/Input/index.js +0 -4
  81. package/node/Forms/InputGroup/InputGroup.js +0 -19
  82. package/node/Forms/InputGroup/index.js +0 -4
  83. package/node/Forms/Label/Label.js +0 -9
  84. package/node/Forms/Label/index.js +0 -4
  85. package/node/Forms/Password/Password.js +0 -20
  86. package/node/Forms/Password/index.js +0 -4
  87. package/node/Forms/Radio/Radio.js +0 -28
  88. package/node/Forms/Radio/index.js +0 -4
  89. package/node/Forms/Switch/Switch.js +0 -23
  90. package/node/Forms/Switch/index.js +0 -4
  91. package/node/Forms/Textarea/Textarea.js +0 -15
  92. package/node/Forms/Textarea/TextareaRich.js +0 -31
  93. package/node/Forms/Textarea/index.js +0 -5
  94. package/node/Forms/Toggle/Toggle.js +0 -37
  95. package/node/Forms/Toggle/index.js +0 -4
  96. package/node/Forms/Toggle/useToggle.js +0 -149
  97. package/node/Forms/antispam.js +0 -61
  98. package/node/Forms/helpers.js +0 -52
  99. package/node/Forms/index.js +0 -19
  100. package/node/Forms/styles.js +0 -32
  101. package/node/Gauge/Gauge.js +0 -106
  102. package/node/Grid/Grid.js +0 -56
  103. package/node/Grid/index.js +0 -4
  104. package/node/Hamburger/Hamburger.js +0 -56
  105. package/node/Hamburger/index.js +0 -4
  106. package/node/Header/index.js +0 -4
  107. package/node/Header/useHeader.js +0 -34
  108. package/node/Hidden/Hidden.js +0 -13
  109. package/node/Hidden/index.js +0 -4
  110. package/node/Img/index.js +0 -4
  111. package/node/Img/sc/bare.js +0 -42
  112. package/node/Img/types.js +0 -2
  113. package/node/Link/Link.js +0 -7
  114. package/node/Link/LinkBlank.js +0 -21
  115. package/node/Link/index.js +0 -5
  116. package/node/Menu/Menu.js +0 -7
  117. package/node/Menu/index.js +0 -4
  118. package/node/MenuItem/MenuItem.js +0 -7
  119. package/node/MenuItem/index.js +0 -4
  120. package/node/Meta/Meta.js +0 -9
  121. package/node/Meta/index.js +0 -4
  122. package/node/NoJs/NoJs.js +0 -10
  123. package/node/NoJs/index.js +0 -4
  124. package/node/Pagination/PaginationNav.js +0 -65
  125. package/node/Pagination/PaginationResults.js +0 -15
  126. package/node/Pagination/index.js +0 -5
  127. package/node/Pill/Pill.js +0 -10
  128. package/node/Pill/index.js +0 -4
  129. package/node/Progress/ProgressCircular.js +0 -19
  130. package/node/Progress/ProgressLinear.js +0 -28
  131. package/node/Progress/ProgressOverlay.js +0 -28
  132. package/node/Progress/index.js +0 -6
  133. package/node/Rating/Rating.js +0 -76
  134. package/node/Rating/index.js +0 -57
  135. package/node/Select/SelectDownshift.js +0 -41
  136. package/node/Select/components.js +0 -15
  137. package/node/Select/index.js +0 -7
  138. package/node/Sidebar/Sidebar.js +0 -27
  139. package/node/Sidebar/index.js +0 -4
  140. package/node/Spacing/Spacing.js +0 -49
  141. package/node/Spacing/index.js +0 -4
  142. package/node/Sticky/Sticky.js +0 -222
  143. package/node/Sticky/StickyCss.js +0 -10
  144. package/node/Sticky/index.js +0 -4
  145. package/node/Tabs/TabsMui.js +0 -49
  146. package/node/Tabs/index.js +0 -4
  147. package/node/Tabs/sc/bare.js +0 -87
  148. package/node/Tabs/tw/bare.js +0 -20
  149. package/node/Tabs/tw/material.js +0 -21
  150. package/node/Tabs/useTabs.js +0 -48
  151. package/node/Typography/CopyPasteVisible.js +0 -7
  152. package/node/Typography/Native.js +0 -17
  153. package/node/Typography/ReadMore.js +0 -47
  154. package/node/Typography/TextLoop.js +0 -51
  155. package/node/Typography/TypeStairs.js +0 -53
  156. package/node/Typography/index.js +0 -8
  157. package/node/css/index.js +0 -36
  158. package/node/helpers/classed.js +0 -72
  159. package/node/helpers/extend-component.js +0 -16
  160. package/node/helpers/index.js +0 -5
  161. package/node/hooks/index.js +0 -18
  162. package/node/hooks/types.js +0 -2
  163. package/node/hooks/useAsyncFn.js +0 -40
  164. package/node/hooks/useDateLocale.js +0 -42
  165. package/node/hooks/useEffectOnce.js +0 -12
  166. package/node/hooks/useFirstMountState.js +0 -16
  167. package/node/hooks/useFocus.js +0 -15
  168. package/node/hooks/useId.js +0 -12
  169. package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
  170. package/node/hooks/useMount.js +0 -13
  171. package/node/hooks/useMountedState.js +0 -19
  172. package/node/hooks/usePrevious.js +0 -12
  173. package/node/hooks/useScrollPosition.js +0 -84
  174. package/node/hooks/useScrollTo.js +0 -25
  175. package/node/hooks/useTraceUpdate.js +0 -25
  176. package/node/hooks/useUpdateEffect.js +0 -18
  177. package/node/hooks/useWindowSize.js +0 -17
  178. package/node/index.js +0 -8
  179. package/node/m/MotionProvider.js +0 -43
  180. package/node/m/index.js +0 -9
  181. package/node/m/lite.js +0 -4
  182. package/node/m/max.js +0 -4
  183. package/node/sc/index.js +0 -37
  184. package/node/scm/index.js +0 -36
  185. package/node/shared/index.js +0 -11
  186. package/node/styles/Body.js +0 -16
  187. package/node/styles/Global.js +0 -21
  188. package/node/styles/index.js +0 -10
  189. package/node/styles/media.js +0 -160
  190. package/node/styles/spacing.js +0 -52
  191. package/node/styles/styled.js +0 -17
  192. package/node/styles/theme--vanilla.js +0 -61
  193. package/node/styles/theme.js +0 -45
  194. package/node/tw/index.js +0 -36
  195. package/node/twm/index.js +0 -36
  196. package/node/types.js +0 -2
@@ -1,19 +0,0 @@
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;
@@ -1,4 +0,0 @@
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 DELETED
@@ -1,65 +0,0 @@
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
- });
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Form"), exports);
@@ -1,23 +0,0 @@
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;
@@ -1,21 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Checkbox"), exports);
@@ -1,13 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Feedback"), exports);
@@ -1,52 +0,0 @@
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;
@@ -1,51 +0,0 @@
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;
@@ -1,7 +0,0 @@
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;
@@ -1,5 +0,0 @@
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);
@@ -1,20 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Input"), exports);
@@ -1,19 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./InputGroup"), exports);
@@ -1,9 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Label"), exports);
@@ -1,20 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Password"), exports);
@@ -1,28 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Radio"), exports);
@@ -1,23 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Switch"), exports);
@@ -1,15 +0,0 @@
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;
@@ -1,31 +0,0 @@
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;
@@ -1,5 +0,0 @@
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);
@@ -1,37 +0,0 @@
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;
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Toggle"), exports);