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

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		item = $bindable(undefined),
+		ref = $bindable(null),
+		...restProps
+	}: QuestionnairePrimitive.RootProps = $props();
+</script>
+
+<QuestionnairePrimitive.Root
+	bind:item
+	bind:ref
+	data-slot="questionnaire"
+	class={cn("gap-4 flex w-full min-w-0 flex-col", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+declare const Questionnaire: import("svelte").Component<QuestionnairePrimitive.RootProps, {}, "ref" | "item">;
+type Questionnaire = ReturnType<typeof Questionnaire>;
+export default Questionnaire;

package/dist/lib/components/ui/radio-group/index.d.ts

@@ -1,3 +1,3 @@
-import Root from "./radio-group.svelte";
 import Item from "./radio-group-item.svelte";
+import Root from "./radio-group.svelte";
 export { Root, Item, Root as RadioGroup, Item as RadioGroupItem, };

package/dist/lib/components/ui/radio-group/index.js

@@ -1,5 +1,5 @@
-import Root from "./radio-group.svelte";
 import Item from "./radio-group-item.svelte";
+import Root from "./radio-group.svelte";
 export { Root, Item, 
 //
 Root as RadioGroup, Item as RadioGroupItem, };

package/dist/lib/components/ui/radio-group/radio-group-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import CircleIcon from '@lucide/svelte/icons/circle';
 	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
@@ -14,17 +14,15 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		"border-input text-primary 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:bg-input/30 shadow-xs aspect-square size-4 shrink-0 rounded-full border outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input group-has-[:focus-visible]/field-label:data-checked:border-primary group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
-				<CircleIcon
-					class="fill-primary absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
-				/>
+				<CircleIcon class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
 			{/if}
 		</div>
 	{/snippet}

package/dist/lib/components/ui/radio-group/radio-group.svelte

@@ -14,6 +14,6 @@
 	bind:ref
 	bind:value
 	data-slot="radio-group"
-	class={cn("grid gap-3", className)}
+	class={cn("grid gap-2 w-full", className)}
 	{...restProps}
 />

package/dist/lib/components/ui/radio-group/radio-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "value" | "ref">;
+declare const RadioGroup: import("svelte").Component<RadioGroupPrimitive.RootProps, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

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

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

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

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

package/dist/lib/components/ui/range-calendar/range-calendar-caption.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import type { ComponentProps } from "svelte";
-	import type RangeCalendar from "./range-calendar.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
 	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
 	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
-	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+	import type RangeCalendar from "./range-calendar.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		captionLayout,

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

@@ -1,8 +1,8 @@
-import type { ComponentProps } from "svelte";
-import type RangeCalendar from "./range-calendar.svelte";
+import { type DateValue } from "@internationalized/date";
 import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
 import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
-import { type DateValue } from "@internationalized/date";
+import type RangeCalendar from "./range-calendar.svelte";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = {
     captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
     months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];

package/dist/lib/components/ui/range-calendar/range-calendar-cell.svelte

@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"size-(--cell-size) dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-md [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:has([data-range-end])]:rounded-e-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-md last:[&:has([data-range-middle])]:rounded-e-md [&:has([data-range-start])]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-e-(--cell-radius) [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:has([data-range-end])]:rounded-e-(--cell-radius) dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:rounded-none [&:has([data-range-middle])]:bg-accent first:[&:has([data-range-middle])]:rounded-s-(--cell-radius) last:[&:has([data-range-middle])]:rounded-e-(--cell-radius) dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-range-start])]:rounded-s-(--cell-radius) dark:[&:has([data-range-start])]:hover:bg-accent [&:has([data-selected])]:bg-accent [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/range-calendar/range-calendar-day.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../utils.js";
 
 	let {
@@ -13,24 +12,22 @@
 <RangeCalendarPrimitive.Day
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "ghost" }),
-		"size-(--cell-size) flex select-none flex-col items-center justify-center gap-1 whitespace-nowrap p-0 font-normal leading-none",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground data-[range-middle]:rounded-none",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none",
+		"not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground",
+		"data-[range-middle]:rounded-none [&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
 		// range Start
-		"data-[range-start]:bg-primary dark:data-[range-start]:hover:bg-accent data-[range-start]:text-primary-foreground",
+		"data-[range-start]:bg-primary data-[range-start]:text-primary-foreground data-[range-start]:hover:text-foreground",
 		// range End
-		"data-[range-end]:bg-primary dark:data-[range-end]:hover:bg-accent data-[range-end]:text-primary-foreground",
+		"data-[range-end]:bg-primary data-[range-end]:text-primary-foreground data-[range-end]:hover:text-foreground",
 		// Outside months
 		"[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground",
 		// Disabled
-		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
 		// Unavailable
 		"data-[unavailable]:line-through",
 		"dark:data-[range-middle]:hover:bg-accent/0",
-		// hover
-		"dark:hover:text-accent-foreground",
 		// focus
-		"focus:border-ring focus:ring-ring/50 focus:relative",
+		"focus:relative focus:border-ring focus:ring-ring/50",
 		// inner spans
 		"[&>span]:text-xs [&>span]:opacity-70",
 		className

package/dist/lib/components/ui/range-calendar/range-calendar-head-cell.svelte

@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.HeadCell
 	bind:ref
 	class={cn(
-		"text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal",
+		"w-(--cell-size) rounded-md text-[0.8rem] font-normal text-muted-foreground",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/range-calendar/range-calendar-header.svelte

@@ -12,7 +12,7 @@
 <RangeCalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		"h-(--cell-size) flex w-full items-center justify-center gap-1.5 text-sm font-medium",
+		"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
 		className
 	)}
 	{...restProps}

package/dist/lib/components/ui/range-calendar/range-calendar-month-select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } 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),
@@ -14,7 +14,7 @@
 
 <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
 	)}
 >
