@tactics/toddle-styleguide 5.0.2 → 5.0.5

package/assets/lottie/wave-for-parents.json

@@ -0,0 +1 @@
+{"nm":"circle_blue","mn":"","layers":[{"ty":0,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":true,"td":1,"ao":0,"ks":{"a":{"a":0,"k":[89,89,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[500.00000000000006,500.00000000000006,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"Mask 1","mn":"","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":0,"k":{"c":true,"i":[[49.153,0],[0,-49.153],[-49.153,0],[0,49.153]],"o":[[-49.153,0],[0,49.153],[49.153,0],[0,-49.153]],"v":[[89,0],[0,89],[89,178],[178,89]]},"ix":1}}],"w":178,"h":178,"refId":"comp_0","ind":1},{"ty":4,"nm":"Shape Layer 1","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"tt":1,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[561.7977528089888,561.7977528089888,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[494.8314606741573,233.8876404494382,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Rectangle 1","ix":1,"cix":2,"np":2,"it":[{"ty":"rc","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Rect","nm":"Rectangle Path 1","d":1,"p":{"a":0,"k":[0,0],"ix":3},"r":{"a":0,"k":0,"ix":4},"s":{"a":0,"k":[178,178],"ix":2}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0.92,47.368],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 2","e":{"a":0,"k":[0,45],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.0784313725490196,0.5686274509803921,0.6078431372549019,0.5,0.0784313725490196,0.5686274509803921,0.6078431372549019,1,0.0784313725490196,0.5686274509803921,0.6078431372549019],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[0,360],"ix":5},"r":1,"o":{"a":0,"k":89,"ix":10}},{"ty":"gf","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - G-Fill","nm":"Gradient Fill 1","e":{"a":0,"k":[75,0],"ix":6},"g":{"p":3,"k":{"a":0,"k":[0,0.0784313725490196,0.5686274509803921,0.6078431372549019,0.5,0.0784313725490196,0.5686274509803921,0.6078431372549019,1,0.0784313725490196,0.5686274509803921,0.6078431372549019],"ix":9}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[-54,0],"ix":5},"r":1,"o":{"a":0,"k":100,"ix":10}}],"ind":2}],"ddd":0,"h":1000,"w":1000,"meta":{"a":"","k":"","d":"","g":"LottieFiles AE 0.1.21","tc":"#000000"},"v":"5.5.7","fr":8,"op":60.0000024438501,"ip":0,"assets":[{"nm":"","mn":"","layers":[{"ty":4,"nm":"wave_2 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,89,0],"t":0,"ti":[-29.667,0,0],"to":[29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,89,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,0],[45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[45.859,9.977],[13.272,-0.001]],"o":[[0,0],[-0.03,0.007],[0,0],[-45.859,-9.977],[0,0],[0,0],[0,0],[0,0],[-0.031,0.007],[0,0],[-15.288,-3.326],[-26.538,0]],"v":[[0,-22.84],[0,-22.852],[-0.052,-22.84],[-88.423,-22.84],[-178,-22.84],[-178,32.816],[0,32.816],[178,32.816],[178,-22.852],[177.948,-22.84],[89.576,-22.84],[45.971,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.0784,0.5686,0.6078],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":1},{"ty":4,"nm":"wave_1 Outlines","mn":"","sr":1,"st":0,"op":60.0000024438501,"ip":0,"hd":false,"cl":"","ln":"","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[178,89,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[178,91,0],"t":0,"ti":[29.667,0,0],"to":[-29.667,0,0]},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,91,0],"t":59.0000024031193}],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":50,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 2","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[15.288,-3.326],[0,0],[0.031,0.007],[0,0],[45.858,-9.977],[0,0],[0.031,0.007],[0,0],[0,0],[0,0],[0,0],[26.539,0]],"o":[[-45.857,9.977],[0,0],[0,0],[0,0],[-45.858,9.977],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[-13.272,-0.001]],"v":[[88.423,-22.84],[0.051,-22.84],[0,-22.852],[0,-22.84],[-89.576,-22.84],[-177.948,-22.84],[-178,-22.852],[-178,32.816],[0,32.816],[178,32.816],[178,-22.84],[132.029,-27.273]]},"ix":2}},{"ty":"mm","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Filter - Merge","nm":"Merge Paths 1","mm":4},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[178,145.184],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"fl","bm":0,"cl":"","ln":"","hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.0784,0.5686,0.6078],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}}],"ind":2}],"id":"comp_0"}]}

