zebpay-ui 0.0.123 → 0.0.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/components/Accordion/index.d.ts +3 -0
  2. package/dist/cjs/components/Accordion/style.d.ts +5 -6
  3. package/dist/cjs/components/AccordionV2/index.d.ts +2 -0
  4. package/dist/cjs/components/AccordionV2/style.d.ts +2 -3
  5. package/dist/cjs/components/Checkbox/styles.d.ts +6 -6
  6. package/dist/cjs/components/Checkbox/typings.d.ts +1 -0
  7. package/dist/cjs/components/Input/styles.d.ts +10 -13
  8. package/dist/cjs/components/Input/typings.d.ts +3 -2
  9. package/dist/cjs/components/Notes/index.d.ts +5 -0
  10. package/dist/cjs/components/Notes/style.d.ts +22 -0
  11. package/dist/cjs/components/Notes/typings.d.ts +14 -0
  12. package/dist/cjs/components/Radio/styles.d.ts +8 -4
  13. package/dist/cjs/components/Radio/typings.d.ts +3 -1
  14. package/dist/cjs/components/RadioGroup/styles.d.ts +2 -4
  15. package/dist/cjs/components/RadioGroup/typings.d.ts +3 -0
  16. package/dist/cjs/components/SearchInput/index.d.ts +3 -3
  17. package/dist/cjs/components/SearchInput/style.d.ts +3 -8
  18. package/dist/cjs/components/Toast/index.d.ts +1 -1
  19. package/dist/cjs/components/Toast/styles.d.ts +20 -12
  20. package/dist/cjs/components/Toast/typings.d.ts +3 -1
  21. package/dist/cjs/components/index.d.ts +2 -1
  22. package/dist/cjs/index.js +27 -27
  23. package/dist/cjs/index.js.map +1 -1
  24. package/dist/cjs/theme/types.d.ts +12 -0
  25. package/dist/cjs/theme/zColors.d.ts +22 -11
  26. package/dist/esm/components/Accordion/index.d.ts +3 -0
  27. package/dist/esm/components/Accordion/style.d.ts +5 -6
  28. package/dist/esm/components/AccordionV2/index.d.ts +2 -0
  29. package/dist/esm/components/AccordionV2/style.d.ts +2 -3
  30. package/dist/esm/components/Checkbox/styles.d.ts +6 -6
  31. package/dist/esm/components/Checkbox/typings.d.ts +1 -0
  32. package/dist/esm/components/Input/styles.d.ts +10 -13
  33. package/dist/esm/components/Input/typings.d.ts +3 -2
  34. package/dist/esm/components/Notes/index.d.ts +5 -0
  35. package/dist/esm/components/Notes/style.d.ts +22 -0
  36. package/dist/esm/components/Notes/typings.d.ts +14 -0
  37. package/dist/esm/components/Radio/styles.d.ts +8 -4
  38. package/dist/esm/components/Radio/typings.d.ts +3 -1
  39. package/dist/esm/components/RadioGroup/styles.d.ts +2 -4
  40. package/dist/esm/components/RadioGroup/typings.d.ts +3 -0
  41. package/dist/esm/components/SearchInput/index.d.ts +3 -3
  42. package/dist/esm/components/SearchInput/style.d.ts +3 -8
  43. package/dist/esm/components/Toast/index.d.ts +1 -1
  44. package/dist/esm/components/Toast/styles.d.ts +20 -12
  45. package/dist/esm/components/Toast/typings.d.ts +3 -1
  46. package/dist/esm/components/index.d.ts +2 -1
  47. package/dist/esm/index.js +27 -27
  48. package/dist/esm/index.js.map +1 -1
  49. package/dist/esm/theme/types.d.ts +12 -0
  50. package/dist/esm/theme/zColors.d.ts +22 -11
  51. package/package.json +1 -1
@@ -5,11 +5,14 @@ import "./../../../dist/icons/icons.css";
5
5
  import type { Theme } from "../../globalTypings";
