@kayord/ui 0.20.1 → 1.0.1

package/dist/components/custom/avatar-group/avatar-group-etc.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { AvatarGroupEtcProps } from "./types";
+
+	let { ref = $bindable(null), plus, class: className, ...rest }: AvatarGroupEtcProps = $props();
+</script>
+
+<div
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		"bg-accent ring-background relative flex size-8 items-center justify-center rounded-full text-xs ring-2",
+		className
+	)}
+>
+	<span>+{plus}</span>
+</div>

package/dist/components/custom/avatar-group/avatar-group-etc.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupEtcProps } from "./types";
+declare const AvatarGroupEtc: import("svelte").Component<AvatarGroupEtcProps, {}, "ref">;
+type AvatarGroupEtc = ReturnType<typeof AvatarGroupEtc>;
+export default AvatarGroupEtc;

package/dist/components/custom/avatar-group/avatar-group-member.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Avatar } from "../../..";
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils";
+
+	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<Avatar.Root bind:ref class={cn("bg-accent ring-background ring-2", className)} {...restProps} />

package/dist/components/custom/avatar-group/avatar-group-member.svelte.d.ts

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

package/dist/components/custom/avatar-group/avatar-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { AvatarGroupRootProps } from "./types";
+
+	let {
+		ref = $bindable(null),
+		orientation = "horizontal",
+		class: className,
+		children,
+		...rest
+	}: AvatarGroupRootProps = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-orientation={orientation}
+	class={cn(
+		'group/avatar-group flex items-center data-[orientation="horizontal"]:flex-row data-[orientation="horizontal"]:-space-x-2 data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:-space-y-2',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/dist/components/custom/avatar-group/avatar-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupRootProps } from "./types";
+declare const AvatarGroup: import("svelte").Component<AvatarGroupRootProps, {}, "ref">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/custom/avatar-group/index.d.ts

@@ -0,0 +1,6 @@
+import Root from "./avatar-group.svelte";
+import Member from "./avatar-group-member.svelte";
+import Etc from "./avatar-group-etc.svelte";
+import { Fallback, Image } from "../../ui/avatar";
+export { Root, Member, Etc, Image as MemberImage, Fallback as MemberFallback };
+export type * from "./types";

package/dist/components/custom/avatar-group/index.js

@@ -0,0 +1,5 @@
+import Root from "./avatar-group.svelte";
+import Member from "./avatar-group-member.svelte";
+import Etc from "./avatar-group-etc.svelte";
+import { Fallback, Image } from "../../ui/avatar";
+export { Root, Member, Etc, Image as MemberImage, Fallback as MemberFallback };

package/dist/components/custom/avatar-group/types.d.ts

@@ -0,0 +1,13 @@
+import type { Avatar as AvatarPrimitive, WithChildren, WithoutChildren } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+export type AvatarGroupRootPropsWithoutHTML = WithChildren<{
+    ref?: HTMLElement | null;
+    orientation?: "vertical" | "horizontal";
+}>;
+export type AvatarGroupRootProps = AvatarGroupRootPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type AvatarGroupMemberProps = AvatarPrimitive.RootProps;
+export type AvatarGroupEtcPropsWithoutHTML = WithChildren<{
+    ref?: HTMLElement | null;
+    plus: number;
+}>;
+export type AvatarGroupEtcProps = AvatarGroupEtcPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;

package/dist/components/custom/avatar-group/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/custom/index.d.ts

@@ -8,3 +8,4 @@ export * as TreeView from "./tree-view/index.js";
 export { ThemeSelector } from "./theme-selector/index.js";
 export { LightSwitch } from "./light-switch.svelte/index.js";
 export * from "./animations/index.js";
+export * as AvatarGroup from "./avatar-group/index.js";

package/dist/components/custom/index.js

@@ -8,3 +8,4 @@ export * as TreeView from "./tree-view/index.js";
 export { ThemeSelector } from "./theme-selector/index.js";
 export { LightSwitch } from "./light-switch.svelte/index.js";
 export * from "./animations/index.js";
+export * as AvatarGroup from "./avatar-group/index.js";

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

@@ -13,13 +13,10 @@
 <AccordionPrimitive.Content
 	bind:ref
 	data-slot="accordion-content"
-	class={cn(
-		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-		className
-	)}
+	class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 	{...restProps}
 >
-	<div class="pt-0 pb-4">
+	<div class={cn("pt-0 pb-4", className)}>
 		{@render children?.()}
 	</div>
 </AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), value = $bindable(), ...restProps }: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root bind:ref bind:value={value as never} data-slot="accordion" {...restProps} />

package/dist/components/ui/accordion/accordion.svelte.d.ts

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

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

@@ -1,4 +1,4 @@
-import Root from "./accordion-root.svelte";
+import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";

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

