@juspay/svelte-ui-components 2.9.0 → 2.11.0

package/dist/Phone/Phone.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+  import type { PhoneProperties } from './properties';
+  import signalSvg from '../assets/signal.svg?raw';
+  import wifiSvg from '../assets/wifi.svg?raw';
+  import batterySvg from '../assets/battery.svg?raw';
+
+  let {
+    children,
+    variant = 'modern',
+    showStatusBar = true,
+    showHomeBar = true,
+    testId,
+    classes
+  }: PhoneProperties = $props();
+
+  let isModern = $derived(variant === 'modern');
+</script>
+
+<div class="phone-wrapper {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <div class="side-buttons-left">
+    <div class="side-button volume-up"></div>
+    <div class="side-button volume-down"></div>
+  </div>
+
+  <div class="side-buttons-right">
+    <div class="side-button power"></div>
+  </div>
+
+  <div class="phone-frame">
+    <div class="phone-screen" class:modern={isModern} class:classic={!isModern}>
+      {#if showStatusBar}
+        <div class="status-bar">
+          <div class="status-bar-left">
+            <span class="status-time">9:41</span>
+          </div>
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          <div class="status-bar-right">
+            <span class="status-icon">{@html signalSvg}</span>
+            <span class="status-icon">{@html wifiSvg}</span>
+            <span class="status-icon battery-icon">{@html batterySvg}</span>
+          </div>
+        </div>
+      {/if}
+
+      {#if isModern}
+        <div class="notch"></div>
+      {/if}
+
+      <div class="screen-content">
+        {#if typeof children === 'function'}
+          {@render children()}
+        {/if}
+      </div>
+
+      {#if isModern && showHomeBar}
+        <div class="home-bar-container">
+          <div class="home-bar"></div>
+        </div>
+      {/if}
+    </div>
+
+    {#if !isModern}
+      <div class="home-button-container">
+        <div class="home-button"></div>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .phone-wrapper {
+    display: inline-block;
+    position: relative;
+    transform-origin: top left;
+    transform: scale(var(--phone-scale, 1));
+    rotate: var(--phone-rotation, 0deg);
+  }
+
+  .phone-frame {
+    position: relative;
+    width: var(--phone-frame-width, 375px);
+    border-radius: var(--phone-frame-border-radius, 50px);
+    padding: var(--phone-frame-padding, 12px);
+    box-sizing: border-box;
+    background: var(--phone-frame-color, black);
+    box-shadow: var(
+      --phone-frame-shadow,
+      0 20px 60px rgba(0, 0, 0, 0.3),
+      0 0 0 1px rgba(0, 0, 0, 0.1)
+    );
+  }
+
+  .phone-screen {
+    position: relative;
+    border-radius: var(--phone-screen-border-radius, 38px);
+    background: var(--phone-screen-background, #000);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .phone-screen.modern {
+    aspect-ratio: var(--phone-screen-aspect-ratio, 9 / 19.5);
+  }
+
+  .phone-screen.classic {
+    aspect-ratio: var(--phone-screen-aspect-ratio, 9 / 16);
+  }
+
+  .status-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: var(--phone-status-bar-height, 44px);
+    padding: 0 24px;
+    color: var(--phone-status-bar-color, #fff);
+    font-size: var(--phone-status-bar-font-size, 14px);
+    background: var(--phone-status-bar-background, transparent);
+    flex-shrink: 0;
+    z-index: 2;
+    position: relative;
+  }
+
+  .status-bar-left {
+    display: flex;
+    align-items: center;
+  }
+
+  .status-time {
+    font-weight: 600;
+    letter-spacing: 0.5px;
+  }
+
+  .status-bar-right {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .status-icon {
+    display: inline-flex;
+    width: 16px;
+    height: 12px;
+    color: inherit;
+  }
+
+  .status-icon :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .battery-icon {
+    width: 24px;
+  }
+
+  .notch {
+    width: var(--phone-notch-width, 120px);
+    height: var(--phone-notch-height, 32px);
+    background: var(--phone-notch-background, var(--phone-frame-color, black));
+    border-radius: var(--phone-notch-border-radius, 20px);
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 3;
+  }
+
+  .screen-content {
+    flex: 1;
+    overflow: var(--phone-content-overflow, hidden);
+    position: relative;
+  }
+
+  .home-bar-container {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0;
+    flex-shrink: 0;
+  }
+
+  .home-bar {
+    width: var(--phone-home-bar-width, 134px);
+    height: var(--phone-home-bar-height, 5px);
+    background: var(--phone-home-bar-color, #fff);
+    border-radius: var(--phone-home-bar-radius, 3px);
+  }
+
+  .home-button-container {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+  }
+
+  .home-button {
+    width: var(--phone-home-button-size, 50px);
+    height: var(--phone-home-button-size, 50px);
+    border-radius: 50%;
+    border: 2px solid var(--phone-home-button-border-color, #555);
+    background: transparent;
+  }
+
+  .side-buttons-left {
+    position: absolute;
+    top: 120px;
+    left: -3px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    z-index: 1;
+  }
+
+  .side-buttons-right {
+    position: absolute;
+    top: 140px;
+    right: -3px;
+    z-index: 1;
+  }
+
+  .side-button {
+    background: var(--phone-side-button-color, var(--phone-frame-color, black));
+    border-radius: 2px;
+  }
+
+  .side-button.volume-up,
+  .side-button.volume-down {
+    width: 3px;
+    height: 30px;
+  }
+
+  .side-button.power {
+    width: 3px;
+    height: 40px;
+  }
+</style>

package/dist/Phone/Phone.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Phone: import("svelte").Component<import("./properties").OptionalPhoneProperties, {}, "">;
+type Phone = ReturnType<typeof Phone>;
+export default Phone;

package/dist/Phone/properties.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+export type PhoneVariant = 'modern' | 'classic';
+export type PhoneProperties = OptionalPhoneProperties;
+export type OptionalPhoneProperties = {
+    children?: Snippet;
+    variant?: PhoneVariant;
+    showStatusBar?: boolean;
+    showHomeBar?: boolean;
+    testId?: string;
+    classes?: string;
+};

package/dist/Phone/properties.js

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

package/dist/Pill/Pill.svelte

@@ -0,0 +1,130 @@
+<script lang="ts">
+  import type { PillProperties } from './properties';
+  import Button from '../Button/Button.svelte';
+  import closeSvg from '../assets/close.svg?raw';
+
+  let {
+    text,
+    dismissible = false,
+    disabled = false,
+    testId,
+    dismissIcon,
+    onclick,
+    ondismiss,
+    classes
+  }: PillProperties = $props();
+
+  let interactive = $derived(typeof onclick === 'function');
+
+  function handleClick(event: MouseEvent): void {
+    if (disabled) {
+      return;
+    }
+    onclick?.(event);
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (event.currentTarget instanceof HTMLElement) {
+        event.currentTarget.click();
+      }
+    }
+  }
+
+  function handleDismiss(event: MouseEvent): void {
+    event.stopPropagation();
+    if (disabled) {
+      return;
+    }
+    ondismiss?.();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  class="pill {classes ?? ''}"
+  class:disabled
+  onclick={interactive ? handleClick : null}
+  onkeydown={interactive ? handleKeydown : null}
+  role={interactive ? 'button' : null}
+  tabindex={interactive ? 0 : null}
+  aria-disabled={interactive && disabled ? true : null}
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <span class="pill-text">{text}</span>
+  {#if dismissible}
+    <div class="pill-dismiss">
+      <Button
+        {disabled}
+        onclick={handleDismiss}
+        ariaLabel="Dismiss"
+        {...typeof testId === 'string' ? { testId: `${testId}-dismiss` } : {}}
+      >
+        {#if typeof dismissIcon === 'function'}
+          {@render dismissIcon()}
+        {:else}
+          <!-- eslint-disable svelte/no-at-html-tags -->
+          {@html closeSvg}
+        {/if}
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .pill {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--pill-gap, 4px);
+    background-color: var(--pill-background, #e0e0e0);
+    color: var(--pill-color, #333333);
+    font-size: var(--pill-font-size, 13px);
+    font-weight: var(--pill-font-weight, 500);
+    font-family: var(--pill-font-family);
+    padding: var(--pill-padding, 6px 10px);
+    border-radius: var(--pill-border-radius, 999px);
+    border: var(--pill-border, none);
+    cursor: var(--pill-cursor, pointer);
+    max-width: var(--pill-max-width);
+    line-height: 1;
+  }
+
+  .pill:hover:not(.disabled) {
+    background-color: var(--pill-hover-background, var(--pill-background, #d0d0d0));
+    color: var(--pill-hover-color, var(--pill-color, #333333));
+  }
+
+  .pill.disabled {
+    opacity: var(--pill-disabled-opacity, 0.4);
+    cursor: var(--pill-disabled-cursor, not-allowed);
+  }
+
+  .pill-text {
+    overflow: hidden;
+    text-overflow: var(--pill-text-overflow, ellipsis);
+    white-space: nowrap;
+  }
+
+  .pill-dismiss {
+    --button-color: transparent;
+    --button-border: none;
+    --button-padding: 0;
+    --button-text-color: var(--pill-dismiss-color, currentColor);
+    --button-hover-color: transparent;
+    --button-hover-text-color: var(
+      --pill-dismiss-hover-color,
+      var(--pill-dismiss-color, currentColor)
+    );
+    --cursor: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .pill-dismiss :global(svg) {
+    width: var(--pill-dismiss-size, 14px);
+    height: var(--pill-dismiss-size, 14px);
+  }
+</style>

package/dist/Pill/Pill.svelte.d.ts

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

package/dist/Pill/properties.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+export type PillProperties = MandatoryPillProperties & OptionalPillProperties & PillEventProperties;
+export type MandatoryPillProperties = {
+    text: string;
+};
+export type OptionalPillProperties = {
+    dismissible?: boolean;
+    disabled?: boolean;
+    testId?: string;
+    dismissIcon?: Snippet;
+    classes?: string;
+};
+export type PillEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    ondismiss?: () => void;
+};

package/dist/Pill/properties.js

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

package/dist/Progress/Progress.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { ProgressProperties } from './properties';
+
+  let { value, max = 100, showLabel = false, testId, classes }: ProgressProperties = $props();
+
+  let percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
+  let isIndeterminate = $derived(value < 0);
+</script>
+
+<div class="container {classes ?? ''}" data-pw={typeof testId === 'string' ? testId : null}>
+  <div class="track">
+    <div
+      class="bar"
+      class:indeterminate={isIndeterminate}
+      style:width={isIndeterminate ? null : `${percentage}%`}
+    ></div>
+  </div>
+  {#if showLabel && !isIndeterminate}
+    <div class="label">{Math.round(percentage)}%</div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+    width: var(--progress-container-width, 100%);
+    padding: var(--progress-container-padding, 0);
+    gap: var(--progress-container-gap, 8px);
+  }
+
+  .track {
+    flex: 1;
+    height: var(--progress-track-height, 8px);
+    background: var(--progress-track-background, #e0e0e0);
+    border-radius: var(--progress-track-border-radius, 4px);
+    overflow: hidden;
+  }
+
+  .bar {
+    height: 100%;
+    background: var(--progress-bar-background, #2196f3);
+    border-radius: var(--progress-bar-border-radius, 4px);
+    transition: var(--progress-bar-transition, width 0.3s ease);
+  }
+
+  .bar.indeterminate {
+    width: 30%;
+    animation: indeterminate var(--progress-indeterminate-duration, 1.5s) ease-in-out infinite;
+  }
+
+  .label {
+    font-size: var(--progress-label-font-size, 14px);
+    font-weight: var(--progress-label-font-weight, 500);
+    color: var(--progress-label-color, #333);
+    font-family: var(--progress-label-font-family, inherit);
+    margin: var(--progress-label-margin, 0);
+  }
+
+  @keyframes indeterminate {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(400%);
+    }
+  }
+</style>

package/dist/Progress/Progress.svelte.d.ts

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

package/dist/Progress/properties.d.ts

@@ -0,0 +1,10 @@
+export type ProgressProperties = MandatoryProgressProperties & OptionalProgressProperties;
+export type MandatoryProgressProperties = {
+    value: number;
+};
+export type OptionalProgressProperties = {
+    max?: number;
+    showLabel?: boolean;
+    testId?: string;
+    classes?: string;
+};

package/dist/Progress/properties.js

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

package/dist/Radio/Radio.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { RadioProperties } from './properties';
+
+  let {
+    name,
+    value,
+    selectedValue = $bindable(''),
+    text = '',
+    disabled = false,
+    testId,
+    onchange,
+    classes
+  }: RadioProperties = $props();
+
+  let checked = $derived(selectedValue === value);
+
+  function handleChange(): void {
+    if (disabled) {
+      return;
+    }
+    selectedValue = value;
+    onchange?.(value);
+  }
+</script>
+
+<label
+  class="radio-container {classes ?? ''}"
+  class:disabled
+  data-pw={typeof testId === 'string' ? testId : null}
+>
+  <input
+    type="radio"
+    class="radio-input"
+    {name}
+    {value}
+    {checked}
+    {disabled}
+    onchange={handleChange}
+  />
+  <span class="radio-indicator" class:checked class:disabled>
+    <span class="radio-dot" class:checked class:disabled></span>
+  </span>
+  {#if text.length > 0}
+    <span class="radio-text" class:disabled>{text}</span>
+  {/if}
+</label>
+
+<style>
+  .radio-container {
+    display: var(--radio-container-display, inline-flex);
+    align-items: var(--radio-container-align-items, center);
+    gap: var(--radio-container-gap, 8px);
+    cursor: var(--radio-container-cursor, pointer);
+    opacity: var(--radio-container-opacity, 1);
+  }
+
+  .radio-container.disabled {
+    cursor: not-allowed;
+  }
+
+  .radio-input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    margin: 0;
+    pointer-events: none;
+  }
+
+  .radio-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-size, 20px);
+    height: var(--radio-size, 20px);
+    border: var(--radio-border, 2px solid #9e9e9e);
+    border-radius: var(--radio-border-radius, 50%);
+    background-color: var(--radio-background, #ffffff);
+    transition: var(--radio-transition, 0.2s);
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .radio-indicator.checked {
+    border: var(--radio-selected-border, 2px solid #2196f3);
+    background-color: var(--radio-selected-background, #ffffff);
+  }
+
+  .radio-indicator.disabled {
+    border: var(--radio-disabled-border, 2px solid #cccccc);
+    background-color: var(--radio-disabled-background, #f5f5f5);
+  }
+
+  .radio-container:not(.disabled):hover .radio-indicator:not(.checked) {
+    border: var(--radio-hover-border, 2px solid #2196f3);
+  }
+
+  .radio-input:focus-visible + .radio-indicator {
+    box-shadow: var(--radio-focus-shadow, 0 0 0 3px rgba(33, 150, 243, 0.3));
+  }
+
+  .radio-dot {
+    width: 0;
+    height: 0;
+    border-radius: var(--radio-dot-border-radius, 50%);
+    background-color: var(--radio-dot-color, #2196f3);
+    transition: var(--radio-transition, 0.2s);
+  }
+
+  .radio-dot.checked {
+    width: var(--radio-dot-size, 10px);
+    height: var(--radio-dot-size, 10px);
+  }
+
+  .radio-dot.checked.disabled {
+    background-color: var(--radio-disabled-dot-color, #cccccc);
+  }
+
+  .radio-text {
+    font-size: var(--radio-text-font-size, 14px);
+    font-weight: var(--radio-text-font-weight, 400);
+    color: var(--radio-text-color, #333333);
+  }
+
+  .radio-text.disabled {
+    color: var(--radio-disabled-text-color, #999999);
+  }
+</style>

package/dist/Radio/Radio.svelte.d.ts

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

package/dist/Radio/properties.d.ts

@@ -0,0 +1,15 @@
+export type RadioProperties = MandatoryRadioProperties & OptionalRadioProperties & RadioEventProperties;
+export type MandatoryRadioProperties = {
+    name: string;
+    value: string;
+};
+export type OptionalRadioProperties = {
+    selectedValue?: string;
+    text?: string;
+    disabled?: boolean;
+    testId?: string;
+    classes?: string;
+};
+export type RadioEventProperties = {
+    onchange?: (value: string) => void;
+};

package/dist/Radio/properties.js

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