@r2digisolutions/ui 0.19.0 → 0.20.0

package/dist/components/index.d.ts

@@ -19,4 +19,6 @@ import InputRadio from './ui/InputRadio/InputRadio.svelte';
 import Textarea from './ui/Textarea/Textarea.svelte';
 import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
-export { Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import NoContent from './ui/NoContent/NoContent.svelte';
+import Tag from './ui/Tag/Tag.svelte';
+export { Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/index.js

@@ -19,4 +19,6 @@ import InputRadio from './ui/InputRadio/InputRadio.svelte';
 import Textarea from './ui/Textarea/Textarea.svelte';
 import Checkbox from './ui/Checkbox/Checkbox.svelte';
 import Badge from './ui/Badge/Badge.svelte';
-export { Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+import NoContent from './ui/NoContent/NoContent.svelte';
+import Tag from './ui/Tag/Tag.svelte';
+export { Tag, NoContent, Alert, Avatar, Button, Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Checkbox, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };

package/dist/components/ui/NoContent/NoContent.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { title, subtitle, children, icon: Icon, ...props }: Props = $props();
+</script>
+
+<div class={['w-full py-20 text-center', props.class]}>
+	{#if Icon}
+		<div
+			class={[
+				'mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-gradient-to-br from-blue-100 to-purple-100'
+			]}
+		>
+			<Icon class="h-12 w-12 text-gray-400" />
+		</div>
+	{/if}
+	<h3 class="text-2xl font-bold text-gray-900">{title}</h3>
+	<p class="text-md mx-auto max-w-md text-gray-500">
+		{subtitle}
+	</p>
+	{#if children}
+		<div class="mt-4 flex items-center justify-center gap-4">
+			{@render children?.()}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,4 @@
+import type { Props } from './type.js';
+declare const NoContent: import("svelte").Component<Props, {}, "">;
+type NoContent = ReturnType<typeof NoContent>;
+export default NoContent;

package/dist/components/ui/NoContent/type.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet, SvelteComponent } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    icon?: typeof SvelteComponent | Snippet | any;
+    class?: ClassValue;
+    title: string;
+    subtitle: string;
+    children?: Snippet;
+}

package/dist/components/ui/NoContent/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Tag/Tag.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+	import { X } from 'lucide-svelte';
+	const {
+		children,
+		onclose,
+		color = 'primary',
+		variant = 'solid',
+		shadow = 'sm',
+		onclick,
+		href,
+		...props
+	}: Props = $props();
+
+	const shadows: Record<typeof shadow, string> = {
+		none: '',
+		sm: 'shadow-sm',
+		md: 'shadow-md',
+		lg: 'shadow-lg',
+		xl: 'shadow-xl'
+	};
+
+	const type = $derived(variant === 'outline' ? 'border' : 'bg');
+
+	const colors: Record<typeof color, string> = $derived({
+		primary: `${type}-primary text-gray-100`,
+		teal: `${type}-teal-200 text-teal-800`,
+		secondary: `${type}-gray-800 text-white`,
+		danger: `${type}-red-500 text-white`,
+		white: `${type}-white text-black`,
+		info: `${type}-blue-500 text-whit`,
+		outline: `${type}-gray-200 text-gray-800`,
+		default: `${type}-gray-800 text-white`
+	});
+
+	const variants: Record<typeof variant, string> = $derived({
+		solid: colors[color],
+		outline: 'border border-gray-200'
+	});
+</script>
+
+<a
+	href={onclick ? href : undefined}
+	tabindex="0"
+	class={[
+		'inline-flex w-fit items-center gap-x-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
+		props.class,
+		shadows[shadow],
+		variants[variant]
+	]}
+	{onclick}
+>
+	{@render children()}
+	{#if onclose}
+		<button
+			class="bg-opacity-75 hover:bg-opacity-100 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-teal-200 text-teal-500 hover:bg-teal-200 dark:bg-teal-500/10 dark:text-teal-500"
+			onclick={onclose}
+		>
+			<X class="h-3 w-3" />
+		</button>
+	{/if}
+</a>

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

@@ -0,0 +1,4 @@
+import type { Props } from './type.js';
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/ui/Tag/type.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    onclick?(): void;
+    href?: string;
+    variant?: 'solid' | 'outline';
+    color?: 'primary' | 'secondary' | 'danger' | 'white' | 'teal' | 'info' | 'outline' | 'default';
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    onclose?(): void;
+    class?: ClassValue;
+    children: Snippet;
+}

package/dist/components/ui/Tag/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/Textarea/type.d.ts

@@ -1,6 +1,9 @@
 import type { ClassValue } from "svelte/elements";
 export interface Props {
     onchange?: (value: string | null, e: Event) => void;
+    oninput?: (e: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
     class?: ClassValue;
     rows?: number;
     cols?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"private": false,
 	"packageManager": "bun@1.2.19",
 	"publishConfig": {