uisv 0.0.7 → 0.0.9

package/dist/components/badge.svelte

@@ -1,227 +0,0 @@
-<script lang="ts" module>
-	import type { Component, Snippet } from 'svelte';
-
-	export type BadgeProps = {
-		label?: string;
-		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		icon?: string | Snippet | Component;
-		trailingicon?: boolean;
-		children?: Snippet;
-		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	import { tv } from 'tailwind-variants';
-	import { isSnippet } from '../utils/common.js';
-	import type { PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-
-	let {
-		icon,
-		label,
-		trailingicon,
-		color = 'primary',
-		size = 'md',
-		variant = 'solid',
-		ui = {},
-		children
-	}: BadgeProps = $props();
-
-	const classes = $derived.by(() => {
-		return tv({
-			slots: { icon: '', base: 'flex-inline items-center font-sans' },
-			variants: {
-				color: {
-					primary: '',
-					secondary: '',
-					error: '',
-					success: '',
-					info: '',
-					warning: ''
-				},
-				variant: {
-					link: '',
-					solid: 'text-white',
-					outline: 'border',
-					soft: '',
-					subtle: 'border',
-					ghost: ''
-				},
-				size: {
-					xs: {
-						base: 'font-medium text-[0.5rem] px-1 h-4 rounded gap-1',
-						icon: 'size-3'
-					},
-					sm: { base: 'font-medium text-[0.625rem] px-1 h-5 rounded gap-1', icon: 'size-3' },
-					md: { base: 'font-medium text-xs rounded-md px-2 h-6 gap-2', icon: 'size-4' },
-					lg: { base: 'font-medium text-sm px-2 h-7 rounded-md gap-2', icon: 'size-5' },
-					xl: { base: 'font-medium px-3 h-8 rounded-md gap-2', icon: 'size-5' }
-				}
-			},
-			compoundVariants: [
-				{
-					color: 'primary',
-					variant: 'solid',
-					class: 'bg-primary-400'
-				},
-				{
-					color: 'secondary',
-					variant: 'solid',
-					class: 'bg-secondary-900'
-				},
-				{
-					color: 'info',
-					variant: 'solid',
-					class: 'bg-blue-500'
-				},
-				{
-					color: 'success',
-					variant: 'solid',
-					class: 'bg-green-500'
-				},
-				{
-					color: 'error',
-					variant: 'solid',
-					class: 'bg-red-500'
-				},
-				{
-					color: 'warning',
-					variant: 'solid',
-					class: 'bg-yellow-500'
-				},
-
-				{
-					color: 'primary',
-					variant: 'outline',
-					class: 'border-primary-300 text-primary-400'
-				},
-				{
-					color: 'secondary',
-					variant: 'outline',
-					class: 'border-secondary-300 text-secondary-900'
-				},
-				{
-					color: 'info',
-					variant: 'outline',
-					class: 'border-blue-300 text-blue-500'
-				},
-				{
-					color: 'success',
-					variant: 'outline',
-					class: 'border-green-300 text-green-500'
-				},
-				{
-					color: 'error',
-					variant: 'outline',
-					class: 'border-red-300 text-red-500'
-				},
-				{
-					color: 'warning',
-					variant: 'outline',
-					class: 'border-yellow-300 text-yellow-500'
-				},
-
-				{
-					color: 'primary',
-					variant: 'soft',
-					class: ' bg-primary-50 text-primary-500'
-				},
-				{
-					color: 'secondary',
-					variant: 'soft',
-					class: 'bg-secondary-100 text-secondary-800'
-				},
-				{
-					color: 'info',
-					variant: 'soft',
-					class: 'bg-blue-100 text-blue-500'
-				},
-				{
-					color: 'success',
-					variant: 'soft',
-					class: 'bg-green-100 text-green-500'
-				},
-				{
-					color: 'error',
-					variant: 'soft',
-					class: 'bg-red-100 text-red-500'
-				},
-				{
-					color: 'warning',
-					variant: 'soft',
-					class: 'bg-yellow-100 text-yellow-500 '
-				},
-
-				{
-					color: 'primary',
-					variant: 'subtle',
-					class: 'bg-primary-50 text-primary-500 border-primary-200 '
-				},
-				{
-					color: 'secondary',
-					variant: 'subtle',
-					class: 'bg-secondary-100 text-secondary-800 border-secondary-300 '
-				},
-				{
-					color: 'info',
-					variant: 'subtle',
-					class: 'bg-blue-50 text-blue-600 border-blue-200'
-				},
-				{
-					color: 'success',
-					variant: 'subtle',
-					class: 'bg-green-100 text-green-600 border-green-300'
-				},
-				{
-					color: 'error',
-					variant: 'subtle',
-					class: 'bg-red-50 text-red-600 border-red-200'
-				},
-				{
-					color: 'warning',
-					variant: 'subtle',
-					class: 'bg-yellow-50 text-yellow-600 border-yellow-300'
-				}
-			]
-		})({ variant, size, color });
-	});
-</script>
-
-<span
-	class={classes.base({
-		class: [icon && !(children || label) ? 'px-0 aspect-square justify-center' : '', ui.base]
-	})}
->
-	{#if !trailingicon}
-		{@render Icon()}
-	{/if}
-
-	{#if label}
-		{label}
-	{:else}
-		{@render children?.()}
-	{/if}
-
-	{#if trailingicon}
-		{@render Icon()}
-	{/if}
-</span>
-
-{#snippet Icon()}
-	{#if icon}
-		{#if typeof icon === 'string'}
-			<div class={['pi', icon, classes.icon(), ui.icon]}></div>
-		{:else if isSnippet(icon)}
-			{@render icon()}
-		{:else}
-			{@const Icon = icon}
-			<Icon />
-		{/if}
-	{/if}
-{/snippet}

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

@@ -1,19 +0,0 @@
-import type { Component, Snippet } from 'svelte';
-export type BadgeProps = {
-    label?: string;
-    color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    icon?: string | Snippet | Component;
-    trailingicon?: boolean;
-    children?: Snippet;
-    ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-    };
-};
-import type { PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
-declare const Badge: Component<BadgeProps, {}, "">;
-type Badge = ReturnType<typeof Badge>;
-export default Badge;

package/dist/components/banner.svelte

@@ -1,255 +0,0 @@
-<script module lang="ts">
-	import { isSnippet, type PropColor } from '../index.js';
-	import type { Component, Snippet } from 'svelte';
-	import Button, { type ButtonProps } from './button.svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import { defu } from 'defu';
-	import { useId } from 'bits-ui';
-
-	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

@@ -1,24 +0,0 @@
-import { type PropColor } from '../index.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;