@coyalabs/bts-style 1.0.9 → 1.1.0

package/dist/Base/BaseContainer.svelte

@@ -1,6 +1,6 @@
 <script>
   /**
-   * @type {'full' | 'primary' | 'secondary' | 'filled'}
+   * @type {'full' | 'primary' | 'secondary' | 'filled' | 'special-filled'}
    */
   export let theme = 'full';
 
@@ -73,4 +73,13 @@
       0px 0px 13px 0px #ffffff1a,
       inset 0px 0px 9px 2px #ffffff0a;
   }
+
+    /* Theme D - Filled */
+  .glow-base-container[data-theme='special-filled'] {
+    background: linear-gradient(-78deg, #382D40 0%, #3A2B45 100%);
+    box-shadow: 
+      0px 0px 13px 16px #A461CA08,
+      inset 0px 0px 9px 2px #AA91D845,
+      inset 2px 3px 9px 0px #BE81E225;
+  }
 </style>

package/dist/Base/BaseContainer.svelte.d.ts

@@ -1,6 +1,6 @@
 export default BaseContainer;
 type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | "filled" | undefined;
+    theme?: "full" | "primary" | "secondary" | "filled" | "special-filled" | undefined;
     borderRadiusTopLeft?: string | undefined;
     borderRadiusTopRight?: string | undefined;
     borderRadiusBottomLeft?: string | undefined;
@@ -16,7 +16,7 @@ type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const BaseContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | "filled" | undefined;
+    theme?: "full" | "primary" | "secondary" | "filled" | "special-filled" | undefined;
     borderRadiusTopLeft?: string | undefined;
     borderRadiusTopRight?: string | undefined;
     borderRadiusBottomLeft?: string | undefined;

package/dist/Base/BasePage.svelte

@@ -1,11 +1,22 @@
 <script lang="ts">
   import { onMount } from 'svelte';
+  import BGDetails from '../Structure/BG/BGDetails.svelte';
 
   /**
    * @type {string | null}
    */
   export let favicon = null;
 
+  /**
+   * @type {boolean}
+   */
+  export let showBGDetails = true;
+
+  /**
+   * @type {string}
+   */
+  export let chainColor = "#130F15";
+
   onMount(() => {
     // Set favicon if not already set
     let link = document.querySelector("link[rel*='icon']") as HTMLLinkElement | null;
@@ -24,11 +35,17 @@
 </script>
 
 <div class="base-page">
-  <slot />
+  {#if showBGDetails}
+    <BGDetails {chainColor} />
+  {/if}
+  <div class="page-content">
+    <slot />
+  </div>
 </div>
 
 <style>
   .base-page {
+    position: relative;
     min-height: 100vh;
     background-color: #0B070D;
     margin: 0;
@@ -48,4 +65,9 @@
   .base-page > :global(*) {
     margin-top: 0;
   }
+
+  .page-content {
+    position: relative;
+    z-index: 1;
+  }
 </style>

package/dist/Base/BasePage.svelte.d.ts

@@ -20,6 +20,12 @@ declare const BasePage: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     /**
        * @type {string | null}
        */ favicon?: any;
+    /**
+       * @type {boolean}
+       */ showBGDetails?: boolean;
+    /**
+       * @type {string}
+       */ chainColor?: string;
 }, {
     default: {};
 }>, {

package/dist/Components/Button.svelte

@@ -2,10 +2,10 @@
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseText from '../Base/BaseText.svelte';
   import BaseIcon from '../Base/BaseIcon.svelte';
-    import { icons } from '../icons';
+  import { icons } from '../icons';
   
   /**
-   * @type {'full' | 'primary' | 'secondary'}
+   * @type {'full' | 'primary' | 'secondary' | 'special-filled' }
    */
   export let theme = 'full';
   
@@ -34,6 +34,11 @@
    */
   export let iconSize = '18px';
 
+  /**
+   * @type {boolean}
+   */
+  export let iconToned = true;
+
   /**
    * @type {string}
    */
@@ -66,7 +71,7 @@
       <div class="icon-text">        
         {#if icon}
           <div class="icon-wrapper" style="transform: rotate({iconRotation}deg)">
-            <BaseIcon variant="toned" svg={icon} size={iconSize} />
+            <BaseIcon variant={iconToned ? "toned" : "default"} svg={icon} size={iconSize} />
           </div>
         {/if}
         <BaseText variant="button">
@@ -88,6 +93,7 @@
     cursor: pointer;
     display: block;
     width: 100%;
+    user-select: none;
   }
 
   .button-content {
@@ -107,21 +113,39 @@
     transition: transform 0.2s ease;
   }
 
-  .button-wrapper :global(.glow-base-container) {
+  .button-wrapper > :global(.glow-base-container) {
     transition: all 0.2s ease;
   }
 
-  /* Hover state - same for all themes */
-  .button-wrapper:hover :global(.glow-base-container) {
+  /* Hover state - default for most themes */
+  .button-wrapper:hover > :global(.glow-base-container:not([data-theme='special-filled'])) {
     background: rgba(150, 132, 141, 0.37) !important;
     box-shadow: 
       0px 0px 13px 0px rgba(255, 255, 255, 0.07),
       inset 0px 0px 6px 4px rgba(150, 132, 141, 0.37) !important;
   }
 
-  /* Pressed/Active state - same for all themes */
-  .button-wrapper:active :global(.glow-base-container) {
+  /* Pressed/Active state - default for most themes */
+  .button-wrapper:active > :global(.glow-base-container:not([data-theme='special-filled'])) {
     background: rgba(150, 132, 140, 0.25) !important;
     box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 0.07) !important;
   }
+
+  /* Special-filled theme hover */
+  .button-wrapper:hover > :global(.glow-base-container[data-theme='special-filled']) {
+    background: linear-gradient(78deg, #4A3B55 0%, #4C385A 100%) !important;
+    box-shadow: 
+      0px 0px 16px 18px #A461CA15,
+      inset 0px 0px 12px 3px #AA91D860,
+      inset -2px -3px 12px 0px #BE81E240 !important;
+  }
+
+  /* Special-filled theme pressed */
+  .button-wrapper:active > :global(.glow-base-container[data-theme='special-filled']) {
+    background: linear-gradient(-78deg, #2E2438 0%, #301F3D 100%) !important;
+    box-shadow: 
+      0px 0px 13px 16px #A461CA05,
+      inset 0px 0px 6px 2px #AA91D830,
+      inset 2px 3px 6px 0px #BE81E215 !important;
+  }
 </style>

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

@@ -1,6 +1,6 @@
 export default Button;
 type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+    theme?: "full" | "primary" | "secondary" | "special-filled" | undefined;
     borderRadiusTopLeft?: string | undefined;
     borderRadiusTopRight?: string | undefined;
     borderRadiusBottomLeft?: string | undefined;
@@ -10,6 +10,7 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     iconRotation?: number | undefined;
     actionIconRotation?: number | undefined;
     iconSize?: string | undefined;
+    iconToned?: boolean | undefined;
     actionIconSize?: string | undefined;
 }, {
     default: {};
@@ -23,7 +24,7 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+    theme?: "full" | "primary" | "secondary" | "special-filled" | undefined;
     borderRadiusTopLeft?: string | undefined;
     borderRadiusTopRight?: string | undefined;
     borderRadiusBottomLeft?: string | undefined;
@@ -33,6 +34,7 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     iconRotation?: number | undefined;
     actionIconRotation?: number | undefined;
     iconSize?: string | undefined;
+    iconToned?: boolean | undefined;
     actionIconSize?: string | undefined;
 }, {
     default: {};

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/Separator.svelte

@@ -36,6 +36,8 @@
     display: flex;
     align-items: center;
     overflow: hidden;
+    pointer-events: none;
+    user-select: none !important;
   }
 
   .separator img {

package/dist/Components/Special/SpecialAction.svelte

@@ -0,0 +1,46 @@
+<script>
+    import Button from '../Button.svelte';
+    import Tooltip from '../Tooltip.svelte';
+    import { icons } from '../../icons.js';
+
+    /**
+     * @type {string}
+     */
+    export let label = '';
+
+    /**
+     * @type {string}
+     */
+    export let tooltipText = '';
+</script>
+
+<div class="special-action-wrapper">
+    <Button theme="special-filled" 
+        icon={icons.any_ai}
+        iconToned={false}
+        actionIcon={null}
+        on:click
+    >
+        {label}
+    </Button>
+    {#if tooltipText}
+        <div class="tooltip-container">
+            <Tooltip text={tooltipText} iconSize="14px" />
+        </div>
+    {/if}
+</div>
+
+<style>
+    .special-action-wrapper {
+        position: relative;
+        display: block;
+        width: 100%;
+    }
+
+    .tooltip-container {
+        position: absolute;
+        right: 1rem;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+</style>

package/dist/Components/Special/SpecialAction.svelte.d.ts

@@ -0,0 +1,32 @@
+export default SpecialAction;
+type SpecialAction = SvelteComponent<{
+    label?: string | undefined;
+    tooltipText?: string | undefined;
+}, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const SpecialAction: $$__sveltets_2_IsomorphicComponent<{
+    label?: string | undefined;
+    tooltipText?: 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;
+}