@orochibraru/ui 0.0.0 → 1.0.0-canary.1

package/dist/components/blocks/video-player/tap-gestures.svelte.js

@@ -0,0 +1,56 @@
+import { DOUBLE_TAP_MS, isDoubleTap, } from "./gestures.js";
+import { SEEK_SECONDS } from "./keymap.js";
+const FEEDBACK_MS = 700;
+/**
+ * Taps on the picture on a touch screen. A tap in the middle runs `onTap` at once; on a side it waits out the
+ * double-tap window, and a second tap there seeks instead, as does each further quick tap, adding up.
+ */
+export class TapGestures {
+    feedback = $state(null);
+    #seek;
+    #onTap;
+    #lastTap = null;
+    #burst = null;
+    #tapTimer;
+    #feedbackTimer;
+    constructor(actions) {
+        this.#seek = actions.seek;
+        this.#onTap = actions.onTap;
+    }
+    tap = (point, zone) => {
+        clearTimeout(this.#tapTimer);
+        if (zone === "center") {
+            this.#burst = null;
+            this.#lastTap = null;
+            this.#onTap();
+            return;
+        }
+        const inBurst = this.#burst?.side === zone && point.time <= this.#burst.until;
+        if (inBurst ||
+            (this.#lastTap?.zone === zone && isDoubleTap(this.#lastTap, point))) {
+            this.#lastTap = null;
+            this.#seekSide(zone, point.time);
+            return;
+        }
+        this.#burst = null;
+        this.#lastTap = { ...point, zone };
+        this.#tapTimer = setTimeout(() => {
+            this.#lastTap = null;
+            this.#onTap();
+        }, DOUBLE_TAP_MS);
+    };
+    dispose = () => {
+        clearTimeout(this.#tapTimer);
+        clearTimeout(this.#feedbackTimer);
+    };
+    #seekSide(side, time) {
+        this.#seek(side === "left" ? -SEEK_SECONDS : SEEK_SECONDS);
+        const seconds = (this.#burst?.side === side ? this.#burst.seconds : 0) + SEEK_SECONDS;
+        this.#burst = { side, until: time + DOUBLE_TAP_MS, seconds };
+        this.feedback = { side, seconds };
+        clearTimeout(this.#feedbackTimer);
+        this.#feedbackTimer = setTimeout(() => {
+            this.feedback = null;
+        }, FEEDBACK_MS);
+    }
+}

package/dist/components/blocks/video-player.svelte

@@ -0,0 +1,288 @@
+<script lang="ts" module>
+	export type { Chapter } from "./video-player/format.js";
+
+	export interface VideoTrack {
+		src: string;
+		label: string;
+		srclang?: string;
+		kind?: "subtitles" | "captions";
+		default?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import CenterControls from "./video-player/center-controls.svelte";
+	import ControlBar from "./video-player/control-bar.svelte";
+	import type { Chapter } from "./video-player/format.js";
+	import GestureFeedback from "./video-player/gesture-feedback.svelte";
+	import { gestureZone } from "./video-player/gestures.js";
+	import { handlePlayerKey } from "./video-player/keymap.js";
+	import { defaultMessages } from "./video-player/messages.js";
+	import { VideoPlayerState } from "./video-player/player.svelte.js";
+	import { TapGestures } from "./video-player/tap-gestures.svelte.js";
+	import { Spinner } from "../ui/spinner/index.js";
+	import * as Tooltip from "../ui/tooltip/index.js";
+	import { haptic } from "../../haptics.js";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		src: string;
+		poster?: string;
+		title?: string;
+		tracks?: VideoTrack[];
+		chapters?: Chapter[];
+		autoplay?: boolean;
+		currentTime?: number;
+		paused?: boolean;
+		onplay?: () => void;
+		onpause?: () => void;
+		onended?: () => void;
+		onerror?: () => void;
+		class?: string;
+		messages?: Partial<typeof defaultMessages>;
+	}
+
+	let {
+		src,
+		poster,
+		title,
+		tracks = [],
+		chapters = [],
+		autoplay = false,
+		currentTime = $bindable(0),
+		paused = $bindable(true),
+		onplay,
+		onpause,
+		onended,
+		onerror,
+		class: className,
+		messages = {},
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+
+	let container = $state<HTMLDivElement | null>(null);
+	let video = $state<HTMLVideoElement | null>(null);
+	let pictureInPicture = $state(false);
+
+	const player = new VideoPlayerState({
+		video: () => video,
+		container: () => container,
+	});
+
+	const loading = $derived(
+		!player.failed && (player.seeking || !paused) && player.readyState < 3,
+	);
+	const controlsShown = $derived(
+		player.controlsVisible || paused || player.menuOpen || player.failed,
+	);
+	const portalTarget = $derived<HTMLElement | string>(
+		player.fullscreen && container ? container : "body",
+	);
+
+	let activeSubtitle = $derived(tracks.findIndex((track) => track.default));
+
+	$effect(() => {
+		const textTracks = video?.textTracks;
+		if (!textTracks || textTracks.length !== tracks.length) {
+			return;
+		}
+		Array.from(textTracks).forEach((track, index) => {
+			track.mode = index === activeSubtitle ? "showing" : "disabled";
+		});
+	});
+
+	$effect(() => {
+		pictureInPicture = document.pictureInPictureEnabled === true;
+		return player.dispose;
+	});
+
+	function cycleSubtitles() {
+		if (tracks.length > 0) {
+			activeSubtitle =
+				activeSubtitle + 1 < tracks.length ? activeSubtitle + 1 : -1;
+		}
+	}
+
+	function touchTap() {
+		if (controlsShown && !paused) {
+			player.hideControls();
+		} else {
+			player.nudgeControls();
+		}
+	}
+
+	const gestures = new TapGestures({
+		seek: (delta) => {
+			haptic("tap");
+			player.seek(delta);
+		},
+		onTap: touchTap,
+	});
+	$effect(() => gestures.dispose);
+
+	let pointerType = "mouse";
+	let engaged = false;
+
+	function onvideoclick(event: MouseEvent) {
+		if (pointerType === "mouse") {
+			player.togglePlay();
+			return;
+		}
+		const rect = (event.currentTarget as Element).getBoundingClientRect();
+		const x = event.clientX - rect.left;
+		gestures.tap(
+			{ x, y: event.clientY - rect.top, time: event.timeStamp },
+			gestureZone(x, rect.width),
+		);
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		if (!(engaged || container?.contains(event.target as Node))) {
+			return;
+		}
+		const handled = handlePlayerKey(event, {
+			togglePlay: player.togglePlay,
+			seek: player.seek,
+			adjustVolume: player.adjustVolume,
+			toggleMute: player.toggleMute,
+			toggleFullscreen: () => void player.toggleFullscreen(),
+			cycleSubtitles,
+		});
+		if (handled) {
+			player.nudgeControls();
+		}
+	}
+</script>
+
+<svelte:window
+	{onkeydown}
+	onpointerdown={(event) => {
+		engaged = container?.contains(event.target as Node) ?? false;
+	}}
+/>
+<svelte:document onfullscreenchange={player.syncFullscreen} />
+
+<Tooltip.Provider delayDuration={300}>
+	<div
+		bind:this={container}
+		role="region"
+		aria-label={title ?? text.region}
+		data-fullscreen={player.fullscreen || undefined}
+		class={cn(
+			"group/player relative isolate aspect-video w-full overflow-hidden rounded-2xl bg-black select-none data-fullscreen:rounded-none",
+			!controlsShown && "cursor-none",
+			className,
+		)}
+		onpointermove={(event) => {
+			if (event.pointerType === "mouse") {
+				player.nudgeControls();
+			}
+		}}
+		onpointerleave={(event) => {
+			if (event.pointerType === "mouse" && !paused && !player.menuOpen) {
+				player.hideControls();
+			}
+		}}
+	>
+		<!-- svelte-ignore a11y_media_has_caption -->
+		<video
+			bind:this={video}
+			bind:currentTime
+			bind:paused
+			bind:duration={player.duration}
+			bind:volume={player.volume}
+			bind:muted={player.muted}
+			bind:playbackRate={player.rate}
+			bind:buffered={player.buffered}
+			bind:readyState={player.readyState}
+			bind:seeking={player.seeking}
+			bind:ended={player.ended}
+			{src}
+			{poster}
+			{autoplay}
+			playsinline
+			preload="metadata"
+			class="size-full object-contain"
+			onpointerdown={(event) => (pointerType = event.pointerType)}
+			onclick={onvideoclick}
+			ondblclick={() => {
+				if (pointerType === "mouse") {
+					void player.toggleFullscreen();
+				}
+			}}
+			onloadstart={() => (player.failed = false)}
+			onerror={() => {
+				player.failed = true;
+				onerror?.();
+			}}
+			onplay={() => {
+				player.nudgeControls();
+				onplay?.();
+			}}
+			onpause={() => onpause?.()}
+			onended={() => onended?.()}
+		>
+			{#each tracks as track (track.src)}
+				<track
+					src={track.src}
+					label={track.label}
+					srclang={track.srclang}
+					kind={track.kind ?? "subtitles"}
+					default={track.default}
+				/>
+			{/each}
+		</video>
+
+		<GestureFeedback feedback={gestures.feedback} />
+
+		{#if loading}
+			<div
+				class="pointer-events-none absolute inset-0 flex items-center justify-center"
+			>
+				<Spinner aria-label={text.loading} class="size-10 text-white" />
+			</div>
+		{/if}
+
+		{#if player.failed}
+			<div
+				role="alert"
+				class="absolute inset-0 flex items-center justify-center bg-black/70 p-6 text-center text-sm font-medium text-white"
+			>
+				{text.error}
+			</div>
+		{/if}
+
+		<div
+			class={cn(
+				"pointer-events-none absolute inset-0 flex flex-col pt-safe-top pr-safe-right pb-safe-bottom pl-safe-left transition-[opacity,visibility] duration-200",
+				controlsShown && !player.failed ? "opacity-100" : "invisible opacity-0",
+			)}
+		>
+			{#if title}
+				<div class="bg-linear-to-b from-black/60 to-transparent px-4 pt-3 pb-8">
+					<p class="truncate font-semibold text-white drop-shadow">
+						{title}
+					</p>
+				</div>
+			{/if}
+			<div class="flex min-h-0 flex-1 items-center justify-center">
+				{#if !loading}
+					<CenterControls {player} {paused} {text} />
+				{/if}
+			</div>
+			<ControlBar
+				{player}
+				{paused}
+				{currentTime}
+				{chapters}
+				subtitles={tracks.map((track) => track.label)}
+				{activeSubtitle}
+				onsubtitlechange={(index) => (activeSubtitle = index)}
+				{pictureInPicture}
+				{portalTarget}
+				{text}
+			/>
+		</div>
+	</div>
+</Tooltip.Provider>

package/dist/components/blocks/video-player.svelte.d.ts

@@ -0,0 +1,29 @@
+export type { Chapter } from "./video-player/format.js";
+export interface VideoTrack {
+    src: string;
+    label: string;
+    srclang?: string;
+    kind?: "subtitles" | "captions";
+    default?: boolean;
+}
+import type { Chapter } from "./video-player/format.js";
+import { defaultMessages } from "./video-player/messages.js";
+interface Props {
+    src: string;
+    poster?: string;
+    title?: string;
+    tracks?: VideoTrack[];
+    chapters?: Chapter[];
+    autoplay?: boolean;
+    currentTime?: number;
+    paused?: boolean;
+    onplay?: () => void;
+    onpause?: () => void;
+    onended?: () => void;
+    onerror?: () => void;
+    class?: string;
+    messages?: Partial<typeof defaultMessages>;
+}
+declare const VideoPlayer: import("svelte").Component<Props, {}, "paused" | "currentTime">;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;

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

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

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

@@ -16,6 +16,6 @@ type $$ComponentProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
         outsideMonth: boolean;
     }]>;
 };
-declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "ref" | "placeholder" | "value">;
+declare const Calendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -9,6 +9,6 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     showCloseButton?: boolean;
     class?: string;
 };
-declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "open">;
+declare const CommandDialog: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/command/command-input.svelte.d.ts

@@ -3,6 +3,6 @@ type $$ComponentProps = CommandPrimitive.InputProps & {
     wrapperClass?: string;
     groupClass?: string;
 };
-declare const CommandInput: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const CommandInput: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type CommandInput = ReturnType<typeof CommandInput>;
 export default CommandInput;

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

@@ -3,6 +3,6 @@ export type CommandRootApi = CommandPrimitive.Root;
 type $$ComponentProps = CommandPrimitive.RootProps & {
     api?: CommandRootApi | null;
 };
-declare const Command: import("svelte").Component<$$ComponentProps, {}, "ref" | "value" | "api">;
+declare const Command: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "api">;
 type Command = ReturnType<typeof Command>;
 export default Command;

package/dist/components/ui/context-menu/context-menu-radio-group.svelte.d.ts

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

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte.d.ts

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

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

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

package/dist/components/ui/input/input.svelte

@@ -44,7 +44,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-white px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		type="file"
@@ -58,7 +58,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-white px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
 			className,
 		)}
 		{type}

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

@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/input-group/input-group-input.svelte.d.ts

@@ -2,10 +2,10 @@ declare const InputGroupInput: import("svelte").Component<(Omit<import("svelte/e
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "month" | "datetime-local" | "image" | "password" | "range" | "time" | "week";
+    type?: "number" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "password" | "date" | "month" | "datetime-local" | "image" | "range" | "time" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;
-}, {}, "ref" | "value">;
+}, {}, "value" | "ref">;
 type InputGroupInput = ReturnType<typeof InputGroupInput>;
 export default InputGroupInput;

package/dist/components/ui/input-group/input-group-textarea.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
+declare const InputGroupTextarea: import("svelte").Component<Omit<import("../../../utils.js").WithElementRef<import("svelte/elements").HTMLTextareaAttributes>, "children">, {}, "value" | "ref">;
 type InputGroupTextarea = ReturnType<typeof InputGroupTextarea>;
 export default InputGroupTextarea;

package/dist/components/ui/input-group/input-group.svelte

@@ -16,7 +16,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		"group/input-group border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
+		"group/input-group border-input bg-white dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
 		className,
 	)}
 	{...props}

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -16,7 +16,7 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
+		"bg-white dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10",
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/input-otp/input-otp.svelte.d.ts

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

