@coyalabs/bts-style 1.0.8 → 1.1.0

package/dist/{BasePage.svelte.d.ts → Components/Popup/Popup.svelte.d.ts}

@@ -1,16 +1,22 @@
-export default BasePage;
-type BasePage = SvelteComponent<any, {
-    [evt: string]: CustomEvent<any>;
+export default Popup;
+type Popup = SvelteComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}> & {
+    click: PointerEvent;
+    keydown: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
     $$bindings?: string | undefined;
 };
-declare const BasePage: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
+declare const Popup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
 }, {
-    default: {};
-}, {}, string>;
+    click: PointerEvent;
+    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;

package/dist/Components/Popup/PromptPopup.svelte

@@ -0,0 +1,61 @@
+<script>
+  import Button from '../Button.svelte';
+  import InputBox from '../InputBox.svelte';
+  import BaseText from '../../Base/BaseText.svelte';
+  import { icons } from '../../icons.js';
+  import { popupStore } from '../popupStore.js';
+
+  /** @type {(value: string) => void} */
+  export let onSubmit = () => {};
+  
+  /** @type {() => void} */
+  export let onCancel = () => {};
+
+  /** @type {string} */
+  export let placeholder = 'Enter value...';
+
+  /** @type {string} */
+  export let submitText = 'Submit';
+
+  /** @type {string} */
+  export let cancelText = 'Cancel';
+
+  /** @type {string} */
+  export let label = '';
+
+  let value = '';
+
+  function handleSubmit() {
+    onSubmit(value);
+    popupStore.close();
+  }
+
+  function handleCancel() {
+    onCancel();
+    popupStore.close();
+  }
+</script>
+
+<div class="prompt">
+  {#if label}
+    <BaseText variant="content">{label}</BaseText>
+  {/if}
+  <InputBox bind:value {placeholder} />
+  <div class="buttons">
+    <Button theme="primary" actionIcon={icons.check} on:click={handleSubmit}>{submitText}</Button>
+    <Button theme="secondary" actionIcon={icons.crossb} on:click={handleCancel}>{cancelText}</Button>
+  </div>
+</div>
+
+<style>
+  .prompt {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 1rem;
+  }
+</style>

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

@@ -0,0 +1,36 @@
+export default PromptPopup;
+type PromptPopup = SvelteComponent<{
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string | undefined;
+    onSubmit?: ((value: string) => void) | undefined;
+    submitText?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const PromptPopup: $$__sveltets_2_IsomorphicComponent<{
+    label?: string | undefined;
+    placeholder?: string | undefined;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string | undefined;
+    onSubmit?: ((value: string) => void) | undefined;
+    submitText?: 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/Separator.svelte

@@ -0,0 +1,63 @@
+<script>
+  const svgSide = '<svg width="51" height="14" viewBox="0 0 51 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.34766 0.0117188C1.73943 0.0206734 2.04817 0.156895 2.21484 0.246094C2.40301 0.347061 2.5769 0.471392 2.71875 0.585938C3.0026 0.815356 3.30516 1.12112 3.62109 1.46484C4.13857 2.02792 4.71503 2.52735 5.34375 2.96484C6.12646 3.50981 6.96366 4.39169 7.88672 5.49609H8.48438C9.19157 5.39437 9.93448 5.3599 10.7109 5.44922C11.5804 5.54939 12.4548 5.65477 13.3242 5.75391C13.9681 5.8268 14.6202 5.75253 15.293 5.53125C16.3428 5.18618 17.4137 5.05727 18.4922 5.14453C19.3709 5.21564 20.2502 5.28987 21.1289 5.37891C22.0304 5.47028 22.9352 5.59238 23.8359 5.74219C24.6263 5.87367 25.416 5.93785 26.2031 5.94141C27.0095 5.94481 27.8211 5.89987 28.6289 5.80078C29.5372 5.68937 30.4503 5.61804 31.3594 5.57812C32.2056 5.5409 33.0559 5.47755 33.9023 5.40234C34.8753 5.3162 35.8484 5.3421 36.8203 5.46094C37.5779 5.5537 38.3368 5.55236 39.0938 5.47266C39.9604 5.3814 40.8287 5.2886 41.6953 5.19141C42.7294 5.0756 43.7635 5.12971 44.7891 5.35547C45.5064 5.51388 46.2252 5.55602 46.9336 5.48438C47.9079 5.38622 49.2439 5.3997 50.8945 5.49609H51V8.49609H50.8008C49.152 8.3975 47.9732 8.39714 47.2266 8.47266C46.1967 8.57625 45.1655 8.51061 44.1445 8.28516C43.434 8.12869 42.7253 8.10097 42.0234 8.17969C41.1525 8.27735 40.2811 8.36922 39.4102 8.46094C38.4271 8.56446 37.4395 8.5578 36.457 8.4375C35.6916 8.34387 34.9244 8.32272 34.1602 8.39062C33.2694 8.46972 32.3792 8.53898 31.4883 8.57812C30.6576 8.6146 29.8236 8.67535 28.9922 8.77734C28.0603 8.89161 27.1247 8.94535 26.1914 8.94141C25.2411 8.93721 24.2908 8.86458 23.3438 8.70703C22.5052 8.56754 21.662 8.4521 20.8242 8.36719C19.9661 8.28025 19.1041 8.20224 18.2461 8.13281C17.5864 8.07996 16.9187 8.16426 16.2305 8.39062C15.1658 8.74063 14.078 8.8547 12.9844 8.73047C12.1141 8.63124 11.2413 8.52605 10.3711 8.42578C9.62969 8.34036 9.03581 8.37464 8.57812 8.48438C8.2446 8.56426 7.92758 8.63057 7.66406 8.66016C6.72608 9.63803 5.8882 10.4341 5.09766 10.9102C4.50693 11.2662 4.00397 11.7139 3.58594 12.2695C3.30392 12.6446 3.03046 12.976 2.77734 13.2305C2.65105 13.3571 2.49298 13.4978 2.32031 13.6172C2.17514 13.7176 1.86759 13.9106 1.45312 13.957L1.26562 13.9805L1.06641 13.9453L0.84375 13.9219L1.04297 12.5508L0.996094 12.5039L0 11.3789L0.0820312 11.3086L0.609375 10.8516L0.84375 10.875C0.934721 10.7665 1.0544 10.6367 1.18359 10.4648C1.83258 9.60176 2.62756 8.88803 3.55078 8.33203C3.95922 8.08554 4.48198 7.62172 5.16797 6.9375C4.51681 6.19986 4.0219 5.69702 3.63281 5.42578C2.82398 4.86296 2.08428 4.21715 1.41797 3.49219C1.26913 3.33024 1.13246 3.21476 1.03125 3.11719L0.667969 3.21094L0.0820312 2.69531L0 2.625L0.996094 1.5L1.03125 1.45312L0.714844 0.105469L0.960938 0.046875L1.14844 0L1.34766 0.0117188Z" fill="#1D191F"/></svg>';
+  const svgStretch = '<svg width="50" height="4" viewBox="0 0 50 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.793 0.271071C20.7035 0.362386 21.6137 0.484728 22.5234 0.634352C23.3258 0.766294 24.1266 0.830205 24.9258 0.833571C25.7413 0.836979 26.5581 0.791831 27.375 0.692946C28.2931 0.581596 29.2218 0.498462 30.1406 0.458571C30.9959 0.421352 31.8515 0.369633 32.707 0.294509C33.691 0.208078 34.6773 0.222428 35.6602 0.341384C36.429 0.434456 37.2006 0.44479 37.9688 0.364821C38.8437 0.273727 39.7188 0.180578 40.5938 0.0835715C41.6386 -0.0322773 42.6862 0.021345 43.7227 0.247634C44.4507 0.406319 45.1712 0.448468 45.8906 0.37654C46.8918 0.276437 48.2776 0.286775 49.9922 0.388259H50.0039V3.38826H49.8164C48.1444 3.28929 46.9425 3.28894 46.1836 3.36482C45.1458 3.46797 44.1073 3.40201 43.0781 3.17732C42.3554 3.01977 41.6363 2.98092 40.9219 3.06013C40.0396 3.15795 39.1557 3.26125 38.2734 3.3531C37.2824 3.45608 36.2873 3.43784 35.2969 3.31794C34.5228 3.22447 33.7496 3.21526 32.9766 3.28279C32.0761 3.36188 31.1702 3.4194 30.2695 3.45857C29.4284 3.49508 28.5802 3.5674 27.7383 3.66951C26.7976 3.78349 25.8561 3.83749 24.9141 3.83357C23.9535 3.82955 22.9886 3.74493 22.0312 3.58747C21.1841 3.44827 20.3346 3.34416 19.4883 3.25935C18.6188 3.17223 17.7444 3.09453 16.875 3.02497C16.2036 2.97193 15.5232 3.044 14.8242 3.27107C13.7509 3.62006 12.656 3.74633 11.5547 3.62263C10.6741 3.52337 9.7868 3.41824 8.9062 3.31794C8.17514 3.23508 7.43857 3.26613 6.70312 3.39997C5.77106 3.56937 4.83678 3.67782 3.90234 3.73982C2.94429 3.80324 2.00452 3.78762 1.08984 3.69294C0.66932 3.6493 0.31018 3.61128 0.04688 3.56404L0 0.388259H3.86719L3.46875 0.763259C3.54583 0.759357 3.62544 0.756682 3.70312 0.75154C4.52477 0.697065 5.35175 0.596824 6.17578 0.446852C7.1966 0.261429 8.22096 0.22495 9.2461 0.341384C10.1237 0.441342 11.0053 0.535427 11.8828 0.634352C12.5405 0.708486 13.2127 0.646387 13.8984 0.423415C14.9568 0.0795105 16.0351 -0.0619009 17.1211 0.0249777C18.0107 0.0961552 18.9034 0.181928 19.793 0.271071Z" fill="#1D191F"/></svg>';
+
+  // Convert SVG to data URL
+  const sideDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgSide);
+  const stretchDataUrl = 'data:image/svg+xml,' + encodeURIComponent(svgStretch);
+
+  /**
+   * @type {string}
+   */
+  export let height = '12px';
+
+  /**
+   * @type {string}
+   */
+  export let width = '100%';
+
+  /**
+   * @type {string}
+   */
+  export let margin = '2rem 0';
+</script>
+
+<div class="separator" style="--height: {height}; --width: {width}; --margin: {margin};">
+  <img src={sideDataUrl} alt="" class="side left" />
+  <div class="middle" style="background-image: url('{stretchDataUrl}');"></div>
+  <img src={sideDataUrl} alt="" class="side right" />
+</div>
+
+<style>
+  .separator {
+    width: var(--width);
+    height: var(--height);
+    margin: var(--margin);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    pointer-events: none;
+    user-select: none !important;
+  }
+
+  .separator img {
+    height: 100%;
+    display: block;
+  }
+
+  .side {
+    flex-shrink: 0;
+  }
+
+  .side.right {
+    transform: scaleX(-1);
+  }
+
+  .middle {
+    flex: 1;
+    height: 100%;
+    background-repeat: repeat-x;
+    background-size: auto 30%;
+    background-position: left center;
+  }
+</style>

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

@@ -0,0 +1,30 @@
+export default Separator;
+type Separator = SvelteComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+    margin?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Separator: $$__sveltets_2_IsomorphicComponent<{
+    height?: string | undefined;
+    width?: string | undefined;
+    margin?: 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/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;
+}

package/dist/Components/Special/SpecialParagraph.svelte

@@ -0,0 +1,159 @@
+<script>
+  import { onMount } from 'svelte';
+
+  /**
+   * The text content to animate
+   * @type {string}
+   */
+  export let text = '';
+
+  /**
+   * Delay between each word appearing (ms)
+   * @type {number}
+   */
+  export let wordDelay = 50;
+
+  /**
+   * Initial delay before animation starts (ms)
+   * @type {number}
+   */
+  export let startDelay = 0;
+
+  /**
+   * Animation duration for each word (ms)
+   * @type {number}
+   */
+  export let animationDuration = 300;
+
+  /**
+   * Text variant styling
+   * @type {'title' | 'content' | 'button'}
+   */
+  export let variant = 'content';
+
+  /**
+   * Font size modifier
+   * @type {string}
+   */
+  export let textModifier = '0px';
+
+  /**
+   * Whether to start animation automatically on mount
+   * @type {boolean}
+   */
+  export let autoPlay = true;
+
+  /**
+   * @type {string[]}
+   */
+  let words = [];
+
+  /**
+   * @type {number}
+   */
+  let visibleCount = 0;
+
+  /**
+   * @type {boolean}
+   */
+  let animationComplete = false;
+
+  $: words = text.split(/(\s+)/).filter(w => w.length > 0);
+
+  /**
+   * Start the word-by-word animation
+   */
+  export function play() {
+    visibleCount = 0;
+    animationComplete = false;
+    animateWords();
+  }
+
+  /**
+   * Reset animation to beginning
+   */
+  export function reset() {
+    visibleCount = 0;
+    animationComplete = false;
+  }
+
+  /**
+   * Show all words immediately
+   */
+  export function showAll() {
+    visibleCount = words.length;
+    animationComplete = true;
+  }
+
+  function animateWords() {
+    if (visibleCount < words.length) {
+      visibleCount++;
+      setTimeout(animateWords, wordDelay);
+    } else {
+      animationComplete = true;
+    }
+  }
+
+  onMount(() => {
+    if (autoPlay) {
+      setTimeout(play, startDelay);
+    }
+  });
+</script>
+
+<span class="special-paragraph" data-variant={variant} style="--text-modifier: {textModifier}; --animation-duration: {animationDuration}ms;">
+  {#each words as word, i}
+    <span 
+      class="word" 
+      class:visible={i < visibleCount}
+      class:space={/^\s+$/.test(word)}
+    >{word}</span>
+  {/each}
+</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');
+  .special-paragraph {
+    display: inline;
+  }
+  .word {
+    display: inline-block;
+    opacity: 0;
+    transform: translateY(8px);
+    filter: blur(4px);
+    transition: 
+      opacity var(--animation-duration) ease,
+      transform var(--animation-duration) ease,
+      filter var(--animation-duration) ease;
+  }
+  .word.visible {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+  .word.space {
+    white-space: pre;
+  }
+  /* Title variant */
+  .special-paragraph[data-variant='title'] {
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: calc(30px + var(--text-modifier));
+    color: #E3D8D8;
+  }
+  /* Content variant */
+  .special-paragraph[data-variant='content'] {
+    font-family: 'Satoshi', sans-serif;
+    font-weight: 700;
+    font-size: calc(18px + var(--text-modifier));
+    color: #777073;
+  }
+  /* Button variant */
+  .special-paragraph[data-variant='button'] {
+    font-family: 'Noto Serif KR', serif;
+    font-weight: 900;
+    font-size: calc(17px + var(--text-modifier));
+    color: #E3D8D8;
+  }
+</style>

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

@@ -0,0 +1,52 @@
+export default SpecialParagraph;
+type SpecialParagraph = SvelteComponent<{
+    text?: string | undefined;
+    variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
+    play?: (() => void) | undefined;
+    reset?: (() => void) | undefined;
+    wordDelay?: number | undefined;
+    startDelay?: number | undefined;
+    animationDuration?: number | undefined;
+    autoPlay?: boolean | undefined;
+    showAll?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+} & {
+    play: () => void;
+    reset: () => void;
+    showAll: () => void;
+};
+declare const SpecialParagraph: $$__sveltets_2_IsomorphicComponent<{
+    text?: string | undefined;
+    variant?: "button" | "title" | "content" | undefined;
+    textModifier?: string | undefined;
+    play?: (() => void) | undefined;
+    reset?: (() => void) | undefined;
+    wordDelay?: number | undefined;
+    startDelay?: number | undefined;
+    animationDuration?: number | undefined;
+    autoPlay?: boolean | undefined;
+    showAll?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    play: () => void;
+    reset: () => void;
+    showAll: () => void;
+}, 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/TabBar.svelte

@@ -0,0 +1,128 @@
+<script>
+  import Button from './Button.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+
+  /**
+   * @type {Array<{id?: string, label: string, icon?: string, type?: 'tab' | 'separator'}>}
+   */
+  export let tabs = [];
+
+  /**
+   * @type {string}
+   */
+  export let activeTab = '';
+
+  /**
+   * @type {(tabId: string) => void}
+   */
+  export let onTabChange = () => {};
+
+  /**
+     * @param {string} tabId
+     */
+  function selectTab(tabId) {
+    activeTab = tabId;
+    onTabChange(tabId);
+  }
+
+  /**
+   * @param {number} index - The index in the full tabs array
+   */
+  function getCornerRadius(index) {
+    // Check if previous item is a separator or start of array
+    const prevItem = tabs[index - 1];
+    const isFirstInGroup = index === 0 || prevItem?.type === 'separator';
+
+    // Check if next item is a separator or end of array
+    const nextItem = tabs[index + 1];
+    const isLastInGroup = index === tabs.length - 1 || nextItem?.type === 'separator';
+
+    return {
+      topLeft: isFirstInGroup ? '25px' : '18px',
+      topRight: isFirstInGroup ? '25px' : '18px',
+      bottomLeft: isLastInGroup ? '25px' : '18px',
+      bottomRight: isLastInGroup ? '25px' : '18px'
+    };
+  }
+
+  /**
+   * Group tabs into categories based on separators
+   * @typedef {{label: string | null, tabs: Array<{tab: {id?: string, label: string, icon?: string, type?: 'tab' | 'separator'}, originalIndex: number}>}} Category
+   * @type {Category[]}
+   */
+  $: categories = tabs.reduce((/** @type {Category[]} */ acc, tab, index) => {
+    if (tab.type === 'separator') {
+      acc.push({ label: tab.label, tabs: [] });
+    } else {
+      if (acc.length === 0) {
+        acc.push({ label: null, tabs: [] });
+      }
+      acc[acc.length - 1].tabs.push({ tab, originalIndex: index });
+    }
+    return acc;
+  }, /** @type {Category[]} */ ([]));
+</script>
+
+<div class="tab-bar">
+  {#each categories as category}
+    <div class="category">
+      {#if category.label}
+        <div class="separator">
+          <BaseText variant="content">{category.label}</BaseText>
+        </div>
+      {/if}
+      <div class="category-buttons">
+        {#each category.tabs as {tab, originalIndex}}
+          {@const corners = getCornerRadius(originalIndex)}
+          <div class="tab-button">
+            <Button
+              theme={activeTab === tab.id ? 'primary' : 'secondary'}
+              icon={tab.icon}
+              actionIcon={null}
+              borderRadiusTopLeft={corners.topLeft}
+              borderRadiusTopRight={corners.topRight}
+              borderRadiusBottomLeft={corners.bottomLeft}
+              borderRadiusBottomRight={corners.bottomRight}
+              on:click={() => tab.id && selectTab(tab.id)}
+            >
+              {tab.label}
+            </Button>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .tab-bar {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 250px;
+  }
+
+  .category {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .category-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .tab-button {
+    width: 100%;
+  }
+
+  .separator {
+    opacity: 0.6;
+    padding-bottom: 1rem;
+  }
+
+  .tab-button :global(button) {
+    width: 100%;
+  }
+</style>

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

@@ -0,0 +1,40 @@
+export default TabBar;
+type TabBar = SvelteComponent<{
+    tabs?: {
+        id?: string | undefined;
+        label: string;
+        icon?: string | undefined;
+        type?: "separator" | "tab" | undefined;
+    }[] | undefined;
+    activeTab?: string | undefined;
+    onTabChange?: ((tabId: string) => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TabBar: $$__sveltets_2_IsomorphicComponent<{
+    tabs?: {
+        id?: string;
+        label: string;
+        icon?: string;
+        type?: "tab" | "separator";
+    }[] | undefined;
+    activeTab?: string | undefined;
+    onTabChange?: ((tabId: string) => 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;
+}