uisv 0.0.1 → 0.0.2

package/dist/components/alert.svelte

@@ -5,6 +5,8 @@
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 	import { isSnippet } from '../utils/common.js';
+	import { defu } from 'defu';
+	import Button from './button.svelte';
 
 	export type AlertProps = {
 		title?: string | Snippet;
@@ -15,7 +17,6 @@
 		position?: 'bottom' | 'right';
 		actions?: ButtonProps[];
 		close?: boolean | ButtonProps;
-		closeiicon?: string | Snippet | Component;
 		ui?: {
 			base?: ClassNameValue;
 			icon?: ClassNameValue;
@@ -33,7 +34,6 @@
 		close,
 		icon,
 		actions = [],
-		closeiicon = '',
 		color = 'primary',
 		variant = 'solid',
 		position = 'bottom',
@@ -41,10 +41,20 @@
 		onclose = () => {}
 	}: AlertProps = $props();
 
+	const close_props = $derived.by(() => {
+		return defu(typeof close === 'boolean' ? {} : close, {
+			icon: 'i-lucide-x',
+			variant: 'link',
+			color: variant === 'solid' ? 'secondary' : color,
+			ui: {
+				icon: variant === 'solid' ? 'text-white' : ''
+			}
+		} as ButtonProps);
+	});
 	const classes = $derived.by(() =>
 		tv({
 			slots: {
-				base: 'flex gap-2 font-sans p-4 pb-2 rounded-lg',
+				base: 'flex gap-2 font-sans p-4 rounded-lg',
 				icon: 'pi size-6',
 				actions: '',
 				description: 'text-opacity-50 text-sm',
@@ -207,7 +217,7 @@
 </script>
 
 <div class={classes.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
-	<div class="flex gap-2">
+	<div class="flex gap-2 flex-grow">
 		{#if icon}
 			<div class="size-6">
 				{#if typeof icon === 'string'}
@@ -221,24 +231,44 @@
 			</div>
 		{/if}
 
-		<div class="space-y-1">
-			<div class={classes.title({ class: [ui.title] })}>
-				{#if isSnippet(title)}
-					{@render title()}
-				{:else}
-					{title}
-				{/if}
-			</div>
+		<div class="space-y-1 flex-grow">
+			{#if title}
+				<div class={classes.title({ class: [ui.title] })}>
+					{#if isSnippet(title)}
+						{@render title()}
+					{:else}
+						{title}
+					{/if}
+				</div>
+			{/if}
 
-			<div class={classes.description({ class: [ui.title] })}>
-				{#if isSnippet(description)}
-					{@render description()}
-				{:else}
-					{description}
-				{/if}
-			</div>
+			{#if description}
+				<div class={classes.description({ class: [ui.title] })}>
+					{#if isSnippet(description)}
+						{@render description()}
+					{:else}
+						{description}
+					{/if}
+				</div>
+			{/if}
 		</div>
+
+		{#if close}
+			<div>
+				<Button {...close_props} onclick={onclose} />
+			</div>
+		{/if}
 	</div>
 
-	<div></div>
+	{#if actions.length > 0}
+		<div class="flex gap-2 items-center pl-8">
+			{#each actions as action (action.label)}
+				<Button
+					{...defu(action, {
+						size: 'xs'
+					} as ButtonProps)}
+				/>
+			{/each}
+		</div>
+	{/if}
 </div>

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

@@ -11,7 +11,6 @@ export type AlertProps = {
     position?: 'bottom' | 'right';
     actions?: ButtonProps[];
     close?: boolean | ButtonProps;
-    closeiicon?: string | Snippet | Component;
     ui?: {
         base?: ClassNameValue;
         icon?: ClassNameValue;

package/dist/components/banner.svelte

@@ -0,0 +1,257 @@
+<script module lang="ts">
+	import type { PropColor } from '../types.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { ButtonProps } from './button.svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { isSnippet } from '../utils/common.js';
+	import { defu } from 'defu';
+	import { useId } from 'bits-ui';
+	import Button from './button.svelte';
+
+	export type BannerProps = {
+		title: string | Snippet;
+		icon?: string | Snippet | Component;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		actions?: ButtonProps[];
+		close?: boolean | ButtonProps;
+		href?: string;
+		target?: string;
+		ui?: {
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
+			description?: ClassNameValue;
+			title?: ClassNameValue;
+		};
+		onclose?: () => void | Promise<void>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		close,
+		icon,
+		href,
+		target,
+		actions = [],
+		color = 'primary',
+		variant = 'solid',
+		ui = {},
+		onclose = () => {}
+	}: BannerProps = $props();
+	const id = useId();
+
+	const close_props = $derived.by(() => {
+		return defu(typeof close === 'boolean' ? {} : close, {
+			icon: 'i-lucide-x',
+			variant: 'link',
+			color: variant === 'solid' ? 'secondary' : color,
+			ui: {
+				icon: variant === 'solid' ? 'text-white' : ''
+			}
+		} as ButtonProps);
+	});
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				base: 'flex items-center gap-2 font-sans p-4',
+				icon: 'pi size-6',
+				actions: '',
+				title: ''
+			},
+			variants: {
+				color: {
+					primary: '',
+					secondary: '',
+					info: '',
+					success: '',
+					warning: '',
+					error: ''
+				},
+				variant: {
+					solid: {
+						base: 'text-white',
+						description: 'text-white/90'
+					},
+					outline: 'border',
+					soft: '',
+					subtle: 'border'
+				}
+			},
+			compoundVariants: [
+				{
+					variant: 'solid',
+					color: 'primary',
+					class: 'bg-primary-500'
+				},
+				{
+					variant: 'solid',
+					color: 'secondary',
+					class: 'bg-secondary-900'
+				},
+				{
+					variant: 'solid',
+					color: 'info',
+					class: 'bg-info-500'
+				},
+				{
+					variant: 'solid',
+					color: 'success',
+					class: 'bg-success-500'
+				},
+				{
+					variant: 'solid',
+					color: 'warning',
+					class: 'bg-warning-500'
+				},
+				{
+					variant: 'solid',
+					color: 'error',
+					class: 'bg-error-500'
+				},
+
+				{
+					variant: 'outline',
+					color: 'primary',
+					class: 'border-primary-300 text-primary-500'
+				},
+				{
+					variant: 'outline',
+					color: 'secondary',
+					class: 'border-secondary-300 text-secondary-900'
+				},
+				{
+					variant: 'outline',
+					color: 'info',
+					class: 'border-info-300 text-info-500'
+				},
+				{
+					variant: 'outline',
+					color: 'success',
+					class: 'border-success-300 text-success-500'
+				},
+				{
+					variant: 'outline',
+					color: 'warning',
+					class: 'border-warning-300 text-warning-500'
+				},
+				{
+					variant: 'outline',
+					color: 'error',
+					class: 'border-error-300 text-error-500'
+				},
+
+				{
+					variant: 'soft',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500'
+				},
+				{
+					variant: 'soft',
+					color: 'secondary',
+					class: 'bg-secondary-50 text-secondary-900'
+				},
+				{
+					variant: 'soft',
+					color: 'info',
+					class: 'bg-info-50 text-info-500'
+				},
+				{
+					variant: 'soft',
+					color: 'success',
+					class: 'bg-success-50 text-success-500'
+				},
+				{
+					variant: 'soft',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500'
+				},
+				{
+					variant: 'soft',
+					color: 'error',
+					class: 'bg-error-50 text-error-500'
+				},
+
+				{
+					variant: 'subtle',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500 border-primary-300'
+				},
+				{
+					variant: 'subtle',
+					color: 'secondary',
+					class: 'bg-secondary-50 text-secondary-900 border-secondary-300'
+				},
+				{
+					variant: 'subtle',
+					color: 'info',
+					class: 'bg-info-50 text-info-500 border-info-300'
+				},
+				{
+					variant: 'subtle',
+					color: 'success',
+					class: 'bg-success-50 text-success-500 border-success-300'
+				},
+				{
+					variant: 'subtle',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500 border-warning-300'
+				},
+				{
+					variant: 'subtle',
+					color: 'error',
+					class: 'bg-error-50 text-error-500  border-error-300'
+				}
+			]
+		})({ color, variant })
+	);
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	{target}
+	class={classes.base({ class: [ui.base] })}
+>
+	<div class="flex flex-grow gap-2 text-sm items-center">
+		{#if icon}
+			<div class="size-6">
+				{#if typeof icon === 'string'}
+					<div class={classes.icon({ class: [icon] })}></div>
+				{:else if isSnippet(icon)}
+					{@render icon()}
+				{:else}
+					{@const Icon = icon}
+					<Icon />
+				{/if}
+			</div>
+		{/if}
+
+		<div class={classes.title({ class: [ui.title] })}>
+			{#if isSnippet(title)}
+				{@render title()}
+			{:else}
+				{title}
+			{/if}
+		</div>
+
+		{#if actions.length > 0}
+			{#each actions as action (action.label)}
+				<Button
+					{...defu(action, {
+						size: 'xs',
+						color: 'secondary'
+					} as ButtonProps)}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	{#if close}
+		<div>
+			<Button {...close_props} onclick={onclose} />
+		</div>
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,24 @@
+import type { PropColor } from '../types.js';
+import type { Component, Snippet } from 'svelte';
+import type { ButtonProps } from './button.svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type BannerProps = {
+    title: string | Snippet;
+    icon?: string | Snippet | Component;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    actions?: ButtonProps[];
+    close?: boolean | ButtonProps;
+    href?: string;
+    target?: string;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+        description?: ClassNameValue;
+        title?: ClassNameValue;
+    };
+    onclose?: () => void | Promise<void>;
+};
+declare const Banner: Component<BannerProps, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/button.svelte

@@ -15,9 +15,9 @@
 		loadingicon?: string;
 		/** When true, the loading icon will be displayed. */
 		loading?: boolean;
-		/** When `true`, the icon will be displayed on the right side. */
-		trailingicon?: boolean;
-		/** Display an icon based on the `leading` and `trailing` props. */
+		/** The position of the icon, including the loading icon */
+		iconposition?: 'left' | 'right';
+		/** Icon when `loading` is `false` */
 		icon?: string | Snippet | Component;
 		/** Route Location the link should navigate to when clicked on. */
 		href?: string;
@@ -50,7 +50,6 @@
 </script>
 
 <script lang="ts">
-	import { Button } from 'bits-ui';
 	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
 	import { type Component, type Snippet } from 'svelte';
 	import { isSnippet } from '../utils/common.js';
@@ -64,6 +63,7 @@
 		size = 'md',
 		variant = 'solid',
 		color = 'primary',
+		iconposition = 'left',
 		children,
 		// active,
 		// activecolor,
@@ -79,7 +79,6 @@
 		loading,
 		loadingicon,
 		target,
-		trailingicon,
 		type
 	}: ButtonProps = $props();
 
@@ -139,7 +138,7 @@
 				{
 					color: 'secondary',
 					variant: 'solid',
-					class: 'bg-secondary-900 hover:(bg-secondary-900)'
+					class: 'bg-secondary-900 hover:(bg-secondary-800)'
 				},
 				{
 					color: 'info',
@@ -165,32 +164,32 @@
 				{
 					color: 'primary',
 					variant: 'outline',
-					class: 'border-primary-500 text-primary-500 hover:(bg-primary-50)'
+					class: 'border-primary-300 text-primary-500 hover:(bg-primary-50)'
 				},
 				{
 					color: 'secondary',
 					variant: 'outline',
-					class: 'border-secondary-900 text-secondary-500 hover:(bg-secondary-50)'
+					class: 'border-secondary-300 hover:(bg-secondary-100)'
 				},
 				{
 					color: 'info',
 					variant: 'outline',
-					class: 'border-blue-500 text-blue-500 hover:(bg-blue-50)'
+					class: 'border-blue-300 text-blue-500 hover:(bg-blue-50)'
 				},
 				{
 					color: 'success',
 					variant: 'outline',
-					class: 'border-green-500 text-green-500 hover:(bg-green-50)'
+					class: 'border-green-300 text-green-500 hover:(bg-green-50)'
 				},
 				{
 					color: 'error',
 					variant: 'outline',
-					class: 'border-red-500 text-red-500 hover:(bg-red-50)'
+					class: 'border-red-300 text-red-500 hover:(bg-red-50)'
 				},
 				{
 					color: 'warning',
 					variant: 'outline',
-					class: 'border-yellow-500 text-yellow-500 hover:(bg-yellow-50)'
+					class: 'border-yellow-300 text-yellow-500 hover:(bg-yellow-50)'
 				},
 
 				{
@@ -201,7 +200,7 @@
 				{
 					color: 'secondary',
 					variant: 'soft',
-					class: 'bg-secondary-100 text-secondary-800 hover:(bg-secondary-50)'
+					class: 'bg-secondary-100 text-secondary-800 hover:(bg-secondary-200)'
 				},
 				{
 					color: 'info',
@@ -294,7 +293,7 @@
 				{
 					color: 'secondary',
 					variant: 'link',
-					class: 'text-secondary-900 hover:(text-secondary-900)'
+					class: 'text-secondary-500 hover:(text-secondary-700)'
 				},
 				{
 					color: 'info',
@@ -332,28 +331,26 @@
 
 {#if href}
 	<a
-		bind:this={ref}
 		{href}
 		{target}
 		class={[classes.base(), !children && icon ? 'px-0 aspect-square' : '', ui.base]}
 		onclick={onClickWrapper}
 	>
-		{@render Inside()}
+		{@render Content()}
 	</a>
 {:else}
-	<Button.Root
-		bind:ref
+	<button
 		{type}
 		disabled={disabled || is_loading}
 		class={[classes.base(), !children && icon ? 'px-0 aspect-square' : '', ui.base]}
 		onclick={onClickWrapper}
 	>
-		{@render Inside()}
-	</Button.Root>
+		{@render Content()}
+	</button>
 {/if}
 
-{#snippet Inside()}
-	{#if !trailingicon}
+{#snippet Content()}
+	{#if iconposition === 'left'}
 		{@render Icon()}
 	{/if}
 
@@ -363,7 +360,7 @@
 		{@render children?.()}
 	{/if}
 
-	{#if trailingicon}
+	{#if iconposition !== 'left'}
 		{@render Icon()}
 	{/if}
 {/snippet}

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

@@ -12,9 +12,9 @@ export type ButtonProps = {
     loadingicon?: string;
     /** When true, the loading icon will be displayed. */
     loading?: boolean;
-    /** When `true`, the icon will be displayed on the right side. */
-    trailingicon?: boolean;
-    /** Display an icon based on the `leading` and `trailing` props. */
+    /** The position of the icon, including the loading icon */
+    iconposition?: 'left' | 'right';
+    /** Icon when `loading` is `false` */
     icon?: string | Snippet | Component;
     /** Route Location the link should navigate to when clicked on. */
     href?: string;
@@ -42,7 +42,6 @@ export type ButtonProps = {
     };
     children?: Snippet;
 };
-import { Button } from 'bits-ui';
 import { type Component, type Snippet } from 'svelte';
 import type { ClassValue } from 'svelte/elements';
 import type { PropColor } from '../types.js';

package/dist/components/card.svelte

@@ -0,0 +1,70 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type CardProps = {
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		ui?: {
+			base?: ClassNameValue;
+			header?: ClassNameValue;
+			content?: ClassNameValue;
+			footer?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let { header, children, footer, variant = 'solid', ui = {} }: CardProps = $props();
+
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				base: 'rounded overflow-hidden',
+				header: 'p-4 sm:px-6',
+				content: 'p-4 sm:p-6',
+				footer: 'p-4 sm:px-6'
+			},
+			variants: {
+				variant: {
+					solid: {
+						base: 'bg-secondary-900 text-secondary-50',
+						header: 'border-transparent',
+						footer: 'border-transparent'
+					},
+					outline: {
+						base: 'border border-secondary-300 divide-y divide-secondary-300'
+					},
+					soft: {
+						base: 'bg-secondary-50 divide-y divide-secondary-300'
+					},
+					subtle: {
+						base: 'bg-secondary-50 border-secondary-300 border divide-y divide-secondary-300'
+					}
+				}
+			},
+			compoundVariants: []
+		})({ variant })
+	);
+</script>
+
+<div class={classes.base({ class: [ui.base] })}>
+	{#if header}
+		<div class={classes.header({ class: [ui.header] })}>
+			{@render header()}
+		</div>
+	{/if}
+
+	<div class={classes.content({ class: ui.content })}>
+		{@render children()}
+	</div>
+
+	{#if footer}
+		<div class={classes.header({ class: [ui.header] })}>
+			{@render footer()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type CardProps = {
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    ui?: {
+        base?: ClassNameValue;
+        header?: ClassNameValue;
+        content?: ClassNameValue;
+        footer?: ClassNameValue;
+    };
+};
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;