@coyalabs/bts-style 1.3.10 → 1.3.12

package/README.md

@@ -192,6 +192,9 @@ Clickable button extending BaseContainer with icon support.
 - `actionIconRotation?: number` - Right icon rotation in degrees
 - `iconSize?: string` - Left icon size (default: `'18px'`)
 - `actionIconSize?: string` - Right icon size (default: `'18px'`)
+- `disabled?: boolean` - Disable interaction (default: `false`)
+- `loading?: boolean` - Show loading spinner, hide content, and disable button (default: `false`)
+- `loadingSize?: string` - Spinner size when loading (default: `'18px'`)
 - All BaseContainer corner radius props
 
 **Events:**
@@ -201,6 +204,13 @@ Clickable button extending BaseContainer with icon support.
 ```svelte
 <script>
   import { Button, icons } from '@coyalabs/bts-style';
+  let isLoading = false;
+  
+  async function handleClick() {
+    isLoading = true;
+    await someAsyncOperation();
+    isLoading = false;
+  }
 </script>
 
 <Button 
@@ -216,11 +226,23 @@ Clickable button extending BaseContainer with icon support.
 <Button actionIcon={null} theme="secondary">
   Simple Button
 </Button>
+
+<!-- Loading state -->
+<Button loading={isLoading} on:click={handleClick}>
+  Submit Form
+</Button>
+
+<!-- Disabled state -->
+<Button disabled theme="secondary">
+  Disabled Button
+</Button>
 ```
 
 **States:**
 - Hover: Subtle background lightening
 - Active/Pressed: Visual feedback
+- Disabled: Non-interactive, reduced opacity, `not-allowed` cursor
+- Loading: Shows spinner, disables interaction (opacity 0.7)
 
 ---
 
@@ -255,6 +277,45 @@ Circular icon-only button with hover effects.
 
 ---
 
+#### LoadingSpinner
+
+Animated loading spinner using the light gear from the BTS theme assets. Insertable into any component (buttons, containers, inline text, etc.).
+
+**Props:**
+- `size?: string` - Spinner size (default: `'20px'`)
+- `speed?: number` - Rotation speed in seconds (default: `2`)
+- `color?: string | null` - Custom color (default: `'white'`)
+
+**Example:**
+```svelte
+<script>
+  import { LoadingSpinner } from '@coyalabs/bts-style';
+</script>
+
+<!-- Basic usage -->
+<LoadingSpinner />
+
+<!-- Custom size and speed -->
+<LoadingSpinner size="40px" speed={1.5} />
+
+<!-- Inside a button -->
+<Button theme="primary">
+  Loading <LoadingSpinner size="16px" />
+</Button>
+
+<!-- Custom color -->
+<LoadingSpinner size="2rem" color="#FFEFF6" />
+```
+
+**Features:**
+- Smooth infinite rotation animation
+- Uses `inline-flex` display for easy insertion anywhere
+- Defaults to `currentColor` to inherit parent text color
+- Configurable rotation speed
+- Based on the light gear asset from assetGear.js
+
+---
+
 #### InputBox
 
 Text input field with icon support and theme matching.
