@tanglemedia/svelte-starter-ui-shadcn 0.0.1

package/package.json

@@ -0,0 +1,360 @@
+{
+  "name": "@tanglemedia/svelte-starter-ui-shadcn",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "description": "UI features and components for use in svelte websites",
+  "type": "module",
+  "module": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src",
+    "!tests"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./Accordion": {
+      "default": "./src/lib/components/ui/accordion/index.ts",
+      "types": "./src/lib/components/ui/accordion/index.ts",
+      "svelte": "./src/lib/components/ui/accordion/index.ts",
+      "import": "./src/lib/components/ui/accordion/index.ts"
+    },
+    "./Alert": {
+      "default": "./src/lib/components/ui/alert/index.ts",
+      "types": "./src/lib/components/ui/alert/index.ts",
+      "svelte": "./src/lib/components/ui/alert/index.ts",
+      "import": "./src/lib/components/ui/alert/index.ts"
+    },
+    "./Alert-Dialog": {
+      "default": "./src/lib/components/ui/alert-dialog/index.ts",
+      "types": "./src/lib/components/ui/alert-dialog/index.ts",
+      "svelte": "./src/lib/components/ui/alert-dialog/index.ts",
+      "import": "./src/lib/components/ui/alert-dialog/index.ts"
+    },
+    "./Aspect-Ratio": {
+      "types": "./src/lib/components/ui/aspect-ratio/index.ts",
+      "svelte": "./src/lib/components/ui/aspect-ratio/index.ts",
+      "import": "./src/lib/components/ui/aspect-ratio/index.ts",
+      "default": "./src/lib/components/ui/aspect-ratio/index.ts"
+    },
+    "./Avatar": {
+      "default": "./src/lib/components/ui/avatar/index.ts",
+      "types": "./src/lib/components/ui/avatar/index.ts",
+      "svelte": "./src/lib/components/ui/avatar/index.ts",
+      "import": "./src/lib/components/ui/avatar/index.ts"
+    },
+    "./Badge": {
+      "default": "./src/lib/components/ui/badge/index.ts",
+      "types": "./src/lib/components/ui/badge/index.ts",
+      "svelte": "./src/lib/components/ui/badge/index.ts",
+      "import": "./src/lib/components/ui/badge/index.ts"
+    },
+    "./Breadcrumb": {
+      "default": "./src/lib/components/ui/breadcrumb/index.ts",
+      "types": "./src/lib/components/ui/breadcrumb/index.ts",
+      "svelte": "./src/lib/components/ui/breadcrumb/index.ts",
+      "import": "./src/lib/components/ui/breadcrumb/index.ts"
+    },
+    "./Button": {
+      "default": "./src/lib/components/ui/button/index.ts",
+      "types": "./src/lib/components/ui/button/index.ts",
+      "svelte": "./src/lib/components/ui/button/index.ts",
+      "import": "./src/lib/components/ui/button/index.ts"
+    },
+    "./Calendar": {
+      "default": "./src/lib/components/ui/calendar/index.ts",
+      "types": "./src/lib/components/ui/calendar/index.ts",
+      "svelte": "./src/lib/components/ui/calendar/index.ts",
+      "import": "./src/lib/components/ui/calendar/index.ts"
+    },
+    "./Card": {
+      "default": "./src/lib/components/ui/card/index.ts",
+      "types": "./src/lib/components/ui/card/index.ts",
+      "svelte": "./src/lib/components/ui/card/index.ts",
+      "import": "./src/lib/components/ui/card/index.ts"
+    },
+    "./Carousel": {
+      "default": "./src/lib/components/ui/carousel/index.ts",
+      "types": "./src/lib/components/ui/carousel/index.ts",
+      "svelte": "./src/lib/components/ui/carousel/index.ts",
+      "import": "./src/lib/components/ui/carousel/index.ts"
+    },
+    "./Checkbox": {
+      "default": "./src/lib/components/ui/checkbox/index.ts",
+      "types": "./src/lib/components/ui/checkbox/index.ts",
+      "svelte": "./src/lib/components/ui/checkbox/index.ts",
+      "import": "./src/lib/components/ui/checkbox/index.ts"
+    },
+    "./Collapsible": {
+      "default": "./src/lib/components/ui/collapsible/index.ts",
+      "types": "./src/lib/components/ui/collapsible/index.ts",
+      "svelte": "./src/lib/components/ui/collapsible/index.ts",
+      "import": "./src/lib/components/ui/collapsible/index.ts"
+    },
+    "./Command": {
+      "default": "./src/lib/components/ui/command/index.ts",
+      "types": "./src/lib/components/ui/command/index.ts",
+      "svelte": "./src/lib/components/ui/command/index.ts",
+      "import": "./src/lib/components/ui/command/index.ts"
+    },
+    "./Context-Menu": {
+      "default": "./src/lib/components/ui/context-menu/index.ts",
+      "types": "./src/lib/components/ui/context-menu/index.ts",
+      "svelte": "./src/lib/components/ui/context-menu/index.ts",
+      "import": "./src/lib/components/ui/context-menu/index.ts"
+    },
+    "./Data-Table": {
+      "default": "./src/lib/components/ui/data-table/index.ts",
+      "types": "./src/lib/components/ui/data-table/index.ts",
+      "svelte": "./src/lib/components/ui/data-table/index.ts",
+      "import": "./src/lib/components/ui/data-table/index.ts"
+    },
+    "./Dialog": {
+      "default": "./src/lib/components/ui/dialog/index.ts",
+      "types": "./src/lib/components/ui/dialog/index.ts",
+      "svelte": "./src/lib/components/ui/dialog/index.ts",
+      "import": "./src/lib/components/ui/dialog/index.ts"
+    },
+    "./Drawer": {
+      "default": "./src/lib/components/ui/drawer/index.ts",
+      "types": "./src/lib/components/ui/drawer/index.ts",
+      "svelte": "./src/lib/components/ui/drawer/index.ts",
+      "import": "./src/lib/components/ui/drawer/index.ts"
+    },
+    "./Dropdown-Menu": {
+      "default": "./src/lib/components/ui/dropdown-menu/index.ts",
+      "types": "./src/lib/components/ui/dropdown-menu/index.ts",
+      "svelte": "./src/lib/components/ui/dropdown-menu/index.ts",
+      "import": "./src/lib/components/ui/dropdown-menu/index.ts"
+    },
+    "./Form": {
+      "default": "./src/lib/components/ui/form/index.ts",
+      "types": "./src/lib/components/ui/form/index.ts",
+      "svelte": "./src/lib/components/ui/form/index.ts",
+      "import": "./src/lib/components/ui/form/index.ts"
+    },
+    "./Hover-Card": {
+      "default": "./src/lib/components/ui/hover-card/index.ts",
+      "types": "./src/lib/components/ui/hover-card/index.ts",
+      "svelte": "./src/lib/components/ui/hover-card/index.ts",
+      "import": "./src/lib/components/ui/hover-card/index.ts"
+    },
+    "./Input": {
+      "default": "./src/lib/components/ui/input/index.ts",
+      "types": "./src/lib/components/ui/input/index.ts",
+      "svelte": "./src/lib/components/ui/input/index.ts",
+      "import": "./src/lib/components/ui/input/index.ts"
+    },
+    "./Input-OTP": {
+      "default": "./src/lib/components/ui/input-otp/index.ts",
+      "types": "./src/lib/components/ui/input-otp/index.ts",
+      "svelte": "./src/lib/components/ui/input-otp/index.ts",
+      "import": "./src/lib/components/ui/input-otp/index.ts"
+    },
+    "./Label": {
+      "default": "./src/lib/components/ui/label/index.ts",
+      "types": "./src/lib/components/ui/label/index.ts",
+      "svelte": "./src/lib/components/ui/label/index.ts",
+      "import": "./src/lib/components/ui/label/index.ts"
+    },
+    "./Menubar": {
+      "default": "./src/lib/components/ui/menubar/index.ts",
+      "types": "./src/lib/components/ui/menubar/index.ts",
+      "svelte": "./src/lib/components/ui/menubar/index.ts",
+      "import": "./src/lib/components/ui/menubar/index.ts"
+    },
+    "./Pagination": {
+      "default": "./src/lib/components/ui/pagination/index.ts",
+      "types": "./src/lib/components/ui/pagination/index.ts",
+      "svelte": "./src/lib/components/ui/pagination/index.ts",
+      "import": "./src/lib/components/ui/pagination/index.ts"
+    },
+    "./Popover": {
+      "default": "./src/lib/components/ui/popover/index.ts",
+      "types": "./src/lib/components/ui/popover/index.ts",
+      "svelte": "./src/lib/components/ui/popover/index.ts",
+      "import": "./src/lib/components/ui/popover/index.ts"
+    },
+    "./Progress": {
+      "default": "./src/lib/components/ui/progress/index.ts",
+      "types": "./src/lib/components/ui/progress/index.ts",
+      "svelte": "./src/lib/components/ui/progress/index.ts",
+      "import": "./src/lib/components/ui/progress/index.ts"
+    },
+    "./Radio-Group": {
+      "default": "./src/lib/components/ui/radio-group/index.ts",
+      "types": "./src/lib/components/ui/radio-group/index.ts",
+      "svelte": "./src/lib/components/ui/radio-group/index.ts",
+      "import": "./src/lib/components/ui/radio-group/index.ts"
+    },
+    "./Range-Calendar": {
+      "default": "./src/lib/components/ui/range-calendar/index.ts",
+      "types": "./src/lib/components/ui/range-calendar/index.ts",
+      "svelte": "./src/lib/components/ui/range-calendar/index.ts",
+      "import": "./src/lib/components/ui/range-calendar/index.ts"
+    },
+    "./Resizable": {
+      "default": "./src/lib/components/ui/resizable/index.ts",
+      "types": "./src/lib/components/ui/resizable/index.ts",
+      "svelte": "./src/lib/components/ui/resizable/index.ts",
+      "import": "./src/lib/components/ui/resizable/index.ts"
+    },
+    "./Scroll-Area": {
+      "default": "./src/lib/components/ui/scroll-area/index.ts",
+      "types": "./src/lib/components/ui/scroll-area/index.ts",
+      "svelte": "./src/lib/components/ui/scroll-area/index.ts",
+      "import": "./src/lib/components/ui/scroll-area/index.ts"
+    },
+    "./Select": {
+      "default": "./src/lib/components/ui/select/index.ts",
+      "types": "./src/lib/components/ui/select/index.ts",
+      "svelte": "./src/lib/components/ui/select/index.ts",
+      "import": "./src/lib/components/ui/select/index.ts"
+    },
+    "./Separator": {
+      "default": "./src/lib/components/ui/separator/index.ts",
+      "types": "./src/lib/components/ui/separator/index.ts",
+      "svelte": "./src/lib/components/ui/separator/index.ts",
+      "import": "./src/lib/components/ui/separator/index.ts"
+    },
+    "./Sheet": {
+      "default": "./src/lib/components/ui/sheet/index.ts",
+      "types": "./src/lib/components/ui/sheet/index.ts",
+      "svelte": "./src/lib/components/ui/sheet/index.ts",
+      "import": "./src/lib/components/ui/sheet/index.ts"
+    },
+    "./Sidebar": {
+      "default": "./src/lib/components/ui/sidebar/index.ts",
+      "types": "./src/lib/components/ui/sidebar/index.ts",
+      "svelte": "./src/lib/components/ui/sidebar/index.ts",
+      "import": "./src/lib/components/ui/sidebar/index.ts"
+    },
+    "./Skeleton": {
+      "default": "./src/lib/components/ui/skeleton/index.ts",
+      "types": "./src/lib/components/ui/skeleton/index.ts",
+      "svelte": "./src/lib/components/ui/skeleton/index.ts",
+      "import": "./src/lib/components/ui/skeleton/index.ts"
+    },
+    "./Slider": {
+      "default": "./src/lib/components/ui/slider/index.ts",
+      "types": "./src/lib/components/ui/slider/index.ts",
+      "svelte": "./src/lib/components/ui/slider/index.ts",
+      "import": "./src/lib/components/ui/slider/index.ts"
+    },
+    "./Sonner": {
+      "default": "./src/lib/components/ui/sonner/index.ts",
+      "types": "./src/lib/components/ui/sonner/index.ts",
+      "svelte": "./src/lib/components/ui/sonner/index.ts",
+      "import": "./src/lib/components/ui/sonner/index.ts"
+    },
+    "./Switch": {
+      "default": "./src/lib/components/ui/switch/index.ts",
+      "types": "./src/lib/components/ui/switch/index.ts",
+      "svelte": "./src/lib/components/ui/switch/index.ts",
+      "import": "./src/lib/components/ui/switch/index.ts"
+    },
+    "./Table": {
+      "default": "./src/lib/components/ui/table/index.ts",
+      "types": "./src/lib/components/ui/table/index.ts",
+      "svelte": "./src/lib/components/ui/table/index.ts",
+      "import": "./src/lib/components/ui/table/index.ts"
+    },
+    "./Tabs": {
+      "default": "./src/lib/components/ui/tabs/index.ts",
+      "types": "./src/lib/components/ui/tabs/index.ts",
+      "svelte": "./src/lib/components/ui/tabs/index.ts",
+      "import": "./src/lib/components/ui/tabs/index.ts"
+    },
+    "./Textarea": {
+      "default": "./src/lib/components/ui/textarea/index.ts",
+      "types": "./src/lib/components/ui/textarea/index.ts",
+      "svelte": "./src/lib/components/ui/textarea/index.ts",
+      "import": "./src/lib/components/ui/textarea/index.ts"
+    },
+    "./Toggle": {
+      "default": "./src/lib/components/ui/toggle/index.ts",
+      "types": "./src/lib/components/ui/toggle/index.ts",
+      "svelte": "./src/lib/components/ui/toggle/index.ts",
+      "import": "./src/lib/components/ui/toggle/index.ts"
+    },
+    "./Toggle-Group": {
+      "default": "./src/lib/components/ui/toggle-group/index.ts",
+      "types": "./src/lib/components/ui/toggle-group/index.ts",
+      "svelte": "./src/lib/components/ui/toggle-group/index.ts",
+      "import": "./src/lib/components/ui/toggle-group/index.ts"
+    },
+    "./Tooltip": {
+      "default": "./src/lib/components/ui/tooltip/index.ts",
+      "types": "./src/lib/components/ui/tooltip/index.ts",
+      "svelte": "./src/lib/components/ui/tooltip/index.ts",
+      "import": "./src/lib/components/ui/tooltip/index.ts"
+    },
+    "./hooks": {
+      "default": "./src/lib/hooks"
+    },
+    "./utils": {
+      "default": "./src/lib/utils"
+    }
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/package": "^2.3.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.7",
+    "@vitest/coverage-v8": "^3.0.8",
+    "jsdom": "^26.0.0",
+    "msw": "^2.7.3",
+    "postcss": "^8.5.3",
+    "@lucide/svelte": "0.488.0",
+    "@sveltejs/kit": "^2.16.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "autoprefixer": "^10.4.20",
+    "bits-ui": "^1.3.19",
+    "clsx": "^2.1.1",
+    "embla-carousel-svelte": "^8.6.0",
+    "eslint": "^9.18.0",
+    "formsnap": "2.0.1",
+    "globals": "^15.14.0",
+    "mode-watcher": "^1.0.2",
+    "paneforge": "1.0.0-next.5",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-sonner": "^0.3.28",
+    "sveltekit-superforms": "^2.24.0",
+    "tailwind-merge": "^3.2.0",
+    "tailwind-variants": "^1.0.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vaul-svelte": "1.0.0-next.7",
+    "vite": "^6.0.0",
+    "vitest": "^3.0.0",
+    "@internal/eslint-config": "0.0.0"
+  },
+  "dependencies": {
+    "@tanstack/table-core": "^8.21.2"
+  },
+  "peerDependencies": {
+    "@sveltejs/kit": ">=2 <3",
+    "svelte": "^4.0.0 || >=5.0.0"
+  },
+  "scripts": {
+    "build": "svelte-package --input ./src --output ./dist",
+    "dev": "npm run build -- --watch",
+    "lint": "prettier --check --ignore-path=../../.prettierignore . && eslint \".\" --ignore-path=../../.prettierignore",
+    "format": "prettier --write --ignore-path=../../.prettierignore . && eslint \".\" --ignore-path=../../.prettierignore",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "test:dev": "vitest watch",
+    "test:debug": "vitest --test-timeout=0 --reporter=verbose --coverage",
+    "clean": "rimraf ./dist && rimraf ./coverage"
+  }
+}

package/src/app.html

@@ -0,0 +1,13 @@
+// src/app.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Auth</title>
+    %sveltekit.head%
+  </head>
+  <body>
+    <!-- your auth editor content here -->
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

package/src/lib/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/src/lib/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />

package/src/lib/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/src/lib/components/ui/accordion/index.ts

@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};

package/src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	aria-level={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div bind:this={ref} class={cn(alertVariants({ variant }), className)} {...restProps} role="alert">
+	{@render children?.()}
+</div>

package/src/lib/components/ui/alert/index.ts

@@ -0,0 +1,14 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+};

package/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

package/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		portalProps?: AlertDialogPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

package/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>