@tanglemedia/svelte-starter-ui-shadcn 0.1.0 → 0.2.0

package/dist/lib/components/ui/calendar/calendar-months.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/dist/lib/components/ui/calendar/calendar-months.svelte.d.ts

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

package/dist/lib/components/ui/calendar/calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "../../utils.js";
 
@@ -16,16 +16,22 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRightIcon class="size-4" />
+	<ChevronRightIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.NextButton>

package/dist/lib/components/ui/calendar/calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "../../utils.js";
 
@@ -16,16 +16,22 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class="size-4" />
+	<ChevronLeftIcon class={cn("cn-rtl-flip size-4", className)} />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
 		buttonVariants({ variant }),
-		"size-(--cell-size) select-none bg-transparent p-0 disabled:opacity-50 rtl:rotate-180",
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50",
+		"rtl:rotate-180",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#if children}
+		{@render children?.()}
+	{:else}
+		{@render Fallback()}
+	{/if}
+</CalendarPrimitive.PrevButton>

package/dist/lib/components/ui/calendar/calendar-year-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
-	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
 
 	let {
 		ref = $bindable(null),
@@ -13,11 +13,15 @@
 
 <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",
+		"relative flex rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
 		className
 	)}
 >
-	<CalendarPrimitive.YearSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+	<CalendarPrimitive.YearSelect
+		bind:ref
+		class="absolute inset-0 opacity-0 dark:bg-popover dark:text-popover-foreground"
+		{...restProps}
+	>
 		{#snippet child({ props, yearItems, selectedYearItem })}
 			<select {...props} {value}>
 				{#each yearItems as yearItem (yearItem.value)}
@@ -25,18 +29,18 @@
 						value={yearItem.value}
 						selected={value !== undefined
 							? yearItem.value === value
-							: yearItem.value === selectedYearItem.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 pe-1 ps-2 text-sm font-medium [&>svg]:size-3.5"
+				class="flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5 [&>svg]:text-muted-foreground"
 				aria-hidden="true"
 			>
-				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
-				<ChevronDownIcon class="size-4" />
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</CalendarPrimitive.YearSelect>

package/dist/lib/components/ui/calendar/calendar.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js";
 	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import CalendarCaption from "./calendar-caption.svelte";
+	import CalendarCell from "./calendar-cell.svelte";
+	import CalendarDay from "./calendar-day.svelte";
+	import CalendarGridBody from "./calendar-grid-body.svelte";
+	import CalendarGridHead from "./calendar-grid-head.svelte";
+	import CalendarGridRow from "./calendar-grid-row.svelte";
+	import CalendarGrid from "./calendar-grid.svelte";
+	import CalendarHeadCell from "./calendar-head-cell.svelte";
+	import CalendarHeader from "./calendar-header.svelte";
+	import CalendarMonth from "./calendar-month.svelte";
+	import CalendarMonths from "./calendar-months.svelte";
+	import CalendarNav from "./calendar-nav.svelte";
+	import CalendarNextButton from "./calendar-next-button.svelte";
+	import CalendarPrevButton from "./calendar-prev-button.svelte";
 	import type { ButtonVariant } from "../button/button.svelte";
-	import { isEqualMonth, type DateValue } from "@internationalized/date";
 	import type { Snippet } from "svelte";
 
 	let {
@@ -50,7 +63,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
 		className
 	)}
 	{locale}
@@ -59,15 +72,15 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
 			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -78,38 +91,38 @@ get along, so we shut typescript up by casting `value` to `never`.
 							{locale}
 							{monthIndex}
 						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
-								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarGridHead>
+							<CalendarGridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<CalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
+									</CalendarHeadCell>
 								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
+							</CalendarGridRow>
+						</CalendarGridHead>
+						<CalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
+								<CalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
+										<CalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<Calendar.Day />
+												<CalendarDay />
 											{/if}
-										</Calendar.Cell>
+										</CalendarCell>
 									{/each}
-								</Calendar.GridRow>
+								</CalendarGridRow>
 							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
+						</CalendarGridBody>
+					</CalendarGrid>
+				</CalendarMonth>
 			{/each}
-		</Calendar.Months>
+		</CalendarMonths>
 	{/snippet}
 </CalendarPrimitive.Root>

package/dist/lib/components/ui/calendar/calendar.svelte.d.ts

@@ -1,8 +1,7 @@
+import { type DateValue } from "@internationalized/date";
 import { Calendar as CalendarPrimitive } from "bits-ui";
-import * as Calendar from "./index.js";
 import { type WithoutChildrenOrChild } from "../../utils.js";
 import type { ButtonVariant } from "../button/button.svelte";
-import { type DateValue } from "@internationalized/date";
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
     buttonVariant?: ButtonVariant;
@@ -16,6 +15,6 @@ type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
         outsideMonth: boolean;
     }]>;
 };
-declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "placeholder" | "ref" | "value">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/lib/components/ui/calendar/index.d.ts

@@ -1,19 +1,19 @@
-import Root from "./calendar.svelte";
+import Caption from "./calendar-caption.svelte";
 import Cell from "./calendar-cell.svelte";
 import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
 import GridBody from "./calendar-grid-body.svelte";
 import GridHead from "./calendar-grid-head.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Grid from "./calendar-grid.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
+import Header from "./calendar-header.svelte";
+import Heading from "./calendar-heading.svelte";
 import MonthSelect from "./calendar-month-select.svelte";
-import YearSelect from "./calendar-year-select.svelte";
 import Month from "./calendar-month.svelte";
+import Months from "./calendar-months.svelte";
 import Nav from "./calendar-nav.svelte";
-import Caption from "./calendar-caption.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Root from "./calendar.svelte";
 export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, Root as Calendar, };

package/dist/lib/components/ui/calendar/index.js

@@ -1,21 +1,21 @@
-import Root from "./calendar.svelte";
+import Caption from "./calendar-caption.svelte";
 import Cell from "./calendar-cell.svelte";
 import Day from "./calendar-day.svelte";
-import Grid from "./calendar-grid.svelte";
-import Header from "./calendar-header.svelte";
-import Months from "./calendar-months.svelte";
-import GridRow from "./calendar-grid-row.svelte";
-import Heading from "./calendar-heading.svelte";
 import GridBody from "./calendar-grid-body.svelte";
 import GridHead from "./calendar-grid-head.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Grid from "./calendar-grid.svelte";
 import HeadCell from "./calendar-head-cell.svelte";
-import NextButton from "./calendar-next-button.svelte";
-import PrevButton from "./calendar-prev-button.svelte";
+import Header from "./calendar-header.svelte";
+import Heading from "./calendar-heading.svelte";
 import MonthSelect from "./calendar-month-select.svelte";
-import YearSelect from "./calendar-year-select.svelte";
 import Month from "./calendar-month.svelte";
+import Months from "./calendar-months.svelte";
 import Nav from "./calendar-nav.svelte";
-import Caption from "./calendar-caption.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+import YearSelect from "./calendar-year-select.svelte";
+import Root from "./calendar.svelte";
 export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Nav, Month, YearSelect, MonthSelect, Caption, 
 //
 Root as Calendar, };

package/dist/lib/components/ui/card/card-action.svelte

