zebpay-ui 0.0.2 → 0.0.5

package/dist/esm/dist/components/Button/index.d.ts

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

package/dist/esm/dist/components/Button/styles.d.ts

@@ -0,0 +1,10 @@
+export declare const linkButton: import("@emotion/utils").SerializedStyles;
+export declare const primaryButton: import("@emotion/utils").SerializedStyles;
+export declare const secondaryButton: import("@emotion/utils").SerializedStyles;
+export declare const specialButton: import("@emotion/utils").SerializedStyles;
+export declare const specialButtonText: import("@emotion/utils").SerializedStyles;
+export declare const specialButtonSmText: import("@emotion/utils").SerializedStyles;
+export declare const tertiaryButton: import("@emotion/utils").SerializedStyles;
+export declare const tertiaryButtonText: import("@emotion/utils").SerializedStyles;
+export declare const tabButton: import("@emotion/utils").SerializedStyles;
+export declare const disabledButton: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,11 @@
+import { Interpolation, Theme } from "@emotion/react";
+export declare type ButtonSize = "small" | "medium" | "large" | "full-width";
+export declare type ButtonType = "link" | "primary" | "secondary" | "special" | "tertiary" | "tab";
+export interface ButtonProps {
+    type: ButtonType;
+    size?: ButtonSize;
+    onClick: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    style?: Interpolation<Theme>;
+}

package/dist/esm/dist/components/Checkbox/index.d.ts

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

package/dist/esm/dist/components/Checkbox/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const checkboxContainer: import("@emotion/utils").SerializedStyles;
+export declare const labelContainer: import("@emotion/utils").SerializedStyles;
+export declare const disabledLabel: import("@emotion/utils").SerializedStyles;
+export declare const input: import("@emotion/utils").SerializedStyles;
+export declare const checkCheckmark: import("@emotion/utils").SerializedStyles;
+export declare const checkLabel: import("@emotion/utils").SerializedStyles;
+export declare const checkComponent: import("@emotion/utils").SerializedStyles;
+export declare const checkmark: import("@emotion/utils").SerializedStyles;

package/dist/esm/dist/components/Checkbox/typings.d.ts

@@ -0,0 +1,13 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+export interface CheckboxProps {
+    value: ReactText;
+    checked: boolean;
+    onChange: (args: {
+        checked: boolean;
+        value: ReactText;
+    }) => void;
+    label?: string | JSX.Element;
+    disabled?: boolean;
+    style?: SerializedStyles;
+}

package/dist/esm/dist/components/CircularLoader/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { CircularLoaderProps } from "./typings";
+declare const CircularLoader: FC<CircularLoaderProps>;
+export default CircularLoader;

package/dist/esm/dist/components/CircularLoader/style.d.ts

@@ -0,0 +1,2 @@
+export declare const rotateAnimation: import("@emotion/react").Keyframes;
+export declare const loader: import("@emotion/utils").SerializedStyles;

package/{src/components/CircularLoader/typings.ts → dist/esm/dist/components/CircularLoader/typings.d.ts}

@@ -1,4 +1,4 @@
 export interface CircularLoaderProps {
-  size: number;
-  color?: string;
+    size: number;
+    color?: string;
 }

package/dist/esm/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,14 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import "./styles.css";
+interface DateRangePickerProps {
+    months: number;
+    onChange(ranges: Selection): void;
+    ranges: Selection;
+}
+interface Selection {
+    startDate: Date;
+    endDate: Date;
+}
+declare const DateRangePicker: React.FC<DateRangePickerProps>;
+export default DateRangePicker;

package/dist/esm/dist/components/Input/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { InputProps } from "./typings";
+declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/esm/dist/components/Input/styles.d.ts

