@nucel/ui 0.1.0

package/src/lib/components/ui/sheet/sheet-footer.svelte

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

package/src/lib/components/ui/sheet/sheet-header.svelte

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

package/src/lib/components/ui/sheet/sheet-overlay.svelte

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

package/src/lib/components/ui/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as SheetPrimitive } from 'bits-ui';
+
+	let { ...restProps }: SheetPrimitive.PortalProps = $props();
+</script>
+
+<SheetPrimitive.Portal {...restProps} />

package/src/lib/components/ui/sheet/sheet-title.svelte

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

package/src/lib/components/ui/sheet/sheet-trigger.svelte

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

package/src/lib/components/ui/sheet/sheet.svelte

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

package/src/lib/components/ui/skeleton/index.ts

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

package/src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('bg-accent animate-pulse rounded-md', className)}
+	{...restProps}
+></div>

package/src/lib/components/ui/sonner/index.ts

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

package/src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Toaster as SonnerToaster } from 'svelte-sonner';
+	import type { ComponentProps } from 'svelte';
+	type ToasterProps = ComponentProps<typeof SonnerToaster>;
+	import { cn } from '../../../utils.js';
+
+	let { class: className, ...restProps }: ToasterProps & { class?: string } = $props();
+</script>
+
+<SonnerToaster class={cn('toaster group', className)} theme="dark" closeButton {...restProps} />

package/src/lib/components/ui/tabs/index.ts

@@ -0,0 +1,16 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};

package/src/lib/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('flex-1 outline-none', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/tabs/tabs-list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	class={cn(
+		'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+		className,
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/tabs/tabs-trigger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		className,
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/tabs/tabs.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn('flex flex-col gap-2', className)}
+	{...restProps}
+/>

package/src/lib/components/ui/textarea/index.ts

@@ -0,0 +1,7 @@
+import Root from './textarea.svelte';
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};

package/src/lib/components/ui/textarea/textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		'data-slot': dataSlot = 'textarea',
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		'border-input placeholder:text-muted-foreground 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:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+		className,
+	)}
+	bind:value
+	{...restProps}
+></textarea>

package/src/lib/components/ui/toggle/index.ts

@@ -0,0 +1,13 @@
+import Root from './toggle.svelte';
+export {
+	toggleVariants,
+	type ToggleSize,
+	type ToggleVariant,
+	type ToggleVariants,
+} from './toggle.svelte';
+
+export {
+	Root,
+	//
+	Root as Toggle,
+};

package/src/lib/components/ui/toggle/toggle.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const toggleVariants = tv({
+		base: "hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline:
+					'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs',
+			},
+			size: {
+				default: 'h-9 min-w-9 px-2',
+				sm: 'h-8 min-w-8 px-1.5',
+				lg: 'h-10 min-w-10 px-2.5',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	});
+
+	export type ToggleVariant = VariantProps<typeof toggleVariants>['variant'];
+	export type ToggleSize = VariantProps<typeof toggleVariants>['size'];
+	export type ToggleVariants = VariantProps<typeof toggleVariants>;
+</script>
+
+<script lang="ts">
+	import { Toggle as TogglePrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		pressed = $bindable(false),
+		class: className,
+		size = 'default',
+		variant = 'default',
+		...restProps
+	}: TogglePrimitive.RootProps & {
+		variant?: ToggleVariant;
+		size?: ToggleSize;
+	} = $props();
+</script>
+
+<TogglePrimitive.Root
+	bind:ref
+	bind:pressed
+	data-slot="toggle"
+	class={cn(toggleVariants({ variant, size }), className)}
+	{...restProps}
+/>

package/src/lib/components/ui/toggle-group/index.ts

@@ -0,0 +1,10 @@
+import Root from './toggle-group.svelte';
+import Item from './toggle-group-item.svelte';
+
+export {
+	Root,
+	Item,
+	//
+	Root as ToggleGroup,
+	Item as ToggleGroupItem,
+};

package/src/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { getToggleGroupCtx } from './toggle-group.svelte';
+	import { cn } from '../../../utils.js';
+	import { type ToggleVariants, toggleVariants } from '../toggle/index.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size,
+		variant,
+		...restProps
+	}: ToggleGroupPrimitive.ItemProps & ToggleVariants = $props();
+
+	const ctx = getToggleGroupCtx();
+</script>
+
+<ToggleGroupPrimitive.Item
+	bind:ref
+	data-slot="toggle-group-item"
+	data-variant={ctx.variant || variant}
+	data-size={ctx.size || size}
+	data-spacing={ctx.spacing}
+	class={cn(
+		toggleVariants({
+			variant: ctx.variant || variant,
+			size: ctx.size || size,
+		}),
+		'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
+		className,
+	)}
+	{value}
+	{...restProps}
+/>

package/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -0,0 +1,65 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+	import type { VariantProps } from 'tailwind-variants';
+	import { toggleVariants } from '../toggle/index.js';
+
+	type ToggleVariants = VariantProps<typeof toggleVariants>;
+
+	interface ToggleGroupContext extends ToggleVariants {
+		spacing?: number;
+	}
+
+	export function setToggleGroupCtx(props: ToggleGroupContext) {
+		setContext('toggleGroup', props);
+	}
+
+	export function getToggleGroupCtx() {
+		return getContext<Required<ToggleGroupContext>>('toggleGroup');
+	}
+</script>
+
+<script lang="ts">
+	import { ToggleGroup as ToggleGroupPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		size = 'default',
+		spacing = 0,
+		variant = 'default',
+		...restProps
+	}: ToggleGroupPrimitive.RootProps & ToggleVariants & { spacing?: number } = $props();
+
+	setToggleGroupCtx({
+		get variant() {
+			return variant;
+		},
+		get size() {
+			return size;
+		},
+		get spacing() {
+			return spacing;
+		},
+	});
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<ToggleGroupPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	data-slot="toggle-group"
+	data-variant={variant}
+	data-size={size}
+	data-spacing={spacing}
+	style={`--gap: ${spacing}`}
+	class={cn(
+		'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs',
+		className,
+	)}
+	{...restProps}
+/>

package/src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,19 @@
+import Root from './tooltip.svelte';
+import Trigger from './tooltip-trigger.svelte';
+import Content from './tooltip-content.svelte';
+import Provider from './tooltip-provider.svelte';
+import Portal from './tooltip-portal.svelte';
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};

package/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+	import TooltipPortal from './tooltip-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+	import type { WithoutChildrenOrChild } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = 'top',
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--bits-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						'bg-foreground z-50 size-2.5 rotate-45 rounded-[2px]',
+						'data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]',
+						'data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]',
+						'data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2',
+						'data-[side=left]:-translate-y-[calc(50%_-_3px)]',
+						arrowClasses,
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>

package/src/lib/components/ui/tooltip/tooltip-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />

package/src/lib/components/ui/tooltip/tooltip-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from 'bits-ui';
+
+	let { ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {...restProps} />

package/src/lib/components/ui/tooltip/tooltip-trigger.svelte

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

package/src/lib/components/ui/tooltip/tooltip.svelte

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