polymorph-ui-components 0.1.0

package/dist/Browser/Browser.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import type { BrowserProperties } from './properties';
+  import lockSvg from '../assets/lock.svg?raw';
+
+  let {
+    url = '',
+    title = '',
+    showAddressBar = true,
+    showTabBar = false,
+    shadow = true,
+    rounded = true,
+    testId,
+    lockIcon,
+    children,
+    classes
+  }: BrowserProperties = $props();
+</script>
+
+<div class="browser {classes ?? ''}" class:shadow class:rounded data-pw={testId}>
+  <div class="chrome">
+    <div class="titlebar">
+      <div class="dots">
+        <span class="dot close"></span>
+        <span class="dot minimize"></span>
+        <span class="dot maximize"></span>
+      </div>
+      {#if showTabBar}
+        <div class="tab-bar">
+          <div class="tab">{title}</div>
+        </div>
+      {/if}
+    </div>
+    {#if showAddressBar}
+      <div class="addressbar-row">
+        <div class="addressbar">
+          {#if typeof lockIcon === 'function'}
+            {@render lockIcon()}
+          {:else}
+            <span class="lock-icon">
+              <!-- eslint-disable svelte/no-at-html-tags -->
+              {@html lockSvg}
+            </span>
+          {/if}
+          <span class="url-text">{url}</span>
+        </div>
+      </div>
+    {/if}
+  </div>
+  <div class="content">
+    {#if typeof children === 'function'}
+      {@render children()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .browser {
+    width: var(--browser-width, 100%);
+    max-width: var(--browser-max-width);
+    border: var(--browser-border, 1px solid #e4e4e7);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .browser.rounded {
+    border-radius: var(--browser-border-radius, 12px);
+  }
+
+  .browser.shadow {
+    box-shadow: var(--browser-shadow, 0 8px 32px rgba(0, 0, 0, 0.12));
+  }
+
+  /* Chrome surfaces — neutral defaults; theme via the CSS variables (e.g. a `.browser-dark` class). */
+  .chrome {
+    background-color: var(--browser-chrome-bg, transparent);
+    color: var(--browser-chrome-color, currentColor);
+  }
+
+  .tab {
+    background-color: var(--browser-tab-bg, #ffffff);
+    color: var(--browser-tab-color, currentColor);
+  }
+
+  .addressbar {
+    background-color: var(--browser-addressbar-bg, #ffffff);
+    border: var(--browser-addressbar-border, 1px solid #e4e4e7);
+  }
+
+  .chrome {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .titlebar {
+    display: flex;
+    align-items: center;
+    padding: var(--browser-titlebar-padding, 12px 16px);
+    gap: 12px;
+  }
+
+  .dots {
+    display: flex;
+    gap: var(--browser-dot-gap, 8px);
+    flex-shrink: 0;
+  }
+
+  .dot {
+    width: var(--browser-dot-size, 12px);
+    height: var(--browser-dot-size, 12px);
+    border-radius: 50%;
+  }
+
+  .dot.close {
+    background-color: var(--browser-dot-close-bg, #ef4444);
+  }
+
+  .dot.minimize {
+    background-color: var(--browser-dot-minimize-bg, #f59e0b);
+  }
+
+  .dot.maximize {
+    background-color: var(--browser-dot-maximize-bg, #22c55e);
+  }
+
+  .tab-bar {
+    display: flex;
+    align-items: flex-end;
+    flex: 1;
+  }
+
+  .tab {
+    padding: var(--browser-tab-padding, 6px 16px);
+    border-radius: var(--browser-tab-border-radius, 8px 8px 0 0);
+    font-size: var(--browser-tab-font-size, 14px);
+    font-family: var(--browser-tab-font-family, inherit);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 200px;
+  }
+
+  .addressbar-row {
+    padding: var(--browser-addressbar-padding, 8px 16px);
+  }
+
+  .addressbar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 12px;
+    height: var(--browser-addressbar-height, 32px);
+    border-radius: var(--browser-addressbar-border-radius, 6px);
+    font-size: var(--browser-addressbar-font-size, 14px);
+    font-family: var(--browser-addressbar-font-family, inherit);
+  }
+
+  .lock-icon {
+    display: flex;
+    flex-shrink: 0;
+    color: var(--browser-lock-color, currentColor);
+  }
+
+  .url-text {
+    color: var(--browser-addressbar-color, currentColor);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .content {
+    background-color: var(--browser-content-bg, #ffffff);
+    min-height: var(--browser-content-min-height, 200px);
+    overflow: var(--browser-content-overflow, hidden);
+  }
+</style>

package/dist/Browser/Browser.svelte.d.ts

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

package/dist/Browser/properties.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+export type BrowserProperties = OptionalBrowserProperties;
+export type OptionalBrowserProperties = {
+    url?: string;
+    title?: string;
+    showAddressBar?: boolean;
+    showTabBar?: boolean;
+    shadow?: boolean;
+    rounded?: boolean;
+    testId?: string;
+    children?: Snippet;
+    lockIcon?: Snippet;
+    classes?: string;
+};

package/dist/Browser/properties.js

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

package/dist/Button/Button.svelte

@@ -0,0 +1,153 @@
+<script lang="ts">
+  import Loader from '../Loader/Loader.svelte';
+  import type { ButtonProperties } from './properties';
+
+  let {
+    text,
+    enable = true,
+    disabled = false,
+    showLoader = false,
+    loaderType,
+    type = 'button',
+    testId,
+    ariaLabel,
+    ariaExpanded,
+    ariaSelected,
+    role,
+    onclick,
+    onkeyup = () => {},
+    showProgressBar = $bindable(false),
+    icon,
+    children,
+    classes
+  }: ButtonProperties = $props();
+
+  let isDisabled = $derived(!enable || disabled || showLoader);
+
+  function handleButtonClick(event: MouseEvent): void {
+    if (showProgressBar) {
+      return;
+    }
+    onclick?.(event);
+    if (showLoader && loaderType === 'ProgressBar') {
+      showProgressBar = true;
+    }
+  }
+</script>
+
+<div class="button-container {classes ?? ''}">
+  {#if showProgressBar}
+    <div class="button-progress-bar"></div>
+  {/if}
+  <button
+    class:disabled={isDisabled}
+    onclick={handleButtonClick}
+    {onkeyup}
+    disabled={isDisabled}
+    {type}
+    data-pw={testId}
+    aria-label={ariaLabel}
+    aria-expanded={ariaExpanded}
+    aria-selected={ariaSelected}
+    {role}
+  >
+    {#if showLoader && loaderType === 'Circular'}
+      <div class="button-loader"><Loader /></div>
+    {/if}
+    {#if typeof icon === 'function'}
+      <div class="button-icon">{@render icon()}</div>
+    {/if}
+    {#if typeof text === 'string' && text.length > 0}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      <div class="button-text">{@html text}</div>
+    {/if}
+    {#if typeof children === 'function'}
+      {@render children()}
+    {/if}
+  </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, #18181b);
+    color: var(--button-text-color, #ffffff);
+    height: var(--button-height, fit-content);
+    padding: var(--button-padding, 16px);
+    margin: var(--button-margin);
+    border-radius: var(--button-border-radius, 6px);
+    width: var(--button-width, fit-content);
+    cursor: var(--button-cursor, pointer);
+    opacity: var(--button-opacity, 1);
+    border: var(--button-border, none);
+    display: flex;
+    justify-content: var(--button-justify-content, center);
+    align-items: center;
+    flex-direction: var(--button-content-flex-direction, row);
+    gap: var(--button-content-gap, 16px);
+    visibility: var(--button-visibility, visible);
+    box-shadow: var(--button-box-shadow, none);
+  }
+
+  .disabled {
+    cursor: var(--button-disabled-cursor, not-allowed);
+    opacity: var(--button-disabled-opacity, 0.4);
+    color: var(--button-disabled-text-color, var(--button-text-color, #ffffff));
+    font-size: var(--button-disabled-font-size);
+    font-weight: var(--button-disabled-font-weight);
+    border: var(--button-disabled-border);
+    background: var(--button-disabled-background-color, var(--button-color, #18181b));
+  }
+
+  .button-loader {
+    order: var(--button-loader-order, 1);
+  }
+
+  .button-icon {
+    order: var(--button-icon-order, 2);
+    display: var(--button-icon-display);
+  }
+
+  .button-text {
+    order: var(--button-text-order, 3);
+    display: var(--button-text-display);
+  }
+
+  button:hover {
+    background: var(--button-hover-color, var(--button-color, #18181b));
+    color: var(--button-hover-text-color, var(--button-text-color, #ffffff));
+    border: var(--button-hover-border, var(--button-border, none));
+    transform: var(--button-hover-transform);
+  }
+
+  button:active {
+    transform: var(--button-active-transform);
+  }
+
+  .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,4 @@
+import type { ButtonProperties } from './properties';
+declare const Button: import("svelte").Component<ButtonProperties, {}, "showProgressBar">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/Button/properties.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+export type LoaderType = 'Circular' | 'ProgressBar';
+export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties;
+export type OptionalButtonProperties = {
+    text?: string;
+    enable?: boolean;
+    showProgressBar?: boolean;
+    showLoader?: boolean;
+    loaderType?: LoaderType;
+    type?: 'submit' | 'reset' | 'button';
+    testId?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    ariaLabel?: string;
+    ariaExpanded?: boolean;
+    ariaSelected?: boolean;
+    role?: string;
+    disabled?: boolean;
+    classes?: string;
+};
+export type ButtonEventProperties = {
+    onclick?: (event: MouseEvent) => void;
+    onkeyup?: (event: KeyboardEvent) => void;
+};

package/dist/Button/properties.js

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