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

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

@@ -1,16 +1,55 @@
 <script lang="ts">
-	import { RangeCalendar as RangeCalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import * as RangeCalendar from "./index.js";
-	import { cn } from "../../../utils";
+	import { isEqualMonth, type DateValue } from "@internationalized/date";
+	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
+	import type { ButtonVariant } from "../button/index.js";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import RangeCalendarCaption from "./range-calendar-caption.svelte";
+	import RangeCalendarCell from "./range-calendar-cell.svelte";
+	import RangeCalendarDay from "./range-calendar-day.svelte";
+	import RangeCalendarGridBody from "./range-calendar-grid-body.svelte";
+	import RangeCalendarGridHead from "./range-calendar-grid-head.svelte";
+	import RangeCalendarGridRow from "./range-calendar-grid-row.svelte";
+	import RangeCalendarGrid from "./range-calendar-grid.svelte";
+	import RangeCalendarHeadCell from "./range-calendar-head-cell.svelte";
+	import RangeCalendarHeader from "./range-calendar-header.svelte";
+	import RangeCalendarMonth from "./range-calendar-month.svelte";
+	import RangeCalendarMonths from "./range-calendar-months.svelte";
+	import RangeCalendarNav from "./range-calendar-nav.svelte";
+	import RangeCalendarNextButton from "./range-calendar-next-button.svelte";
+	import RangeCalendarPrevButton from "./range-calendar-prev-button.svelte";
+	import type { Snippet } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		placeholder = $bindable(),
-		class: className,
 		weekdayFormat = "short",
+		class: className,
+		buttonVariant = "ghost",
+		captionLayout = "label",
+		locale = "en-US",
+		months: monthsProp,
+		years,
+		monthFormat: monthFormatProp,
+		yearFormat = "numeric",
+		day,
+		disableDaysOutsideMonth = false,
 		...restProps
-	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> = $props();
+	}: WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+		buttonVariant?: ButtonVariant;
+		captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+		months?: RangeCalendarPrimitive.MonthSelectProps["months"];
+		years?: RangeCalendarPrimitive.YearSelectProps["years"];
+		monthFormat?: RangeCalendarPrimitive.MonthSelectProps["monthFormat"];
+		yearFormat?: RangeCalendarPrimitive.YearSelectProps["yearFormat"];
+		day?: Snippet<[{ day: DateValue; outsideMonth: boolean }]>;
+	} = $props();
+
+	const monthFormat = $derived.by(() => {
+		if (monthFormatProp) return monthFormatProp;
+		if (captionLayout.startsWith("dropdown")) return "short";
+		return "long";
+	});
 </script>
 
 <RangeCalendarPrimitive.Root
@@ -18,40 +57,69 @@
 	bind:value
 	bind:placeholder
 	{weekdayFormat}