package/babel.config.js

@@ -0,0 +1,20 @@
+module.exports = function (api) {
+  api.cache(true);
+  const disableImportExportTransform = true;
+  return {
+    presets: [
+      [
+        'babel-preset-expo',
+        {
+          native: {
+            disableImportExportTransform,
+          },
+          web: {
+            disableImportExportTransform,
+          },
+        },
+      ],
+    ],
+    plugins: ['react-native-reanimated/plugin'],
+  };
+};

package/index.d.ts

@@ -0,0 +1,79 @@
+import 'intl';
+import 'intl/locale-data/jsonp/en';
+import { Avatar } from './src/components/molecules/avatar/avatar.component';
+import { Button } from './src/components/molecules/button/button.component';
+import { CancelLink } from './src/components/molecules/cancel-link/cancel-link.component';
+import { Check } from './src/components/atoms/check-switch/check-switch.component';
+import { Checkbox } from './src/components/molecules/checkbox/checkbox.component';
+import { ChildListItem } from './src/components/organisms/child-list-item/child-list-item.component';
+import { ContactItem } from './src/components/organisms/contact-item/contact-item.component';
+import { FilterTab } from './src/components/molecules/filter-tab/filter-tab.component';
+import { SplitContainer } from './src/components/atoms/split-container/split-container.component';
+import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
+import { Info } from './src/components/molecules/info/info.component';
+import { Pill } from './src/components/molecules/pill/pill.component';
+import { Popover } from './src/components/templates/popover/popover.component';
+import { PressableIcon } from './src/components/molecules/pressable-icon/pressable-icon.component';
+import { QuickFilter } from './src/components/molecules/quick-filter/quick-filter.component';
+import { SelectListItem } from './src/components/molecules/select-list-item/select-list-item.component';
+import { Snackbar } from './src/components/molecules/snackbar/snackbar.component';
+import { Tag } from './src/components/molecules/tag/tag.component';
+import { TextBubble } from './src/components/organisms/text-bubble/text-bubble.component';
+import { TextInput } from './src/components/atoms/text-input/text-input.component';
+import { TimeTracker } from './src/components/molecules/time-tracker/time-tracker.component';
+import { WideButton } from './src/components/molecules/wide-button/wide-button.component';
+import { Icon } from './src/icons';
+import { Calendar } from './src/components/atoms/calendar/calendar.component';
+import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
+import { Logo } from './src/components/atoms/logo/logo.component';
+import { Search } from './src/components/molecules/search-input/search.component';
+import { BlockedMessage } from './src/components/molecules/blocked-message/blocked-message.component';
+import { DepartmentLogo } from './src/components/molecules/department_logo/department-logo.component';
+import { ContactRole } from './src/components/molecules/contact-role/contact-role.component';
+import { TimeLine } from './src/components/molecules/timeline/timeline.component';
+import { SelectPicker } from './src/components/molecules/select-picker/select-picker.component';
+import { CalendarSelect } from './src/components/molecules/calendar-select/calendar-select.component';
+import { DateInput } from './src/components/molecules/date-input/date-input.component';
+import { FilterRange } from './src/components/molecules/filter-range/filter-range.component';
+import { Footer } from './src/components/atoms/footer/footer.component';
+import { DefaultSelect } from './src/components/molecules/default-select/default-select.component';
+import { PasswordInput } from './src/components/molecules/password-input/password-input.component';
+import { MessageInput } from './src/components/molecules/message-input/message-input.component';
+import { AllCapsHeading, Heading1, Heading2, Heading3, Heading4 } from './src/components/atoms/heading-components';
+import { Paragraph, SmallText, TinyText } from './src/components/atoms/paragraph-components';
+import { SelectLink } from './src/components/molecules/select-link/select-link.component';
+import { MyChildListItem } from './src/components/organisms/my-child-list-item/my-child-list-item.component';
+import { MoreInfoButton } from './src/components/molecules/more-info-button/more-info-button.component';
+import { LanguageButton } from './src/components/molecules/language-button/language-button.component';
+import { Modal } from './src/components/templates/modal/modal.component';
+import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
+import { WaveBackground } from './src/components/molecules/wave-background/wave.component';
+import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
+import { PersonInfoCard } from './src/components/organisms/person-info-card/person-info-card.component';
+import { TimePicker } from './src/components/molecules/time-picker/time-picker.component';
+import { QuickMessage } from './src/components/atoms/quick-message/quick-message.component';
+import { Line } from './src/components/atoms/line/line.component';
+import { JournalEntry } from './src/components/organisms/journal-entry/journal-entry.component';
+import { TimetableEdit } from './src/components/organisms/timetable-edit/timetable-edit.component';
+import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
+import { Count } from './src/components/atoms/count/count.component';
+import { Amount } from './src/components/molecules/amount/amount.component';
+import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { TimetableEditorStaff } from './src/components/organisms/timetable-editor/timetable-editor-staff.component';
+import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
+import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
+import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
+import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
+import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
+import { BubbleAlignment } from './src/types/bubble-alignment.enum';
+import { KeyBoardTypes } from './src/types/keyboard-types.enum';
+import { Size } from './src/types/size.enum';
+import { VisualState } from './src/types/visual-state.enum';
+import { Initials } from './src/models/initials.model';
+import { TimeSlotRecord } from './src/models/time-slot-record';
+import { TimeSlotSequence } from './src/models/time-slot-sequence';
+import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
+import { ThemeCtx } from './src/context/theme.context';
+import { Scale } from './src/theme/scale/index';
+import CreateResponsiveStyle from './src/theme/responsive/index';
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimetableEditorStaff, TimeSlotRecord, TimeSlotSequence, InlineError, InlineNotice, SelectableListItem, SwipeableContainer, SwipeableAction, };