@@ -26,18 +26,18 @@
 						value={monthItem.value}
 						selected={value !== undefined
 							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
+							: monthItem.value === selectedMonthItem?.value}
 					>
 						{monthItem.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"
 			>
-				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
-				<ChevronDownIcon class="size-4" />
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
+				<ChevronDownIcon class={cn("size-4", className)} />
 			</span>
 		{/snippet}
 	</RangeCalendarPrimitive.MonthSelect>

package/dist/lib/components/ui/range-calendar/range-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/range-calendar/range-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 RangeCalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type RangeCalendarMonths = ReturnType<typeof RangeCalendarMonths>;
 export default RangeCalendarMonths;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } 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}
 
 <RangeCalendarPrimitive.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}
+</RangeCalendarPrimitive.NextButton>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } 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}
 
 <RangeCalendarPrimitive.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}
+</RangeCalendarPrimitive.PrevButton>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { RangeCalendar as RangeCalendarPrimitive } 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,7 +13,7 @@
 
 <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
 	)}
 >
@@ -25,18 +25,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}
 	</RangeCalendarPrimitive.YearSelect>

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

@@ -1,10 +1,23 @@
 <script lang="ts">
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	import * as RangeCalendar from "./index.js";
-	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 	import type { ButtonVariant } from "../button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import RangeCalendarCaption from "./range-calendar-caption.svelte";
+	import RangeCalendarCell from "./range-calendar-cell.svelte";
+	import RangeCalendarDay from "./range-calendar-day.svelte";
+	import RangeCalendarGridBody from "./range-calendar-grid-body.svelte";
+	import RangeCalendarGridHead from "./range-calendar-grid-head.svelte";
+	import RangeCalendarGridRow from "./range-calendar-grid-row.svelte";
+	import RangeCalendarGrid from "./range-calendar-grid.svelte";
+	import RangeCalendarHeadCell from "./range-calendar-head-cell.svelte";
+	import RangeCalendarHeader from "./range-calendar-header.svelte";
+	import RangeCalendarMonth from "./range-calendar-month.svelte";
+	import RangeCalendarMonths from "./range-calendar-months.svelte";
+	import RangeCalendarNav from "./range-calendar-nav.svelte";
+	import RangeCalendarNextButton from "./range-calendar-next-button.svelte";
+	import RangeCalendarPrevButton from "./range-calendar-prev-button.svelte";
 	import type { Snippet } from "svelte";
