@selvajs/ui 0.9.0

package/src/lib/components/primitives/context-menu/context-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="context-menu-label"
+	data-inset={inset}
+	class={cn('px-2 py-1.5 text-sm font-medium data-[inset]:ps-8 text-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/context-menu/context-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		...restProps
+	}: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="context-menu-radio-group"
+	{...restProps}
+/>

package/src/lib/components/primitives/context-menu/context-menu-radio-item.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import CircleIcon from '@lucide/svelte/icons/circle';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="context-menu-radio-item"
+	class={cn(
+		"gap-2 py-1.5 pe-2 ps-8 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span class="start-2 size-3.5 pointer-events-none absolute flex items-center justify-center">
+			{#if checked}
+				<CircleIcon class="size-2 fill-current" />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</ContextMenuPrimitive.RadioItem>

package/src/lib/components/primitives/context-menu/context-menu-separator.svelte

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

package/src/lib/components/primitives/context-menu/context-menu-shortcut.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="context-menu-shortcut"
+	class={cn('text-xs tracking-widest ms-auto text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/src/lib/components/primitives/context-menu/context-menu-sub-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ContextMenuPrimitive.SubContentProps = $props();
+</script>
+
+<ContextMenuPrimitive.SubContent
+	bind:ref
+	data-slot="context-menu-sub-content"
+	class={cn(
+		'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 p-1 shadow-lg z-50 min-w-[8rem] origin-(--bits-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover text-popover-foreground',
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/primitives/context-menu/context-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn, type WithoutChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="context-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"gap-2 px-2 py-1.5 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center rounded-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ms-auto" />
+</ContextMenuPrimitive.SubTrigger>

package/src/lib/components/primitives/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+	let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger bind:ref data-slot="context-menu-trigger" {...restProps} />

package/src/lib/components/primitives/context-menu/index.ts

@@ -0,0 +1,51 @@
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+import Trigger from './context-menu-trigger.svelte';
+import Group from './context-menu-group.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import Item from './context-menu-item.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Content from './context-menu-content.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Label from './context-menu-label.svelte';
+const Sub = ContextMenuPrimitive.Sub;
+const Root = ContextMenuPrimitive.Root;
+
+export {
+	Sub,
+	Root,
+	Item,
+	GroupHeading,
+	Label,
+	Group,
+	Trigger,
+	Content,
+	Shortcut,
+	Separator,
+	RadioItem,
+	SubContent,
+	SubTrigger,
+	RadioGroup,
+	CheckboxItem,
+	//
+	Root as ContextMenu,
+	Sub as ContextMenuSub,
+	Item as ContextMenuItem,
+	GroupHeading as ContextMenuGroupHeading,
+	Group as ContextMenuGroup,
+	Content as ContextMenuContent,
+	Trigger as ContextMenuTrigger,
+	Shortcut as ContextMenuShortcut,
+	RadioItem as ContextMenuRadioItem,
+	Separator as ContextMenuSeparator,
+	RadioGroup as ContextMenuRadioGroup,
+	SubContent as ContextMenuSubContent,
+	SubTrigger as ContextMenuSubTrigger,
+	CheckboxItem as ContextMenuCheckboxItem,
+	Label as ContextMenuLabel
+};

package/src/lib/components/primitives/dialog/dialog-close.svelte

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

package/src/lib/components/primitives/dialog/dialog-content.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import XIcon from '@lucide/svelte/icons/x';
+	import type { Snippet } from 'svelte';
+	import * as Dialog from './index.js';
+	import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: DialogPrimitive.PortalProps;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<Dialog.Portal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			'gap-4 p-6 shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background duration-200',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close
+				class="end-4 top-4 rounded-xs [&_svg:not([class*='size-'])]:size-4 absolute opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
+			>
+				<XIcon />
+				<span class="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</Dialog.Portal>

package/src/lib/components/primitives/dialog/dialog-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn('text-sm text-muted-foreground', className)}
+	{...restProps}
+/>

package/src/lib/components/primitives/dialog/dialog-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/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="dialog-footer"
+	class={cn('gap-2 sm:flex-row sm:justify-end flex flex-col-reverse', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn('gap-2 sm:text-left flex flex-col text-center', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn(
+		'inset-0 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed z-50',
+		className
+	)}
+	{...restProps}
+/>

package/src/lib/components/primitives/dialog/dialog-title.svelte

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

package/src/lib/components/primitives/dialog/dialog-trigger.svelte

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

package/src/lib/components/primitives/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+
+import Title from './dialog-title.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Trigger from './dialog-trigger.svelte';
+import Close from './dialog-close.svelte';
+
+const Root = DialogPrimitive.Root;
+const Portal = DialogPrimitive.Portal;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose
+};

package/src/lib/components/primitives/drawer/Drawer.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		onClose: () => void;
+		width?: string;
+		ariaLabel?: string;
+		children: Snippet;
+	}
+
+	let { onClose, width = 'w-125', ariaLabel = 'Close drawer', children }: Props = $props();
+
+	function handleKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') onClose();
+	}
+</script>
+
+<svelte:window onkeydown={handleKey} />
+
+<div
+	role="button"
+	tabindex="-1"
+	aria-label={ariaLabel}
+	class="inset-0 bg-black/30 fixed z-50"
+	onclick={onClose}
+	onkeydown={handleKey}
+></div>
+<div
+	class="animate-in slide-in-from-right-4 top-0 right-0 fixed z-50 flex h-full border-border bg-background {width} flex-col overflow-y-auto border-l duration-150"
+>
+	{@render children()}
+</div>

package/src/lib/components/primitives/drawer/index.ts

@@ -0,0 +1 @@
+export { default as Drawer } from './Drawer.svelte';

package/src/lib/components/primitives/field/field-content.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/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="field-content"
+	class={cn('group/field-content gap-1.5 leading-snug flex flex-1 flex-col', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/field/field-description.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		'text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance',
+		'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
+		'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

package/src/lib/components/primitives/field/field-error.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors || errors.length === 0) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn('text-sm font-normal text-destructive', className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ms-4 gap-1 flex list-disc flex-col">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}

package/src/lib/components/primitives/field/field-group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/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="field-group"
+	class={cn(
+		'group/field-group gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 @container/field-group flex w-full flex-col',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/lib/components/primitives/field/field-label.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label } from '$lib/components/primitives/label/index.js';
+	import { cn } from '$lib/utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		'group/field-label peer/field-label gap-2 leading-snug flex w-fit group-data-[disabled=true]/field:opacity-50',
+		'[&>*]:data-[slot=field]:p-4 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border',
+		'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>

package/src/lib/components/primitives/field/field-legend.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = 'legend',
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: 'legend' | 'label';
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		'mb-3 font-medium',
+		'data-[variant=legend]:text-base',
+		'data-[variant=label]:text-sm',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>