@widgetic/design-system 0.3.68

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Progress as ProgressPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		max = 100,
+		value,
+		...restProps
+	}: WithoutChildrenOrChild<ProgressPrimitive.RootProps> = $props();
+</script>
+
+<ProgressPrimitive.Root
+	bind:ref
+	class={cn("bg-secondary relative h-4 w-full overflow-hidden rounded-full", className)}
+	{value}
+	{max}
+	{...restProps}
+>
+	<div
+		class="bg-primary h-full w-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 Root from "./radio-group.svelte";
+import Item from "./radio-group-item.svelte";
+export { Root, Item, Root as RadioGroup, Item as RadioGroupItem };

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

@@ -0,0 +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.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RadioGroupPrimitive.ItemProps> = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	class={cn(
+		"border-primary text-primary ring-offset-background focus-visible:ring-ring aspect-square size-4 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<div class="flex items-center justify-center">
+			{#if checked}
+				<Circle class="size-2.5 fill-current text-current" />
+			{/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,13 @@
+<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 class={cn("grid gap-2", 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,15 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+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";
+declare const GridHead: import("svelte").Component<RangeCalendarPrimitive.GridHeadProps, {}, "ref">;
+declare const GridBody: import("svelte").Component<RangeCalendarPrimitive.GridBodyProps, {}, "ref">;
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Root as RangeCalendar, };

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

@@ -0,0 +1,17 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+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";
+const GridHead = RangeCalendarPrimitive.GridHead;
+const GridBody = RangeCalendarPrimitive.GridBody;
+export { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, 
+//
+Root as RangeCalendar, };

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

@@ -0,0 +1,19 @@
+<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(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
+		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,34 @@
+<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
+	}: RangeCalendarPrimitive.DayProps = $props();
+
+	// export { className as class };
+</script>
+
+<RangeCalendarPrimitive.Day
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-9 p-0 font-normal data-[selected]:opacity-100",
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selection Start
+		"data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground",
+		// Selection End
+		"data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground",
+		// 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",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		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-row.svelte

@@ -0,0 +1,12 @@
+<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,16 @@
+<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("w-full border-collapse space-y-1", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RangeCalendarPrimitive.HeaderProps = $props();
+</script>
+
+<RangeCalendarPrimitive.Header
+	bind:ref
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRight class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: RangeCalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeft class="size-4" />
+{/snippet}
+
+<RangeCalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	children={children || Fallback}
+	{...restProps}
+/>

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

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

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

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import * as RangeCalendar from "./index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		weekdayFormat = "short",
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
+</script>
+
+<RangeCalendarPrimitive.Root
+	bind:ref
+	bind:value
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<RangeCalendar.Header>
+			<RangeCalendar.PrevButton />
+			<RangeCalendar.Heading />
+			<RangeCalendar.NextButton />
+		</RangeCalendar.Header>
+		<RangeCalendar.Months>
+			{#each months as month}
+				<RangeCalendar.Grid>
+					<RangeCalendar.GridHead>
+						<RangeCalendar.GridRow class="flex">
+							{#each weekdays as weekday}
+								<RangeCalendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</RangeCalendar.HeadCell>
+							{/each}
+						</RangeCalendar.GridRow>
+					</RangeCalendar.GridHead>
+					<RangeCalendar.GridBody>
+						{#each month.weeks as weekDates}
+							<RangeCalendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date}
+									<RangeCalendar.Cell {date} month={month.value}>
+										<RangeCalendar.Day />
+									</RangeCalendar.Cell>
+								{/each}
+							</RangeCalendar.GridRow>
+						{/each}
+					</RangeCalendar.GridBody>
+				</RangeCalendar.Grid>
+			{/each}
+		</RangeCalendar.Months>
+	{/snippet}
+</RangeCalendarPrimitive.Root>

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

@@ -0,0 +1,5 @@
+import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+import * as RangeCalendar from "./index.js";
+declare const RangeCalendar: import("svelte").Component<Omit<Omit<RangeCalendarPrimitive.RootProps, "child">, "children">, {}, "ref" | "value" | "placeholder">;
+type RangeCalendar = ReturnType<typeof RangeCalendar>;
+export default RangeCalendar;

package/dist/components/ui/scroll-area/index.d.ts

@@ -0,0 +1,3 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+export { Root, Scrollbar, Root as ScrollArea, Scrollbar as ScrollAreaScrollbar, };

package/dist/components/ui/scroll-area/index.js

@@ -0,0 +1,6 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+// @notCompound
+export { Root, Scrollbar, 
+//,
+Root as ScrollArea, Scrollbar as ScrollAreaScrollbar, };

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>

package/dist/components/ui/scroll-area/scroll-area-scrollbar.svelte.d.ts

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

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+	} = $props();
+</script>
+
+<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>

package/dist/components/ui/scroll-area/scroll-area.svelte.d.ts

@@ -0,0 +1,9 @@
+import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
+type $$ComponentProps = WithoutChild<ScrollAreaPrimitive.RootProps> & {
+    orientation?: "vertical" | "horizontal" | "both" | undefined;
+    scrollbarXClasses?: string | undefined;
+    scrollbarYClasses?: string | undefined;
+};
+declare const ScrollArea: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ScrollArea = ReturnType<typeof ScrollArea>;
+export default ScrollArea;

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

@@ -0,0 +1,11 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
+declare const Group: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton };

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

@@ -0,0 +1,13 @@
+import { Select as SelectPrimitive } from "bits-ui";
+import GroupHeading from "./select-group-heading.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+const Root = SelectPrimitive.Root;
+const Group = SelectPrimitive.Group;
+export { Root, Group, GroupHeading, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
+//
+Root as Select, Group as SelectGroup, GroupHeading as SelectGroupHeading, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton };

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: SelectPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		class={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>