@@ -282,6 +343,96 @@ Text input field with icon support and theme matching.
 />
 ```
 
+---
+
+#### CodeBlock
+
+Code display component with syntax highlighting-ready styling and copy-to-clipboard functionality.
+
+**Props:**
+- `code: string` - Code content to display
+- `language?: string` - Optional language label (e.g., `'javascript'`, `'python'`)
+- `theme?: 'full' | 'primary' | 'secondary' | 'filled'` - Visual theme (default: `'secondary'`)
+- `showCopy?: boolean` - Show copy button (default: `true`)
+- All BaseContainer corner radius props
+
+**Example:**
+```svelte
+<script>
+  import { CodeBlock } from '@coyalabs/bts-style';
+  
+  const myCode = `function hello() {
+  console.log('Hello, world!');
+}`;
+</script>
+
+<CodeBlock 
+  code={myCode}
+  language="javascript"
+  theme="secondary"
+/>
+
+<!-- Without language label -->
+<CodeBlock 
+  code="npm install @coyalabs/bts-style"
+  showCopy={true}
+/>
+```
+
+**Features:**
+- Monospace font display (`Courier New`)
+- Horizontal scrolling for long lines
+- Copy button with visual feedback (check icon for 2 seconds)
+- Optional language label in header
+- Styled scrollbar matching theme
+- Preserves whitespace and formatting
+
+**Visual Design:**
+- Code displayed in `#E3D8D8` color
+- Language label in toned color (`#A18F8F`)
+- Custom scrollbar with theme colors
+- Copy button uses IconButton with toned variant
+- Header with language and copy button (if enabled)
+
+
+---
+
+#### ScrollContainer
+
+Reusable overflow wrapper with theme-matching custom scrollbar styling.
+
+**Props:**
+- `overflowX?: 'auto' | 'scroll' | 'hidden' | 'visible'` - Horizontal overflow mode (default: `'auto'`)
+- `overflowY?: 'auto' | 'scroll' | 'hidden' | 'visible'` - Vertical overflow mode (default: `'auto'`)
+- `width?: string` - Container width (default: `'100%'`)
+- `height?: string` - Container height (default: `'auto'`)
+- `maxWidth?: string` - Max width (default: `'100%'`)
+- `maxHeight?: string` - Max height (default: `'none'`)
+- `scrollbarSize?: string` - Scrollbar thickness/height (default: `'8px'`)
+- `trackColor?: string` - Scrollbar track color (default: `'rgba(161, 143, 143, 0.1)'`)
+- `thumbColor?: string` - Scrollbar thumb color (default: `'rgba(161, 143, 143, 0.3)'`)
+- `thumbHoverColor?: string` - Scrollbar thumb hover color (default: `'rgba(161, 143, 143, 0.5)'`)
+- `borderRadius?: string` - Scrollbar track/thumb radius (default: `'4px'`)
+
+**Example:**
+```svelte
+<script>
+  import { ScrollContainer } from '@coyalabs/bts-style';
+</script>
+
+<ScrollContainer overflowY="auto" maxHeight="320px">
+  <div style="min-height: 640px;">
+    Scrollable content with BTS-themed scrollbar.
+  </div>
+</ScrollContainer>
+```
+
+**Features:**
+- Reusable themed scrollbar styles from a single component
+- Supports both horizontal and vertical overflow use cases
+- Works with slot content (lists, code areas, panels, etc.)
+- Includes Firefox `scrollbar-color`/`scrollbar-width` support
+
 
 ---
 
@@ -344,13 +495,19 @@ Vertical tab navigation with support for categorized groups.
 **TabItem Type:**
 ```typescript
 type TabItem = {
-  id?: string;           // Required for tabs, omit for separators
-  label: string;         // Tab/separator text
-  icon?: string;         // Optional icon SVG
+  id?: string;              // Required for tabs, omit for separators
+  label: string;            // Tab/separator text
   type?: 'tab' | 'separator';  // Default: 'tab'
+  // Icon props (spread directly onto Button):
+  icon?: string;            // Icon SVG markup
+  iconRotation?: number;    // Icon rotation in degrees
+  iconSize?: string;        // Icon size (default: '18px')
+  iconToned?: boolean;      // Use toned icon variant
 }
 ```
 
+Any extra properties on a tab item beyond `id`, `label`, and `type` are forwarded directly to the underlying `Button` component as props. This means all Button icon-related props (`icon`, `iconRotation`, `iconSize`, `iconToned`) can be set per-tab without needing to be individually declared.
+
 **Example:**
 ```svelte
 <script>
@@ -408,11 +565,12 @@ Expandable file/folder tree with recursive structure.
 ```typescript
 type TreeItem = {
   name: string;
-  type: 'file' | 'folder';
+  type: 'file' | 'folder' | 'custom';
   children?: TreeItem[];
   data?: any;                                    // Custom data attached to item
   variant?: 'full' | 'primary' | 'secondary' | 'filled' | 'special-filled';  // Theme variant
   suffixIcon?: string;                           // SVG icon displayed on the right
+  isPending?: boolean;                           // Show pending state with reduced opacity
 }
 ```
 
@@ -550,6 +708,24 @@ Display additional icons on the right side of items:
 }
 ```
 