@@ -0,0 +1,13 @@
+export declare const invalidInputGroup: import("@emotion/utils").SerializedStyles;
+export declare const formLabel: import("@emotion/utils").SerializedStyles;
+export declare const activeFormLabel: import("@emotion/utils").SerializedStyles;
+export declare const inputGroup: import("@emotion/utils").SerializedStyles;
+export declare const focusedInputGroup: import("@emotion/utils").SerializedStyles;
+export declare const formControl: import("@emotion/utils").SerializedStyles;
+export declare const fieldFullRounded: import("@emotion/utils").SerializedStyles;
+export declare const fieldNoRounded: import("@emotion/utils").SerializedStyles;
+export declare const fieldSecondHalfRounded: import("@emotion/utils").SerializedStyles;
+export declare const fieldFirstHalfRounded: import("@emotion/utils").SerializedStyles;
+export declare const inputGroupText: import("@emotion/utils").SerializedStyles;
+export declare const inputGroupPrepend: import("@emotion/utils").SerializedStyles;
+export declare const infoCta: import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,23 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+export interface InputTargetProps {
+    value: string;
+    name: string;
+}
+export interface InputProps {
+    label: string;
+    placeholder: string;
+    value: ReactText;
+    onChange: (target: InputTargetProps) => void;
+    name?: string;
+    appendItem?: string | JSX.Element;
+    prependItem?: string | JSX.Element;
+    infoText?: string;
+    errorText?: string;
+    type?: "text" | "number" | "password";
+    style?: SerializedStyles;
+    cta?: {
+        label: string;
+        onClick: () => void;
+    };
+}

package/dist/esm/dist/components/Popper/index.d.ts

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

package/dist/esm/dist/components/Popper/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const container: import("@emotion/utils").SerializedStyles;
+export declare const popup: import("@emotion/utils").SerializedStyles;
+export declare const header: import("@emotion/utils").SerializedStyles;
+export declare const button: import("@emotion/utils").SerializedStyles;
+export declare const closer: import("@emotion/utils").SerializedStyles;
+export declare const label: (hovered?: boolean | undefined) => import("@emotion/utils").SerializedStyles;

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

@@ -0,0 +1,14 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactElement } from "react";
+import { ButtonProps } from "../Button/typings";
+export interface PopperProps {
+    label: string;
+    onClose?: () => void;
+    buttonProps?: ButtonProps;
+    renderChildren: (props: ChildrenProps) => ReactElement;
+    style?: SerializedStyles;
+}
+export interface ChildrenProps {
+    close: () => void;
+    isOpened: boolean;
+}

package/dist/esm/dist/components/Radio/index.d.ts

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

package/dist/esm/dist/components/Radio/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const container: import("@emotion/utils").SerializedStyles;
+export declare const input: import("@emotion/utils").SerializedStyles;
+export declare const checkmark: import("@emotion/utils").SerializedStyles;

package/dist/esm/dist/components/Radio/typings.d.ts

@@ -0,0 +1,13 @@
+import { SerializedStyles } from "@emotion/react";
+import { ReactText } from "react";
+export interface RadioProps {
+    selected: boolean;
+    onChange: (args: {
+        selected: boolean;
+        value: ReactText;
+    }) => void;
+    value?: ReactText;
+    label?: string | JSX.Element;
+    name: string;
+    style?: SerializedStyles;
+}

package/dist/esm/dist/components/Toast/index.d.ts

@@ -0,0 +1,6 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { ToastProps } from "./typings";
+export declare const generateToast: ({ title, description, type, onClose, }: ToastProps) => void;
+declare const Toast: React.FC<ToastProps>;
+export default Toast;

package/dist/esm/dist/components/Toast/styles.d.ts

@@ -0,0 +1,12 @@
+export declare const toastContainer: import("@emotion/utils").SerializedStyles;
+export declare const toastHeading: import("@emotion/utils").SerializedStyles;
+export declare const toastDetails: import("@emotion/utils").SerializedStyles;
+export declare const toastTitle: import("@emotion/utils").SerializedStyles;
+export declare const closeCta: import("@emotion/utils").SerializedStyles;
+export declare const toastDescription: import("@emotion/utils").SerializedStyles;
+export declare const info: import("@emotion/utils").SerializedStyles;
+export declare const infoToastHeading: import("@emotion/utils").SerializedStyles;
+export declare const error: import("@emotion/utils").SerializedStyles;
+export declare const errorToastHeading: import("@emotion/utils").SerializedStyles;
+export declare const success: import("@emotion/utils").SerializedStyles;
+export declare const successToastHeading: import("@emotion/utils").SerializedStyles;

package/dist/esm/dist/components/Toast/typings.d.ts

@@ -0,0 +1,6 @@
+export interface ToastProps {
+    title: string;
+    description: string;
+    type: "info" | "error" | "success";
+    onClose?: () => void;
+}

package/{src/components/index.ts → dist/esm/dist/components/index.d.ts}

@@ -1,19 +1,8 @@
 import Button from "./Button";
 import Checkbox from "./Checkbox";
 import CircularLoader from "./CircularLoader";
