@foxui/core 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License Copyright (c) 2025 flo-bit
+
+Permission is hereby granted, free of
+charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice
+(including the next paragraph) shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
+EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# 🦊 fox ui
+
+This package has been moved to `@foxui/core`.
+
+svelte 5 + tailwind 4 ui kit, base components
+
+- [Accordion](https://flo-bit.dev/ui-kit/components/base/accordion)
+- [Alert](https://flo-bit.dev/ui-kit/components/base/alert)
+- [Avatar](https://flo-bit.dev/ui-kit/components/base/avatar)
+- [Badge](https://flo-bit.dev/ui-kit/components/base/badge)
+- [Box](https://flo-bit.dev/ui-kit/components/base/box)
+- [Button](https://flo-bit.dev/ui-kit/components/base/button)
+- [Card](https://flo-bit.dev/ui-kit/components/base/cards)
+- [Chat Bubble](https://flo-bit.dev/ui-kit/components/base/chat-bubble)
+- [Checkbox](https://flo-bit.dev/ui-kit/components/base/checkbox)
+- [Head](https://flo-bit.dev/ui-kit/components/base/head)
+- [Heading](https://flo-bit.dev/ui-kit/components/base/image)
+- [Modals](https://flo-bit.dev/ui-kit/components/base/modal)
+- [Number Input](https://flo-bit.dev/ui-kit/components/base/number-input)
+- [Popover](https://flo-bit.dev/ui-kit/components/base/popover)
+- [Prose](https://flo-bit.dev/ui-kit/components/base/prose)
+- [Scroll Area](https://flo-bit.dev/ui-kit/components/base/scroll-area)
+- [Select](https://flo-bit.dev/ui-kit/components/base/select)
+- [Sidebar](https://flo-bit.dev/ui-kit/components/base/sidebar)
+- [Slider](https://flo-bit.dev/ui-kit/components/base/slider)
+- [Sonner](https://flo-bit.dev/ui-kit/components/base/sonner)
+- [Switch](https://flo-bit.dev/ui-kit/components/base/switch)
+- [Tabs](https://flo-bit.dev/ui-kit/components/base/tabs)
+- [Textarea](https://flo-bit.dev/ui-kit/components/base/textarea)
+- [Toggle](https://flo-bit.dev/ui-kit/components/base/toggle)
+- [Toggle Group](https://flo-bit.dev/ui-kit/components/base/toggle-group)
+- [Tooltip](https://flo-bit.dev/ui-kit/components/base/tooltip)
+
+> **This is a public alpha release. Expect bugs and breaking changes.**
+
+[See all components here](https://flo-bit.dev/ui-kit)
+
+For a guide on how to use this ui kit, see the [Quickstart Guide](https://flo-bit.dev/ui-kit/docs/quick-start).
+
+Read more about [the philosophy/aim of this project here](https://flo-bit.dev/ui-kit/docs/philosophy).
+
+For more information about development, contributing and the like, see the main [README](https://github.com/flo-bit/ui-kit/blob/main/README.md).

package/dist/components/accordion/accordion-content.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		'text-base-800 dark:text-base-200 overflow-hidden pt-2 pb-4 text-sm transition-all',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</AccordionPrimitive.Content>

package/dist/components/accordion/accordion-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/accordion/accordion-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import AccordionContent from './accordion-content.svelte';
+	import { AccordionTrigger } from '.';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		title,
+		children,
+		contentClasses,
+		triggerClasses,
+		...restProps
+	}: AccordionPrimitive.ItemProps & {
+		title?: string;
+		contentClasses?: string;
+		triggerClasses?: string;
+	} = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	class={cn('border-base-200 dark:border-base-900 border-b', className)}
+	{...restProps}
+>
+	{#if title}
+		<AccordionTrigger class={triggerClasses}>{title}</AccordionTrigger>
+		<AccordionContent class={contentClasses}>
+			{@render children?.()}
+		</AccordionContent>
+	{:else}
+		{@render children?.()}
+	{/if}
+</AccordionPrimitive.Item>

package/dist/components/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+type $$ComponentProps = AccordionPrimitive.ItemProps & {
+    title?: string;
+    contentClasses?: string;
+    triggerClasses?: string;
+};
+declare const AccordionItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/accordion/accordion-trigger.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex w-full">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			'focus-visible:outline-base-900 dark:focus-visible:outline-base-50 text-base-950 dark:text-base-50 hover:text-accent-600 dark:hover:text-accent-400 my-2 flex w-full flex-1 cursor-pointer items-center justify-between gap-2 rounded-2xl py-2 font-medium transition-all focus-visible:outline-2 focus-visible:outline-offset-2 [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			class="size-4 shrink-0 transition-transform duration-200"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/dist/components/accordion/accordion-trigger.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps['level'];
+};
+declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

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

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+declare const Root: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+export { Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/accordion/index.js

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from 'bits-ui';
+import Content from './accordion-content.svelte';
+import Item from './accordion-item.svelte';
+import Trigger from './accordion-trigger.svelte';
+const Root = AccordionPrimitive.Root;
+export { Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import type { WithElementRef } from 'bits-ui';
+	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('text-xs', className)} {...restProps}>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 5,
+		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('mb-2 text-sm leading-none font-medium last:mb-0', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

package/dist/components/alert/alert.svelte

@@ -0,0 +1,122 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const alertVariants = tv({
+		base: 'text-xs relative w-full rounded-2xl border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 ',
+		variants: {
+			variant: {
+				default:
+					'bg-accent-500/10 [&>div:first-of-type]:text-accent-700 [&>svg]:text-accent-600 dark:[&>svg]:text-accent-500 dark:[&>div:first-of-type]:text-accent-400 dark:bg-accent-500/5 text-accent-600 dark:text-accent-400 border-accent-500/20 dark:border-accent-500/10',
+				secondary:
+					'bg-base-500/10 [&>div:first-of-type]:text-base-700 [&>svg]:text-base-600 dark:[&>svg]:text-base-400 dark:[&>div:first-of-type]:text-base-300 dark:bg-base-500/5 text-base-600 dark:text-base-400 border-base-500/20 dark:border-base-500/10',
+				red: 'bg-red-500/10 [&>div:first-of-type]:text-red-700 [&>svg]:text-red-600 dark:[&>svg]:text-red-500 dark:[&>div:first-of-type]:text-red-400 dark:bg-red-500/5 text-red-600 dark:text-red-400 border-red-500/20 dark:border-red-500/10',
+				orange:
+					'bg-orange-500/10 [&>div:first-of-type]:text-orange-700 [&>svg]:text-orange-600 dark:[&>svg]:text-orange-500 dark:[&>div:first-of-type]:text-orange-400 dark:bg-orange-500/5 text-orange-600 dark:text-orange-400 border-orange-500/20 dark:border-orange-500/10',
+				amber:
+					'bg-amber-500/10 [&>div:first-of-type]:text-amber-700 [&>svg]:text-amber-600 dark:[&>svg]:text-amber-500 dark:[&>div:first-of-type]:text-amber-400 dark:bg-amber-500/5 text-amber-600 dark:text-amber-400 border-amber-500/20 dark:border-amber-500/10',
+				yellow:
+					'bg-yellow-500/10 [&>div:first-of-type]:text-yellow-700 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-500 dark:[&>div:first-of-type]:text-yellow-400 dark:bg-yellow-500/5 text-yellow-600 dark:text-yellow-400 border-yellow-500/20 dark:border-yellow-500/10',
+				lime: 'bg-lime-500/10 [&>div:first-of-type]:text-lime-700 [&>svg]:text-lime-600 dark:[&>svg]:text-lime-500 dark:[&>div:first-of-type]:text-lime-400 dark:bg-lime-500/5 text-lime-600 dark:text-lime-400 border-lime-500/20 dark:border-lime-500/10',
+				green:
+					'bg-green-500/10 [&>div:first-of-type]:text-green-700 [&>svg]:text-green-600 dark:[&>svg]:text-green-500 dark:[&>div:first-of-type]:text-green-400 dark:bg-green-500/5 text-green-600 dark:text-green-400 border-green-500/20 dark:border-green-500/10',
+				emerald:
+					'bg-emerald-500/10 [&>div:first-of-type]:text-emerald-700 [&>svg]:text-emerald-600 dark:[&>svg]:text-emerald-500 dark:[&>div:first-of-type]:text-emerald-400 dark:bg-emerald-500/5 text-emerald-600 dark:text-emerald-400 border-emerald-500/20 dark:border-emerald-500/10',
+				teal: 'bg-teal-500/10 [&>div:first-of-type]:text-teal-700 [&>svg]:text-teal-600 dark:[&>svg]:text-teal-500 dark:[&>div:first-of-type]:text-teal-400 dark:bg-teal-500/5 text-teal-600 dark:text-teal-400 border-teal-500/20 dark:border-teal-500/10',
+				cyan: 'bg-cyan-500/10 [&>div:first-of-type]:text-cyan-700 [&>svg]:text-cyan-600 dark:[&>svg]:text-cyan-500 dark:[&>div:first-of-type]:text-cyan-400 dark:bg-cyan-500/5 text-cyan-600 dark:text-cyan-400 border-cyan-500/20 dark:border-cyan-500/10',
+				sky: 'bg-sky-500/10 [&>div:first-of-type]:text-sky-700 [&>svg]:text-sky-600 dark:[&>svg]:text-sky-500 dark:[&>div:first-of-type]:text-sky-400 dark:bg-sky-500/5 text-sky-600 dark:text-sky-400 border-sky-500/20 dark:border-sky-500/10',
+				blue: 'bg-blue-500/10 [&>div:first-of-type]:text-blue-700 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-500 dark:[&>div:first-of-type]:text-blue-400 dark:bg-blue-500/5 text-blue-600 dark:text-blue-400 border-blue-500/20 dark:border-blue-500/10',
+				indigo:
+					'bg-indigo-500/10 [&>div:first-of-type]:text-indigo-700 [&>svg]:text-indigo-600 dark:[&>svg]:text-indigo-500 dark:[&>div:first-of-type]:text-indigo-400 dark:bg-indigo-500/5 text-indigo-600 dark:text-indigo-400 border-indigo-500/20 dark:border-indigo-500/10',
+				violet:
+					'bg-violet-500/10 [&>div:first-of-type]:text-violet-700 [&>svg]:text-violet-600 dark:[&>svg]:text-violet-500 dark:[&>div:first-of-type]:text-violet-400 dark:bg-violet-500/5 text-violet-600 dark:text-violet-400 border-violet-500/20 dark:border-violet-500/10',
+				purple:
+					'bg-purple-500/10 [&>div:first-of-type]:text-purple-700 [&>svg]:text-purple-600 dark:[&>svg]:text-purple-500 dark:[&>div:first-of-type]:text-purple-400 dark:bg-purple-500/5 text-purple-600 dark:text-purple-400 border-purple-500/20 dark:border-purple-500/10',
+				fuchsia:
+					'bg-fuchsia-500/10 [&>div:first-of-type]:text-fuchsia-700 [&>svg]:text-fuchsia-600 dark:[&>svg]:text-fuchsia-500 dark:[&>div:first-of-type]:text-fuchsia-400 dark:bg-fuchsia-500/5 text-fuchsia-600 dark:text-fuchsia-400 border-fuchsia-500/20 dark:border-fuchsia-500/10',
+				pink: 'bg-pink-500/10 [&>div:first-of-type]:text-pink-700 [&>svg]:text-pink-600 dark:[&>svg]:text-pink-500 dark:[&>div:first-of-type]:text-pink-400 dark:bg-pink-500/5 text-pink-600 dark:text-pink-400 border-pink-500/20 dark:border-pink-500/10',
+				rose: 'bg-rose-500/10 [&>div:first-of-type]:text-rose-700 [&>svg]:text-rose-600 dark:[&>svg]:text-rose-500 dark:[&>div:first-of-type]:text-rose-400 dark:bg-rose-500/5 text-rose-600 dark:text-rose-400 border-rose-500/20 dark:border-rose-500/10'
+			}
+		},
+		defaultVariants: {
+			variant: 'default'
+		}
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { AlertTitle } from '.';
+	import { cn } from '../../utils';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = undefined,
+		title,
+		type,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+		title?: string;
+		type?: 'info' | 'warning' | 'success' | 'error';
+	} = $props();
+
+	if (type === 'warning' && variant === undefined) {
+		variant = 'amber';
+	} else if (type === 'error' && variant === undefined) {
+		variant = 'red';
+	} else if (type === 'success' && variant === undefined) {
+		variant = 'green';
+	} else if (type === 'info' && variant === undefined) {
+		variant = 'sky';
+	}
+</script>
+
+<div
+	bind:this={ref}
+	class={cn(alertVariants({ variant: variant ?? 'default' }), className)}
+	{...restProps}
+	role="alert"
+>
+	{#if type === 'warning'}
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{:else if type === 'success'}
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{:else if type === 'info'}
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{:else if type === 'error'}
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
+			<path
+				fill-rule="evenodd"
+				d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{/if}
+	{#if title}
+		<AlertTitle>{title}</AlertTitle>
+	{/if}
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,79 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-xs relative w-full rounded-2xl border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 ", {
+    variant: {
+        default: string;
+        secondary: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-xs relative w-full rounded-2xl border p-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg~*]:pl-7 ", unknown, unknown, undefined>>;
+export type AlertVariant = VariantProps<typeof alertVariants>['variant'];
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from 'bits-ui';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+    title?: string;
+    type?: 'info' | 'warning' | 'success' | 'error';
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

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

package/dist/components/alert/index.js

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

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { cn } from '../../utils';
+	import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Image } from '../image';
+
+	let {
+		src,
+		alt,
+		fallback,
+		ref = $bindable(null),
+
+		imageRef = $bindable(null),
+		imageClass,
+
+		fallbackRef = $bindable(null),
+		fallbackClass,
+
+		useThemeColor = false,
+
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AvatarPrimitive.RootProps> & {
+		fallback?: string;
+		imageRef?: HTMLImageElement | null;
+		imageClass?: string;
+		fallbackRef?: HTMLElement | null;
+		fallbackClass?: string;
+
+		src?: string;
+		alt?: string;
+
+		useThemeColor?: boolean;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		'border-base-300 bg-base-200 text-base-900 dark:border-base-800 dark:bg-base-900 dark:text-base-50 relative isolate flex size-10 shrink-0 overflow-hidden rounded-full border',
+		className
+	)}
+	{...restProps}
+	bind:this={ref}
+>
+	{#if fallback}
+		<span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium"
+			>{fallback}</span
+		>
+	{:else}
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			class="text-base-400 dark:text-base-600 absolute top-1/2 left-1/2 mt-[15%] size-full -translate-x-1/2 -translate-y-1/2"
+		>
+			<path
+				fill-rule="evenodd"
+				d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z"
+				clip-rule="evenodd"
+			/>
+		</svg>
+	{/if}
+	{#if src}
+		<Image
+			{src}
+			alt={alt ?? ''}
+			{useThemeColor}
+			class="z-10 aspect-square size-full object-cover"
+			onerror={() => {
+				imageRef?.classList.add('hidden');
+			}}
+		/>
+	{/if}
+</div>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,14 @@
+import { Avatar as AvatarPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+type $$ComponentProps = WithoutChildrenOrChild<AvatarPrimitive.RootProps> & {
+    fallback?: string;
+    imageRef?: HTMLImageElement | null;
+    imageClass?: string;
+    fallbackRef?: HTMLElement | null;
+    fallbackClass?: string;
+    src?: string;
+    alt?: string;
+    useThemeColor?: boolean;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "ref" | "imageRef" | "fallbackRef">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/avatar/AvatarGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { WithElementRef } from 'bits-ui';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { Avatar } from '.';
+	import { cn } from '../../utils';
+
+	let {
+		users,
+		ref = $bindable(null),
+
+		avatarClass,
+		imageClass,
+		fallbackClass,
+
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		avatarClass?: string;
+		imageClass?: string;
+		fallbackClass?: string;
+
+		users: {
+			src?: string;
+			alt?: string;
+			fallback?: string;
+		}[];
+
+		class?: string;
+	} = $props();
+</script>
+
+<div class={cn('flex -space-x-2 overflow-hidden', className)} bind:this={ref} {...restProps}>
+	{#each users as user}
+		<Avatar
+			src={user.src}
+			alt={user.alt}
+			fallback={user.fallback}
+			class={cn('border-base-50 dark:border-base-950 border-2', avatarClass)}
+			{imageClass}
+			{fallbackClass}
+		/>
+	{/each}
+</div>

package/dist/components/avatar/AvatarGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { WithElementRef } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    avatarClass?: string;
+    imageClass?: string;
+    fallbackClass?: string;
+    users: {
+        src?: string;
+        alt?: string;
+        fallback?: string;
+    }[];
+    class?: string;
+};
+declare const AvatarGroup: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

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

@@ -0,0 +1,3 @@
+import Avatar from './Avatar.svelte';
+import AvatarGroup from './AvatarGroup.svelte';
+export { Avatar, AvatarGroup };

package/dist/components/avatar/index.js

@@ -0,0 +1,3 @@
+import Avatar from './Avatar.svelte';
+import AvatarGroup from './AvatarGroup.svelte';
+export { Avatar, AvatarGroup };