package/index.tsx

@@ -0,0 +1,196 @@
+// Needed to run Expo
+import registerRootComponent from 'expo/build/launch/registerRootComponent';
+import 'intl';
+import 'intl/locale-data/jsonp/en';
+
+import App from './App';
+
+let webBuild = process.env.EXPO_PUBLIC_WEBBUILD;
+if (!webBuild) {
+  registerRootComponent(App);
+}
+
+// Exports of components
+import {Avatar} from './src/components/molecules/avatar/avatar.component';
+import {Button} from './src/components/molecules/button/button.component';
+import {CancelLink} from './src/components/molecules/cancel-link/cancel-link.component';
+import {Check} from './src/components/atoms/check-switch/check-switch.component';
+import {Checkbox} from './src/components/molecules/checkbox/checkbox.component';
+import {ChildListItem} from './src/components/organisms/child-list-item/child-list-item.component';
+import {ContactItem} from './src/components/organisms/contact-item/contact-item.component';
+import {FilterTab} from './src/components/molecules/filter-tab/filter-tab.component';
+import {SplitContainer} from './src/components/atoms/split-container/split-container.component';
+import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
+import {Info} from './src/components/molecules/info/info.component';
+import {Pill} from './src/components/molecules/pill/pill.component';
+import {Popover} from './src/components/templates/popover/popover.component';
+import {PressableIcon} from './src/components/molecules/pressable-icon/pressable-icon.component';
+import {QuickFilter} from './src/components/molecules/quick-filter/quick-filter.component';
+import {SelectListItem} from './src/components/molecules/select-list-item/select-list-item.component';
+import {Snackbar} from './src/components/molecules/snackbar/snackbar.component';
+import {Tag} from './src/components/molecules/tag/tag.component';
+import {TextBubble} from './src/components/organisms/text-bubble/text-bubble.component';
+import {TextInput} from './src/components/atoms/text-input/text-input.component';
+import {TimeTracker} from './src/components/molecules/time-tracker/time-tracker.component';
+import {WideButton} from './src/components/molecules/wide-button/wide-button.component';
+import {Icon} from './src/icons';
+import {Calendar} from './src/components/atoms/calendar/calendar.component';
+import {IncrementInput} from './src/components/atoms/increment-input/increment-input.component';
+import {Logo} from './src/components/atoms/logo/logo.component';
+import {Search} from './src/components/molecules/search-input/search.component';
+import {BlockedMessage} from './src/components/molecules/blocked-message/blocked-message.component';
+import {DepartmentLogo} from './src/components/molecules/department_logo/department-logo.component';
+import {ContactRole} from './src/components/molecules/contact-role/contact-role.component';
+import {TimeLine} from './src/components/molecules/timeline/timeline.component';
+import {SelectPicker} from './src/components/molecules/select-picker/select-picker.component';
+import {CalendarSelect} from './src/components/molecules/calendar-select/calendar-select.component';
+import {DateInput} from './src/components/molecules/date-input/date-input.component';
+import {FilterRange} from './src/components/molecules/filter-range/filter-range.component';
+import {Footer} from './src/components/atoms/footer/footer.component';
+import {DefaultSelect} from './src/components/molecules/default-select/default-select.component';
+import {PasswordInput} from './src/components/molecules/password-input/password-input.component';
+import {MessageInput} from './src/components/molecules/message-input/message-input.component';
+import {
+  AllCapsHeading,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+} from './src/components/atoms/heading-components';
+import {
+  Paragraph,
+  SmallText,
+  TinyText,
+} from './src/components/atoms/paragraph-components';
+import {SelectLink} from './src/components/molecules/select-link/select-link.component';
+import {MyChildListItem} from './src/components/organisms/my-child-list-item/my-child-list-item.component';
+import {MoreInfoButton} from './src/components/molecules/more-info-button/more-info-button.component';
+import {LanguageButton} from './src/components/molecules/language-button/language-button.component';
+import {Modal} from './src/components/templates/modal/modal.component';
+import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
+import {WaveBackground} from './src/components/molecules/wave-background/wave.component';
+import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
+import {PersonInfoCard} from './src/components/organisms/person-info-card/person-info-card.component';
+import {TimePicker} from './src/components/molecules/time-picker/time-picker.component';
+import {QuickMessage} from './src/components/atoms/quick-message/quick-message.component';
+import {Line} from './src/components/atoms/line/line.component';
+import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
+import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable-edit.component';
+import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
+import { Count } from './src/components/atoms/count/count.component';
+import { Amount } from './src/components/molecules/amount/amount.component';
+import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
+import { TimetableEditorStaff } from './src/components/organisms/timetable-editor/timetable-editor-staff.component';
+import { InlineError } from './src/components/molecules/inline-error/inline-error.component';
+import { InlineNotice } from './src/components/molecules/inline-notice/inline-notice.component';
+import { SelectableListItem } from './src/components/molecules/selectable-list-item/selectable-list-item.component';
+import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
+import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
+
+// Exports of enums
+import {BubbleAlignment} from './src/types/bubble-alignment.enum';
+import {KeyBoardTypes} from './src/types/keyboard-types.enum';
+import {Size} from './src/types/size.enum';
+import {VisualState} from './src/types/visual-state.enum';
+
+// Exports of models
+import {Initials} from './src/models/initials.model';
+import { TimeSlotRecord } from './src/models/time-slot-record';
+import { TimeSlotSequence } from './src/models/time-slot-sequence';
+
+// Exports of classes
+import {ToddleDateTime} from './src/utilities/toddle-datetime/toddle-datetime.class';
+
+// Exports of context
+import {ThemeCtx} from './src/context/theme.context';
+
+//Export of Theme
+import {Scale} from './src/theme/scale/index';
+
+// Export of responsive style
+import CreateResponsiveStyle from './src/theme/responsive/index';
+
+export {
+  AllCapsHeading,
+  Avatar,
+  BackgroundGradient,
+  BlockedMessage,
+  Button,
+  Calendar,
+  CalendarSelect,
+  CancelLink,
+  Check,
+  Checkbox,
+  ChildListItem,
+  ContactItem,
+  ContactRole,
+  DateInput,
+  DefaultSelect,
+  DepartmentLogo,
+  FilterRange,
+  FilterTab,
+  Footer,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Icon,
+  ImageBubble,
+  IncrementInput,
+  Info,
+  JournalEntry,
+  LanguageButton,
+  Line,
+  LoadingIndicator,
+  Logo,
+  MessageInput,
+  Modal,
+  MoreInfoButton,
+  MyChildListItem,
+  Paragraph,
+  PasswordInput,
+  PersonInfoCard,
+  Pill,
+  Popover,
+  PressableIcon,
+  QuickFilter,
+  QuickMessage,
+  Search,
+  SelectLink,
+  SelectListItem,
+  SelectPicker,
+  SmallText,
+  Snackbar,
+  SplitContainer,
+  Tag,
+  TextBubble,
+  TextInput,
+  TimeLine,
+  TimePicker,
+  TimeTracker,
+  TinyText,
+  WaveBackground,
+  WideButton,
+  BubbleAlignment,
+  Initials,
+  KeyBoardTypes,
+  Size,
+  ThemeCtx,
+  ToddleDateTime,
+  VisualState,
+  CreateResponsiveStyle,
+  Scale,
+  TimetableEdit,
+  ContextLabel,
+  Count,
+  Amount,
+  TimetableEditor,
+  TimetableEditorStaff,
+  TimeSlotRecord,
+  TimeSlotSequence,
+  InlineError,
+  InlineNotice,
+  SelectableListItem,
+  SwipeableContainer,
+  SwipeableAction,
+};