-// import DateRangePicker from "./DateRangePicker";
 import Input from "./Input";
 import Popper from "./Popper";
 import Radio from "./Radio";
 import Toast from "./Toast";
-
-export {
-  Button,
-  Checkbox,
-  CircularLoader,
-  // DateRangePicker,
-  Input,
-  Radio,
-  Toast,
-  Popper,
-};
+export { Button, Checkbox, CircularLoader, Input, Radio, Toast, Popper, };

package/dist/esm/dist/hooks/useFocus.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare function useFocus<T extends HTMLElement>(): [
+    React.MutableRefObject<T | null>,
+    () => void
+];
+export default useFocus;

package/dist/esm/dist/styles/colors.d.ts

@@ -0,0 +1,34 @@
+declare const colors: {
+    Zeb_Solid_White: string;
+    Zeb_Solid_BG_Blue: string;
+    Zeb_Solid_Dark_Blue: string;
+    Zeb_Solid_Bright_Blue: string;
+    Zeb_Solid_Light_Blue: string;
+    Zeb_Solid_Green: string;
+    Zeb_Solid_Red: string;
+    Zeb_Solid_Yellow: string;
+    Zeb_Solid_Grey: string;
+    Zeb_Solid_Dark_Grey: string;
+    Zeb_Solid_Black: string;
+    Zeb_Solid_Light_Blue_01: string;
+    Zeb_Solid_Grey_01: string;
+    Zeb_Gradient_Blue_01: string;
+    Zeb_Gradient_Blue_02: string;
+    Zeb_Gradient_Dark_Blue: string;
+    Zeb_Transparent_25: string;
+    Zeb_Transparent_Green: string;
+    Zeb_Transparent_Yellow: string;
+    Zeb_Transparent_Red: string;
+    Zeb_BG_Blue: string;
+    Zeb_BG_Light_Blue: string;
+    Zeb_BG_Green: string;
+    Zeb_BG_Red: string;
+    Zeb_BG_Yellow: string;
+    Zeb_Transparent_4: string;
+    Zeb_Effects_Shadow_Hover: string;
+    Zeb_Effects_Shadow_W_Drawer: string;
+    Zeb_Effects_Shadow_M_Drawer: string;
+    Zeb_Effects_Shadow_Hover_Up: string;
+    Zeb_Effects_Shimmer: string;
+};
+export default colors;

package/{src/styles/index.ts → dist/esm/dist/styles/index.d.ts}

@@ -2,5 +2,4 @@ import colors from "./colors";
 import typography from "./typography";
 import utils from "./utils";
 import mixins from "./mixins";
-
 export { colors, typography, utils, mixins };

package/dist/esm/dist/styles/mixins.d.ts

@@ -0,0 +1,19 @@
+declare const mixins: {
+    flexJustifiedBetween: import("@emotion/utils").SerializedStyles;
+    flexJustifiedCenter: import("@emotion/utils").SerializedStyles;
+    flexJustifiedEnd: import("@emotion/utils").SerializedStyles;
+    flexAlignCenter: import("@emotion/utils").SerializedStyles;
+    flexAlignStart: import("@emotion/utils").SerializedStyles;
+    flexNoWrap: import("@emotion/utils").SerializedStyles;
+    flexColumn: import("@emotion/utils").SerializedStyles;
+    textSuccess: import("@emotion/utils").SerializedStyles;
+    textError: import("@emotion/utils").SerializedStyles;
+    bgSuccess: import("@emotion/utils").SerializedStyles;
+    bgError: import("@emotion/utils").SerializedStyles;
+    textFaded: import("@emotion/utils").SerializedStyles;
+    textCapitalize: import("@emotion/utils").SerializedStyles;
+    textAlignmentCenter: import("@emotion/utils").SerializedStyles;
+    textAlignmentLeft: import("@emotion/utils").SerializedStyles;
+    textAlignmentRight: import("@emotion/utils").SerializedStyles;
+};
+export default mixins;

package/dist/esm/dist/styles/typography.d.ts

@@ -0,0 +1,6 @@
+import { CSSObject } from "@emotion/react";
+interface Styles {
+    [key: string]: CSSObject;
+}
+declare const typography: Styles;
+export default typography;

package/dist/esm/dist/styles/utils.d.ts

