@getmicdrop/svelte-components 2.2.0 → 2.4.0

package/dist/components/OrderSummary/OrderSummary.svelte

@@ -223,7 +223,7 @@
       {#if loading}
         <Spinner size="sm" color="white" />
       {:else}
-        {btnText}
+        <span translate="no">{btnText}</span>
       {/if}
     </button>
   </div>
@@ -345,7 +345,7 @@
         {#if loading}
           <Spinner size="sm" color="white" />
         {:else}
-          Checkout
+          <span translate="no">Checkout</span>
         {/if}
       </button>
     </div>

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

@@ -1 +1 @@
-{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,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"}
+{"version":3,"file":"OrderSummary.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/OrderSummary/OrderSummary.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyVA;;;;;;;;;;;;;;;;;;;;;;;mBAA2S;6CAT9P,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"}

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,197 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {number} Current page (1-indexed) */
+  export let currentPage = 1;
+  /** @type {number} Total number of pages */
+  export let totalPages = 1;
+  /** @type {number} Max page buttons to show */
+  export let maxVisible = 5;
+  /** @type {boolean} Show previous/next buttons */
+  export let showPrevNext = true;
+  /** @type {boolean} Flowbite API: alias for showPrevNext */
+  export let showIcons = undefined;
+  /** @type {string} Flowbite API: previous button label */
+  export let previousLabel = undefined;
+  /** @type {string} Flowbite API: next button label */
+  export let nextLabel = undefined;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  // Support flowbite's showIcons prop
+  $: effectiveShowPrevNext = showIcons !== undefined ? showIcons : showPrevNext;
+
+  function goToPage(page) {
+    if (page >= 1 && page <= totalPages && page !== currentPage) {
+      currentPage = page;
+      dispatch("change", { page });
+      // Also dispatch flowbite-style event
+      dispatch("pageChange", page);
+    }
+  }
+
+  function previous() {
+    goToPage(currentPage - 1);
+  }
+
+  function next() {
+    goToPage(currentPage + 1);
+  }
+
+  // Calculate which page numbers to show
+  $: visiblePages = (() => {
+    const pages = [];
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    let end = Math.min(totalPages, start + maxVisible - 1);
+
+    // Adjust start if we're near the end
+    if (end - start + 1 < maxVisible) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    return pages;
+  })();
+
+  $: showStartEllipsis = visiblePages[0] > 1;
+  $: showEndEllipsis = visiblePages[visiblePages.length - 1] < totalPages;
+</script>
+
+<nav class="pagination {className}" aria-label="Pagination">
+  {#if effectiveShowPrevNext}
+    <button
+      type="button"
+      class="pagination__button pagination__button--prev"
+      disabled={currentPage === 1}
+      on:click={previous}
+      aria-label="Previous page"
+    >
+      {#if $$slots.prev}
+        <slot name="prev" />
+      {:else}
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M12.5 15L7.5 10L12.5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      {/if}
+    </button>
+  {/if}
+
+  <div class="pagination__pages">
+    {#if showStartEllipsis}
+      <button
+        type="button"
+        class="pagination__page"
+        on:click={() => goToPage(1)}
+      >
+        1
+      </button>
+      <span class="pagination__ellipsis">...</span>
+    {/if}
+
+    {#each visiblePages as page}
+      <button
+        type="button"
+        class="pagination__page"
+        class:pagination__page--active={page === currentPage}
+        on:click={() => goToPage(page)}
+        aria-current={page === currentPage ? "page" : undefined}
+      >
+        {page}
+      </button>
+    {/each}
+
+    {#if showEndEllipsis}
+      <span class="pagination__ellipsis">...</span>
+      <button
+        type="button"
+        class="pagination__page"
+        on:click={() => goToPage(totalPages)}
+      >
+        {totalPages}
+      </button>
+    {/if}
+  </div>
+
+  {#if effectiveShowPrevNext}
+    <button
+      type="button"
+      class="pagination__button pagination__button--next"
+      disabled={currentPage === totalPages}
+      on:click={next}
+      aria-label="Next page"
+    >
+      {#if $$slots.next}
+        <slot name="next" />
+      {:else}
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      {/if}
+    </button>
+  {/if}
+</nav>
+
+<style>
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .pagination__pages {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .pagination__button,
+  .pagination__page {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    padding: 0 0.5rem;
+    border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 0.375rem;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .pagination__button:hover:not(:disabled),
+  .pagination__page:hover:not(.pagination__page--active) {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+    border-color: hsl(var(--Stroke-Secondary, 220 13% 75%));
+  }
+
+  .pagination__button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .pagination__page--active {
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    color: white;
+  }
+
+  .pagination__ellipsis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    color: hsl(var(--Text-Secondary, 220 9% 46%));
+    font-size: 0.875rem;
+  }
+</style>

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

@@ -0,0 +1,53 @@
+export default Pagination;
+type Pagination = SvelteComponent<{
+    class?: string | undefined;
+    currentPage?: number | undefined;
+    totalPages?: number | undefined;
+    maxVisible?: number | undefined;
+    showPrevNext?: boolean | undefined;
+    showIcons?: boolean | undefined;
+    previousLabel?: string | undefined;
+    nextLabel?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+    pageChange: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    prev: {};
+    next: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    currentPage?: number | undefined;
+    totalPages?: number | undefined;
+    maxVisible?: number | undefined;
+    showPrevNext?: boolean | undefined;
+    showIcons?: boolean | undefined;
+    previousLabel?: string | undefined;
+    nextLabel?: string | undefined;
+}, {
+    change: CustomEvent<any>;
+    pageChange: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    prev: {};
+    next: {};
+}, {}, 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;
+}
+//# sourceMappingURL=Pagination.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Pagination/Pagination.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAgJA;;;;;;;;;;;;;;;;;eAAsO;6CAdzL,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"}

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

@@ -1,9 +1,9 @@
 export default PasswordStrengthIndicator;
 type PasswordStrengthIndicator = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    textColor?: string | undefined;
     password?: string | undefined;
     strengthText?: string | undefined;
     score?: number | undefined;
-    textColor?: string | undefined;
 }, {
     default: {};
 }>, {
@@ -14,10 +14,10 @@ type PasswordStrengthIndicator = SvelteComponent<$$__sveltets_2_PropsWithChildre
     $$bindings?: string | undefined;
 };
 declare const PasswordStrengthIndicator: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    textColor?: string | undefined;
     password?: string | undefined;
     strengthText?: string | undefined;
     score?: number | undefined;
-    textColor?: string | undefined;
 }, {
     default: {};
 }>, {

package/dist/components/Radio/Radio.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+
+  /** @type {string} The value of this radio option */
+  export let value = "";
+  /** @type {string} The currently selected value (bind:group) */
+  export let group = "";
+  /** @type {string} Name attribute for grouping radios */
+  export let name = "";
+  /** @type {boolean} Whether the radio is disabled */
+  export let disabled = false;
+  /** @type {boolean|undefined} Direct checked prop for flowbite API compatibility */
+  export let checked = undefined;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+
+  // Support both flowbite-style checked prop and group binding
+  $: isChecked = checked !== undefined ? checked : group === value;
+
+  function handleChange() {
+    group = value;
+    dispatch("change", { value });
+  }
+</script>
+
+<label class="radio {className}" class:radio--disabled={disabled}>
+  <input
+    type="radio"
+    {name}
+    {value}
+    {disabled}
+    checked={isChecked}
+    on:change={handleChange}
+    class="radio__input"
+  />
+  <span class="radio__circle">
+    <span class="radio__dot"></span>
+  </span>
+  {#if $$slots.default}
+    <span class="radio__label">
+      <slot />
+    </span>
+  {/if}
+</label>
+
+<style>
+  .radio {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+  }
+
+  .radio--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .radio__input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .radio__circle {
+    flex-shrink: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 2px solid hsl(var(--Stroke-Primary, 220 13% 85%));
+    border-radius: 50%;
+    background-color: hsl(var(--BG-Primary, 0 0% 100%));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    margin-top: 0.1875rem; /* Align with text baseline */
+  }
+
+  .radio__dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    background-color: hsl(var(--Brand-Primary, 221 83% 53%));
+    opacity: 0;
+    transform: scale(0);
+    transition: all 0.15s ease;
+  }
+
+  .radio__input:checked + .radio__circle {
+    border-color: hsl(var(--Brand-Primary, 221 83% 53%));
+  }
+
+  .radio__input:checked + .radio__circle .radio__dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .radio__input:focus-visible + .radio__circle {
+    outline: 2px solid hsl(var(--Brand-Primary, 221 83% 53%));
+    outline-offset: 2px;
+  }
+
+  .radio__input:disabled + .radio__circle {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+  }
+
+  .radio__label {
+    color: hsl(var(--Text-Primary, 220 13% 13%));
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+</style>

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

@@ -0,0 +1,54 @@
+export default Radio;
+type Radio = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    group?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const Radio: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+    group?: string | undefined;
+}, {
+    default: {};
+}>, {
+    change: CustomEvent<any>;
+} & {
+    [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=Radio.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Radio/Radio.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAqEA;;;cAhBW,OAAO,GAAC,SAAS;;;;;;;;;;;;eAgBkJ;sCATxI,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"}

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,68 @@
+<script>
+  /** @type {'text' | 'circular' | 'rectangular'} Shape variant */
+  export let variant = "text";
+  /** @type {string} Width (CSS value) */
+  export let width = "100%";
+  /** @type {string} Height (CSS value) */
+  export let height = "1rem";
+  /** @type {boolean} Whether to animate */
+  export let animation = true;
+  /** @type {string} Additional CSS classes */
+  let className = "";
+  export { className as class };
+  /** @type {string} Flowbite-style divClass for Tailwind classes */
+  export let divClass = "";
+
+  // If divClass is provided, use it instead of explicit width/height
+  $: useFlowbiteStyle = divClass !== "";
+  $: computedStyle = useFlowbiteStyle ? "" : `width: ${width}; height: ${height};`;
+  $: computedClass = useFlowbiteStyle
+    ? `skeleton skeleton--${variant} ${divClass} ${className}`.trim()
+    : `skeleton skeleton--${variant} ${className}`.trim();
+</script>
+
+<div
+  class={computedClass}
+  class:skeleton--animated={animation}
+  style={computedStyle}
+  aria-hidden="true"
+></div>
+
+<style>
+  .skeleton {
+    background-color: hsl(var(--BG-Secondary, 220 14% 96%));
+    display: block;
+  }
+
+  .skeleton--text {
+    border-radius: 0.25rem;
+  }
+
+  .skeleton--circular {
+    border-radius: 50%;
+  }
+
+  .skeleton--rectangular {
+    border-radius: 0.5rem;
+  }
+
+  .skeleton--animated {
+    animation: skeleton-pulse 1.5s ease-in-out infinite;
+    background: linear-gradient(
+      90deg,
+      hsl(var(--BG-Secondary, 220 14% 96%)) 0%,
+      hsl(var(--BG-Primary, 0 0% 100%)) 50%,
+      hsl(var(--BG-Secondary, 220 14% 96%)) 100%
+    );
+    background-size: 200% 100%;
+  }
+
+  @keyframes skeleton-pulse {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+</style>

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

@@ -0,0 +1,37 @@
+export default Skeleton;
+type Skeleton = SvelteComponent<{
+    class?: string | undefined;
+    variant?: "text" | "circular" | "rectangular" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    animation?: boolean | undefined;
+    divClass?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Skeleton: $$__sveltets_2_IsomorphicComponent<{
+    class?: string | undefined;
+    variant?: "text" | "circular" | "rectangular" | undefined;
+    width?: string | undefined;
+    height?: string | undefined;
+    animation?: boolean | undefined;
+    divClass?: 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;
+}
+//# sourceMappingURL=Skeleton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Skeleton/Skeleton.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;AA+CA;;;;;;;;;mBAAiL;6CATpI,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"}

package/dist/components/Tabs/TabItem.svelte

@@ -0,0 +1,39 @@
+<script>
+  import { getContext, onMount, createEventDispatcher } from "svelte";
+
+  /** @type {string} Tab title displayed in the tab button */
+  export let title = "";
+  /** @type {boolean} Whether this tab is initially open/active (flowbite API) */
+  export let open = false;
+  /** @type {string|number|undefined} Unique identifier for this tab */
+  export let value = undefined;
+  /** @type {boolean} Whether the tab is disabled */
+  export let disabled = false;
+  /** @type {string} Additional CSS classes for the tab button */
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher();
+  const { activeTab, registerTab } = getContext("tabs");
+
+  // Generate unique ID
+  let tabId = value || `tab-${Math.random().toString(36).substring(2, 9)}`;
+
+  onMount(() => {
+    registerTab(tabId, title, open);
+  });
+
+  $: isActive = $activeTab === tabId;
+</script>
+
+{#if isActive}
+  <div class="tab-panel" role="tabpanel" on:click={() => dispatch("click")}>
+    <slot />
+  </div>
+{/if}
+
+<style>
+  .tab-panel {
+    /* Content panel styling can be customized via contentClass on Tabs */
+  }
+</style>

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

@@ -0,0 +1,52 @@
+export default TabItem;
+type TabItem = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    open?: boolean | undefined;
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | number | undefined;
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: string | undefined;
+};
+declare const TabItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string | undefined;
+    open?: boolean | undefined;
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    value?: string | number | undefined;
+}, {
+    default: {};
+}>, {
+    click: CustomEvent<any>;
+} & {
+    [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=TabItem.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs/TabItem.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA8DA;;;;;YAjBW,MAAM,GAAC,MAAM,GAAC,SAAS;;;;;;;;;eAiBoI;sCAThI,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"}