@orochibraru/ui 0.0.0-stage → 0.0.0

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

@@ -0,0 +1,11 @@
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Portal from "./popover-portal.svelte";
+import Title from "./popover-title.svelte";
+import Trigger from "./popover-trigger.svelte";
+import Root from "./popover.svelte";
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
+//
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };

package/dist/components/ui/popover/popover-close.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps =
+		$props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

package/dist/components/ui/popover/popover-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+declare const PopoverClose: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;

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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	import PopoverPortal from "./popover-portal.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--bits-popover-content-transform-origin) outline-hidden",
+			className,
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

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

@@ -0,0 +1,10 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import type { ComponentProps } from "svelte";
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+import PopoverPortal from "./popover-portal.svelte";
+type $$ComponentProps = PopoverPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/components/ui/popover/popover-description.svelte

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

package/dist/components/ui/popover/popover-description.svelte.d.ts

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

package/dist/components/ui/popover/popover-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn("flex flex-col gap-1 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/popover/popover-header.svelte.d.ts

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

package/dist/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/dist/components/ui/popover/popover-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type PopoverPortal = ReturnType<typeof PopoverPortal>;
+export default PopoverPortal;

package/dist/components/ui/popover/popover-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	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/dist/components/ui/popover/popover-title.svelte.d.ts

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

package/dist/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	import { cn } from "../../../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/dist/components/ui/popover/popover-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+declare const PopoverTrigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+type PopoverTrigger = ReturnType<typeof PopoverTrigger>;
+export default PopoverTrigger;

package/dist/components/ui/popover/popover.svelte

@@ -0,0 +1,8 @@
+<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/dist/components/ui/popover/popover.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Popover: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

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

@@ -0,0 +1,2 @@
+import Root from "./progress.svelte";
+export { Root, Root as Progress, };

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

@@ -0,0 +1,4 @@
+import Root from "./progress.svelte";
+export { Root, 
+//
+Root as Progress, };

package/dist/components/ui/progress/progress.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		max = 100,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+	bind:ref
+	data-slot="progress"
+	class={cn(
+		"bg-muted h-1.5 rounded-full relative flex w-full items-center overflow-x-hidden",
+		className,
+	)}
+	{value}
+	{max}
+	{...restProps}
+>
+	<div
+		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/dist/components/ui/progress/progress.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Progress as ProgressPrimitive } from "bits-ui";
+declare const Progress: import("svelte").Component<Omit<Omit<ProgressPrimitive.RootProps, "child">, "children">, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

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

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

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

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

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		"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="flex size-4 items-center justify-center"
+		>
+			{#if checked}
+				<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}
+</RadioGroupPrimitive.Item>

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

@@ -0,0 +1,4 @@
+import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+declare const RadioGroupItem: import("svelte").Component<Omit<Omit<RadioGroupPrimitive.ItemProps, "child">, "children">, {}, "ref">;
+type RadioGroupItem = ReturnType<typeof RadioGroupItem>;
+export default RadioGroupItem;

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

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

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

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

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

@@ -0,0 +1,19 @@
+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 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, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, Root as RangeCalendar, };

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

