@noxlovette/material 0.3.3 → 0.4.0

package/dist/components/nav/rail/Rail.stories.svelte

@@ -3,7 +3,6 @@
   import Rail from './Rail.svelte';
   import RailItem from './RailItem.svelte';
   import FAB from '../../buttons/FAB.svelte';
-  import Avatar from '../../misc/Avatar.svelte';
 
   const { Story } = defineMeta({
     title: 'Navigation/Rail',
@@ -48,7 +47,7 @@
   {/snippet}
 </Story>
 
-<Story name="With FAB and Footer" args={{ withNavbar: false }}>
+<Story name="With FAB">
   {#snippet template(args)}
     <div class="bg-md-sys-color-surface-variant relative h-[420px] overflow-hidden rounded-2xl">
       <Rail
@@ -61,9 +60,6 @@
         {#snippet fab()}
           <FAB size="small" iconProps={{ name: 'add' }} label="New" />
         {/snippet}
-        {#snippet railFooter()}
-          <Avatar seed="DV" />
-        {/snippet}
         <RailItem label="Home" href="/" iconProps={{ name: 'house' }} selected />
         <RailItem label="Inbox" href="#" iconProps={{ name: 'mail' }} badge={4} />
         <RailItem label="Settings" href="#" iconProps={{ name: 'settings' }} />

package/dist/components/nav/rail/Rail.svelte

@@ -10,27 +10,22 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 <script lang="ts">
   import { clickOutside } from '../../../actions/index.js';
   import clsx from 'clsx';
-  import { setContext } from 'svelte';
+  import { setContext, untrack } from 'svelte';
   import type { RailProps } from './types';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { rail } from './theme';
   import { NavigationMenu } from 'bits-ui';
   import { railStore } from './railStore.svelte.js';
-  import RailNavContext from './RailNavContext.svelte';
-  import Navbar from '../navbar/Navbar.svelte';
 
   let {
     children,
     rounded = false,
     expandable = true,
     fab,
-    railFooter,
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
-    withNavbar = false,
-    class: className,
-    navbarProps
+    class: className
   }: RailProps = $props();
 
   const expanded = $derived(!collapsed);
@@ -85,28 +80,11 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
 
   <NavigationMenu.Root orientation="vertical" class="w-full">
     <NavigationMenu.List class={`${items()} rail-items`}>
-      <RailNavContext mobile={false}>
-        {@render children?.()}
-      </RailNavContext>
+      {@render children?.()}
     </NavigationMenu.List>
   </NavigationMenu.Root>
-
-  {#if railFooter}
-    <div class="mt-auto flex flex-col items-center pb-2">
-      {@render railFooter()}
-    </div>
-  {/if}
 </div>
 
-<!-- Mobile bottom navbar (md:hidden) -->
-{#if withNavbar}
-  <Navbar {...navbarProps}>
-    <RailNavContext mobile={true}>
-      {@render children?.()}
-    </RailNavContext>
-  </Navbar>
-{/if}
-
 <style>
   .rail-scrim {
     opacity: 0;

package/dist/components/nav/rail/theme.d.ts

@@ -67,7 +67,7 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     items: string;
     ghost: string;
     scrim: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     anchor: {
         viewport: {
             base: string;
@@ -100,7 +100,7 @@ export declare const rail: import("tailwind-variants").TVReturnType<{
     items: string;
     ghost: string;
     scrim: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const railElement: import("tailwind-variants").TVReturnType<{
     active: {
         true: {
@@ -195,7 +195,7 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     active: {
         true: {
             content: string;
@@ -242,4 +242,4 @@ export declare const railElement: import("tailwind-variants").TVReturnType<{
     iconContainer: string;
     icon: string;
     label: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/nav/rail/types.d.ts

@@ -1,7 +1,6 @@
 import type { IconProps } from '../../../utils/index.js';
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { NavBarProps } from '../navbar/types.js';
 import type { RailItemVariants, RailVariants } from './theme.js';
 /**
  * Props for the RailItem component.
@@ -36,8 +35,6 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     expandable?: boolean;
     /** An optional Floating Action Button snippet. */
     fab?: Snippet;
-    /** An optional snippet rendered at the bottom of the rail (e.g. avatar/settings). */
-    railFooter?: Snippet;
     /** Whether the rail is currently collapsed. */
     collapsed?: boolean;
     /** Where the rail should be anchored. */
@@ -46,6 +43,4 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     railTop?: number;
     /** Render a bottom navbar on mobile. */
     withNavbar?: boolean;
-    /** Customise the navbar inside the rail */
-    navbarProps?: Omit<NavBarProps, 'children'>;
 };

package/dist/components/nav/tabs/TabHolder.svelte

@@ -20,12 +20,13 @@ Use TabContent for content-panel tabs; omit it for navigation (href) tabs.
     onValueChange,
     activationMode = 'automatic',
     variant = 'primary',
+    rounded = false,
     children
   }: TabHolderProps & { children?: Snippet } = $props();
 
   const idx = $derived(items.findIndex((i) => i.value === value));
   const count = $derived(items.length);
-  const { base, bar } = tabHolder();
+  const { base, bar } = $derived(tabHolder({ rounded }));
 </script>
 
 <Tabs.Root bind:value {onValueChange} {activationMode}>

package/dist/components/nav/tabs/theme.d.ts

@@ -2,36 +2,36 @@ import { type VariantProps } from 'tailwind-variants';
 export type TabVariants = VariantProps<typeof tab>;
 export type TabHolderVariants = VariantProps<typeof tabHolder>;
 export declare const tabHolder: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
+    rounded: {
+        true: {
+            base: string;
         };
+        false: {};
     };
-} | {}, {
+}, {
     base: string;
     bar: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            base?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
+    rounded: {
+        true: {
+            base: string;
         };
+        false: {};
     };
-} | {}, {
+}, {
     base: string;
     bar: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<{
+    rounded: {
+        true: {
+            base: string;
+        };
+        false: {};
+    };
+}, {
     base: string;
     bar: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export declare const tab: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: {
@@ -70,7 +70,7 @@ export declare const tab: import("tailwind-variants").TVReturnType<{
     base: string;
     label: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         primary: {
             base: string;
@@ -89,4 +89,4 @@ export declare const tab: import("tailwind-variants").TVReturnType<{
     base: string;
     label: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/nav/tabs/theme.js

@@ -3,6 +3,12 @@ export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',
         bar: 'absolute bottom-0 h-[3px] rounded-t-full bg-md-sys-color-primary transition-transform duration-200 ease-out'
+    },
+    variants: {
+        rounded: {
+            true: { base: 'rounded-t-md' },
+            false: {}
+        }
     }
 });
 export const tab = tv({

package/dist/components/nav/tabs/types.d.ts

@@ -1,5 +1,5 @@
 import type { IconProps } from '../../../utils/index.js';
-import type { TabVariants } from './theme.js';
+import type { TabHolderVariants, TabVariants } from './theme.js';
 export type TabProps = {
     /** Props for the Icon component. Omit for secondary tabs. */
     iconProps?: IconProps;
@@ -30,7 +30,7 @@ export type TabHolderProps = {
     variant?: TabVariants['variant'];
     /** Tab items to render. */
     items: TabProps[];
-};
+} & TabHolderVariants;
 export type TabContentProps = {
     /** Must match the value of the corresponding Tab. */
     value: string;

package/dist/components/pill/theme.d.ts

@@ -2,44 +2,44 @@ import { type VariantProps } from 'tailwind-variants';
 export type PillVariants = VariantProps<typeof pill>;
 export declare const pill: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
 }, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", {
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        error: string;
-        container: string;
-        'primary-container': string;
-        'secondary-container': string;
-        'tertiary-container': string;
-        'error-container': string;
-        yellow: string;
-        green: string;
+        primary: "md-component-button-filled-primary";
+        secondary: "md-component-button-filled-secondary";
+        tertiary: "md-component-button-filled-tertiary";
+        error: "md-component-button-filled-error";
+        container: "bg-md-sys-color-surface-container text-md-sys-color-on-surface";
+        'primary-container': "bg-md-sys-color-primary-container text-md-sys-color-on-primary-container";
+        'secondary-container': "bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container";
+        'tertiary-container': "bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container";
+        'error-container': "bg-md-sys-color-error-container text-md-sys-color-on-error-container";
+        yellow: "bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950";
+        green: "bg-green-600 text-white dark:bg-green-500 dark:text-green-950";
     };
-}, undefined, "relative inline-flex items-center justify-center px-4 py-1.5 md-sys-typescale-label-large select-none rounded-full", unknown, unknown, undefined>>;
+}, undefined>>;

package/dist/components/snackbar/theme.d.ts

@@ -2,8 +2,8 @@ import { type VariantProps } from 'tailwind-variants';
 export type SnackBarVariants = VariantProps<typeof snackbar>;
 export declare const snackbar: import("tailwind-variants").TVReturnType<{
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -13,8 +13,8 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     icon: string;
 }, undefined, {
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -22,10 +22,10 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     actionWrapper: string;
     supportingText: string;
     icon: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     fixed: {
-        true: string;
-        false: string;
+        true: "fixed bottom-20 md:bottom-6 left-1/2 -translate-x-1/2";
+        false: "";
     };
 }, {
     base: string;
@@ -33,4 +33,4 @@ export declare const snackbar: import("tailwind-variants").TVReturnType<{
     actionWrapper: string;
     supportingText: string;
     icon: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;

package/dist/components/table/Table.stories.svelte

@@ -0,0 +1,267 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Table from './Table.svelte';
+  import TableHead from './TableHead.svelte';
+  import TableBody from './TableBody.svelte';
+  import TableFoot from './TableFoot.svelte';
+  import TableRow from './TableRow.svelte';
+  import TableHeader from './TableHeader.svelte';
+  import TableCell from './TableCell.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Table/Table',
+    component: Table,
+    argTypes: {
+      rounded: { control: 'boolean' }
+    },
+    args: {
+      rounded: false
+    }
+  });
+
+  const rows = [
+    { name: 'Frozen yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
+    { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 },
+    { name: 'Eclair', calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
+    { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3 },
+    { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9 }
+  ];
+</script>
+
+<Story name="Playground">
+  {#snippet template(args)}
+    <Table rounded={args.rounded}>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Dessert</TableHeader>
+          <TableHeader numeric>Calories</TableHeader>
+          <TableHeader numeric>Fat (g)</TableHeader>
+          <TableHeader numeric>Carbs (g)</TableHeader>
+          <TableHeader numeric>Protein (g)</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each rows as row (row.name)}
+          <TableRow hoverable>
+            <TableCell>{row.name}</TableCell>
+            <TableCell numeric>{row.calories}</TableCell>
+            <TableCell numeric>{row.fat}</TableCell>
+            <TableCell numeric>{row.carbs}</TableCell>
+            <TableCell numeric>{row.protein}</TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  {/snippet}
+</Story>
+
+<Story name="Rounded" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Sortable Header" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader sortable sorted sortDirection="asc">Dessert</TableHeader>
+        <TableHeader numeric sortable sortDirection="desc">Calories</TableHeader>
+        <TableHeader numeric sortable>Fat (g)</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow hoverable>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+          <TableCell numeric>{row.fat}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Selected Row" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row, i (row.name)}
+        <TableRow hoverable selected={i === 1}>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="With Footer" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      {#each rows as row (row.name)}
+        <TableRow>
+          <TableCell>{row.name}</TableCell>
+          <TableCell numeric>{row.calories}</TableCell>
+        </TableRow>
+      {/each}
+    </TableBody>
+    <TableFoot>
+      <TableRow>
+        <TableCell>Total</TableCell>
+        <TableCell numeric>{rows.reduce((sum, r) => sum + r.calories, 0)}</TableCell>
+      </TableRow>
+    </TableFoot>
+  </Table>
+</Story>
+
+<Story name="Sticky Header (Scroll Container)" asChild>
+  <div class="ring-md-sys-color-outline-variant h-64 w-full overflow-auto rounded-md ring-1">
+    <Table>
+      <TableHead sticky>
+        <TableRow>
+          <TableHeader>Dessert</TableHeader>
+          <TableHeader numeric>Calories</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each Array(30) as _, i (i)}
+          <TableRow hoverable>
+            <TableCell>Row {i + 1}</TableCell>
+            <TableCell numeric>{100 + i}</TableCell>
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Long Cell Content" asChild>
+  <div class="w-[420px]">
+    <Table rounded>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Name</TableHeader>
+          <TableHeader>Description</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>Item</TableCell>
+          <TableCell
+            >This is an unusually long piece of supporting text that will wrap across multiple lines
+            inside a fixed-width table cell to check padding, line-height, and vertical alignment
+            under wrapping conditions.</TableCell
+          >
+        </TableRow>
+        <TableRow>
+          <TableCell
+            >SupercalifragilisticexpialidociousItemNameWithNoSpacesWhatsoeverToTestOverflow</TableCell
+          >
+          <TableCell>Short</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Many Columns (Horizontal Scroll)" asChild>
+  <div class="w-full max-w-[600px] overflow-x-auto">
+    <Table rounded>
+      <TableHead>
+        <TableRow>
+          {#each Array(12) as _, i (i)}
+            <TableHeader numeric>Col {i + 1}</TableHeader>
+          {/each}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {#each Array(3) as _, r (r)}
+          <TableRow>
+            {#each Array(12) as _, c (c)}
+              <TableCell numeric>{r * 12 + c}</TableCell>
+            {/each}
+          </TableRow>
+        {/each}
+      </TableBody>
+    </Table>
+  </div>
+</Story>
+
+<Story name="Extreme: Single Row" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>Frozen yogurt</TableCell>
+        <TableCell numeric>159</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Extreme: Empty State" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader>Dessert</TableHeader>
+        <TableHeader numeric>Calories</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell class="text-md-sys-color-on-surface-variant text-center" colspan={2}
+          >No results found</TableCell
+        >
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>
+
+<Story name="Mixed Alignment" asChild>
+  <Table rounded>
+    <TableHead>
+      <TableRow>
+        <TableHeader align="left">Left</TableHeader>
+        <TableHeader align="center">Center</TableHeader>
+        <TableHeader align="right">Right</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell align="left">L</TableCell>
+        <TableCell align="center">C</TableCell>
+        <TableCell align="right">R</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</Story>

package/dist/components/table/Table.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Table from './Table.svelte';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Table: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Table = InstanceType<typeof Table>;
+export default Table;