@tactics/toddle-styleguide 1.3.2 → 1.4.1

package/src/components/atoms/increment-input/increment-input.styles.d.ts

@@ -1,36 +1,35 @@
 export function Stylesheet(Context: any): {
-  container: {
-    width: string;
-    flexDirection: 'row';
-    alignItems: 'center';
-  };
-  buttonContainer: {
-    width: number;
-    height: number;
-    backgroundColor: any;
-    alignItems: 'center';
-    justifyContent: 'center';
-    borderRadius: number;
-  };
-  numberContainer: {
-    width: number;
-    height: number;
-    display: 'flex';
-    justifyContent: 'center';
-    alignItems: 'center';
-    marginRight: number;
-    marginLeft: number;
-    backgroundColor: any;
-    borderWidth: number;
-    borderStyle: 'solid';
-    borderColor: any;
-    borderRadius: number;
-  };
-  number: {
-    textAlignVertical: 'center';
-    justifyContent: 'center';
-    alignItems: 'center';
-    display: 'flex';
-    flex: number;
-  };
+    container: {
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    buttonContainer: {
+        width: number;
+        height: number;
+        backgroundColor: any;
+        alignItems: "center";
+        justifyContent: "center";
+        borderRadius: number;
+    };
+    numberContainer: {
+        width: number;
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        marginRight: number;
+        marginLeft: number;
+        backgroundColor: any;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: any;
+        borderRadius: number;
+    };
+    number: {
+        textAlignVertical: "center";
+        justifyContent: "center";
+        alignItems: "center";
+        display: "flex";
+    };
 };

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

@@ -1,12 +1,9 @@
+import * as React from 'react';
 type Orientation = 'horizontal' | 'vertical';
 interface LineProps {
-  color?: string;
-  thickness?: number;
-  orientation?: Orientation;
+    color?: string;
+    thickness?: number;
+    orientation?: Orientation;
 }
-export declare const Line: ({
-  color,
-  thickness,
-  orientation,
-}: LineProps) => JSX.Element;
+export declare const Line: ({ color, thickness, orientation, }: LineProps) => React.JSX.Element;
 export {};

package/src/components/atoms/line/line.preview.d.ts

@@ -1 +1,2 @@
-export declare const LinePreview: () => JSX.Element;
+/// <reference types="react" />
+export declare const LinePreview: () => import("react").JSX.Element;

package/src/components/atoms/line/line.preview.tsx

@@ -2,6 +2,7 @@ import {View} from 'react-native';
 import {Line} from './line.component';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
+import React from 'react';
 
 export const LinePreview = () => {
   const context = useContext(ThemeCtx);

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

@@ -1,6 +1,7 @@
+import React from 'react';
 type logoProps = {
-  colorIsWhite?: boolean;
-  big?: boolean;
+    colorIsWhite?: boolean;
+    big?: boolean;
 };
-declare const Logo: ({colorIsWhite, big}: logoProps) => JSX.Element;
-export {Logo as Logo};
+declare const Logo: ({ colorIsWhite, big }: logoProps) => React.JSX.Element;
+export { Logo as Logo };

package/src/components/atoms/logo/logo.preview.d.ts

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

package/src/components/atoms/paragraph-components/index.d.ts

@@ -1,4 +1,4 @@
-import {Paragraph} from './paragraph/paragraph.component';
-import {SmallText} from './small-text/small-text.component';
-import {TinyText} from './tiny-text/tiny-text.component';
-export {Paragraph, SmallText, TinyText};
+import { Paragraph } from './paragraph/paragraph.component';
+import { SmallText } from './small-text/small-text.component';
+import { TinyText } from './tiny-text/tiny-text.component';
+export { Paragraph, SmallText, TinyText };

package/src/components/atoms/paragraph-components/paragraph/paragraph.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const Paragraph: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  numberOfLines,
-  ellipsizeMode,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const Paragraph: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/paragraph-components/paragraph-components.preview.d.ts

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

package/src/components/atoms/paragraph-components/small-text/small-text.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const SmallText: ({
-  bold,
-  textColor,
-  textAlign,
-  children,
-  addStyle,
-  ellipsizeMode,
-  numberOfLines,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const SmallText: ({ bold, textColor, textAlign, children, addStyle, ellipsizeMode, numberOfLines, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/paragraph-components/tiny-text/tiny-text.component.d.ts

@@ -1,10 +1,3 @@
-import {TextProperties} from '../../../../types/text-properties.type';
-export declare const TinyText: ({
-  bold,
-  children,
-  textColor,
-  textAlign,
-  addStyle,
-  numberOfLines,
-  ellipsizeMode,
-}: TextProperties) => JSX.Element;
+import React from 'react';
+import { TextProperties } from '../../../../types/text-properties.type';
+export declare const TinyText: ({ bold, children, textColor, textAlign, addStyle, numberOfLines, ellipsizeMode, }: TextProperties) => React.JSX.Element;

package/src/components/atoms/quick-message/quick-message.component.d.ts

@@ -1,13 +1,9 @@
-import {PressableProps} from 'react-native';
+import { PressableProps } from 'react-native';
+import React from 'react';
 interface QuickMessageProps extends PressableProps {
-  message: string;
-  setMessage: (value: string) => void;
-  selectedMessage: boolean;
+    message: string;
+    setMessage: (value: string) => void;
+    selectedMessage: boolean;
 }
-export declare const QuickMessage: ({
-  message,
-  setMessage,
-  selectedMessage,
-  ...props
-}: QuickMessageProps) => JSX.Element;
+export declare const QuickMessage: ({ message, setMessage, selectedMessage, ...props }: QuickMessageProps) => React.JSX.Element;
 export {};

package/src/components/atoms/quick-message/quick-message.component.tsx

@@ -3,6 +3,7 @@ import {Paragraph} from '../paragraph-components';
 import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './quick-message.styles';
+import React from 'react';
 
 interface QuickMessageProps extends PressableProps {
   message: string;

package/src/components/atoms/quick-message/quick-message.preview.d.ts

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

package/src/components/atoms/quick-message/quick-message.preview.tsx

@@ -1,6 +1,7 @@
 import {Text, View} from 'react-native';
 import {QuickMessage} from './quick-message.component';
 import {useState} from 'react';
+import React from 'react';
 
 export const QuickMessagePreview = () => {
   const [message, setMessage] = useState<string>('');

package/src/components/atoms/quick-message/quick-message.styles.d.ts

@@ -1,17 +1,14 @@
-export function Stylesheet(
-  context: any,
-  selectedMessage: any
-): {
-  container: {
-    width: string;
-    backgroundColor: any;
-    paddingTop: number;
-    paddingBottom: number;
-    paddingRight: number;
-    paddingLeft: number;
-    borderBottomLeftRadius: number;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-    borderBottomRightRadius: number;
-  };
+export function Stylesheet(context: any, selectedMessage: any): {
+    container: {
+        width: "100%";
+        backgroundColor: any;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingRight: number;
+        paddingLeft: number;
+        borderBottomLeftRadius: number;
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
 };

package/src/components/atoms/split-container/split-container.component.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 type splitContainerProps = {
-  element1: React.ReactNode;
-  element2?: React.ReactNode;
+    element1: React.ReactNode;
+    element2?: React.ReactNode;
 };
-declare const SplitContainer: ({
-  element1,
-  element2,
-}: splitContainerProps) => JSX.Element;
-export {SplitContainer as SplitContainer};
+declare const SplitContainer: ({ element1, element2 }: splitContainerProps) => React.JSX.Element;
+export { SplitContainer as SplitContainer };

package/src/components/atoms/split-container/split-container.preview.d.ts

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

package/src/components/atoms/split-container/split-container.styles.d.ts

@@ -1,14 +1,14 @@
 export function Stylesheet(context: any): {
-  element: {
-    width: string;
-    paddingRight: number;
-    paddingLeft: number;
-  };
-  inner: {
-    flexDirection: 'row';
-    justifyContent: 'center';
-  };
-  twoElements: {
-    justifyContent: 'space-between';
-  };
+    element: {
+        width: "100%";
+        paddingRight: number;
+        paddingLeft: number;
+    };
+    inner: {
+        flexDirection: "row";
+        justifyContent: "center";
+    };
+    twoElements: {
+        justifyContent: "space-between";
+    };
 };

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

@@ -1,13 +1,9 @@
-import {ViewStyle} from 'react-native';
+import React from 'react';
+import { ViewStyle } from 'react-native';
 export type WaveProps = {
-  customStyle?: ViewStyle;
-  customWavePath?: string;
-  heightSvgContainer?: number;
-  positionTop?: number;
+    customStyle?: ViewStyle;
+    customWavePath?: string;
+    heightSvgContainer?: number;
+    positionTop?: number;
 };
-export declare const StaticWave: ({
-  customStyle,
-  customWavePath,
-  heightSvgContainer,
-  positionTop,
-}: WaveProps) => JSX.Element;
+export declare const StaticWave: ({ customStyle, customWavePath, heightSvgContainer, positionTop, }: WaveProps) => React.JSX.Element;

package/src/components/atoms/text-input/text-input.component.d.ts

@@ -1,12 +1,9 @@
-import {TextInputProps as NativeTextInputProps} from 'react-native';
-import {KeyBoardTypes} from '../../../types/keyboard-types.enum';
+import * as React from 'react';
+import { TextInputProps as NativeTextInputProps } from 'react-native';
+import { KeyBoardTypes } from '../../../types/keyboard-types.enum';
 interface TextInputProps extends NativeTextInputProps {
-  keyboardType: KeyBoardTypes;
-  border?: boolean;
+    keyboardType: KeyBoardTypes;
+    border?: boolean;
 }
-declare const TextInput: ({
-  keyboardType,
-  border,
-  ...props
-}: TextInputProps) => JSX.Element;
-export {TextInput as TextInput};
+declare const TextInput: ({ keyboardType, border, ...props }: TextInputProps) => React.JSX.Element;
+export { TextInput as TextInput };

package/src/components/atoms/text-input/text-input.preview.d.ts

@@ -1 +1,2 @@
-export declare const TextInputPreview: ({}: {}) => JSX.Element;
+import React from 'react';
+export declare const TextInputPreview: ({}?: {}) => React.JSX.Element;

package/src/components/molecules/avatar/avatar.component.d.ts

@@ -1,20 +1,14 @@
-import {ImageSourcePropType} from 'react-native';
-import {Size} from '../../../types/size.enum';
-import {Initials} from '../../../models/initials.model';
+import * as React from 'react';
+import { ImageSourcePropType } from 'react-native';
+import { Size } from '../../../types/size.enum';
+import { Initials } from '../../../models/initials.model';
 type AvatarProps = {
-  source: ImageSourcePropType | Initials;
-  size: Size;
-  isBlocked?: boolean;
-  isActive?: boolean;
-  isLoading?: boolean;
-  hasShadow?: boolean;
+    source: ImageSourcePropType | Initials;
+    size: Size;
+    isBlocked?: boolean;
+    isActive?: boolean;
+    isLoading?: boolean;
+    hasShadow?: boolean;
 };
-declare const Avatar: ({
-  source,
-  size,
-  isBlocked,
-  isActive,
-  isLoading,
-  hasShadow,
-}: AvatarProps) => JSX.Element;
-export {Avatar as Avatar};
+declare const Avatar: ({ source, size, isBlocked, isActive, isLoading, hasShadow, }: AvatarProps) => React.JSX.Element;
+export { Avatar as Avatar };

package/src/components/molecules/avatar/avatar.preview.d.ts

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

package/src/components/molecules/blocked-message/blocked-message.component.d.ts

@@ -1,7 +1,6 @@
+import * as React from 'react';
 type BlockedMessageProps = {
-  message: string;
+    message: string;
 };
-export declare const BlockedMessage: ({
-  message,
-}: BlockedMessageProps) => JSX.Element;
+export declare const BlockedMessage: ({ message }: BlockedMessageProps) => React.JSX.Element;
 export {};

package/src/components/molecules/blocked-message/blocked-message.preview.d.ts

@@ -1 +1,2 @@
-export declare const BlockedMessagePreview: ({}: {}) => JSX.Element;
+import * as React from 'react';
+export declare const BlockedMessagePreview: ({}: {}) => React.JSX.Element;

package/src/components/molecules/button/button.component.d.ts

@@ -1,23 +1,15 @@
-import {PressableProps} from 'react-native';
-import {IconNameType, IconStyleType} from '../../../types/icontype.type';
+import * as React from 'react';
+import { PressableProps } from 'react-native';
+import { IconNameType, IconStyleType } from '../../../types/icontype.type';
 type ButtonType = 'regular' | 'error' | 'success' | 'light';
 interface ButtonProps extends PressableProps {
-  label: string;
-  icon?: boolean;
-  iconStyle?: IconStyleType;
-  iconName?: IconNameType;
-  iconSize?: number;
-  disabled?: boolean;
-  type?: ButtonType;
+    label: string;
+    icon?: boolean;
+    iconStyle?: IconStyleType;
+    iconName?: IconNameType;
+    iconSize?: number;
+    disabled?: boolean;
+    type?: ButtonType;
 }
-declare const Button: ({
-  label,
-  icon,
-  iconStyle,
-  iconName,
-  iconSize,
-  disabled,
-  type,
-  ...props
-}: ButtonProps) => JSX.Element;
-export {Button as Button};
+declare const Button: ({ label, icon, iconStyle, iconName, iconSize, disabled, type, ...props }: ButtonProps) => React.JSX.Element;
+export { Button as Button };

package/src/components/molecules/button/button.preview.d.ts

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

package/src/components/molecules/calendar-select/calendar-select.component.d.ts

@@ -1,14 +1,10 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import * as React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type CalendarSelectProps = {
-  onPressDate: (date: ToddleDateTime) => void;
-  startDate: ToddleDateTime;
-  pressChevronRight: (date: ToddleDateTime) => void;
-  pressChevronLeft: (date: ToddleDateTime) => void;
+    onPressDate: (date: ToddleDateTime) => void;
+    startDate: ToddleDateTime;
+    pressChevronRight: (date: ToddleDateTime) => void;
+    pressChevronLeft: (date: ToddleDateTime) => void;
 };
-declare const CalendarSelect: ({
-  onPressDate,
-  startDate,
-  pressChevronLeft,
-  pressChevronRight,
-}: CalendarSelectProps) => JSX.Element;
-export {CalendarSelect as CalendarSelect};
+declare const CalendarSelect: ({ onPressDate, startDate, pressChevronLeft, pressChevronRight, }: CalendarSelectProps) => React.JSX.Element;
+export { CalendarSelect as CalendarSelect };

package/src/components/molecules/calendar-select/calendar-select.preview.d.ts

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

package/src/components/molecules/cancel-link/cancel-link.component.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 type CancelLinkProps = {
-  label: string;
-  onPress: () => void;
+    label: string;
+    onPress: () => void;
 };
-declare const CancelLink: ({label, onPress}: CancelLinkProps) => JSX.Element;
-export {CancelLink as CancelLink};
+declare const CancelLink: ({ label, onPress }: CancelLinkProps) => React.JSX.Element;
+export { CancelLink as CancelLink };

package/src/components/molecules/cancel-link/cancel-link.preview.d.ts

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

package/src/components/molecules/checkbox/checkbox.component.d.ts

@@ -1,11 +1,8 @@
+import * as React from 'react';
 type CheckboxProps = {
-  value: boolean;
-  onValueChange: () => void;
-  label: string;
+    value: boolean;
+    onValueChange: () => void;
+    label: string;
 };
-declare const Checkbox: ({
-  value,
-  onValueChange,
-  label,
-}: CheckboxProps) => JSX.Element;
-export {Checkbox as Checkbox};
+declare const Checkbox: ({ value, onValueChange, label }: CheckboxProps) => React.JSX.Element;
+export { Checkbox as Checkbox };

package/src/components/molecules/checkbox/checkbox.preview.d.ts

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

package/src/components/molecules/contact-role/contact-role.component.d.ts

@@ -1,9 +1,7 @@
+import * as React from 'react';
 type ContactRoleProps = {
-  name: string;
-  role?: string;
+    name: string;
+    role?: string;
 };
-export declare const ContactRole: ({
-  name,
-  role,
-}: ContactRoleProps) => JSX.Element;
+export declare const ContactRole: ({ name, role }: ContactRoleProps) => React.JSX.Element;
 export {};

package/src/components/molecules/contact-role/contact-role.preview.d.ts

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

package/src/components/molecules/date-input/date-input.component.d.ts

@@ -1,10 +1,8 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DateInputProps = {
-  onPress: () => void;
-  value: ToddleDateTime;
+    onPress: () => void;
+    value: ToddleDateTime;
 };
-export declare const DateInput: ({
-  onPress,
-  value,
-}: DateInputProps) => JSX.Element;
+export declare const DateInput: ({ onPress, value }: DateInputProps) => React.JSX.Element;
 export {};

package/src/components/molecules/date-input/date-input.preview.d.ts

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

package/src/components/molecules/date-input/date-input.styles.d.ts

@@ -1,24 +1,18 @@
 export function Stylesheet(Context: any): {
-  dateInputContainer: {
-    width: string;
-    height: number;
-    flexDirection: 'row';
-    alignItems: 'center';
-    justifyContent: 'space-between';
-    backgroundColor: any;
-    paddingTop: number;
-    paddingRight: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    borderWidth: number;
-    borderStyle: 'solid';
-    borderColor: any;
-    borderRadius: number;
-  };
-  text: {
-    color: any;
-    fontFamily: string;
-    fontSize: number;
-    lineHeight: number;
-  };
+    dateInputContainer: {
+        width: "100%";
+        height: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+        backgroundColor: any;
+        paddingTop: number;
+        paddingRight: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderColor: any;
+        borderRadius: number;
+    };
 };

package/src/components/molecules/day/day.component.d.ts

@@ -1,8 +1,9 @@
-import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
+import React from 'react';
+import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-datetime.class';
 type DayProps = {
-  date: ToddleDateTime;
-  onSelect: (date: ToddleDateTime) => void;
-  isSelected?: boolean;
+    date: ToddleDateTime;
+    onSelect: (date: ToddleDateTime) => void;
+    isSelected?: boolean;
 };
-declare const Day: ({onSelect, date, isSelected}: DayProps) => JSX.Element;
-export {Day as Day};
+declare const Day: ({ onSelect, date, isSelected }: DayProps) => React.JSX.Element;
+export { Day as Day };