@koine/react 1.0.11 → 1.0.14

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 (323) hide show
  1. package/Alert/Alert.js +7 -13
  2. package/Animations/Reveal.js +12 -10
  3. package/Animations/Underline.js +3 -13
  4. package/Animations/useReveal.js +18 -17
  5. package/Autocomplete/AutocompleteDownshift.js +1 -1
  6. package/Autocomplete/AutocompleteDownshiftMultiselect.js +1 -1
  7. package/Autocomplete/AutocompleteMui.js +61 -56
  8. package/Autocomplete/AutocompleteReach.js +1 -1
  9. package/Autocomplete/components.js +17 -72
  10. package/Autocomplete/helpers.js +1 -1
  11. package/Bg/BgColor.js +14 -24
  12. package/Bg/BgPhoto.js +11 -54
  13. package/Bg/BgSvg.js +6 -9
  14. package/Breadcrumbs/Breadcrumbs.js +14 -54
  15. package/Buttons/Button.js +8 -73
  16. package/Buttons/ButtonComposite.js +20 -41
  17. package/Buttons/ButtonFab.js +4 -6
  18. package/Buttons/ButtonLink.js +7 -6
  19. package/Buttons/IconButton.js +5 -17
  20. package/Calendar/CalendarDaygridCell.js +20 -14
  21. package/Calendar/CalendarDaygridNav.js +10 -9
  22. package/Calendar/CalendarDaygridTable.js +32 -30
  23. package/Calendar/CalendarLegend.js +7 -2
  24. package/Calendar/calendar-api-google.js +101 -68
  25. package/Calendar/useCalendar.js +114 -113
  26. package/Calendar/utils.js +73 -74
  27. package/Carousel/Carousel.js +1 -1
  28. package/Carousel/CarouselCss.js +12 -26
  29. package/Collapsable/Collapsable.js +1 -1
  30. package/Debug/Debug.js +5 -17
  31. package/Details/Details.js +30 -27
  32. package/Dialog/DialogMui.js +22 -20
  33. package/Dialog/css/bare.js +17 -15
  34. package/Dialog/m/bare.js +17 -13
  35. package/Dialog/m/basic.js +2 -2
  36. package/Dialog/m/index.js +4 -4
  37. package/Dialog/sc/bare.js +25 -43
  38. package/Dialog/sc/framer.js +6 -6
  39. package/Dialog/sc/framerMaterial.js +6 -6
  40. package/Dialog/sc/material.js +17 -37
  41. package/Dialog/tw/bare.js +25 -19
  42. package/Dialog/tw/elegant.js +17 -15
  43. package/Dialog/tw/framer.js +6 -6
  44. package/Dialog/tw/framerMaterial.js +6 -6
  45. package/Dialog/tw/material.js +17 -15
  46. package/Editor/Editor--tiptap.js +14 -11
  47. package/Editor/components.js +6 -24
  48. package/Favicon/FaviconTags.js +2 -1
  49. package/Form/Form.js +30 -28
  50. package/Form/sc/bare.js +9 -18
  51. package/Forms/Checkbox/Checkbox.js +9 -15
  52. package/Forms/Feedback/Feedback.js +6 -7
  53. package/Forms/Field/Field.js +15 -26
  54. package/Forms/Field/FieldControl.js +19 -15
  55. package/Forms/Field/FieldHint.js +3 -5
  56. package/Forms/Input/Input.js +10 -16
  57. package/Forms/InputGroup/InputGroup.js +9 -36
  58. package/Forms/Label/Label.js +5 -23
  59. package/Forms/Password/Password.js +10 -23
  60. package/Forms/Radio/Radio.js +15 -18
  61. package/Forms/Switch/Switch.js +9 -39
  62. package/Forms/Textarea/Textarea.js +6 -7
  63. package/Forms/Textarea/TextareaRich.js +10 -24
  64. package/Forms/Toggle/Toggle.js +19 -67
  65. package/Forms/Toggle/useToggle.d.ts +1 -1
  66. package/Forms/Toggle/useToggle.js +30 -30
  67. package/Forms/antispam.js +12 -12
  68. package/Forms/helpers.js +7 -6
  69. package/Forms/styles.js +12 -43
  70. package/Gauge/Gauge.js +1 -1
  71. package/Grid/Grid.js +25 -51
  72. package/Hamburger/Hamburger.js +35 -47
  73. package/Header/useHeader.js +12 -12
  74. package/Hidden/Hidden.js +9 -13
  75. package/Img/sc/bare.js +3 -1
  76. package/Link/Link.js +3 -1
  77. package/Link/LinkBlank.js +8 -17
  78. package/Menu/Menu.js +3 -10
  79. package/MenuItem/MenuItem.js +3 -19
  80. package/Meta/Meta.js +3 -2
  81. package/NoJs/NoJs.js +2 -2
  82. package/Pagination/PaginationNav.js +26 -48
  83. package/Pagination/PaginationResults.js +7 -6
  84. package/Pill/Pill.js +6 -36
  85. package/Progress/ProgressCircular.js +9 -30
  86. package/Progress/ProgressLinear.js +8 -16
  87. package/Progress/ProgressOverlay.js +11 -27
  88. package/Rating/Rating.js +24 -44
  89. package/Rating/index.js +19 -15
  90. package/Select/SelectDownshift.js +1 -1
  91. package/Select/components.js +6 -12
  92. package/Sidebar/Sidebar.js +13 -38
  93. package/Spacing/Spacing.js +12 -12
  94. package/Sticky/Sticky.js +1 -1
  95. package/Sticky/StickyCss.js +4 -2
  96. package/Tabs/TabsMui.js +19 -16
  97. package/Tabs/tw/bare.js +13 -11
  98. package/Tabs/tw/material.js +15 -11
  99. package/Tabs/useTabs.js +16 -16
  100. package/Typography/CopyPasteVisible.js +3 -5
  101. package/Typography/Native.js +12 -45
  102. package/Typography/ReadMore.js +25 -51
  103. package/Typography/TextLoop.js +19 -22
  104. package/Typography/TypeStairs.js +20 -16
  105. package/helpers/classed.js +21 -18
  106. package/helpers/extend-component.js +6 -6
  107. package/hooks/useAsyncFn.js +18 -11
  108. package/hooks/useDateLocale.js +22 -13
  109. package/hooks/useEffectOnce.js +1 -1
  110. package/hooks/useFirstMountState.js +1 -1
  111. package/hooks/useFocus.js +3 -3
  112. package/hooks/useId.js +3 -2
  113. package/hooks/useIsomorphicLayoutEffect.js +1 -1
  114. package/hooks/useMount.js +2 -2
  115. package/hooks/useMountedState.js +4 -4
  116. package/hooks/usePrevious.js +2 -2
  117. package/hooks/useScrollPosition.js +20 -15
  118. package/hooks/useScrollTo.js +7 -5
  119. package/hooks/useTraceUpdate.js +4 -3
  120. package/hooks/useUpdateEffect.js +3 -3
  121. package/hooks/useWindowSize.js +3 -3
  122. package/m/MotionProvider.js +4 -2
  123. package/package.json +8 -7
  124. package/styles/Body.js +4 -8
  125. package/styles/Global.js +4 -36
  126. package/styles/media.js +41 -36
  127. package/styles/spacing.js +15 -16
  128. package/styles/styled.js +7 -21
  129. package/styles/theme--vanilla.js +20 -18
  130. package/styles/theme.js +11 -11
  131. package/node/Alert/Alert.js +0 -21
  132. package/node/Alert/index.js +0 -4
  133. package/node/Animations/Reveal.js +0 -19
  134. package/node/Animations/Underline.js +0 -19
  135. package/node/Animations/index.js +0 -6
  136. package/node/Animations/useReveal.js +0 -74
  137. package/node/Autocomplete/AutocompleteDownshift.js +0 -161
  138. package/node/Autocomplete/AutocompleteDownshiftMultiselect.js +0 -356
  139. package/node/Autocomplete/AutocompleteMui.js +0 -175
  140. package/node/Autocomplete/AutocompleteReach.js +0 -115
  141. package/node/Autocomplete/components.js +0 -93
  142. package/node/Autocomplete/helpers.js +0 -32
  143. package/node/Autocomplete/index.js +0 -7
  144. package/node/Bg/BgColor.js +0 -36
  145. package/node/Bg/BgPhoto.js +0 -64
  146. package/node/Bg/BgSvg.js +0 -20
  147. package/node/Bg/index.js +0 -6
  148. package/node/Breadcrumbs/Breadcrumbs.js +0 -72
  149. package/node/Breadcrumbs/index.js +0 -4
  150. package/node/Buttons/Button.js +0 -83
  151. package/node/Buttons/ButtonComposite.js +0 -54
  152. package/node/Buttons/ButtonFab.js +0 -12
  153. package/node/Buttons/ButtonLink.js +0 -15
  154. package/node/Buttons/IconButton.js +0 -23
  155. package/node/Buttons/index.js +0 -8
  156. package/node/Calendar/CalendarDaygridCell.js +0 -55
  157. package/node/Calendar/CalendarDaygridNav.js +0 -27
  158. package/node/Calendar/CalendarDaygridTable.js +0 -60
  159. package/node/Calendar/CalendarLegend.js +0 -15
  160. package/node/Calendar/calendar-api-google.js +0 -99
  161. package/node/Calendar/index.js +0 -9
  162. package/node/Calendar/types.js +0 -2
  163. package/node/Calendar/useCalendar.js +0 -186
  164. package/node/Calendar/utils.js +0 -217
  165. package/node/Carousel/Carousel.js +0 -381
  166. package/node/Carousel/CarouselCss.js +0 -42
  167. package/node/Carousel/index.js +0 -4
  168. package/node/Collapsable/Collapsable.js +0 -4
  169. package/node/Collapsable/CollapsableReach.js +0 -253
  170. package/node/Collapsable/index.js +0 -5
  171. package/node/Debug/Debug.js +0 -26
  172. package/node/Debug/index.js +0 -4
  173. package/node/Details/Details.js +0 -65
  174. package/node/Details/index.js +0 -4
  175. package/node/Dialog/DialogMui.js +0 -82
  176. package/node/Dialog/css/bare.js +0 -23
  177. package/node/Dialog/index.js +0 -5
  178. package/node/Dialog/m/bare.js +0 -51
  179. package/node/Dialog/m/basic.js +0 -35
  180. package/node/Dialog/m/index.js +0 -8
  181. package/node/Dialog/sc/bare.js +0 -65
  182. package/node/Dialog/sc/framer.js +0 -19
  183. package/node/Dialog/sc/framerMaterial.js +0 -19
  184. package/node/Dialog/sc/material.js +0 -45
  185. package/node/Dialog/tw/bare.js +0 -40
  186. package/node/Dialog/tw/elegant.js +0 -21
  187. package/node/Dialog/tw/framer.js +0 -19
  188. package/node/Dialog/tw/framerMaterial.js +0 -19
  189. package/node/Dialog/tw/material.js +0 -21
  190. package/node/Editor/Editor--tiptap.js +0 -29
  191. package/node/Editor/components.js +0 -34
  192. package/node/Editor/index.js +0 -4
  193. package/node/Favicon/FaviconTags.js +0 -18
  194. package/node/Favicon/index.js +0 -4
  195. package/node/Form/Form.js +0 -63
  196. package/node/Form/index.js +0 -4
  197. package/node/Form/sc/bare.js +0 -33
  198. package/node/Forms/Checkbox/Checkbox.js +0 -28
  199. package/node/Forms/Checkbox/index.js +0 -4
  200. package/node/Forms/Feedback/Feedback.js +0 -15
  201. package/node/Forms/Feedback/index.js +0 -4
  202. package/node/Forms/Field/Field.js +0 -64
  203. package/node/Forms/Field/FieldControl.js +0 -47
  204. package/node/Forms/Field/FieldHint.js +0 -10
  205. package/node/Forms/Field/index.js +0 -5
  206. package/node/Forms/Input/Input.js +0 -27
  207. package/node/Forms/Input/index.js +0 -4
  208. package/node/Forms/InputGroup/InputGroup.js +0 -47
  209. package/node/Forms/InputGroup/index.js +0 -4
  210. package/node/Forms/Label/Label.js +0 -28
  211. package/node/Forms/Label/index.js +0 -4
  212. package/node/Forms/Password/Password.js +0 -34
  213. package/node/Forms/Password/index.js +0 -4
  214. package/node/Forms/Radio/Radio.js +0 -32
  215. package/node/Forms/Radio/index.js +0 -4
  216. package/node/Forms/Switch/Switch.js +0 -54
  217. package/node/Forms/Switch/index.js +0 -4
  218. package/node/Forms/Textarea/Textarea.js +0 -17
  219. package/node/Forms/Textarea/TextareaRich.js +0 -46
  220. package/node/Forms/Textarea/index.js +0 -5
  221. package/node/Forms/Toggle/Toggle.js +0 -86
  222. package/node/Forms/Toggle/index.js +0 -4
  223. package/node/Forms/Toggle/useToggle.js +0 -149
  224. package/node/Forms/antispam.js +0 -61
  225. package/node/Forms/helpers.js +0 -51
  226. package/node/Forms/index.js +0 -19
  227. package/node/Forms/styles.js +0 -64
  228. package/node/Gauge/Gauge.js +0 -106
  229. package/node/Grid/Grid.js +0 -83
  230. package/node/Grid/index.js +0 -4
  231. package/node/Hamburger/Hamburger.js +0 -69
  232. package/node/Hamburger/index.js +0 -4
  233. package/node/Header/index.js +0 -4
  234. package/node/Header/useHeader.js +0 -34
  235. package/node/Hidden/Hidden.js +0 -18
  236. package/node/Hidden/index.js +0 -4
  237. package/node/Img/index.js +0 -4
  238. package/node/Img/sc/bare.js +0 -41
  239. package/node/Img/types.js +0 -2
  240. package/node/Link/Link.js +0 -6
  241. package/node/Link/LinkBlank.js +0 -31
  242. package/node/Link/index.js +0 -5
  243. package/node/Menu/Menu.js +0 -15
  244. package/node/Menu/index.js +0 -4
  245. package/node/MenuItem/MenuItem.js +0 -24
  246. package/node/MenuItem/index.js +0 -4
  247. package/node/Meta/Meta.js +0 -8
  248. package/node/Meta/index.js +0 -4
  249. package/node/NoJs/NoJs.js +0 -10
  250. package/node/NoJs/index.js +0 -4
  251. package/node/Pagination/PaginationNav.js +0 -88
  252. package/node/Pagination/PaginationResults.js +0 -15
  253. package/node/Pagination/index.js +0 -5
  254. package/node/Pill/Pill.js +0 -41
  255. package/node/Pill/index.js +0 -4
  256. package/node/Progress/ProgressCircular.js +0 -41
  257. package/node/Progress/ProgressLinear.js +0 -37
  258. package/node/Progress/ProgressOverlay.js +0 -45
  259. package/node/Progress/index.js +0 -6
  260. package/node/Rating/Rating.js +0 -97
  261. package/node/Rating/index.js +0 -53
  262. package/node/Select/SelectDownshift.js +0 -41
  263. package/node/Select/components.js +0 -22
  264. package/node/Select/index.js +0 -7
  265. package/node/Sidebar/Sidebar.js +0 -53
  266. package/node/Sidebar/index.js +0 -4
  267. package/node/Spacing/Spacing.js +0 -50
  268. package/node/Spacing/index.js +0 -4
  269. package/node/Sticky/Sticky.js +0 -222
  270. package/node/Sticky/StickyCss.js +0 -8
  271. package/node/Sticky/index.js +0 -4
  272. package/node/Tabs/TabsMui.js +0 -47
  273. package/node/Tabs/index.js +0 -4
  274. package/node/Tabs/sc/bare.js +0 -87
  275. package/node/Tabs/tw/bare.js +0 -19
  276. package/node/Tabs/tw/material.js +0 -17
  277. package/node/Tabs/useTabs.js +0 -48
  278. package/node/Typography/CopyPasteVisible.js +0 -10
  279. package/node/Typography/Native.js +0 -51
  280. package/node/Typography/ReadMore.js +0 -74
  281. package/node/Typography/TextLoop.js +0 -54
  282. package/node/Typography/TypeStairs.js +0 -49
  283. package/node/Typography/index.js +0 -8
  284. package/node/css/index.js +0 -36
  285. package/node/helpers/classed.js +0 -69
  286. package/node/helpers/extend-component.js +0 -16
  287. package/node/helpers/index.js +0 -5
  288. package/node/hooks/index.js +0 -18
  289. package/node/hooks/types.js +0 -2
  290. package/node/hooks/useAsyncFn.js +0 -33
  291. package/node/hooks/useDateLocale.js +0 -56
  292. package/node/hooks/useEffectOnce.js +0 -12
  293. package/node/hooks/useFirstMountState.js +0 -16
  294. package/node/hooks/useFocus.js +0 -15
  295. package/node/hooks/useId.js +0 -11
  296. package/node/hooks/useIsomorphicLayoutEffect.js +0 -11
  297. package/node/hooks/useMount.js +0 -13
  298. package/node/hooks/useMountedState.js +0 -19
  299. package/node/hooks/usePrevious.js +0 -12
  300. package/node/hooks/useScrollPosition.js +0 -79
  301. package/node/hooks/useScrollTo.js +0 -23
  302. package/node/hooks/useTraceUpdate.js +0 -24
  303. package/node/hooks/useUpdateEffect.js +0 -18
  304. package/node/hooks/useWindowSize.js +0 -17
  305. package/node/index.js +0 -8
  306. package/node/m/MotionProvider.js +0 -41
  307. package/node/m/index.js +0 -9
  308. package/node/m/lite.js +0 -4
  309. package/node/m/max.js +0 -4
  310. package/node/sc/index.js +0 -37
  311. package/node/scm/index.js +0 -36
  312. package/node/shared/index.js +0 -11
  313. package/node/styles/Body.js +0 -21
  314. package/node/styles/Global.js +0 -53
  315. package/node/styles/index.js +0 -10
  316. package/node/styles/media.js +0 -156
  317. package/node/styles/spacing.js +0 -53
  318. package/node/styles/styled.js +0 -31
  319. package/node/styles/theme--vanilla.js +0 -59
  320. package/node/styles/theme.js +0 -45
  321. package/node/tw/index.js +0 -36
  322. package/node/twm/index.js +0 -36
  323. package/node/types.js +0 -2