package/dist/components/ui/menubar/menubar-radio-group.svelte.d.ts

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

package/dist/components/ui/radio-group/radio-group.svelte.d.ts

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

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

@@ -15,6 +15,6 @@ type $$ComponentProps = WithoutChildrenOrChild<RangeCalendarPrimitive.RootProps>
         outsideMonth: boolean;
     }]>;
 };
-declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "ref" | "placeholder" | "value">;
+declare const RangeCalendar: import("svelte").Component<$$ComponentProps, {}, "value" | "placeholder" | "ref">;
 type RangeCalendar = ReturnType<typeof RangeCalendar>;
 export default RangeCalendar;

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

@@ -20,7 +20,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-white py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		className,
 	)}
 	{...restProps}

package/dist/components/ui/sidebar/sidebar-input.svelte.d.ts

@@ -2,10 +2,10 @@ declare const SidebarInput: import("svelte").Component<(Omit<import("svelte/elem
     type: "file";
     files?: FileList;
 } | {
-    type?: "number" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "hidden" | "color" | "date" | "month" | "datetime-local" | "image" | "password" | "range" | "time" | "week";
+    type?: "number" | "hidden" | "color" | "submit" | "reset" | "button" | "search" | "checkbox" | "radio" | (string & {}) | "text" | "tel" | "url" | "email" | "password" | "date" | "month" | "datetime-local" | "image" | "range" | "time" | "week";
     files?: undefined;
 })) & {
     ref?: HTMLElement | null | undefined;
-}, {}, "ref" | "value">;
+}, {}, "value" | "ref">;
 type SidebarInput = ReturnType<typeof SidebarInput>;
 export default SidebarInput;

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

