@riducms/admin 0.1.0

package/src/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-base leading-none font-medium", className)}
+	{...restProps}
+/>

package/src/components/ui/dialog/dialog-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />

package/src/components/ui/dialog/dialog.svelte

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

package/src/components/ui/dialog/index.ts

@@ -0,0 +1,8 @@
+export { default as Dialog } from "@admin/components/ui/dialog/dialog.svelte";
+export { default as DialogClose } from "@admin/components/ui/dialog/dialog-close.svelte";
+export { default as DialogContent } from "@admin/components/ui/dialog/dialog-content.svelte";
+export { default as DialogDescription } from "@admin/components/ui/dialog/dialog-description.svelte";
+export { default as DialogFooter } from "@admin/components/ui/dialog/dialog-footer.svelte";
+export { default as DialogHeader } from "@admin/components/ui/dialog/dialog-header.svelte";
+export { default as DialogTitle } from "@admin/components/ui/dialog/dialog-title.svelte";
+export { default as DialogTrigger } from "@admin/components/ui/dialog/dialog-trigger.svelte";

package/src/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 5,
+		align = "end",
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		loop
+		class={cn(
+			"ridu-popover-enter z-50 min-w-44 origin-(--bits-menu-content-transform-origin) rounded-[4px] border border-control-border bg-popover p-1 text-[12.5px] text-popover-foreground shadow-[var(--shadow-popover)] outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPrimitive.Portal>

package/src/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	class={cn(
+		"data-[highlighted]:bg-control-hover data-[highlighted]:text-foreground flex min-h-8 cursor-default select-none items-center rounded-[3px] px-2.5 py-1.5 text-foreground-muted outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-40",
+		className
+	)}
+	{...restProps}
+/>

package/src/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("-mx-1 my-1 h-px bg-control-border", className)}
+	{...restProps}
+/>

package/src/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger
+	bind:ref
+	data-slot="dropdown-menu-trigger"
+	class={className}
+	{...restProps}
+/>

package/src/components/ui/dropdown-menu/dropdown-menu.svelte

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

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from "@admin/components/ui/dropdown-menu/dropdown-menu.svelte";
+export { default as DropdownMenuContent } from "@admin/components/ui/dropdown-menu/dropdown-menu-content.svelte";
+export { default as DropdownMenuItem } from "@admin/components/ui/dropdown-menu/dropdown-menu-item.svelte";
+export { default as DropdownMenuSeparator } from "@admin/components/ui/dropdown-menu/dropdown-menu-separator.svelte";
+export { default as DropdownMenuTrigger } from "@admin/components/ui/dropdown-menu/dropdown-menu-trigger.svelte";

package/src/components/ui/empty-state/empty-state.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		title,
+		description,
+		children,
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		title: string;
+		description: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="empty-state"
+	class={cn("grid min-h-52 place-items-center px-5 py-10 text-center", className)}
+	{...restProps}
+>
+	<div class="max-w-md">
+		<h2 class="font-serif text-[22px] text-foreground-label">{title}</h2>
+		<p class="mt-2 text-[14px] leading-5 text-foreground-sub">{description}</p>
+		{#if children}
+			<div class="mt-5 flex justify-center">{@render children()}</div>
+		{/if}
+	</div>
+</div>

package/src/components/ui/empty-state/index.ts

@@ -0,0 +1 @@
+export { default as EmptyState } from "@admin/components/ui/empty-state/empty-state.svelte";

package/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { Input } from "@riducms/ui";

package/src/components/ui/kbd/index.ts

@@ -0,0 +1 @@
+export { default as Kbd } from "@admin/components/ui/kbd/kbd.svelte";

package/src/components/ui/kbd/kbd.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"font-mono inline-flex min-h-5 items-center justify-center rounded-[4px] border border-control-border px-1.5 text-[10px] leading-none text-foreground-faint",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/components/ui/pagination/index.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "@admin/components/ui/pagination/pagination.svelte";

package/src/components/ui/pagination/pagination.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import ChevronLeftIcon from "~icons/lucide/chevron-left";
+	import ChevronRightIcon from "~icons/lucide/chevron-right";
+	import { getAdminI18n } from "@riducms/plugin";
+
+	import { Button } from "@admin/components/ui/button";
+
+	let {
+		start,
+		end,
+		total,
+		page,
+		totalPages,
+		hasPrevious,
+		hasNext,
+		busy = false,
+		label,
+		summary,
+		pageSummary,
+		previousLabel,
+		nextLabel,
+		onPrevious,
+		onNext,
+	}: {
+		start: number;
+		end: number;
+		total: number;
+		page: number;
+		totalPages: number;
+		hasPrevious: boolean;
+		hasNext: boolean;
+		busy?: boolean;
+		label?: string;
+		summary?: string;
+		pageSummary?: string;
+		previousLabel?: string;
+		nextLabel?: string;
+		onPrevious: () => void;
+		onNext: () => void;
+	} = $props();
+	const i18n = getAdminI18n();
+	const resolvedLabel = $derived(label ?? i18n.t("general:pagination"));
+	const resolvedSummary = $derived(
+		summary ?? `${i18n.formatNumber(start)}–${i18n.formatNumber(end)} / ${i18n.formatNumber(total)}`
+	);
+	const resolvedPageSummary = $derived(
+		pageSummary ??
+			i18n.t("collections:pageSummary", {
+				page: i18n.formatNumber(page),
+				pages: i18n.formatNumber(Math.max(totalPages, 1)),
+			})
+	);
+	const resolvedPreviousLabel = $derived(previousLabel ?? i18n.t("general:previous"));
+	const resolvedNextLabel = $derived(nextLabel ?? i18n.t("general:next"));
+</script>
+
+<nav
+	data-slot="pagination"
+	class="flex items-center justify-between gap-4 py-3"
+	aria-label={resolvedLabel}
+>
+	<p class="font-mono text-[10.5px] text-foreground-faint">{resolvedSummary}</p>
+	{#if totalPages > 1}
+		<div class="flex items-center gap-2">
+			<Button
+				variant="outline"
+				size="icon-sm"
+				disabled={!hasPrevious || busy}
+				onclick={onPrevious}
+				aria-label={resolvedPreviousLabel}
+			>
+				<ChevronLeftIcon class="size-3.5 rtl:rotate-180" />
+			</Button>
+			<span class="font-mono min-w-12 text-center text-[10px] text-foreground-faint">
+				{resolvedPageSummary}
+			</span>
+			<Button
+				variant="outline"
+				size="icon-sm"
+				disabled={!hasNext || busy}
+				onclick={onNext}
+				aria-label={resolvedNextLabel}
+			>
+				<ChevronRightIcon class="size-3.5 rtl:rotate-180" />
+			</Button>
+		</div>
+	{/if}
+</nav>

package/src/components/ui/popover/index.ts

@@ -0,0 +1,3 @@
+export { default as Popover } from "@admin/components/ui/popover/popover.svelte";
+export { default as PopoverContent } from "@admin/components/ui/popover/popover-content.svelte";
+export { default as PopoverTrigger } from "@admin/components/ui/popover/popover-trigger.svelte";

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<PopoverPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"ridu-popover-enter flex flex-col gap-4 rounded-[4px] border border-control-border bg-popover p-2 text-sm text-popover-foreground shadow-[var(--shadow-popover)] z-50 w-72 origin-(--bits-popover-content-transform-origin) outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

package/src/components/ui/popover/popover-trigger.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger bind:ref data-slot="popover-trigger" class={className} {...restProps} />

package/src/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/src/components/ui/radio-group/index.ts

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from "@admin/components/ui/radio-group/radio-group.svelte";
+export { default as RadioGroupItem } from "@admin/components/ui/radio-group/radio-group-item.svelte";
+export { default as RadioCardItem } from "@admin/components/ui/radio-group/radio-card-item.svelte";

package/src/components/ui/radio-group/radio-card-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+
+	import { cn } from "@riducms/ui";
+
+	let {
+		value,
+		label,
+		disabled = false,
+		class: className,
+	}: {
+		value: string;
+		label: string;
+		disabled?: boolean;
+		class?: string;
+	} = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	{disabled}
+	data-slot="radio-card-item"
+	class={cn(
+		"group/radio inline-flex min-h-6 cursor-pointer items-center gap-2 text-left text-[13px] text-foreground-muted outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/70 focus-visible:ring-offset-2 focus-visible:ring-offset-background data-[state=checked]:text-foreground data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-faint",
+		className
+	)}
+>
+	{#snippet children({ checked })}
+		<span
+			class="grid size-5 shrink-0 place-items-center rounded-full border border-control-border bg-control transition-[border-color,background-color] group-hover/radio:border-control-border-hover data-[checked=true]:border-foreground-muted"
+			data-checked={checked}
+			aria-hidden="true"
+		>
+			{#if checked}<span class="size-2 rounded-full bg-foreground"></span>{/if}
+		</span>
+		<span class="min-w-0">{label}</span>
+	{/snippet}
+</RadioGroupPrimitive.Item>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: RadioGroupPrimitive.ItemProps = $props();
+</script>
+
+<RadioGroupPrimitive.Item
+	bind:ref
+	data-slot="radio-group-item"
+	class={cn("outline-none focus-visible:ring-2 focus-visible:ring-primary/60", className)}
+	{...restProps}
+/>

package/src/components/ui/radio-group/radio-group.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
+	import { cn } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: RadioGroupPrimitive.RootProps = $props();
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="radio-group"
+	class={cn("grid gap-2", className)}
+	{...restProps}
+/>

package/src/components/ui/select/index.ts

@@ -0,0 +1,4 @@
+export { default as Select } from "@admin/components/ui/select/select.svelte";
+export { default as SelectContent } from "@admin/components/ui/select/select-content.svelte";
+export { default as SelectItem } from "@admin/components/ui/select/select-item.svelte";
+export { default as SelectTrigger } from "@admin/components/ui/select/select-trigger.svelte";

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "@riducms/ui";
+	import SelectScrollDownButton from "@admin/components/ui/select/select-scroll-down-button.svelte";
+	import SelectScrollUpButton from "@admin/components/ui/select/select-scroll-up-button.svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<SelectPrimitive.PortalProps>;
+	} = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"ridu-popover-enter max-h-(--bits-select-content-available-height) min-w-36 rounded-[10px] border border-control-border bg-popover text-popover-foreground shadow-[var(--shadow-popover)] relative isolate z-50 overflow-x-hidden overflow-y-auto",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport class={cn("w-full min-w-(--bits-select-anchor-width) scroll-my-1")}>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPrimitive.Portal>

package/src/components/ui/select/select-item.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import CheckIcon from "~icons/lucide/check";
+	import { cn, type WithoutChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"min-h-9 gap-2 rounded-md py-2 pe-8 ps-3 text-[14px] text-foreground-body [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-none select-none data-[highlighted]:bg-control-hover data-[highlighted]:text-foreground data-[selected]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		<span class="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
+			{#if childrenProp}
+				{@render childrenProp({ selected, highlighted })}
+			{:else}
+				{label || value}
+			{/if}
+		</span>
+	{/snippet}
+</SelectPrimitive.Item>

package/src/components/ui/select/select-scroll-down-button.svelte

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

package/src/components/ui/select/select-scroll-up-button.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronUpIcon from "~icons/lucide/chevron-up";
+	import { cn, type WithoutChildrenOrChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn(
+		"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full",
+		className
+	)}
+	{...restProps}
+>
+	<ChevronUpIcon />
+</SelectPrimitive.ScrollUpButton>

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import ChevronDownIcon from "~icons/lucide/chevron-down";
+	import { cn, type WithoutChild } from "@riducms/ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "field",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "field" | "compact" | "toolbar";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"gap-2 rounded-[3px] border border-control-border bg-control px-3 text-[13.5px] text-foreground-strong transition-[background-color,border-color,color] duration-150 hover:border-control-border-hover focus-visible:border-primary/65 aria-invalid:border-destructive/65 data-[placeholder]:text-foreground-placeholder data-[size=field]:h-10 data-[size=compact]:h-9 data-[size=toolbar]:h-[34px] data-[size=toolbar]:px-2.5 data-[size=toolbar]:text-[12.5px] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:border-control-border-disabled disabled:bg-control-disabled disabled:opacity-45 *: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}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="size-3.5 text-foreground-soft pointer-events-none" />
+</SelectPrimitive.Trigger>

package/src/components/ui/select/select.svelte

@@ -0,0 +1,11 @@
+<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/src/components/ui/sheet/index.ts

@@ -0,0 +1,6 @@
+export { default as Sheet } from "@admin/components/ui/sheet/sheet.svelte";
+export { default as SheetClose } from "@admin/components/ui/sheet/sheet-close.svelte";
+export { default as SheetContent } from "@admin/components/ui/sheet/sheet-content.svelte";
+export { default as SheetDescription } from "@admin/components/ui/sheet/sheet-description.svelte";
+export { default as SheetTitle } from "@admin/components/ui/sheet/sheet-title.svelte";
+export { default as SheetTrigger } from "@admin/components/ui/sheet/sheet-trigger.svelte";

package/src/components/ui/sheet/sheet-close.svelte

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