fix: type updates

Author: shinokada

package.json

@@ -70,8 +70,8 @@
     "publint": "^0.2.11",
     "runatics": "^0.1.3",
     "runes-meta-tags": "^0.3.2",
-    "svelte": "5.0.0-next.250",
-    "svelte-check": "^3.8.6",
+    "svelte": "5.0.0-next.257",
+    "svelte-check": "^4.0.2",
     "svelte-lib-helpers": "^0.4.8",
     "svelte-rune-highlight": "^0.5.11",
     "tailwindcss": "^3.4.12",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { type FileuploadProps as Props, fileupload } from '.';
 
-  let { files = $bindable(), size = 'md', class: className, ...restProps }: Props = $props();
+  let { files = $bindable<FileList | undefined>(), size = 'md', class: className, ...restProps }: Props<unknown> = $props();
   const base = $derived(fileupload({ size, class: className }));
 </script>
 

src/lib/forms/fileupload/Fileupload.svelte

@@ -3,10 +3,10 @@ import type { HTMLInputAttributes } from 'svelte/elements';
 import type { InputProps } from '$lib';
 import { fileupload } from './theme';
 
-interface FileuploadProps extends Omit<HTMLInputAttributes, 'size'> {
+interface FileuploadProps<T> extends Omit<HTMLInputAttributes, 'size'> {
   files?: FileList;
-  size?: InputProps['size'];
-  color?: InputProps['color'];
+  size?: InputProps<never>['size'];
+  color?: InputProps<never>['color'];
 }
 
 export { Fileupload, fileupload, type FileuploadProps };

src/lib/forms/fileupload/index.ts

@@ -3,7 +3,7 @@
   import { getContext } from 'svelte';
   import { type InputProps as Props, input, clampSize } from '.';
 
-  let { children, left, right, value = $bindable(), size, color = 'default', class: className, classLeft, classRight, ...restProps }: Props = $props();
+  let { children, left, right, value = $bindable<unknown>(), size, color = 'default', class: className, classLeft, classRight, ...restProps }: Props<unknown> = $props();
 
   // tinted if put in component having its own background
   let background: boolean = getContext('background');

src/lib/forms/input/Input.svelte

@@ -4,12 +4,12 @@ import type { FormSizeType, ColorName, SizeType } from '$lib/types';
 import type { Snippet } from 'svelte';
 import { input } from './theme';
 
-interface InputProps extends Omit<HTMLInputAttributes, 'size'> {
+interface InputProps<T = string> extends Omit<HTMLInputAttributes, 'size'> {
   children?: Snippet;
   left?: Snippet;
   right?: Snippet;
   size?: FormSizeType;
-  value?: string | number | readonly string[] | undefined;
+  value?: T;
   color?: ColorName | 'default' | 'tinted';
   classLeft?: string;
   classRight?: string;

src/lib/forms/input/index.ts

@@ -2,7 +2,7 @@
   import Button from '$lib/buttons/Button.svelte';
   import { type RadioButtonProps as Props, radioButton } from '.';
 
-  let { children, group = $bindable(), value, inline = true, pill, outline, buttonSize, color, shadow, class: className, ...restProps }: Props = $props();
+  let { children, group = $bindable<unknown>(), value, inline = true, pill, outline, buttonSize, color, shadow, class: className, ...restProps }: Props<unknown> = $props();
 
   const base = $derived(radioButton({ inline, className }));
 

src/lib/forms/radio-button/RadioButton.svelte

@@ -4,10 +4,10 @@ import type { SizeType, ColorName } from '$lib/types';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { radioButton } from './theme';
 
-interface RadioButtonProps extends HTMLInputAttributes {
+interface RadioButtonProps<T> extends HTMLInputAttributes {
   children: Snippet;
-  group?: string | number;
-  value?: string | number;
+  group?: T;
+  value?: T;
   inline?: boolean;
   pill?: boolean;
   outline?: boolean;

src/lib/forms/radio-button/index.ts

@@ -3,7 +3,8 @@
   import Label from '../label/Label.svelte';
   import { type RadioProps as Props, radio } from '.';
 
-  let { children, aria_describedby, labelClass, color = 'primary', group = $bindable(), value = $bindable(), inputClass, ...restProps }: Props = $props();
+  let { children, aria_describedby, labelClass, color = 'primary', group = $bindable<unknown>(), value = $bindable<unknown>(), inputClass, ...restProps }: Props<unknown> = $props();
+
   const { input, label } = $derived(radio({ color, tinted: !!getContext('background') }));
 </script>
 

src/lib/forms/radio/Radio.svelte

@@ -5,11 +5,12 @@ import type { VariantProps } from 'tailwind-variants';
 import { radio } from './theme';
 
 type ColorType = VariantProps<typeof radio>['color'];
-interface RadioProps extends HTMLInputAttributes {
+interface RadioProps<T> extends HTMLInputAttributes {
   children: Snippet;
   aria_describedby?: string;
   color?: ColorType;
-  group?: number | string | undefined;
+  group?: T;
+  value?: T;
   inputClass?: string;
   labelClass?: string;
 }