@getmicdrop/svelte-components 2.4.0 → 2.6.1

package/dist/components/Tabs/Tabs.svelte

@@ -1,181 +0,0 @@
-<script>
-  import { setContext, onMount } from "svelte";
-  import { writable } from "svelte/store";
-
-  /** @type {'underline' | 'pill' | 'full'} Tab style variant */
-  export let tabStyle = "underline";
-  /** @type {string} CSS classes for the content area (flowbite API) */
-  export let contentClass = "";
-  /** @type {string|number|undefined} Currently active tab value (bindable) */
-  export let activeTabValue = undefined;
-  /** @type {string} Additional CSS classes */
-  let className = "";
-  export { className as class };
-
-  // Create a store for the active tab
-  const activeTab = writable(activeTabValue);
-  const tabItems = writable([]);
-
-  // Keep activeTabValue in sync with store
-  $: if (activeTabValue !== undefined) {
-    activeTab.set(activeTabValue);
-  }
-  $: activeTabValue = $activeTab;
-
-  // Provide context to TabItem children
-  setContext("tabs", {
-    activeTab,
-    tabItems,
-    tabStyle,
-    registerTab: (id, title, open) => {
-      tabItems.update(items => {
-        // Avoid duplicates
-        if (items.find(item => item.id === id)) return items;
-        return [...items, { id, title }];
-      });
-      // If this tab has open prop and no active tab set, make it active
-      if (open && $activeTab === undefined) {
-        activeTab.set(id);
-      }
-      return id;
-    },
-    setActiveTab: (id) => {
-      activeTab.set(id);
-    }
-  });
-
-  // Ensure first tab is selected if none selected
-  $: if ($tabItems.length > 0 && $activeTab === undefined) {
-    activeTab.set($tabItems[0].id);
-  }
-</script>
-
-<div class="tabs tabs--{tabStyle} {className}">
-  <div class="tabs__list" role="tablist">
-    {#each $tabItems as tab (tab.id)}
-      <button
-        type="button"
-        role="tab"
-        class="tabs__tab"
-        class:tabs__tab--active={$activeTab === tab.id}
-        aria-selected={$activeTab === tab.id}
-        tabindex={$activeTab === tab.id ? 0 : -1}
-        on:click={() => activeTab.set(tab.id)}
-      >
-        {tab.title}
-      </button>
-    {/each}
-  </div>
-  <div class="tabs__content {contentClass}">
-    <slot />
-  </div>
-</div>
-
-<style>
-  .tabs {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .tabs__list {
-    display: flex;
-    gap: 0;
-    border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-  }
-
-  .tabs__list::-webkit-scrollbar {
-    display: none;
-  }
-
-  .tabs--pill .tabs__list {
-    border-bottom: none;
-    gap: 0.5rem;
-    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
-    padding: 0.25rem;
-    border-radius: 0.5rem;
-  }
-
-  .tabs--full .tabs__list {
-    border-bottom: none;
-  }
-
-  .tabs__tab {
-    padding: 0.75rem 1rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Secondary, 220 9% 46%));
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    position: relative;
-    transition: all 0.15s ease;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  .tabs__tab:hover {
-    color: hsl(var(--Text-Primary, 220 13% 13%));
-  }
-
-  .tabs__tab--active {
-    color: hsl(var(--Brand-Primary, 221 83% 53%));
-  }
-
-  /* Underline style (default) */
-  .tabs--underline .tabs__tab--active::after {
-    content: "";
-    position: absolute;
-    bottom: -1px;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
-  }
-
-  /* Pill style */
-  .tabs--pill .tabs__tab {
-    border-radius: 0.375rem;
-    padding: 0.5rem 0.75rem;
-  }
-
-  .tabs--pill .tabs__tab--active {
-    background-color: hsl(var(--BG-Primary, 0 0% 100%));
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  }
-
-  .tabs--pill .tabs__tab--active::after {
-    display: none;
-  }
-
-  .tabs__content {
-    padding-top: 1rem;
-  }
-
-  /* Dark mode */
-  :global(.dark) .tabs__list {
-    border-bottom-color: hsl(var(--Stroke-Primary, 220 13% 30%));
-  }
-
-  :global(.dark) .tabs__tab {
-    color: hsl(var(--Text-Secondary, 220 9% 70%));
-  }
-
-  :global(.dark) .tabs__tab:hover {
-    color: hsl(var(--Text-Primary, 0 0% 95%));
-  }
-
-  :global(.dark) .tabs__tab--active {
-    color: hsl(var(--Brand-Primary, 221 83% 60%));
-  }
-
-  :global(.dark) .tabs--pill .tabs__list {
-    background-color: hsl(var(--BG-Secondary, 220 13% 20%));
-  }
-
-  :global(.dark) .tabs--pill .tabs__tab--active {
-    background-color: hsl(var(--BG-Primary, 220 13% 15%));
-  }
-</style>

package/dist/components/Tabs/Tabs.svelte.d.ts

@@ -1,46 +0,0 @@
-export default Tabs;
-type Tabs = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    tabStyle?: "full" | "underline" | "pill" | undefined;
-    contentClass?: string | undefined;
-    activeTabValue?: string | number | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    tabStyle?: "full" | "underline" | "pill" | undefined;
-    contentClass?: string | undefined;
-    activeTabValue?: string | number | 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;
-}
-//# sourceMappingURL=Tabs.svelte.d.ts.map

package/dist/components/Tabs/Tabs.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/Tabs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA6FA;;;;qBAhBW,MAAM,GAAC,MAAM,GAAC,SAAS;;;;;;;eAgB0I;sCATtI,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}