package/jest.config.js

@@ -0,0 +1,26 @@
+process.env.TZ = 'UTC';
+
+module.exports = async () => {
+  return {
+    verbose: true,
+    extensionsToTreatAsEsm: ['.ts', '.tsx'],
+    preset: 'jest-expo',
+    transformIgnorePatterns: [
+      'node_modules/(?!((jest-)?react-native' +
+        '|@react-native(-community)?)' +
+        '|expo(nent)?' +
+        '|@expo(nent)?/.*' +
+        '|@expo-google-fonts/.*' +
+        '|react-navigation' +
+        '|@react-navigation/.*' +
+        '|@unimodules/.*' +
+        '|unimodules' +
+        '|sentry-expo' +
+        '|native-base' +
+        '|@miblanchard/react-native-slider' +
+        '|react-native-svg' +
+        '|@tactics/kinderopvang-branding)' +
+        '|react-native-reanimated',
+    ],
+  };
+};

package/metro.config.js

@@ -0,0 +1,11 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+config.transformer.getTransformOptions = async () => ({
+    transform: {
+      experimentalImportSupport: true,
+    },
+  });
+
+module.exports = config;

package/package.json

@@ -1,24 +1,16 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.0.2",
-  "main": "./build/index.js",
-  "types": "./build/index.d.ts",
-  "exports": {
-    ".": {
-      "require": "./build/index.js",
-      "import": "./build/index.js",
-      "types": "./build/index.d.ts"
-    }
-  },
+  "version": "5.0.5",
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "prepublish": "tsc",
   "scripts": {
-    "build": "yarn exec tsc && yarn exec prettier --write src/. && yarn exec tsup",
     "expo": "./node_modules/.bin/tsc && ./node_modules/.bin/expo",
     "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start",
     "test": "./node_modules/.bin/jest",
     "format": "./node_modules/.bin/prettier --write src/.",
     "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5"
   },
