@kayord/ui 2.0.10 → 2.0.12

package/dist/components/ui/pagination/pagination-next.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.NextButtonProps = $props();
+</script>
+
+<PaginationPrimitive.NextButton
+	bind:ref
+	aria-label="Go to next page"
+	class={cn(
+		buttonVariants({
+			size: "default",
+			variant: "ghost",
+			class: "gap-1 px-2.5 sm:pe-2.5",
+		}),
+		className
+	)}
+	{...restProps}
+>
+	<span class="hidden sm:block">Next</span>
+	<ChevronRightIcon /></PaginationPrimitive.NextButton
+>

package/dist/components/ui/pagination/pagination-next.svelte.d.ts

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

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

@@ -24,7 +24,7 @@
 		buttonVariants({
 			size: "default",
 			variant: "ghost",
-			class: "gap-1 px-2.5 sm:pl-2.5",
+			class: "gap-1 px-2.5 sm:ps-2.5",
 		}),
 		className
 	)}

package/dist/components/ui/pagination/pagination-previous.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Pagination as PaginationPrimitive } from "bits-ui";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let { ref = $bindable(null), class: className, ...restProps }: PaginationPrimitive.PrevButtonProps = $props();
+</script>
+
+<PaginationPrimitive.PrevButton
+	bind:ref
+	aria-label="Go to previous page"
+	class={cn(
+		buttonVariants({
+			size: "default",
+			variant: "ghost",
+			class: "gap-1 px-2.5 sm:ps-2.5",
+		}),
+		className
+	)}
+	{...restProps}
+>
+	<ChevronLeftIcon />
+	<span class="hidden sm:block">Previous</span></PaginationPrimitive.PrevButton
+>

package/dist/components/ui/pagination/pagination-previous.svelte.d.ts

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

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

@@ -1,6 +1,6 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
 import Content from "./popover-content.svelte";
 import Trigger from "./popover-trigger.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
-declare const Close: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
-export { Root, Content, Trigger, Close, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, };
+import Portal from "./popover-portal.svelte";
+export { Root, Content, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };

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

@@ -1,8 +1,8 @@
-import { Popover as PopoverPrimitive } from "bits-ui";
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
 import Content from "./popover-content.svelte";
 import Trigger from "./popover-trigger.svelte";
-const Root = PopoverPrimitive.Root;
-const Close = PopoverPrimitive.Close;
-export { Root, Content, Trigger, Close, 
+import Portal from "./popover-portal.svelte";
+export { Root, Content, Trigger, Close, Portal, 
 //
-Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, };
+Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal, };

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

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

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

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

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

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { cn } from "../../../utils.js";
 	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -10,20 +12,20 @@
 		portalProps,
 		...restProps
 	}: PopoverPrimitive.ContentProps & {
-		portalProps?: PopoverPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
 	} = $props();
 </script>
 
-<PopoverPrimitive.Portal {...portalProps}>
+<PopoverPortal {...portalProps}>
 	<PopoverPrimitive.Content
 		bind:ref
 		data-slot="popover-content"
 		{sideOffset}
 		{align}
 		class={cn(
-			"bg-popover text-popover-foreground 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 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground 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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--bits-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
 			className
 		)}
 		{...restProps}
 	/>
-</PopoverPrimitive.Portal>
+</PopoverPortal>

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />

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

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

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

