negodesign 0.0.10 → 0.0.12

package/dist/components/ui/button/button.svelte

@@ -1,101 +1,82 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from '../../../utils.js';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { type VariantProps, tv } from 'tailwind-variants';
-
-	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-				outline:
-					'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs',
-				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-				ghost:
-					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-				destructive:
-					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-				link: 'text-primary underline-offset-4 hover:underline'
-			},
-			size: {
-				default:
-					'h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5',
-				lg: 'h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				icon: 'size-9',
-				'icon-xs':
-					"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
-				'icon-sm':
-					'size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md',
-				'icon-lg': 'size-10'
-			}
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
-	});
-
-	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-	export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
-	export type Size = ButtonSize;
-
-	export const sizeMap = {
-		default: { icon: "icon" as ButtonSize },
-		xs: { icon: "icon-xs" as ButtonSize },
-		sm: { icon: "icon-sm" as ButtonSize },
-		lg: { icon: "icon-lg" as ButtonSize },
-		icon: { icon: "icon" as ButtonSize },
-		"icon-xs": { icon: "icon-xs" as ButtonSize },
-		"icon-sm": { icon: "icon-sm" as ButtonSize },
-		"icon-lg": { icon: "icon-lg" as ButtonSize },
-	} satisfies Record<ButtonSize, { icon: ButtonSize }>;
-
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = 'default',
-		size = 'default',
-		ref = $bindable(null),
-		href = undefined,
-		type = 'button',
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
-</script>
-
-{#if href}
-	<a
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled}
-		role={disabled ? 'link' : undefined}
-		tabindex={disabled ? -1 : undefined}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{disabled}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+
+	export const buttonVariants = tv({
+		base: "rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/80",
+				outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+				destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+				xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-9",
+				"icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -1,93 +1,66 @@
-import { type WithElementRef } from '../../../utils.js';
-import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from "tailwind-variants";
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs";
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
         link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5";
-        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
         icon: "size-9";
-        'icon-xs': "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3";
-        'icon-sm': "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md";
-        'icon-lg': "size-10";
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-8";
+        "icon-lg": "size-10";
     };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+}, undefined, "rounded-sm border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs";
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
         link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5";
-        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
         icon: "size-9";
-        'icon-xs': "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3";
-        'icon-sm': "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md";
-        'icon-lg': "size-10";
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-8";
+        "icon-lg": "size-10";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs";
+        outline: "border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground";
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
+        ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50";
+        destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40";
         link: "text-primary underline-offset-4 hover:underline";
     };
     size: {
-        default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5";
-        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3";
+        sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2";
+        lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3";
         icon: "size-9";
-        'icon-xs': "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3";
-        'icon-sm': "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md";
-        'icon-lg': "size-10";
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3";
+        "icon-sm": "size-8";
+        "icon-lg": "size-10";
     };
 }, undefined>>;
-export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
-export type Size = ButtonSize;
-export declare const sizeMap: {
-    default: {
-        icon: ButtonSize;
-    };
-    xs: {
-        icon: ButtonSize;
-    };
-    sm: {
-        icon: ButtonSize;
-    };
-    lg: {
-        icon: ButtonSize;
-    };
-    icon: {
-        icon: ButtonSize;
-    };
-    "icon-xs": {
-        icon: ButtonSize;
-    };
-    "icon-sm": {
-        icon: ButtonSize;
-    };
-    "icon-lg": {
-        icon: ButtonSize;
-    };
-};
+export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
     variant?: ButtonVariant;
     size?: ButtonSize;

package/dist/components/ui/button/index.d.ts

@@ -1,2 +1,2 @@
-import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
-export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from "./button.svelte";
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant, };

package/dist/components/ui/button/index.js

@@ -1,4 +1,4 @@
-import Root, { buttonVariants } from './button.svelte';
+import Root, { buttonVariants, } from "./button.svelte";
 export { Root, 
 //
-Root as Button, buttonVariants };
+Root as Button, buttonVariants, };

package/dist/components/ui/carousel/carousel-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import emblaCarouselSvelte from "embla-carousel-svelte";
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+	data-slot="carousel-content"
+	class="overflow-hidden"
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...emblaCtx.options,
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
+		},
+		plugins: emblaCtx.plugins,
+	}}
+	onemblaInit={emblaCtx.onInit}
+>
+	<div
+		bind:this={ref}
+		class={cn(
+			"flex",
+			emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+			className
+		)}
+		data-embla-container=""
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</div>