+**Custom Items:**
+Use `type: 'custom'` to render custom components via slot:
+```svelte
+<TreeDirectory items={[
+  { name: 'folder', type: 'folder', children: [...] },
+  { name: 'custom-widget', type: 'custom', data: {...} }
+]}>
+  <svelte:fragment slot="custom" let:item let:isNested let:isLast>
+    <YourCustomComponent {item} {isNested} {isLast} />
+  </svelte:fragment>
+</TreeDirectory>
+```
+
+**Corner Radius Behavior:**
+- Custom items act as list terminators for corner radius calculations
+- If the next item is of `type: 'custom'`, the current item's bottom corners will be fully rounded (25px)
+- This creates visual separation between standard tree items and custom slot components
+
 ---
 
 ### Popup System
@@ -938,6 +1114,7 @@ A special-themed button with gradient background and optional tooltip.
 **Props:**
 - `label: string` - Button text
 - `tooltipText?: string` - Optional tooltip text displayed on the right
+- All Button corner radius props (`borderRadiusTopLeft`, `borderRadiusTopRight`, `borderRadiusBottomLeft`, `borderRadiusBottomRight`)
 
 **Example:**
 ```svelte
@@ -949,6 +1126,13 @@ A special-themed button with gradient background and optional tooltip.
   label="AI Generate" 
   tooltipText="Uses AI to generate content" 
 />
+
+<!-- With custom corners -->
+<SpecialAction 
+  label="AI Generate" 
+  borderRadiusTopLeft="35px"
+  borderRadiusBottomRight="35px"
+/>
 ```
 
 **Features:**
@@ -1028,12 +1212,13 @@ Animated text component that reveals words sequentially with fade and blur effec
 
 #### ContextMenu
 
-Categorized menu component with separator support, similar to TabBar layout.
+Categorized menu component with separator support and animated scale-in from a specified corner.
 
 **Props:**
 - `items: Array<ContextMenuItem>` - Array of menu items and separators
 - `selectedValue?: any` - Currently selected item value
 - `onSelect?: (value: any) => void` - Callback when item is selected
+- `origin?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'` - Animation origin corner (default: `'top-left'`)
 
 **ContextMenuItem Type:**
 ```typescript
@@ -1066,6 +1251,7 @@ type ContextMenuItem = {
 <ContextMenu
   items={menuItems}
   {selectedValue}
+  origin="bottom-right"
   onSelect={(val) => handleAction(val)}
 />
 ```
@@ -1078,6 +1264,8 @@ type ContextMenuItem = {
 - Filled theme container
 - Automatic category spacing and borders
 - Text ellipsis for long labels
+- Smooth scale-in animation from specified corner (350ms with backOut easing)
+- Scale-out animation on dismiss (200ms)
 
 **Visual Layout:**
 - Categories separated by labeled dividers

package/dist/Base/BaseContainer.svelte

@@ -42,10 +42,10 @@
 
 <style>
   .glow-base-container {
-    width: 100%;
     border: 2px solid rgba(255, 255, 255, 0.13);
     padding: var(--padding);
     box-sizing: border-box;
+    height: 100%;
   }
 
   /* Theme A - Full */
@@ -79,6 +79,14 @@
       inset 0px 0px 9px 2px #66588048;
   }
 
+  .glow-base-container[data-theme='error'] {
+    background: #331e1e;
+    border: 3px solid #563737;
+    box-shadow: 
+      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
+      inset 0px 0px 9px 2px #5c4b4b48;
+  }
+
   /* Theme D - Filled */
   .glow-base-container[data-theme='filled'] {
     background: #161319;
@@ -87,7 +95,7 @@
       inset 0px 0px 9px 2px #ffffff0a;
   }
 
