@selvajs/ui 6.5.1-beta.1 → 6.6.0-beta.3

package/dist/components/primitives/empty/empty.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Empty: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/primitives/empty/index.d.ts

@@ -0,0 +1,7 @@
+import Content from './empty-content.svelte';
+import Description from './empty-description.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Root from './empty.svelte';
+export { Root, Header, Media, Title, Description, Content, Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent };

package/dist/components/primitives/empty/index.js

@@ -0,0 +1,9 @@
+import Content from './empty-content.svelte';
+import Description from './empty-description.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Root from './empty.svelte';
+export { Root, Header, Media, Title, Description, Content, 
+//
+Root as Empty, Header as EmptyHeader, Media as EmptyMedia, Title as EmptyTitle, Description as EmptyDescription, Content as EmptyContent };

package/dist/components/primitives/index.d.ts

@@ -11,9 +11,15 @@ export * as Card from './card';
 export * as Tabs from './tabs';
 export * as Dialog from './dialog';
 export { Drawer } from './drawer';
-export * as Alert from './alert';
 export * as AlertDialog from './alert-dialog';
 export * as ContextMenu from './context-menu';
+export * as DropdownMenu from './dropdown-menu';
+export * as Popover from './popover';
+export * as Command from './command';
+export * as ToggleGroup from './toggle-group';
+export * as Empty from './empty';
+export * as InputGroup from './input-group';
+export { Spinner } from './spinner';
 export * as Collapsible from './collapsible';
 export { ScrollArea } from './scroll-area';
 export * as Resizable from './resizable';
@@ -23,6 +29,9 @@ export { Toaster, toast } from './sonner';
 export { ThemeSwitcher } from './theme-switcher';
 export { default as StateDisplay } from './StateDisplay.svelte';
 export { default as Callout, calloutVariants, type CalloutTone } from './Callout.svelte';
+export { default as SeverityIcon } from './SeverityIcon.svelte';
+export { default as IssueList, type Issue } from './IssueList.svelte';
+export { SEVERITY_ICON, SEVERITY_TEXT, SEVERITY_ORDER, type Severity } from './severity';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';

package/dist/components/primitives/index.js

@@ -12,9 +12,15 @@ export * as Card from './card';
 export * as Tabs from './tabs';
 export * as Dialog from './dialog';
 export { Drawer } from './drawer';
-export * as Alert from './alert';
 export * as AlertDialog from './alert-dialog';
 export * as ContextMenu from './context-menu';
+export * as DropdownMenu from './dropdown-menu';
+export * as Popover from './popover';
+export * as Command from './command';
+export * as ToggleGroup from './toggle-group';
+export * as Empty from './empty';
+export * as InputGroup from './input-group';
+export { Spinner } from './spinner';
 export * as Collapsible from './collapsible';
 export { ScrollArea } from './scroll-area';
 export * as Resizable from './resizable';
@@ -25,6 +31,9 @@ export { ThemeSwitcher } from './theme-switcher';
 // Custom components (not replaced by shadcn)
 export { default as StateDisplay } from './StateDisplay.svelte';
 export { default as Callout, calloutVariants } from './Callout.svelte';
+export { default as SeverityIcon } from './SeverityIcon.svelte';
+export { default as IssueList } from './IssueList.svelte';
+export { SEVERITY_ICON, SEVERITY_TEXT, SEVERITY_ORDER } from './severity';
 export { default as CalculateButton } from './CalculateButton.svelte';
 export { ModeToggle } from './mode-toggle';
 export { default as ViewToggle } from './ViewToggle.svelte';

package/dist/components/primitives/input/input.svelte

@@ -25,8 +25,8 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'h-9 min-w-0 px-3 pt-1.5 text-sm font-medium shadow-xs flex w-full rounded-md border border-input bg-transparent ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'h-9 min-w-0 px-3 pt-1.5 text-sm font-medium shadow-xs flex w-full rounded-md border border-input bg-transparent ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}
@@ -40,8 +40,8 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+			'h-9 min-w-0 px-3 py-1 text-base shadow-xs md:text-sm flex w-full rounded-md border border-input bg-background ring-offset-background transition outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30',
+			'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',
 			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
 			className
 		)}

package/dist/components/primitives/input-group/index.d.ts

@@ -0,0 +1,7 @@
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+import Root from './input-group.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/primitives/input-group/index.js

