@coyalabs/bts-style 1.0.8 → 1.0.9

package/dist/Components/popupStore.js

@@ -0,0 +1,99 @@
+import { writable } from 'svelte/store';
+import ConfirmPopup from './Popup/ConfirmPopup.svelte';
+import AlertPopup from './Popup/AlertPopup.svelte';
+import PromptPopup from './Popup/PromptPopup.svelte';
+
+function createPopupStore() {
+  /** @type {import('svelte/store').Writable<{isOpen: boolean, title: string, subtitle?: string, component: any, props: any}>} */
+  const { subscribe, set, update } = writable({
+    isOpen: false,
+    title: '',
+    subtitle: '',
+    component: /** @type {any} */ (null),
+    props: {}
+  });
+
+  return {
+    subscribe,
+    open: (/** @type {any} */ title, /** @type {any} */ component, props = {}, subtitle = '') => {
+      set({
+        isOpen: true,
+        title,
+        subtitle,
+        component,
+        props
+      });
+    },
+    close: () => {
+      set({
+        isOpen: false,
+        title: '',
+        subtitle: '',
+        component: null,
+        props: {}
+      });
+    },
+
+    /**
+     * Show a confirmation popup with two buttons
+     * @param {string} title
+     * @param {string} message
+     * @param {Object} options
+     * @param {() => void} [options.onConfirm]
+     * @param {() => void} [options.onCancel]
+     * @param {string} [options.confirmText]
+     * @param {string} [options.cancelText]
+     */
+    confirm: (title, message, options = {}) => {
+      set({
+        isOpen: true,
+        title,
+        subtitle: message,
+        component: ConfirmPopup,
+        props: options
+      });
+    },
+
+    /**
+     * Show an alert popup with one button
+     * @param {string} title
+     * @param {string} message
+     * @param {Object} options
+     * @param {() => void} [options.onOk]
+     * @param {string} [options.okText]
+     */
+    alert: (title, message, options = {}) => {
+      set({
+        isOpen: true,
+        title,
+        subtitle: message,
+        component: AlertPopup,
+        props: options
+      });
+    },
+
+    /**
+     * Show a prompt popup with input field
+     * @param {string} title
+     * @param {string} message
+     * @param {Object} options
+     * @param {(value: string) => void} [options.onSubmit]
+     * @param {() => void} [options.onCancel]
+     * @param {string} [options.placeholder]
+     * @param {string} [options.submitText]
+     * @param {string} [options.cancelText]
+     * @param {string} [options.label]
+     */
+    prompt: (title, message, options = {}) => {
+      set({
+        isOpen: true,
+        title,
+        subtitle: message,
+        component: PromptPopup,
+        props: options
+      });
+    }
+  };
+}
+
+export const popupStore = createPopupStore();

package/dist/Structure/TextHeader.svelte

