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

package/dist/lib/components/ui/menubar/menubar-shortcut.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import type { HTMLAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
 		ref = $bindable(null),
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="menubar-shortcut"
-	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/lib/components/ui/menubar/menubar-shortcut.svelte.d.ts

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

package/dist/lib/components/ui/menubar/menubar-sub-content.svelte

@@ -1,20 +1,31 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import { cn } from "../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../utils.js";
+	import MenubarPortal from "./menubar-portal.svelte";
+	import type { ComponentProps } from "svelte";
 
 	let {
 		ref = $bindable(null),
 		class: className,
+		align = "start",
+		alignOffset = -3,
+		portalProps,
 		...restProps
-	}: MenubarPrimitive.SubContentProps = $props();
+	}: MenubarPrimitive.SubContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
+	} = $props();
 </script>
 
-<MenubarPrimitive.SubContent
-	bind:ref
-	data-slot="menubar-sub-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-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-menubar-content-transform-origin) z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
-		className
-	)}
-	{...restProps}
-/>
+<MenubarPortal {...portalProps}>
+	<MenubarPrimitive.SubContent
+		bind:ref
+		data-slot="menubar-sub-content"
+		{align}
+		{alignOffset}
+		class={cn(
+			"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-32 rounded-lg p-1 shadow-lg ring-1 duration-100 z-50 origin-(--bits-menubar-content-transform-origin) overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</MenubarPortal>

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

@@ -1,4 +1,10 @@
 import { Menubar as MenubarPrimitive } from "bits-ui";
-declare const MenubarSubContent: import("svelte").Component<MenubarPrimitive.SubContentProps, {}, "ref">;
+import { type WithoutChildrenOrChild } from "../../utils.js";
+import MenubarPortal from "./menubar-portal.svelte";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = MenubarPrimitive.SubContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof MenubarPortal>>;
+};
+declare const MenubarSubContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type MenubarSubContent = ReturnType<typeof MenubarSubContent>;
 export default MenubarSubContent;

package/dist/lib/components/ui/menubar/menubar-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Menubar as MenubarPrimitive } from "bits-ui";
-	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
 	import { cn, type WithoutChild } from "../../utils.js";
 
 	let {
@@ -19,11 +19,11 @@
 	data-slot="menubar-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[inset]:ps-8",
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRightIcon class="ms-auto size-4" />
+	<ChevronRightIcon class="cn-rtl-flip ml-auto size-4" />
 </MenubarPrimitive.SubTrigger>

package/dist/lib/components/ui/menubar/menubar-trigger.svelte

@@ -12,9 +12,6 @@
 <MenubarPrimitive.Trigger
 	bind:ref
 	data-slot="menubar-trigger"
-	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground outline-hidden flex select-none items-center rounded-sm px-2 py-1 text-sm font-medium",
-		className
-	)}
+	class={cn("hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none", className)}
 	{...restProps}
 />

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

@@ -12,9 +12,6 @@
 <MenubarPrimitive.Root
 	bind:ref
 	data-slot="menubar"
-	class={cn(
-		"bg-background shadow-xs flex h-9 items-center gap-1 rounded-md border p-1",
-		className
-	)}
+	class={cn("h-8 gap-0.5 rounded-lg border p-[3px] flex items-center", className)}
 	{...restProps}
 />

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

@@ -0,0 +1,7 @@
+import Avatar from "./message-avatar.svelte";
+import Content from "./message-content.svelte";
+import Footer from "./message-footer.svelte";
+import Group from "./message-group.svelte";
+import Header from "./message-header.svelte";
+import Root from "./message.svelte";
+export { Root, Group, Avatar, Content, Header, Footer, Root as Message, Group as MessageGroup, Avatar as MessageAvatar, Content as MessageContent, Header as MessageHeader, Footer as MessageFooter, };

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

@@ -0,0 +1,9 @@
+import Avatar from "./message-avatar.svelte";
+import Content from "./message-content.svelte";
+import Footer from "./message-footer.svelte";
+import Group from "./message-group.svelte";
+import Header from "./message-header.svelte";
+import Root from "./message.svelte";
+export { Root, Group, Avatar, Content, Header, Footer, 
+//
+Root as Message, Group as MessageGroup, Avatar as MessageAvatar, Content as MessageContent, Header as MessageHeader, Footer as MessageFooter, };

