@r2digisolutions/ui 0.7.0 → 0.9.0

package/dist/components/index.d.ts

@@ -1,3 +1,11 @@
 import Alert from './ui/Alert/Alert.svelte';
 import TableList from './ui/TableList/TableList.svelte';
-export { Alert, TableList };
+import Card from './ui/Card/Card.svelte';
+import CardTitle from './ui/Card/CardTitle.svelte';
+import CardDescription from './ui/Card/CardDescription.svelte';
+import CardContent from './ui/Card/CardContent.svelte';
+import CardFooter from './ui/Card/CardFooter.svelte';
+import CardHeader from './ui/Card/CardHeader.svelte';
+import Avatar from './ui/Avatar/Avatar.svelte';
+import Container from './ui/Container/Container.svelte';
+export { Alert, TableList, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Avatar, Container, };

package/dist/components/index.js

@@ -1,3 +1,11 @@
 import Alert from './ui/Alert/Alert.svelte';
 import TableList from './ui/TableList/TableList.svelte';
-export { Alert, TableList };
+import Card from './ui/Card/Card.svelte';
+import CardTitle from './ui/Card/CardTitle.svelte';
+import CardDescription from './ui/Card/CardDescription.svelte';
+import CardContent from './ui/Card/CardContent.svelte';
+import CardFooter from './ui/Card/CardFooter.svelte';
+import CardHeader from './ui/Card/CardHeader.svelte';
+import Avatar from './ui/Avatar/Avatar.svelte';
+import Container from './ui/Container/Container.svelte';
+export { Alert, TableList, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Avatar, Container, };

package/dist/components/ui/Alert/Alert.svelte

@@ -3,15 +3,24 @@
 	import type { Props } from './type.js';
 
 	const { message, type = 'error', errors, children, ...props }: Props = $props();
+
+	const class_type: Record<typeof type, string> = {
+		error:
+			'border-red-200 border bg-red-50 text-sm text-red-800 dark:border-red-900 dark:bg-red-800/10 dark:text-red-500',
+		warning:
+			'border-yellow-200 border bg-yellow-50 text-sm text-yellow-800 dark:border-yellow-900 dark:bg-yellow-800/10 dark:text-yellow-500',
+		info: 'border-blue-200 border bg-blue-50 text-sm text-blue-800 dark:border-blue-900 dark:bg-blue-800/10 dark:text-blue-500',
+		success:
+			'border-green-200 border bg-green-50 text-sm text-green-800 dark:border-green-900 dark:bg-green-800/10 dark:text-green-500'
+	};
+
+	const class_types = $derived(class_type[type]);
 </script>
 
 <div
 	in:fade={{ duration: 300 }}
 	out:fade={{ duration: 300 }}
-	class={[
-		'rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800 dark:border-red-900 dark:bg-red-800/10 dark:text-red-500',
-		props.class
-	]}
+	class={['rounded-lg p-4', class_types, props.class]}
 	role="alert"
 	tabindex="-1"
 	aria-labelledby="hs-with-list-label"

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

@@ -4,6 +4,6 @@ export interface Props {
     class?: ClassValue;
     message: string;
     type?: 'error' | 'success' | 'warning' | 'info';
-    errors?: Record<string, string>;
+    errors?: Record<string, string[]>;
     children?: Snippet;
 }

