zebpay-ui 0.0.19 → 0.0.21

package/README.md

@@ -1,8 +1,8 @@
 # znew.design.system
 
-Component Library and Design System for Z new
+A Component Library and Design System created using React for ZebPay.
 
-# Steps to add a new icon:
+### Steps to add a new icon:
 
 ```
 - Add the icon svg in /svgs directory
@@ -10,7 +10,7 @@ Component Library and Design System for Z new
 - Run yarn build:icons; yarn storybook
 ```
 
-### Build steps:
+### Steps to build:
 
 ```
 yarn install;
@@ -18,3 +18,9 @@ yarn clear:output;
 yarn build:icons;
 yarn build;
 ```
+
+### Steps to release:
+
+```
+npm login; npm publish
+```

package/dist/cjs/components/Accordion/index.d.ts

@@ -1,10 +1,11 @@
 /** @jsxImportSource @emotion/react */
 import { SerializedStyles } from "@emotion/react";
-import { FC } from "react";
+import React, { FC } from "react";
 import "./../../../dist/icons/icons.css";
 interface AccordionProps {
-    title: string;
-    onToggle?: (value: boolean) => void;
+    title: React.ReactNode;
+    isOpen: boolean;
+    onToggle: (value: boolean) => void;
     style?: SerializedStyles;
 }
 declare const Accordion: FC<AccordionProps>;

package/dist/cjs/components/Button/typings.d.ts

@@ -1,5 +1,6 @@
 import { Interpolation, Theme } from "@emotion/react";
 export declare type ButtonSize = "small" | "medium" | "large" | "full-width";
+export declare type ButtonTypeAttribute = "button" | "reset" | "submit";
 export declare type ButtonType = "link" | "primary" | "secondary" | "special" | "tertiary" | "tab";
 export interface ButtonProps {
     type: ButtonType;
@@ -8,4 +9,5 @@ export interface ButtonProps {
     disabled?: boolean;
     loading?: boolean;
     style?: Interpolation<Theme>;
+    typeAttribute?: ButtonTypeAttribute;
 }

package/dist/cjs/components/Icon.d.ts

@@ -0,0 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import * as React from "react";
+import { SerializedStyles } from "@emotion/react";
+interface IconProps {
+    name: string;
+    style?: SerializedStyles;
+}
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/cjs/components/IconButton/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import * as React from "react";
+import { IconButtonProps } from "./typings";
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

package/dist/cjs/components/IconButton/typings.d.ts

@@ -0,0 +1,6 @@
+import { ButtonProps } from "../Button/typings";
+import { SerializedStyles } from "@emotion/react";
+export interface IconButtonProps extends ButtonProps {
+    icon: string;
+    iconStyles?: SerializedStyles;
+}

package/dist/cjs/components/Input/typings.d.ts

@@ -20,4 +20,5 @@ export interface InputProps {
         label: string;
         onClick: () => void;
     };
+    autoComplete?: "on" | "off";
 }

package/dist/cjs/components/PinInput/typing.d.ts

@@ -1,9 +1,8 @@
 import { SerializedStyles } from "@emotion/react";
-import React, { ReactText } from "react";
+import React from "react";
 export declare type PinInputProps = {
     label?: string;
     values: string[];
-    type?: ReactText;
     mask?: boolean;
     autoFocus?: boolean;
     onChange?: (value: string | string[], index: number, values: string[]) => void;

package/dist/cjs/components/Popper/typings.d.ts

@@ -1,7 +1,10 @@
 import { SerializedStyles } from "@emotion/react";
 import { ReactElement } from "react";
+export declare type Position = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export interface PopperProps {
     content: ReactElement;
     onClose?: () => void;
+    containerStyle?: SerializedStyles;
     style?: SerializedStyles;
+    position?: Position;
 }

package/dist/cjs/components/Select/styles.d.ts

@@ -6,5 +6,6 @@ export declare const optionsWrapper: import("@emotion/utils").SerializedStyles;
 export declare const options: import("@emotion/utils").SerializedStyles;
 export declare const optionItem: import("@emotion/utils").SerializedStyles;
 export declare const optionItems: import("@emotion/utils").SerializedStyles;
+export declare const empty: import("@emotion/utils").SerializedStyles;
 export declare const optionSecondName: import("@emotion/utils").SerializedStyles;
 export declare const selected: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/Select/typings.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { SerializedStyles } from "@emotion/react";
+import React from "react";
 export interface OptionsProps<T> {
     label: JSX.Element | string;
-    displayLabel: JSX.Element | string;
+    displayLabel?: JSX.Element | string;
     value: T;
 }
 export interface SelectProps<T> {
@@ -17,4 +17,5 @@ export interface SelectProps<T> {
     options: OptionsProps<T>[];
     selected: T;
     onChange(value: string): void;
+    emptyElement?: React.ReactNode;
 }

package/dist/cjs/components/SidePanel/index.d.ts

@@ -1,12 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import { FC } from "react";
 import "./../../../dist/icons/icons.css";
+import { SerializedStyles } from "@emotion/react";
 interface SidePanelProps {
-    title: string;
+    title?: string;
     open: boolean;
     isBack?: boolean;
     onBack?: () => void;
     onClose?: () => void;
+    style?: SerializedStyles;
 }
 declare const SidePanel: FC<SidePanelProps>;
 export default SidePanel;

package/dist/cjs/components/SidePanel/style.d.ts

@@ -5,4 +5,4 @@ export declare const sidePanelOpen: import("@emotion/utils").SerializedStyles;
 export declare const header: import("@emotion/utils").SerializedStyles;
 export declare const titleStyle: import("@emotion/utils").SerializedStyles;
 export declare const headerCTA: import("@emotion/utils").SerializedStyles;
-export declare const content: import("@emotion/utils").SerializedStyles;
+export declare const headerCloseCTA: import("@emotion/utils").SerializedStyles;

package/dist/cjs/components/Tags/index.d.ts

@@ -1,8 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { SerializedStyles } from "@emotion/react";
 import React from "react";
-declare type TagType = "success" | "info" | "error";
+declare type TagType = "success" | "warning" | "info" | "error" | "default";
 export interface TagProps {
-    text: string;
     type: TagType;
+    style?: SerializedStyles;
+    isStroke?: boolean;
 }
 declare const Tags: React.FC<TagProps>;
 export default Tags;

package/dist/cjs/components/index.d.ts

@@ -4,6 +4,8 @@ import Card from "./Card";
 import Checkbox from "./Checkbox";
 import CircularLoader from "./CircularLoader";
 import CalendarPicker from "./CalendarPicker";
+import Icon from "./Icon";
+import IconButton from "./IconButton";
 import Input from "./Input";
 import PinInput from "./PinInput";
 import Popper from "./Popper";
@@ -16,4 +18,4 @@ import SearchInput from "./SearchInput";
 import Tabs from "./Tabs";
 import Toast from "./Toast";
 import Tooltip from "./Tooltip";
-export { Accordion, Button, Card, Checkbox, CircularLoader, CalendarPicker, Input, PinInput, Popper, Radio, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, Toast, Tooltip, };
+export { Accordion, Button, Card, Checkbox, CircularLoader, CalendarPicker, Icon, IconButton, Input, PinInput, Popper, Radio, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, Toast, Tooltip, };