-  "prepublish": "tsc",
   "engineStrict": true,
   "engines": {
     "npm": "please-use-yarn",
@@ -37,7 +29,6 @@
     "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@react-navigation/stack": "^6.3.17",
-    "@swc/core": "^1.7.39",
     "@tactics/kinderopvang-branding": "1.0.3",
     "@testing-library/react-native": "^12.1.2",
     "@types/luxon": "^3.3.0",
@@ -68,8 +59,7 @@
     "react-native-web": "~0.19.10",
     "react-native-wheel-picker-expo": "^0.5.4",
     "react-native-wheely": "^0.6.0",
-    "react-test-renderer": "^18.2.0",
-    "tsup": "^8.3.4"
+    "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
@@ -82,7 +72,7 @@
     "@types/react-test-renderer": "^18.0.0",
     "jest": "^29.5.0",
     "jest-expo": "~51.0.4",
-    "prettier": "^3.3.3",
+    "prettier": "2.8.8",
     "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
     "typescript": "~5.3.3"

package/src/components/atoms/animated-wave/animated-wave.component.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AnimatedWave: () => React.JSX.Element;

package/src/components/atoms/animated-wave/animated-wave.component.tsx

@@ -0,0 +1,28 @@
+import React, {useContext} from 'react';
+import {Dimensions, View} from 'react-native';
+import {Stylesheet} from './animated-wave.styles';
+import {ThemeCtx} from '../../../context/theme.context';
+
+const LottieView = require('lottie-react-native');
+
+export const AnimatedWave = () => {
+  const Context = useContext(ThemeCtx);
+  const styles = Stylesheet(Context);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.animationContainer}>
+        <LottieView
+          source={Context.wave.path}
+          style={{
+            width: Dimensions.get('window').width + 64,
+            backgroundColor: Context.colors.main['5'],
+          }}
+          autoPlay
+          loop
+        />
+      </View>
+      <View style={styles.overlay} />
+    </View>
+  );
+};