@@ -22,7 +22,7 @@
 	{#snippet children({ checked })}
 		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
-				<CircleIcon class="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+				<CircleIcon class="fill-primary absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
 			{/if}
 		</div>
 	{/snippet}

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

@@ -1,4 +1,3 @@
-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";
@@ -15,6 +14,6 @@ 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";
-declare const GridHead: import("svelte").Component<RangeCalendarPrimitive.GridHeadProps, {}, "ref">;
-declare const GridBody: import("svelte").Component<RangeCalendarPrimitive.GridBodyProps, {}, "ref">;
+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/components/ui/range-calendar/index.js

@@ -1,4 +1,3 @@
-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";
@@ -15,8 +14,8 @@ 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";
-const GridHead = RangeCalendarPrimitive.GridHead;
-const GridBody = RangeCalendarPrimitive.GridBody;
+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/components/ui/range-calendar/range-calendar-cell.svelte

@@ -8,7 +8,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 data-[range-middle]:rounded-r-md [&:first-child[data-selected]_[data-bits-day]]:rounded-l-md [&:has([data-range-end])]:rounded-r-md [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-l-md last:[&:has([data-range-middle])]:rounded-r-md [&:has([data-range-start])]:rounded-l-md [&:last-child[data-selected]_[data-bits-day]]:rounded-r-md",
+		"dark:[&:has([data-range-start])]:hover:bg-accent dark:[&:has([data-range-end])]:hover:bg-accent [&:has([data-range-middle])]:bg-accent dark:[&:has([data-range-middle])]:hover:bg-accent/50 [&:has([data-selected])]:bg-accent 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 [&:has([data-range-middle])]:rounded-none first:[&:has([data-range-middle])]:rounded-s-md last:[&:has([data-range-middle])]:rounded-e-md [&:has([data-range-start])]:rounded-s-md [&:last-child[data-selected]_[data-bits-day]]:rounded-e-md",
 		className
 	)}
 	{...restProps}

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

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

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

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

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

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

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

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

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

@@ -31,7 +31,7 @@
 				{/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"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}

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

@@ -30,7 +30,7 @@
 				{/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"
+				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}

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

@@ -17,7 +17,7 @@
 	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:ring-1 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",
+		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:start-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}

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

@@ -17,7 +17,7 @@
 	{orientation}
 	class={cn(
 		"flex touch-none p-px transition-colors select-none",
-		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+		orientation === "vertical" && "h-full w-2.5 border-s border-s-transparent",
 		orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
 		className
 	)}

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

@@ -1,3 +1,4 @@
+import Root from "./select.svelte";
 import Group from "./select-group.svelte";
 import Label from "./select-label.svelte";
 import Item from "./select-item.svelte";
@@ -7,5 +8,5 @@ import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
 import GroupHeading from "./select-group-heading.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
-export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, 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, };
+import Portal from "./select-portal.svelte";
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, 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, };

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

@@ -1,4 +1,4 @@
-import { Select as SelectPrimitive } from "bits-ui";
+import Root from "./select.svelte";
 import Group from "./select-group.svelte";
 import Label from "./select-label.svelte";
 import Item from "./select-item.svelte";
@@ -8,7 +8,7 @@ import Separator from "./select-separator.svelte";
 import ScrollDownButton from "./select-scroll-down-button.svelte";
 import ScrollUpButton from "./select-scroll-up-button.svelte";
 import GroupHeading from "./select-group-heading.svelte";
-const Root = SelectPrimitive.Root;
-export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, 
+import Portal from "./select-portal.svelte";
+export { Root, Group, Label, Item, Content, Trigger, Separator, ScrollDownButton, ScrollUpButton, GroupHeading, Portal, 
 //
-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, };
+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, };

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

@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
 	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
 	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
 	import { cn, type WithoutChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,19 +13,21 @@
 		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(
-			"bg-popover text-popover-foreground 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 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto 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-[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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--bits-select-content-available-height) min-w-[8rem] origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto 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}
@@ -35,4 +40,4 @@
 		</SelectPrimitive.Viewport>
 		<SelectScrollDownButton />
 	</SelectPrimitive.Content>
-</SelectPrimitive.Portal>
+</SelectPortal>

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

@@ -1,7 +1,10 @@
 import { Select as SelectPrimitive } from "bits-ui";
+import SelectPortal from "./select-portal.svelte";
 import { type WithoutChild } from "../../../utils.js";
+import type { ComponentProps } from "svelte";
+import type { WithoutChildrenOrChild } from "../../../utils.js";
 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/components/ui/select/select-item.svelte

@@ -18,13 +18,13 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 ps-2 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
 			{#if selected}
 				<CheckIcon class="size-4" />
 			{/if}

package/dist/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/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/components/ui/select/select.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), value = $bindable(), ...restProps }: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

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

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

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

@@ -1,3 +1,5 @@
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
 import Trigger from "./sheet-trigger.svelte";
 import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
@@ -6,6 +8,4 @@ import Header from "./sheet-header.svelte";
 import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
-declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
-declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
 export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };

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