package/dist/lib/components/ui/message/message-avatar.svelte

@@ -0,0 +1,23 @@
+<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="message-avatar"
+	class={cn(
+		"min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8 flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/message/message-avatar.svelte.d.ts

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

package/dist/lib/components/ui/message/message-content.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="message-content"
+	class={cn("gap-2.5 group-data-[align=end]/message:*:data-slot:self-end flex w-full min-w-0 flex-col wrap-break-word", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/lib/components/ui/message/message-footer.svelte

@@ -0,0 +1,23 @@
+<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="message-footer"
+	class={cn(
+		"text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0 flex max-w-full min-w-0 items-center group-data-[align=end]/message:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/message/message-footer.svelte.d.ts

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

package/dist/lib/components/ui/message/message-group.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="message-group"
+	class={cn("gap-2 flex min-w-0 flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/lib/components/ui/message/message-header.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="message-header"
+	class={cn("text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0 flex max-w-full min-w-0 items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/message/message-header.svelte.d.ts

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

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "start",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: "start" | "end";
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="message"
+	data-align={align}
+	class={cn(
+		"text-sm gap-2 group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/message/message.svelte.d.ts

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

package/dist/lib/components/ui/message-scroller/index.d.ts

@@ -0,0 +1,8 @@
+import Button from "./message-scroller-button.svelte";
+import Content from "./message-scroller-content.svelte";
+import Item from "./message-scroller-item.svelte";
+import Provider from "./message-scroller-provider.svelte";
+import Viewport from "./message-scroller-viewport.svelte";
+import Root from "./message-scroller.svelte";
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from "@shadcn-svelte/primitives/message-scroller";
+export { Provider, Root, Viewport, Content, Item, Button, Provider as MessageScrollerProvider, Root as MessageScroller, Viewport as MessageScrollerViewport, Content as MessageScrollerContent, Item as MessageScrollerItem, Button as MessageScrollerButton, };

package/dist/lib/components/ui/message-scroller/index.js

@@ -0,0 +1,10 @@
+import Button from "./message-scroller-button.svelte";
+import Content from "./message-scroller-content.svelte";
+import Item from "./message-scroller-item.svelte";
+import Provider from "./message-scroller-provider.svelte";
+import Viewport from "./message-scroller-viewport.svelte";
+import Root from "./message-scroller.svelte";
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, } from "@shadcn-svelte/primitives/message-scroller";
+export { Provider, Root, Viewport, Content, Item, Button, 
+//
+Provider as MessageScrollerProvider, Root as MessageScroller, Viewport as MessageScrollerViewport, Content as MessageScrollerContent, Item as MessageScrollerItem, Button as MessageScrollerButton, };

package/dist/lib/components/ui/message-scroller/message-scroller-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+	import { Button } from "../button/index.js";
+	import type { ButtonSize, ButtonVariant } from "../button/index.js";
+	import { cn } from "../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		direction = "end",
+		class: className,
+		children,
+		child: childProp,
+		variant = "secondary",
+		size = "icon-sm",
+		...restProps
+	}: MessageScrollerPrimitive.ButtonProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<MessageScrollerPrimitive.Button
+	bind:ref
+	data-slot="message-scroller-button"
+	data-direction={direction}
+	data-variant={variant}
+	data-size={size}
+	{direction}
+	class={cn(
+		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet child(state)}
+		{#if childProp}
+			{@render childProp(state)}
+		{:else}
+			<Button {variant} {size} {...state.props}>
+				{#if children}
+					{@render children()}
+				{:else}
+					<ArrowDownIcon  />
+					<span class="sr-only">
+						{direction === "end" ? "Scroll to end" : "Scroll to start"}
+					</span>
+				{/if}
+			</Button>
+		{/if}
+	{/snippet}
+</MessageScrollerPrimitive.Button>

package/dist/lib/components/ui/message-scroller/message-scroller-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+import type { ButtonSize, ButtonVariant } from "../button/index.js";
+type $$ComponentProps = MessageScrollerPrimitive.ButtonProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const MessageScrollerButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type MessageScrollerButton = ReturnType<typeof MessageScrollerButton>;
+export default MessageScrollerButton;

package/dist/lib/components/ui/message-scroller/message-scroller-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MessageScrollerPrimitive.ContentProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Content
+	bind:ref
+	data-slot="message-scroller-content"
+	class={cn("gap-6 flex h-max min-h-full flex-col", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+declare const MessageScrollerContent: import("svelte").Component<MessageScrollerPrimitive.ContentProps, {}, "ref">;
+type MessageScrollerContent = ReturnType<typeof MessageScrollerContent>;
+export default MessageScrollerContent;

package/dist/lib/components/ui/message-scroller/message-scroller-item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		scrollAnchor = false,
+		...restProps
+	}: MessageScrollerPrimitive.ItemProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Item
+	bind:ref
+	data-slot="message-scroller-item"
+	{scrollAnchor}
+	class={cn(
+		"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/components/ui/message-scroller/message-scroller-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+declare const MessageScrollerItem: import("svelte").Component<MessageScrollerPrimitive.ItemProps, {}, "ref">;
+type MessageScrollerItem = ReturnType<typeof MessageScrollerItem>;
+export default MessageScrollerItem;

package/dist/lib/components/ui/message-scroller/message-scroller-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+
+	let { ...restProps }: MessageScrollerPrimitive.ProviderProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Provider {...restProps} />

package/dist/lib/components/ui/message-scroller/message-scroller-provider.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+declare const MessageScrollerProvider: import("svelte").Component<MessageScrollerPrimitive.ProviderProps, {}, "">;
+type MessageScrollerProvider = ReturnType<typeof MessageScrollerProvider>;
+export default MessageScrollerProvider;

package/dist/lib/components/ui/message-scroller/message-scroller-viewport.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.ViewportProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Viewport
+	bind:ref
+	data-slot="message-scroller-viewport"
+	class={cn(
+		"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/components/ui/message-scroller/message-scroller-viewport.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+declare const MessageScrollerViewport: import("svelte").Component<MessageScrollerPrimitive.ViewportProps, {}, "ref">;
+type MessageScrollerViewport = ReturnType<typeof MessageScrollerViewport>;
+export default MessageScrollerViewport;

package/dist/lib/components/ui/message-scroller/message-scroller.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.RootProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Root
+	bind:ref
+	data-slot="message-scroller"
+	class={cn(
+		"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/components/ui/message-scroller/message-scroller.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+declare const MessageScroller: import("svelte").Component<MessageScrollerPrimitive.RootProps, {}, "ref">;
+type MessageScroller = ReturnType<typeof MessageScroller>;
+export default MessageScroller;

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

@@ -1,4 +1,4 @@
-import Root from "./native-select.svelte";
-import Option from "./native-select-option.svelte";
 import OptGroup from "./native-select-opt-group.svelte";
+import Option from "./native-select-option.svelte";
+import Root from "./native-select.svelte";
 export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

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

@@ -1,4 +1,4 @@
-import Root from "./native-select.svelte";
-import Option from "./native-select-option.svelte";
 import OptGroup from "./native-select-opt-group.svelte";
+import Option from "./native-select-option.svelte";
+import Root from "./native-select.svelte";
 export { Root, Option, OptGroup, Root as NativeSelect, Option as NativeSelectOption, OptGroup as NativeSelectOptGroup, };

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

@@ -1,14 +1,20 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLOptgroupAttributes } from "svelte/elements";
-	import type { WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
+		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLOptgroupAttributes> = $props();
 </script>
 
-<optgroup bind:this={ref} data-slot="native-select-opt-group" {...restProps}>
+<optgroup
+	bind:this={ref}
+	data-slot="native-select-optgroup"
+	class={cn("bg-[Canvas] text-[CanvasText]", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </optgroup>

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

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

package/dist/lib/components/ui/native-select/native-select-option.svelte

@@ -1,14 +1,20 @@
 <script lang="ts">
+	import { cn, type WithElementRef } from "../../utils.js";
 	import type { HTMLOptionAttributes } from "svelte/elements";
-	import type { WithElementRef } from "../../utils.js";
 
 	let {
 		ref = $bindable(null),
+		class: className,
 		children,
 		...restProps
 	}: WithElementRef<HTMLOptionAttributes> = $props();
 </script>
 
-<option bind:this={ref} data-slot="native-select-option" {...restProps}>
+<option
+	bind:this={ref}
+	data-slot="native-select-option"
+	class={cn("bg-[Canvas] text-[CanvasText]", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </option>

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

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