package/node/Editor/components.js DELETED
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.EditorGlobalStyles = exports.EditorBarBtn = exports.EditorBarRoot = exports.EditorRoot = exports.EditorIconItalic = exports.EditorIconBold = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importStar(require("styled-components"));
6
- const IconButton_1 = require("../Buttons/IconButton");
7
- const styles_1 = require("../Forms/styles");
8
- var md_1 = require("react-icons/md");
9
- Object.defineProperty(exports, "EditorIconBold", { enumerable: true, get: function () { return md_1.MdFormatBold; } });
10
- Object.defineProperty(exports, "EditorIconItalic", { enumerable: true, get: function () { return md_1.MdFormatItalic; } });
11
- exports.EditorRoot = styled_components_1.default.div `
12
- ${styles_1.inputBorder}
13
- ${styles_1.inputFocus}
14
- `;
15
- exports.EditorBarRoot = styled_components_1.default.div `
16
- display: flex;
17
- justify-content: flex-end;
18
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
19
- /* background: var(--grey900); */
20
- `;
21
- exports.EditorBarBtn = (0, styled_components_1.default)(IconButton_1.IconButton) ``;
22
- exports.EditorGlobalStyles = (0, styled_components_1.createGlobalStyle) `
23
- .ProseMirror {
24
- ${styles_1.inputPadding}
25
-
26
- &:focus {
27
- outline:none;
28
- }
29
-
30
- > *:first-child {
31
- margin-top: 0;
32
- }
33
- }
34
- `;
package/node/Editor/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Editor--tiptap"), exports);
package/node/Favicon/FaviconTags.js DELETED
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FaviconTags = void 0;
4
- const 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
- const FaviconTags = ({ name, color, safariTabColor, tileColor, themeColor, }) => {
16
- 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 })] }));
17
- };
18
- exports.FaviconTags = FaviconTags;
package/node/Favicon/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./FaviconTags"), exports);
package/node/Form/Form.js DELETED
@@ -1,63 +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
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- // import { type MotionProps } from "framer-motion";
7
- const helpers_1 = require("../helpers");
8
- exports.Root = "form";
9
- exports.Overlay = "div";
10
- exports.Progress = "div";
11
- exports.Collapsable = "div";
12
- exports.Ok = null;
13
- exports.Fail = null;
14
- const Form = ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps = {
15
- children: "Sent!",
16
- }, Fail: _Fail, failProps = {
17
- children: "Failed.",
18
- }, collapseOnOk, collapseOnFail, okTimeout = 3000, failTimeout = 3000, children, ...props }) => {
19
- const [open, setOpen] = (0, react_1.useState)("");
20
- const commonProps = {
21
- head: null,
22
- components: {
23
- HeadIcon: null,
24
- },
25
- };
26
- (0, react_1.useEffect)(() => {
27
- if (!loading) {
28
- if (ok)
29
- setOpen("ok");
30
- else if (fail)
31
- setOpen("fail");
32
- }
33
- }, [ok, fail, loading]);
34
- (0, react_1.useEffect)(() => {
35
- let timeout;
36
- if (open === "fail" && failTimeout) {
37
- timeout = setTimeout(() => setOpen(""), failTimeout);
38
- }
39
- else if (open === "ok" && okTimeout) {
40
- timeout = setTimeout(() => setOpen(""), okTimeout);
41
- }
42
- return () => {
43
- if (timeout) {
44
- clearTimeout(timeout);
45
- }
46
- };
47
- }, [open, failTimeout, okTimeout]);
48
- let formExpanded = true;
49
- if (collapseOnFail && fail)
50
- formExpanded = false;
51
- if (collapseOnOk && ok)
52
- formExpanded = false;
53
- return ((0, jsx_runtime_1.jsxs)(exports.Root, { method: "post", noValidate: true, ...props, children: [(0, jsx_runtime_1.jsx)(exports.Collapsable, { ...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, { ...commonProps, "$open": open === "ok" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Ok, { ...okProps }) }), (0, jsx_runtime_1.jsx)(exports.Collapsable, { ...commonProps, "$open": open === "fail" && !loading, body: (0, jsx_runtime_1.jsx)(exports.Fail, { ...failProps }) })] }));
54
- };
55
- exports.Form = Form;
56
- exports.KoineForm = (0, helpers_1.extendComponent)(exports.Form, {
57
- Root: exports.Root,
58
- Overlay: exports.Overlay,
59
- Progress: exports.Progress,
60
- Collapsable: exports.Collapsable,
61
- Ok: exports.Ok,
62
- Fail: exports.Fail,
63
- });
package/node/Form/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Form"), exports);
package/node/Form/sc/bare.js DELETED
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.KoineForm = exports.Feedback = exports.Overlay = exports.Root = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- const styled_1 = require("../../styles/styled");
7
- const Collapsable_1 = require("../../Collapsable");
8
- const Progress_1 = require("../../Progress");
9
- const Alert_1 = require("../../Alert");
10
- const helpers_1 = require("../../helpers");
11
- const _ = tslib_1.__importStar(require("../Form"));
12
- exports.Root = (0, styled_components_1.default)(_.Root) `
13
- position: relative;
14
- `;
15
- exports.Overlay = (0, styled_components_1.default)(_.Overlay) `
16
- z-index: 4;
17
- ${styled_1.overlay}
18
- ${styled_1.centered}
19
- background: rgba(var(--bodyBg--rgb),.8);
20
- pointer-events: none;
21
- backdrop-filter: blur(2px);
22
- `;
23
- exports.Feedback = (0, styled_components_1.default)(Alert_1.Alert) `
24
- padding: 2em 0;
25
- `;
26
- exports.KoineForm = (0, helpers_1.extendComponent)(_.KoineForm, {
27
- Root: exports.Root,
28
- Overlay: exports.Overlay,
29
- Progress: Progress_1.ProgressCircular,
30
- Collapsable: Collapsable_1.Collapsable,
31
- Ok: exports.Feedback,
32
- Fail: exports.Feedback,
33
- });
package/node/Forms/Checkbox/Checkbox.js DELETED
@@ -1,28 +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
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const Toggle_1 = require("../Toggle");
9
- const useToggle_1 = require("../Toggle/useToggle");
10
- exports.CheckboxRoot = styled_components_1.default.label `
11
- display: flex;
12
- align-items: center;
13
- cursor: pointer;
14
- `;
15
- exports.CheckboxToggle = (0, styled_components_1.default)(Toggle_1.Toggle) `
16
- pointer-events: none;
17
- `;
18
- exports.CheckboxIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
19
- exports.CheckboxLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) `
20
- font-size: 0.8em;
21
- `;
22
- /**
23
- * All logic and invisible Inputs come from the `useToggle` hook
24
- */
25
- exports.Checkbox = (0, react_1.forwardRef)(function Checkbox(props, ref) {
26
- const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
27
- return ((0, jsx_runtime_1.jsxs)(exports.CheckboxRoot, { ...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 })] }));
28
- });
package/node/Forms/Checkbox/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Checkbox"), exports);
package/node/Forms/Feedback/Feedback.js DELETED
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Feedback = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const Root = styled_components_1.default.div `
8
- margin-top: 0.2em;
9
- font-size: 12px;
10
- ${(p) => (p.$danger ? `color: var(--danger);` : "")}
11
- `;
12
- const Feedback = ({ $danger, children }) => {
13
- return ((0, jsx_runtime_1.jsx)(Root, { role: "alert", "$danger": $danger, children: children }));
14
- };
15
- exports.Feedback = Feedback;
package/node/Forms/Feedback/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Feedback"), exports);
package/node/Forms/Field/Field.js DELETED
@@ -1,64 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Field = exports.FieldRoot = exports.FieldBase = exports.field = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importStar(require("styled-components"));
7
- const Feedback_1 = require("../Feedback");
8
- exports.field = (0, styled_components_1.css) `
9
- padding-bottom: 20px;
10
- `;
11
- exports.FieldBase = styled_components_1.default.div `
12
- ${exports.field}
13
- `;
14
- exports.FieldRoot = (0, styled_components_1.default)(exports.FieldBase) `
15
- ${(p) => {
16
- return (p.$danger &&
17
- `
18
- color: var(--danger);
19
-
20
- textarea,
21
- input,
22
- select {
23
- color: var(--danger);
24
- }
25
- `);
26
- }}
27
- `;
28
- /**
29
- * Yup's errors produce by these validations:
30
- *
31
- * ```
32
- * email: string().email().required(),
33
- * name: string().required()
34
- * ```
35
- *
36
- * determine the `error.type` of the `FieldError` to be "required" and "email".
37
- * We assume these as standard translations keys without needing to pass
38
- * a string into the validation, e.g. `required("mySpecialKey")`.
39
- */
40
- const YUP_ERROR_TYPES_AS_KEYS = {
41
- required: 1,
42
- email: 1,
43
- };
44
- const Field = ({ name, t, error, errors, children, ...props }) => {
45
- const err = errors && name ? errors[name] : error;
46
- let msg = "";
47
- if (err) {
48
- if (name && t && err.type !== "plain") {
49
- const translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
50
- msg = t(`errors.${name}.${translationKey || err.message}`);
51
- }
52
- else {
53
- msg = err.message;
54
- }
55
- }
56
- // dynamic i18n namespace loading does not seem to work yet
57
- // const t = useT("core.Forms");
58
- // const { locale } = useRouter();
59
- // useEffect(() => {
60
- // i18n.addResourceBundle(locale, "core.Forms", null);
61
- // }, []);
62
- return ((0, jsx_runtime_1.jsxs)(exports.FieldRoot, { "$danger": !!err, ...props, children: [children, msg && (0, jsx_runtime_1.jsx)(Feedback_1.Feedback, { "$danger": true, children: msg })] }));
63
- };
64
- exports.Field = Field;
package/node/Forms/Field/FieldControl.js DELETED
@@ -1,47 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FieldControl = void 0;
4
- const jsx_runtime_1 = require("react/jsx-runtime");
5
- const react_1 = require("react");
6
- const react_hook_form_1 = require("react-hook-form");
7
- const utils_1 = require("@koine/utils");
8
- const Field_1 = require("./Field");
9
- const FieldHint_1 = require("./FieldHint");
10
- const styles_1 = require("../styles");
11
- /**
12
- *
13
- * - it expects the `field` object from our `useForm` wrapper around react-hook-form
14
- * - automatically get translated strings from the given `t` function` for the
15
- * field `label`, `placeholder` and `errors`. The .json expected by the `t` function
16
- * look like this:
17
- *
18
- * ```json
19
- * ```
20
- */
21
- const FieldControl = ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError = true, children, encode, ...props }) => {
22
- const name = encode ? (0, utils_1.decode)(maybeEncodedName) : maybeEncodedName;
23
- const { errors } = (0, react_hook_form_1.useFormState)({ name, control });
24
- const error = showError && errors[name] ? errors[name] : null;
25
- const FormFieldContent = (0, react_1.useMemo)(() => children({
26
- control,
27
- register,
28
- setValue,
29
- name: maybeEncodedName,
30
- // @see https://github.com/vinissimus/next-translate/pull/461
31
- // @see https://github.com/vinissimus/next-translate/issues/429
32
- label: label || t(`labels.${name}`, undefined, { default: "" }),
33
- placeholder: placeholder || t(`placeholders.${name}`, undefined, { fallback: "" }),
34
- }), [
35
- children,
36
- control,
37
- register,
38
- setValue,
39
- name,
40
- label,
41
- t,
42
- maybeEncodedName,
43
- placeholder,
44
- ]);
45
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Field_1.Field, { 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, { ...register(name) })] }));
46
- };
47
- exports.FieldControl = FieldControl;
package/node/Forms/Field/FieldHint.js DELETED
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FieldHint = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.FieldHint = styled_components_1.default.div `
7
- padding-top: 0.6em;
8
- opacity: 0.7;
9
- font-size: 75%;
10
- `;
package/node/Forms/Field/index.js DELETED
@@ -1,5 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Field"), exports);
5
- tslib_1.__exportStar(require("./FieldControl"), exports);
package/node/Forms/Input/Input.js DELETED
@@ -1,27 +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
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const Label_1 = require("../Label/Label");
9
- const styles_1 = require("../styles");
10
- exports.InputWrap = styled_components_1.default.div `
11
- display: flex;
12
- align-items: center;
13
- justify-content: space-between;
14
- `;
15
- exports.InputMain = styled_components_1.default.div `
16
- flex: 1;
17
- `;
18
- exports.InputPre = styled_components_1.default.div ``;
19
- exports.InputPost = styled_components_1.default.div ``;
20
- exports.InputNative = styled_components_1.default.input `
21
- ${styles_1.inputBase}
22
- ${styles_1.inputFocus}
23
- `;
24
- exports.Input = (0, react_1.forwardRef)(function Input({ register, name, label, ...props }, ref) {
25
- // console.log("Input: render");
26
- 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, { ...(register ? register(name) : { name, ref }), ...props })] }));
27
- });
package/node/Forms/Input/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Input"), exports);
package/node/Forms/InputGroup/InputGroup.js DELETED
@@ -1,47 +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
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
7
- const Buttons_1 = require("../../Buttons");
8
- const Field_1 = require("../Field");
9
- const media_1 = require("../../styles/media");
10
- exports.InputGroupRoot = styled_components_1.default.div `
11
- ${Field_1.field}
12
- display: flex;
13
- ${media_1.max.sm} {
14
- flex-direction: column;
15
- }
16
- `;
17
- exports.InputGroupMain = styled_components_1.default.div `
18
- flex: 1;
19
- `;
20
- exports.InputGroupButtonPre = (0, styled_components_1.default)(Buttons_1.KoineButton) `
21
- ${media_1.max.sm} {
22
- border-bottom: 0;
23
- border-bottom-left-radius: 0;
24
- border-bottom-right-radius: 0;
25
- }
26
- ${media_1.min.sm} {
27
- border-right: 0;
28
- border-top-right-radius: 0;
29
- border-bottom-right-radius: 0;
30
- }
31
- `;
32
- exports.InputGroupButtonPost = (0, styled_components_1.default)(Buttons_1.KoineButton) `
33
- ${media_1.max.sm} {
34
- border-top: 0;
35
- border-top-left-radius: 0;
36
- border-top-right-radius: 0;
37
- }
38
- ${media_1.min.sm} {
39
- border-left: 0;
40
- border-top-left-radius: 0;
41
- border-bottom-left-radius: 0;
42
- }
43
- `;
44
- const InputGroup = ({ pre, post, Button = Buttons_1.KoineButton, btnProps = {}, children, ...props }) => {
45
- return ((0, jsx_runtime_1.jsxs)(exports.InputGroupRoot, { ...props, children: [pre && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPre, { as: Button, ...btnProps }), (0, jsx_runtime_1.jsx)(exports.InputGroupMain, { children: children }), post && (0, jsx_runtime_1.jsx)(exports.InputGroupButtonPost, { as: Button, ...btnProps })] }));
46
- };
47
- exports.InputGroup = InputGroup;
package/node/Forms/InputGroup/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./InputGroup"), exports);
package/node/Forms/Label/Label.js DELETED
@@ -1,28 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Label = exports.labelMaterial = exports.label = void 0;
4
- const tslib_1 = require("tslib");
5
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
6
- exports.label = `
7
- display: flex;
8
- font-size: 13px;
9
- cursor: pointer;
10
- `;
11
- exports.labelMaterial = `
12
- z-index: 2;
13
- position: relative;
14
- display: inline-block;
15
- padding: 0 5px;
16
- font-weight: 100;
17
- font-size: 10px;
18
- background: var(--bodyBg);
19
- transform: translateY(-0.3em) translateX(1em);
20
- cursor: pointer;
21
-
22
- + * {
23
- margin-top: -1em;
24
- }
25
- `;
26
- exports.Label = styled_components_1.default.label `
27
- ${exports.labelMaterial}
28
- `;
package/node/Forms/Label/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Label"), exports);
package/node/Forms/Password/Password.js DELETED
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Password = exports.PasswordInputNative = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const im_1 = require("react-icons/im");
9
- const Label_1 = require("../Label/Label");
10
- const Input_1 = require("../Input/Input");
11
- const ICON_WIDTH = "2em";
12
- const PasswordInputWrap = styled_components_1.default.div `
13
- position: relative;
14
- `;
15
- exports.PasswordInputNative = (0, styled_components_1.default)(Input_1.InputNative) `
16
- position: relative;
17
- padding-right: ${ICON_WIDTH};
18
- `;
19
- const PasswordIcon = styled_components_1.default.span `
20
- position: absolute;
21
- top: 0;
22
- right: 0;
23
- bottom: 0;
24
- width: ${ICON_WIDTH};
25
- display: flex;
26
- align-items: center;
27
- justify-content: center;
28
- cursor: pointer;
29
- opacity: 0.5;
30
- `;
31
- exports.Password = (0, react_1.forwardRef)(function Password({ register, name, label, ...props }, ref) {
32
- const [visible, setVisible] = (0, react_1.useState)(false);
33
- 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, { type: visible ? "text" : "password", autoComplete: "new-password", ...(register ? register(name) : { name, ref }), ...props }), (0, jsx_runtime_1.jsx)(PasswordIcon, { onClick: () => setVisible((prev) => !prev), children: visible ? (0, jsx_runtime_1.jsx)(im_1.ImEyeBlocked, {}) : (0, jsx_runtime_1.jsx)(im_1.ImEye, {}) })] })] }));
34
- });
package/node/Forms/Password/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Password"), exports);
package/node/Forms/Radio/Radio.js DELETED
@@ -1,32 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Radio = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const Label_1 = require("../Label/Label");
9
- const Toggle_1 = require("../Toggle");
10
- const styles_1 = require("../styles");
11
- const RadioRoot = styled_components_1.default.div ``;
12
- const RadioLabel = styled_components_1.default.div `
13
- ${Label_1.label}
14
- `;
15
- const RadioOptionRoot = styled_components_1.default.label `
16
- display: flex;
17
- align-items: center;
18
- padding: 0.05em;
19
- cursor: pointer;
20
- `;
21
- const RadioToggle = (0, styled_components_1.default)(Toggle_1.Toggle) ``;
22
- const RadioIndicator = (0, styled_components_1.default)(Toggle_1.ToggleIndicatorSquared) ``;
23
- const RadioOptionLabel = (0, styled_components_1.default)(Toggle_1.ToggleLabel) ``;
24
- const RadioOption = (0, react_1.forwardRef)(function RadioOption({ register, name, label, $ref, ...props }, ref) {
25
- const inputProps = register ? register(name) : { name, ref: $ref || ref };
26
- return ((0, jsx_runtime_1.jsxs)(RadioOptionRoot, { children: [(0, jsx_runtime_1.jsxs)(RadioToggle, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, { type: "radio", ...inputProps, ...props }), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] }), (0, jsx_runtime_1.jsx)(RadioOptionLabel, { children: label })] }));
27
- });
28
- exports.Radio = (0, react_1.forwardRef)(function Radio({ label, options, ...props }, ref) {
29
- if (!options)
30
- return null;
31
- return ((0, jsx_runtime_1.jsxs)(RadioRoot, { children: [label && (0, jsx_runtime_1.jsx)(RadioLabel, { children: label }), options.map((option, idx) => ((0, jsx_runtime_1.jsx)(RadioOption, { ...option, ...props, "$ref": ref }, idx)))] }));
32
- });
package/node/Forms/Radio/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Radio"), exports);
package/node/Forms/Switch/Switch.js DELETED
@@ -1,54 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Switch = exports.SwitchHandle = exports.SwitchTrack = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const Checkbox_1 = require("../Checkbox");
9
- const Toggle_1 = require("../Toggle");
10
- const useToggle_1 = require("../Toggle/useToggle");
11
- const styled_1 = require("../../styles/styled");
12
- const SWITCH_GUTTER = 0.25;
13
- const SWITCH_HANDLE_SIZE = 1;
14
- exports.SwitchTrack = styled_components_1.default.span `
15
- position: relative;
16
- width: ${SWITCH_HANDLE_SIZE * 3}em;
17
- height: ${SWITCH_HANDLE_SIZE * 1.5}em;
18
- padding: ${SWITCH_GUTTER}em;
19
- border-radius: ${SWITCH_HANDLE_SIZE}em;
20
- ${Toggle_1.toggleBase}
21
-
22
- input:focus ~ & {
23
- ${styled_1.stateFocus}
24
- }
25
-
26
- input:disabled ~ & {
27
- opacity: 0.5;
28
- cursor: not-allowed;
29
- }
30
- `;
31
- exports.SwitchHandle = styled_components_1.default.span `
32
- position: absolute;
33
- width: ${SWITCH_HANDLE_SIZE}em;
34
- height: ${SWITCH_HANDLE_SIZE}em;
35
- left: ${SWITCH_GUTTER}em;
36
- margin-top: -1px;
37
- /* border: 1px solid currentColor; */
38
- background: currentColor;
39
- opacity: 0.5;
40
- border-radius: 100%;
41
- transition: all 0.18s ease-in-out;
42
-
43
- input:checked + ${exports.SwitchTrack} & {
44
- opacity: 1;
45
- left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
46
- }
47
- `;
48
- /**
49
- * All logic and invisible Inputs come from the `useToggle` hook
50
- */
51
- exports.Switch = (0, react_1.forwardRef)(function Switch(props, ref) {
52
- const { rootProps, Inputs, label } = (0, useToggle_1.useToggle)(props, ref);
53
- return ((0, jsx_runtime_1.jsxs)(Checkbox_1.CheckboxRoot, { ...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 })] }));
54
- });
package/node/Forms/Switch/index.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./Switch"), exports);
package/node/Forms/Textarea/Textarea.js DELETED
@@ -1,17 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Textarea = exports.TextareaNative = void 0;
4
- const tslib_1 = require("tslib");
5
- const jsx_runtime_1 = require("react/jsx-runtime");
6
- const react_1 = require("react");
7
- const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- const Label_1 = require("../Label/Label");
9
- const styles_1 = require("../styles");
10
- exports.TextareaNative = styled_components_1.default.textarea `
11
- ${styles_1.inputBase}
12
- ${styles_1.inputFocus}
13
- resize: vertical;
14
- `;
15
- exports.Textarea = (0, react_1.forwardRef)(function Textarea({ register, name, label, ...props }, ref) {
16
- 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, { ...(register ? register(name) : { name, ref }), ...props })] }));
17
- });