@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/Select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { SelectProperties } from './properties';
-declare const Select: import("svelte").Component<SelectProperties, {}, "">;
+declare const Select: import("svelte").Component<SelectProperties, {}, "value">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/Select/properties.d.ts

@@ -1,30 +1,20 @@
-import type { Snippet } from 'svelte';
-import type { ImgProperties } from '../Img/properties';
-export type SelectProperties = SelectEventProperties & {
-    dropDownIconAlt?: string;
-    placeholder?: string | null;
-    label?: string | null;
-    allItems?: string[];
-    selectedItem?: string | string[];
-    selectedItemLabel?: string | string[] | null;
-    showSelectedItemInDropdown?: boolean;
-    selectMultipleItems?: boolean;
-    hideDropDownIcon?: boolean;
-    dropDownIcon?: string;
-    leftIcon?: ImgProperties | null;
-    showSingleSelectButton?: boolean;
-    showSelectedItem?: boolean;
-    showSelectedItemCount?: boolean;
+export type SelectProperties = MandatorySelectProperties & OptionalSelectProperties & SelectEventProperties;
+export type SelectItem = {
+    id: string;
+    label: string;
+};
+export type MandatorySelectProperties = {
+    items: SelectItem[];
+};
+export type OptionalSelectProperties = {
+    value?: string[];
+    multiple?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
     testId?: string;
-    labelTestId?: string;
-    itemTestId?: string;
-    leftContent?: Snippet;
-    bottomContent?: Snippet;
+    classes?: string;
 };
 export type SelectEventProperties = {
-    onselect?: (event: {
-        selectedItems: string | string[];
-    }) => void;
-    ondropdownClick?: () => void;
-    onkeydown?: (event: KeyboardEvent) => void;
+    onchange?: (value: string[]) => void;
 };

package/dist/Sheet/Sheet.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import type { SheetProperties } from './properties';
+  import { fly, fade } from 'svelte/transition';
+  import { tick } from 'svelte';
+  import Button from '../Button/Button.svelte';
+
+  let {
+    open = $bindable(false),
+    side = 'right',
+    title,
+    showOverlay = true,
+    showCloseButton = true,
+    testId,
+    content,
+    footer,
+    onclose,
+    classes
+  }: SheetProperties = $props();
+
+  let overlayDiv: HTMLDivElement | null = $state(null);
+  let sheetPanel: HTMLDivElement | null = $state(null);
+
+  let flyParams = $derived.by(() => {
+    switch (side) {
+      case 'left':
+        return { x: -400, y: 0, duration: 300 };
+      case 'right':
+        return { x: 400, y: 0, duration: 300 };
+      case 'top':
+        return { x: 0, y: -400, duration: 300 };
+      case 'bottom':
+        return { x: 0, y: 400, duration: 300 };
+    }
+  });
+
+  function close() {
+    open = false;
+    onclose?.();
+  }
+
+  function handleOverlayClick(event: MouseEvent) {
+    if (event.target === overlayDiv) {
+      close();
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      close();
+      return;
+    }
+
+    if (event.key === 'Tab' && sheetPanel !== null) {
+      const focusable = sheetPanel.querySelectorAll<HTMLElement>(
+        'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
+      const first = focusable.item(0);
+      const last = focusable.item(focusable.length - 1);
+
+      if (first === null || last === null) {
+        return;
+      }
+
+      const atEdge = document.activeElement === (event.shiftKey ? first : last);
+      if (atEdge) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+      }
+    }
+  }
+
+  function lockScroll() {
+    document.body.style.overflow = 'hidden';
+  }
+
+  function unlockScroll() {
+    document.body.style.overflow = '';
+  }
+
+  function scrollLockAction(_node: HTMLElement) {
+    lockScroll();
+    tick().then(() => {
+      if (sheetPanel !== null) {
+        sheetPanel.focus();
+      }
+    });
+    return {
+      destroy() {
+        unlockScroll();
+      }
+    };
+  }
+</script>
+
+{#if open}
+  <div
+    bind:this={overlayDiv}
+    use:scrollLockAction
+    class="sheet-overlay {showOverlay ? 'overlay-active' : 'overlay-inactive'} {classes ?? ''}"
+    onclick={handleOverlayClick}
+    onkeydown={handleKeyDown}
+    role="button"
+    tabindex="-1"
+    data-pw={typeof testId === 'string' ? testId : null}
+    transition:fade={{ duration: 200 }}
+  >
+    <div
+      bind:this={sheetPanel}
+      class="sheet-panel {side}"
+      role="dialog"
+      aria-modal="true"
+      aria-label={title ?? 'Sheet'}
+      tabindex="-1"
+      transition:fly|global={flyParams}
+    >
+      {#if typeof title === 'string' || showCloseButton}
+        <div class="sheet-header">
+          {#if typeof title === 'string'}
+            <span class="sheet-title">{title}</span>
+          {/if}
+          {#if showCloseButton}
+            <div class="sheet-close-button">
+              <Button
+                onclick={close}
+                ariaLabel="Close"
+                {...typeof testId === 'string' ? { testId: `${testId}-close` } : {}}
+              >
+                &#x2715;
+              </Button>
+            </div>
+          {/if}
+        </div>
+      {/if}
+      <div class="sheet-content">
+        {@render content()}
+      </div>
+      {#if typeof footer === 'function'}
+        <div class="sheet-footer">
+          {@render footer()}
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
+<style>
+  .sheet-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: var(--sheet-overlay-z-index, 15);
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .overlay-active {
+    background-color: var(--sheet-overlay-background, #00000066);
+    pointer-events: auto;
+  }
+
+  .overlay-inactive {
+    pointer-events: none;
+  }
+
+  .sheet-panel {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--sheet-background, #ffffff);
+    box-shadow: var(--sheet-box-shadow, -2px 0 8px rgba(0, 0, 0, 0.15));
+    z-index: var(--sheet-z-index, 16);
+    pointer-events: auto;
+    outline: none;
+  }
+
+  .sheet-panel.left,
+  .sheet-panel.right {
+    top: 0;
+    bottom: 0;
+    width: var(--sheet-width, 400px);
+    max-width: var(--sheet-max-width, 100vw);
+  }
+
+  .sheet-panel.left {
+    left: 0;
+    border-right: var(--sheet-border, none);
+  }
+
+  .sheet-panel.right {
+    right: 0;
+    border-left: var(--sheet-border, none);
+  }
+
+  .sheet-panel.top,
+  .sheet-panel.bottom {
+    left: 0;
+    right: 0;
+    height: var(--sheet-height, 300px);
+    max-height: var(--sheet-max-height, 100vh);
+  }
+
+  .sheet-panel.top {
+    top: 0;
+    border-bottom: var(--sheet-border, none);
+  }
+
+  .sheet-panel.bottom {
+    bottom: 0;
+    border-top: var(--sheet-border, none);
+  }
+
+  .sheet-header {
+    display: flex;
+    align-items: center;
+    padding: var(--sheet-header-padding, 16px 20px);
+    background-color: var(--sheet-header-background, inherit);
+    border-bottom: var(--sheet-header-border-bottom, 1px solid #e0e0e0);
+    flex-shrink: 0;
+  }
+
+  .sheet-title {
+    flex: 1;
+    font-size: var(--sheet-title-font-size, 18px);
+    font-weight: var(--sheet-title-font-weight, 600);
+    font-family: var(--sheet-title-font-family, inherit);
+    color: var(--sheet-title-color, #1a1a1a);
+    line-height: var(--sheet-title-line-height, 1.4);
+  }
+
+  .sheet-close-button {
+    --button-width: var(--sheet-close-button-size, 32px);
+    --button-height: var(--sheet-close-button-size, 32px);
+    --button-border: none;
+    --button-border-radius: var(--sheet-close-button-border-radius, 4px);
+    --button-color: var(--sheet-close-button-background, transparent);
+    --button-text-color: var(--sheet-close-button-color, #666666);
+    --button-font-size: var(--sheet-close-button-font-size, 16px);
+    --button-padding: 0;
+    --button-hover-color: var(--sheet-close-button-hover-background, #f0f0f0);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sheet-content {
+    flex: 1;
+    overflow-y: var(--sheet-content-overflow-y, auto);
+    padding: var(--sheet-content-padding, 20px);
+    scrollbar-width: var(--sheet-scrollbar-width, none);
+  }
+
+  .sheet-content::-webkit-scrollbar {
+    display: none;
+  }
+
+  .sheet-footer {
+    padding: var(--sheet-footer-padding, 16px 20px);
+    background-color: var(--sheet-footer-background, inherit);
+    border-top: var(--sheet-footer-border-top, 1px solid #e0e0e0);
+    flex-shrink: 0;
+  }
+</style>

package/dist/Sheet/Sheet.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SheetProperties } from './properties';
+declare const Sheet: import("svelte").Component<SheetProperties, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/Sheet/properties.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+export type SheetSide = 'left' | 'right' | 'top' | 'bottom';
+export type SheetProperties = MandatorySheetProperties & OptionalSheetProperties & SheetEventProperties;
+export type MandatorySheetProperties = {
+    content: Snippet;
+};
+export type OptionalSheetProperties = {
+    open?: boolean;
+    side?: SheetSide;
+    title?: string;
+    showOverlay?: boolean;
+    showCloseButton?: boolean;
+    testId?: string;
+    footer?: Snippet;
+    classes?: string;
+};
+export type SheetEventProperties = {
+    onclose?: () => void;
+};

package/dist/Sheet/properties.js

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

package/dist/Shimmer/Shimmer.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { ShimmerProperties } from './properties';
+
+  let { testId, classes }: ShimmerProperties = $props();
+</script>
+
+<div class="shimmer {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}></div>
+
+<style>
+  .shimmer {
+    width: var(--shimmer-width, 100%);
+    height: var(--shimmer-height, 16px);
+    border-radius: var(--shimmer-border-radius, 4px);
+    background-color: var(--shimmer-background, #e0e0e0);
+    opacity: var(--shimmer-opacity, 1);
+    overflow: hidden;
+    position: relative;
+  }
+
+  .shimmer::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--shimmer-highlight, rgba(255, 255, 255, 0.4)),
+      transparent
+    );
+    animation: shimmer var(--shimmer-duration, 1.5s) infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>

package/dist/Shimmer/Shimmer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ShimmerProperties } from './properties';
+declare const Shimmer: import("svelte").Component<ShimmerProperties, {}, "">;
+type Shimmer = ReturnType<typeof Shimmer>;
+export default Shimmer;

package/dist/Shimmer/properties.d.ts

@@ -0,0 +1,4 @@
+export type ShimmerProperties = {
+    testId?: string;
+    classes?: string;
+};

package/dist/Shimmer/properties.js

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

package/dist/Slider/Slider.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  import type { SliderProperties } from './properties';
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showValue = false,
+    testId,
+    onchange,
+    oninput,
+    classes
+  }: SliderProperties = $props();
+
+  let percentage = $derived(((value - min) / (max - min)) * 100);
+
+  function handleInput(e: Event) {
+    if (e.target instanceof HTMLInputElement) {
+      value = Number(e.target.value);
+      oninput?.(value);
+    }
+  }
+
+  function handleChange(e: Event) {
+    if (e.target instanceof HTMLInputElement) {
+      value = Number(e.target.value);
+      onchange?.(value);
+    }
+  }
+</script>
+
+<div class="slider-container {classes ?? ''}" class:disabled>
+  <input
+    type="range"
+    class="slider-input"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    data-pw={typeof testId === 'string' ? testId : null}
+    oninput={handleInput}
+    onchange={handleChange}
+    style="--slider-fill-percent: {percentage}%"
+  />
+  {#if showValue}
+    <span class="slider-value">{value}</span>
+  {/if}
+</div>
+
+<style>
+  .slider-container {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: var(--slider-container-width, 100%);
+    padding: var(--slider-container-padding, 4px 0);
+  }
+
+  .slider-container.disabled {
+    opacity: var(--slider-disabled-opacity, 0.5);
+    cursor: var(--slider-disabled-cursor, not-allowed);
+  }
+
+  .slider-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: var(--slider-track-height, 6px);
+    border-radius: var(--slider-track-border-radius, 3px);
+    background: linear-gradient(
+      to right,
+      var(--slider-track-active-color, #2196f3) 0%,
+      var(--slider-track-active-color, #2196f3) var(--slider-fill-percent, 0%),
+      var(--slider-track-background, #e0e0e0) var(--slider-fill-percent, 0%),
+      var(--slider-track-background, #e0e0e0) 100%
+    );
+    outline: none;
+    transition: var(--slider-transition, background 0.2s ease);
+    cursor: pointer;
+  }
+
+  .slider-container.disabled .slider-input {
+    cursor: var(--slider-disabled-cursor, not-allowed);
+    pointer-events: none;
+  }
+
+  .slider-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--slider-thumb-size, 20px);
+    height: var(--slider-thumb-size, 20px);
+    border-radius: var(--slider-thumb-border-radius, 50%);
+    background: var(--slider-thumb-background, #ffffff);
+    border: var(--slider-thumb-border, 2px solid #2196f3);
+    box-shadow: var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+
+  .slider-input::-moz-range-thumb {
+    width: var(--slider-thumb-size, 20px);
+    height: var(--slider-thumb-size, 20px);
+    border-radius: var(--slider-thumb-border-radius, 50%);
+    background: var(--slider-thumb-background, #ffffff);
+    border: var(--slider-thumb-border, 2px solid #2196f3);
+    box-shadow: var(--slider-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+
+  .slider-input:hover::-webkit-slider-thumb {
+    transform: scale(var(--slider-thumb-hover-scale, 1.15));
+  }
+
+  .slider-input:hover::-moz-range-thumb {
+    transform: scale(var(--slider-thumb-hover-scale, 1.15));
+  }
+
+  .slider-input:focus-visible::-webkit-slider-thumb {
+    outline: var(--slider-focus-ring, 2px solid #2196f3);
+    outline-offset: 2px;
+  }
+
+  .slider-input:focus-visible::-moz-range-thumb {
+    outline: var(--slider-focus-ring, 2px solid #2196f3);
+    outline-offset: 2px;
+  }
+
+  .slider-input::-moz-range-track {
+    height: var(--slider-track-height, 6px);
+    border-radius: var(--slider-track-border-radius, 3px);
+    background: transparent;
+  }
+
+  .slider-value {
+    font-size: var(--slider-value-font-size, 14px);
+    font-weight: var(--slider-value-font-weight, 500);
+    color: var(--slider-value-color, #333333);
+    white-space: nowrap;
+  }
+</style>

package/dist/Slider/Slider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderProperties } from './properties';
+declare const Slider: import("svelte").Component<SliderProperties, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/Slider/properties.d.ts

@@ -0,0 +1,17 @@
+export type SliderProperties = MandatorySliderProperties & OptionalSliderProperties & SliderEventProperties;
+export type MandatorySliderProperties = {
+    value: number;
+};
+export type OptionalSliderProperties = {
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type SliderEventProperties = {
+    onchange?: (value: number) => void;
+    oninput?: (value: number) => void;
+};

package/dist/Slider/properties.js

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

package/dist/Snippet/Snippet.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { SnippetProperties } from './properties';
+  import Button from '../Button/Button.svelte';
+  import copySvg from '../assets/copy.svg?raw';
+
+  let {
+    text,
+    prompt = '$',
+    showCopyButton = true,
+    testId,
+    copyIcon,
+    oncopy,
+    classes
+  }: SnippetProperties = $props();
+
+  let copied = $state(false);
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(text);
+      copied = true;
+      oncopy?.();
+      setTimeout(() => {
+        copied = false;
+      }, 2000);
+    } catch {
+      // Clipboard API unavailable (non-secure context, iframe restrictions)
+    }
+  }
+</script>
+
+<div class="snippet {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <code class="snippet-code">
+    <span class="snippet-prompt">{prompt}</span>
+    <span class="snippet-text">{text}</span>
+  </code>
+  {#if showCopyButton}
+    <div class="snippet-copy">
+      <Button onclick={handleCopy} ariaLabel="Copy to clipboard">
+        {#if copied}
+          <span class="snippet-copied">Copied!</span>
+        {:else if typeof copyIcon === 'function'}
+          {@render copyIcon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          <span class="snippet-copy-icon">{@html copySvg}</span>
+        {/if}
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .snippet {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--snippet-gap, 8px);
+    background: var(--snippet-background, #1e1e1e);
+    border: var(--snippet-border, 1px solid #333);
+    border-radius: var(--snippet-border-radius, 6px);
+    padding: var(--snippet-padding, 12px 16px);
+    font-family: var(--snippet-font-family, monospace);
+    font-size: var(--snippet-font-size, 14px);
+    color: var(--snippet-color, #e0e0e0);
+    margin: var(--snippet-margin, 0);
+  }
+
+  .snippet-code {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .snippet-prompt {
+    color: var(--snippet-prompt-color, #888);
+    margin-right: var(--snippet-prompt-margin-right, 8px);
+    flex-shrink: 0;
+  }
+
+  .snippet-text {
+    color: var(--snippet-text-color, #e0e0e0);
+    font-family: var(--snippet-text-font-family, inherit);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .snippet-copy {
+    --button-color: var(--snippet-copy-background, transparent);
+    --button-text-color: var(--snippet-copy-color, #888);
+    --button-border: var(--snippet-copy-border, none);
+    --button-padding: var(--snippet-copy-padding, 4px);
+    --button-border-radius: var(--snippet-copy-border-radius, 4px);
+    --cursor: var(--snippet-copy-cursor, pointer);
+    --button-hover-color: var(--snippet-copy-hover-background, #333);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .snippet-copy-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--snippet-copy-size, 16px);
+    height: var(--snippet-copy-size, 16px);
+  }
+
+  .snippet-copy-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .snippet-copied {
+    color: var(--snippet-copied-color, #4caf50);
+    font-size: var(--snippet-copied-font-size, 12px);
+    font-family: var(--snippet-font-family, monospace);
+  }
+</style>