6
6
  interface AccordionProps {
7
7
  title: React.ReactNode;
8
+ titleIcon?: string;
9
+ titleIconStyle?: SerializedStyles;
8
10
  isOpen: boolean;
9
11
  onToggle: (value: boolean) => void;
10
12
  style?: SerializedStyles;
11
13
  children?: ReactNode;
12
14
  mode?: Theme;
15
+ disableBorder?: boolean;
13
16
  }
14
17
  declare const Accordion: FC<AccordionProps>;
15
18
  export default Accordion;
@@ -1,7 +1,6 @@
1
1
  import type { Theme } from "../../globalTypings";
2
- export declare const accordionWrapper: (isOpen: boolean, mode?: Theme) => import("@emotion/react").SerializedStyles;
3
- export declare const accordionTitle: import("@emotion/react").SerializedStyles;
4
- export declare const accordionIcon: import("@emotion/react").SerializedStyles;
5
- export declare const accordionCollapsed: import("@emotion/react").SerializedStyles;
6
- export declare const accordionContent: import("@emotion/react").SerializedStyles;
7
- export declare const iconStyle: (isOpen: boolean) => import("@emotion/react").SerializedStyles;
2
+ export declare const accordionWrapper: (isOpen: boolean, mode: Theme, disableBorder: boolean) => import("@emotion/react").SerializedStyles;
3
+ export declare const accordionTitle: (mode: Theme) => import("@emotion/react").SerializedStyles;
4
+ export declare const accordionTitleIcon: import("@emotion/react").SerializedStyles;
5
+ export declare const accordionContent: (mode: Theme) => import("@emotion/react").SerializedStyles;
6
+ export declare const iconStyle: (isOpen: boolean, mode: Theme) => import("@emotion/react").SerializedStyles;
@@ -5,6 +5,8 @@ import "./../../../dist/icons/icons.css";
5
5
  import { Theme } from "../../globalTypings";
