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

package/src/lib/components/ui/popover/popover-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-title"
+	class={cn("font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn(className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Progress as ProgressPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,12 +13,15 @@
 
 <ProgressPrimitive.Root
 	bind:ref
+	data-slot="progress"
+	class={cn("bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden", className)}
 	{value}
-	class={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
+	{max}
 	{...restProps}
 >
 	<div
-		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		data-slot="progress-indicator"
+		class="bg-primary size-full flex-1 transition-all"
+		style="transform: translateX(-{100 - (100 * (value ?? 0)) / (max ?? 1)}%)"
 	></div>
 </ProgressPrimitive.Root>

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

@@ -0,0 +1,49 @@
+import Actions from "./questionnaire-actions.svelte";
+import ChoiceDescription from "./questionnaire-choice-description.svelte";
+import Choice from "./questionnaire-choice.svelte";
+import Choices from "./questionnaire-choices.svelte";
+import Description from "./questionnaire-description.svelte";
+import Error from "./questionnaire-error.svelte";
+import Input from "./questionnaire-input.svelte";
+import Item from "./questionnaire-item.svelte";
+import Next from "./questionnaire-next.svelte";
+import Previous from "./questionnaire-previous.svelte";
+import Progress from "./questionnaire-progress.svelte";
+import Skip from "./questionnaire-skip.svelte";
+import Submit from "./questionnaire-submit.svelte";
+import Title from "./questionnaire-title.svelte";
+import Root from "./questionnaire.svelte";
+
+export {
+	Root,
+	Progress,
+	Item,
+	Title,
+	Description,
+	Choices,
+	Choice,
+	ChoiceDescription,
+	Input,
+	Error,
+	Actions,
+	Previous,
+	Skip,
+	Next,
+	Submit,
+	//
+	Root as Questionnaire,
+	Progress as QuestionnaireProgress,
+	Item as QuestionnaireItem,
+	Title as QuestionnaireTitle,
+	Description as QuestionnaireDescription,
+	Choices as QuestionnaireChoices,
+	Choice as QuestionnaireChoice,
+	ChoiceDescription as QuestionnaireChoiceDescription,
+	Input as QuestionnaireInput,
+	Error as QuestionnaireError,
+	Actions as QuestionnaireActions,
+	Previous as QuestionnairePrevious,
+	Skip as QuestionnaireSkip,
+	Next as QuestionnaireNext,
+	Submit as QuestionnaireSubmit,
+};

package/src/lib/components/ui/questionnaire/questionnaire-actions.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="questionnaire-actions"
+	class={cn(
+		"gap-2 sm:min-h-8 grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/ui/questionnaire/questionnaire-choice-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/components/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="questionnaire-choice-description"
+	class={cn("text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/lib/components/ui/questionnaire/questionnaire-choice.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.ChoiceProps = $props();
+</script>
+
+<QuestionnairePrimitive.Choice
+	bind:ref
+	data-slot="questionnaire-choice"
+	class={cn(
+		"border-input dark:bg-input/20 hover:bg-muted/50 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-lg border bg-transparent px-3 py-2.5 text-sm has-[>input:focus-visible]:ring-3 group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start text-start transition-colors outline-none select-none",
+		"data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<QuestionnairePrimitive.ChoiceInput
+		data-slot="questionnaire-choice-input"
+		class="absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+	/>
+	<span
+		aria-hidden="true"
+		data-slot="questionnaire-choice-indicator"
+		class="border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px] pointer-events-none relative flex shrink-0 items-center justify-center border group-data-[type=radio]/questionnaire-choice:rounded-full"
+	>
+		<span
+			data-slot="questionnaire-choice-indicator-dot"
+			class="bg-primary-foreground size-2 hidden rounded-full group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+		></span>
+		<CheckIcon data-slot="questionnaire-choice-indicator-check" class="size-3.5 hidden group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block" />
+	</span>
+	<QuestionnairePrimitive.ChoiceLabel
+		data-slot="questionnaire-choice-label"
+		class="gap-0.5 flex min-w-0 flex-1 flex-col leading-snug"
+	>
+		{@render children?.()}
+	</QuestionnairePrimitive.ChoiceLabel>
+	<QuestionnairePrimitive.ChoiceShortcut
+		data-slot="questionnaire-choice-shortcut"
+		class="border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex"
+	/>
+</QuestionnairePrimitive.Choice>

package/src/lib/components/ui/questionnaire/questionnaire-choices.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.ChoicesProps = $props();
+</script>
+
+<QuestionnairePrimitive.Choices
+	bind:ref
+	data-slot="questionnaire-choices"
+	class={cn("gap-2 group/questionnaire-choices grid min-w-0", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.DescriptionProps = $props();
+</script>
+
+<QuestionnairePrimitive.Description
+	bind:ref
+	data-slot="questionnaire-description"
+	class={cn("text-muted-foreground text-sm text-pretty text-muted-foreground", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-error.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.ErrorProps = $props();
+</script>
+
+<QuestionnairePrimitive.Error
+	bind:ref
+	data-slot="questionnaire-error"
+	class={cn("mt-2 text-sm text-destructive", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-input.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.InputProps = $props();
+</script>
+
+<div
+	data-slot="questionnaire-input-wrapper"
+	class="w-full group/questionnaire-input relative min-w-0"
+>
+	<QuestionnairePrimitive.Input
+		bind:ref
+		data-slot="questionnaire-input"
+		class={cn(
+			"dark:bg-input/30 border-input 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 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base focus-visible:ring-3 aria-invalid:ring-3 md:text-sm min-h-11 w-full min-w-0 transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-0",
+			"selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+			className
+		)}
+		{...restProps}
+	/>
+</div>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.ItemProps = $props();
+</script>
+
+<QuestionnairePrimitive.Item
+	bind:ref
+	data-slot="questionnaire-item"
+	class={cn("flex flex-col gap-4 min-w-0 border-0 p-0 outline-none", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-next.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import {
+		buttonVariants,
+		type ButtonSize,
+		type ButtonVariant,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: QuestionnairePrimitive.NextProps & {
+		size?: ButtonSize;
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+<QuestionnairePrimitive.Next
+	bind:ref
+	data-slot="questionnaire-next"
+	data-size={size}
+	data-variant={variant}
+	class={cn(
+		buttonVariants({ size, variant }),
+		"col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-previous.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import {
+		buttonVariants,
+		type ButtonSize,
+		type ButtonVariant,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		variant = "outline",
+		...restProps
+	}: QuestionnairePrimitive.PreviousProps & {
+		size?: ButtonSize;
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+<QuestionnairePrimitive.Previous
+	bind:ref
+	data-slot="questionnaire-previous"
+	data-size={size}
+	data-variant={variant}
+	class={cn(
+		buttonVariants({ size, variant }),
+		"col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-progress.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.ProgressProps = $props();
+</script>
+
+<QuestionnairePrimitive.Progress
+	bind:ref
+	data-slot="questionnaire-progress"
+	class={cn(
+		"text-xs min-h-[1lh] w-fit min-w-[14ch] font-medium text-muted-foreground tabular-nums",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-skip.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import {
+		buttonVariants,
+		type ButtonSize,
+		type ButtonVariant,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		variant = "outline",
+		...restProps
+	}: QuestionnairePrimitive.SkipProps & {
+		size?: ButtonSize;
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+<QuestionnairePrimitive.Skip
+	bind:ref
+	data-slot="questionnaire-skip"
+	data-size={size}
+	data-variant={variant}
+	class={cn(
+		buttonVariants({ size, variant }),
+		"col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/questionnaire/questionnaire-submit.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import {
+		buttonVariants,
+		type ButtonSize,
+		type ButtonVariant,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		variant = "default",
+		...restProps
+	}: QuestionnairePrimitive.SubmitProps & {
+		size?: ButtonSize;
+		variant?: ButtonVariant;
+	} = $props();
+</script>
+
+<QuestionnairePrimitive.Submit
+	bind:ref
+	data-slot="questionnaire-submit"
+	data-size={size}
+	data-variant={variant}
+	class={cn(
+		buttonVariants({ size, variant }),
+		"col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Questionnaire as QuestionnairePrimitive } from "@shadcn-svelte/primitives/questionnaire";
+	import { cn } from "$lib/components/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: QuestionnairePrimitive.TitleProps = $props();
+</script>
+
+<QuestionnairePrimitive.Title
+	bind:ref
+	data-slot="questionnaire-title"
+	class={cn("text-base leading-snug font-medium [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4 text-pretty", className)}
+	{...restProps}
+/>

package/src/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 "$lib/components/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/src/lib/components/ui/radio-group/index.ts

@@ -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,

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

@@ -1,29 +1,28 @@
 <script lang="ts">
-	import { RadioGroup as RadioGroupPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Circle from "@lucide/svelte/icons/circle";
-	import { cn } from "../../../utils";
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChildrenOrChild } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> & {
-		value: string;
-	} = $props();
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
 </script>
 
 <RadioGroupPrimitive.Item
 	bind:ref
+	data-slot="radio-group-item"
 	class={cn(
-		"border-primary text-primary focus-visible:ring-ring aspect-square size-4 rounded-full border shadow focus:outline-none focus-visible:ring-1 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 class="flex items-center justify-center">
+		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
 			{#if checked}
-				<Circle class="fill-primary size-3.5" />
+				<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/src/lib/components/ui/radio-group/radio-group.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "$lib/components/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		value = $bindable(),
+		value = $bindable(""),
 		...restProps
 	}: RadioGroupPrimitive.RootProps = $props();
 </script>
 
-<RadioGroupPrimitive.Root bind:value class={cn("grid gap-2", className)} {...restProps} bind:ref />
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-2 w-full", className)}
+	{...restProps}
+/>

package/src/lib/components/ui/range-calendar/index.ts

@@ -1,16 +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 Grid from "./range-calendar-grid.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 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 Heading from "./range-calendar-heading.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 YearSelect from "./range-calendar-year-select.svelte";
+import Root from "./range-calendar.svelte";
 
 export {
 	Day,
@@ -25,6 +30,11 @@ export {
 	HeadCell,
 	NextButton,
 	PrevButton,
+	MonthSelect,
+	YearSelect,
+	Caption,
+	Nav,
+	Month,
 	//
 	Root as RangeCalendar,
 };