@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/fields/MultiSelectField.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value, options } = $props<{
+    value: (string | number)[] | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const items = $derived(Array.isArray(value) ? value : []);
+</script>
+
+{#if items.length > 0}
+  <div class="flex flex-wrap gap-1">
+    {#each items as v}
+      {@const label = options?.find((o: { label: string; value: string | number }) => o.value === v)?.label ?? String(v)}
+      <Badge variant="secondary" class="font-normal">{label}</Badge>
+    {/each}
+  </div>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/dist/components/fields/MultiSelectField.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: (string | number)[] | null | undefined;
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+};
+declare const MultiSelectField: import("svelte").Component<$$ComponentProps, {}, "">;
+type MultiSelectField = ReturnType<typeof MultiSelectField>;
+export default MultiSelectField;

package/dist/components/fields/NumberField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
+  let { value, locale = 'en-US', options = {} }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+</script>
+<span class="field-number">{formatted}</span>

package/dist/components/fields/NumberField.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    value: number | string | null | undefined;
+    locale?: string;
+    options?: Intl.NumberFormatOptions;
+}
+declare const NumberField: import("svelte").Component<Props, {}, "">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

package/dist/components/fields/RelationField.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { ExternalLink } from '@lucide/svelte';
+
+  let { value, resourceName, displayValue } = $props<{
+    value: string | number | null | undefined;
+    resourceName?: string;
+    displayValue?: string;
+  }>();
+
+  const display = $derived(displayValue ?? (value != null ? `#${value}` : '—'));
+  const href = $derived(resourceName && value != null ? `#/${resourceName}/show/${value}` : undefined);
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="inline-flex items-center gap-1 text-primary hover:underline text-sm"
+  >
+    {display}
+    <ExternalLink class="h-3 w-3" />
+  </a>
+{:else}
+  <span class="text-muted-foreground">{display}</span>
+{/if}

package/dist/components/fields/RelationField.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    value: string | number | null | undefined;
+    resourceName?: string;
+    displayValue?: string;
+};
+declare const RelationField: import("svelte").Component<$$ComponentProps, {}, "">;
+type RelationField = ReturnType<typeof RelationField>;
+export default RelationField;

package/dist/components/fields/RichTextField.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+
+  let { value, maxLength = 200 } = $props<{
+    value: string | null | undefined;
+    maxLength?: number;
+  }>();
+
+  const text = $derived(value ?? '');
+  const truncated = $derived(text.length > maxLength);
+  const display = $derived(truncated ? text.slice(0, maxLength) + '...' : text);
+
+  let showFull = $state(false);
+</script>
+
+{#if !text}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="prose prose-sm dark:prose-invert max-w-none">
+    <p class="whitespace-pre-wrap text-sm leading-relaxed">
+      {showFull ? text : display}
+    </p>
+    {#if truncated}
+      <Button
+        variant="link"
+        size="sm"
+        class="text-xs text-primary h-auto p-0"
+        onclick={() => { showFull = !showFull; }}
+      >
+        {showFull ? t('common.showLess') : t('common.showMore')}
+      </Button>
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/RichTextField.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    value: string | null | undefined;
+    maxLength?: number;
+};
+declare const RichTextField: import("svelte").Component<$$ComponentProps, {}, "">;
+type RichTextField = ReturnType<typeof RichTextField>;
+export default RichTextField;

package/dist/components/fields/SelectField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value, options } = $props<{
+    value: string | number | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const label = $derived(
+    options?.find((o: { label: string; value: string | number }) => o.value === value)?.label ?? (value != null ? String(value) : '—')
+  );
+</script>
+
+<Badge variant="outline">{label}</Badge>

package/dist/components/fields/SelectField.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    value: string | number | null | undefined;
+    options?: {
+        label: string;
+        value: string | number;
+    }[];
+};
+declare const SelectField: import("svelte").Component<$$ComponentProps, {}, "">;
+type SelectField = ReturnType<typeof SelectField>;
+export default SelectField;