package/src/components/atoms/animated-wave/animated-wave.preview.tsx

@@ -0,0 +1,20 @@
+import React, {useContext} from 'react';
+import {AnimatedWave} from './animated-wave.component';
+import {View} from 'react-native';
+import {ThemeCtx} from '../../../context/theme.context';
+
+export const AnimatedWavePreview = ({}: {}) => {
+  const context = useContext(ThemeCtx);
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        backgroundColor: context.colors.main['5'],
+      }}
+    >
+      <AnimatedWave />
+    </View>
+  );
+};

package/src/components/atoms/animated-wave/animated-wave.styles.d.ts

@@ -0,0 +1,21 @@
+export function Stylesheet(Context: any): {
+  container: {
+    flex: number;
+    alignItems: 'center';
+    justifyContent: 'flex-start';
+  };
+  animationContainer: {
+    width: '100%';
+    alignItems: 'center';
+    position: 'absolute';
+    top: '-1%';
+    zIndex: number;
+  };
+  overlay: {
+    width: '100%';
+    height: '30%';
+    position: 'absolute';
+    top: '38%';
+    backgroundColor: any;
+  };
+};

package/src/components/atoms/animated-wave/animated-wave.styles.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+    animationContainer: {
+      width: '100%',
+      alignItems: 'center',
+      position: 'absolute',
+      top: '-1%',
+      zIndex: -1,
+    },
+    overlay: {
+      width: '100%',
+      height: '30%',
+      position: 'absolute',
+      top: '38%',
+      backgroundColor: Context.colors.main['3'],
+    },
+  });

package/src/components/atoms/backdrop/backdrop.component.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type PopoverBackdropProps = {
+    isVisible: boolean;
+    touchBackDrop?: (value: boolean) => void;
+};
+declare const Backdrop: ({ isVisible, touchBackDrop }: PopoverBackdropProps) => React.JSX.Element;
+export { Backdrop as Backdrop };

package/src/components/atoms/backdrop/backdrop.component.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
+
+import {ThemeCtx} from '../../../context/theme.context';
+import {Animated} from 'react-native';
+import {Stylesheet} from './backdrop.styles';
+
+type PopoverBackdropProps = {
+  isVisible: boolean;
+  touchBackDrop?: (value: boolean) => void;
+};
+
+const Backdrop = ({isVisible, touchBackDrop}: PopoverBackdropProps) => {
+  const context = useContext(ThemeCtx);
+  const opacity = useMemo(() => new Animated.Value(0), []);
+
+  const styles = Stylesheet(context);
+
+  const open = () => {
+    Animated.timing(opacity, {
+      toValue: 0.75,
+      duration: 80,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const close = () => {
+    Animated.timing(opacity, {
+      toValue: 0,
+      duration: 600,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  if (isVisible) {
+    open();
+  } else {
+    close();
+  }
+
+  return (
+    <Animated.View
+      onTouchStart={() => (touchBackDrop ? touchBackDrop(false) : null)}
+      style={[styles.element, {opacity: opacity}]}
+    />
+  );
+};
+export {Backdrop as Backdrop};

package/src/components/atoms/backdrop/backdrop.styles.d.ts

@@ -0,0 +1,11 @@
+export function Stylesheet(Context: any): {
+  element: {
+    width: '100%';
+    height: '100%';
+    backgroundColor: any;
+    zIndex: number;
+    position: 'absolute';
+    top: number;
+    left: number;
+  };
+};

package/src/components/atoms/backdrop/backdrop.styles.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      height: '100%',
+      backgroundColor: Context.colors.ui.black,
+      zIndex: 1001,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    },
+  });