@engineio/ui 0.4.0

package/dist/components/ui/button/index.js

@@ -0,0 +1,4 @@
+import Root, { buttonVariants, } from "./button.svelte";
+export { Root, 
+//
+Root as Button, buttonVariants, };

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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} class={cn("p-6", className)} {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/ui/card/card-content.svelte.d.ts

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

package/dist/components/ui/card/card-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../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}
+  class={cn("text-muted-foreground text-sm", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</p>

package/dist/components/ui/card/card-description.svelte.d.ts

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

package/dist/components/ui/card/card-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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}
+  class={cn("flex items-center p-6 pt-0", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/card/card-footer.svelte.d.ts

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

package/dist/components/ui/card/card-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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}
+  class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/card/card-header.svelte.d.ts

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

package/dist/components/ui/card/card-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    level = 3,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+  } = $props()
+</script>
+
+<div
+  role="heading"
+  aria-level={level}
+  bind:this={ref}
+  class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/card/card-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare const CardTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

package/dist/components/ui/card/card.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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}
+  class={cn(
+      "bg-card text-card-foreground rounded-card",
+      className,
+    )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/card/card.svelte.d.ts

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

package/dist/components/ui/card/index.d.ts

@@ -0,0 +1,7 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+export { Root, Content, Description, Footer, Header, Title, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, };

package/dist/components/ui/card/index.js

@@ -0,0 +1,9 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+export { Root, Content, Description, Footer, Header, Title, 
+//
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, };

package/dist/components/ui/checkbox/checkbox.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { cn } from "../../../utils.js"
+  import Check from "@lucide/svelte/icons/check"
+  import Minus from "@lucide/svelte/icons/minus"
+  import {
+    Checkbox as CheckboxPrimitive,
+    type WithoutChildrenOrChild,
+  } from "bits-ui"
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props()
+</script>
+
+<CheckboxPrimitive.Root
+  bind:ref
+  class={cn(
+    "peer box-content size-4 shrink-0 rounded-[6px] border-[1.5px] border-grey-500 transition-colors duration-140 ease-brand data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-38 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-38",
+    className,
+  )}
+  bind:checked
+  bind:indeterminate
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <div class="flex size-4 items-center justify-center text-current">
+      {#if indeterminate}
+        <Minus class="size-3.5" />
+      {:else}
+        <Check class={cn("size-3.5", !checked && "text-transparent")} />
+      {/if}
+    </div>
+  {/snippet}
+</CheckboxPrimitive.Root>

package/dist/components/ui/checkbox/checkbox.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from "bits-ui";
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/ui/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./checkbox.svelte";
+export { Root, Root as Checkbox, };

package/dist/components/ui/checkbox/index.js

@@ -0,0 +1,4 @@
+import Root from "./checkbox.svelte";
+export { Root, 
+//
+Root as Checkbox, };

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { cn } from "../../../utils.js"
+  import X from "@lucide/svelte/icons/x"
+  import {
+    Dialog as DialogPrimitive,
+    type WithoutChildrenOrChild,
+  } from "bits-ui"
+  import type { Snippet } from "svelte"
+  import * as Dialog from "./index.js"
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps
+    children: Snippet
+  } = $props()
+</script>
+
+<Dialog.Portal {...portalProps}>
+  <Dialog.Overlay />
+  <DialogPrimitive.Content
+    bind:ref
+    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 bg-card fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-card border-[1.5px] border-grey-600 p-7 shadow-modal duration-220 ease-brand-out",
+      className,
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+    <DialogPrimitive.Close
+      class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+    >
+      <X class="size-4" />
+      <span class="sr-only">Close</span>
+    </DialogPrimitive.Close>
+  </DialogPrimitive.Content>
+</Dialog.Portal>

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;

package/dist/components/ui/dialog/dialog-description.svelte

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

package/dist/components/ui/dialog/dialog-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+declare const DialogDescription: import("svelte").Component<DialogPrimitive.DescriptionProps, {}, "ref">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
+export default DialogDescription;

package/dist/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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}
+  class={cn(
+    "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/dialog/dialog-footer.svelte.d.ts

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

package/dist/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } 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}
+  class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/dialog/dialog-header.svelte.d.ts

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

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	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-[rgb(10_10_10/0.72)] backdrop-blur-[18px]",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/dialog/dialog-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+declare const DialogOverlay: import("svelte").Component<DialogPrimitive.OverlayProps, {}, "ref">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
+export default DialogOverlay;

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

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

package/dist/components/ui/dialog/dialog-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+declare const DialogTitle: import("svelte").Component<DialogPrimitive.TitleProps, {}, "ref">;
+type DialogTitle = ReturnType<typeof DialogTitle>;
+export default DialogTitle;

package/dist/components/ui/dialog/index.d.ts

@@ -0,0 +1,12 @@
+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";
+declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<DialogPrimitive.TriggerProps, {}, "ref">;
+declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+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/dist/components/ui/dialog/index.js

@@ -0,0 +1,14 @@
+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";
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+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/dist/components/ui/input/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./input.svelte";
+export { Root, Root as Input, };

package/dist/components/ui/input/index.js

@@ -0,0 +1,4 @@
+import Root from "./input.svelte";
+export { Root, 
+//
+Root as Input, };

package/dist/components/ui/input/input.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type {
+    HTMLInputAttributes,
+    HTMLInputTypeAttribute,
+  } from "svelte/elements"
+
+  type InputType = Exclude<HTMLInputTypeAttribute, "file">
+
+  type Props = WithElementRef<
+    Omit<HTMLInputAttributes, "type"> &
+      (
+        | { type: "file"; files?: FileList }
+        | { type?: InputType; files?: undefined }
+      )
+  >
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    type,
+    files = $bindable(),
+    class: className,
+    ...restProps
+  }: Props = $props()
+</script>
+
+{#if type === "file"}
+  <input
+    bind:this={ref}
+    class={cn(
+      "field flex h-10 w-full px-3 py-2 text-[15px] file:border-0 file:bg-transparent file:text-sm file:font-medium",
+      className,
+    )}
+    type="file"
+    bind:files
+    bind:value
+    {...restProps}
+  />
+{:else}
+  <input
+    bind:this={ref}
+    class={cn(
+      "field flex h-10 w-full px-3 py-2 text-[15px] file:border-0 file:bg-transparent file:text-sm file:font-medium",
+      className,
+    )}
+    {type}
+    bind:value
+    {...restProps}
+  />
+{/if}

package/dist/components/ui/input/input.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
+    type: "file";
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/ui/label/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./label.svelte";
+export { Root, Root as Label, };

package/dist/components/ui/label/index.js

@@ -0,0 +1,4 @@
+import Root from "./label.svelte";
+export { Root, 
+//
+Root as Label, };

package/dist/components/ui/label/label.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...restProps}
+/>

package/dist/components/ui/label/label.svelte.d.ts

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

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

@@ -0,0 +1,6 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+declare const Root: import("svelte").Component<import("bits-ui").PopoverRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+declare const Close: import("svelte").Component<PopoverPrimitive.CloseProps, {}, "ref">;
+export { Root, Content, Trigger, Close, Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, };

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

@@ -0,0 +1,8 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+export { Root, Content, Trigger, Close, 
+//
+Root as Popover, Content as PopoverContent, Trigger as PopoverTrigger, Close as PopoverClose, };

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground 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-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>

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

@@ -0,0 +1,7 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+type $$ComponentProps = PopoverPrimitive.ContentProps & {
+    portalProps?: PopoverPrimitive.PortalProps;
+};
+declare const PopoverContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type PopoverContent = ReturnType<typeof PopoverContent>;
+export default PopoverContent;