negodesign 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv@0.16.5 create --template minimal --types ts --add eslint vitest="usages:unit,component" tailwindcss="plugins:typography,forms" --install npm negodesign
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

package/dist/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/dist/components/button.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+	import type { MouseEventHandler } from 'svelte/elements';
+
+	export type ButtonProps = ButtonPrimitiveProps & {
+		loading?: boolean;
+		onClickPromise?: (
+			e:
+				| Parameters<MouseEventHandler<HTMLButtonElement>>[0]
+				| Parameters<MouseEventHandler<HTMLAnchorElement>>[0]
+		) => Promise<void>;
+	};
+
+	export type Size = 'default' | 'xs' | 'sm' | 'lg';
+
+	/**
+	 * Map sizes to their icon/normal size variant
+	 */
+	export const sizeMap = {
+		default: {
+			icon: 'icon',
+			normal: 'default'
+		},
+		xs: {
+			icon: 'icon-xs',
+			normal: 'xs'
+		},
+		sm: {
+			icon: 'icon-sm',
+			normal: 'sm'
+		},
+		lg: {
+			icon: 'icon-lg',
+			normal: 'lg'
+		}
+	} as const;
+
+	export { type ButtonSize, type ButtonVariant } from './ui/button';
+</script>
+
+<script lang="ts">
+	import { Button, type ButtonProps as ButtonPrimitiveProps } from './ui/button';
+	import { Spinner } from './ui/spinner';
+	import { cn } from '../utils.js';
+
+	let {
+		ref = $bindable(null),
+		loading: loadingProp = false,
+		onClickPromise,
+		onclick,
+		disabled,
+		class: className,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+
+	let pending = $state(false);
+
+	const loading = $derived(loadingProp || pending);
+</script>
+
+<Button
+	bind:ref
+	class={cn(loading && '[&_svg:not([data-loading-icon])]:hidden', className)}
+	disabled={loading || disabled}
+	onclick={async (e) => {
+		onclick?.(e as never);
+
+		if (onClickPromise) {
+			pending = true;
+			try {
+				await onClickPromise(e);
+			} finally {
+				pending = false;
+			}
+		}
+	}}
+	{...restProps}
+>
+	{#if loading}
+		<Spinner data-icon="inline-start" data-loading-icon />
+	{/if}
+	{@render children?.()}
+</Button>

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

@@ -0,0 +1,32 @@
+import type { MouseEventHandler } from 'svelte/elements';
+export type ButtonProps = ButtonPrimitiveProps & {
+    loading?: boolean;
+    onClickPromise?: (e: Parameters<MouseEventHandler<HTMLButtonElement>>[0] | Parameters<MouseEventHandler<HTMLAnchorElement>>[0]) => Promise<void>;
+};
+export type Size = 'default' | 'xs' | 'sm' | 'lg';
+/**
+ * Map sizes to their icon/normal size variant
+ */
+export declare const sizeMap: {
+    readonly default: {
+        readonly icon: "icon";
+        readonly normal: "default";
+    };
+    readonly xs: {
+        readonly icon: "icon-xs";
+        readonly normal: "xs";
+    };
+    readonly sm: {
+        readonly icon: "icon-sm";
+        readonly normal: "sm";
+    };
+    readonly lg: {
+        readonly icon: "icon-lg";
+        readonly normal: "lg";
+    };
+};
+export { type ButtonSize, type ButtonVariant } from './ui/button';
+import { Button, type ButtonProps as ButtonPrimitiveProps } from './ui/button';
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/core/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import * as Breadcrumb from "../../ui/breadcrumb/index.js";
+
+  type Props = {
+    items: {
+      url?: string;
+      label: string;
+    }[];
+  };
+
+  let { items }: Props = $props();
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    {#each items as item, i (item.label)}
+      {@const isLast = i === items.length - 1}
+
+      <Breadcrumb.Item class={isLast ? "" : "hidden md:block"}>
+        {#if isLast}
+          <Breadcrumb.Page>{item.label}</Breadcrumb.Page>
+        {:else}
+          <Breadcrumb.Link href={item.url ?? "##"}>{item.label}</Breadcrumb.Link>
+        {/if}
+      </Breadcrumb.Item>
+
+      {#if !isLast}
+        <Breadcrumb.Separator class="hidden md:block" />
+      {/if}
+    {/each}
+  </Breadcrumb.List>
+</Breadcrumb.Root>

package/dist/components/core/breadcrumb/breadcrumb-list.svelte.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    items: {
+        url?: string;
+        label: string;
+    }[];
+};
+declare const BreadcrumbList: import("svelte").Component<Props, {}, "">;
+type BreadcrumbList = ReturnType<typeof BreadcrumbList>;
+export default BreadcrumbList;

package/dist/components/core/button/ButtonBack.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import Button from "../../ui/button/button.svelte";
+  import { ArrowLeft01Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import type { ButtonProps } from "../../ui/button";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button
+  variant="outline"
+  class="inline-flex items-center gap-1 text-sm text-slate-600 hover:text-slate-900 transition-colors rounded-full bg-input"
+  {...restProps}
+>
+  <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
+  <span class="sr-only">{$t("button.back")}</span>
+</Button>

package/dist/components/core/button/ButtonBack.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ButtonProps } from "../../ui/button";
+declare const ButtonBack: import("svelte").Component<ButtonProps, {}, "">;
+type ButtonBack = ReturnType<typeof ButtonBack>;
+export default ButtonBack;

package/dist/components/core/button/ButtonLogin.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { t } from "../../../i18n";
+  import { Login02Icon } from "@hugeicons/core-free-icons";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+
+  let { ...restProps }: ButtonProps = $props();
+</script>
+
+<Button class="w-full flex items-center gap-2" {...restProps}>
+  <HugeiconsIcon icon={Login02Icon} size={16} />
+  {$t("button.login")}
+</Button>

package/dist/components/core/button/ButtonLogin.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from "../../ui/button/button.svelte";
+declare const ButtonLogin: import("svelte").Component<ButtonProps, {}, "">;
+type ButtonLogin = ReturnType<typeof ButtonLogin>;
+export default ButtonLogin;

package/dist/components/core/button/ButtonLoginWith.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import Button, {
+    type ButtonProps,
+  } from "../../ui/button/button.svelte";
+  import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/svelte";
+  import { t } from "../../../i18n";
+  import {
+    GoogleIcon,
+    Facebook01Icon as Facebook,
+    Linkedin01Icon as Linkedin,
+  } from "@hugeicons/core-free-icons";
+  import type { Snippet } from "svelte";
+
+  type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
+
+  type Props = {
+    icon?: IconSvgElement | IconDefault | Snippet;
+    label?: string;
+  };
+
+  let { icon, label, ...restProps }: Props & ButtonProps = $props();
+
+  const defaultIconMap: Record<IconDefault, IconSvgElement> = {
+    GOOGLE: GoogleIcon,
+    FACEBOOK: Facebook,
+    LINKEDLN: Linkedin,
+  };
+
+  const defaultLabelMap: Record<IconDefault, string> = {
+    GOOGLE: "Google",
+    FACEBOOK: "Facebook",
+    LINKEDLN: "Linkedin",
+  };
+
+  function isIconDefault(value: unknown): value is IconDefault {
+    return typeof value === "string" && value in defaultLabelMap;
+  }
+
+  let resolvedIcon = $derived(
+    isIconDefault(icon) ? defaultIconMap[icon] : icon,
+  );
+
+  let resolvedLabel = $derived(
+    label ?? (isIconDefault(icon) ? defaultLabelMap[icon] : ""),
+  );
+</script>
+
+<Button variant="outline" class="w-full flex items-center gap-2" {...restProps}>
+  {#if resolvedIcon}
+    {#if typeof resolvedIcon === "function"}
+      {@render resolvedIcon()}
+    {:else}
+      <HugeiconsIcon icon={resolvedIcon} size={16} />
+    {/if}
+  {/if}
+  {$t("button.login.with", { name: resolvedLabel })}
+</Button>

package/dist/components/core/button/ButtonLoginWith.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type ButtonProps } from "../../ui/button/button.svelte";
+import { type IconSvgElement } from "@hugeicons/svelte";
+import type { Snippet } from "svelte";
+type IconDefault = "GOOGLE" | "FACEBOOK" | "LINKEDLN";
+type Props = {
+    icon?: IconSvgElement | IconDefault | Snippet;
+    label?: string;
+};
+type $$ComponentProps = Props & ButtonProps;
+declare const ButtonLoginWith: import("svelte").Component<$$ComponentProps, {}, "">;
+type ButtonLoginWith = ReturnType<typeof ButtonLoginWith>;
+export default ButtonLoginWith;

package/dist/components/core/carousel/data/CarouselModel.d.ts

@@ -0,0 +1,10 @@
+export interface CarouselItem {
+    title: string;
+    description: string;
+    buttonText: string;
+    buttonUrl?: string;
+}
+export interface CarouselProps {
+    items: CarouselItem[];
+    varient: 'NUMBER' | 'POINTER';
+}

package/dist/components/core/carousel/data/CarouselModel.js

@@ -0,0 +1 @@
+export {};

package/dist/components/core/datatable/data/columns-create.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnDef } from "@tanstack/table-core";
+export declare function createDragColumn<T>(): ColumnDef<T>;
+export declare function createSelectColumn<T>(): ColumnDef<T>;

package/dist/components/core/datatable/data/columns-create.js

@@ -0,0 +1,35 @@
+import { renderComponent } from "../../../ui/data-table";
+import DataTableDragHandle from "../ui/DataTableDragHandle.svelte";
+import DataTableCheckbox from "../ui/DataTableCheckbox.svelte";
+export function createDragColumn() {
+    return {
+        id: "drag",
+        size: 24,
+        minSize: 24,
+        header: () => null,
+        cell: () => renderComponent(DataTableDragHandle, {}),
+        enableSorting: false,
+        enableHiding: false,
+    };
+}
+export function createSelectColumn() {
+    return {
+        id: "select",
+        size: 24,
+        minSize: 24,
+        header: ({ table }) => renderComponent(DataTableCheckbox, {
+            checked: table.getIsAllPageRowsSelected(),
+            indeterminate: table.getIsSomePageRowsSelected() &&
+                !table.getIsAllPageRowsSelected(),
+            onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+            "aria-label": "Select all",
+        }),
+        cell: ({ row }) => renderComponent(DataTableCheckbox, {
+            checked: row.getIsSelected(),
+            onCheckedChange: (value) => row.toggleSelected(!!value),
+            "aria-label": "Select row",
+        }),
+        enableSorting: false,
+        enableHiding: false,
+    };
+}

package/dist/components/core/datatable/data/data-table.d.ts

@@ -0,0 +1,19 @@
+import type { CellContext, HeaderContext } from "@tanstack/table-core";
+import type { Component } from "svelte";
+export interface DataTableItem<T = unknown> {
+    config: {
+        accessorKey: string;
+        header: string | ((context: HeaderContext<T, unknown>) => any);
+        cell: string | ((context: CellContext<T, unknown>) => any);
+        enableSorting?: boolean;
+        enableHiding?: boolean;
+        badge?: {
+            className?: string;
+            value: string;
+            label?: string;
+        }[];
+    }[];
+    columnFilter?: keyof T & string;
+    actions?: Component<any>;
+    items?: T[];
+}

package/dist/components/core/datatable/data/data-table.js

@@ -0,0 +1 @@
+export {};

package/dist/components/core/datatable/data/resolve-cell-badge.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CellContext } from "@tanstack/table-core";
+type BadgeConfig = {
+    className?: string;
+    value: string;
+    label?: string;
+};
+export declare function resolveCellBadge<T>(configCell: string | ((context: CellContext<T, unknown>) => any), badge?: BadgeConfig[]): (context: CellContext<T, unknown>) => any;
+export {};

package/dist/components/core/datatable/data/resolve-cell-badge.svelte.js

@@ -0,0 +1,32 @@
+import { renderComponent, renderSnippet } from "../../../ui/data-table";
+import { createRawSnippet } from "svelte";
+import { Badge } from "../../../ui/badge";
+import { resolveCell } from "./resolve-cell.svelte";
+export function resolveCellBadge(configCell, badge) {
+    if (typeof configCell === "string" && badge && badge.length > 0) {
+        const key = configCell;
+        const badgeMap = new Map(badge.map((b) => [b.value, b]));
+        return ({ row }) => {
+            const cellValue = String(row.original[key]);
+            const matchedBadge = badgeMap.get(cellValue);
+            if (matchedBadge) {
+                const displayText = matchedBadge.label ?? cellValue;
+                const badgeSnippet = createRawSnippet(() => ({
+                    render: () => displayText,
+                }));
+                return renderComponent(Badge, {
+                    class: matchedBadge.className,
+                    children: badgeSnippet,
+                });
+            }
+            const fallbackSnippet = createRawSnippet((getProps) => {
+                const { value } = getProps();
+                return {
+                    render: () => `<div class="capitalize">${value}</div>`,
+                };
+            });
+            return renderSnippet(fallbackSnippet, { value: cellValue });
+        };
+    }
+    return resolveCell(configCell);
+}

package/dist/components/core/datatable/data/resolve-cell.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { CellContext } from "@tanstack/table-core";
+export declare function resolveCell<T>(configCell: string | ((context: CellContext<T, unknown>) => any)): (context: CellContext<T, unknown>) => any;

package/dist/components/core/datatable/data/resolve-cell.svelte.js

@@ -0,0 +1,19 @@
+import { createRawSnippet } from "svelte";
+import { renderSnippet } from "../../../ui/data-table";
+export function resolveCell(configCell) {
+    if (typeof configCell === "string") {
+        const key = configCell;
+        return ({ row }) => {
+            const snippet = createRawSnippet((getProps) => {
+                const { value } = getProps();
+                return {
+                    render: () => `<div class="capitalize">${value}</div>`,
+                };
+            });
+            return renderSnippet(snippet, {
+                value: String(row.original[key]),
+            });
+        };
+    }
+    return configCell;
+}

package/dist/components/core/datatable/data/resolve-header.svelte.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderContext } from "@tanstack/table-core";
+export declare function resolveHeader<T>(configHeader: string | ((context: HeaderContext<T, unknown>) => any)): (context: HeaderContext<T, unknown>) => any;

package/dist/components/core/datatable/data/resolve-header.svelte.js

@@ -0,0 +1,17 @@
+import { createRawSnippet } from "svelte";
+import { renderSnippet } from "../../../ui/data-table";
+export function resolveHeader(configHeader) {
+    if (typeof configHeader === "string") {
+        const text = configHeader;
+        return ({ column }) => {
+            const snippet = createRawSnippet((getProps) => {
+                const { text } = getProps();
+                return {
+                    render: () => `<div class="capitalize">${text}</div>`,
+                };
+            });
+            return renderSnippet(snippet, { text });
+        };
+    }
+    return configHeader;
+}

package/dist/components/core/datatable/ui/DataTableActions.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" generics="T">
+    import type { CellContext } from "@tanstack/table-core";
+    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+    import Button from "../../../button.svelte";
+    import { MoreHorizontalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+
+    let { row }: CellContext<T, unknown> = $props();
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" class="size-8 p-0">
+                <HugeiconsIcon icon={MoreHorizontalIcon} class="size-4" />
+                <span class="sr-only">Open menu</span>
+            </Button>
+        {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end">
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Copy</DropdownMenu.Item
+        >
+        <DropdownMenu.Item onclick={() => console.log(row.original)}
+            >Delete</DropdownMenu.Item
+        >
+    </DropdownMenu.Content>
+</DropdownMenu.Root>

package/dist/components/core/datatable/ui/DataTableActions.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CellContext } from "@tanstack/table-core";
+declare function $$render<T>(): {
+    props: CellContext<T, unknown>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTableActions: $$IsomorphicComponent;
+type DataTableActions<T> = InstanceType<typeof DataTableActions<T>>;
+export default DataTableActions;

package/dist/components/core/datatable/ui/DataTableCheckbox.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { Checkbox } from "../../../ui/checkbox";
+
+    let {
+        checked = $bindable(false),
+        indeterminate = $bindable(false),
+        onCheckedChange,
+        ...restProps
+    }: {
+        checked?: boolean;
+        indeterminate?: boolean;
+        onCheckedChange?: (value: boolean) => void;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<Checkbox
+    bind:checked
+    bind:indeterminate
+    onCheckedChange={(v) => onCheckedChange?.(!!v)}
+    {...restProps}
+/>

package/dist/components/core/datatable/ui/DataTableCheckbox.svelte.d.ts

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onCheckedChange?: (value: boolean) => void;
+    [key: string]: unknown;
+};
+declare const DataTableCheckbox: import("svelte").Component<$$ComponentProps, {}, "checked" | "indeterminate">;
+type DataTableCheckbox = ReturnType<typeof DataTableCheckbox>;
+export default DataTableCheckbox;

package/dist/components/core/datatable/ui/DataTableContent.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" generics="T">
+    import type {
+        ColumnDef,
+        Table as TanstackTable,
+    } from "@tanstack/table-core";
+    import * as Table from "../../../ui/table/index.js";
+    import FlexRender from "../../../ui/data-table/flex-render.svelte";
+
+    type Props = {
+        table: TanstackTable<T>;
+        columns: ColumnDef<T>[];
+    };
+
+    let { table, columns }: Props = $props();
+</script>
+
+<div class="rounded-md border">
+    <Table.Root>
+        <Table.Header>
+            {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                <Table.Row>
+                    {#each headerGroup.headers as header (header.id)}
+                        <Table.Head class="[&:has([role=checkbox])]:ps-3">
+                            {#if !header.isPlaceholder}
+                                <FlexRender
+                                    content={header.column.columnDef.header}
+                                    context={header.getContext()}
+                                />
+                            {/if}
+                        </Table.Head>
+                    {/each}
+                </Table.Row>
+            {/each}
+        </Table.Header>
+        <Table.Body>
+            {#each table.getRowModel().rows as row (row.id)}
+                <Table.Row data-state={row.getIsSelected() && "selected"}>
+                    {#each row.getVisibleCells() as cell (cell.id)}
+                        <Table.Cell class="[&:has([role=checkbox])]:ps-3">
+                            <FlexRender
+                                content={cell.column.columnDef.cell}
+                                context={cell.getContext()}
+                            />
+                        </Table.Cell>
+                    {/each}
+                </Table.Row>
+            {:else}
+                <Table.Row>
+                    <Table.Cell
+                        colspan={columns.length}
+                        class="h-24 text-center"
+                    >
+                        No results.
+                    </Table.Cell>
+                </Table.Row>
+            {/each}
+        </Table.Body>
+    </Table.Root>
+</div>