@@ -0,0 +1,10 @@
+declare const utils: {
+    remConverter: (value: number) => string;
+    widthPercentage: (value: number) => import("@emotion/utils").SerializedStyles;
+    heightPercentage: (value: number) => import("@emotion/utils").SerializedStyles;
+    mr: (value: number) => import("@emotion/utils").SerializedStyles;
+    ml: (value: number) => import("@emotion/utils").SerializedStyles;
+    mt: (value: number) => import("@emotion/utils").SerializedStyles;
+    mb: (value: number) => import("@emotion/utils").SerializedStyles;
+};
+export default utils;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zebpay-ui",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -12,11 +12,11 @@
     "build-storybook": "build-storybook",
     "format": "prettier --write .",
     "lint": "eslint . --fix",
-    "build:icons": "fantasticon icons/svgs -o icons/out",
+    "build:icons": "mkdir dist/icons && fantasticon svgs -o dist/icons",
     "lint-staged": "lint-staged",
     "prepare": "husky install",
-    "build": "rollup -c",
-    "watch": "rollup rollup.config.js -w"
+    "build": "rimraf dist && rollup -c",
+    "watch": "rimraf dist && rollup rollup.config.js -w"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
@@ -42,6 +42,7 @@
     "husky": "^7.0.4",
     "lint-staged": "^12.4.1",
     "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-dts": "^4.2.0",
@@ -50,7 +51,9 @@
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.8.1"
+    "@emotion/react": "^11.8.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "dependencies": {
     "@babel/preset-react": "^7.18.6",
@@ -58,8 +61,6 @@
     "@types/react-date-range": "^1.4.3",
     "date-fns": "^2.28.0",
     "react-date-range": "^1.4.0",
-    "react-hot-toast": "^2.2.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-hot-toast": "^2.2.0"
   }
 }

package/.babelrc

@@ -1,9 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-react",
-      { "runtime": "automatic", "importSource": "@emotion/react" }
-    ]
-  ],
-  "plugins": ["@emotion/babel-plugin"]
-}

package/.eslintignore

@@ -1,3 +0,0 @@
-node_modules/
-yarn.lock
-dist

package/.eslintrc.json

@@ -1,28 +0,0 @@
-{
-  "plugins": ["@typescript-eslint", "eslint-plugin-prettier"],
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "eslint-config-prettier"
-  ],
-  "root": true,
-  "rules": {
-    "prettier/prettier": "error",
-    "indent": [
-      "error",
-      2,
-      {
-        "SwitchCase": 1
-      }
-    ],
-    "linebreak-style": ["error", "unix"],
-    "quotes": ["error", "double"],
-    "semi": ["error", "always"],
-    "prefer-const": "error",
-    "@typescript-eslint/no-empty-interface": "off",
-    "@typescript-eslint/no-empty-function": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/no-explicit-any": "off",
-    "@next/next/no-img-element": "off",
-    "jsx-a11y/alt-text": "off"
-  }
-}

package/.github/CODEOWNERS

@@ -1 +0,0 @@
-*  @zebpay/z-new

package/.github/workflows/gh-pages.yml

@@ -1,22 +0,0 @@
-name: Build and Deploy
-on:
-  pull_request:
-    branches:
-      - main
-jobs:
-  build-and-deploy:
-    concurrency: ci-${{ github.ref }} # Recommended if you intend to make multiple deployments in quick succession.
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout 🛎️
-        uses: actions/checkout@v3
-
-      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
-        run: |
-          yarn install
-          yarn build-storybook
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.3.0
-        with:
-          branch: gh-pages # The branch the action should deploy to.
-          folder: storybook-static # The folder the action should deploy.

package/.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-yarn lint-staged

package/.lintstagedrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-  // Type check TypeScript files
-  "**/*.(ts|tsx)": () => "yarn tsc --noEmit",
-
-  // Format check TypeScript files
-  "**/*.(ts|tsx)": () => "yarn lint",
-
-  // Format MarkDown and JSON
-  "**/*.(md|json)": (filenames) =>
-    `yarn prettier --write ${filenames.join(" ")}`,
-};

package/.prettierignore

@@ -1,3 +0,0 @@
-node_modules/
-yarn.lock
-dist

package/.storybook/main.js

@@ -1,12 +0,0 @@
-module.exports = {
-  stories: [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
-  framework: "@storybook/react",
-};

package/.storybook/preview.js

@@ -1,22 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  backgrounds: {
-    default: "dark",
-    values: [
-      {
-        name: "dark",
-        value: "#34345A",
-      },
-      {
-        name: "light",
-        value: "#ffffff",
-      },
-    ],
-  },
-};