@coyalabs/bts-style 1.0.8 → 1.1.0

package/dist/Components/Dropdown.svelte

@@ -0,0 +1,191 @@
+<script>
+  import Button from './Button.svelte';
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import { icons } from '../icons';
+  import { slide } from 'svelte/transition';
+
+  /**
+   * @type {string}
+   */
+  export let label = '';
+
+  /**
+   * @type {string | null}
+   */
+  export let icon = null;
+
+  /**
+   * @type {'full' | 'primary' | 'secondary'}
+   */
+  export let theme = 'full';
+
+  /**
+   * @type {string}
+   */
+  export let width = '200px';
+
+  /**
+   * @type {Array<{label: string, value: any, disabled?: boolean}>}
+   */
+  export let options = [];
+
+  /**
+   * @type {any}
+   */
+  export let value = null;
+
+  /**
+   * @type {(value: any) => void}
+   */
+  export let onChange = () => {};
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+
+  let isOpen = false;
+  /**
+     * @type {HTMLDivElement}
+     */
+  let dropdownRef;
+
+  function toggleDropdown() {
+    isOpen = !isOpen;
+  }
+
+  /**
+   * @param {any} optionValue
+   */
+  function selectOption(optionValue) {
+    value = optionValue;
+    isOpen = false;
+    onChange(optionValue);
+  }
+
+  /**
+   * @param {MouseEvent} event
+   */
+  function handleClickOutside(event) {
+    if (dropdownRef && event.target instanceof Node && !dropdownRef.contains(event.target)) {
+      isOpen = false;
+    }
+  }
+
+  $: selectedOption = options.find(opt => opt.value === value);
+  $: displayLabel = selectedOption ? selectedOption.label : label;
+</script>
+
+<svelte:window on:click={handleClickOutside} />
+
+<div class="dropdown-container" bind:this={dropdownRef} style="width: {width};">
+  <Button
+    {theme}
+    {icon}
+    actionIcon={icons.icon_expand}
+    actionIconSize="12px" 
+    actionIconRotation={isOpen ? 180 : 0}
+    {borderRadiusTopLeft}
+    {borderRadiusTopRight}
+    {borderRadiusBottomLeft}
+    {borderRadiusBottomRight}
+    on:click={toggleDropdown}
+  >
+    <span class="button-label">{displayLabel}</span>
+  </Button>
+
+  {#if isOpen}
+    <div class="dropdown-menu" transition:slide={{ duration: 150 }}>
+      <BaseContainer theme="filled" padding="0.5rem" borderRadiusTopLeft="15px" borderRadiusTopRight="15px" borderRadiusBottomLeft="15px" borderRadiusBottomRight="15px">
+        {#each options as option}
+          <button
+            class="dropdown-item"
+            class:selected={option.value === value}
+            class:disabled={option.disabled}
+            disabled={option.disabled}
+            on:click={() => selectOption(option.value)}
+          >
+            {option.label}
+          </button>
+        {/each}
+      </BaseContainer>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dropdown-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-container :global(button) {
+    width: 100%;
+  }
+
+  .button-label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 1000;
+  }
+
+  .dropdown-item {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: none;
+    border: none;
+    color: #E3D8D8;
+    font-family: 'Satoshi', sans-serif;
+    font-size: 0.95rem;
+    font-weight: 500;
+    text-align: left;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    border-radius: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dropdown-item:hover:not(.disabled) {
+    background-color: rgba(227, 216, 216, 0.1);
+  }
+
+  .dropdown-item.selected {
+    background-color: rgba(255, 239, 246, 0.15);
+    font-weight: 700;
+  }
+
+  .dropdown-item.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .dropdown-item:not(:last-child) {
+    margin-bottom: 4px;
+  }
+</style>

package/dist/Components/Dropdown.svelte.d.ts

@@ -0,0 +1,54 @@
+export default Dropdown;
+type Dropdown = SvelteComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    label?: string | undefined;
+    icon?: string | null | undefined;
+    width?: string | undefined;
+    value?: any;
+    options?: {
+        label: string;
+        value: any;
+        disabled?: boolean | undefined;
+    }[] | undefined;
+    onChange?: ((value: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    label?: string | undefined;
+    icon?: string | null | undefined;
+    width?: string | undefined;
+    value?: any;
+    options?: {
+        label: string;
+        value: any;
+        disabled?: boolean;
+    }[] | undefined;
+    onChange?: ((value: any) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/IconButton.svelte

@@ -0,0 +1,44 @@
+<script>
+  import BaseIcon from '../Base/BaseIcon.svelte';
+
+  /**
+   * @type {string}
+   */
+  export let svg;
+
+  /**
+   * @type {string}
+   */
+  export let size = '20px';
+
+  /**
+   * @type {'default' | 'toned'}
+   */
+  export let variant = 'toned';
+</script>
+
+<button class="icon-button" on:click>
+  <BaseIcon variant={variant} {svg} {size} />
+</button>
+
+<style>
+  .icon-button {
+    all: unset;
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s, transform 0.2s;
+  }
+
+  .icon-button:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(1.1);
+  }
+
+  .icon-button:active {
+    transform: scale(0.95);
+  }
+</style>

package/dist/Components/IconButton.svelte.d.ts

@@ -0,0 +1,34 @@
+export default IconButton;
+type IconButton = SvelteComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: string | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const IconButton: $$__sveltets_2_IsomorphicComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: string | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/InputBox.svelte

@@ -0,0 +1,103 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+  import { icons } from '../icons.js';
+
+  /**
+   * @type {'full' | 'primary' | 'secondary'}
+   */
+  export let theme = 'secondary';
+
+  /**
+   * @type {string}
+   */
+  export let value = '';
+
+  /**
+   * @type {string}
+   */
+  export let placeholder = '';
+
+  /**
+   * @type {string}
+   */
+  export let type = 'text';
+
+  /**
+   * @type {string | null}
+   */
+  export let icon = null;
+
+  /**
+   * @type {string}
+   */
+  export let iconSize = '18px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+</script>
+
+<div class="input-wrapper">
+  <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
+    <div class="input-content">
+      {#if icon}
+        <BaseIcon variant="toned" svg={icon} size={iconSize} />
+      {/if}
+      <input 
+        {type}
+        {placeholder}
+        bind:value
+        on:input
+        on:change
+        on:focus
+        on:blur
+        on:keydown
+      />
+      <BaseIcon variant="toned" svg={icons.pen} size="15px" />
+    </div>
+  </BaseContainer>
+</div>
+
+<style>
+  .input-wrapper {
+    width: 100%;
+  }
+
+  .input-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 25px; /* Match button text height */
+  }
+
+  input {
+    all: unset;
+    flex: 1;
+    font-family: 'Satoshi', sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+    color: #E3D8D8;
+    width: 100%;
+  }
+
+  input::placeholder {
+    color: rgba(227, 216, 216, 0.4);
+  }
+</style>

package/dist/Components/InputBox.svelte.d.ts

@@ -0,0 +1,56 @@
+export default InputBox;
+type InputBox = SvelteComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    iconSize?: string | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+}, {
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const InputBox: $$__sveltets_2_IsomorphicComponent<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    iconSize?: string | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+}, {
+    input: Event;
+    change: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/AlertPopup.svelte

@@ -0,0 +1,27 @@
+<script>
+  import Button from '../Button.svelte';
+  import { icons } from '../../icons.js';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {() => void} */
+  export let onOk = () => {};
+
+  /** @type {string} */
+  export let okText = 'OK';
+
+  function handleOk() {
+    onOk();
+    popupStore.close();
+  }
+</script>
+
+<div class="buttons">
+  <Button actionIcon={icons.check} theme="primary" on:click={handleOk}>{okText}</Button>
+</div>
+
+<style>
+  .buttons {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

package/dist/Components/Popup/AlertPopup.svelte.d.ts

@@ -0,0 +1,28 @@
+export default AlertPopup;
+type AlertPopup = SvelteComponent<{
+    onOk?: (() => void) | undefined;
+    okText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const AlertPopup: $$__sveltets_2_IsomorphicComponent<{
+    onOk?: (() => void) | undefined;
+    okText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/ConfirmPopup.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { icons } from '../../icons.js';
+  import Button from '../Button.svelte';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {() => void} */
+  export let onConfirm = () => {};
+  
+  /** @type {() => void} */
+  export let onCancel = () => {};
+
+  /** @type {string} */
+  export let confirmText = 'Confirm';
+
+  /** @type {string} */
+  export let cancelText = 'Cancel';
+
+  function handleConfirm() {
+    onConfirm();
+    popupStore.close();
+  }
+
+  function handleCancel() {
+    onCancel();
+    popupStore.close();
+  }
+</script>
+
+<div class="buttons">
+  <Button theme="primary" actionIcon={icons.check} on:click={handleConfirm}>{confirmText}</Button>
+  <Button theme="secondary" actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>
+</div>
+
+<style>
+  .buttons {
+    display: flex;
+    gap: 1rem;
+  }
+</style>

package/dist/Components/Popup/ConfirmPopup.svelte.d.ts

@@ -0,0 +1,32 @@
+export default ConfirmPopup;
+type ConfirmPopup = SvelteComponent<{
+    onConfirm?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    confirmText?: string | undefined;
+    cancelText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ConfirmPopup: $$__sveltets_2_IsomorphicComponent<{
+    onConfirm?: (() => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    confirmText?: string | undefined;
+    cancelText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Components/Popup/Popup.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { fade, fly } from 'svelte/transition';
+  import { backOut } from 'svelte/easing';
+  import { popupStore } from '../popupStore.js';
+  import BaseContainer from '../../Base/BaseContainer.svelte';
+  import IconButton from '../IconButton.svelte';
+  import TextHeader from '../../Structure/TextHeader.svelte';
+  import { icons } from '../../icons.js';
+</script>
+
+{#if $popupStore.isOpen}
+  <div class="overlay" transition:fade={{ duration: 250 }} on:click={popupStore.close} role="presentation">
+    <div 
+      class="dialog" 
+      transition:fly={{ y: 30, duration: 300, easing: backOut }}
+      on:click|stopPropagation
+      on:keydown|stopPropagation
+      role="dialog"
+      tabindex="-1"
+    >
+      <BaseContainer padding="1.5rem" borderRadiusTopLeft="35px" borderRadiusTopRight="35px" borderRadiusBottomLeft="35px" borderRadiusBottomRight="35px" theme="filled">
+        <header>
+          <TextHeader title={$popupStore.title} subtitle={$popupStore.subtitle || ''} />
+          <div class="close-btn">
+            <IconButton svg={icons.cross} size="20px" variant="toned" on:click={popupStore.close} />
+          </div>
+        </header>
+        <main>
+          <svelte:component this={$popupStore.component} {...$popupStore.props} />
+        </main>
+      </BaseContainer>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    inset: 0;
+    background: #0b070eda;
+    backdrop-filter: blur(3px);
+    display: grid;
+    place-items: center;
+    z-index: 9999;
+  }
+
+  .dialog {
+    width: min(90%, 600px);
+    max-height: 80vh;
+    zoom: 0.92;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .close-btn {
+    opacity: 0.5;
+  }
+
+  main {
+    margin-top: 1.5rem;
+  }
+</style>