@r2digisolutions/ui 0.13.3 → 0.14.0

package/dist/components/index.d.ts

@@ -12,4 +12,6 @@ import Section from './ui/Section/Section.svelte';
 import Loading from './ui/Loading/Loading.svelte';
 import Button from './ui/Button/Button.svelte';
 import Heading from './ui/Heading/Heading.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, Heading, };
+import Label from './ui/Label/Label.svelte';
+import Field from './ui/Field/Field.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, };

package/dist/components/index.js

@@ -12,4 +12,6 @@ import Section from './ui/Section/Section.svelte';
 import Loading from './ui/Loading/Loading.svelte';
 import Button from './ui/Button/Button.svelte';
 import Heading from './ui/Heading/Heading.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Section, Loading, TableList, Heading, };
+import Label from './ui/Label/Label.svelte';
+import Field from './ui/Field/Field.svelte';
+export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, };

package/dist/components/ui/Field/Field.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import Label from '../Label/Label.svelte';
+	import type { Props } from './type.js';
+
+	const {
+		label,
+		children,
+		errors,
+		direction = 'col',
+		required = false,
+		...props
+	}: Props = $props();
+</script>
+
+<Label
+	class={[
+		{
+			'flex-row items-center': direction === 'row',
+			'flex-row-reverse items-center justify-end': direction === 'row-reverse',
+			'flex-col': direction === 'col',
+			'flex-col-reverse items-center': direction === 'col-reverse'
+		},
+		{
+			'field--errors': Boolean(errors?.length)
+		},
+		'flex w-full gap-2',
+		props.class
+	]}
+>
+	{#if label}
+		<span class="block text-sm font-bold text-gray-600 dark:text-gray-200">
+			{label}
+			{#if required}
+				<span class="text-red-500">*</span>
+			{/if}
+		</span>
+	{/if}
+	{@render children()}
+	{#if errors?.length}
+		<div class="flex flex-col">
+			{#each errors as error}
+				<p class="text-xs text-red-500">{error}</p>
+			{/each}
+		</div>
+	{/if}
+</Label>
+
+<style>
+	:global(.field--errors) {
+		span {
+			color: var(--color-red-500);
+		}
+		:global(input, textarea, select, .select-multiple) {
+			border: 1px solid var(--color-red-500) !important;
+		}
+	}
+</style>

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

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

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

@@ -0,0 +1,12 @@
+import type { IInputDirection } from '../../../types/direction.type.js';
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    direction?: IInputDirection;
+    required?: boolean;
+    class?: ClassValue;
+    errors?: string[];
+    label?: string;
+    name?: string;
+    children: Snippet;
+}

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

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

package/dist/components/ui/Label/Label.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Props } from './type';
+
+	let { children, ...props }: Props = $props();
+</script>
+
+<label
+	{...props}
+	class={[
+		'cursor-pointer text-sm font-bold text-gray-600 select-none dark:text-gray-200',
+		props.class
+	]}
+>
+	{@render children()}
+</label>

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+export type IInputDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';

package/dist/types/direction.type.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.13.3",
+	"version": "0.14.0",
 	"private": false,
 	"packageManager": "bun@1.2.18",
 	"publishConfig": {