noph-ui 0.12.0 → 0.12.1

package/dist/button/types.d.ts

@@ -45,7 +45,7 @@ export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
         icon?: Snippet;
         onclick?: (event: Event) => void;
     }[];
-    group?: string | number | null;
+    group?: string | number | (string | number)[] | null;
     element?: HTMLElement;
 }
 export {};

package/dist/checkbox/Checkbox.svelte

@@ -10,31 +10,42 @@
 		style,
 		...attributes
 	}: CheckboxProps = $props()
+
+	$effect(() => {
+		if (group && attributes.value) {
+			checked = group.includes(attributes.value)
+		}
+	})
+
+	$effect(() => {
+		if (attributes.value && group) {
+			const index = group.indexOf(attributes.value)
+			if (checked) {
+				if (index < 0) {
+					group?.push(attributes.value)
+					group = group
+				}
+			} else {
+				if (index >= 0) {
+					group.splice(index, 1)
+					group = group
+				}
+			}
+		}
+	})
 </script>
 
 <div {style} class={['np-host', attributes.class]} bind:this={element}>
 	<div class="np-container">
 		<label class="np-input-wrapper">
-			{#if group !== undefined}
-				<input
-					{...attributes}
-					class="np-input"
-					type="checkbox"
-					bind:indeterminate
-					bind:checked
-					bind:group
-					aria-checked={indeterminate ? 'mixed' : undefined}
-				/>
-			{:else}
-				<input
-					{...attributes}
-					class="np-input"
-					type="checkbox"
-					bind:indeterminate
-					bind:checked
-					aria-checked={indeterminate ? 'mixed' : undefined}
-				/>
-			{/if}
+			<input
+				{...attributes}
+				class="np-input"
+				type="checkbox"
+				bind:indeterminate
+				bind:checked
+				aria-checked={indeterminate ? 'mixed' : undefined}
+			/>
 			{#if !attributes.disabled}
 				<Ripple />
 			{/if}

package/dist/checkbox/types.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
     element?: HTMLElement;
-    group?: string | number | null;
+    group?: (string | number)[] | null;
 }

package/dist/chip/FilterChip.svelte

@@ -23,6 +23,29 @@
 	}: FilterChipProps = $props()
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
+
+	$effect(() => {
+		if (group && value) {
+			selected = group.includes(value)
+		}
+	})
+
+	$effect(() => {
+		if (value && group) {
+			const index = group.indexOf(value)
+			if (selected) {
+				if (index < 0) {
+					group?.push(value)
+					group = group
+				}
+			} else {
+				if (index >= 0) {
+					group.splice(index, 1)
+					group = group
+				}
+			}
+		}
+	})
 </script>
 
 <div
@@ -47,26 +70,14 @@
 			<CheckIcon width={18} height={18} />
 		</div>
 		<div class="np-chip-label">{label}</div>
-		{#if group !== undefined}
-			<input
-				type="checkbox"
-				bind:checked={selected}
-				{value}
-				{name}
-				{disabled}
-				defaultChecked={defaultSelected}
-				bind:group
-			/>
-		{:else}
-			<input
-				type="checkbox"
-				bind:checked={selected}
-				{value}
-				{name}
-				{disabled}
-				defaultChecked={defaultSelected}
-			/>
-		{/if}
+		<input
+			type="checkbox"
+			bind:checked={selected}
+			{value}
+			{name}
+			{disabled}
+			defaultChecked={defaultSelected}
+		/>
 	</label>
 	{#if !disabled}
 		<Ripple forElement={chipLabel} />

package/dist/chip/types.d.ts

@@ -11,7 +11,7 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
     element?: HTMLDivElement;
     name?: string;
     value?: string;
-    group?: string | number | null;
+    group?: (string | number)[] | null;
     defaultSelected?: boolean | null;
     remove?: (chip: HTMLDivElement) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {