@coyalabs/bts-style 1.0.7 → 1.0.9

package/dist/Base/BaseContainer.svelte

@@ -0,0 +1,76 @@
+<script>
+  /**
+   * @type {'full' | 'primary' | 'secondary' | 'filled'}
+   */
+  export let theme = 'full';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusTopRight = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomLeft = '25px';
+
+  /**
+   * @type {string}
+   */
+  export let borderRadiusBottomRight = '25px';
+
+    /**
+   * @type {string}
+   */
+  export let padding = '1rem';
+</script>
+
+<div class="glow-base-container" data-theme={theme} style="border-radius: {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomRight} {borderRadiusBottomLeft}; --padding: {padding};">
+  <slot />
+</div>
+
+<style>
+  .glow-base-container {
+    width: 100%;
+    border: 2px solid rgba(255, 255, 255, 0.13);
+    padding: var(--padding);
+    box-sizing: border-box;
+  }
+
+  /* Theme A - Full */
+  .glow-base-container[data-theme='full'] {
+    background: rgba(150, 132, 140, 0.25);
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(193, 182, 212, 0.5);
+  }
+
+  /* Theme B - Primary */
+  .glow-base-container[data-theme='primary'] {
+    background: rgba(180, 158, 168, 0.25);
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(117, 102, 143, 0.56);
+  }
+
+  /* Theme C - Secondary */
+  .glow-base-container[data-theme='secondary'] {
+    background: #74636a40;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(102, 88, 128, 0.5);
+  }
+
+  /* Theme D - Filled */
+  .glow-base-container[data-theme='filled'] {
+    background: #161319;
+    box-shadow: 
+      0px 0px 13px 0px #ffffff1a,
+      inset 0px 0px 9px 2px #ffffff0a;
+  }
+</style>

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

@@ -0,0 +1,49 @@
+export default BaseContainer;
+type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | "filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    padding?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const BaseContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | "filled" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    padding?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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/Base/BaseIcon.svelte

