@juspay/svelte-ui-components 1.0.0

package/README.md

@@ -0,0 +1,115 @@
+# Svelte UI Components
+
+This library provides a collection of reusable UI components built with [Svelte](https://svelte.dev/).
+
+## Installation
+
+This library is publish on npm & can be installed via any npm client.
+Use the following command to install the library.
+
+```bash
+npm install @juspay/svelte-ui-components
+```
+
+## Usage
+
+The library contains a collection of components that can be imported & used in your svelte project.
+
+### Available components
+
+- Accordion
+- Badge
+- Banner
+- Brand Loader (aka Splash Screen )
+- Button
+- Carousel
+- Checkbox / Checklist Item
+- Icon
+- Input
+- Input with attached Button
+- List Item
+- Loader
+- Modal
+- Select
+- Status Screen
+- Table
+- Toggle
+- Toolbar
+
+All of the components can be easily imported from the 'svelte-ui-components' package.
+
+#### Example: Importing component from the package
+
+```svelte
+<script>
+  import { Button } from '@juspay/svelte-ui-components';
+</script>
+
+<Button>Click me</Button>
+```
+
+### Customizing the components
+
+Each component comes with a set of configuration options that can be used to customize the component.
+There are two ways to customize the component.
+
+1. Using css variables:
+
+   - All the components have exposed css variables for all the properties available.
+   - The css variables can be used to customize the component.
+
+2. Using props:
+
+   - All the components have exposed props for dynamic values/variables.
+   - The props can be used to customize the component.
+
+#### Example: Customizing the component
+
+````svelte
+<script lang="ts">
+  import {
+    Button,
+    type ButtonProperties,
+    defaultButtonProperties
+  } from '@juspay/svelte-ui-components';
+
+  const buttonProperties: ButtonProperties = {
+    ...defaultButtonProperties,
+    text: 'Submit'
+  };
+
+  function handleSubmitClick() {
+    // handle click
+  }
+</script>
+
+```svelte
+<div class="form">
+  <Button properties={buttonProperties} on:click={handleSubmitClick} />
+</div>
+
+<style>
+  .form {
+    --button-color: black;
+    --button-text-color: white;
+    // and many more
+  }
+</style>
+````
+
+### Contributing
+
+- Clone the repository
+- Install dependencies using `pnpm install`
+- Make changes to the components
+- Run tests using `pnpm run test`
+- Commit the changes
+- Push the changes
+- Create a pull request
+
+### Todo Items
+
+- [ ] Add demo support
+- [ ] Add documentation for all components
+- [ ] Add more components
+- [ ] Add tests

package/dist/Accordion/Accordion.svelte

@@ -0,0 +1,35 @@
+<script>import { afterUpdate, onMount } from "svelte";
+export let expand = false;
+let maxHeight = 0;
+let accordionRef;
+function updateMaxHeight() {
+  if (expand) {
+    accordionRef.style.maxHeight = `${maxHeight}px`;
+  } else {
+    accordionRef.style.maxHeight = "0";
+  }
+}
+afterUpdate(updateMaxHeight);
+onMount(() => {
+  accordionRef.style.transition = "max-height 0.2s ease-out";
+  updateMaxHeight();
+});
+$: {
+  if (accordionRef) {
+    maxHeight = accordionRef.scrollHeight;
+    updateMaxHeight();
+  }
+}
+</script>
+
+<div class="accordion" bind:this={accordionRef}>
+  <slot />
+</div>
+
+<style>
+  .accordion {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0s ease-in;
+  }
+</style>

package/dist/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        expand?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionProps = typeof __propDef.props;
+export type AccordionEvents = typeof __propDef.events;
+export type AccordionSlots = typeof __propDef.slots;
+export default class Accordion extends SvelteComponent<AccordionProps, AccordionEvents, AccordionSlots> {
+}
+export {};

package/dist/Animations/ModalAnimation.svelte

@@ -0,0 +1,28 @@
+<script>import { fly, fade } from "svelte/transition";
+export let enable = true;
+export let align = "bottom";
+let flyAnimationProperties = { x: 0, y: 0, duration: 380 };
+let fadeAnimationProperties = { duration: 300 };
+switch (align) {
+  case "top":
+    flyAnimationProperties = { ...flyAnimationProperties, y: -30 };
+    break;
+  case "bottom":
+    flyAnimationProperties = { ...flyAnimationProperties, y: 300 };
+    break;
+}
+</script>
+
+{#if enable}
+  {#if align === 'top' || align === 'bottom'}
+    <div transition:fly={flyAnimationProperties}>
+      <slot />
+    </div>
+  {:else}
+    <div in:fade={fadeAnimationProperties} out:fade={fadeAnimationProperties}>
+      <slot />
+    </div>
+  {/if}
+{:else}
+  <slot />
+{/if}

package/dist/Animations/ModalAnimation.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ModalAlign } from '../Modal/properties';
+declare const __propDef: {
+    props: {
+        enable?: boolean | undefined;
+        align?: ModalAlign | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalAnimationProps = typeof __propDef.props;
+export type ModalAnimationEvents = typeof __propDef.events;
+export type ModalAnimationSlots = typeof __propDef.slots;
+export default class ModalAnimation extends SvelteComponent<ModalAnimationProps, ModalAnimationEvents, ModalAnimationSlots> {
+}
+export {};

package/dist/Animations/OverlayAnimation.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { fade } from 'svelte/transition';
+</script>
+
+<div out:fade={{ duration: 350 }}>
+  <slot />
+</div>

package/dist/Animations/OverlayAnimation.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  OverlayAnimationProps */
+/** @typedef {typeof __propDef.events}  OverlayAnimationEvents */
+/** @typedef {typeof __propDef.slots}  OverlayAnimationSlots */
+export default class OverlayAnimation extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type OverlayAnimationProps = typeof __propDef.props;
+export type OverlayAnimationEvents = typeof __propDef.events;
+export type OverlayAnimationSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/Badge/Badge.svelte

@@ -0,0 +1,45 @@
+<script>export let properties = null;
+</script>
+
+{#if properties !== null}
+  <div class="badge-icon">
+    <div class="badge-wrap">
+      <img class="icon-img" src={properties.image} alt="" />
+      <div class="badge">{properties.value}</div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .badge-wrap {
+    position: relative;
+    display: inline-block;
+    margin: var(--badge-wrap-margin, 0px 12px 10px 0px);
+    padding: var(--badge-wrap-padding, 8px 8px 8px 8px);
+  }
+
+  .badge {
+    position: absolute;
+    color: var(--badge-color, #fff);
+    background-color: var(--badge-background, #727272);
+    font-size: var(--badge-font-size, 12px);
+    font-family: var(--badge-font-family, Euclid Circular A);
+    padding: var(--badge-padding, 2px 7.5px);
+    border-radius: var(--badge-border-radius, 100px);
+    min-width: var(--badge-min-width, 7px);
+    min-height: var(--badge-min-height, 7px);
+    border: var(--badge-border, 0.6px solid #fff);
+    top: var(--badge-top, 0);
+    right: var(--badge-right, 0);
+    bottom: var(--badge-bottom);
+    left: var(--badge-left);
+  }
+
+  .icon-img {
+    border-radius: var(--badge-img-border-radius, 6px);
+    width: var(--badge-img-width, 64px);
+    height: var(--badge-img-height, 64px);
+    object-fit: contain;
+    box-shadow: var(--badge-img-icon-shadow, 0 0 0 0.5px #798fa54d);
+  }
+</style>

package/dist/Badge/Badge.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { BadgeProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: BadgeProperties | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponent<BadgeProps, BadgeEvents, BadgeSlots> {
+}
+export {};

package/dist/Badge/properties.d.ts

@@ -0,0 +1,4 @@
+export type BadgeProperties = {
+    image: string;
+    value: string;
+};

package/dist/Badge/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/Banner/Banner.svelte

@@ -0,0 +1,61 @@
+<script>export let properties = null;
+</script>
+
+{#if properties !== null}
+  <div class="banner" on:click on:keydown role="button" tabindex="0">
+    {#if properties.icon !== null}
+      <div class="banner-image">
+        <img src={properties.icon} alt="" />
+      </div>
+    {/if}
+    <div class="banner-text">
+      {#if properties.linkText !== null}
+        <div>{properties.text}<span class="link-text">{properties.linkText}</span></div>
+      {:else}
+        <div>{properties.text}</div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .banner {
+    position: var(--banner-position, sticky);
+    top: var(--banner-top, 0px);
+    display: var(--banner-display, flex);
+    align-items: center;
+    background-color: var(--banner-bg-color, #637c9529);
+    width: var(--banner-width, 100%);
+    height: var(--banner-height, 37px);
+    padding: var(--banner-padding, 10px 12px, 10px, 12px);
+    gap: var(--banner-gap, 8px);
+    justify-content: center;
+    cursor: pointer;
+  }
+
+  .banner-image {
+    color: var(--banner-img-color, #637c95);
+    width: var(--banner-img-width, 18px);
+    height: var(--banner-img-height, 11.69px);
+    margin-bottom: var(--banner-img-margin-bottom, 6px);
+    align-items: center;
+  }
+
+  .banner-text {
+    size: var(--banner-text-size, 14px);
+    font-family: var(--banner-font-family, Euclid Circular A);
+    font-style: var(--banner-font-style, normal);
+    color: var(--banner-text-color, #637c95);
+    font-size: var(--banner-font-size, 14px);
+    line-height: var(--banner-line-height, 17.75px);
+    font-weight: var(--banner-font-weight, 500);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    align-items: center;
+  }
+
+  .link-text {
+    color: var(--banner-linktext-color, #0099ff);
+  }
+</style>

package/dist/Banner/Banner.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { BannerProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: BannerProperties | null | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BannerProps = typeof __propDef.props;
+export type BannerEvents = typeof __propDef.events;
+export type BannerSlots = typeof __propDef.slots;
+export default class Banner extends SvelteComponent<BannerProps, BannerEvents, BannerSlots> {
+}
+export {};

package/dist/Banner/properties.d.ts

@@ -0,0 +1,5 @@
+export type BannerProperties = {
+    icon: string | null;
+    text: string;
+    linkText: string | null;
+};

package/dist/Banner/properties.js

@@ -0,0 +1 @@
+export {};

package/dist/BrandLoader/BrandLoader.svelte

@@ -0,0 +1,125 @@
+<script context="module">export const prerender = true;
+</script>
+
+<script>import { defaultBrandLoaderProperties } from "./properties";
+export let properties = defaultBrandLoaderProperties;
+</script>
+
+<div class="background">
+  <div class="loader">
+    <img src={properties.brandLogoURL} alt="" />
+    <div class="text">{properties.brandText}</div>
+    {#if properties.subText}
+      <div class="sub-text">{properties.subText}</div>
+    {/if}
+    <div class="lds-ellipsis">
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+</div>
+
+<style>
+  .background {
+    height: var(--loader-background-height);
+    width: var(--loader-background-width);
+  }
+
+  .loader {
+    height: var(--loader-height, 100vh);
+    width: var(--loader-width, 100vw);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  .loader img {
+    height: 40px;
+    width: 71px;
+  }
+
+  .text {
+    font-size: 22px;
+    padding: 16px 0px;
+    color: var(--loader-text-color, white);
+    font-family: var(--loader-text-font, Euclid Circular A);
+  }
+
+  .sub-text {
+    font-size: 12px;
+    margin-bottom: 16px;
+  }
+
+  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
+    .background {
+      animation: animateBackground 5s ease-in-out infinite normal;
+      -webkit-animation: animateBackground 5s ease-in-out infinite normal;
+    }
+
+    .loader {
+      background-color: var(--loader-background-color, #ffffff33);
+      -webkit-backdrop-filter: blur(50px);
+      backdrop-filter: blur(50px);
+    }
+  }
+
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ellipsis div {
+    display: inherit;
+    position: absolute;
+    top: 5px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: var(--loader-dot-color, #3a4550);
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  .lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+  }
+  .lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+  }
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(24px, 0);
+    }
+  }
+</style>

package/dist/BrandLoader/BrandLoader.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+export declare const prerender = true;
+import type { BrandLoaderProperties } from './properties';
+declare const __propDef: {
+    props: {
+        properties?: BrandLoaderProperties | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BrandLoaderProps = typeof __propDef.props;
+export type BrandLoaderEvents = typeof __propDef.events;
+export type BrandLoaderSlots = typeof __propDef.slots;
+export default class BrandLoader extends SvelteComponent<BrandLoaderProps, BrandLoaderEvents, BrandLoaderSlots> {
+}
+export {};

package/dist/BrandLoader/properties.d.ts

@@ -0,0 +1,8 @@
+export type BrandLoaderProperties = {
+    fullScreen: boolean;
+    subText: string | null;
+    brandLogoURL: string;
+    brandText: string;
+    loaderBackgroundImage: string;
+};
+export declare const defaultBrandLoaderProperties: BrandLoaderProperties;

package/dist/BrandLoader/properties.js

@@ -0,0 +1,7 @@
+export const defaultBrandLoaderProperties = {
+    fullScreen: true,
+    subText: null,
+    brandLogoURL: 'https://sdk.breeze.in/gallery/icons/logo.svg',
+    brandText: 'breeze',
+    loaderBackgroundImage: '/images/loader-background.svg'
+};

package/dist/Button/Button.svelte

@@ -0,0 +1,87 @@
+<script>import { createEventDispatcher } from "svelte";
+import Loader from "../Loader/Loader.svelte";
+import { defaultButtonProperties } from "./properties";
+export let properties = defaultButtonProperties;
+export let showProgressBar = false;
+const dispatch = createEventDispatcher();
+function handleButtonClick() {
+  if (showProgressBar) {
+    return;
+  }
+  dispatch("click");
+  if (properties.showLoader && properties.loaderType === "ProgressBar") {
+    showProgressBar = true;
+  }
+}
+</script>
+
+<div class="button-container">
+  {#if showProgressBar}
+    <div class="button-progress-bar" />
+  {/if}
+  <button
+    style="
+      --opacity: {properties.enable ? 1 : 0.4};
+      --cursor: {properties.enable ? 'pointer' : 'not-allowed'};"
+    on:click={handleButtonClick}
+    disabled={!(properties.enable && !properties.showLoader)}
+    type={properties.type}
+  >
+    {#if properties.showLoader && properties.loaderType === 'Circular'}
+      <Loader />
+    {/if}
+    {#if $$slots.icon}
+      <slot name="icon" />
+    {/if}
+    {properties.text}
+  </button>
+</div>
+
+<style>
+  .button-container {
+    position: relative;
+    width: var(--button-width, fit-content);
+  }
+  button {
+    max-height: var(--button-max-height);
+    max-width: var(--button-max-width);
+    font-family: var(--button-font-family);
+    font-weight: var(--button-font-weight, 500);
+    font-size: var(--button-font-size, 14px);
+    background-color: var(--button-color, var(--primary-button-color, #3a4550));
+    color: var(--button-text-color, var(--primary-text-color, white));
+    height: var(--button-height, fit-content);
+    padding: var(--button-padding, 16px);
+    margin: var(--button-margin);
+    border-radius: var(--button-border-radius, 0px);
+    width: var(--button-width, fit-content);
+    cursor: var(--cursor, pointer);
+    opacity: var(--opacity, 1);
+    border: var(--button-border, none);
+    display: flex;
+    justify-content: var(--button-justify-content, center);
+    align-items: center;
+    flex-direction: row;
+    gap: var(--button-content-gap, 16px);
+    visibility: var(--button-visibility, visible);
+  }
+
+  .button-progress-bar {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: var(--button-progress-loader-background-color, #00000030);
+    animation: fill-loader var(--button-progress-loader-duration, 8s) forwards;
+    z-index: 2;
+  }
+
+  @keyframes fill-loader {
+    0% {
+      width: 0;
+    }
+
+    100% {
+      width: 100%;
+    }
+  }
+</style>

package/dist/Button/Button.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        properties?: import("./properties").ButtonProperties | undefined;
+        showProgressBar?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        icon: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};