package/dist/components/fields/TagField.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+  interface Props { value: string | string[] | null | undefined }
+  let { value }: Props = $props();
+  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+</script>
+<span class="inline-flex flex-wrap gap-1">
+  {#each tags as tag}
+    <Badge variant="secondary">{tag}</Badge>
+  {/each}
+  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
+</span>

package/dist/components/fields/TagField.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    value: string | string[] | null | undefined;
+}
+declare const TagField: import("svelte").Component<Props, {}, "">;
+type TagField = ReturnType<typeof TagField>;
+export default TagField;

package/dist/components/fields/TextField.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; maxLength?: number }
+  let { value, maxLength }: Props = $props();
+  const display = $derived(value && maxLength && value.length > maxLength ? value.slice(0, maxLength) + '…' : value);
+  const needsTooltip = $derived(value && maxLength && value.length > maxLength);
+</script>
+{#if value}
+  <span class="inline-block" title={needsTooltip ? value : undefined}>{display}</span>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/dist/components/fields/TextField.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: string | null | undefined;
+    maxLength?: number;
+}
+declare const TextField: import("svelte").Component<Props, {}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/components/fields/UrlField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ExternalLink } from '@lucide/svelte';
+  interface Props { value: string | null | undefined; label?: string }
+  let { value, label }: Props = $props();
+  const display = $derived(label ?? value ?? '');
+</script>
+{#if value}
+  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
+    {display}
+    <ExternalLink class="h-3 w-3 opacity-60" />
+  </a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/dist/components/fields/UrlField.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: string | null | undefined;
+    label?: string;
+}
+declare const UrlField: import("svelte").Component<Props, {}, "">;
+type UrlField = ReturnType<typeof UrlField>;
+export default UrlField;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn("col-start-2 text-sm [&_p]:leading-relaxed text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type Props = WithElementRef<HTMLAttributes<HTMLHeadingElement>>;
+
+	let { ref = $bindable(null), class: className, children, ...restProps }: Props = $props();
+</script>
+
+<h5
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</h5>

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

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

package/dist/components/ui/alert/alert.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+		variants: {
+			variant: {
+				default: "bg-card text-foreground",
+				destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+				warning: "border-warning/50 text-warning-foreground bg-warning/10 [&>svg]:text-current",
+				success: "border-success/50 text-success bg-success/10 [&>svg]:text-current",
+			},
+		},
+		defaultVariants: { variant: "default" },
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	};
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		children,
+		...restProps
+	}: Props = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,32 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import { type VariantProps } from "tailwind-variants";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+}, undefined, "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variant: {
+        default: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        warning: string;
+        success: string;
+    };
+}, undefined, "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", unknown, unknown, undefined>>;
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+};
+declare const Alert: import("svelte").Component<Props, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

@@ -0,0 +1,4 @@
+import Alert, { type AlertVariant, alertVariants } from "./alert.svelte";
+import AlertTitle from "./alert-title.svelte";
+import AlertDescription from "./alert-description.svelte";
+export { Alert, AlertTitle, AlertDescription, Alert as Root, AlertTitle as Title, AlertDescription as Description, alertVariants, type AlertVariant, };

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

@@ -0,0 +1,5 @@
+// @ts-nocheck
+import Alert, { alertVariants } from "./alert.svelte";
+import AlertTitle from "./alert-title.svelte";
+import AlertDescription from "./alert-description.svelte";
+export { Alert, AlertTitle, AlertDescription, Alert as Root, AlertTitle as Title, AlertDescription as Description, alertVariants, };

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import type { WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & { children?: Snippet; class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+	<AlertDialogPrimitive.Overlay
+		class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+	/>
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</AlertDialogPrimitive.Content>
+</AlertDialogPrimitive.Portal>

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

@@ -0,0 +1,10 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import type { WithoutChildrenOrChild } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & {
+    children?: Snippet;
+    class?: string;
+};
+declare const AlertDialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogContent = ReturnType<typeof AlertDialogContent>;
+export default AlertDialogContent;

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

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

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

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+type $$ComponentProps = AlertDialogPrimitive.DescriptionProps & {
+    class?: string;
+};
+declare const AlertDialogDescription: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogDescription = ReturnType<typeof AlertDialogDescription>;
+export default AlertDialogDescription;

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div 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/alert-dialog/alert-dialog-footer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const AlertDialogFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type AlertDialogFooter = ReturnType<typeof AlertDialogFooter>;
+export default AlertDialogFooter;

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, children, ...restProps }: HTMLAttributes<HTMLDivElement> & { children?: Snippet } = $props();
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+};
+declare const AlertDialogHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type AlertDialogHeader = ReturnType<typeof AlertDialogHeader>;
+export default AlertDialogHeader;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+type $$ComponentProps = AlertDialogPrimitive.OverlayProps & {
+    class?: string;
+};
+declare const AlertDialogOverlay: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogOverlay = ReturnType<typeof AlertDialogOverlay>;
+export default AlertDialogOverlay;

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte

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