6
6
  interface AccordionV2Props {
7
7
  title: React.ReactNode;
8
+ titleIcon?: string;
9
+ titleIconStyle?: SerializedStyles;
8
10
  isOpen: boolean;
9
11
  onToggle: (value: boolean) => void;
10
12
  style?: SerializedStyles;
@@ -1,7 +1,6 @@
1
1
  import { Theme as ThemeType } from "../../globalTypings";
2
2
  export declare const accordionWrapper: (isOpen: boolean, mode: ThemeType, disableBorder: boolean) => import("@emotion/react").SerializedStyles;
3
3
  export declare const accordionTitle: (mode: ThemeType) => import("@emotion/react").SerializedStyles;
4
- export declare const accordionIcon: import("@emotion/react").SerializedStyles;
5
- export declare const accordionCollapsed: import("@emotion/react").SerializedStyles;
4
+ export declare const accordionTitleIcon: import("@emotion/react").SerializedStyles;
6
5
  export declare const accordionContent: (isOpen: boolean, mode: ThemeType) => import("@emotion/react").SerializedStyles;
7
- export declare const iconStyle: (isOpen: boolean) => import("@emotion/react").SerializedStyles;
6
+ export declare const iconStyle: (isOpen: boolean, mode: ThemeType) => import("@emotion/react").SerializedStyles;
@@ -1,9 +1,9 @@
1
1
  import type { Theme } from "../../globalTypings";
2
- export declare const checkboxContainer: import("@emotion/react").SerializedStyles;
3
- export declare const labelContainer: (mode: Theme, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
2
+ export declare const DEFAULT_SIZE = 20;
3
+ export declare const checkboxContainer: (size?: number) => import("@emotion/react").SerializedStyles;
4
+ export declare const labelContainer: (mode: Theme, size?: number, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
4
5
  export declare const disabledLabel: import("@emotion/react").SerializedStyles;
5
- export declare const input: import("@emotion/react").SerializedStyles;
6
- export declare const checkCheckmark: (mode: Theme, indeterminate?: boolean) => import("@emotion/react").SerializedStyles;
6
+ export declare const input: (size?: number, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
7
+ export declare const checkmark: (mode: Theme, size?: number, checked?: boolean, disabled?: boolean, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
8
+ export declare const checkIcon: (mode: Theme, size?: number) => import("@emotion/react").SerializedStyles;
7
9
  export declare const checkLabel: import("@emotion/react").SerializedStyles;
8
- export declare const checkComponent: import("@emotion/react").SerializedStyles;
9
- export declare const checkmark: (mode: Theme, indeterminate?: boolean, alignTop?: boolean) => import("@emotion/react").SerializedStyles;
@@ -14,4 +14,5 @@ export interface CheckboxProps {
14
14
  indeterminate?: boolean;
15
15
  mode?: Theme;
16
16
  alignTop?: boolean;
17
+ size?: number;
17
18
  }
@@ -1,14 +1,11 @@
1
- import { InputTheme } from "./typings";
2
- export declare const invalidInputGroup: import("@emotion/react").SerializedStyles;
3
- export declare const formLabel: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
4
- export declare const activeFormLabel: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
5
- export declare const inputGroup: import("@emotion/react").SerializedStyles;
6
- export declare const focusedInputGroup: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
7
- export declare const formControl: (theme: InputTheme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
8
- export declare const fieldFullRounded: import("@emotion/react").SerializedStyles;
9
- export declare const fieldNoRounded: import("@emotion/react").SerializedStyles;
10
- export declare const fieldSecondHalfRounded: import("@emotion/react").SerializedStyles;
11
- export declare const fieldFirstHalfRounded: import("@emotion/react").SerializedStyles;
12
- export declare const inputGroupText: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
13
- export declare const inputGroupPrepend: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
1
+ import { Theme } from "../../globalTypings";
2
+ export declare const invalidInputGroup: (theme: Theme) => import("@emotion/react").SerializedStyles;
3
+ export declare const formLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
4
+ export declare const activeFormLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
5
+ export declare const errorFormLabel: (theme: Theme) => import("@emotion/react").SerializedStyles;
6
+ export declare const inputGroup: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
7
+ export declare const focusedInputGroup: (theme: Theme) => import("@emotion/react").SerializedStyles;
8
+ export declare const formControl: (theme: Theme, disabled?: boolean) => import("@emotion/react").SerializedStyles;
14
9
  export declare const infoCta: import("@emotion/react").SerializedStyles;
10
+ export declare const infoText: (theme: Theme) => import("@emotion/react").SerializedStyles;
11
+ export declare const errorText: (theme: Theme) => import("@emotion/react").SerializedStyles;
@@ -1,7 +1,6 @@
1
1
  import { SerializedStyles } from "@emotion/react";
2
2
  import React, { KeyboardEvent, WheelEvent } from "react";
3
3
  import { Theme } from "../../globalTypings";
4
- export type InputTheme = Theme | "inputExtraDark";
5
4
  export interface InputTargetProps {
6
5
  value: string;
7
6
  name: string;
@@ -26,7 +25,8 @@ export interface InputProps {
26
25
  onFocus?: () => void;
27
26
  onBlur?: () => void;
28
27
  autoComplete?: "on" | "off";
29
- theme?: InputTheme;
28
+ autoFocus?: boolean;
29
+ theme?: Theme;
30
30
  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
31
31
  onWheel?: (event: WheelEvent<HTMLInputElement>) => void;
32
32
  onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void;
@@ -35,4 +35,5 @@ export interface InputProps {
35
35
  patternType?: string;
36
36
  disabled?: boolean;
37
37
  invalid?: boolean;
38
+ inputGroupStyles?: SerializedStyles;
38
39
  }
@@ -0,0 +1,5 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import React from "react";
3
+ import { NotesProps } from "./typings";
4
+ declare const Notes: React.FC<NotesProps>;
5
+ export default Notes;
@@ -0,0 +1,22 @@
1
+ import { Theme } from "../../globalTypings";
2
+ import { NotesType } from "./typings";
3
+ type NoteColors = {
4
+ fill: string;
5
+ stroke: string;
6
+ title: string;
7
+ description: string;
8
+ icon: string;
9
+ iconBoxBg: string;
10
+ arrow: string;
11
+ };
12
+ export declare const getNoteColors: (mode: Theme, type: NotesType, isMobile: boolean) => NoteColors;
13
+ export declare const notesContainer: (mode: Theme, type: NotesType, isMobile: boolean, hasDescription: boolean) => import("@emotion/react").SerializedStyles;
14
+ export declare const image: import("@emotion/react").SerializedStyles;
15
+ export declare const notesContent: (isMobile: boolean) => import("@emotion/react").SerializedStyles;
16
+ export declare const notesHeader: import("@emotion/react").SerializedStyles;
17
+ export declare const notesIconWrapper: (mode: Theme, type: NotesType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
18
+ export declare const notesTitle: (mode: Theme, type: NotesType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
19
+ export declare const notesDescription: (mode: Theme, type: NotesType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
20
+ export declare const notesIcon: (mode: Theme, type: NotesType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
21
+ export declare const notesArrow: (mode: Theme, type: NotesType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
22
+ export {};
@@ -0,0 +1,14 @@
1
+ import { SerializedStyles } from "@emotion/react";
2
+ import { Theme } from "../../globalTypings";
3
+ export type NotesType = "info" | "error" | "success";
4
+ export interface NotesProps {
5
+ title: string;
6
+ description?: string;
7
+ type?: NotesType;
8
+ mode?: Theme;
9
+ isMobile?: boolean;
10
+ showArrow?: boolean;
11
+ onClick?: () => void;
12
+ style?: SerializedStyles;
13
+ notesImage?: string;
14
+ }
@@ -1,5 +1,9 @@
1
- import { Theme } from "../../globalTypings";
2
- export declare const container: (isListView: boolean) => import("@emotion/react").SerializedStyles;
3
- export declare const input: import("@emotion/react").SerializedStyles;
4
- export declare const checkmark: (theme: Theme, selected: boolean, isListView: boolean) => import("@emotion/react").SerializedStyles;
1
+ import type { Theme } from "../../globalTypings";
2
+ export declare const DEFAULT_SIZE = 20;
3
+ export declare const radioContainer: (size?: number) => import("@emotion/react").SerializedStyles;
4
+ export declare const labelContainer: (mode: Theme, size?: number, isListView?: boolean) => import("@emotion/react").SerializedStyles;
5
+ export declare const disabledLabel: import("@emotion/react").SerializedStyles;
6
+ export declare const input: (size?: number, isListView?: boolean) => import("@emotion/react").SerializedStyles;
7
+ export declare const checkmark: (mode: Theme, size?: number, isListView?: boolean, disabled?: boolean) => import("@emotion/react").SerializedStyles;
8
+ export declare const innerDot: (mode: Theme, size?: number, disabled?: boolean) => import("@emotion/react").SerializedStyles;
5
9
  export declare const listViewStyle: import("@emotion/react").SerializedStyles;
@@ -1,6 +1,6 @@
1
1
  import { SerializedStyles } from "@emotion/react";
2
2
  import React from "react";
3
- import { Theme } from "../../globalTypings";
3
+ import type { Theme } from "../../globalTypings";
4
4
  export interface RadioProps {
5
5
  selected: boolean;
6
6
  onChange: (args: {
@@ -14,4 +14,6 @@ export interface RadioProps {
14
14
  mode?: Theme;
15
15
  checkmarkStyle?: SerializedStyles;
16
16
  isListView?: boolean;
17
+ disabled?: boolean;
18
+ size?: number;
17
19
  }
@@ -1,7 +1,5 @@
1
1
  import { Theme } from "../../globalTypings";
2
- export declare const container: import("@emotion/react").SerializedStyles;
3
- export declare const input: import("@emotion/react").SerializedStyles;
4
- export declare const checkmark: import("@emotion/react").SerializedStyles;
5
2
  export declare const radioGroup: (mode: Theme) => import("@emotion/react").SerializedStyles;
3
+ export declare const radioGroupInline: import("@emotion/react").SerializedStyles;
6
4
  export declare const marginRight: import("@emotion/react").SerializedStyles;
7
- export declare const defaultState: import("@emotion/react").SerializedStyles;
5
+ export declare const defaultState: (mode: Theme) => import("@emotion/react").SerializedStyles;
@@ -6,6 +6,7 @@ export interface OptionProps {
6
6
  value?: string | number;
7
7
  label?: string | React.JSX.Element;
8
8
  id: string;
9
+ disabled?: boolean;
9
10
  }
10
11
  export interface RadioGroupProps {
11
12
  defaultSelected?: string;
@@ -19,4 +20,6 @@ export interface RadioGroupProps {
19
20
  options: Array<OptionProps>;
20
21
  mode?: Theme;
21
22
  isListView?: boolean;
23
+ size?: number;
24
+ disabled?: boolean;
22
25
  }
@@ -1,8 +1,8 @@
1
1
  /** @jsxImportSource @emotion/react */
2
2
  import React from "react";
3
3
  import { SerializedStyles } from "@emotion/react";
4
- import { InputTargetProps, InputTheme } from "./../Input/typings";
5
- import "./../../../dist/icons/icons.css";
4
+ import { InputTargetProps } from "../Input/typings";
5
+ import { Theme } from "../../globalTypings";
6
6
  interface SearchInputProps {
7
7
  value: string | number;
8
8
  placeholder?: string;
@@ -12,7 +12,7 @@ interface SearchInputProps {
12
12
  disableShadow?: boolean;
13
13
  style?: SerializedStyles;
14
14
  isMobile?: boolean;
15
- mode?: InputTheme;
15
+ mode?: Theme;
16
16
  onFocus?: () => void;
17
17
  onBlur?: () => void;
18
18
  closeDropdown?: () => void;
@@ -1,8 +1,3 @@
1
- import { InputTheme } from "../Input/typings";
2
- export declare const inputGroup: (theme: InputTheme, inFocus?: boolean) => import("@emotion/react").SerializedStyles;
3
- export declare const inputPrepend: (theme: InputTheme, isFocused: boolean, customDarkBgcolor?: string) => import("@emotion/react").SerializedStyles;
4
- export declare const focused: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
5
- export declare const searchInput: (isMobile: boolean, theme: InputTheme, isFocused: boolean, onClear?: boolean, customDarkBgcolor?: string) => import("@emotion/react").SerializedStyles;
6
- export declare const searchButton: (theme: InputTheme, customDarkBgcolor?: string) => import("@emotion/react").SerializedStyles;
7
- export declare const disableShadow: import("@emotion/react").SerializedStyles;
8
- export declare const icon: (theme: InputTheme) => import("@emotion/react").SerializedStyles;
1
+ import { Theme } from "../../globalTypings";
2
+ export declare const inputGroupStyles: (theme: Theme, isMobile: boolean, customDarkBgcolor?: string, disableShadow?: boolean) => import("@emotion/react").SerializedStyles;
3
+ export declare const icon: (theme: Theme) => import("@emotion/react").SerializedStyles;
@@ -1,5 +1,5 @@
1
1
  /** @jsxImportSource @emotion/react */
2
2
  import React from "react";
3
3
  import { ToastProps } from "./typings";
4
- export declare const generateToast: ({ title, description, type, onClose, mode, style, }: ToastProps) => void;
4
+ export declare const generateToast: ({ title, description, type, onClose, mode, isMobile, style, }: ToastProps) => void;
5
5
  export declare const Toast: React.FC<ToastProps>;
@@ -1,13 +1,21 @@
1
1
  import { Theme } from "../../globalTypings";
2
- export declare const toastContainer: import("@emotion/react").SerializedStyles;
3
- export declare const toastHeading: import("@emotion/react").SerializedStyles;
4
- export declare const toastDetails: import("@emotion/react").SerializedStyles;
5
- export declare const toastTitle: import("@emotion/react").SerializedStyles;
6
- export declare const closeCta: import("@emotion/react").SerializedStyles;
7
- export declare const toastDescription: (mode: Theme) => import("@emotion/react").SerializedStyles;
8
- export declare const info: import("@emotion/react").SerializedStyles;
9
- export declare const infoToastHeading: import("@emotion/react").SerializedStyles;
10
- export declare const error: import("@emotion/react").SerializedStyles;
11
- export declare const errorToastHeading: import("@emotion/react").SerializedStyles;
12
- export declare const success: import("@emotion/react").SerializedStyles;
13
- export declare const successToastHeading: import("@emotion/react").SerializedStyles;
2
+ import { ToastType } from "./typings";
3
+ type ToastColors = {
4
+ fill: string;
5
+ stroke: string;
6
+ title: string;
7
+ description: string;
8
+ icon: string;
9
+ iconBoxBg: string;
10
+ close: string;
11
+ };
12
+ export declare const getToastColors: (mode: Theme, type: ToastType, isMobile: boolean) => ToastColors;
13
+ export declare const toastContainer: (mode: Theme, type: ToastType, isMobile: boolean, hasDescription: boolean) => import("@emotion/react").SerializedStyles;
14
+ export declare const toastContent: (isMobile: boolean) => import("@emotion/react").SerializedStyles;
15
+ export declare const toastHeader: import("@emotion/react").SerializedStyles;
16
+ export declare const toastIconWrapper: (mode: Theme, type: ToastType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
17
+ export declare const toastTitle: (mode: Theme, type: ToastType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
18
+ export declare const toastDescription: (mode: Theme, type: ToastType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
19
+ export declare const toastIcon: (mode: Theme, type: ToastType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
20
+ export declare const toastClose: (mode: Theme, type: ToastType, isMobile: boolean) => import("@emotion/react").SerializedStyles;
21
+ export {};
@@ -1,9 +1,11 @@
1
1
  import { SerializedStyles } from "@emotion/react";
2
2
  import { Theme } from "../../globalTypings";
3
+ export type ToastType = "info" | "error" | "success";
3
4
  export interface ToastProps {
4
5
  title: string;
5
6
  description?: string;
6
- type: "info" | "error" | "success";
7
+ type?: ToastType;
8
+ isMobile?: boolean;
7
9
  onClose?: () => void;
8
10
  style?: SerializedStyles;
9
11
  mode?: Theme;
@@ -30,4 +30,5 @@ import AvatarGroup from "./AvatarGroup";
30
30
  import Pagination from "./Pagination";
31
31
  import MobileBottomDrawer from "./MobileBottomDrawer";
32
32
  import MobileCalendarPicker from "./MobileCalenderPicker";
33
- export { Accordion, AccordionV2, Button, Card, Checkbox, CircularLoader, CalendarPicker, Divider, Icon, IconButton, IconBox, Input, InputDropDown, PinInput, Popper, Radio, RadioGroup, RewardOMeter, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, Toast, Tooltip, Switch, Avatar, AvatarGroup, Pagination, MobileBottomDrawer, MobileCalendarPicker, generateToast, };
33
+ import Notes from "./Notes";
34
+ export { Accordion, AccordionV2, Button, Card, Checkbox, CircularLoader, CalendarPicker, Divider, Icon, IconButton, IconBox, Input, InputDropDown, PinInput, Popper, Radio, RadioGroup, RewardOMeter, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, Toast, Tooltip, Switch, Avatar, AvatarGroup, Pagination, MobileBottomDrawer, MobileCalendarPicker, Notes, generateToast, };