@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	class={cn(
+		"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/card/card-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -10,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-(--card-spacing)", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/lib/components/ui/card/card-content.svelte.d.ts

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

package/dist/lib/components/ui/card/card-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

package/dist/lib/components/ui/card/card-description.svelte.d.ts

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

package/dist/lib/components/ui/card/card-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("[.border-t]:pt-6 flex items-center px-6", className)}
+	class={cn("bg-muted/50 rounded-b-xl border-t p-(--card-spacing) flex items-center", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/card/card-header.svelte

@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="card-header"
 	class={cn(
-		"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6",
+		"gap-1 rounded-t-xl px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/card/card-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-title"
-	class={cn("font-semibold leading-none", className)}
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/card/card-title.svelte.d.ts

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

package/dist/lib/components/ui/card/card.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
+		size = "default",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
 </script>
 
 <div
 	bind:this={ref}
 	data-slot="card"
-	class={cn(
-		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-		className
-	)}
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-xl py-(--card-spacing) text-sm ring-1 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/card/card.svelte.d.ts

@@ -1,5 +1,8 @@
-import type { HTMLAttributes } from "svelte/elements";
 import { type WithElementRef } from "../../utils.js";
-declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    size?: "default" | "sm";
+};
+declare const Card: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/lib/components/ui/card/index.d.ts

@@ -1,8 +1,8 @@
-import Root from "./card.svelte";
+import Action from "./card-action.svelte";
 import Content from "./card-content.svelte";
 import Description from "./card-description.svelte";
 import Footer from "./card-footer.svelte";
 import Header from "./card-header.svelte";
 import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from "./card.svelte";
 export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

package/dist/lib/components/ui/card/index.js

@@ -1,10 +1,10 @@
-import Root from "./card.svelte";
+import Action from "./card-action.svelte";
 import Content from "./card-content.svelte";
 import Description from "./card-description.svelte";
 import Footer from "./card-footer.svelte";
 import Header from "./card-header.svelte";
 import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from "./card.svelte";
 export { Root, Content, Description, Footer, Header, Title, Action, 
 //
 Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import emblaCarouselSvelte from "embla-carousel-svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getEmblaContext } from "./context.js";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 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/lib/components/ui/carousel/carousel-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
-	import { getEmblaContext } from "./context.js";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import { getEmblaContext } from "./context.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),

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

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "svelte/elements";
 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/lib/components/ui/carousel/carousel-next.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
-	import type { WithoutChildren } from "bits-ui";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../utils.js";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	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",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
@@ -21,11 +21,12 @@
 	{variant}
 	{size}
 	aria-disabled={!emblaCtx.canScrollNext}
+	disabled={!emblaCtx.canScrollNext}
 	class={cn(
-		"absolute size-8 rounded-full",
+		"rounded-full absolute touch-manipulation",
 		emblaCtx.orientation === "horizontal"
-			? "-end-12 top-1/2 -translate-y-1/2"
-			: "-bottom-12 start-1/2 -translate-x-1/2 rotate-90",
+			? "inset-y-0 -end-12 my-auto"
+			: "start-1/2 -bottom-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollNext}
@@ -33,6 +34,6 @@
 	bind:ref
 	{...restProps}
 >
-	<ArrowRightIcon class="size-4" />
+	<ChevronRightIcon class="cn-rtl-flip" />
 	<span class="sr-only">Next slide</span>
 </Button>

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

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
-	import type { WithoutChildren } from "bits-ui";
-	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../utils.js";
+	import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
 	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",
+		size = "icon-sm",
 		...restProps
 	}: WithoutChildren<Props> = $props();
 
@@ -21,11 +21,12 @@
 	{variant}
 	{size}
 	aria-disabled={!emblaCtx.canScrollPrev}
+	disabled={!emblaCtx.canScrollPrev}
 	class={cn(
-		"absolute size-8 rounded-full",
+		"rounded-full absolute touch-manipulation",
 		emblaCtx.orientation === "horizontal"
-			? "-start-12 top-1/2 -translate-y-1/2"
-			: "-top-12 start-1/2 -translate-x-1/2 rotate-90",
+			? "inset-y-0 -start-12 my-auto"
+			: "start-1/2 -top-12 -translate-x-1/2 rotate-90",
 		className
 	)}
 	onclick={emblaCtx.scrollPrev}
@@ -33,6 +34,6 @@
 	{...restProps}
 	bind:ref
 >
-	<ArrowLeftIcon class="size-4" />
+	<ChevronLeftIcon class="cn-rtl-flip" />
 	<span class="sr-only">Previous slide</span>
 </Button>