@@ -1,5 +1,5 @@
 import { Slider as SliderPrimitive } from "bits-ui";
 import { type WithoutChildrenOrChild } from "../../../utils.js";
-declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "ref" | "value">;
+declare const Slider: import("svelte").Component<WithoutChildrenOrChild<SliderPrimitive.RootProps>, {}, "value" | "ref">;
 type Slider = ReturnType<typeof Slider>;
 export default Slider;

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

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

package/dist/components/ui/textarea/textarea.svelte

@@ -16,7 +16,7 @@
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-white px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 		className,
 	)}
 	bind:value

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

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

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

@@ -38,6 +38,6 @@ type $$ComponentProps = TogglePrimitive.RootProps & {
     variant?: ToggleVariant;
     size?: ToggleSize;
 };
-declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "ref" | "pressed">;
+declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "pressed" | "ref">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/components/ui/toggle-group/toggle-group-item.svelte.d.ts

@@ -1,6 +1,6 @@
 import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
 import { type ToggleVariants } from "../toggle/index.js";
 type $$ComponentProps = ToggleGroupPrimitive.ItemProps & ToggleVariants;
-declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const ToggleGroupItem: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type ToggleGroupItem = ReturnType<typeof ToggleGroupItem>;
 export default ToggleGroupItem;

package/dist/components/ui/toggle-group/toggle-group.svelte.d.ts

@@ -12,6 +12,6 @@ type $$ComponentProps = ToggleGroupPrimitive.RootProps & ToggleVariants & {
     spacing?: number;
     orientation?: "horizontal" | "vertical";
 };
-declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "ref" | "value">;
+declare const ToggleGroup: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
 type ToggleGroup = ReturnType<typeof ToggleGroup>;
 export default ToggleGroup;