@invopop/popui 0.0.108 → 0.1.2

package/dist/range-calendar/range-calendar-year-select.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import { cn, type WithoutChildrenOrChild } from '../utils.js'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { ChevronDown } from '@invopop/ui-icons'
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    ...restProps
+  }: WithoutChildrenOrChild<RangeCalendarPrimitive.YearSelectProps> = $props()
+</script>
+
+<span
+  class={cn(
+    'has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative flex rounded-md border',
+    className
+  )}
+>
+  <RangeCalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+    {#snippet child({ props, yearItems, selectedYearItem })}
+      <select {...props} {value}>
+        {#each yearItems as yearItem (yearItem.value)}
+          <option
+            value={yearItem.value}
+            selected={value !== undefined
+              ? yearItem.value === value
+              : yearItem.value === selectedYearItem.value}
+          >
+            {yearItem.label}
+          </option>
+        {/each}
+      </select>
+      <span
+        class="[&>svg]:text-muted-foreground flex h-8 select-none items-center gap-1 rounded-md pl-2 pr-1 text-sm font-medium [&>svg]:size-3.5"
+        aria-hidden="true"
+      >
+        {yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+        <Icon src={ChevronDown} class="size-4" />
+      </span>
+    {/snippet}
+  </RangeCalendarPrimitive.YearSelect>
+</span>

package/dist/range-calendar/range-calendar-year-select.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+declare const RangeCalendarYearSelect: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.YearSelectProps, "child">, "children">, {}, "ref">;
+type RangeCalendarYearSelect = ReturnType<typeof RangeCalendarYearSelect>;
+export default RangeCalendarYearSelect;

package/dist/range-calendar/range-calendar.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui'
+  import * as RangeCalendar from './index.js'
+  import { cn, type WithoutChildrenOrChild } from '../utils.js'
+  import type { ButtonVariant } from '../button/index'
+  import type { Snippet } from 'svelte'
+  import { isEqualMonth, type DateValue } from '@internationalized/date'
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    placeholder = $bindable(),
+    weekdayFormat = 'short',
+    class: className,
+    buttonVariant = 'outline',
+    captionLayout = 'label',
+    locale = 'en-US',
+    months: monthsProp,
+    years,
+    monthFormat: monthFormatProp,
+    yearFormat = 'numeric',
+    day,
+    disableDaysOutsideMonth = false,
+    ...restProps
+  }: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label'
+    months?: RangeCalendarPrimitive.MonthSelectProps['months']
+    years?: RangeCalendarPrimitive.YearSelectProps['years']
+    monthFormat?: RangeCalendarPrimitive.MonthSelectProps['monthFormat']
+    yearFormat?: RangeCalendarPrimitive.YearSelectProps['yearFormat']
+    day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>
+  } = $props()
+  const monthFormat = $derived.by(() => {
+    if (monthFormatProp) return monthFormatProp
+    if (captionLayout.startsWith('dropdown')) return 'short'
+    return 'long'
+  })
+</script>
+
+<RangeCalendarPrimitive.Root
+  bind:ref
+  bind:value
+  bind:placeholder
+  {weekdayFormat}
+  {disableDaysOutsideMonth}
+  class={cn(
+    'bg-white group/calendar px-3 pb-3 pt-2 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+    className
+  )}
+  {locale}
+  {monthFormat}
+  {yearFormat}
+  {...restProps}
+>
+  {#snippet children({ months, weekdays })}
+    <RangeCalendar.Months>
+      <RangeCalendar.Nav>
+        <RangeCalendar.PrevButton variant={buttonVariant} />
+        <RangeCalendar.NextButton variant={buttonVariant} />
+      </RangeCalendar.Nav>
+      {#each months as month, monthIndex (month)}
+        <RangeCalendar.Month>
+          <RangeCalendar.Header>
+            <RangeCalendar.Caption
+              {captionLayout}
+              months={monthsProp}
+              {monthFormat}
+              {years}
+              {yearFormat}
+              month={month.value}
+              bind:placeholder
+              {locale}
+              {monthIndex}
+            />
+          </RangeCalendar.Header>
+          <RangeCalendar.Grid>
+            <RangeCalendar.GridHead>
+              <RangeCalendar.GridRow class="select-none">
+                {#each weekdays as weekday (weekday)}
+                  <RangeCalendar.HeadCell>
+                    {weekday.slice(0, 2)}
+                  </RangeCalendar.HeadCell>
+                {/each}
+              </RangeCalendar.GridRow>
+            </RangeCalendar.GridHead>
+            <RangeCalendar.GridBody>
+              {#each month.weeks as weekDates (weekDates)}
+                <RangeCalendar.GridRow class="mt-2 w-full">
+                  {#each weekDates as date (date)}
+                    <RangeCalendar.Cell {date} month={month.value}>
+                      {#if day}
+                        {@render day({
+                          day: date,
+                          outsideMonth: !isEqualMonth(date, month.value)
+                        })}
+                      {:else}
+                        <RangeCalendar.Day />
+                      {/if}
+                    </RangeCalendar.Cell>
+                  {/each}
+                </RangeCalendar.GridRow>
+              {/each}
+            </RangeCalendar.GridBody>
+          </RangeCalendar.Grid>
+        </RangeCalendar.Month>
+      {/each}
+    </RangeCalendar.Months>
+  {/snippet}
+</RangeCalendarPrimitive.Root>

package/dist/range-calendar/range-calendar.svelte.d.ts

@@ -0,0 +1,21 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import * as RangeCalendar from './index.js';
+import { type WithoutChildrenOrChild } from '../utils.js';
+import type { ButtonVariant } from '../button/index';
+import type { Snippet } from 'svelte';
+import { type DateValue } from '@internationalized/date';
+type $$ComponentProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    months?: RangeCalendarPrimitive.MonthSelectProps['months'];
+    years?: RangeCalendarPrimitive.YearSelectProps['years'];
+    monthFormat?: RangeCalendarPrimitive.MonthSelectProps['monthFormat'];
+    yearFormat?: RangeCalendarPrimitive.YearSelectProps['yearFormat'];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/svg/BgPattern.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  BgPatternProps */
-/** @typedef {typeof __propDef.events}  BgPatternEvents */
-/** @typedef {typeof __propDef.slots}  BgPatternSlots */
-export default class BgPattern extends SvelteComponent<{
+export default BgPattern;
+type BgPattern = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type BgPatternProps = typeof __propDef.props;
-export type BgPatternEvents = typeof __propDef.events;
-export type BgPatternSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const BgPattern: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svg/IconContact.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 117" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconContact.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconContactProps = typeof __propDef.props;
-export type IconContactEvents = typeof __propDef.events;
-export type IconContactSlots = typeof __propDef.slots;
-export default class IconContact extends SvelteComponent<IconContactProps, IconContactEvents, IconContactSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconContact: import("svelte").Component<Props, {}, "">;
+type IconContact = ReturnType<typeof IconContact>;
+export default IconContact;

package/dist/svg/IconEmpty.svelte.d.ts

@@ -1,23 +1,26 @@
-/** @typedef {typeof __propDef.props}  IconEmptyProps */
-/** @typedef {typeof __propDef.events}  IconEmptyEvents */
-/** @typedef {typeof __propDef.slots}  IconEmptySlots */
-export default class IconEmpty extends SvelteComponent<{
+export default IconEmpty;
+type IconEmpty = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IconEmptyProps = typeof __propDef.props;
-export type IconEmptyEvents = typeof __propDef.events;
-export type IconEmptySlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const IconEmpty: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svg/IconFile.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 118" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconFile.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconFileProps = typeof __propDef.props;
-export type IconFileEvents = typeof __propDef.events;
-export type IconFileSlots = typeof __propDef.slots;
-export default class IconFile extends SvelteComponent<IconFileProps, IconFileEvents, IconFileSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconFile: import("svelte").Component<Props, {}, "">;
+type IconFile = ReturnType<typeof IconFile>;
+export default IconFile;

package/dist/svg/IconInvoice.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 117" fill="white" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconInvoice.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconInvoiceProps = typeof __propDef.props;
-export type IconInvoiceEvents = typeof __propDef.events;
-export type IconInvoiceSlots = typeof __propDef.slots;
-export default class IconInvoice extends SvelteComponent<IconInvoiceProps, IconInvoiceEvents, IconInvoiceSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconInvoice: import("svelte").Component<Props, {}, "">;
+type IconInvoice = ReturnType<typeof IconInvoice>;
+export default IconInvoice;

package/dist/svg/IconNoResults.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 117" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconNoResults.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconNoResultsProps = typeof __propDef.props;
-export type IconNoResultsEvents = typeof __propDef.events;
-export type IconNoResultsSlots = typeof __propDef.slots;
-export default class IconNoResults extends SvelteComponent<IconNoResultsProps, IconNoResultsEvents, IconNoResultsSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconNoResults: import("svelte").Component<Props, {}, "">;
+type IconNoResults = ReturnType<typeof IconNoResults>;
+export default IconNoResults;

package/dist/svg/IconPdf.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 118" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconPdf.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconPdfProps = typeof __propDef.props;
-export type IconPdfEvents = typeof __propDef.events;
-export type IconPdfSlots = typeof __propDef.slots;
-export default class IconPdf extends SvelteComponent<IconPdfProps, IconPdfEvents, IconPdfSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconPdf: import("svelte").Component<Props, {}, "">;
+type IconPdf = ReturnType<typeof IconPdf>;
+export default IconPdf;

package/dist/svg/IconProduct.svelte

@@ -1,4 +1,9 @@
-<script>export let classes = "";
+<script lang="ts">
+  interface Props {
+    classes?: string;
+  }
+
+  let { classes = '' }: Props = $props();
 </script>
 
 <svg class={classes} viewBox="0 0 97 117" fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/svg/IconProduct.svelte.d.ts

@@ -1,16 +1,6 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        classes?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type IconProductProps = typeof __propDef.props;
-export type IconProductEvents = typeof __propDef.events;
-export type IconProductSlots = typeof __propDef.slots;
-export default class IconProduct extends SvelteComponent<IconProductProps, IconProductEvents, IconProductSlots> {
+interface Props {
+    classes?: string;
 }
-export {};
+declare const IconProduct: import("svelte").Component<Props, {}, "">;
+type IconProduct = ReturnType<typeof IconProduct>;
+export default IconProduct;

package/dist/table/table-body.svelte

@@ -1,8 +1,13 @@
-<script>import { cn } from "../utils";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tbody class={cn('[&_tr:hover]:bg-neutral-50', className)} {...$$restProps}>
-  <slot />
+<tbody bind:this={ref} data-slot="table-body" class={cn('[&_tr:hover]:bg-neutral-50', className)}>
+  {@render children?.()}
 </tbody>

package/dist/table/table-body.svelte.d.ts

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLTableSectionElement>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableBodyProps = typeof __propDef.props;
-export type TableBodyEvents = typeof __propDef.events;
-export type TableBodySlots = typeof __propDef.slots;
-export default class TableBody extends SvelteComponent<TableBodyProps, TableBodyEvents, TableBodySlots> {
-}
-export {};
+declare const TableBody: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLTableSectionElement>>, {}, "ref">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/table/table-caption.svelte

@@ -1,8 +1,17 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
 </script>
 
-<caption class={cn('text-muted-foreground mt-4 text-sm', className)} {...$$restProps}>
-  <slot />
+<caption
+  bind:this={ref}
+  data-slot="table-caption"
+  class={cn('text-muted-foreground mt-4 text-sm', className)}
+>
+  {@render children?.()}
 </caption>

package/dist/table/table-caption.svelte.d.ts

@@ -1,17 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 import type { HTMLAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLAttributes<HTMLTableCaptionElement>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableCaptionProps = typeof __propDef.props;
-export type TableCaptionEvents = typeof __propDef.events;
-export type TableCaptionSlots = typeof __propDef.slots;
-export default class TableCaption extends SvelteComponent<TableCaptionProps, TableCaptionEvents, TableCaptionSlots> {
-}
-export {};
+declare const TableCaption: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

package/dist/table/table-cell.svelte

@@ -1,16 +1,25 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { createBubbler } from 'svelte/legacy'
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLTdAttributes } from 'svelte/elements'
+
+  const bubble = createBubbler()
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLTdAttributes> = $props()
 </script>
 
 <td
+  bind:this={ref}
+  data-slot="table-cell"
   class={cn(
     'py-3 pl-3 pr-3 align-middle text-neutral-500 font-normal text-base [&:has([role=checkbox])]:pr-2 [&:has([role=menu])]:pl-1 relative',
     className
   )}
-  {...$$restProps}
-  on:click
-  on:keydown
+  onclick={bubble('click')}
+  onkeydown={bubble('keydown')}
 >
-  <slot />
+  {@render children?.()}
 </td>

package/dist/table/table-cell.svelte.d.ts

@@ -1,20 +1,5 @@
-import { SvelteComponent } from "svelte";
+import { type WithElementRef } from '../utils.js';
 import type { HTMLTdAttributes } from 'svelte/elements';
-declare const __propDef: {
-    props: HTMLTdAttributes;
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type TableCellProps = typeof __propDef.props;
-export type TableCellEvents = typeof __propDef.events;
-export type TableCellSlots = typeof __propDef.slots;
-export default class TableCell extends SvelteComponent<TableCellProps, TableCellEvents, TableCellSlots> {
-}
-export {};
+declare const TableCell: import("svelte").Component<WithElementRef<HTMLTdAttributes>, {}, "ref">;
+type TableCell = ReturnType<typeof TableCell>;
+export default TableCell;

package/dist/table/table-footer.svelte

@@ -1,8 +1,17 @@
-<script>import { cn } from "../utils.js";
-let className = void 0;
-export { className as class };
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+  let {
+    ref = $bindable(null),
+    class: className,
+    children
+  }: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props()
 </script>
 
-<tfoot class={cn('bg-muted/50 text-primary-foreground font-medium', className)} {...$$restProps}>
-  <slot />
+<tfoot
+  bind:this={ref}
+  data-slot="table-footer"
+  class={cn('bg-muted/50 text-primary-foreground font-medium', className)}
+>
+  {@render children?.()}
 </tfoot>