@@ -0,0 +1,32 @@
+<script>
+  import BaseText from '../Base/BaseText.svelte';
+  
+  export let title = '';
+  export let subtitle = '';
+</script>
+
+<div class="text-header">
+    {#if title}
+    <div class="title">
+        <BaseText variant="title">{title}</BaseText>
+    </div>
+    {/if}
+    {#if subtitle}
+    <div class="subtitle">
+        <BaseText variant="content">{subtitle}</BaseText>
+    </div>
+    {/if}
+</div>
+
+<style>
+  .text-header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .title,
+  .subtitle {
+    margin: 0;
+  }
+</style>

package/dist/Structure/TextHeader.svelte.d.ts

@@ -0,0 +1,28 @@
+export default TextHeader;
+type TextHeader = SvelteComponent<{
+    title?: string | undefined;
+    subtitle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TextHeader: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    subtitle?: 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/icons.d.ts

@@ -0,0 +1,10 @@
+export namespace icons {
+    let arrow: string;
+    let folder: string;
+    let icon_expand: string;
+    let cross: string;
+    let pen: string;
+    let check: string;
+    let crossb: string;
+    let help: string;
+}

package/dist/icons.js

@@ -0,0 +1,10 @@
+export const icons = {
+    arrow: '<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5498 0.872253C6.03286 0.656357 6.59776 0.729738 7.00977 1.06171L7.0957 1.1369L12.0166 5.80585C12.0211 5.81013 12.0249 5.81513 12.0293 5.81952C12.034 5.82422 12.0393 5.82834 12.0439 5.83319C12.0482 5.83764 12.0516 5.84331 12.0557 5.84784C12.0645 5.85762 12.0738 5.86695 12.082 5.87714C12.0897 5.88658 12.0964 5.89672 12.1035 5.90643C12.109 5.91395 12.1149 5.92119 12.1201 5.92889C12.1269 5.93887 12.1334 5.94895 12.1396 5.95917C12.1632 5.99771 12.183 6.03822 12.1992 6.08026C12.2005 6.08354 12.2019 6.08674 12.2031 6.09003C12.2178 6.12988 12.2285 6.17107 12.2363 6.21307C12.2381 6.22283 12.2398 6.23256 12.2412 6.24237C12.2463 6.27778 12.25 6.31357 12.25 6.34979C12.25 6.35338 12.2491 6.35695 12.249 6.36053C12.2489 6.36771 12.2484 6.37485 12.248 6.38202C12.2462 6.42436 12.2412 6.46607 12.2324 6.50702C12.2319 6.50927 12.2319 6.51161 12.2314 6.51385C12.1992 6.65778 12.1253 6.79048 12.0166 6.89374L10.7666 8.08026C10.7651 8.08169 10.7632 8.08275 10.7617 8.08417L7.0957 11.5627C6.65104 11.9843 5.98473 12.0709 5.44727 11.7766C4.60866 11.3172 4.46065 10.1739 5.1543 9.51581L6.99707 7.76678H2.16699C1.38459 7.76678 0.75 7.1322 0.75 6.34979C0.75 5.56739 1.38459 4.9328 2.16699 4.9328H6.37109C6.59677 4.93263 6.70652 4.65761 6.54297 4.50214L5.1543 3.18378C4.46065 2.52564 4.60866 1.38241 5.44727 0.923035L5.5498 0.872253Z" stroke-width="1.5" stroke-linejoin="round"/></svg>',
+    folder: '<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.0782 1C7.18817 1.00001 8.11224 1.70066 8.31604 2.62852H9.60377C11.4794 2.62852 13 3.97168 13 5.62852V8C13 9.65686 11.4795 11 9.60377 11H4.39623C2.52054 11 1 9.65686 1 8V3.82852C1.00003 2.26638 2.43364 1.00003 4.2021 1H6.0782Z" stroke-width="1.5" stroke-linecap="round"/></svg>',
+    icon_expand: '<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.83954 0.768768C9.36489 0.85241 9.80286 1.2017 10.0466 1.69455C10.383 2.37571 10.3011 3.24666 9.79852 3.8342L6.36688 7.84299C6.15182 8.09413 5.84139 8.25021 5.49969 8.25021C5.158 8.25021 4.84757 8.09412 4.63251 7.84299L1.20087 3.8342C0.698243 3.24663 0.616432 2.37568 0.95282 1.69455C1.19652 1.20169 1.6345 0.852405 2.15985 0.768768C2.62551 0.694684 3.08998 0.841766 3.44501 1.16721L3.59052 1.3176L3.60126 1.33029L5.49969 3.65549L7.39813 1.33029L7.40887 1.3176C7.77637 0.888275 8.30735 0.684099 8.83954 0.768768Z" stroke-width="1.2" stroke-linejoin="round"/></svg>',
+    cross: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.7143 1.75415C12.7196 2.7595 12.7194 4.38918 11.7143 5.39464L10.3746 6.73428L11.7136 8.07322C12.719 9.07867 12.7197 10.709 11.7143 11.7144C10.7088 12.7198 9.07851 12.7192 8.07308 11.7137L6.73413 10.3748L5.39519 11.7137C4.38975 12.7192 2.75945 12.7198 1.754 11.7144C0.748549 10.709 0.749239 9.07867 1.75469 8.07322L3.09364 6.73428L1.754 5.39464C0.748851 4.38918 0.748684 2.7595 1.754 1.75415C2.75935 0.748792 4.38902 0.748985 5.39449 1.75415L6.73413 3.09378L8.07377 1.75415C9.07924 0.748985 10.7089 0.748792 11.7143 1.75415Z" stroke-width="2"/></svg>',
+    pen: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5664 0.750977C12.3421 0.769347 13.0332 1.10326 13.5186 1.62793C14.5307 2.72247 14.5264 4.45398 13.2959 5.68945L5.5166 13.5C5.03819 13.9803 4.38784 14.2499 3.70996 14.25H2.70215C1.61644 14.2499 0.75 13.3655 0.75 12.2949V11.2793C0.75 10.6048 1.0171 9.95741 1.49316 9.47949L9.27441 1.66699C9.30318 1.6381 9.33331 1.61087 9.36426 1.58496L9.61621 1.38965C10.2143 0.962846 10.8833 0.734842 11.5664 0.750977Z" stroke-width="2"/></svg>',
+    check: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z"  stroke-width="1.5"/><path d="M5.60596 8.05002L7.28552 9.00003L8.9999 6.09094" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    crossb: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z" stroke-width="1.5"/><path d="M5.54541 9.54547L9.54541 5.54547M9.54536 9.54547L5.54536 5.54547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    help: '<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.12598 1C8.80364 1 10.2761 1.41608 11.3467 2.30859C12.441 3.22103 13 4.53608 13 6.07031C13 8.64914 11.1429 9.84464 10.0557 10.5439L10.0498 10.5479C9.59811 10.834 9.28616 11.0529 9.08203 11.2695C8.90303 11.4596 8.86426 11.5868 8.86426 11.7109V12.0938C8.86426 12.2909 8.80556 12.474 8.70703 12.6289C9.12558 13.0883 9.38867 13.687 9.38867 14.3574C9.38856 15.8568 8.05087 17 6.60156 17C5.13309 16.9998 3.81554 15.875 3.81543 14.3574C3.81543 13.7321 4.03654 13.1746 4.39648 12.7324C4.25235 12.5591 4.16504 12.3368 4.16504 12.0938V11.7109C4.16504 9.40212 5.70071 8.25591 6.67773 7.51758C7.09258 7.20371 7.37411 6.98167 7.56445 6.75684C7.72926 6.56215 7.7763 6.42236 7.77637 6.27148C7.77637 5.9518 7.68601 5.82933 7.63672 5.78223C7.58081 5.72894 7.42619 5.62896 7.04883 5.62891C6.69244 5.62891 6.4936 5.74276 6.37793 5.86816C6.25387 6.00289 6.12603 6.25977 6.12598 6.70898C6.12598 7.26127 5.67826 7.70898 5.12598 7.70898H2C1.44772 7.70898 1 7.26127 1 6.70898C1.00007 5.04942 1.6296 3.59897 2.75098 2.57031C3.86552 1.54796 5.40077 1.00005 7.12598 1Z" stroke-width="1.5" stroke-linejoin="round"/></svg>'
+};

package/dist/index.d.ts

@@ -1,3 +1,19 @@
-export { default as BaseContainer } from "./BaseContainer.svelte";
-export { default as BasePage } from "./BasePage.svelte";
-export { default as Text } from "./Text.svelte";
+export { default as BaseContainer } from "./Base/BaseContainer.svelte";
+export { default as BasePage } from "./Base/BasePage.svelte";
+export { default as BaseText } from "./Base/BaseText.svelte";
+export { default as BaseIcon } from "./Base/BaseIcon.svelte";
+export { default as TextHeader } from "./Structure/TextHeader.svelte";
+export { default as Separator } from "./Components/Separator.svelte";
+export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
+export { default as Button } from "./Components/Button.svelte";
+export { default as IconButton } from "./Components/IconButton.svelte";
+export { default as InputBox } from "./Components/InputBox.svelte";
+export { default as Toggle } from "./Components/Toggle.svelte";
+export { default as Tooltip } from "./Components/Tooltip.svelte";
+export { default as TabBar } from "./Components/TabBar.svelte";
+export { default as Popup } from "./Components/Popup/Popup.svelte";
+export { popupStore } from "./Components/popupStore.js";
+export { default as ConfirmPopup } from "./Components/Popup/ConfirmPopup.svelte";
+export { default as AlertPopup } from "./Components/Popup/AlertPopup.svelte";
+export { default as PromptPopup } from "./Components/Popup/PromptPopup.svelte";
+export { icons } from "./icons.js";

package/dist/index.js

@@ -1,3 +1,24 @@
-export { default as BaseContainer } from "./BaseContainer.svelte";
-export { default as BasePage } from "./BasePage.svelte";
-export { default as Text } from "./Text.svelte";
+/* Base Components */
+export { default as BaseContainer } from "./Base/BaseContainer.svelte";
+export { default as BasePage } from "./Base/BasePage.svelte";
+export { default as BaseText } from "./Base/BaseText.svelte";
+export { default as BaseIcon } from "./Base/BaseIcon.svelte";
+/* Structure Components */
+export { default as TextHeader } from "./Structure/TextHeader.svelte";
+export { default as Separator } from "./Components/Separator.svelte";
+export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
+/* Components */
+export { default as Button } from "./Components/Button.svelte";
+export { default as IconButton } from "./Components/IconButton.svelte";
+export { default as InputBox } from "./Components/InputBox.svelte";
+export { default as Toggle } from "./Components/Toggle.svelte";
+export { default as Tooltip } from "./Components/Tooltip.svelte";
+export { default as TabBar } from "./Components/TabBar.svelte";
+export { default as Popup } from "./Components/Popup/Popup.svelte";
+export { popupStore } from "./Components/popupStore.js";
+/* Popup Presets */
+export { default as ConfirmPopup } from "./Components/Popup/ConfirmPopup.svelte";
+export { default as AlertPopup } from "./Components/Popup/AlertPopup.svelte";
+export { default as PromptPopup } from "./Components/Popup/PromptPopup.svelte";
+/* Icons */
+export { icons } from "./icons.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coyalabs/bts-style",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "BTS Theme Svelte component templates",
   "type": "module",
   "exports": {
@@ -14,6 +14,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "public",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],

package/README.md

@@ -1,35 +0,0 @@
-# @coyalabs/bts-style
-
-BTS Theme Svelte component templates for reusable UI components.
-
-## Installation
-
-```bash
-npm install @coyalabs/bts-style
-```
-
-## Usage
-
-```svelte
-<script>
-  import { Test } from '@coyalabs/bts-style';
-</script>
-
-<Test name="MyApp" on:ping={(e) => console.log('Ping at:', e.detail.time)} />
-```
-
-## Components
-
-### Testing
-
-A simple test component with event dispatching.
-
-**Props:**
-- `name` (string, default: 'Tester') - Name to display
-
-**Events:**
-- `ping` - Dispatched when button is clicked, includes `{ time: number }`
-
-## License
-
-MIT

package/dist/BaseContainer.svelte

@@ -1,43 +0,0 @@
-<script>
-  /**
-   * @type {'full' | 'primary' | 'secondary'}
-   */
-  export let theme = 'full';
-</script>
-
-<div class="glow-base-container" data-theme={theme}>
-  <slot />
-</div>
-
-<style>
-  .glow-base-container {
-    border-radius: 20px;
-    border: 2px solid rgba(255, 255, 255, 0.13);
-    padding: 1rem;
-    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: rgba(150, 132, 140, 0.25);
-    box-shadow: 
-      0px 0px 13px 0px rgba(255, 255, 255, 0.07),
-      inset 0px 0px 9px 2px rgba(102, 88, 128, 0.5);
-  }
-</style>

package/dist/BasePage.svelte

@@ -1,30 +0,0 @@
-<script>
-  // Base page component with dark background
-</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/Testing.svelte

@@ -1,26 +0,0 @@
-<script>
-  import { createEventDispatcher } from 'svelte';
-  export let name = 'Tester';
-  const dispatch = createEventDispatcher();
-
-  function handlePing() {
-    dispatch('ping', { time: Date.now() });
-  }
-</script>
-
-<section class="testing">
-  <h2>Testing Component</h2>
-  <p>Hello {name} — this is a simple test component.</p>
-  <button on:click={handlePing}>Ping</button>
-</section>
-
-<style>
-  .testing{
-    padding: 1rem;
-    border: 1px dashed var(--color-border, #ccc);
-    border-radius: 8px;
-    background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
-  }
-  .testing h2{ margin: 0 0 0.5rem 0; font-size: 1.05rem }
-  .testing button{ padding: .4rem .6rem; border-radius: 6px }
-</style>