@coyalabs/bts-style 1.0.8 → 1.0.9

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;
+}

package/dist/Components/Toggle.svelte

@@ -0,0 +1,59 @@
+<script>
+  /**
+   * @type {boolean}
+   */
+  export let checked = false;
+
+  function toggle() {
+    checked = !checked;
+  }
+</script>
+
+<button class="toggle" class:checked on:click={toggle} aria-label="Toggle switch">
+  <div class="pill"></div>
+</button>
+
+<style>
+  .toggle {
+    all: unset;
+    cursor: pointer;
+    position: relative;
+    width: 50px;
+    height: 25px;
+    border-radius: 25px;
+    border: 2px solid rgba(255, 255, 255, 0.13);
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Off state */
+  .toggle {
+    background: rgba(121, 92, 105, 0.25);
+    box-shadow: inset 0px 0px 9px 2px rgba(102, 88, 128, 0.48);
+  }
+
+  /* On state */
+  .toggle.checked {
+    background: #ffa1cb6c;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px rgba(193, 182, 212, 0.5);
+  }
+
+  .pill {
+    position: absolute;
+    width: calc(50% - 4px);
+    height: calc(100% - 4px);
+    background: #FFEFF6;
+    border-radius: 25px;
+    top: 2px;
+    left: 2px;
+    transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
+  }
+
+  .toggle.checked .pill {
+    transform: translateX(calc(100% + 4px));
+  }
+</style>

package/dist/{Testing.svelte.d.ts → Components/Toggle.svelte.d.ts}

@@ -1,18 +1,14 @@
-export default Testing;
-type Testing = SvelteComponent<{
-    name?: string | undefined;
+export default Toggle;
+type Toggle = SvelteComponent<{
+    checked?: boolean | undefined;
 }, {
-    ping: CustomEvent<any>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {}> & {
     $$bindings?: string | undefined;
 };
-declare const Testing: $$__sveltets_2_IsomorphicComponent<{
-    name?: string | undefined;
+declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
+    checked?: boolean | undefined;
 }, {
-    ping: CustomEvent<any>;
-} & {
     [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> {

package/dist/Components/Tooltip.svelte

@@ -0,0 +1,132 @@
+<script>
+  import BaseContainer from '../Base/BaseContainer.svelte';
+  import BaseIcon from '../Base/BaseIcon.svelte';
+  import BaseText from '../Base/BaseText.svelte';
+  import { icons } from '../icons.js';
+  /**
+   * @type {string}
+   */
+  export let text;
+
+  /**
+   * @type {string}
+   */
+  export let iconSize = '12px';
+
+  let showTooltip = false;
+  /**
+     * @type {HTMLDivElement}
+     */
+  let tooltipElement;
+  /**
+     * @type {HTMLDivElement}
+     */
+  let iconElement;
+  let positionBelow = false;
+
+  function handleMouseEnter() {
+    showTooltip = true;
+    
+    // Check position after tooltip is rendered
+    setTimeout(() => {
+      if (tooltipElement && iconElement) {
+        const iconRect = iconElement.getBoundingClientRect();
+        const tooltipRect = tooltipElement.getBoundingClientRect();
+        
+        // Check if there's enough space above
+        const spaceAbove = iconRect.top;
+        const spaceBelow = window.innerHeight - iconRect.bottom;
+        
+        positionBelow = spaceAbove < tooltipRect.height + 10;
+      }
+    }, 0);
+  }
+
+  function handleMouseLeave() {
+    showTooltip = false;
+  }
+</script>
+
+<div class="tooltip-wrapper">
+  <div 
+    class="icon-trigger" 
+    bind:this={iconElement}
+    on:mouseenter={handleMouseEnter}
+    on:mouseleave={handleMouseLeave}
+    role="tooltip"
+  >
+    <BaseIcon variant="toned" svg={icons.help} size={iconSize} />
+  </div>
+  
+  {#if showTooltip}
+    <div 
+      class="tooltip" 
+      class:below={positionBelow}
+      bind:this={tooltipElement}
+    >
+      <BaseContainer theme="filled" padding="0.75rem" borderRadiusTopLeft="15px" borderRadiusTopRight="15px" borderRadiusBottomLeft="15px" borderRadiusBottomRight="15px">
+        <BaseText textModifier="-5px">{text}</BaseText>
+      </BaseContainer>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .icon-trigger {
+    cursor: help;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+    margin: -8px;
+  }
+
+  .tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 150px;
+    max-width: 500px;
+    white-space: normal;
+    z-index: 1000;
+    pointer-events: none;
+    animation: fadeIn 0.2s ease;
+  }
+
+  .tooltip.below {
+    bottom: auto;
+    top: calc(100% + 8px);
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(-5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  .tooltip.below {
+    animation: fadeInBelow 0.2s ease;
+  }
+
+  @keyframes fadeInBelow {
+    from {
+      opacity: 0;
+      transform: translateX(-50%) translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+</style>

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

@@ -0,0 +1,28 @@
+export default Tooltip;
+type Tooltip = SvelteComponent<{
+    text: string;
+    iconSize?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Tooltip: $$__sveltets_2_IsomorphicComponent<{
+    text: string;
+    iconSize?: 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/TreeDirectory.svelte

@@ -0,0 +1,148 @@
+<script>
+  import { slide } from 'svelte/transition';
+  import Button from './Button.svelte';
+  import { icons } from '../icons.js';
+  
+  /** @type {{ name: string, type: 'file' | 'folder', children?: any[] }[]} */
+  export let items = [];
+  
+  /** @type {boolean} */
+  export let showCount = true;
+  
+  /** @type {string | null} */
+  export let itemIcon = null;
+
+  /** @type {number} */
+  export let level = 0;
+  
+  let expanded = new Set();
+  
+  /**
+     * @param {string} id
+  */
+  function toggle(id) {
+    if (expanded.has(id)) expanded.delete(id);
+    else expanded.add(id);
+    expanded = expanded;
+  }
+
+  /**
+   * Get the current expanded state
+   * @returns {string[]}
+   */
+  export function getState() {
+    return Array.from(expanded);
+  }
+
+  /**
+   * Set the expanded state
+   * @param {string[]} state
+   */
+  export function setState(state) {
+    expanded = new Set(state);
+  }
+
+  /**
+   * Expand all folders
+   */
+  export function expandAll() {
+    /** @type {string[]} */
+    const allIds = [];
+    /**
+     * @param {any[]} items
+     * @param {number} lvl
+     */
+    function collectIds(items, lvl) {
+      items.forEach((/** @type {any} */ item, /** @type {number} */ i) => {
+        if (item.type === 'folder') {
+          const id = `${lvl}-${i}`;
+          allIds.push(id);
+          if (item.children) collectIds(item.children, lvl + 1);
+        }
+      });
+    }
+    collectIds(items, level);
+    expanded = new Set(allIds);
+  }
+
+  /**
+   * Collapse all folders
+   */
+  export function collapseAll() {
+    expanded = new Set();
+  }
+
+  /**
+   * Count total items recursively in a folder
+   * @param {any[]} children
+   * @returns {number}
+   */
+  function countItems(children) {
+    if (!children) return 0;
+    let count = 0;
+    children.forEach((/** @type {any} */ child) => {
+      count++;
+      if (child.type === 'folder' && child.children) {
+        count += countItems(child.children);
+      }
+    });
+    return count;
+  }
+</script>
+
+<div class="tree" style="padding-left: {level === 0 ? level * 30 : level * 20}px;">
+  {#each items as item, i}
+    {@const id = `${level}-${i}`}
+    {@const open = expanded.has(id)}
+    {@const isLast = i === items.length - 1}
+    {@const isNested = level > 0}
+    
+    {#if item.type === 'folder'}
+      <div class="folder" on:click={() => toggle(id)} on:keydown={() => {}} role="button" tabindex="0">
+        <Button 
+          theme="primary" 
+          icon={icons.folder} 
+          actionIcon={icons.icon_expand} 
+          actionIconSize="15px" 
+          actionIconRotation={open ? 0 : -90}
+          borderRadiusTopLeft={isNested ? '15px' : '25px'}
+          borderRadiusTopRight={isNested ? '15px' : '25px'}
+          borderRadiusBottomRight="15px"
+        >
+          {item.name}{#if showCount && item.children} <span class="count">({countItems(item.children)})</span>{/if}
+        </Button>
+      </div>
+      {#if open && item.children}
+        <div transition:slide={{ duration: 150 }}>
+          <svelte:self items={item.children} {showCount} {itemIcon} level={level + 1} />
+        </div>
+      {/if}
+    {:else}
+      <Button 
+        theme="secondary" 
+        icon={itemIcon}
+        borderRadiusTopLeft={isNested ? '15px' : '25px'}
+        borderRadiusTopRight={isNested ? '15px' : '25px'}
+        borderRadiusBottomLeft={isNested && !isLast ? '15px' : '25px'}
+        borderRadiusBottomRight={isNested && !isLast ? '15px' : '25px'}
+      >
+        {item.name}
+      </Button>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .tree {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .folder {
+    cursor: pointer;
+  }
+  .folder :global(.count) {
+    margin-left: 5px;
+    opacity: 0.5;
+  }
+</style>

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

@@ -0,0 +1,58 @@
+export default TreeDirectory;
+type TreeDirectory = SvelteComponent<{
+    items?: {
+        name: string;
+        type: "file" | "folder";
+        children?: any[] | undefined;
+    }[] | undefined;
+    showCount?: boolean | undefined;
+    itemIcon?: string | null | undefined;
+    level?: number | undefined;
+    getState?: (() => string[]) | undefined;
+    setState?: ((state: string[]) => void) | undefined;
+    expandAll?: (() => void) | undefined;
+    collapseAll?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+} & {
+    getState: () => string[];
+    setState: (state: string[]) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+};
+declare const TreeDirectory: $$__sveltets_2_IsomorphicComponent<{
+    items?: {
+        name: string;
+        type: "file" | "folder";
+        children?: any[];
+    }[] | undefined;
+    showCount?: boolean | undefined;
+    itemIcon?: string | null | undefined;
+    level?: number | undefined;
+    getState?: (() => string[]) | undefined;
+    setState?: ((state: string[]) => void) | undefined;
+    expandAll?: (() => void) | undefined;
+    collapseAll?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    getState: () => string[];
+    setState: (state: string[]) => void;
+    expandAll: () => void;
+    collapseAll: () => 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/popupStore.d.ts

@@ -0,0 +1,31 @@
+export namespace popupStore {
+    export { subscribe };
+    export function open(title: any, component: any, props?: {}, subtitle?: string): void;
+    export function close(): void;
+    export function confirm(title: string, message: string, options?: {
+        onConfirm?: (() => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        confirmText?: string | undefined;
+        cancelText?: string | undefined;
+    }): void;
+    export function alert(title: string, message: string, options?: {
+        onOk?: (() => void) | undefined;
+        okText?: string | undefined;
+    }): void;
+    export function prompt(title: string, message: string, options?: {
+        onSubmit?: ((value: string) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        placeholder?: string | undefined;
+        submitText?: string | undefined;
+        cancelText?: string | undefined;
+        label?: string | undefined;
+    }): void;
+}
+declare const subscribe: (this: void, run: import("svelte/store").Subscriber<{
+    isOpen: boolean;
+    title: string;
+    subtitle?: string;
+    component: any;
+    props: any;
+}>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+export {};