@r2digisolutions/ui 0.17.0 → 0.18.0

package/dist/components/index.d.ts

@@ -17,4 +17,5 @@ import Field from './ui/Field/Field.svelte';
 import Input from './ui/Input/Input.svelte';
 import InputRadio from './ui/InputRadio/InputRadio.svelte';
 import Textarea from './ui/Textarea/Textarea.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+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

@@ -17,4 +17,5 @@ import Field from './ui/Field/Field.svelte';
 import Input from './ui/Input/Input.svelte';
 import InputRadio from './ui/InputRadio/InputRadio.svelte';
 import Textarea from './ui/Textarea/Textarea.svelte';
-export { Alert, Avatar, Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Container, Field, Section, Loading, TableList, Heading, Label, Input, InputRadio, Textarea, };
+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/package.json

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