BZ-35005: feat: add grid item component

- added new component GridItem
- added example usage in page.svelte
- updated dev script to use host

package.json

@@ -2,7 +2,7 @@
   "name": "@juspay/svelte-ui-components",
   "version": "1.12.0",
   "scripts": {
-    "dev": "vite dev",
+    "dev": "vite dev --host",
     "build": "vite build && npm run package",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",

src/lib/GridItem/GridItem.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let icon: string = '';
+  export let text: string = '';
+  export let headerIcon: string = '';
+  export let showLoader: boolean = false;
+
+  const dispatch = createEventDispatcher();
+
+  function onClick() {
+    showLoader = !showLoader;
+    dispatch('onClick');
+  }
+</script>
+
+<div class="container" on:click={onClick} on:keydown role="button" tabindex="0">
+  <div class="grid-header">
+    <img src={headerIcon} alt="" class="grid-item-header-icon" />
+  </div>
+  <div class:grid-body-loader={showLoader}>
+    <div class="grid-item-body">
+      <img src={icon} alt="" class="grid-item-icon" />
+    </div>
+  </div>
+  <div class="grid-item-footer">{text}</div>
+</div>
+
+<style>
+  .container {
+    box-sizing: border-box;
+    height: var(--grid-item-height, fit-content);
+    width: var(--grid-item-width, fit-content);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    cursor: pointer;
+    /** Remove button tap effect */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .grid-header {
+    display: flex;
+    width: var(--grid-header-width, 100%);
+    justify-content: var(--grid-header-justify-content, end);
+    position: var(--grid-header-position, absolute);
+    top: var(--grid-header-top, 5px);
+    z-index: var(--grid-header-z-index, 100);
+  }
+
+  .grid-item-header-icon {
+    height: var(--grid-item-header-icon-height, 16px);
+    width: var(--grid-item-header-icon-width, auto);
+    object-fit: var(--grid-item-header-icon-object-fit, contain);
+    z-index: var(--grid-item-header-icon-z-index, 2);
+  }
+
+  .grid-item-body {
+    height: var(--grid-item-height, 64px);
+    width: var(--grid-item-width, 64px);
+    background-color: var(--grid-item-background-color, #faf9f9);
+    border: var(--grid-item-border, 1px solid #eaeaea);
+    border-radius: var(--grid-item-border-radius, 4px);
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .grid-item-icon {
+    height: var(--grid-item-icon-height, 32px);
+    width: var(--grid-item-icon-width, auto);
+    object-fit: var(--grid-item-icon-object-fit, contain);
+    z-index: var(--grid-item-icon-z-index, 100);
+  }
+
+  .grid-item-footer {
+    margin: var(--grid-item-footer-margin, 8px 0 0 0);
+    font-size: var(--grid-item-font-size, 14px);
+    color: var(--grid-item-color, #333);
+  }
+
+  .grid-body-loader {
+    position: relative;
+  }
+
+  .grid-body-loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    margin: var(--grid-item-margin, 8px 0 0 0);
+    border-radius: var(--grid-item-border-radius, 4px);
+    border: var(--animation-version, 32px solid #cbcccf66);
+    animation: clipperAnimation var(--loader-animation-duration) infinite linear;
+  }
+
+  @keyframes clipperAnimation {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
+    }
+    25% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
+    }
+    50% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
+    }
+    75% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
+    }
+    100% {
+      clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
+    }
+  }
+</style>

src/routes/+page.svelte

@@ -1,3 +1,27 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script lang="ts">
+  import GridItem from '$lib/GridItem/GridItem.svelte';
+</script>
+
+<div class="container">
+  <h1>Svelte UI Components</h1>
+
+  <h3>Components</h3>
+
+  <div class="components">
+    <GridItem />
+  </div>
+</div>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+
+  .container {
+    font-family: 'Nunito Sans', sans-serif;
+  }
+
+  .components {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+  }
+</style>