package/dist/components/ui/alert-dialog/alert-dialog-portal.svelte.d.ts

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

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

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

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

@@ -0,0 +1,7 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+type $$ComponentProps = AlertDialogPrimitive.TitleProps & {
+    class?: string;
+};
+declare const AlertDialogTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogTitle = ReturnType<typeof AlertDialogTitle>;
+export default AlertDialogTitle;

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

@@ -0,0 +1,13 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const Root: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+declare const Trigger: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+declare const Action: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+declare const Cancel: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+export { Root, Trigger, Action, Cancel, };
+export { default as Content } from "./alert-dialog-content.svelte";
+export { default as Description } from "./alert-dialog-description.svelte";
+export { default as Footer } from "./alert-dialog-footer.svelte";
+export { default as Header } from "./alert-dialog-header.svelte";
+export { default as Overlay } from "./alert-dialog-overlay.svelte";
+export { default as Portal } from "./alert-dialog-portal.svelte";
+export { default as Title } from "./alert-dialog-title.svelte";

package/dist/components/ui/alert-dialog/index.js

@@ -0,0 +1,13 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Action = AlertDialogPrimitive.Action;
+const Cancel = AlertDialogPrimitive.Cancel;
+export { Root, Trigger, Action, Cancel, };
+export { default as Content } from "./alert-dialog-content.svelte";
+export { default as Description } from "./alert-dialog-description.svelte";
+export { default as Footer } from "./alert-dialog-footer.svelte";
+export { default as Header } from "./alert-dialog-header.svelte";
+export { default as Overlay } from "./alert-dialog-overlay.svelte";
+export { default as Portal } from "./alert-dialog-portal.svelte";
+export { default as Title } from "./alert-dialog-title.svelte";

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLImgAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const avatarVariants = tv({
+		base: "relative flex shrink-0 overflow-hidden rounded-full",
+		variants: {
+			size: {
+				default: "size-10",
+				sm: "size-8",
+				lg: "size-12",
+				xl: "size-16",
+			},
+		},
+		defaultVariants: { size: "default" },
+	});
+
+	// AvatarSize type is exported from the package index.ts
+	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+
+	type Props = WithElementRef<HTMLImgAttributes, HTMLImageElement> & {
+		size?: AvatarSize;
+		fallback?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		src,
+		alt = "",
+		size = "default",
+		fallback,
+		class: className,
+		...restProps
+	}: Props = $props();
+
+	let imgError = $state(false);
+</script>
+
+{#if src && !imgError}
+	<span class={cn(avatarVariants({ size }), className)}>
+		<img
+			bind:this={ref}
+			data-slot="avatar"
+			{src}
+			{alt}
+			class="aspect-square h-full w-full object-cover"
+			onerror={() => { imgError = true; }}
+			{...restProps}
+		/>
+	</span>
+{:else}
+	<span
+		data-slot="avatar-fallback"
+		class={cn(
+			avatarVariants({ size }),
+			"flex items-center justify-center bg-muted text-muted-foreground font-medium text-sm",
+			className
+		)}
+	>
+		{fallback ?? alt?.charAt(0).toUpperCase() ?? "?"}
+	</span>
+{/if}