@@ -0,0 +1,21 @@
+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 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, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, MonthSelect, YearSelect, Caption, Nav, Month, 
+//
+Root as RangeCalendar, };

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {
+		DateFormatter,
+		type DateValue,
+		getLocalTimeZone,
+	} from "@internationalized/date";
+	import type { ComponentProps } from "svelte";
+
+	import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+	import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+	import type RangeCalendar from "./range-calendar.svelte";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
+		months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof RangeCalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof RangeCalendarYearSelect>["yearFormat"];
+		month: DateValue;
+		placeholder: DateValue | undefined;
+		locale: string;
+		monthIndex: number;
+	} = $props();
+
+	function formatYear(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof yearFormat === "function")
+			return yearFormat(dateObj.getFullYear());
+		return new DateFormatter(locale, { year: yearFormat }).format(dateObj);
+	}
+
+	function formatMonth(date: DateValue) {
+		const dateObj = date.toDate(getLocalTimeZone());
+		if (typeof monthFormat === "function")
+			return monthFormat(dateObj.getMonth() + 1);
+		return new DateFormatter(locale, { month: monthFormat }).format(dateObj);
+	}
+</script>
+
+{#snippet MonthSelect()}
+	<RangeCalendarMonthSelect
+		{months}
+		{monthFormat}
+		value={month.month}
+		onchange={(e) => {
+			if (!placeholder) return;
+			const v = Number.parseInt(e.currentTarget.value);
+			const newPlaceholder = placeholder.set({ month: v });
+			placeholder = newPlaceholder.subtract({ months: monthIndex });
+		}}
+	/>
+{/snippet}
+
+{#snippet YearSelect()}
+	<RangeCalendarYearSelect {years} {yearFormat} value={month.year} />
+{/snippet}
+
+{#if captionLayout === "dropdown"}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === "dropdown-months"}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatYear(placeholder)}
+	{/if}
+{:else if captionLayout === "dropdown-years"}
+	{#if placeholder}
+		{formatMonth(placeholder)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatMonth(month)} {formatYear(month)}
+{/if}

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

@@ -0,0 +1,19 @@
+import { type DateValue } from "@internationalized/date";
+import type { ComponentProps } from "svelte";
+import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+import type RangeCalendar from "./range-calendar.svelte";
+type $$ComponentProps = {
+    captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
+    months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
+    monthFormat: ComponentProps<typeof RangeCalendarMonthSelect>["monthFormat"];
+    years: ComponentProps<typeof RangeCalendarYearSelect>["years"];
+    yearFormat: ComponentProps<typeof RangeCalendarYearSelect>["yearFormat"];
+    month: DateValue;
+    placeholder: DateValue | undefined;
+    locale: string;
+    monthIndex: number;
+};
+declare const RangeCalendarCaption: import("svelte").Component<$$ComponentProps, {}, "placeholder">;
+type RangeCalendarCaption = ReturnType<typeof RangeCalendarCaption>;
+export default RangeCalendarCaption;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.CellProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Cell
+	bind:ref
+	class={cn(
+		"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/components/ui/range-calendar/range-calendar-cell.svelte.d.ts

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarCell: import("svelte").Component<RangeCalendarPrimitive.CellProps, {}, "ref">;
+type RangeCalendarCell = ReturnType<typeof RangeCalendarCell>;
+export default RangeCalendarCell;

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

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.DayProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		"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 data-range-start:text-primary-foreground data-range-start:hover:text-foreground",
+		// range End
+		"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: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",
+		// focus
+		"focus:relative focus:border-ring focus:ring-ring/50",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
+		className,
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarDay: import("svelte").Component<RangeCalendarPrimitive.DayProps, {}, "ref">;
+type RangeCalendarDay = ReturnType<typeof RangeCalendarDay>;
+export default RangeCalendarDay;

package/dist/components/ui/range-calendar/range-calendar-grid-body.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: RangeCalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridBody bind:ref {...restProps} />

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

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarGridBody: import("svelte").Component<RangeCalendarPrimitive.GridBodyProps, {}, "ref">;
+type RangeCalendarGridBody = ReturnType<typeof RangeCalendarGridBody>;
+export default RangeCalendarGridBody;

package/dist/components/ui/range-calendar/range-calendar-grid-head.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		...restProps
+	}: RangeCalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridHead bind:ref {...restProps} />

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

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarGridHead: import("svelte").Component<RangeCalendarPrimitive.GridHeadProps, {}, "ref">;
+type RangeCalendarGridHead = ReturnType<typeof RangeCalendarGridHead>;
+export default RangeCalendarGridHead;

package/dist/components/ui/range-calendar/range-calendar-grid-row.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridRowProps = $props();
+</script>
+
+<RangeCalendarPrimitive.GridRow
+	bind:ref
+	class={cn("flex", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+declare const RangeCalendarGridRow: import("svelte").Component<RangeCalendarPrimitive.GridRowProps, {}, "ref">;
+type RangeCalendarGridRow = ReturnType<typeof RangeCalendarGridRow>;
+export default RangeCalendarGridRow;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.GridProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Grid
+	bind:ref
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	{...restProps}
+/>