@@ -1,4 +1,5 @@
-import { Dialog as SheetPrimitive } from "bits-ui";
+import Root from "./sheet.svelte";
+import Portal from "./sheet-portal.svelte";
 import Trigger from "./sheet-trigger.svelte";
 import Close from "./sheet-close.svelte";
 import Overlay from "./sheet-overlay.svelte";
@@ -7,8 +8,6 @@ import Header from "./sheet-header.svelte";
 import Footer from "./sheet-footer.svelte";
 import Title from "./sheet-title.svelte";
 import Description from "./sheet-description.svelte";
-const Root = SheetPrimitive.Root;
-const Portal = SheetPrimitive.Portal;
 export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
 //
 Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };

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

@@ -7,9 +7,9 @@
 				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
 				bottom:
 					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
-				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				left: "data-[state=closed]:slide-out-to-start data-[state=open]:slide-in-from-start inset-y-0 start-0 h-full w-3/4 border-e sm:max-w-sm",
 				right:
-					"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					"data-[state=closed]:slide-out-to-end data-[state=open]:slide-in-from-end inset-y-0 end-0 h-full w-3/4 border-s sm:max-w-sm",
 			},
 		},
 		defaultVariants: {
@@ -24,8 +24,10 @@
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import XIcon from "@lucide/svelte/icons/x";
 	import type { Snippet } from "svelte";
+	import SheetPortal from "./sheet-portal.svelte";
 	import SheetOverlay from "./sheet-overlay.svelte";
 	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
@@ -35,13 +37,13 @@
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
-		portalProps?: SheetPrimitive.PortalProps;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
 		children: Snippet;
 	} = $props();
 </script>
 
-<SheetPrimitive.Portal {...portalProps}>
+<SheetPortal {...portalProps}>
 	<SheetOverlay />
 	<SheetPrimitive.Content
 		bind:ref
@@ -51,10 +53,10 @@
 	>
 		{@render children?.()}
 		<SheetPrimitive.Close
-			class="ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
+			class="ring-offset-background focus-visible:ring-ring absolute end-4 top-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none"
 		>
 			<XIcon class="size-4" />
 			<span class="sr-only">Close</span>
 		</SheetPrimitive.Close>
 	</SheetPrimitive.Content>
-</SheetPrimitive.Portal>
+</SheetPortal>

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

@@ -24,9 +24,11 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
 export type Side = VariantProps<typeof sheetVariants>["side"];
 import { Dialog as SheetPrimitive } from "bits-ui";
 import type { Snippet } from "svelte";
+import SheetPortal from "./sheet-portal.svelte";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
+import type { ComponentProps } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
-    portalProps?: SheetPrimitive.PortalProps;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
     side?: Side;
     children: Snippet;
 };

package/dist/components/ui/sheet/sheet-portal.svelte

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

package/dist/components/ui/sheet/sheet-portal.svelte.d.ts

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

package/dist/components/ui/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props();
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />

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

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

package/dist/components/ui/sidebar/sidebar-group-action.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground outline-hidden absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 			// Increases the hit area of the button on mobile.
 			"after:absolute after:-inset-2 md:after:hidden",
 			"group-data-[collapsible=icon]:hidden",

package/dist/components/ui/sidebar/sidebar-group-label.svelte

@@ -15,7 +15,7 @@
 
 	const mergedProps = $derived({
 		class: cn(
-			"text-sidebar-foreground/70 ring-sidebar-ring outline-hidden flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
 			"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
 			className
 		),

package/dist/components/ui/sidebar/sidebar-inset.svelte

@@ -15,7 +15,7 @@
 	data-slot="sidebar-inset"
 	class={cn(
 		"bg-background relative flex w-full flex-1 flex-col",
-		"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+		"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
 		className
 	)}
 	{...restProps}