package/dist/components/ui/Avatar/Avatar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { src, alt, size = 'md', fallback, online = false }: Props = $props();
+
+	const sizes: Record<typeof size, string> = {
+		xs: 'w-4 h-4',
+		sm: 'w-5 h-5',
+		md: 'w-6 h-6',
+		lg: 'w-8 h-8',
+		xl: 'w-10 h-10',
+		'2xl': 'w-12 h-12',
+		'3xl': 'w-14 h-14',
+		'4xl': 'w-16 h-16',
+		'5xl': 'w-20 h-20',
+		'6xl': 'w-24 h-24',
+		'7xl': 'w-28 h-28',
+		'8xl': 'w-32 h-32'
+	};
+</script>
+
+<div class="relative">
+	<div
+		class={[
+			'flex items-center justify-center overflow-hidden rounded-full bg-gray-900 font-semibold text-white ring-2 ring-gray-100',
+			sizes[size]
+		]}
+	>
+		{#if src}
+			<img {src} {alt} class="h-full w-full object-cover" />
+		{:else}
+			<span>{fallback}</span>
+		{/if}
+	</div>
+	{#if online}
+		<div
+			class="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2 border-white bg-green-500"
+		></div>
+	{/if}
+</div>

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

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

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

@@ -0,0 +1,9 @@
+import type { IBaseProps } from "../../../types/base.type.js";
+import type { TSize } from "../../../types/sizes.type.js";
+export interface Props extends IBaseProps {
+    src?: string;
+    alt?: string;
+    size?: TSize;
+    fallback?: string;
+    online?: boolean;
+}

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

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

package/dist/components/ui/Card/Card.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { children, footer, header, onclick, ...props }: Props = $props();
+</script>
+
+<svelte:element
+	this={onclick ? 'button' : 'article'}
+	{...props}
+	role="button"
+	type={onclick ? 'button' : undefined}
+	tabindex="0"
+	aria-label="Card"
+	{onclick}
+	class={[
+		'overflow-hidden rounded-3xl border border-white/50 bg-white text-black shadow-sm backdrop-blur-xl dark:border-neutral-700 dark:bg-neutral-900 dark:text-white',
+		props.class
+	]}
+>
+	{#if header}
+		<header class="flex flex-row gap-2 p-6 pb-2">
+			{@render header()}
+		</header>
+	{/if}
+
+	<section class={['flex flex-1 flex-col gap-2', props.body_class]}>
+		{@render children()}
+	</section>
+
+	{#if footer}
+		<footer
+			class="flex justify-between rounded-b-xl border-t border-gray-200 bg-gray-50 p-3 pt-2 dark:border-neutral-700 dark:bg-neutral-800"
+		>
+			{@render footer()}
+		</footer>
+	{/if}
+</svelte:element>

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

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

package/dist/components/ui/Card/CardContent.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { children } = $props();
+</script>
+
+<div class="flex flex-1 flex-col gap-2 p-6">
+	{@render children()}
+</div>

package/dist/components/ui/Card/CardContent.svelte.d.ts

@@ -0,0 +1,11 @@
+export default CardContent;
+type CardContent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CardContent: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    children: any;
+};

package/dist/components/ui/Card/CardDescription.svelte

@@ -0,0 +1,7 @@
+<script>
+	const { children } = $props();
+</script>
+
+<p class="text-sm text-gray-500 dark:text-gray-400">
+	{@render children()}
+</p>

package/dist/components/ui/Card/CardDescription.svelte.d.ts

@@ -0,0 +1,11 @@
+export default CardDescription;
+type CardDescription = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CardDescription: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type $$ComponentProps = {
+    children: any;
+};

package/dist/components/ui/Card/CardFooter.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	const { children } = $props();
+</script>
+
+<footer
+	class="flex justify-between rounded-b-xl border-t border-gray-200 bg-gray-50 p-3 pt-2 dark:border-neutral-700 dark:bg-neutral-800"
+>
+	{@render children()}
+</footer>

package/dist/components/ui/Card/CardFooter.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const CardFooter: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type CardFooter = ReturnType<typeof CardFooter>;
+export default CardFooter;

package/dist/components/ui/Card/CardHeader.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	const { children } = $props();
+</script>
+
+<header class="flex flex-row gap-2">
+	{@render children()}
+</header>

package/dist/components/ui/Card/CardHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const CardHeader: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type CardHeader = ReturnType<typeof CardHeader>;
+export default CardHeader;

package/dist/components/ui/Card/CardTitle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassValue } from 'svelte/elements';
+
+	const {
+		children,
+		...props
+	}: {
+		children: Snippet;
+		class?: ClassValue;
+	} = $props();
+</script>
+
+<h3 {...props} class={['text-lg font-semibold', props.class]}>
+	{@render children()}
+</h3>

package/dist/components/ui/Card/CardTitle.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
+    children: Snippet;
+    class?: ClassValue;
+};
+declare const CardTitle: import("svelte").Component<$$ComponentProps, {}, "">;
+type CardTitle = ReturnType<typeof CardTitle>;
+export default CardTitle;

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    style?: string;
+    onclick?: () => void;
+    body_class?: ClassValue;
+    class?: ClassValue;
+    footer?: Snippet;
+    header?: Snippet;
+    children: Snippet;
+}

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

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

package/dist/components/ui/Container/Container.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { children, ...props }: Props = $props();
+</script>
+
+<div class={['mx-auto w-full max-w-full px-4 sm:max-w-[1920px]', props.class]}>
+	{@render children()}
+</div>

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

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

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

@@ -0,0 +1,5 @@
+import type { IBaseProps } from "../../../types/base.type.js";
+import type { Snippet } from "svelte";
+export interface Props extends IBaseProps {
+    children: Snippet;
+}

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

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

package/dist/types/base.type.d.ts

@@ -0,0 +1,4 @@
+import type { ClassValue } from "svelte/elements";
+export interface IBaseProps {
+    class?: ClassValue;
+}

package/dist/types/base.type.js

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

package/dist/types/sizes.type.d.ts

@@ -0,0 +1 @@
+export type TSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl';

package/dist/types/sizes.type.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.7.0",
+	"version": "0.9.0",
 	"private": false,
 	"packageManager": "bun@1.2.18",
 	"publishConfig": {
@@ -53,7 +53,7 @@
 		"@playwright/test": "^1.54.1",
 		"@storybook/addon-essentials": "^8.6.14",
 		"@storybook/addon-interactions": "^8.6.14",
-		"@storybook/addon-svelte-csf": "5.0.6",
+		"@storybook/addon-svelte-csf": "5.0.7",
 		"@storybook/blocks": "^8.6.14",
 		"@storybook/svelte": "^9.0.16",
 		"@storybook/sveltekit": "^9.0.16",
@@ -63,6 +63,7 @@
 		"@sveltejs/package": "^2.3.12",
 		"@sveltejs/vite-plugin-svelte": "^6.0.0",
 		"@tailwindcss/postcss": "^4.1.11",
+		"@testing-library/svelte": "^5.2.8",
 		"@vitest/browser": "^3.2.4",
 		"changeset": "^0.2.6",
 		"eslint": "^9.31.0",