@@ -0,0 +1,9 @@
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
+import Root from './input-group.svelte';
+export { Root, Addon, Button, Input, Text, Textarea, 
+//
+Root as InputGroup, Addon as InputGroupAddon, Button as InputGroupButton, Input as InputGroupInput, Text as InputGroupText, Textarea as InputGroupTextarea };

package/dist/components/primitives/input-group/input-group-addon.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+	export const inputGroupAddonVariants = tv({
+		base: "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		variants: {
+			align: {
+				'inline-start': 'pl-2 has-[>button]:-ml-1 has-[>kbd]:-ml-0.5 order-first',
+				'inline-end': 'pr-2 has-[>button]:-mr-1 has-[>kbd]:-mr-0.5 order-last',
+				'block-start':
+					'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
+				'block-end':
+					'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start'
+			}
+		},
+		defaultVariants: {
+			align: 'inline-start'
+		}
+	});
+
+	export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		align = 'inline-start',
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		align?: InputGroupAddonAlign;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="input-group-addon"
+	data-align={align}
+	class={cn(inputGroupAddonVariants({ align }), className)}
+	onclick={(e) => {
+		if ((e.target as HTMLElement).closest('button')) {
+			return;
+		}
+		e.currentTarget.parentElement?.querySelector('input')?.focus();
+	}}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/input-group/input-group-addon.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const inputGroupAddonVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        'inline-start': "pl-2 has-[>button]:-ml-1 has-[>kbd]:-ml-0.5 order-first";
+        'inline-end': "pr-2 has-[>button]:-mr-1 has-[>kbd]:-mr-0.5 order-last";
+        'block-start': "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        'block-end': "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined, "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+    align: {
+        'inline-start': "pl-2 has-[>button]:-ml-1 has-[>kbd]:-ml-0.5 order-first";
+        'inline-end': "pr-2 has-[>button]:-mr-1 has-[>kbd]:-mr-0.5 order-last";
+        'block-start': "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        'block-end': "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    align: {
+        'inline-start': "pl-2 has-[>button]:-ml-1 has-[>kbd]:-ml-0.5 order-first";
+        'inline-end': "pr-2 has-[>button]:-mr-1 has-[>kbd]:-mr-0.5 order-last";
+        'block-start': "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start";
+        'block-end': "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start";
+    };
+}, undefined>>;
+export type InputGroupAddonAlign = VariantProps<typeof inputGroupAddonVariants>['align'];
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    align?: InputGroupAddonAlign;
+};
+declare const InputGroupAddon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupAddon = ReturnType<typeof InputGroupAddon>;
+export default InputGroupAddon;

package/dist/components/primitives/input-group/input-group-button.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from 'tailwind-variants';
+
+	const inputGroupButtonVariants = tv({
+		base: 'gap-2 text-sm flex items-center shadow-none',
+		variants: {
+			size: {
+				xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: '',
+				'icon-xs': 'size-6 rounded-md p-0 has-[>svg]:p-0',
+				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+			}
+		},
+		defaultVariants: {
+			size: 'xs'
+		}
+	});
+
+	export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+</script>
+
+<script lang="ts">
+	import { Button } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		type = 'button',
+		variant = 'ghost',
+		size = 'xs',
+		...restProps
+	}: Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+		size?: InputGroupButtonSize;
+	} = $props();
+</script>
+
+<Button
+	bind:ref
+	{type}
+	data-size={size}
+	{variant}
+	class={cn(inputGroupButtonVariants({ size }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</Button>

package/dist/components/primitives/input-group/input-group-button.svelte.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const inputGroupButtonVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, "gap-2 text-sm flex items-center shadow-none", {
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "h-6 gap-1 rounded-md px-1.5 [&>svg:not([class*='size-'])]:size-3.5";
+        sm: "";
+        'icon-xs': "size-6 rounded-md p-0 has-[>svg]:p-0";
+        'icon-sm': "size-8 p-0 has-[>svg]:p-0";
+    };
+}, undefined>>;
+export type InputGroupButtonSize = VariantProps<typeof inputGroupButtonVariants>['size'];
+import { Button } from '../button/index.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = Omit<ComponentProps<typeof Button>, 'href' | 'size'> & {
+    size?: InputGroupButtonSize;
+};
+declare const InputGroupButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type InputGroupButton = ReturnType<typeof InputGroupButton>;
+export default InputGroupButton;

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Input } from '../input/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Input> = $props();
+</script>
+
+<Input
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+		// The group's other controls (a slider, a stepper) set the value, so the spinner is noise.
+		props.type === 'number' && 'no-spinner tabular-nums',
+		className
+	)}
+	bind:value
+	{...props}
+/>

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

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

