@getmicdrop/svelte-components 5.1.2 → 5.2.1

package/dist/primitives/Tabs/Tabs.svelte

@@ -1,104 +1,127 @@
-<script>
-  import { setContext, onMount } from "svelte";
-  import { writable } from "svelte/store";
-
-  /** @type {'underline' | 'pills' | 'full'} Tab style variant */
-  export let tabStyle = "underline";
-  /** @type {string} CSS classes for the content area */
-  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);
-  }
-
-  // Tab list classes by style
-  const tabListClasses = {
-    underline: "flex flex-wrap -mb-px text-sm font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none",
-    pills: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 gap-2",
-    full: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden"
-  };
-
-  // Tab button classes by style
-  function getTabClasses(isActive) {
-    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800";
-
-    switch (tabStyle) {
-      case 'underline':
-        return isActive
-          ? `${base} p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500`
-          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300`;
-      case 'pills':
-        return isActive
-          ? `${base} px-4 py-3 text-white bg-blue-600 rounded-lg active`
-          : `${base} px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white`;
-      case 'full':
-        return isActive
-          ? `${base} w-full p-4 text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white`
-          : `${base} w-full p-4 bg-white hover:text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700`;
-      default:
-        return base;
-    }
-  }
-
-  $: tabListClass = tabListClasses[tabStyle] || tabListClasses.underline;
-</script>
-
-<div class="flex flex-col {className}">
-  <ul class="{tabListClass}" role="tablist">
-    {#each $tabItems as tab (tab.id)}
-      <li class={tabStyle === 'underline' ? 'me-2' : ''} role="presentation">
-        <button
-          type="button"
-          role="tab"
-          class={getTabClasses($activeTab === tab.id)}
-          aria-selected={$activeTab === tab.id}
-          tabindex={$activeTab === tab.id ? 0 : -1}
-          on:click={() => activeTab.set(tab.id)}
-        >
-          {tab.title}
-        </button>
-      </li>
-    {/each}
-  </ul>
-  <div class="pt-4 {contentClass}">
-    <slot />
-  </div>
-</div>
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  interface Props {
+    tabStyle?: 'underline' | 'pills' | 'full';
+    contentClass?: string;
+    activeTabValue?: string | number | undefined;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    tabStyle = "underline",
+    contentClass = "",
+    activeTabValue = $bindable(undefined),
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Create a store for the active tab
+  const activeTab = writable<string | number | undefined>(activeTabValue);
+  const tabItems = writable<Array<{ id: string | number; title: string }>>([]);
+
+  // Keep activeTabValue in sync with store
+  $effect(() => {
+    if (activeTabValue !== undefined) {
+      activeTab.set(activeTabValue);
+    }
+  });
+
+  $effect(() => {
+    const unsubscribe = activeTab.subscribe(value => {
+      activeTabValue = value;
+    });
+    return unsubscribe;
+  });
+
+  // Provide context to TabItem children
+  setContext("tabs", {
+    activeTab,
+    tabItems,
+    tabStyle,
+    registerTab: (id: string | number, title: string, open: boolean) => {
+      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
+      let currentActive: string | number | undefined;
+      activeTab.subscribe(v => currentActive = v)();
+      if (open && currentActive === undefined) {
+        activeTab.set(id);
+      }
+      return id;
+    },
+    setActiveTab: (id: string | number) => {
+      activeTab.set(id);
+    }
+  });
+
+  // Ensure first tab is selected if none selected
+  $effect(() => {
+    const items = $tabItems;
+    const active = $activeTab;
+    if (items.length > 0 && active === undefined) {
+      activeTab.set(items[0].id);
+    }
+  });
+
+  // Tab list classes by style
+  const tabListClasses = {
+    underline: "flex flex-wrap -mb-px text-sm font-medium text-center border-b border-gray-200 dark:border-gray-700 overflow-x-auto scrollbar-none",
+    pills: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 gap-2",
+    full: "flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400 divide-x divide-gray-200 dark:divide-gray-700 rounded-lg shadow overflow-hidden"
+  };
+
+  // Tab button classes by style
+  function getTabClasses(isActive: boolean) {
+    const base = "inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800";
+
+    switch (tabStyle) {
+      case 'underline':
+        return isActive
+          ? `${base} p-4 text-blue-600 border-b-2 border-blue-600 rounded-t-lg active dark:text-blue-500 dark:border-blue-500`
+          : `${base} p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300`;
+      case 'pills':
+        return isActive
+          ? `${base} px-4 py-3 text-white bg-blue-600 rounded-lg active`
+          : `${base} px-4 py-3 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white`;
+      case 'full':
+        return isActive
+          ? `${base} w-full p-4 text-gray-900 bg-gray-100 dark:bg-gray-700 dark:text-white`
+          : `${base} w-full p-4 bg-white hover:text-gray-700 hover:bg-gray-50 dark:bg-gray-800 dark:hover:text-white dark:hover:bg-gray-700`;
+      default:
+        return base;
+    }
+  }
+
+  let tabListClass = $derived(tabListClasses[tabStyle] || tabListClasses.underline);
+</script>
+
+<div class="flex flex-col {className}" {...restProps}>
+  <ul class="{tabListClass}" role="tablist">
+    {#each $tabItems as tab (tab.id)}
+      <li class={tabStyle === 'underline' ? 'me-2' : ''} role="presentation">
+        <button
+          type="button"
+          role="tab"
+          class={getTabClasses($activeTab === tab.id)}
+          aria-selected={$activeTab === tab.id}
+          tabindex={$activeTab === tab.id ? 0 : -1}
+          onclick={() => activeTab.set(tab.id)}
+        >
+          {tab.title}
+        </button>
+      </li>
+    {/each}
+  </ul>
+  <div class="pt-4 {contentClass}">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>

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

@@ -1,46 +1,13 @@
-export default Tabs;
-type Tabs = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    tabStyle?: "full" | "underline" | "pills" | 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" | "pills" | undefined;
-    contentClass?: string | undefined;
+import type { Snippet } from 'svelte';
+interface Props {
+    tabStyle?: 'underline' | 'pills' | 'full';
+    contentClass?: string;
     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;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
 }
+declare const Tabs: import("svelte").Component<Props, {}, "activeTabValue">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
 //# sourceMappingURL=Tabs.svelte.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA4HA;;;;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"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Tabs/Tabs.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoHH,QAAA,MAAM,IAAI,yDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/primitives/Toggle.svelte

@@ -1,19 +1,31 @@
 <script>
-  import { createEventDispatcher } from 'svelte';
+  /**
+   * Toggle Component - Flowbite Native
+   * Migrated to Svelte 5 runes
+   */
 
-  export let checked = false;
-  export let disabled = false;
-  /** @type {'sm' | 'md' | 'lg'} Size variant */
-  export let size = 'md';
-  /** @type {string} Additional CSS classes */
-  let className = '';
-  export { className as class };
-
-  const dispatch = createEventDispatcher();
+  /** @type {{
+    checked?: boolean,
+    disabled?: boolean,
+    size?: 'sm' | 'md' | 'lg',
+    class?: string,
+    onchange?: (detail: { checked: boolean }) => void,
+    children?: any,
+    [key: string]: any
+  }} */
+  let {
+    checked = $bindable(false),
+    disabled = false,
+    size = 'md',
+    class: className = '',
+    onchange,
+    children,
+    ...restProps
+  } = $props();
 
   function handleChange(event) {
     checked = event.target.checked;
-    dispatch('change', { checked });
+    onchange?.({ checked });
   }
 
   // Flowbite toggle sizes
@@ -35,15 +47,15 @@
     }
   };
 
-  $: sizeConfig = sizes[size] || sizes.md;
+  let sizeConfig = $derived(sizes[size] || sizes.md);
 </script>
 
-<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}">
+<label class="inline-flex items-center {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} {className}" {...restProps}>
   <input
     type="checkbox"
     bind:checked
     {disabled}
-    on:change={handleChange}
+    onchange={handleChange}
     class="sr-only peer"
   />
   <div
@@ -51,9 +63,9 @@
     role="switch"
     aria-checked={checked}
   ></div>
-  {#if $$slots.default}
+  {#if children}
     <span class="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-      <slot />
+      {#if typeof children === 'function'}{@render children()}{:else}{children}{/if}
     </span>
   {/if}
 </label>

package/dist/primitives/Toggle.svelte.d.ts

@@ -1,50 +1,27 @@
 export default Toggle;
-type Toggle = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | undefined;
-}, {
-    default: {};
-}>, {
-    change: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type Toggle = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        [key: string]: any;
+        checked?: boolean | undefined;
+        disabled?: boolean | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        class?: string | undefined;
+        onchange?: ((detail: {
+            checked: boolean;
+        }) => void) | undefined;
+        children?: any;
+    }>): void;
 };
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    class?: string | undefined;
-    size?: "sm" | "md" | "lg" | undefined;
-    disabled?: boolean | undefined;
-    checked?: boolean | 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 : {
+declare const Toggle: import("svelte").Component<{
+    [key: string]: any;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    class?: string;
+    onchange?: (detail: {
+        checked: boolean;
+    }) => void;
     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;
-}
+}, {}, "checked">;
 //# sourceMappingURL=Toggle.svelte.d.ts.map

package/dist/primitives/Toggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAyEA;;;;;;;;;;;;;eAA+J;sCATzH,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"}
+{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/primitives/Toggle.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2EA;;cARc,OAAO;eACN,OAAO;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;YACjB,MAAM;eACH,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI;eACtC,GAAG;kBAGmC"}

package/dist/primitives/Typography/Typography.svelte

@@ -1,27 +1,30 @@
-<script>
-  /**
-   * Typography component for consistent text styling across the application.
-   * Renders semantic HTML elements (h1-h6, p) with configurable font weights.
-   *
-   * @example
-   * <Typography variant="h1" weight="bold">Page Title</Typography>
-   * <Typography variant="p" weight="regular">Body text</Typography>
-   */
-
-  /** @type {'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'} The semantic element to render */
-  export let variant = 'p';
-
-  /** @type {'bold' | 'semibold' | 'medium' | 'regular'} Font weight variant */
-  export let weight = 'regular';
-
-  /** @type {string} Additional CSS classes */
-  let className = '';
-  export { className as class };
-
-  /** @type {string} Text content (alternative to slot) */
-  export let text = '';
-
-  const sizeMap = {
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** The semantic element to render */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /** Font weight variant */
+    weight?: 'bold' | 'semibold' | 'medium' | 'regular';
+    /** Additional CSS classes */
+    class?: string;
+    /** Text content (alternative to children) */
+    text?: string;
+    /** Child content */
+    children?: Snippet;
+  }
+
+  let {
+    variant = 'p',
+    weight = 'regular',
+    class: className = '',
+    text = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const sizeMap: Record<string, string> = {
     h1: 'text-3xl',
     h2: 'text-2xl',
     h3: 'text-xl',
@@ -31,20 +34,20 @@
     p: 'text-sm',
   };
 
-  const weightMap = {
+  const weightMap: Record<string, string> = {
     bold: 'font-bold',
     semibold: 'font-semibold',
     medium: 'font-medium',
     regular: 'font-normal',
   };
 
-  $: computedClass = `${sizeMap[variant]} ${weightMap[weight]} ${className}`.trim();
+  let computedClass = $derived(`${sizeMap[variant]} ${weightMap[weight]} ${className}`.trim());
 </script>
 
-<svelte:element this={variant} class={computedClass} {...$$restProps}>
+<svelte:element this={variant} class={computedClass} {...restProps}>
   {#if text}
     {text}
   {:else}
-    <slot />
+    {@render children?.()}
   {/if}
 </svelte:element>

package/dist/primitives/Typography/Typography.svelte.d.ts

@@ -1,48 +1,18 @@
-export default Typography;
-type Typography = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
-    text?: string | undefined;
-    weight?: "bold" | "semibold" | "medium" | "regular" | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Typography: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    class?: string | undefined;
-    variant?: "h2" | "p" | "h3" | "h1" | "h4" | "h5" | "h6" | undefined;
-    text?: string | undefined;
-    weight?: "bold" | "semibold" | "medium" | "regular" | 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;
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** The semantic element to render */
+    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    /** Font weight variant */
+    weight?: 'bold' | 'semibold' | 'medium' | 'regular';
+    /** Additional CSS classes */
+    class?: string;
+    /** Text content (alternative to children) */
+    text?: string;
+    /** Child content */
+    children?: Snippet;
 }
+declare const Typography: import("svelte").Component<Props, {}, "">;
+type Typography = ReturnType<typeof Typography>;
+export default Typography;
 //# sourceMappingURL=Typography.svelte.d.ts.map

package/dist/primitives/Typography/Typography.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Typography/Typography.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA0EA;;;;;;;;;;;;eAA0K;sCATpI,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"}
+{"version":3,"file":"Typography.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Typography/Typography.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGpD,UAAU,KAAM,SAAQ,cAAc,CAAC,WAAW,CAAC;IACjD,qCAAqC;IACrC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,CAAC;IACxD,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;IACpD,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6CH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/ValidationError.svelte

@@ -1,10 +1,16 @@
-<script>
+<script lang="ts">
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import WarningIcon from "./Icons/WarningIcon.svelte";
 
-  export let error = "";
-  export let show = true;
+  interface Props {
+    /** Error message to display */
+    error?: string;
+    /** Whether to show the error */
+    show?: boolean;
+  }
+
+  let { error = '', show = true }: Props = $props();
 </script>
 
 {#if error && show}