@orochibraru/ui 1.0.0 → 1.0.1

package/dist/components/kit/segmented-control.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from "svelte";
+import { type FieldProps } from "./field-frame.svelte";
+interface Option {
+    value: string;
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+}
+type Props = FieldProps & {
+    options: readonly Option[];
+    value?: string;
+};
+declare const SegmentedControl: Component<Props, {}, "value">;
+type SegmentedControl = ReturnType<typeof SegmentedControl>;
+export default SegmentedControl;

package/dist/components/kit/select.svelte

@@ -0,0 +1,244 @@
+<script lang="ts" module>
+	import type { Component } from "svelte";
+
+	export interface SelectOption {
+		value: string;
+		label: string;
+		description?: string;
+		icon?: Component<{ class?: string }>;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import * as Command from "../ui/command/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+	import * as Popover from "../ui/popover/index.js";
+	import * as Select from "../ui/select/index.js";
+	import { cn } from "../../utils.js";
+
+	import FieldFrame, { errorList, type FieldProps } from "./field-frame.svelte";
+
+	const defaultMessages = {
+		placeholder: "Select an option",
+		search: "Search…",
+		empty: "No results.",
+	};
+
+	type Props = FieldProps & {
+		options: SelectOption[];
+		value?: string;
+		placeholder?: string;
+		searchable?: boolean;
+		onValueChange?: (value: string) => void;
+		messages?: Partial<typeof defaultMessages>;
+	};
+
+	let {
+		options,
+		value = $bindable(""),
+		placeholder,
+		searchable = false,
+		onValueChange,
+		messages = {},
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+	const nested = Drawer.isInsideDrawer();
+	const generatedId = $props.id();
+
+	let open = $state(false);
+	let query = $state("");
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const triggerId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${triggerId}-error`
+			: description
+				? `${triggerId}-description`
+				: undefined,
+	);
+	const selected = $derived(options.find((option) => option.value === value));
+	const triggerClass =
+		"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 flex h-11 w-full items-center gap-2 rounded-md border bg-white px-3 text-left text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 aria-invalid:ring-3 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm";
+
+	function pick(next: string) {
+		value = next;
+		open = false;
+		query = "";
+		onValueChange?.(next);
+	}
+</script>
+
+{#snippet optionContent(option: SelectOption)}
+	{#if option.icon}
+		<option.icon class="text-muted-foreground size-4 shrink-0" />
+	{/if}
+	<span class="grid min-w-0 flex-1 text-left">
+		<span class="truncate">{option.label}</span>
+		{#if option.description}
+			<span class="text-muted-foreground truncate text-xs font-normal"
+				>{option.description}</span
+			>
+		{/if}
+	</span>
+{/snippet}
+
+{#snippet summary(chevron: boolean)}
+	{#if selected?.icon}
+		<selected.icon class="text-muted-foreground size-4 shrink-0" />
+	{/if}
+	<span
+		class={cn("min-w-0 flex-1 truncate", !selected && "text-muted-foreground")}
+		>{selected?.label ?? placeholder ?? text.placeholder}</span
+	>
+	{#if chevron}
+		<ChevronsUpDownIcon class="size-4 shrink-0 opacity-50" />
+	{/if}
+{/snippet}
+
+{#snippet list(itemClass: string, touch: boolean)}
+	{#if searchable}
+		<Command.Input
+			placeholder={text.search}
+			bind:value={query}
+			wrapperClass={touch ? "px-0 pt-0 pb-3" : undefined}
+			groupClass={touch
+				? "h-12! rounded-xl! *:data-[slot=input-group-addon]:pl-3!"
+				: undefined}
+			class="text-base md:text-sm"
+		/>
+	{/if}
+	<Command.List class="max-h-[min(60dvh,20rem)] max-md:max-h-[55dvh]">
+		{#if searchable}
+			<Command.Empty>{text.empty}</Command.Empty>
+		{/if}
+		{#each options as option (option.value)}
+			<Command.Item
+				value={option.value}
+				keywords={[option.label, option.description ?? ""]}
+				disabled={option.disabled}
+				data-checked={option.value === value}
+				onSelect={() => pick(option.value)}
+				class={itemClass}
+			>
+				{@render optionContent(option)}
+			</Command.Item>
+		{/each}
+	</Command.List>
+{/snippet}
+
+{#snippet drawerContent()}
+	<Drawer.Content id="{triggerId}-drawer">
+		<Drawer.Header class="px-5 text-left">
+			<Drawer.Title>{label ?? placeholder ?? text.placeholder}</Drawer.Title>
+		</Drawer.Header>
+		<Command.Root class="bg-transparent px-3">
+			{@render list("min-h-12 rounded-xl px-3 text-base", true)}
+		</Command.Root>
+	</Drawer.Content>
+{/snippet}
+
+<FieldFrame
+	id={triggerId}
+	{label}
+	{description}
+	{error}
+	{required}
+	class={className}
+>
+	{#if name}
+		<input type="hidden" {name} {value} {disabled} />
+	{/if}
+	{#if !desktop.current}
+		<button
+			type="button"
+			id={triggerId}
+			{disabled}
+			class={triggerClass}
+			role="combobox"
+			aria-haspopup="dialog"
+			aria-expanded={open}
+			aria-controls="{triggerId}-drawer"
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			aria-required={required || undefined}
+			onclick={() => (open = true)}
+		>
+			{@render summary(true)}
+		</button>
+		{#if nested}
+			<Drawer.NestedRoot bind:open>{@render drawerContent()}</Drawer.NestedRoot>
+		{:else}
+			<Drawer.Root bind:open>{@render drawerContent()}</Drawer.Root>
+		{/if}
+	{:else if !searchable}
+		<Select.Root
+			type="single"
+			{disabled}
+			bind:value
+			onValueChange={(next) => onValueChange?.(next)}
+		>
+			<Select.Trigger
+				id={triggerId}
+				aria-invalid={invalid || undefined}
+				aria-describedby={describedBy}
+				aria-required={required || undefined}
+				class={cn(triggerClass, "data-[size=default]:h-11")}
+			>
+				{@render summary(false)}
+			</Select.Trigger>
+			<Select.Content>
+				{#each options as option (option.value)}
+					<Select.Item
+						value={option.value}
+						label={option.label}
+						disabled={option.disabled}
+					>
+						{@render optionContent(option)}
+					</Select.Item>
+				{/each}
+			</Select.Content>
+		</Select.Root>
+	{:else}
+		<Popover.Root
+			bind:open
+			onOpenChange={(next) => {
+				if (!next) query = "";
+			}}
+		>
+			<Popover.Trigger
+				id={triggerId}
+				{disabled}
+				role="combobox"
+				aria-invalid={invalid || undefined}
+				aria-describedby={describedBy}
+				aria-required={required || undefined}
+				class={triggerClass}
+			>
+				{@render summary(true)}
+			</Popover.Trigger>
+			<Popover.Content
+				align="start"
+				class="w-(--bits-popover-anchor-width) min-w-64 rounded-xl p-0"
+			>
+				<Command.Root class="bg-transparent">
+					{@render list("", false)}
+				</Command.Root>
+			</Popover.Content>
+		</Popover.Root>
+	{/if}
+</FieldFrame>

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

@@ -0,0 +1,26 @@
+import type { Component } from "svelte";
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    disabled?: boolean;
+}
+import * as Select from "../ui/select/index.js";
+import { type FieldProps } from "./field-frame.svelte";
+declare const Select: Component<FieldProps & {
+    options: SelectOption[];
+    value?: string;
+    placeholder?: string;
+    searchable?: boolean;
+    onValueChange?: (value: string) => void;
+    messages?: Partial<{
+        placeholder: string;
+        search: string;
+        empty: string;
+    }>;
+}, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/kit/status-badge.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	export type StatusTone =
+		"neutral" | "positive" | "warning" | "negative" | "info";
+</script>
+
+<script lang="ts" generics="Status extends string">
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		status: Status;
+		tones?: Partial<Record<Status, StatusTone>>;
+		labels?: Partial<Record<Status, string>>;
+		pulse?: boolean;
+		class?: string;
+	}
+
+	const {
+		status,
+		tones = {},
+		labels = {},
+		pulse = false,
+		class: className,
+	}: Props = $props();
+
+	const toneClasses: Record<StatusTone, string> = {
+		neutral: "border-border bg-muted text-muted-foreground",
+		positive: "border-positive/25 bg-positive/10 text-positive",
+		warning:
+			"border-amber-500/25 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+		negative: "border-negative/25 bg-negative/10 text-negative",
+		info: "border-sky-500/25 bg-sky-500/10 text-sky-700 dark:text-sky-300",
+	};
+
+	const tone = $derived(tones[status] ?? "neutral");
+</script>
+
+<span
+	data-tone={tone}
+	class={cn(
+		"inline-flex h-6 w-fit shrink-0 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium whitespace-nowrap",
+		toneClasses[tone],
+		className,
+	)}
+>
+	<span class="relative flex size-1.5 shrink-0" aria-hidden="true">
+		{#if pulse}
+			<span
+				class="absolute inset-0 rounded-full bg-current opacity-60 motion-safe:animate-ping"
+			></span>
+		{/if}
+		<span class="relative size-1.5 rounded-full bg-current"></span>
+	</span>
+	{labels[status] ?? status}
+</span>

package/dist/components/kit/status-badge.svelte.d.ts

@@ -0,0 +1,31 @@
+export type StatusTone = "neutral" | "positive" | "warning" | "negative" | "info";
+declare function $$render<Status extends string>(): {
+    props: {
+        status: Status;
+        tones?: Partial<Record<Status, StatusTone>>;
+        labels?: Partial<Record<Status, string>>;
+        pulse?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Status extends string> {
+    props(): ReturnType<typeof $$render<Status>>['props'];
+    events(): ReturnType<typeof $$render<Status>>['events'];
+    slots(): ReturnType<typeof $$render<Status>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Status extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Status>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Status>['props']>, ReturnType<__sveltets_Render<Status>['events']>, ReturnType<__sveltets_Render<Status>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Status>['bindings']>;
+    } & ReturnType<__sveltets_Render<Status>['exports']>;
+    <Status extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Status>['props']> & {}): ReturnType<__sveltets_Render<Status>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StatusBadge: $$IsomorphicComponent;
+type StatusBadge<Status extends string> = InstanceType<typeof StatusBadge<Status>>;
+export default StatusBadge;

package/dist/components/kit/switch.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import * as Field from "../ui/field/index.js";
+	import { Switch } from "../ui/switch/index.js";
+	import { cn } from "../../utils.js";
+
+	import { errorList, type FieldProps } from "./field-frame.svelte";
+
+	type Props = FieldProps & {
+		checked?: boolean;
+	};
+
+	let {
+		checked = $bindable(false),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+	}: Props = $props();
+
+	const generatedId = $props.id();
+	const switchId = $derived(id ?? generatedId);
+	const errors = $derived(errorList(error));
+	const invalid = $derived(errors.length > 0);
+	const describedBy = $derived(
+		invalid
+			? `${switchId}-error`
+			: description
+				? `${switchId}-description`
+				: undefined,
+	);
+</script>
+
+<div
+	class={cn("flex w-full flex-col", className)}
+	data-invalid={invalid || undefined}
+>
+	<div
+		class="group/row relative flex min-h-11 items-start justify-between gap-4 py-2.5 has-disabled:opacity-50"
+	>
+		<span class="min-w-0 flex-1">
+			{#if label}
+				<label
+					for={switchId}
+					class={cn(
+						"block cursor-pointer font-medium after:absolute after:inset-0 group-has-disabled/row:cursor-not-allowed",
+						invalid && "text-destructive",
+					)}
+				>
+					{label}
+					{#if required}
+						<span class="text-destructive" aria-hidden="true">*</span>
+					{/if}
+				</label>
+			{/if}
+			{#if description && !invalid}
+				<span
+					id="{switchId}-description"
+					class="text-muted-foreground mt-0.5 block text-sm">{description}</span
+				>
+			{/if}
+		</span>
+		<Switch
+			id={switchId}
+			{name}
+			value="true"
+			{required}
+			{disabled}
+			bind:checked
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			class="z-10 mt-0.5 shrink-0"
+		/>
+	</div>
+	{#if invalid}
+		<Field.Error
+			id="{switchId}-error"
+			errors={errors.map((message) => ({ message }))}
+		/>
+	{/if}
+</div>

package/dist/components/kit/switch.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Switch } from "../ui/switch/index.js";
+import { type FieldProps } from "./field-frame.svelte";
+type Props = FieldProps & {
+    checked?: boolean;
+};
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/kit/tabs.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+	import type { Component, Snippet } from "svelte";
+
+	export interface TabItem {
+		value: string;
+		label: string;
+		icon?: Component<{ class?: string }>;
+		badge?: string | number;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { untrack } from "svelte";
+
+	import * as Tabs from "../ui/tabs/index.js";
+	import { cn } from "../../utils.js";
+
+	interface Props {
+		items: TabItem[];
+		value?: string;
+		class?: string;
+		children: Snippet<[string]>;
+	}
+
+	let {
+		items,
+		value = $bindable(),
+		class: className,
+		children,
+	}: Props = $props();
+
+	value ??= untrack(() => items[0]?.value);
+
+	const active = $derived(value ?? items[0]?.value ?? "");
+
+	let list = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		list
+			?.querySelector(`[data-value="${CSS.escape(active)}"]`)
+			?.scrollIntoView({ block: "nearest", inline: "nearest" });
+	});
+</script>
+
+<Tabs.Root
+	bind:value={() => active, (next) => (value = next)}
+	class={cn("w-full gap-4", className)}
+>
+	<div class="no-scrollbar w-full overflow-x-auto py-1">
+		<TabsPrimitive.List
+			bind:ref={list}
+			class="glass flex w-max min-w-full gap-1 rounded-full p-1 md:min-w-0"
+		>
+			{#each items as item (item.value)}
+				{@const selected = item.value === active}
+				<TabsPrimitive.Trigger
+					value={item.value}
+					disabled={item.disabled}
+					class="text-muted-foreground hover:bg-accent/70 hover:text-foreground data-active:bg-primary data-active:text-primary-foreground data-active:glow focus-visible:ring-ring/50 flex h-11 shrink-0 grow items-center justify-center gap-2 rounded-full px-4 text-sm font-medium whitespace-nowrap transition-[color,background-color,box-shadow] outline-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 md:h-9 md:grow-0"
+				>
+					{#if item.icon}
+						<item.icon class="size-4" />
+					{/if}
+					{item.label}
+					{#if item.badge !== undefined}
+						<span
+							class={cn(
+								"min-w-5 rounded-full px-1.5 text-center text-xs leading-5 tabular-nums",
+								selected
+									? "bg-primary-foreground/20 text-primary-foreground"
+									: "bg-muted text-muted-foreground",
+							)}
+						>
+							{item.badge}
+						</span>
+					{/if}
+				</TabsPrimitive.Trigger>
+			{/each}
+		</TabsPrimitive.List>
+	</div>
+	<Tabs.Content value={active}>
+		{@render children(active)}
+	</Tabs.Content>
+</Tabs.Root>

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

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from "svelte";
+export interface TabItem {
+    value: string;
+    label: string;
+    icon?: Component<{
+        class?: string;
+    }>;
+    badge?: string | number;
+    disabled?: boolean;
+}
+import * as Tabs from "../ui/tabs/index.js";
+interface Props {
+    items: TabItem[];
+    value?: string;
+    class?: string;
+    children: Snippet<[string]>;
+}
+declare const Tabs: Component<Props, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/components/kit/textarea.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	import { Textarea } from "../ui/textarea/index.js";
+	import { cn } from "../../utils.js";
+
+	import FieldFrame, { errorList, type FieldProps } from "./field-frame.svelte";
+
+	const defaultMessages = {
+		characters: "characters",
+	};
+
+	type Props = FieldProps &
+		Omit<HTMLTextareaAttributes, "value" | "class" | "id" | "name"> & {
+			value?: string;
+			messages?: Partial<typeof defaultMessages>;
+		};
+
+	let {
+		value = $bindable(""),
+		name,
+		label,
+		description,
+		error,
+		required = false,
+		disabled = false,
+		id,
+		class: className,
+		rows,
+		maxlength,
+		messages = {},
+		...rest
+	}: Props = $props();
+
+	const text = $derived({ ...defaultMessages, ...messages });
+	const generatedId = $props.id();
+	const textareaId = $derived(id ?? generatedId);
+	const invalid = $derived(errorList(error).length > 0);
+	const counted = $derived(maxlength !== undefined && maxlength !== null);
+	const describedBy = $derived(
+		[
+			invalid
+				? `${textareaId}-error`
+				: description
+					? `${textareaId}-description`
+					: undefined,
+			counted ? `${textareaId}-counter` : undefined,
+		]
+			.filter(Boolean)
+			.join(" ") || undefined,
+	);
+</script>
+
+<FieldFrame
+	id={textareaId}
+	{label}
+	{description}
+	{error}
+	{required}
+	class={className}
+>
+	<div class="grid gap-1.5">
+		<Textarea
+			{...rest}
+			id={textareaId}
+			{name}
+			{rows}
+			{maxlength}
+			{required}
+			{disabled}
+			aria-invalid={invalid || undefined}
+			aria-describedby={describedBy}
+			bind:value
+			class={cn(
+				"px-3 py-2.5",
+				rows === undefined ? "min-h-24" : "field-sizing-fixed min-h-0",
+			)}
+		/>
+		{#if counted}
+			<p
+				id="{textareaId}-counter"
+				class={cn(
+					"text-muted-foreground text-right text-xs tabular-nums",
+					(value ?? "").length >= Number(maxlength) && "text-destructive",
+				)}
+			>
+				{(value ?? "").length}/{maxlength}
+				<span class="sr-only">{text.characters}</span>
+			</p>
+		{/if}
+	</div>
+</FieldFrame>

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

@@ -0,0 +1,11 @@
+import type { HTMLTextareaAttributes } from "svelte/elements";
+import { Textarea } from "../ui/textarea/index.js";
+import { type FieldProps } from "./field-frame.svelte";
+declare const Textarea: import("svelte").Component<FieldProps & Omit<HTMLTextareaAttributes, "id" | "name" | "value" | "class"> & {
+    value?: string;
+    messages?: Partial<{
+        characters: string;
+    }>;
+}, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

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

@@ -25,7 +25,7 @@
 		bind:ref
 		data-slot="drawer-content"
 		class={cn(
-			"bg-popover text-popover-foreground border-border border shadow-[0_-12px_48px_-16px_var(--glass-shadow)] group/drawer-content after:hidden! fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:right-[max(0.5rem,env(safe-area-inset-right))] data-[vaul-drawer-direction=bottom]:bottom-2 data-[vaul-drawer-direction=bottom]:left-[max(0.5rem,env(safe-area-inset-left))] data-[vaul-drawer-direction=bottom]:max-h-[calc(100dvh-env(safe-area-inset-top)-1.5rem)] data-[vaul-drawer-direction=bottom]:rounded-[2.25rem] data-[vaul-drawer-direction=bottom]:pb-[max(0.5rem,calc(env(safe-area-inset-bottom)-0.5rem))] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:inset-s-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:inset-e-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b",
+			"bg-popover text-popover-foreground border-border border shadow-[0_-12px_48px_-16px_var(--glass-shadow)] group/drawer-content after:hidden! fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:right-[max(0.5rem,var(--safe-right))] data-[vaul-drawer-direction=bottom]:bottom-2 data-[vaul-drawer-direction=bottom]:left-[max(0.5rem,var(--safe-left))] data-[vaul-drawer-direction=bottom]:max-h-[calc(100dvh-var(--safe-top)-1.5rem)] data-[vaul-drawer-direction=bottom]:rounded-[2.25rem] data-[vaul-drawer-direction=bottom]:pb-[max(0.5rem,calc(var(--safe-bottom)-0.5rem))] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:inset-s-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:inset-e-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b",
 			className,
 		)}
 		{...restProps}