@r2digisolutions/ui 0.16.0 → 0.18.0

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/ui/Checkbox/Checkbox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	let {
+		name,
+		label,
+		required,
+		checked,
+		disabled,
+		value,
+		group = $bindable([]),
+		onchange,
+		...props
+	}: Props = $props();
+</script>
+
+<input
+	{...props}
+	{required}
+	bind:checked
+	{value}
+	type="checkbox"
+	{name}
+	class="shrink-0 rounded-sm border-gray-300 text-blue-600 focus:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 dark:checked:border-blue-500 dark:checked:bg-blue-500 dark:focus:ring-offset-gray-800"
+	onchange={(e) => {
+		const checked = e.currentTarget.checked;
+		const value = e.currentTarget.value;
+
+		onchange?.(Boolean(checked ?? false), value ?? null);
+	}}
+/>
+
+{#if label}
+	<span class="sr-only">{label}</span>
+{/if}

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

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

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

@@ -0,0 +1,14 @@
+import type { ClassValue } from 'svelte/elements';
+type Value = string | number | boolean;
+export interface Props {
+    class?: ClassValue;
+    group?: boolean[];
+    name?: string;
+    label?: string;
+    value?: Value;
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onchange?(checked: boolean, value: Value): void;
+}
+export {};

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

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

package/dist/components/ui/Textarea/Textarea.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { onchange, rows = 10, ...props }: Props = $props();
+</script>
+
+<textarea
+	{...props}
+	{rows}
+	onchange={(e) => {
+		const value = e.currentTarget.value;
+		(onchange as (value: string | null, e: Event) => void)?.(value || null, e);
+	}}
+	class={[
+		'block w-full rounded-lg border border-gray-300 px-3 py-3 transition-colors focus:border-transparent focus:ring-2 focus:ring-purple-500',
+		props.class
+	]}
+></textarea>

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

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

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

@@ -0,0 +1,17 @@
+import type { ClassValue } from "svelte/elements";
+export interface Props {
+    onchange?: (value: string | null, e: Event) => void;
+    class?: ClassValue;
+    rows?: number;
+    cols?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    autofocus?: boolean;
+    value?: string;
+    name?: string;
+    required?: boolean;
+    maxlength?: number;
+    minlength?: number;
+    autocomplete?: 'on' | 'off';
+}

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

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

package/package.json

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