package/dist/components/primitives/input-group/input-group-text.svelte

@@ -0,0 +1,22 @@
+<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<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	class={cn(
+		"gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center text-muted-foreground [&_svg]:pointer-events-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>

package/dist/components/primitives/input-group/input-group-text.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroupText: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLSpanElement>>, {}, "ref">;
+type InputGroupText = ReturnType<typeof InputGroupText>;
+export default InputGroupText;

package/dist/components/primitives/input-group/input-group-textarea.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Textarea } from '../textarea/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...props
+	}: ComponentProps<typeof Textarea> = $props();
+</script>
+
+<Textarea
+	bind:ref
+	data-slot="input-group-control"
+	class={cn(
+		'py-2 flex-1 resize-none rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
+		className
+	)}
+	bind:value
+	{...props}
+/>

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

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

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...props
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-group"
+	role="group"
+	class={cn(
+		'group/input-group h-9 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 min-w-0 shadow-xs relative flex w-full items-center rounded-md border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+		className
+	)}
+	{...props}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/{alert/alert-title.svelte.d.ts → input-group/input-group.svelte.d.ts}

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from 'svelte/elements';
 import { type WithElementRef } from '../../../utils.js';
-declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
-type AlertTitle = ReturnType<typeof AlertTitle>;
-export default AlertTitle;
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputGroup = ReturnType<typeof InputGroup>;
+export default InputGroup;

package/dist/components/primitives/mode-toggle/mode-toggle.svelte

@@ -6,11 +6,7 @@
 </script>
 
 <Button onclick={toggleMode} variant="outline" size="icon">
-	<Sun
-		class="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
-	/>
-	<Moon
-		class="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
-	/>
+	<Sun class="size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+	<Moon class="size-5 absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
 	<span class="sr-only">Toggle theme</span>
 </Button>

package/dist/components/primitives/popover/index.d.ts

@@ -0,0 +1,9 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Portal from './popover-portal.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

package/dist/components/primitives/popover/index.js

@@ -0,0 +1,11 @@
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Portal from './popover-portal.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Root from './popover.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
+//
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

package/dist/components/primitives/popover/popover-close.svelte

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

package/dist/components/primitives/popover/popover-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+declare const PopoverClose: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+type PopoverClose = ReturnType<typeof PopoverClose>;
+export default PopoverClose;

package/dist/components/primitives/popover/popover-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from 'bits-ui';
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+	import PopoverPortal from './popover-portal.svelte';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = 'center',
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 gap-2.5 p-2.5 text-sm shadow-md w-72 z-50 flex origin-(--bits-popover-content-transform-origin) flex-col rounded-lg bg-popover text-popover-foreground ring-1 ring-foreground/10 outline-hidden duration-100',
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>

package/dist/components/primitives/popover/popover-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Popover as PopoverPrimitive } from 'bits-ui';
+import { type WithoutChildrenOrChild } from '../../../utils.js';
+import PopoverPortal from './popover-portal.svelte';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = PopoverPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;

package/dist/components/primitives/popover/popover-description.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="popover-description"
+	class={cn('text-muted-foreground', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverDescription = ReturnType<typeof PopoverDescription>;
+export default PopoverDescription;

package/dist/components/primitives/popover/popover-header.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="popover-header"
+	class={cn('gap-0.5 text-sm flex flex-col', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-header.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverHeader = ReturnType<typeof PopoverHeader>;
+export default PopoverHeader;

package/dist/components/primitives/popover/popover-portal.svelte

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

package/dist/components/primitives/popover/popover-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PopoverPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type PopoverPortal = ReturnType<typeof PopoverPortal>;
+export default PopoverPortal;

package/dist/components/primitives/popover/popover-title.svelte

@@ -0,0 +1,15 @@
+<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="popover-title" class={cn('font-medium', className)} {...restProps}>
+	{@render children?.()}
+</div>

package/dist/components/primitives/popover/popover-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const PopoverTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type PopoverTitle = ReturnType<typeof PopoverTitle>;
+export default PopoverTitle;