package/dist/components/ui/carousel/carousel-content.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CarouselContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CarouselContent = ReturnType<typeof CarouselContent>;
+export default CarouselContent;

package/dist/components/ui/carousel/carousel-item.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel-item"
+	role="group"
+	aria-roledescription="slide"
+	class={cn(
+		"min-w-0 shrink-0 grow-0 basis-full",
+		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
+		className
+	)}
+	data-embla-slide=""
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CarouselItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CarouselItem = ReturnType<typeof CarouselItem>;
+export default CarouselItem;

package/dist/components/ui/carousel/carousel-next.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+	import { Button, type Props } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+	data-slot="carousel-next"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
+	class={cn(
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "inset-y-0 -end-12 my-auto"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollNext}
+	onkeydown={emblaCtx.handleKeyDown}
+	bind:ref
+	{...restProps}
+>
+	<HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2}  />
+	<span class="sr-only">Next slide</span>
+</Button>

package/dist/components/ui/carousel/carousel-next.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type Props } from "../button/index.js";
+declare const CarouselNext: import("svelte").Component<Omit<Props, "children">, {}, "ref">;
+type CarouselNext = ReturnType<typeof CarouselNext>;
+export default CarouselNext;

package/dist/components/ui/carousel/carousel-previous.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { HugeiconsIcon } from "@hugeicons/svelte"
+	import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+	import { Button, type Props } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { WithoutChildren } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "icon-sm",
+		...restProps
+	}: WithoutChildren<Props> = $props();
+
+	const emblaCtx = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+	data-slot="carousel-previous"
+	{variant}
+	{size}
+	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
+	class={cn(
+		"rounded-full absolute touch-manipulation",
+		emblaCtx.orientation === "horizontal"
+			? "inset-y-0 -start-12 my-auto"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
+		className
+	)}
+	onclick={emblaCtx.scrollPrev}
+	onkeydown={emblaCtx.handleKeyDown}
+	{...restProps}
+	bind:ref
+>
+	<HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2}  />
+	<span class="sr-only">Previous slide</span>
+</Button>

package/dist/components/ui/carousel/carousel-previous.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type Props } from "../button/index.js";
+declare const CarouselPrevious: import("svelte").Component<Omit<Props, "children">, {}, "ref">;
+type CarouselPrevious = ReturnType<typeof CarouselPrevious>;
+export default CarouselPrevious;

package/dist/components/ui/carousel/carousel.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import {
+		type CarouselAPI,
+		type CarouselProps,
+		type EmblaContext,
+		setEmblaContext,
+	} from "./context.js";
+
+	let {
+		ref = $bindable(null),
+		opts = {},
+		plugins = [],
+		setApi = () => {},
+		orientation = "horizontal",
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<CarouselProps> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let carouselState = $state<EmblaContext>({
+		api: undefined,
+		scrollPrev,
+		scrollNext,
+		orientation,
+		canScrollNext: false,
+		canScrollPrev: false,
+		handleKeyDown,
+		options: opts,
+		plugins,
+		onInit,
+		scrollSnaps: [],
+		selectedIndex: 0,
+		scrollTo,
+	});
+
+	setEmblaContext(carouselState);
+
+	function scrollPrev() {
+		carouselState.api?.scrollPrev();
+	}
+
+	function scrollNext() {
+		carouselState.api?.scrollNext();
+	}
+
+	function scrollTo(index: number, jump?: boolean) {
+		carouselState.api?.scrollTo(index, jump);
+	}
+
+	function onSelect() {
+		if (!carouselState.api) return;
+		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
+		carouselState.canScrollNext = carouselState.api.canScrollNext();
+		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			scrollPrev();
+		} else if (e.key === "ArrowRight") {
+			e.preventDefault();
+			scrollNext();
+		}
+	}
+
+	function onInit(event: CustomEvent<CarouselAPI>) {
+		carouselState.api = event.detail;
+		setApi(carouselState.api);
+
+		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
+		carouselState.api.on("select", onSelect);
+		onSelect();
+	}
+
+	$effect(() => {
+		return () => {
+			carouselState.api?.off("select", onSelect);
+		};
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/carousel/carousel.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import { type CarouselProps } from "./context.js";
+declare const Carousel: import("svelte").Component<WithElementRef<CarouselProps>, {}, "ref">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;