-    /* Theme D - Filled */
+    /* Theme F - Special Filled */
   .glow-base-container[data-theme='special-filled'] {
     background: linear-gradient(-78deg, #382D40 0%, #3A2B45 100%);
     box-shadow: 

package/dist/Base/BasePage.svelte

@@ -12,11 +12,6 @@
    */
   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;
@@ -36,7 +31,7 @@
 
 <div class="base-page">
   {#if showBGDetails}
-    <BGDetails {chainColor} />
+    <BGDetails />
   {/if}
   <div class="page-content">
     <slot />

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

@@ -23,9 +23,6 @@ declare const BasePage: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsW
     /**
        * @type {boolean}
        */ showBGDetails?: boolean;
-    /**
-       * @type {string}
-       */ chainColor?: string;
 }, {
     default: {};
 }>, {

package/dist/Base/BaseText.svelte

@@ -1,45 +1,58 @@
 <script>
   /**
-   * @type {'title' | 'content' | 'button'}
+   * @type {'title' | 'content' | 'button' | 'code'}
    */
   export let variant = 'content';
     /**
    * @type {string}
    */
   export let textModifier = '0px';
+
+  /**
+   * @type {string}
+   */
+  export let textWeightModifier = '0';
 </script>
 
-<span class="text" data-variant={variant} style="--text-modifier: {textModifier};">
+<span class="text" data-variant={variant} style="--text-modifier: {textModifier}; --text-weight-modifier: {textWeightModifier};">
   <slot />
 </span>
 
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
   @import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
+  @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
   .text {
     display: inline-flex;
     align-items: center;
     font-family: 'Satoshi', sans-serif;
+    caret-color: #544a51;
   }
   /* Title variant */
   .text[data-variant='title'] {
     font-family: 'Noto Serif KR', serif;
-    font-weight: 900;
+    font-weight: calc(900 + var(--text-weight-modifier));
     font-size: calc(30px + var(--text-modifier));
     color: #E3D8D8;
   }
   /* Content variant */
   .text[data-variant='content'] {
     font-family: 'Satoshi', sans-serif;
-    font-weight: 700;
+    font-weight: calc(700 + var(--text-weight-modifier));
     font-size: calc(18px + var(--text-modifier));
-    color: #777073;
+    color: #9e9599;
   }
   /* Button variant */
   .text[data-variant='button'] {
     font-family: 'Noto Serif KR', serif;
-    font-weight: 900;
+    font-weight: calc(600 + var(--text-weight-modifier));
     font-size: calc(17px + var(--text-modifier));
     color: #E3D8D8;
   }
+  /* Code variant */
+  .text[data-variant='code'] {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: calc(14px + var(--text-modifier));
+    color: #E3D8D8;
+  }
 </style>

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

@@ -1,7 +1,8 @@
 export default BaseText;
 type BaseText = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    variant?: "button" | "title" | "content" | undefined;
+    variant?: "button" | "code" | "title" | "content" | undefined;
     textModifier?: string | undefined;
+    textWeightModifier?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -12,8 +13,9 @@ type BaseText = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     $$bindings?: string | undefined;
 };
 declare const BaseText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    variant?: "button" | "title" | "content" | undefined;
+    variant?: "button" | "code" | "title" | "content" | undefined;
     textModifier?: string | undefined;
+    textWeightModifier?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/Base/variantTypes.d.ts

@@ -1,5 +1,5 @@
 /**
- * @typedef {'full' | 'primary' | 'secondary' | 'filled' | 'special-filled'} BaseContainerVariant
+ * @typedef {'full' | 'primary' | 'secondary' | 'error' | 'vague' | 'filled' | 'special-filled'} BaseContainerVariant
  */
 /**
  * Default variant values as constants
@@ -7,7 +7,8 @@
 export const VARIANT_FULL: "full";
 export const VARIANT_PRIMARY: "primary";
 export const VARIANT_SECONDARY: "secondary";
+export const VARIANT_ERROR: "error";
 export const VARIANT_VAGUE: "vague";
 export const VARIANT_FILLED: "filled";
 export const VARIANT_SPECIAL_FILLED: "special-filled";
-export type BaseContainerVariant = "full" | "primary" | "secondary" | "filled" | "special-filled";
+export type BaseContainerVariant = "full" | "primary" | "secondary" | "error" | "vague" | "filled" | "special-filled";

package/dist/Base/variantTypes.js

@@ -1,5 +1,5 @@
 /**
- * @typedef {'full' | 'primary' | 'secondary' | 'filled' | 'special-filled'} BaseContainerVariant
+ * @typedef {'full' | 'primary' | 'secondary' | 'error' | 'vague' | 'filled' | 'special-filled'} BaseContainerVariant
  */
 
 /**
@@ -8,6 +8,8 @@
 export const VARIANT_FULL = /** @type {const} */ ('full');
 export const VARIANT_PRIMARY = /** @type {const} */ ('primary');
 export const VARIANT_SECONDARY = /** @type {const} */ ('secondary');
+export const VARIANT_ERROR = /** @type {const} */ ('error');
+
 export const VARIANT_VAGUE = /** @type {const} */ ('vague');
 export const VARIANT_FILLED = /** @type {const} */ ('filled');
 export const VARIANT_SPECIAL_FILLED = /** @type {const} */ ('special-filled');

package/dist/Components/Button.svelte

@@ -2,6 +2,7 @@
   import BaseContainer from '../Base/BaseContainer.svelte';
   import BaseText from '../Base/BaseText.svelte';
   import BaseIcon from '../Base/BaseIcon.svelte';
+  import LoadingSpinner from './LoadingSpinner.svelte';
   import { icons } from '../icons';
   import { VARIANT_FULL } from '../Base/variantTypes.js';
   
@@ -73,30 +74,59 @@
    * @type {string}
    */
   export let borderRadiusBottomRight = '25px';
+
+  /**
+   * @type {boolean}
+   */
+  export let loading = false;
+
+  /**
+   * @type {boolean}
+   */
+  export let disabled = false;
+
+  /**
+   * @type {string}
+   */
+  export let loadingSize = '18px';
+
+  /**
+   * @type {boolean}
+   */
+  export let hideLabel = false;
 </script>
 
-<button class="button-wrapper" on:click>
+<button class="button-wrapper" on:click disabled={loading || disabled}>
   <BaseContainer {theme} {borderRadiusTopLeft} {borderRadiusTopRight} {borderRadiusBottomLeft} {borderRadiusBottomRight}>
     <div class="button-content">
-      {#if icon || $$slots.default}
-        <div class="icon-text">        
-          {#if icon}
-            <div class="icon-wrapper" style="transform: rotate({iconRotation}deg)">
-              <BaseIcon variant={iconToned ? "toned" : "default"} svg={icon} size={iconSize} />
-            </div>
-          {/if}
-          {#if $$slots.default}
-            <div style="transform: translateY({correctTextOffset ? '-2px' : '0px'})">
-              <BaseText variant="button">
-                <slot />
-              </BaseText>
+      <div class="button-inner" class:loading>
+        <div class="left-content">
+          {#if icon || ($$slots.default && !hideLabel)}
+            <div class="icon-text">        
+              {#if icon}
+                <div class="icon-wrapper" style="transform: rotate({iconRotation}deg)">
+                  <BaseIcon variant={iconToned ? "toned" : "default"} svg={icon} size={iconSize} />
+                </div>
+              {/if}
+              {#if $$slots.default && !hideLabel}
+                <div style="transform: translateY({correctTextOffset ? '-2px' : '0px'})">
+                  <BaseText variant="button">
+                    <slot />
+                  </BaseText>
+                </div>
+              {/if}
             </div>
           {/if}
         </div>
-      {/if}
-      {#if actionIcon}
-        <div class="icon-wrapper" style="transform: rotate({actionIconRotation}deg)">
-          <BaseIcon svg={actionIcon} size={actionIconSize} />
+        {#if actionIcon}
+          <div class="icon-wrapper" style="transform: rotate({actionIconRotation}deg)">
+            <BaseIcon svg={actionIcon} size={actionIconSize} />
+          </div>
+        {/if}
+      </div>
+      {#if loading}
+        <div class="loading-wrapper">
+          <LoadingSpinner size={loadingSize} />
         </div>
       {/if}
     </div>
@@ -109,15 +139,46 @@
     cursor: pointer;
     display: block;
     width: 100%;
+    height: 60px;
     user-select: none;
     overflow: visible;
   }
 
+  .button-wrapper:disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    filter: saturate(0%);
+  }
+
   .button-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .button-inner {
     display: flex;
+    width: 100%;
     align-items: center;
     justify-content: space-between;
     gap: 25px;
+    transition: opacity 0.2s ease;
+  }
+
+  .button-inner.loading {
+    opacity: 0;
+  }
+
+  .loading-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .icon-text {

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

@@ -13,6 +13,10 @@ type Button = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
     iconSize?: string | undefined;
     iconToned?: boolean | undefined;
     actionIconSize?: string | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loadingSize?: string | undefined;
+    hideLabel?: boolean | undefined;
 }, {
     default: {};
 }>, {
@@ -38,6 +42,10 @@ declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWit
     iconSize?: string | undefined;
     iconToned?: boolean | undefined;
     actionIconSize?: string | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    loadingSize?: string | undefined;
+    hideLabel?: boolean | undefined;
 }, {
     default: {};
 }>, {