@@ -0,0 +1,42 @@
+<script>
+  /**
+   * @type {string}
+   */
+  export let svg;
+  
+  /**
+   * @type {'default' | 'toned'}
+   */
+  export let variant = 'toned';
+  
+  /**
+   * @type {string}
+   */
+  export let size = '18px';
+  
+  const colors = {
+    default: '#E3D8D8',
+    toned: '#A18F8F'
+  };
+</script>
+
+<span class="base-icon" style="--icon-color: {colors[variant]}; --icon-size: {size};">
+  {@html svg}
+</span>
+
+<style>
+  .base-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color);
+  }
+
+  .base-icon :global(svg) {
+    width: var(--icon-size);
+    height: var(--icon-size);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+export default BaseIcon;
+type BaseIcon = SvelteComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BaseIcon: $$__sveltets_2_IsomorphicComponent<{
+    svg: string;
+    variant?: "default" | "toned" | undefined;
+    size?: 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/Base/BasePage.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  /**
+   * @type {string | null}
+   */
+  export let favicon = null;
+
+  onMount(() => {
+    // Set favicon if not already set
+    let link = document.querySelector("link[rel*='icon']") as HTMLLinkElement | null;
+    
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'icon';
+      document.head.appendChild(link);
+    }
+    
+    // Use custom favicon if provided, otherwise use default BTS theme favicon
+    const faviconUrl = favicon || 'data:image/svg+xml,%3Csvg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="32" height="32" rx="6" fill="%230B070D"/%3E%3Cpath d="M16 8C11.5817 8 8 11.5817 8 16C8 20.4183 11.5817 24 16 24C20.4183 24 24 20.4183 24 16C24 11.5817 20.4183 8 16 8Z" fill="%23E3D8D8"/%3E%3Ccircle cx="16" cy="16" r="4" fill="%23A18F8F"/%3E%3Crect x="14" y="10" width="4" height="2" rx="1" fill="%230B070D"/%3E%3Crect x="14" y="20" width="4" height="2" rx="1" fill="%230B070D"/%3E%3C/svg%3E';
+    
+    link.href = faviconUrl;
+  });
+</script>
+
+<div class="base-page">
+  <slot />
+</div>
+
+<style>
+  .base-page {
+    min-height: 100vh;
+    background-color: #0B070D;
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(body) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :global(html) {
+    margin: 0;
+    padding: 0;
+  }
+
+  .base-page > :global(*) {
+    margin-top: 0;
+  }
+</style>

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

@@ -0,0 +1,31 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const BasePage: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    /**
+       * @type {string | null}
+       */ favicon?: any;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type BasePage = InstanceType<typeof BasePage>;
+export default BasePage;

package/dist/Base/BaseText.svelte

@@ -0,0 +1,44 @@
+<script>
+  /**
+   * @type {'title' | 'content' | 'button'}
+   */
+  export let variant = 'content';
+    /**
+   * @type {string}
+   */
+  export let textModifier = '0px';
+</script>
+
+<span class="text" data-variant={variant} style="--text-modifier: {textModifier};">
+  <slot />
+</span>
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
+  @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
+  .text {
+    display: inline-block;
+    font-family: 'Satoshi', sans-serif;
+  }
+  /* Title variant */
+  .text[data-variant='title'] {
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: calc(30px + var(--text-modifier));
+    color: #E3D8D8;
+  }
+  /* Content variant */
+  .text[data-variant='content'] {
+    font-family: 'Satoshi', sans-serif;
+    font-weight: 700;
+    font-size: calc(18px + var(--text-modifier));
+    color: #777073;
+  }
+  /* Button variant */
+  .text[data-variant='button'] {
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: calc(17px + var(--text-modifier));
+    color: #E3D8D8;
+  }
+</style>

package/dist/{BaseContainer.svelte.d.ts → Base/BaseText.svelte.d.ts}

@@ -1,6 +1,7 @@
-export default BaseContainer;
-type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+export default BaseText;
+type BaseText = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -10,8 +11,9 @@ type BaseContainer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
 }> & {
     $$bindings?: string | undefined;
 };
-declare const BaseContainer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    theme?: "full" | "primary" | "secondary" | undefined;
+declare const BaseText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/Components/Button.svelte

@@ -0,0 +1,127 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+    import { icons } from '../icons';
+  
+  /**
+   * @type {'full' | 'primary' | 'secondary'}
+   */
+  export let theme = 'full';
+  
+  /**
+   * @type {string | null}
+   */
+  export let icon = null;
+
+  /**
+   * @type {string | null}
+   */
+  export let actionIcon = icons.arrow;
+
+  /**
+   * @type {number}
+   */
+  export let iconRotation = 0;
+
+  /**
+   * @type {number}
+   */
+  export let actionIconRotation = 0;
+
+  /**
+   * @type {string}
+   */
+  export let iconSize = '18px';
+
+  /**
+   * @type {string}
+   */
+  export let actionIconSize = '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>
+
+<button class="button-wrapper" on:click>
+  <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
+    <div class="button-content">
+      <div class="icon-text">        
+        {#if icon}
+          <div class="icon-wrapper" style="transform: rotate({iconRotation}deg)">
+            <BaseIcon variant="toned" svg={icon} size={iconSize} />
+          </div>
+        {/if}
+        <BaseText variant="button">
+          <slot />
+        </BaseText>
+      </div>
+      {#if actionIcon}
+        <div class="icon-wrapper" style="transform: rotate({actionIconRotation}deg)">
+          <BaseIcon svg={actionIcon} size={actionIconSize} />
+        </div>
+      {/if}
+    </div>
+  </BaseContainer>
+</button>
+
+<style>
+  .button-wrapper {
+    all: unset;
+    cursor: pointer;
+    display: block;
+    width: 100%;
+  }
+
+  .button-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .icon-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .icon-wrapper {
+    transition: transform 0.2s ease;
+  }
+
+  .button-wrapper :global(.glow-base-container) {
+    transition: all 0.2s ease;
+  }
+
+  /* Hover state - same for all themes */
+  .button-wrapper:hover :global(.glow-base-container) {
+    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) {
+    background: rgba(150, 132, 140, 0.25) !important;
+    box-shadow: 0px 0px 13px 0px rgba(255, 255, 255, 0.07) !important;
+  }
+</style>

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

@@ -0,0 +1,63 @@
+export default Button;
+type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    actionIcon?: string | null | undefined;
+    iconRotation?: number | undefined;
+    actionIconRotation?: number | undefined;
+    iconSize?: string | undefined;
+    actionIconSize?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    theme?: "full" | "primary" | "secondary" | undefined;
+    borderRadiusTopLeft?: string | undefined;
+    borderRadiusTopRight?: string | undefined;
+    borderRadiusBottomLeft?: string | undefined;
+    borderRadiusBottomRight?: string | undefined;
+    icon?: string | null | undefined;
+    actionIcon?: string | null | undefined;
+    iconRotation?: number | undefined;
+    actionIconRotation?: number | undefined;
+    iconSize?: string | undefined;
+    actionIconSize?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+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;
+}