@koine/react 1.0.10 → 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.
- package/Alert/Alert.d.ts +5 -0
- package/Alert/Alert.js +10 -0
- package/Alert/index.d.ts +1 -0
- package/Alert/index.js +1 -0
- package/Alert/package.json +6 -0
- package/Animations/Reveal.d.ts +4 -0
- package/Animations/Reveal.js +17 -0
- package/Animations/Underline.d.ts +1 -0
- package/Animations/Underline.js +5 -0
- package/Animations/index.d.ts +3 -0
- package/Animations/index.js +3 -0
- package/Animations/package.json +6 -0
- package/Animations/useReveal.d.ts +33 -0
- package/Animations/useReveal.js +71 -0
- package/Autocomplete/AutocompleteDownshift.d.ts +1 -0
- package/Autocomplete/AutocompleteDownshift.js +158 -0
- package/Autocomplete/AutocompleteDownshiftMultiselect.d.ts +1 -0
- package/Autocomplete/AutocompleteDownshiftMultiselect.js +353 -0
- package/Autocomplete/AutocompleteMui.d.ts +47 -0
- package/Autocomplete/AutocompleteMui.js +182 -0
- package/Autocomplete/AutocompleteReach.d.ts +1 -0
- package/Autocomplete/AutocompleteReach.js +112 -0
- package/Autocomplete/components.d.ts +21 -0
- package/Autocomplete/components.js +34 -0
- package/Autocomplete/helpers.d.ts +3 -0
- package/Autocomplete/helpers.js +28 -0
- package/Autocomplete/index.d.ts +2 -0
- package/Autocomplete/index.js +3 -0
- package/Autocomplete/package.json +6 -0
- package/Bg/BgColor.d.ts +36 -0
- package/Bg/BgColor.js +21 -0
- package/Bg/BgPhoto.d.ts +13 -0
- package/Bg/BgPhoto.js +16 -0
- package/Bg/BgSvg.d.ts +7 -0
- package/Bg/BgSvg.js +12 -0
- package/Bg/index.d.ts +3 -0
- package/Bg/index.js +3 -0
- package/Bg/package.json +6 -0
- package/Breadcrumbs/Breadcrumbs.d.ts +13 -0
- package/Breadcrumbs/Breadcrumbs.js +27 -0
- package/Breadcrumbs/index.d.ts +1 -0
- package/Breadcrumbs/index.js +1 -0
- package/Breadcrumbs/package.json +6 -0
- package/Buttons/Button.d.ts +18 -0
- package/Buttons/Button.js +14 -0
- package/Buttons/ButtonComposite.d.ts +23 -0
- package/Buttons/ButtonComposite.js +28 -0
- package/Buttons/ButtonFab.d.ts +7 -0
- package/Buttons/ButtonFab.js +6 -0
- package/Buttons/ButtonLink.d.ts +8 -0
- package/Buttons/ButtonLink.js +11 -0
- package/Buttons/IconButton.d.ts +11 -0
- package/Buttons/IconButton.js +7 -0
- package/Buttons/index.d.ts +5 -0
- package/Buttons/index.js +5 -0
- package/Buttons/package.json +6 -0
- package/Calendar/CalendarDaygridCell.d.ts +36 -0
- package/Calendar/CalendarDaygridCell.js +57 -0
- package/Calendar/CalendarDaygridNav.d.ts +27 -0
- package/Calendar/CalendarDaygridNav.js +23 -0
- package/Calendar/CalendarDaygridTable.d.ts +25 -0
- package/Calendar/CalendarDaygridTable.js +57 -0
- package/Calendar/CalendarLegend.d.ts +19 -0
- package/Calendar/CalendarLegend.js +16 -0
- package/Calendar/calendar-api-google.d.ts +18 -0
- package/Calendar/calendar-api-google.js +127 -0
- package/Calendar/index.d.ts +6 -0
- package/Calendar/index.js +6 -0
- package/Calendar/package.json +6 -0
- package/Calendar/types.d.ts +81 -0
- package/Calendar/types.js +1 -0
- package/Calendar/useCalendar.d.ts +49 -0
- package/Calendar/useCalendar.js +183 -0
- package/Calendar/utils.d.ts +11 -0
- package/Calendar/utils.js +202 -0
- package/Carousel/Carousel.d.ts +1 -0
- package/Carousel/Carousel.js +378 -0
- package/Carousel/CarouselCss.d.ts +47 -0
- package/Carousel/CarouselCss.js +23 -0
- package/Carousel/index.d.ts +1 -0
- package/Carousel/index.js +1 -0
- package/Carousel/package.json +6 -0
- package/Collapsable/Collapsable.d.ts +1 -0
- package/Collapsable/Collapsable.js +1 -0
- package/Collapsable/CollapsableReach.d.ts +6 -0
- package/Collapsable/CollapsableReach.js +253 -0
- package/Collapsable/index.d.ts +1 -0
- package/Collapsable/index.js +2 -0
- package/Collapsable/package.json +6 -0
- package/Debug/Debug.d.ts +4 -0
- package/Debug/Debug.js +9 -0
- package/Debug/index.d.ts +1 -0
- package/Debug/index.js +1 -0
- package/Debug/package.json +6 -0
- package/Details/Details.d.ts +114 -0
- package/Details/Details.js +65 -0
- package/Details/index.d.ts +1 -0
- package/Details/index.js +1 -0
- package/Details/package.json +6 -0
- package/Dialog/DialogMui.d.ts +139 -0
- package/Dialog/DialogMui.js +80 -0
- package/Dialog/css/bare.d.ts +145 -0
- package/Dialog/css/bare.js +21 -0
- package/Dialog/index.d.ts +2 -0
- package/Dialog/index.js +1 -0
- package/Dialog/m/bare.d.ts +56 -0
- package/Dialog/m/bare.js +52 -0
- package/Dialog/m/basic.d.ts +4 -0
- package/Dialog/m/basic.js +31 -0
- package/Dialog/m/index.d.ts +2 -0
- package/Dialog/m/index.js +4 -0
- package/Dialog/m/package.json +6 -0
- package/Dialog/package.json +6 -0
- package/Dialog/sc/bare.d.ts +105 -0
- package/Dialog/sc/bare.js +43 -0
- package/Dialog/sc/framer.d.ts +80 -0
- package/Dialog/sc/framer.js +16 -0
- package/Dialog/sc/framerMaterial.d.ts +79 -0
- package/Dialog/sc/framerMaterial.js +16 -0
- package/Dialog/sc/material.d.ts +94 -0
- package/Dialog/sc/material.js +21 -0
- package/Dialog/tw/bare.d.ts +196 -0
- package/Dialog/tw/bare.js +42 -0
- package/Dialog/tw/elegant.d.ts +244 -0
- package/Dialog/tw/elegant.js +20 -0
- package/Dialog/tw/framer.d.ts +112 -0
- package/Dialog/tw/framer.js +16 -0
- package/Dialog/tw/framerMaterial.d.ts +167 -0
- package/Dialog/tw/framerMaterial.js +16 -0
- package/Dialog/tw/material.d.ts +244 -0
- package/Dialog/tw/material.js +20 -0
- package/Editor/Editor--tiptap.d.ts +9 -0
- package/Editor/Editor--tiptap.js +26 -0
- package/Editor/components.d.ts +7 -0
- package/Editor/components.js +10 -0
- package/Editor/index.d.ts +1 -0
- package/Editor/index.js +1 -0
- package/Editor/package.json +6 -0
- package/Favicon/FaviconTags.d.ts +18 -0
- package/Favicon/FaviconTags.js +15 -0
- package/Favicon/index.d.ts +1 -0
- package/Favicon/index.js +1 -0
- package/Favicon/package.json +6 -0
- package/Form/Form.d.ts +111 -0
- package/Form/Form.js +61 -0
- package/Form/index.d.ts +1 -0
- package/Form/index.js +1 -0
- package/Form/package.json +6 -0
- package/Form/sc/bare.d.ts +33 -0
- package/Form/sc/bare.js +20 -0
- package/Forms/Checkbox/Checkbox.d.ts +11 -0
- package/Forms/Checkbox/Checkbox.js +18 -0
- package/Forms/Checkbox/index.d.ts +1 -0
- package/Forms/Checkbox/index.js +1 -0
- package/Forms/Checkbox/package.json +6 -0
- package/Forms/Feedback/Feedback.d.ts +5 -0
- package/Forms/Feedback/Feedback.js +9 -0
- package/Forms/Feedback/index.d.ts +1 -0
- package/Forms/Feedback/index.js +1 -0
- package/Forms/Feedback/package.json +6 -0
- package/Forms/Field/Field.d.ts +15 -0
- package/Forms/Field/Field.js +48 -0
- package/Forms/Field/FieldControl.d.ts +26 -0
- package/Forms/Field/FieldControl.js +47 -0
- package/Forms/Field/FieldHint.d.ts +1 -0
- package/Forms/Field/FieldHint.js +4 -0
- package/Forms/Field/index.d.ts +2 -0
- package/Forms/Field/index.js +2 -0
- package/Forms/Field/package.json +6 -0
- package/Forms/Input/Input.d.ts +9 -0
- package/Forms/Input/Input.js +17 -0
- package/Forms/Input/index.d.ts +1 -0
- package/Forms/Input/index.js +1 -0
- package/Forms/Input/package.json +6 -0
- package/Forms/InputGroup/InputGroup.d.ts +13 -0
- package/Forms/InputGroup/InputGroup.js +15 -0
- package/Forms/InputGroup/index.d.ts +1 -0
- package/Forms/InputGroup/index.js +1 -0
- package/Forms/InputGroup/package.json +6 -0
- package/Forms/Label/Label.d.ts +3 -0
- package/Forms/Label/Label.js +6 -0
- package/Forms/Label/index.d.ts +1 -0
- package/Forms/Label/index.js +1 -0
- package/Forms/Label/package.json +6 -0
- package/Forms/Password/Password.d.ts +5 -0
- package/Forms/Password/Password.js +17 -0
- package/Forms/Password/index.d.ts +1 -0
- package/Forms/Password/index.js +1 -0
- package/Forms/Password/package.json +6 -0
- package/Forms/Radio/Radio.d.ts +12 -0
- package/Forms/Radio/Radio.js +25 -0
- package/Forms/Radio/index.d.ts +1 -0
- package/Forms/Radio/index.js +1 -0
- package/Forms/Radio/package.json +6 -0
- package/Forms/Switch/Switch.d.ts +9 -0
- package/Forms/Switch/Switch.js +20 -0
- package/Forms/Switch/index.d.ts +1 -0
- package/Forms/Switch/index.js +1 -0
- package/Forms/Switch/package.json +6 -0
- package/Forms/Textarea/Textarea.d.ts +5 -0
- package/Forms/Textarea/Textarea.js +12 -0
- package/Forms/Textarea/TextareaRich.d.ts +6 -0
- package/Forms/Textarea/TextareaRich.js +28 -0
- package/Forms/Textarea/index.d.ts +2 -0
- package/Forms/Textarea/index.js +2 -0
- package/Forms/Textarea/package.json +6 -0
- package/Forms/Toggle/Toggle.d.ts +19 -0
- package/Forms/Toggle/Toggle.js +32 -0
- package/Forms/Toggle/index.d.ts +1 -0
- package/Forms/Toggle/index.js +1 -0
- package/Forms/Toggle/package.json +6 -0
- package/Forms/Toggle/useToggle.d.ts +46 -0
- package/Forms/Toggle/useToggle.js +145 -0
- package/Forms/antispam.d.ts +24 -0
- package/Forms/antispam.js +56 -0
- package/Forms/helpers.d.ts +26 -0
- package/Forms/helpers.js +45 -0
- package/Forms/index.d.ts +15 -0
- package/Forms/index.js +16 -0
- package/Forms/package.json +6 -0
- package/Forms/styles.d.ts +19 -0
- package/Forms/styles.js +29 -0
- package/Gauge/Gauge.d.ts +5 -0
- package/Gauge/Gauge.js +102 -0
- package/Grid/Grid.d.ts +64 -0
- package/Grid/Grid.js +53 -0
- package/Grid/index.d.ts +1 -0
- package/Grid/index.js +1 -0
- package/Grid/package.json +6 -0
- package/Hamburger/Hamburger.d.ts +6 -0
- package/Hamburger/Hamburger.js +52 -0
- package/Hamburger/index.d.ts +1 -0
- package/Hamburger/index.js +1 -0
- package/Hamburger/package.json +6 -0
- package/Header/index.d.ts +1 -0
- package/Header/index.js +1 -0
- package/Header/package.json +6 -0
- package/Header/useHeader.d.ts +24 -0
- package/Header/useHeader.js +30 -0
- package/Hidden/Hidden.d.ts +6 -0
- package/Hidden/Hidden.js +10 -0
- package/Hidden/index.d.ts +1 -0
- package/Hidden/index.js +1 -0
- package/Hidden/package.json +6 -0
- package/Img/index.d.ts +1 -0
- package/Img/index.js +1 -0
- package/Img/package.json +6 -0
- package/Img/sc/bare.d.ts +2 -0
- package/Img/sc/bare.js +39 -0
- package/Img/types.d.ts +9 -0
- package/Img/types.js +1 -0
- package/Link/Link.d.ts +5 -0
- package/Link/Link.js +4 -0
- package/Link/LinkBlank.d.ts +8 -0
- package/Link/LinkBlank.js +17 -0
- package/Link/index.d.ts +2 -0
- package/Link/index.js +2 -0
- package/Link/package.json +6 -0
- package/Menu/Menu.d.ts +1 -0
- package/Menu/Menu.js +4 -0
- package/Menu/index.d.ts +1 -0
- package/Menu/index.js +1 -0
- package/Menu/package.json +6 -0
- package/MenuItem/MenuItem.d.ts +4 -0
- package/MenuItem/MenuItem.js +4 -0
- package/MenuItem/index.d.ts +1 -0
- package/MenuItem/index.js +1 -0
- package/MenuItem/package.json +6 -0
- package/Meta/Meta.d.ts +14 -0
- package/Meta/Meta.js +5 -0
- package/Meta/index.d.ts +1 -0
- package/Meta/index.js +1 -0
- package/Meta/package.json +6 -0
- package/NoJs/NoJs.d.ts +2 -0
- package/NoJs/NoJs.js +6 -0
- package/NoJs/index.d.ts +1 -0
- package/NoJs/index.js +1 -0
- package/NoJs/package.json +6 -0
- package/Pagination/PaginationNav.d.ts +22 -0
- package/Pagination/PaginationNav.js +61 -0
- package/Pagination/PaginationResults.d.ts +3 -0
- package/Pagination/PaginationResults.js +11 -0
- package/Pagination/index.d.ts +2 -0
- package/Pagination/index.js +2 -0
- package/Pagination/package.json +6 -0
- package/Pill/Pill.d.ts +5 -0
- package/Pill/Pill.js +7 -0
- package/Pill/index.d.ts +1 -0
- package/Pill/index.js +1 -0
- package/Pill/package.json +6 -0
- package/Progress/ProgressCircular.d.ts +19 -0
- package/Progress/ProgressCircular.js +15 -0
- package/Progress/ProgressLinear.d.ts +22 -0
- package/Progress/ProgressLinear.js +24 -0
- package/Progress/ProgressOverlay.d.ts +4 -0
- package/Progress/ProgressOverlay.js +24 -0
- package/Progress/index.d.ts +3 -0
- package/Progress/index.js +3 -0
- package/Progress/package.json +6 -0
- package/Rating/Rating.d.ts +35 -0
- package/Rating/Rating.js +71 -0
- package/Rating/index.d.ts +11 -0
- package/Rating/index.js +49 -0
- package/Rating/package.json +6 -0
- package/Select/SelectDownshift.d.ts +5 -0
- package/Select/SelectDownshift.js +38 -0
- package/Select/components.d.ts +6 -0
- package/Select/components.js +12 -0
- package/Select/index.d.ts +2 -0
- package/Select/index.js +3 -0
- package/Select/package.json +6 -0
- package/Sidebar/Sidebar.d.ts +3 -0
- package/Sidebar/Sidebar.js +23 -0
- package/Sidebar/index.d.ts +1 -0
- package/Sidebar/index.js +1 -0
- package/Sidebar/package.json +6 -0
- package/Spacing/Spacing.d.ts +30 -0
- package/Spacing/Spacing.js +45 -0
- package/Spacing/index.d.ts +1 -0
- package/Spacing/index.js +1 -0
- package/Spacing/package.json +6 -0
- package/Sticky/Sticky.d.ts +2 -0
- package/Sticky/Sticky.js +219 -0
- package/Sticky/StickyCss.d.ts +5 -0
- package/Sticky/StickyCss.js +6 -0
- package/Sticky/index.d.ts +1 -0
- package/Sticky/index.js +1 -0
- package/Sticky/package.json +6 -0
- package/Tabs/TabsMui.d.ts +244 -0
- package/Tabs/TabsMui.js +46 -0
- package/Tabs/index.d.ts +1 -0
- package/Tabs/index.js +1 -0
- package/Tabs/package.json +6 -0
- package/Tabs/sc/bare.d.ts +5 -0
- package/Tabs/sc/bare.js +87 -0
- package/Tabs/tw/bare.d.ts +248 -0
- package/Tabs/tw/bare.js +17 -0
- package/Tabs/tw/material.d.ts +472 -0
- package/Tabs/tw/material.js +18 -0
- package/Tabs/useTabs.d.ts +43 -0
- package/Tabs/useTabs.js +44 -0
- package/Typography/CopyPasteVisible.d.ts +1 -0
- package/Typography/CopyPasteVisible.js +4 -0
- package/Typography/Native.d.ts +10 -0
- package/Typography/Native.js +14 -0
- package/Typography/ReadMore.d.ts +12 -0
- package/Typography/ReadMore.js +43 -0
- package/Typography/TextLoop.d.ts +16 -0
- package/Typography/TextLoop.js +46 -0
- package/Typography/TypeStairs.d.ts +6 -0
- package/Typography/TypeStairs.js +50 -0
- package/Typography/index.d.ts +5 -0
- package/Typography/index.js +5 -0
- package/Typography/package.json +6 -0
- package/css/index.d.ts +2 -0
- package/css/index.js +31 -0
- package/css/package.json +6 -0
- package/helpers/classed.d.ts +22 -0
- package/helpers/classed.js +68 -0
- package/helpers/extend-component.d.ts +28 -0
- package/helpers/extend-component.js +12 -0
- package/helpers/index.d.ts +3 -0
- package/helpers/index.js +2 -0
- package/helpers/package.json +6 -0
- package/hooks/index.d.ts +14 -0
- package/hooks/index.js +15 -0
- package/hooks/package.json +6 -0
- package/hooks/types.d.ts +8 -0
- package/hooks/types.js +1 -0
- package/hooks/useAsyncFn.d.ts +26 -0
- package/hooks/useAsyncFn.js +36 -0
- package/hooks/useDateLocale.d.ts +7 -0
- package/hooks/useDateLocale.js +38 -0
- package/hooks/useEffectOnce.d.ts +5 -0
- package/hooks/useEffectOnce.js +8 -0
- package/hooks/useFirstMountState.d.ts +4 -0
- package/hooks/useFirstMountState.js +12 -0
- package/hooks/useFocus.d.ts +4 -0
- package/hooks/useFocus.js +11 -0
- package/hooks/useId.d.ts +4 -0
- package/hooks/useId.js +8 -0
- package/hooks/useIsomorphicLayoutEffect.d.ts +5 -0
- package/hooks/useIsomorphicLayoutEffect.js +8 -0
- package/hooks/useMount.d.ts +4 -0
- package/hooks/useMount.js +9 -0
- package/hooks/useMountedState.d.ts +4 -0
- package/hooks/useMountedState.js +15 -0
- package/hooks/usePrevious.d.ts +1 -0
- package/hooks/usePrevious.js +8 -0
- package/hooks/useScrollPosition.d.ts +15 -0
- package/hooks/useScrollPosition.js +80 -0
- package/hooks/useScrollTo.d.ts +1 -0
- package/hooks/useScrollTo.js +21 -0
- package/hooks/useTraceUpdate.d.ts +4 -0
- package/hooks/useTraceUpdate.js +21 -0
- package/hooks/useUpdateEffect.d.ts +5 -0
- package/hooks/useUpdateEffect.js +14 -0
- package/hooks/useWindowSize.d.ts +1 -0
- package/hooks/useWindowSize.js +13 -0
- package/index.d.ts +1 -0
- package/index.js +5 -0
- package/m/MotionProvider.d.ts +37 -0
- package/m/MotionProvider.js +39 -0
- package/m/index.d.ts +6 -0
- package/m/index.js +6 -0
- package/m/lite.d.ts +2 -0
- package/m/lite.js +2 -0
- package/m/max.d.ts +2 -0
- package/m/max.js +2 -0
- package/m/package.json +6 -0
- package/package.json +6 -9
- package/sc/index.d.ts +30 -0
- package/sc/index.js +31 -0
- package/sc/package.json +6 -0
- package/scm/index.d.ts +29 -0
- package/scm/index.js +31 -0
- package/scm/package.json +6 -0
- package/shared/index.d.ts +8 -0
- package/shared/index.js +8 -0
- package/shared/package.json +6 -0
- package/styles/Body.d.ts +10 -0
- package/styles/Body.js +13 -0
- package/styles/Global.d.ts +15 -0
- package/styles/Global.js +18 -0
- package/styles/index.d.ts +7 -0
- package/styles/index.js +7 -0
- package/styles/media.d.ts +67 -0
- package/styles/media.js +155 -0
- package/styles/package.json +6 -0
- package/styles/spacing.d.ts +13 -0
- package/styles/spacing.js +45 -0
- package/styles/styled.d.ts +12 -0
- package/styles/styled.js +13 -0
- package/styles/theme--vanilla.d.ts +18 -0
- package/styles/theme--vanilla.js +55 -0
- package/styles/theme.d.ts +82 -0
- package/styles/theme.js +41 -0
- package/tw/index.d.ts +2 -0
- package/tw/index.js +31 -0
- package/tw/package.json +6 -0
- package/twm/index.d.ts +2 -0
- package/twm/index.js +31 -0
- package/twm/package.json +6 -0
- package/types.d.ts +10 -0
- package/types.js +1 -0
package/Form/Form.d.ts
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type WithComponents, type Simplify } from "../helpers";
|
|
3
|
+
export declare type OwnProps = React.PropsWithChildren<{
|
|
4
|
+
action: string;
|
|
5
|
+
ok?: boolean;
|
|
6
|
+
okProps?: object;
|
|
7
|
+
fail?: boolean;
|
|
8
|
+
failProps?: object;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
/** Whether the form should collapse on `ok` */
|
|
11
|
+
collapseOnOk?: boolean;
|
|
12
|
+
/** Whether the form should collapse on `fail` */
|
|
13
|
+
collapseOnFail?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Determines the time (in ms) that the `Ok` component wait before collapsing
|
|
16
|
+
* When <= 0 the `Ok` component will persist
|
|
17
|
+
*
|
|
18
|
+
* @default 3000 */
|
|
19
|
+
okTimeout?: number;
|
|
20
|
+
/**
|
|
21
|
+
* Determines the time (in ms) that the `Fail` component wait before collapsing
|
|
22
|
+
* When <= 0 the `Fail` component will persist
|
|
23
|
+
*
|
|
24
|
+
* @default 3000 */
|
|
25
|
+
failTimeout?: number;
|
|
26
|
+
}>;
|
|
27
|
+
export declare type Components = {
|
|
28
|
+
Root: {
|
|
29
|
+
type: "form";
|
|
30
|
+
props: {};
|
|
31
|
+
};
|
|
32
|
+
Overlay: {
|
|
33
|
+
type: "div";
|
|
34
|
+
props: {};
|
|
35
|
+
};
|
|
36
|
+
Progress: {
|
|
37
|
+
type: "div";
|
|
38
|
+
props: {};
|
|
39
|
+
};
|
|
40
|
+
Collapsable: {
|
|
41
|
+
type: "div";
|
|
42
|
+
props: {
|
|
43
|
+
$open?: boolean;
|
|
44
|
+
recalc?: boolean;
|
|
45
|
+
body?: React.ReactNode;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
Ok: {
|
|
49
|
+
type: "div";
|
|
50
|
+
props: React.PropsWithChildren<{}>;
|
|
51
|
+
};
|
|
52
|
+
Fail: {
|
|
53
|
+
type: "div";
|
|
54
|
+
props: React.PropsWithChildren<{}>;
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
export declare type ComponentsProps = {
|
|
58
|
+
[Name in keyof Components]: Components[Name]["props"];
|
|
59
|
+
};
|
|
60
|
+
export declare type Props = Simplify<WithComponents<OwnProps, Components>>;
|
|
61
|
+
export declare type FormProps = Props;
|
|
62
|
+
export declare type KoineFormProps = Props;
|
|
63
|
+
export declare const Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
|
|
64
|
+
export declare const Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
65
|
+
export declare const Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
66
|
+
export declare const Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
67
|
+
$open?: boolean | undefined;
|
|
68
|
+
recalc?: boolean | undefined;
|
|
69
|
+
body?: React.ReactNode;
|
|
70
|
+
}>;
|
|
71
|
+
export declare const Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
72
|
+
children?: import("react").ReactNode;
|
|
73
|
+
}>;
|
|
74
|
+
export declare const Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
75
|
+
children?: import("react").ReactNode;
|
|
76
|
+
}>;
|
|
77
|
+
export declare type FormFeedbackView = "" | "ok" | "fail";
|
|
78
|
+
export declare const Form: ({ Root: _Root, Overlay: _Overlay, Progress: _Progress, Collapsable: _Collapsable, ok, fail, loading, Ok: _Ok, okProps, Fail: _Fail, failProps, collapseOnOk, collapseOnFail, okTimeout, failTimeout, children, ...props }: FormProps) => JSX.Element;
|
|
79
|
+
export declare const KoineForm: ((props: Simplify<WithComponents<OwnProps, Components>>) => import("react").FunctionComponentElement<any>) & {
|
|
80
|
+
Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
|
|
81
|
+
Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
82
|
+
Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
83
|
+
Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
84
|
+
$open?: boolean | undefined;
|
|
85
|
+
recalc?: boolean | undefined;
|
|
86
|
+
body?: React.ReactNode;
|
|
87
|
+
}>;
|
|
88
|
+
Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
89
|
+
children?: import("react").ReactNode;
|
|
90
|
+
}>;
|
|
91
|
+
Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
92
|
+
children?: import("react").ReactNode;
|
|
93
|
+
}>;
|
|
94
|
+
} & {
|
|
95
|
+
defaultProps: {
|
|
96
|
+
Root: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>;
|
|
97
|
+
Overlay: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
98
|
+
Progress: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>;
|
|
99
|
+
Collapsable: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
100
|
+
$open?: boolean | undefined;
|
|
101
|
+
recalc?: boolean | undefined;
|
|
102
|
+
body?: React.ReactNode;
|
|
103
|
+
}>;
|
|
104
|
+
Ok: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
105
|
+
children?: import("react").ReactNode;
|
|
106
|
+
}>;
|
|
107
|
+
Fail: import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
|
|
108
|
+
children?: import("react").ReactNode;
|
|
109
|
+
}>;
|
|
110
|
+
};
|
|
111
|
+
};
|
package/Form/Form.js
ADDED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
4
|
+
// import { type MotionProps } from "framer-motion";
|
|
5
|
+
import { extendComponent, } from "../helpers";
|
|
6
|
+
export var Root = "form";
|
|
7
|
+
export var Overlay = "div";
|
|
8
|
+
export var Progress = "div";
|
|
9
|
+
export var Collapsable = "div";
|
|
10
|
+
export var Ok = null;
|
|
11
|
+
export var Fail = null;
|
|
12
|
+
export var Form = function (_a) {
|
|
13
|
+
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 ? {
|
|
14
|
+
children: "Sent!",
|
|
15
|
+
} : _b, _Fail = _a.Fail, _c = _a.failProps, failProps = _c === void 0 ? {
|
|
16
|
+
children: "Failed.",
|
|
17
|
+
} : _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 = __rest(_a, ["Root", "Overlay", "Progress", "Collapsable", "ok", "fail", "loading", "Ok", "okProps", "Fail", "failProps", "collapseOnOk", "collapseOnFail", "okTimeout", "failTimeout", "children"]);
|
|
18
|
+
var _f = useState(""), open = _f[0], setOpen = _f[1];
|
|
19
|
+
var commonProps = {
|
|
20
|
+
head: null,
|
|
21
|
+
components: {
|
|
22
|
+
HeadIcon: null,
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
useEffect(function () {
|
|
26
|
+
if (!loading) {
|
|
27
|
+
if (ok)
|
|
28
|
+
setOpen("ok");
|
|
29
|
+
else if (fail)
|
|
30
|
+
setOpen("fail");
|
|
31
|
+
}
|
|
32
|
+
}, [ok, fail, loading]);
|
|
33
|
+
useEffect(function () {
|
|
34
|
+
var timeout;
|
|
35
|
+
if (open === "fail" && failTimeout) {
|
|
36
|
+
timeout = setTimeout(function () { return setOpen(""); }, failTimeout);
|
|
37
|
+
}
|
|
38
|
+
else if (open === "ok" && okTimeout) {
|
|
39
|
+
timeout = setTimeout(function () { return setOpen(""); }, okTimeout);
|
|
40
|
+
}
|
|
41
|
+
return function () {
|
|
42
|
+
if (timeout) {
|
|
43
|
+
clearTimeout(timeout);
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
}, [open, failTimeout, okTimeout]);
|
|
47
|
+
var formExpanded = true;
|
|
48
|
+
if (collapseOnFail && fail)
|
|
49
|
+
formExpanded = false;
|
|
50
|
+
if (collapseOnOk && ok)
|
|
51
|
+
formExpanded = false;
|
|
52
|
+
return (_jsxs(Root, __assign({ method: "post", noValidate: true }, props, { children: [_jsx(Collapsable, __assign({}, commonProps, { "$open": formExpanded, recalc: loading, body: _jsxs(_Fragment, { children: [children, loading && (_jsx(Overlay, { children: _jsx(Progress, {}) }))] }) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "ok" && !loading, body: _jsx(Ok, __assign({}, okProps)) })), _jsx(Collapsable, __assign({}, commonProps, { "$open": open === "fail" && !loading, body: _jsx(Fail, __assign({}, failProps)) }))] })));
|
|
53
|
+
};
|
|
54
|
+
export var KoineForm = extendComponent(Form, {
|
|
55
|
+
Root: Root,
|
|
56
|
+
Overlay: Overlay,
|
|
57
|
+
Progress: Progress,
|
|
58
|
+
Collapsable: Collapsable,
|
|
59
|
+
Ok: Ok,
|
|
60
|
+
Fail: Fail,
|
|
61
|
+
});
|
package/Form/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Form";
|
package/Form/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Form";
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import * as _ from "../Form";
|
|
3
|
+
export type { KoineFormProps } from "../Form";
|
|
4
|
+
export declare const Root: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const Overlay: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const Feedback: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const KoineForm: ((props: import("type-fest/source/simplify").Simplify<import("../../helpers").WithComponents<_.OwnProps, _.Components>>) => import("react").FunctionComponentElement<any>) & {
|
|
8
|
+
Root: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
9
|
+
Overlay: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
10
|
+
Progress: ({ size, thickness, color, ...props }: {
|
|
11
|
+
[x: string]: any;
|
|
12
|
+
size?: string | undefined;
|
|
13
|
+
thickness?: number | undefined;
|
|
14
|
+
color?: string | undefined;
|
|
15
|
+
}) => JSX.Element;
|
|
16
|
+
Collapsable: null;
|
|
17
|
+
Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
18
|
+
Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
19
|
+
} & {
|
|
20
|
+
defaultProps: {
|
|
21
|
+
Root: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "key" | keyof import("react").FormHTMLAttributes<HTMLFormElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
22
|
+
Overlay: import("styled-components").StyledComponent<import("react").ElementType<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>>, import("styled-components").DefaultTheme, {}, never>;
|
|
23
|
+
Progress: ({ size, thickness, color, ...props }: {
|
|
24
|
+
[x: string]: any;
|
|
25
|
+
size?: string | undefined;
|
|
26
|
+
thickness?: number | undefined;
|
|
27
|
+
color?: string | undefined;
|
|
28
|
+
}) => JSX.Element;
|
|
29
|
+
Collapsable: null;
|
|
30
|
+
Ok: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
31
|
+
Fail: import("styled-components").StyledComponent<({ $danger, children, ...props }: import("../../Alert").AlertProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
32
|
+
};
|
|
33
|
+
};
|
package/Form/sc/bare.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
import { overlay, centered } from "../../styles/styled";
|
|
4
|
+
import { Collapsable } from "../../Collapsable";
|
|
5
|
+
import { ProgressCircular } from "../../Progress";
|
|
6
|
+
import { Alert } from "../../Alert";
|
|
7
|
+
import { extendComponent } from "../../helpers";
|
|
8
|
+
import * as _ from "../Form";
|
|
9
|
+
export var Root = styled(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
10
|
+
export var Overlay = styled(_.Overlay)(templateObject_2 || (templateObject_2 = __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"])), overlay, centered);
|
|
11
|
+
export var Feedback = styled(Alert)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 2em 0;\n"], ["\n padding: 2em 0;\n"])));
|
|
12
|
+
export var KoineForm = extendComponent(_.KoineForm, {
|
|
13
|
+
Root: Root,
|
|
14
|
+
Overlay: Overlay,
|
|
15
|
+
Progress: ProgressCircular,
|
|
16
|
+
Collapsable: Collapsable,
|
|
17
|
+
Ok: Feedback,
|
|
18
|
+
Fail: Feedback,
|
|
19
|
+
});
|
|
20
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { UseToggleProps } from "../Toggle/useToggle";
|
|
3
|
+
export declare const CheckboxRoot: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const CheckboxToggle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const CheckboxIndicator: import("styled-components").StyledComponent<(props: unknown) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const CheckboxLabel: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare type CheckboxProps = UseToggleProps;
|
|
8
|
+
/**
|
|
9
|
+
* All logic and invisible Inputs come from the `useToggle` hook
|
|
10
|
+
*/
|
|
11
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<UseToggleProps, "key" | "value" | "id" | "width" | "title" | "color" | "form" | "slot" | "style" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "type" | "size" | "options" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "min" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | keyof import("..").FormControlProps<any> | "valueTrue" | "valueFalse"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { __assign, __makeTemplateObject } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
import { Toggle, ToggleLabel, ToggleIndicatorSquared } from "../Toggle";
|
|
6
|
+
import { useToggle } from "../Toggle/useToggle";
|
|
7
|
+
export var CheckboxRoot = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n cursor: pointer;\n"], ["\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
|
|
8
|
+
export var CheckboxToggle = styled(Toggle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n pointer-events: none;\n"], ["\n pointer-events: none;\n"])));
|
|
9
|
+
export var CheckboxIndicator = styled(ToggleIndicatorSquared)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
|
|
10
|
+
export var CheckboxLabel = styled(ToggleLabel)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n font-size: 0.8em;\n"], ["\n font-size: 0.8em;\n"])));
|
|
11
|
+
/**
|
|
12
|
+
* All logic and invisible Inputs come from the `useToggle` hook
|
|
13
|
+
*/
|
|
14
|
+
export var Checkbox = forwardRef(function Checkbox(props, ref) {
|
|
15
|
+
var _a = useToggle(props, ref), rootProps = _a.rootProps, Inputs = _a.Inputs, label = _a.label;
|
|
16
|
+
return (_jsxs(CheckboxRoot, __assign({}, rootProps, { children: [_jsxs(CheckboxToggle, { children: [Inputs, _jsx(CheckboxIndicator, {})] }), label && _jsx(CheckboxLabel, { children: label })] })));
|
|
17
|
+
});
|
|
18
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Checkbox";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Checkbox";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { __assign, __makeTemplateObject } from "tslib";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
var Root = styled.div(templateObject_1 || (templateObject_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);" : ""); });
|
|
5
|
+
export var Feedback = function (_a) {
|
|
6
|
+
var $danger = _a.$danger, children = _a.children;
|
|
7
|
+
return (_jsx(Root, __assign({ role: "alert", "$danger": $danger }, { children: children })));
|
|
8
|
+
};
|
|
9
|
+
var templateObject_1;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Feedback";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Feedback";
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FieldError as RHF_FieldError, FieldErrors as RHF_FieldErrors } from "react-hook-form";
|
|
3
|
+
import type { Translate } from "../../types";
|
|
4
|
+
export declare const field: import("styled-components").FlattenSimpleInterpolation;
|
|
5
|
+
export declare const FieldBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const FieldRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
7
|
+
$danger: boolean;
|
|
8
|
+
}, never>;
|
|
9
|
+
export declare type FieldProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
10
|
+
name?: string;
|
|
11
|
+
t?: Translate;
|
|
12
|
+
error?: RHF_FieldError;
|
|
13
|
+
errors?: RHF_FieldErrors;
|
|
14
|
+
};
|
|
15
|
+
export declare const Field: ({ name, t, error, errors, children, ...props }: FieldProps) => JSX.Element;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import styled, { css } from "styled-components";
|
|
4
|
+
import { Feedback } from "../Feedback";
|
|
5
|
+
export var field = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-bottom: 20px;\n"], ["\n padding-bottom: 20px;\n"])));
|
|
6
|
+
export var FieldBase = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), field);
|
|
7
|
+
export var FieldRoot = styled(FieldBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (p) {
|
|
8
|
+
return (p.$danger &&
|
|
9
|
+
"\n color: var(--danger);\n \n textarea,\n input,\n select {\n color: var(--danger);\n }\n ");
|
|
10
|
+
});
|
|
11
|
+
/**
|
|
12
|
+
* Yup's errors produce by these validations:
|
|
13
|
+
*
|
|
14
|
+
* ```
|
|
15
|
+
* email: string().email().required(),
|
|
16
|
+
* name: string().required()
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* determine the `error.type` of the `FieldError` to be "required" and "email".
|
|
20
|
+
* We assume these as standard translations keys without needing to pass
|
|
21
|
+
* a string into the validation, e.g. `required("mySpecialKey")`.
|
|
22
|
+
*/
|
|
23
|
+
var YUP_ERROR_TYPES_AS_KEYS = {
|
|
24
|
+
required: 1,
|
|
25
|
+
email: 1,
|
|
26
|
+
};
|
|
27
|
+
export var Field = function (_a) {
|
|
28
|
+
var name = _a.name, t = _a.t, error = _a.error, errors = _a.errors, children = _a.children, props = __rest(_a, ["name", "t", "error", "errors", "children"]);
|
|
29
|
+
var err = errors && name ? errors[name] : error;
|
|
30
|
+
var msg = "";
|
|
31
|
+
if (err) {
|
|
32
|
+
if (name && t && err.type !== "plain") {
|
|
33
|
+
var translationKey = err.type && YUP_ERROR_TYPES_AS_KEYS[err.type] ? err.type : "";
|
|
34
|
+
msg = t("errors.".concat(name, ".").concat(translationKey || err.message));
|
|
35
|
+
}
|
|
36
|
+
else {
|
|
37
|
+
msg = err.message;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
// dynamic i18n namespace loading does not seem to work yet
|
|
41
|
+
// const t = useT("core.Forms");
|
|
42
|
+
// const { locale } = useRouter();
|
|
43
|
+
// useEffect(() => {
|
|
44
|
+
// i18n.addResourceBundle(locale, "core.Forms", null);
|
|
45
|
+
// }, []);
|
|
46
|
+
return (_jsxs(FieldRoot, __assign({ "$danger": !!err }, props, { children: [children, msg && _jsx(Feedback, __assign({ "$danger": true }, { children: msg }))] })));
|
|
47
|
+
};
|
|
48
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { Translate } from "../../types";
|
|
3
|
+
import type { FormControl } from "../helpers";
|
|
4
|
+
declare type FieldControlRenderProps = React.PropsWithChildren<Pick<FormControl, "control" | "register" | "setValue" | "name" | "label" | "placeholder">>;
|
|
5
|
+
export declare type FieldControlProps = FieldControlRenderProps & {
|
|
6
|
+
/** Render props pattern */
|
|
7
|
+
children: (props: FieldControlRenderProps) => React.ReactNode;
|
|
8
|
+
t: Translate;
|
|
9
|
+
showError?: boolean;
|
|
10
|
+
encode?: boolean;
|
|
11
|
+
hint?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
style?: React.CSSProperties;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
*
|
|
17
|
+
* - it expects the `field` object from our `useForm` wrapper around react-hook-form
|
|
18
|
+
* - automatically get translated strings from the given `t` function` for the
|
|
19
|
+
* field `label`, `placeholder` and `errors`. The .json expected by the `t` function
|
|
20
|
+
* look like this:
|
|
21
|
+
*
|
|
22
|
+
* ```json
|
|
23
|
+
* ```
|
|
24
|
+
*/
|
|
25
|
+
export declare const FieldControl: ({ control, register, setValue, name: maybeEncodedName, label, placeholder, hint, t, showError, children, encode, ...props }: FieldControlProps) => JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { useFormState } from "react-hook-form";
|
|
5
|
+
import { decode } from "@koine/utils";
|
|
6
|
+
import { Field } from "./Field";
|
|
7
|
+
import { FieldHint } from "./FieldHint";
|
|
8
|
+
import { InputHoneypot } from "../styles";
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* - it expects the `field` object from our `useForm` wrapper around react-hook-form
|
|
12
|
+
* - automatically get translated strings from the given `t` function` for the
|
|
13
|
+
* field `label`, `placeholder` and `errors`. The .json expected by the `t` function
|
|
14
|
+
* look like this:
|
|
15
|
+
*
|
|
16
|
+
* ```json
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export var FieldControl = function (_a) {
|
|
20
|
+
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 = __rest(_a, ["control", "register", "setValue", "name", "label", "placeholder", "hint", "t", "showError", "children", "encode"]);
|
|
21
|
+
var name = encode ? decode(maybeEncodedName) : maybeEncodedName;
|
|
22
|
+
var errors = useFormState({ name: name, control: control }).errors;
|
|
23
|
+
var error = showError && errors[name] ? errors[name] : null;
|
|
24
|
+
var FormFieldContent = useMemo(function () {
|
|
25
|
+
return children({
|
|
26
|
+
control: control,
|
|
27
|
+
register: register,
|
|
28
|
+
setValue: 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.".concat(name), undefined, { default: "" }),
|
|
33
|
+
placeholder: placeholder || t("placeholders.".concat(name), undefined, { fallback: "" }),
|
|
34
|
+
});
|
|
35
|
+
}, [
|
|
36
|
+
children,
|
|
37
|
+
control,
|
|
38
|
+
register,
|
|
39
|
+
setValue,
|
|
40
|
+
name,
|
|
41
|
+
label,
|
|
42
|
+
t,
|
|
43
|
+
maybeEncodedName,
|
|
44
|
+
placeholder,
|
|
45
|
+
]);
|
|
46
|
+
return (_jsxs(_Fragment, { children: [_jsxs(Field, __assign({ name: maybeEncodedName, t: t, error: error }, props, { children: [FormFieldContent, hint && _jsx(FieldHint, { children: hint })] })), encode && register && _jsx(InputHoneypot, __assign({}, register(name)))] }));
|
|
47
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const FieldHint: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { __makeTemplateObject } from "tslib";
|
|
2
|
+
import styled from "styled-components";
|
|
3
|
+
export var FieldHint = styled.div(templateObject_1 || (templateObject_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"])));
|
|
4
|
+
var templateObject_1;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FormControl } from "../helpers";
|
|
3
|
+
export declare const InputWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const InputMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const InputPre: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
6
|
+
export declare const InputPost: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
7
|
+
export declare const InputNative: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
|
|
8
|
+
export declare type InputProps = FormControl;
|
|
9
|
+
export declare const Input: import("react").ForwardRefExoticComponent<Pick<InputProps, "key" | "value" | "id" | "width" | "title" | "color" | "form" | "slot" | "style" | "pattern" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "disabled" | "type" | "size" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "height" | "max" | "min" | "crossOrigin" | "alt" | "src" | "autoComplete" | "accept" | "capture" | "checked" | "enterKeyHint" | "maxLength" | "minLength" | "multiple" | "readOnly" | "required" | keyof import("../helpers").FormControlProps<any>> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
import { Label } from "../Label/Label";
|
|
6
|
+
import { inputBase, inputFocus } from "../styles";
|
|
7
|
+
export var InputWrap = styled.div(templateObject_1 || (templateObject_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"])));
|
|
8
|
+
export var InputMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
9
|
+
export var InputPre = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
|
|
10
|
+
export var InputPost = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
|
|
11
|
+
export var InputNative = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), inputBase, inputFocus);
|
|
12
|
+
export var Input = forwardRef(function Input(_a, ref) {
|
|
13
|
+
var register = _a.register, name = _a.name, label = _a.label, props = __rest(_a, ["register", "name", "label"]);
|
|
14
|
+
// console.log("Input: render");
|
|
15
|
+
return (_jsxs(_Fragment, { children: [label && _jsx(Label, { children: label }), _jsx(InputNative, __assign({}, (register ? register(name) : { name: name, ref: ref }), props))] }));
|
|
16
|
+
});
|
|
17
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Input";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Input";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { KoineButton, KoineButtonProps } from "../../Buttons";
|
|
3
|
+
export declare const InputGroupRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const InputGroupMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const InputGroupButtonPre: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
|
|
6
|
+
export declare const InputGroupButtonPost: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("../../Buttons").KoineButtonUiProps, never>;
|
|
7
|
+
export declare type InputGroupProps = React.ComponentPropsWithoutRef<"div"> & {
|
|
8
|
+
pre?: boolean;
|
|
9
|
+
post?: boolean;
|
|
10
|
+
Button?: typeof KoineButton;
|
|
11
|
+
btnProps?: KoineButtonProps;
|
|
12
|
+
};
|
|
13
|
+
export declare const InputGroup: ({ pre, post, Button, btnProps, children, ...props }: InputGroupProps) => JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { __assign, __makeTemplateObject, __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import styled from "styled-components";
|
|
4
|
+
import { KoineButton } from "../../Buttons";
|
|
5
|
+
import { field } from "../Field";
|
|
6
|
+
import { max, min } from "../../styles/media";
|
|
7
|
+
export var InputGroupRoot = styled.div(templateObject_1 || (templateObject_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, max.sm);
|
|
8
|
+
export var InputGroupMain = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
|
|
9
|
+
export var InputGroupButtonPre = styled(KoineButton)(templateObject_3 || (templateObject_3 = __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"])), max.sm, min.sm);
|
|
10
|
+
export var InputGroupButtonPost = styled(KoineButton)(templateObject_4 || (templateObject_4 = __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"])), max.sm, min.sm);
|
|
11
|
+
export var InputGroup = function (_a) {
|
|
12
|
+
var pre = _a.pre, post = _a.post, _b = _a.Button, Button = _b === void 0 ? KoineButton : _b, _c = _a.btnProps, btnProps = _c === void 0 ? {} : _c, children = _a.children, props = __rest(_a, ["pre", "post", "Button", "btnProps", "children"]);
|
|
13
|
+
return (_jsxs(InputGroupRoot, __assign({}, props, { children: [pre && _jsx(InputGroupButtonPre, __assign({ as: Button }, btnProps)), _jsx(InputGroupMain, { children: children }), post && _jsx(InputGroupButtonPost, __assign({ as: Button }, btnProps))] })));
|
|
14
|
+
};
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./InputGroup";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./InputGroup";
|