-	import { isEqualMonth, type DateValue } from "@internationalized/date";
 
 	let {
 		ref = $bindable(null),
@@ -46,7 +59,7 @@
 	{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 p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
 		className
 	)}
 	{locale}
@@ -55,15 +68,15 @@
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<RangeCalendar.Months>
-			<RangeCalendar.Nav>
-				<RangeCalendar.PrevButton variant={buttonVariant} />
-				<RangeCalendar.NextButton variant={buttonVariant} />
-			</RangeCalendar.Nav>
+		<RangeCalendarMonths>
+			<RangeCalendarNav>
+				<RangeCalendarPrevButton variant={buttonVariant} />
+				<RangeCalendarNextButton variant={buttonVariant} />
+			</RangeCalendarNav>
 			{#each months as month, monthIndex (month)}
-				<RangeCalendar.Month>
-					<RangeCalendar.Header>
-						<RangeCalendar.Caption
+				<RangeCalendarMonth>
+					<RangeCalendarHeader>
+						<RangeCalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -74,39 +87,39 @@
 							{locale}
 							{monthIndex}
 						/>
-					</RangeCalendar.Header>
+					</RangeCalendarHeader>
 
-					<RangeCalendar.Grid>
-						<RangeCalendar.GridHead>
-							<RangeCalendar.GridRow class="select-none">
-								{#each weekdays as weekday (weekday)}
-									<RangeCalendar.HeadCell>
+					<RangeCalendarGrid>
+						<RangeCalendarGridHead>
+							<RangeCalendarGridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<RangeCalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</RangeCalendar.HeadCell>
+									</RangeCalendarHeadCell>
 								{/each}
-							</RangeCalendar.GridRow>
-						</RangeCalendar.GridHead>
-						<RangeCalendar.GridBody>
+							</RangeCalendarGridRow>
+						</RangeCalendarGridHead>
+						<RangeCalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<RangeCalendar.GridRow class="mt-2 w-full">
+								<RangeCalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<RangeCalendar.Cell {date} month={month.value}>
+										<RangeCalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<RangeCalendar.Day />
+												<RangeCalendarDay />
 											{/if}
-										</RangeCalendar.Cell>
+										</RangeCalendarCell>
 									{/each}
-								</RangeCalendar.GridRow>
+								</RangeCalendarGridRow>
 							{/each}
-						</RangeCalendar.GridBody>
-					</RangeCalendar.Grid>
-				</RangeCalendar.Month>
+						</RangeCalendarGridBody>
+					</RangeCalendarGrid>
+				</RangeCalendarMonth>
 			{/each}
-		</RangeCalendar.Months>
+		</RangeCalendarMonths>
 	{/snippet}
 </RangeCalendarPrimitive.Root>

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

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

package/dist/lib/components/ui/resizable/resizable-handle.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import GripVerticalIcon from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
 	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 
@@ -17,14 +16,12 @@
 	bind:ref
 	data-slot="resizable-handle"
 	class={cn(
-		"bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:start-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
+		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border">
-			<GripVerticalIcon class="size-2.5" />
-		</div>
+		<div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/lib/components/ui/resizable/resizable-pane-group.svelte

@@ -13,8 +13,12 @@
 </script>
 
 <ResizablePrimitive.PaneGroup
+	bind:ref
 	bind:this={paneGroup}
 	data-slot="resizable-pane-group"
-	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	class={cn(
+		"flex h-full w-full data-[direction=vertical]:flex-col",
+		className
+	)}
 	{...restProps}
 />

package/dist/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte

@@ -14,11 +14,10 @@
 <ScrollAreaPrimitive.Scrollbar
 	bind:ref
 	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
 	{orientation}
 	class={cn(
-		"flex touch-none select-none p-px transition-colors",
-		orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent",
-		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
 		className
 	)}
 	{...restProps}
@@ -26,6 +25,6 @@
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		data-slot="scroll-area-thumb"
-		class="bg-border relative flex-1 rounded-full"
+		class="rounded-full relative flex-1 bg-border"
 	/>
 </ScrollAreaPrimitive.Scrollbar>