@vibesdotdev/kit 0.0.0-stage → 1.0.0-rc.3

package/dist/lib/components/ui/popover/trigger-content.test-fixture.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">import * as Popover from "./index.js";
+import * as Tooltip from "../tooltip/index.js";
+</script>
+
+<Popover.Root><Popover.Trigger>Ask first</Popover.Trigger></Popover.Root>
+<Tooltip.Provider
+	><Tooltip.Root><Tooltip.Trigger>Open terminal</Tooltip.Trigger></Tooltip.Root></Tooltip.Provider
+>

package/dist/lib/components/ui/popover/trigger-content.test-fixture.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TriggerContent: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TriggerContent = InstanceType<typeof TriggerContent>;
+export default TriggerContent;

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

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

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

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

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

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

package/dist/lib/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/lib/components/ui/radio-group/index.d.ts

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

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

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+import { Icon } from "../../icon";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn(
+		"relative min-h-0 max-md:before:absolute max-md:before:-inset-3.5 max-md:before:content-['']",
+		'aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40',
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
+			{#if checked}
+				<Icon
+					icon="lucide:circle"
+					class="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary"
+				/>
+			{/if}
+		</div>
+	{/snippet}
+</RadioGroupPrimitive.Item>

package/dist/lib/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/lib/components/ui/radio-group/radio-group.svelte

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

package/dist/lib/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, {}, "value" | "ref">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

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

@@ -0,0 +1,19 @@
+import Root from './range-calendar.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 HeadCell from './range-calendar-head-cell.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';
+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

@@ -0,0 +1,21 @@
+import Root from './range-calendar.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 HeadCell from './range-calendar-head-cell.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';
+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

@@ -0,0 +1,48 @@
+<script lang="ts">import RangeCalendarMonthSelect from "./range-calendar-month-select.svelte";
+import RangeCalendarYearSelect from "./range-calendar-year-select.svelte";
+import { formatCaptionMonth, formatCaptionYear, monthOptions, placeholderForMonth, placeholderForYear, yearOptions } from "../calendar/caption-options.js";
+let { captionLayout, months, monthFormat, years, yearFormat, month, locale, placeholder = $bindable(), monthIndex = 0 } = $props();
+const monthItems = $derived(monthOptions({
+	months,
+	monthFormat,
+	locale
+}));
+const yearItems = $derived(yearOptions({
+	years,
+	yearFormat,
+	locale,
+	displayedYear: month.year
+}));
+function chooseMonth(next) {
+	if (placeholder) placeholder = placeholderForMonth(placeholder, month, next, monthIndex);
+}
+function chooseYear(next) {
+	if (placeholder) placeholder = placeholderForYear(placeholder, month, next, monthIndex);
+}
+</script>
+
+{#snippet MonthSelect()}
+	<RangeCalendarMonthSelect months={monthItems} value={month.month} onValueChange={chooseMonth} />
+{/snippet}
+
+{#snippet YearSelect()}
+	<RangeCalendarYearSelect years={yearItems} value={month.year} onValueChange={chooseYear} />
+{/snippet}
+
+{#if captionLayout === 'dropdown'}
+	{@render MonthSelect()}
+	{@render YearSelect()}
+{:else if captionLayout === 'dropdown-months'}
+	{@render MonthSelect()}
+	{#if placeholder}
+		{formatCaptionYear(placeholder.year, yearFormat, locale)}
+	{/if}
+{:else if captionLayout === 'dropdown-years'}
+	{#if placeholder}
+		{formatCaptionMonth(placeholder.month, monthFormat, locale)}
+	{/if}
+	{@render YearSelect()}
+{:else}
+	{formatCaptionMonth(month.month, monthFormat, locale)}
+	{formatCaptionYear(month.year, yearFormat, locale)}
+{/if}

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

@@ -0,0 +1,17 @@
+import type { DateValue } from '@internationalized/date';
+import { type CaptionMonthFormat, type CaptionYearFormat } from '../calendar/caption-options.ts';
+type $$ComponentProps = {
+    captionLayout: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
+    /** 1-based months to offer, as the RangeCalendar root receives them. */
+    months?: number[];
+    monthFormat?: CaptionMonthFormat;
+    years?: number[];
+    yearFormat?: CaptionYearFormat;
+    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/lib/components/ui/range-calendar/range-calendar-cell.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $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-md [&:first-child[data-selected]_[data-bits-day]]:rounded-s-md [&:has([data-range-end])]:rounded-e-md 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-md last:[&:has([data-range-middle])]:rounded-e-md dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-range-start])]:rounded-s-md dark:[&:has([data-range-start])]:hover:bg-accent [&:has([data-selected])]:bg-accent [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md',
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/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/lib/components/ui/range-calendar/range-calendar-day.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: 'ghost' }),
+		'flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none',
+		'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 dark:data-[range-start]:hover:bg-accent',
+		// range End
+		'data-[range-end]:bg-primary data-[range-end]:text-primary-foreground dark:data-[range-end]:hover:bg-accent',
+		// 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',
+		// hover
+		'dark:hover:text-accent-foreground',
+		// focus
+		'focus:relative focus:border-ring focus:ring-ring/50',
+		// inner spans
+		'[&>span]:text-xs [&>span]:opacity-70',
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/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/lib/components/ui/range-calendar/range-calendar-grid-body.svelte

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

package/dist/lib/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/lib/components/ui/range-calendar/range-calendar-grid-head.svelte

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

package/dist/lib/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/lib/components/ui/range-calendar/range-calendar-grid-row.svelte

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

package/dist/lib/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/lib/components/ui/range-calendar/range-calendar-grid.svelte

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

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

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

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

@@ -0,0 +1,13 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<RangeCalendarPrimitive.HeadCell
+	bind:ref
+	class={cn(
+		'w-(--cell-size) rounded-md text-[0.8rem] font-normal text-muted-foreground',
+		className
+	)}
+	{...restProps}
+/>

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<RangeCalendarPrimitive.Heading
+	bind:ref
+	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,14 @@
+<script lang="ts">import CaptionSelect from "../calendar/caption-select.svelte";
+import { monthOptions } from "../calendar/caption-options.js";
+let { ref = $bindable(null), class: className, value, months = monthOptions({ locale: "en-US" }), "aria-label": label = "Select a month", onchange, onValueChange } = $props();
+</script>
+
+<CaptionSelect
+	bind:ref
+	class={className}
+	{value}
+	options={months}
+	{label}
+	{onchange}
+	{onValueChange}
+/>

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

@@ -0,0 +1,15 @@
+import { type CaptionOption } from '../calendar/caption-options.ts';
+interface Props {
+    ref?: HTMLElement | null;
+    class?: string;
+    /** The shown month, 1-12 (`DateValue.month`). */
+    value?: number;
+    /** Options with 1-based month values; every month in English when absent. */
+    months?: CaptionOption[];
+    'aria-label'?: string;
+    onchange?: (e: Event) => void;
+    onValueChange?: (month: number) => void;
+}
+declare const RangeCalendarMonthSelect: import("svelte").Component<Props, {}, "ref">;
+type RangeCalendarMonthSelect = ReturnType<typeof RangeCalendarMonthSelect>;
+export default RangeCalendarMonthSelect;

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

@@ -0,0 +1,7 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div {...restProps} bind:this={ref} class={cn('flex flex-col', className)}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,11 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('relative flex flex-col gap-4 md:flex-row', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+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-nav.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<nav
+	{...restProps}
+	bind:this={ref}
+	class={cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', className)}
+>
+	{@render children?.()}
+</nav>

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

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

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

@@ -0,0 +1,21 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { Icon } from "../../icon";
+import { buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, variant = "ghost", ...restProps } = $props();
+</script>
+
+{#snippet Fallback()}
+	<Icon icon="lucide:chevron-right" class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

@@ -0,0 +1,8 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = RangeCalendarPrimitive.NextButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const RangeCalendarNextButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type RangeCalendarNextButton = ReturnType<typeof RangeCalendarNextButton>;
+export default RangeCalendarNextButton;

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

@@ -0,0 +1,21 @@
+<script lang="ts">import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import { Icon } from "../../icon";
+import { buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils.js";
+let { ref = $bindable(null), class: className, children, variant = "ghost", ...restProps } = $props();
+</script>
+
+{#snippet Fallback()}
+	<Icon icon="lucide:chevron-left" class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant }),
+		'size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180',
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

@@ -0,0 +1,8 @@
+import { RangeCalendar as RangeCalendarPrimitive } from 'bits-ui';
+import { type ButtonVariant } from '../button/index.js';
+type $$ComponentProps = RangeCalendarPrimitive.PrevButtonProps & {
+    variant?: ButtonVariant;
+};
+declare const RangeCalendarPrevButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type RangeCalendarPrevButton = ReturnType<typeof RangeCalendarPrevButton>;
+export default RangeCalendarPrevButton;

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

@@ -0,0 +1,10 @@
+<script lang="ts">import CaptionSelect from "../calendar/caption-select.svelte";
+import { yearOptions } from "../calendar/caption-options.js";
+let { ref = $bindable(null), class: className, value, years = [], "aria-label": label = "Select a year", onchange, onValueChange } = $props();
+const options = $derived(years.length > 0 ? years : yearOptions({
+	locale: "en-US",
+	displayedYear: value ?? new Date().getFullYear()
+}));
+</script>
+
+<CaptionSelect bind:ref class={className} {value} {options} {label} {onchange} {onValueChange} />

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

@@ -0,0 +1,15 @@
+import { type CaptionOption } from '../calendar/caption-options.ts';
+interface Props {
+    ref?: HTMLElement | null;
+    class?: string;
+    /** The shown year. */
+    value?: number;
+    /** Options to offer; ten years either side of the shown year when absent or empty. */
+    years?: CaptionOption[];
+    'aria-label'?: string;
+    onchange?: (e: Event) => void;
+    onValueChange?: (year: number) => void;
+}
+declare const RangeCalendarYearSelect: import("svelte").Component<Props, {}, "ref">;
+type RangeCalendarYearSelect = ReturnType<typeof RangeCalendarYearSelect>;
+export default RangeCalendarYearSelect;