@r2digisolutions/ui 0.15.1 → 0.16.0

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/ui/Input/Input.svelte

@@ -6,6 +6,7 @@
 
 <input
 	{...props}
+	{type}
 	onchange={(e) => {
 		const value = e.currentTarget.value;
 
@@ -25,5 +26,8 @@
 			(onchange as (value: string | null, e: Event) => void)?.(value || null, e);
 		}
 	}}
-	class="block w-full rounded-lg border border-gray-300 py-3 pr-3 pl-10 transition-colors focus:border-transparent focus:ring-2 focus:ring-purple-500"
+	class={[
+		'block w-full rounded-lg border border-gray-300 py-3 pr-3 pl-10 transition-colors focus:border-transparent focus:ring-2 focus:ring-purple-500',
+		props.class
+	]}
 />

package/dist/components/ui/InputRadio/InputRadio.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+	import { Circle } from 'lucide-svelte';
+
+	let { children, name, group = $bindable(), value, ...props }: Props = $props();
+</script>
+
+<input aria-hidden="true" {name} tabindex="-1" type="radio" {value} bind:group class="hidden" />
+
+<div class="flex items-center gap-2">
+	<span
+		role="radio"
+		aria-checked="true"
+		class="border-primary text-primary ring-offset-background focus-visible:ring-ring mr-1 flex aspect-square h-4 w-4 items-center justify-center rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+		aria-describedby="«rl»-form-item-description"
+		tabindex="-1"
+	>
+		<span class="flex items-center justify-center">
+			{#if group === value}
+				<Circle class={`bg-primary h-2 w-2 rounded-full transition`} />
+			{/if}
+		</span>
+	</span>
+	{@render children()}
+</div>

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

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

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
+export interface Props {
+    name?: string;
+    children: Snippet;
+    class?: ClassValue;
+    group?: string;
+    value: string;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.15.1",
+	"version": "0.16.0",
 	"private": false,
 	"packageManager": "bun@1.2.19",
 	"publishConfig": {
@@ -77,7 +77,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"publint": "^0.3.12",
 		"storybook": "^9.0.17",
-		"svelte": "^5.36.8",
+		"svelte": "^5.36.10",
 		"svelte-check": "^4.3.0",
 		"tailwindcss": "^4.1.11",
 		"typescript": "^5.8.3",