@r2digisolutions/ui 0.18.5 → 0.19.0

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/components/ui/Badge/Badge.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Props } from './type.js';
+
+	const { selected, children, ...props }: Props = $props();
+</script>
+
+<button
+	{...props}
+	type="button"
+	class={[
+		'cursor-pointer rounded-full px-3 py-1 text-sm font-medium transition-colors',
+		selected ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300',
+		props.class
+	]}
+>
+	{@render children()}
+</button>

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

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

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

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

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

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

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

@@ -27,7 +27,7 @@
 		}
 	}}
 	class={[
-		'block h-12 w-full rounded-lg border border-gray-300 py-3 font-normal transition-colors placeholder:text-gray-400 focus:border-transparent focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 dark:focus:ring-offset-gray-800',
+		'block h-12 w-full rounded-lg border border-gray-300 py-3 font-normal transition-colors placeholder:text-gray-400 read-only:border-gray-300 read-only:bg-gray-200 read-only:text-gray-500 focus:border-transparent focus:ring-2 focus:ring-purple-500 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 read-only:dark:border-neutral-700 read-only:dark:bg-neutral-800 read-only:dark:text-gray-400 dark:focus:ring-offset-gray-800',
 		props.class
 	]}
 />

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

@@ -12,7 +12,7 @@
 		(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 font-normal transition-colors placeholder:text-gray-400 focus:border-transparent focus:ring-2 focus:ring-purple-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 dark:focus:ring-offset-gray-800',
+		'block w-full rounded-lg border border-gray-300 px-3 py-3 font-normal transition-colors placeholder:text-gray-400 read-only:border-gray-300 read-only:bg-gray-200 read-only:text-gray-500 focus:border-transparent focus:ring-2 focus:ring-purple-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-900 dark:focus:ring-offset-gray-800',
 		props.class
 	]}
 ></textarea>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/ui",
-	"version": "0.18.5",
+	"version": "0.19.0",
 	"private": false,
 	"packageManager": "bun@1.2.19",
 	"publishConfig": {
@@ -77,11 +77,11 @@
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"publint": "^0.3.12",
 		"storybook": "^9.0.17",
-		"svelte": "^5.36.10",
+		"svelte": "^5.36.13",
 		"svelte-check": "^4.3.0",
 		"tailwindcss": "^4.1.11",
 		"typescript": "^5.8.3",
-		"typescript-eslint": "^8.37.0",
+		"typescript-eslint": "^8.38.0",
 		"vite": "^7.0.5",
 		"vitest": "^3.2.4"
 	},