@@ -1,4 +1,4 @@
-import Root from "./accordion-root.svelte";
+import Root from "./accordion.svelte";
 import Content from "./accordion-content.svelte";
 import Item from "./accordion-item.svelte";
 import Trigger from "./accordion-trigger.svelte";

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

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type Calendar from "./calendar.svelte";
+	import CalendarMonthSelect from "./calendar-month-select.svelte";
+	import CalendarYearSelect from "./calendar-year-select.svelte";
+	import { DateFormatter, getLocalTimeZone, type DateValue } from "@internationalized/date";
+
+	let {
+		captionLayout,
+		months,
+		monthFormat,
+		years,
+		yearFormat,
+		month,
+		locale,
+		placeholder = $bindable(),
+		monthIndex = 0,
+	}: {
+		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
+		months: ComponentProps<typeof CalendarMonthSelect>["months"];
+		monthFormat: ComponentProps<typeof CalendarMonthSelect>["monthFormat"];
+		years: ComponentProps<typeof CalendarYearSelect>["years"];
+		yearFormat: ComponentProps<typeof CalendarYearSelect>["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()}
+	<CalendarMonthSelect
+		{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()}
+	<CalendarYearSelect {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/calendar/calendar-caption.svelte.d.ts

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

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

@@ -8,7 +8,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		"relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
 		className
 	)}
 	{...restProps}

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

@@ -10,16 +10,21 @@
 	bind:ref
 	class={cn(
 		buttonVariants({ variant: "ghost" }),
-		"size-8 p-0 font-normal select-none",
-		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
-		// Selected
-		"data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground dark:data-selected:hover:bg-primary dark:data-selected:focus:bg-primary data-selected:opacity-100",
+		"flex size-(--cell-size) flex-col items-center justify-center gap-1 p-0 leading-none font-normal whitespace-nowrap select-none",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground",
+		"data-[selected]:bg-primary dark:data-[selected]:hover:bg-accent/50 data-[selected]:text-primary-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:opacity-50",
+		"data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		// Unavailable
-		"data-unavailable:text-destructive-foreground data-unavailable:line-through",
-		// Outside months
-		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		"data-[unavailable]:text-muted-foreground data-[unavailable]:line-through",
+		// hover
+		"dark:hover:text-accent-foreground",
+		// focus
+		"focus:border-ring focus:ring-ring/50 focus:relative",
+		// inner spans
+		"[&>span]:text-xs [&>span]:opacity-70",
 		className
 	)}
 	{...restProps}

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

@@ -5,4 +5,8 @@
 	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.GridProps = $props();
 </script>
 
-<CalendarPrimitive.Grid bind:ref class={cn("w-full border-collapse space-y-1", className)} {...restProps} />
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("mt-4 flex w-full border-collapse flex-col gap-1", className)}
+	{...restProps}
+/>

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

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

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

@@ -7,6 +7,6 @@
 
 <CalendarPrimitive.Header
 	bind:ref
-	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	class={cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", className)}
 	{...restProps}
 />

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

@@ -5,4 +5,4 @@
 	let { ref = $bindable(null), class: className, ...restProps }: CalendarPrimitive.HeadingProps = $props();
 </script>
 
-<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />
+<CalendarPrimitive.Heading bind:ref class={cn("px-(--cell-size) text-sm font-medium", className)} {...restProps} />

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		onchange,
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.MonthSelectProps> = $props();
+</script>
+
+<span
+	class={cn(
+		"has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]",
+		className
+	)}
+>
+	<CalendarPrimitive.MonthSelect bind:ref class="absolute inset-0 opacity-0" {...restProps}>
+		{#snippet child({ props, monthItems, selectedMonthItem })}
+			<select {...props} {value} {onchange}>
+				{#each monthItems as monthItem (monthItem.value)}
+					<option
+						value={monthItem.value}
+						selected={value !== undefined ? monthItem.value === value : monthItem.value === selectedMonthItem.value}
+					>
+						{monthItem.label}
+					</option>
+				{/each}
+			</select>
+			<span
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm font-medium select-none [&>svg]:size-3.5"
+				aria-hidden="true"
+			>
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				<ChevronDownIcon class="size-4" />
+			</span>
+		{/snippet}
+	</CalendarPrimitive.MonthSelect>
+</span>

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

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

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

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

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

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

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

@@ -10,10 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div
-	bind:this={ref}
-	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4", className)}
-	{...restProps}
->
+<div bind:this={ref} class={cn("relative flex flex-col gap-4 md:flex-row", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/calendar/calendar-nav.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $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/components/ui/calendar/calendar-nav.svelte.d.ts

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

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

@@ -1,10 +1,18 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, children, ...restProps }: CalendarPrimitive.PrevButtonProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.NextButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
@@ -14,8 +22,8 @@
 <CalendarPrimitive.NextButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}

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

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

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

@@ -1,10 +1,18 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
-	import { buttonVariants } from "../button/index.js";
+	import { buttonVariants, type ButtonVariant } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
-	let { ref = $bindable(null), class: className, children, ...restProps }: CalendarPrimitive.PrevButtonProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "ghost",
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps & {
+		variant?: ButtonVariant;
+	} = $props();
 </script>
 
 {#snippet Fallback()}
@@ -14,8 +22,8 @@
 <CalendarPrimitive.PrevButton
 	bind:ref
 	class={cn(
-		buttonVariants({ variant: "outline" }),
-		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		buttonVariants({ variant }),
+		"size-(--cell-size) bg-transparent p-0 select-none disabled:opacity-50 rtl:rotate-180",
 		className
 	)}
 	children={children || Fallback}

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

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

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

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

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

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