@tactics/toddle-styleguide 0.0.4 → 0.0.6

package/src/components/atoms/image-bubble/image-bubble.styles.d.ts

@@ -0,0 +1,35 @@
+export function Stylesheet(
+  context: any,
+  bubbleAlignment: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            maxWidth: string;
+            borderRadius: number;
+            overflow: string;
+            justifyContent: string;
+            alignItems: string;
+            borderBottomLeftRadius?: undefined;
+            borderBottomRightRadius?: undefined;
+            marginRight?: undefined;
+            marginLeft?: undefined;
+          }
+        | {
+            borderBottomLeftRadius: number;
+            borderBottomRightRadius: number;
+            marginRight: number;
+            marginLeft: number;
+            maxWidth?: undefined;
+            borderRadius?: undefined;
+            overflow?: undefined;
+            justifyContent?: undefined;
+            alignItems?: undefined;
+          }
+      )[];
+      image: {
+        resizeMode: 'cover';
+      };
+    }>;
+import {StyleSheet} from 'react-native';

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

@@ -0,0 +1,6 @@
+declare type IncrementInputProps = {
+    value: number;
+    onPress: (number: number) => void;
+};
+export declare const IncrementInput: ({ value, onPress }: IncrementInputProps) => JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export declare const IncrementInputPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,46 @@
+export function Stylesheet(Context: any): {
+  container: {
+    width: string;
+    display: 'flex';
+    flexDirection: 'row';
+    alignItems: 'center';
+    justifyContent: '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';
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    marginRight: number;
+    marginLeft: number;
+    backgroundColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderColor: any;
+    borderRadius: number;
+  };
+  number: {
+    textAlign: 'center';
+    textAlignVertical: 'center';
+    justifyContent: 'center';
+    alignItems: 'center';
+    display: 'flex';
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

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

@@ -0,0 +1,6 @@
+declare type InfoProps = {
+    label: string;
+    description: string;
+};
+declare const Info: ({ label, description }: InfoProps) => JSX.Element;
+export { Info as Info };

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

@@ -0,0 +1 @@
+export declare const InfoPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,24 @@
+export function Stylesheet(context: any): {
+  container: {
+    width: string;
+    backgroundColor: any;
+    borderRadius: number;
+    alignItems: 'flex-start';
+    justifyContent: 'flex-start';
+    paddingVertical: number;
+    paddingHorizontal: number;
+  };
+  label: {
+    color: any;
+    marginBottom: number;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  description: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

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

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

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

@@ -0,0 +1 @@
+export declare const LogoPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,7 @@
+import { VisualState } from '../../../types/visual-state.enum';
+declare type PillProps = {
+    variant: VisualState;
+    label: string;
+};
+declare const Pill: ({ variant, label }: PillProps) => JSX.Element;
+export { Pill as Pill };

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

@@ -0,0 +1 @@
+export declare const PillPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,32 @@
+export function Stylesheet(
+  context: any,
+  variant: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            borderRadius: number;
+            alignItems: string;
+            justifyContent: string;
+            paddingVertical: number;
+            paddingHorizontal: number;
+            backgroundColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            borderRadius?: undefined;
+            alignItems?: undefined;
+            justifyContent?: undefined;
+            paddingVertical?: undefined;
+            paddingHorizontal?: undefined;
+          }
+      )[];
+      label: {
+        color: any;
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+      };
+    }>;
+import {StyleSheet} from 'react-native';

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

@@ -0,0 +1,5 @@
+declare type PopoverBackdropProps = {
+    isVisible: boolean;
+};
+declare const Backdrop: ({ isVisible }: PopoverBackdropProps) => JSX.Element;
+export { Backdrop as Backdrop };

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

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

package/src/components/atoms/popover/components/foreground/foreground.component.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Modal } from '../modal/modal.component';
+declare type PopoverForegroundProps = {
+    children: React.ReactElement<typeof Modal>;
+};
+declare const Foreground: ({ children }: PopoverForegroundProps) => JSX.Element;
+export { Foreground as Foreground };

package/src/components/atoms/popover/components/foreground/foreground.styles.d.ts

@@ -0,0 +1,12 @@
+export function Stylesheet(Context: any): {
+  element: {
+    width: string;
+    height: string;
+    paddingRight: number;
+    paddingLeft: number;
+    zIndex: number;
+    position: 'absolute';
+    top: number;
+    left: number;
+  };
+};

package/src/components/atoms/popover/components/index.d.ts

@@ -0,0 +1,4 @@
+import {Backdrop} from './backdrop/backdrop.component';
+import {Foreground} from './foreground/foreground.component';
+import {Modal} from './modal/modal.component';
+export {Backdrop, Foreground, Modal};

package/src/components/atoms/popover/components/modal/close/close.component.d.ts

@@ -0,0 +1,6 @@
+import { GestureResponderEvent } from 'react-native';
+declare type ModalCloseProps = {
+    onPress: (event: GestureResponderEvent) => void;
+};
+declare const Close: ({ onPress }: ModalCloseProps) => JSX.Element;
+export { Close as Close };

package/src/components/atoms/popover/components/modal/close/close.styles.d.ts

@@ -0,0 +1,9 @@
+export function Stylesheet(Context: any): {
+  element: {
+    color: any;
+    position: 'absolute';
+    top: number;
+    right: number;
+    zIndex: number;
+  };
+};

package/src/components/atoms/popover/components/modal/heading/heading.component.d.ts

@@ -0,0 +1,6 @@
+declare type ModalHeadingProps = {
+    title: string;
+    subtitle?: string;
+};
+declare const Heading: ({ title, subtitle }: ModalHeadingProps) => JSX.Element;
+export { Heading as Heading };

package/src/components/atoms/popover/components/modal/heading/heading.styles.d.ts

@@ -0,0 +1,22 @@
+export function Stylesheet(Context: any): {
+  element: {
+    display: 'flex';
+    flexDirection: 'column';
+    marginBottom: number;
+  };
+  title: {
+    display: 'flex';
+    textAlign: 'center';
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  subtitle: {
+    display: 'flex';
+    textAlign: 'center';
+    marginTop: number;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

package/src/components/atoms/popover/components/modal/modal.component.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare type PopoverModalProps = {
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    isVisible: boolean;
+    children: React.ReactNode;
+    windowHeight: number;
+};
+declare const Modal: ({ isVisible, title, subtitle, onClose, children, windowHeight, }: PopoverModalProps) => JSX.Element;
+export { Modal as Modal };

package/src/components/atoms/popover/components/modal/modal.styles.d.ts

@@ -0,0 +1,18 @@
+export function Stylesheet(Context: any): {
+  element: {
+    position: 'relative';
+    display: 'flex';
+    alignItems: 'stretch';
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    backgroundColor: any;
+  };
+  inner: {
+    display: 'flex';
+    alignItems: 'stretch';
+  };
+};

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.component.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare type ModalScrollContentProps = {
+    children: React.ReactNode;
+};
+declare const ScrollContent: ({ children }: ModalScrollContentProps) => JSX.Element;
+export { ScrollContent as ScrollContent };

package/src/components/atoms/popover/components/modal/scroll-content/scroll-content.styles.d.ts

@@ -0,0 +1,6 @@
+export function Stylesheet(Context: any): {
+  element: {
+    display: 'flex';
+    alignItems: 'stretch';
+  };
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type PopoverProps = {
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    isVisible: boolean;
+    children?: React.ReactNode;
+};
+declare const Popover: ({ isVisible, title, subtitle, onClose, children, }: PopoverProps) => JSX.Element;
+export { Popover as Popover };

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

@@ -0,0 +1,8 @@
+export function Stylesheet(Context: any): {
+  element: {
+    zIndex: number;
+    top: number;
+    left: number;
+    position: 'absolute';
+  };
+};

package/src/components/atoms/pressable-icon/pressable-icon.component.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare type PressableIconProps = {
+    icon: React.ReactElement;
+    inverted?: boolean;
+    disabled?: boolean;
+    onPress?: () => void;
+};
+export declare const PressableIcon: ({ icon, inverted, disabled, onPress, }: PressableIconProps) => JSX.Element;
+export {};

package/src/components/atoms/pressable-icon/pressable-icon.preview.d.ts

@@ -0,0 +1 @@
+export declare const PressableIconPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/pressable-icon/pressable-icon.styles.d.ts

@@ -0,0 +1,20 @@
+export function Stylesheet(
+  context: any,
+  disabled: any
+): {
+  container: {
+    flexDirection: 'row';
+    justifyContent: 'center';
+    alignItems: 'center';
+    borderRadius: number;
+    width: number;
+    height: number;
+    padding: number;
+  };
+  backgroundDefault: {
+    backgroundColor: any;
+  };
+  backgroundInverted: {
+    backgroundColor: any;
+  };
+};

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

@@ -0,0 +1,10 @@
+import { VisualState } from '../../../types/visual-state.enum';
+declare type QuickFilterProps = {
+    id: string;
+    amount: number;
+    isSelected?: boolean;
+    onSelect: (id: string) => void;
+    visualState: VisualState;
+};
+declare const QuickFilter: ({ id, amount, isSelected, onSelect, visualState, }: QuickFilterProps) => JSX.Element;
+export { QuickFilter as QuickFilter };

package/src/components/atoms/quick-filter/quick-filter.prevriew.d.ts

@@ -0,0 +1 @@
+export declare const QuickFilterPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,46 @@
+export function Stylesheet(
+  context: any,
+  visualState: any,
+  isSelected: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            alignItems: string;
+            justifyContent: string;
+            borderRadius: number;
+            borderStyle: string;
+            borderWidth: number;
+            overflow: string;
+            width: number;
+            height: number;
+            backgroundColor?: undefined;
+            borderColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            borderColor: any;
+            alignItems?: undefined;
+            justifyContent?: undefined;
+            borderRadius?: undefined;
+            borderStyle?: undefined;
+            borderWidth?: undefined;
+            overflow?: undefined;
+            width?: undefined;
+            height?: undefined;
+          }
+      )[];
+      text: (
+        | {
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            color?: undefined;
+          }
+        | {
+            color: any;
+          }
+      )[];
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/select-list-item/select-list-item-preview.d.ts

@@ -0,0 +1 @@
+export declare const SelectListItemPreview: ({}: {}) => JSX.Element;

package/src/components/atoms/select-list-item/select-list-item.component.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare type SelectListProps = {
+    title: string;
+    subtitle?: string;
+    icon: React.ReactElement;
+    onPress?: () => void;
+    inverse?: boolean;
+};
+declare const SelectListItem: ({ title, subtitle, icon, onPress, inverse, }: SelectListProps) => JSX.Element;
+export { SelectListItem as SelectListItem };

package/src/components/atoms/select-list-item/select-list-item.styles.d.ts

@@ -0,0 +1,40 @@
+export function Stylesheet(
+  context: any,
+  inverse: any
+): {
+  container: {
+    width: string;
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  iconCircle: {
+    justifyContent: 'center';
+    alignItems: 'center';
+    backgroundColor: any;
+    width: number;
+    height: number;
+    borderRadius: number;
+    marginRight: number;
+  };
+  textContainer: {
+    flex: number;
+    flexDirection: 'column';
+  };
+  title: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  subtitle: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+  iconSquare: {
+    marginLeft: number;
+    width: number;
+    height: number;
+  };
+};

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

@@ -0,0 +1,7 @@
+import { VisualState } from '../../../types/visual-state.enum';
+declare type SnackbarProps = {
+    text: string;
+    variant: VisualState;
+};
+declare const Snackbar: ({ text, variant }: SnackbarProps) => JSX.Element;
+export { Snackbar as Snackbar };

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

@@ -0,0 +1 @@
+export declare const SnackbarPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,61 @@
+export function Stylesheet(
+  Context: any,
+  variant: any
+):
+  | StyleSheet.NamedStyles<any>
+  | StyleSheet.NamedStyles<{
+      container: (
+        | {
+            flexDirection: string;
+            paddingRight: number;
+            paddingLeft: number;
+            paddingTop: number;
+            paddingBottom: number;
+            overflow: string;
+            alignItems: string;
+            borderColor: string;
+            borderRadius: number;
+            elevation: number;
+            backgroundColor?: undefined;
+          }
+        | {
+            backgroundColor: any;
+            flexDirection?: undefined;
+            paddingRight?: undefined;
+            paddingLeft?: undefined;
+            paddingTop?: undefined;
+            paddingBottom?: undefined;
+            overflow?: undefined;
+            alignItems?: undefined;
+            borderColor?: undefined;
+            borderRadius?: undefined;
+            elevation?: undefined;
+          }
+      )[];
+      textContainer: {
+        flex: number;
+        justifyContent: 'center';
+        alignContent: 'center';
+        paddingLeft: number;
+        paddingRight: number;
+      };
+      text: (
+        | {
+            fontFamily: string;
+            fontSize: number;
+            lineHeight: number;
+            color?: undefined;
+          }
+        | {
+            color: any;
+          }
+      )[];
+      iconContainer: {
+        height: number;
+        width: number;
+        marginRight: number;
+        alignItems: 'center';
+        justifyContent: 'center';
+      };
+    }>;
+import {StyleSheet} from 'react-native';

package/src/components/atoms/swipe/Swipe.styles.d.ts

@@ -0,0 +1,7 @@
+export function Stylesheet(context: any): {
+  container: {
+    alignItems: 'center';
+    justifyContent: 'center';
+    height: number;
+  };
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+declare type SwipeProps = {
+    children: React.ReactNode;
+};
+declare const Swipe: ({ children }: SwipeProps) => JSX.Element;
+export { Swipe as Swipe };

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

@@ -0,0 +1 @@
+export declare const SwipePreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,12 @@
+export interface TagPressEvent {
+    value: string;
+    isSelected: boolean;
+}
+declare type TagProps = {
+    value: string;
+    text: string;
+    isSelected?: boolean;
+    onPress: (event: TagPressEvent) => void;
+};
+declare const Tag: ({ text, isSelected, onPress, value }: TagProps) => JSX.Element;
+export { Tag as Tag };

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

@@ -0,0 +1 @@
+export declare const TagPreview: ({}: {}) => JSX.Element;

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

@@ -0,0 +1,19 @@
+export function Stylesheet(
+  context: any,
+  isSelected: any
+): {
+  container: {
+    borderRadius: number;
+    alignItems: 'center';
+    justifyContent: 'center';
+    paddingVertical: number;
+    paddingHorizontal: number;
+    backgroundColor: any;
+  };
+  text: {
+    color: any;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+  };
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { VisualState } from '../../../types/visual-state.enum';
+import { BubbleAlignment } from '../../../types/bubble-alignment.enum';
+declare type TextBubbleProps = {
+    text: string;
+    visualState: VisualState;
+    bubbleAlignment: BubbleAlignment;
+};
+declare const TextBubble: React.FC<TextBubbleProps>;
+export { TextBubble as TextBubble };

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

@@ -0,0 +1 @@
+export declare const TextBubblePreview: ({}: {}) => JSX.Element;