-	class={cn("p-3", className)}
+	{disableDaysOutsideMonth}
+	class={cn(
+		"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] group/calendar bg-background p-3 [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+		className
+	)}
+	{locale}
+	{monthFormat}
+	{yearFormat}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<RangeCalendar.Header>
-			<RangeCalendar.PrevButton />
-			<RangeCalendar.Heading />
-			<RangeCalendar.NextButton />
-		</RangeCalendar.Header>
-		<RangeCalendar.Months>
-			{#each months as month (month)}
-				<RangeCalendar.Grid>
-					<RangeCalendar.GridHead>
-						<RangeCalendar.GridRow class="flex">
-							{#each weekdays as weekday (weekday)}
-								<RangeCalendar.HeadCell>
-									{weekday.slice(0, 2)}
-								</RangeCalendar.HeadCell>
-							{/each}
-						</RangeCalendar.GridRow>
-					</RangeCalendar.GridHead>
-					<RangeCalendar.GridBody>
-						{#each month.weeks as weekDates (weekDates)}
-							<RangeCalendar.GridRow class="mt-2 w-full">
-								{#each weekDates as date (date)}
-									<RangeCalendar.Cell {date} month={month.value}>
-										<RangeCalendar.Day />
-									</RangeCalendar.Cell>
+		<RangeCalendarMonths>
+			<RangeCalendarNav>
+				<RangeCalendarPrevButton variant={buttonVariant} />
+				<RangeCalendarNextButton variant={buttonVariant} />
+			</RangeCalendarNav>
+			{#each months as month, monthIndex (month)}
+				<RangeCalendarMonth>
+					<RangeCalendarHeader>
+						<RangeCalendarCaption
+							{captionLayout}
+							months={monthsProp}
+							{monthFormat}
+							{years}
+							{yearFormat}
+							month={month.value}
+							bind:placeholder
+							{locale}
+							{monthIndex}
+						/>
+					</RangeCalendarHeader>
+
+					<RangeCalendarGrid>
+						<RangeCalendarGridHead>
+							<RangeCalendarGridRow class="select-none">
+								{#each weekdays as weekday, i (i)}
+									<RangeCalendarHeadCell>
+										{weekday.slice(0, 2)}
+									</RangeCalendarHeadCell>
 								{/each}
-							</RangeCalendar.GridRow>
-						{/each}
-					</RangeCalendar.GridBody>
-				</RangeCalendar.Grid>
+							</RangeCalendarGridRow>
+						</RangeCalendarGridHead>
+						<RangeCalendarGridBody>
+							{#each month.weeks as weekDates (weekDates)}
+								<RangeCalendarGridRow class="mt-2 w-full">
+									{#each weekDates as date (date)}
+										<RangeCalendarCell {date} month={month.value}>
+											{#if day}
+												{@render day({
+													day: date,
+													outsideMonth: !isEqualMonth(date, month.value),
+												})}
+											{:else}
+												<RangeCalendarDay />
+											{/if}
+										</RangeCalendarCell>
+									{/each}
+								</RangeCalendarGridRow>
+							{/each}
+						</RangeCalendarGridBody>
+					</RangeCalendarGrid>
+				</RangeCalendarMonth>
 			{/each}
-		</RangeCalendar.Months>
+		</RangeCalendarMonths>
 	{/snippet}
 </RangeCalendarPrimitive.Root>

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

@@ -1,5 +1,20 @@
+import { type DateValue } from "@internationalized/date";
 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">, {}, "placeholder" | "ref" | "value">;
+import type { ButtonVariant } from "../button/index.js";
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps> & {
+    buttonVariant?: ButtonVariant;
+    captionLayout?: "dropdown" | "dropdown-months" | "dropdown-years" | "label";
+    months?: RangeCalendarPrimitive.MonthSelectProps["months"];
+    years?: RangeCalendarPrimitive.YearSelectProps["years"];
+    monthFormat?: RangeCalendarPrimitive.MonthSelectProps["monthFormat"];
+    yearFormat?: RangeCalendarPrimitive.YearSelectProps["yearFormat"];
+    day?: Snippet<[{
+        day: DateValue;
+        outsideMonth: boolean;
+    }]>;
+};
+declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "placeholder" | "ref" | "value">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

package/dist/lib/components/ui/resizable/resizable-handle.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	import GripVertical from "@lucide/svelte/icons/grip-vertical";
 	import * as ResizablePrimitive from "paneforge";
-	import type { WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,15 +14,14 @@
 
 <ResizablePrimitive.PaneResizer
 	bind:ref
+	data-slot="resizable-handle"
 	class={cn(
-		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
+		"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:translate-x-0 data-[direction=vertical]:after:-translate-y-1/2 [&[data-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...restProps}
 >
 	{#if withHandle}
-		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
-			<GripVertical class="size-2.5" />
-		</div>
+		<div class="bg-border h-6 w-1 rounded-lg z-10 flex shrink-0"></div>
 	{/if}
 </ResizablePrimitive.PaneResizer>

package/dist/lib/components/ui/resizable/resizable-handle.svelte.d.ts

@@ -1,5 +1,5 @@
 import * as ResizablePrimitive from "paneforge";
-import type { WithoutChildrenOrChild } from "bits-ui";
+import { type WithoutChildrenOrChild } from "../../utils.js";
 type $$ComponentProps = WithoutChildrenOrChild<ResizablePrimitive.PaneResizerProps> & {
     withHandle?: boolean;
 };

package/dist/lib/components/ui/resizable/resizable-pane-group.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import * as ResizablePrimitive from "paneforge";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
-		class: className,
-		direction,
 		this: paneGroup = $bindable(),
+		class: className,
 		...restProps
 	}: ResizablePrimitive.PaneGroupProps & {
 		this?: ResizablePrimitive.PaneGroup;
@@ -16,7 +15,10 @@
 <ResizablePrimitive.PaneGroup
 	bind:ref
 	bind:this={paneGroup}
-	{direction}
-	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	data-slot="resizable-pane-group"
+	class={cn(
+		"flex h-full w-full data-[direction=vertical]:flex-col",
+		className
+	)}
 	{...restProps}
 />

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

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,17 +13,18 @@
 
 <ScrollAreaPrimitive.Scrollbar
 	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
 	{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",
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
-		class={cn("bg-border relative rounded-full", orientation === "vertical" && "flex-1")}
+		data-slot="scroll-area-thumb"
+		class="rounded-full relative flex-1 bg-border"
 	/>
 </ScrollAreaPrimitive.Scrollbar>

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

@@ -1,10 +1,11 @@
 <script lang="ts">
-	import { ScrollArea as ScrollAreaPrimitive, type WithoutChild } from "bits-ui";
-	import { Scrollbar } from "./index.js";
-	import { cn } from "../../../utils";
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../utils.js";
+	import Scrollbar from "./scroll-area-scrollbar.svelte";
 
 	let {
 		ref = $bindable(null),
+		viewportRef = $bindable(null),
 		class: className,
 		orientation = "vertical",
 		scrollbarXClasses = "",
@@ -15,11 +16,21 @@
 		orientation?: "vertical" | "horizontal" | "both" | undefined;
 		scrollbarXClasses?: string | undefined;
 		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
 	} = $props();
 </script>
 
-<ScrollAreaPrimitive.Root bind:ref {...restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}

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

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

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

@@ -1,11 +1,13 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import Content from "./select-content.svelte";
 import GroupHeading from "./select-group-heading.svelte";
+import Group from "./select-group.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 Label from "./select-label.svelte";
+import Portal from "./select-portal.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, Item, Group, GroupHeading, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, Root as Select, Item as SelectItem, Group as SelectGroup, GroupHeading as SelectGroupHeading, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+import Value from "./select-value.svelte";
+import Root from "./select.svelte";
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, Value, Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, Portal as SelectPortal, Value as SelectValue, };

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

@@ -1,13 +1,15 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import Content from "./select-content.svelte";
 import GroupHeading from "./select-group-heading.svelte";
+import Group from "./select-group.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 Label from "./select-label.svelte";
+import Portal from "./select-portal.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, Item, Group, GroupHeading, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, 
+import Separator from "./select-separator.svelte";
+import Trigger from "./select-trigger.svelte";
+import Value from "./select-value.svelte";
+import Root from "./select.svelte";
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, Value, 
 //
-Root as Select, Item as SelectItem, Group as SelectGroup, GroupHeading as SelectGroupHeading, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, };
+Root as Select, Group as SelectGroup, Label as SelectLabel, Item as SelectItem, Content as SelectContent, Trigger as SelectTrigger, Separator as SelectSeparator, ScrollDownButton as SelectScrollDownButton, ScrollUpButton as SelectScrollUpButton, GroupHeading as SelectGroupHeading, Portal as SelectPortal, Value as SelectValue, };

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

@@ -1,7 +1,11 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import * as Select from "./index.js";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "../../utils.js";
+	import type { WithoutChildrenOrChild } from "../../utils.js";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -9,30 +13,33 @@
 		sideOffset = 4,
 		portalProps,
 		children,
+		preventScroll = true,
 		...restProps
 	}: WithoutChild<SelectPrimitive.ContentProps> & {
-		portalProps?: SelectPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
 	} = $props();
 </script>
 
-<SelectPrimitive.Portal {...portalProps}>
+<SelectPortal {...portalProps}>
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
 		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",
+			"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 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto",
 			className
 		)}
 		{...restProps}
 	>
-		<Select.ScrollUpButton />
+		<SelectScrollUpButton />
 		<SelectPrimitive.Viewport
 			class={cn(
-				"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1"
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
 			)}
 		>
 			{@render children?.()}
 		</SelectPrimitive.Viewport>
-		<Select.ScrollDownButton />
+		<SelectScrollDownButton />
 	</SelectPrimitive.Content>
-</SelectPrimitive.Portal>
+</SelectPortal>

package/dist/lib/components/ui/select/select-content.svelte.d.ts

@@ -1,6 +1,10 @@
-import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
+import { Select as SelectPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../utils.js";
+import type { WithoutChildrenOrChild } from "../../utils.js";
+import SelectPortal from "./select-portal.svelte";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = WithoutChild<SelectPrimitive.ContentProps> & {
-    portalProps?: SelectPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
 };
 declare const SelectContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type SelectContent = ReturnType<typeof SelectContent>;

package/dist/lib/components/ui/select/select-group-heading.svelte

@@ -1,16 +1,21 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { cn } from "../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
-	}: SelectPrimitive.GroupHeadingProps = $props();
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
 </script>
 
 <SelectPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", className)}
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
 	{...restProps}
-/>
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>

package/dist/lib/components/ui/select/select-group-heading.svelte.d.ts

@@ -1,4 +1,10 @@
-import { Select as SelectPrimitive } from "bits-ui";
-declare const SelectGroupHeading: import("svelte").Component<SelectPrimitive.GroupHeadingProps, {}, "ref">;
+declare const SelectGroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
 type SelectGroupHeading = ReturnType<typeof SelectGroupHeading>;
 export default SelectGroupHeading;

package/dist/lib/components/ui/select/select-group.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/select/select-group.svelte.d.ts

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

package/dist/lib/components/ui/select/select-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,22 +16,27 @@
 <SelectPrimitive.Item
 	bind:ref
 	{value}
+	{label}
+	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+		<span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
 			{#if selected}
-				<Check class="size-4" />
+				<CheckIcon class="pointer-events-none" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
 			{/if}
 		</span>
-		{#if childrenProp}
-			{@render childrenProp({ selected, highlighted })}
-		{:else}
-			{label || value}
-		{/if}
 	{/snippet}
 </SelectPrimitive.Item>

package/dist/lib/components/ui/select/select-label.svelte

@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/select/select-label.svelte.d.ts

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

package/dist/lib/components/ui/select/select-portal.svelte

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

package/dist/lib/components/ui/select/select-portal.svelte.d.ts

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

package/dist/lib/components/ui/select/select-scroll-down-button.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import ChevronDown from "@lucide/svelte/icons/chevron-down";
-	import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import { cn } from "../../../utils";
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,8 +12,9 @@
 
 <SelectPrimitive.ScrollDownButton
 	bind:ref
-	class={cn("flex cursor-default items-center justify-center py-1", className)}
+	data-slot="select-scroll-down-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className)}
 	{...restProps}
 >
-	<ChevronDown class="size-4" />
+	<ChevronDownIcon  />
 </SelectPrimitive.ScrollDownButton>