@iroco/ui 1.5.0 → 1.6.0

package/dist/Alert.svelte

@@ -54,4 +54,8 @@
   border: none;
   cursor: pointer;
   color: var(--color-icon-primary);
+}
+.alert__close:focus {
+  outline-color: var(--color-secondary);
+  outline-style: auto;
 }</style>

package/dist/Button.stories.svelte

@@ -30,7 +30,7 @@
 </script>
 
 {#snippet template({ ...args })}
-	<!--👇 'on:click' allows to forward event to addon-actions  -->
+	<!--👇 'onclick' allows to forward event to addon-actions  -->
 	<Button {...args} onclick={handleClick}>
 		You clicked: {count}
 	</Button>

package/dist/Button.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import type { MouseEventHandler } from 'svelte/elements';
+	import type {
+		HTMLButtonAttributes,
+		HTMLInputAttributes,
+		MouseEventHandler
+	} from 'svelte/elements';
 
-	interface Props {
-		type?: 'button' | 'reset' | 'submit' | null | undefined;
-		disabled?: boolean;
+	interface Props extends HTMLButtonAttributes {
 		kind?: 'danger' | 'success' | 'dark' | 'basic';
 		size?: 'small' | 'regular';
 		fullWidth?: boolean;
-		id?: string | null;
-		formaction?: string | null;
-		form?: string | null;
-		children?: import('svelte').Snippet;
-		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
 	let {
@@ -20,23 +17,15 @@
 		kind = 'basic',
 		size = 'regular',
 		fullWidth = false,
-		id = null,
-		formaction = null,
-		form = null,
 		children,
-		onclick
+		...rest
 	}: Props = $props();
 </script>
 
 <button
-	{id}
 	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth ? 'iroco-ui-button--full-width' : ''}`}
 	class:disabled
-	{type}
-	{formaction}
-	{disabled}
-	{onclick}
-	{form}
+	{...rest}
 >
 	{@render children?.()}
 </button>

package/dist/Button.svelte.d.ts

@@ -1,15 +1,8 @@
-import type { MouseEventHandler } from 'svelte/elements';
-interface Props {
-    type?: 'button' | 'reset' | 'submit' | null | undefined;
-    disabled?: boolean;
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     kind?: 'danger' | 'success' | 'dark' | 'basic';
     size?: 'small' | 'regular';
     fullWidth?: boolean;
-    id?: string | null;
-    formaction?: string | null;
-    form?: string | null;
-    children?: import('svelte').Snippet;
-    onclick?: MouseEventHandler<HTMLButtonElement>;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/NavBar.stories.svelte

@@ -24,6 +24,14 @@
 			]
 		}
 	});
+
+	function handleClose() {
+		console.log('onclick');
+	}
+
+	function handleClickLink(e) {
+		console.log('onclick_link : ', e);
+	}
 </script>
 
 <script lang="ts">
@@ -31,7 +39,7 @@
 </script>
 
 {#snippet template({ ...args })}
-	<NavBar {...args} />
+	<NavBar {...args} onclick={handleClose} onclick_link={handleClickLink} />
 {/snippet}
 
 <Story name="Default" />

package/dist/NavBar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { IconClose } from './index';
-	import { createEventDispatcher } from 'svelte';
 	import { NavigationItem, NavigationItemType } from './definition.js';
 	import type { MouseEventHandler } from 'svelte/elements';
 
@@ -10,19 +9,17 @@
 		version?: string | null;
 		currentRoute?: string | null;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
+		onclick_link?: MouseEventHandler<HTMLButtonElement>;
 	}
 
-	let { navigationItems, type, version = null, currentRoute, onclick }: Props = $props();
-
-	const dispatch = createEventDispatcher();
-
-	const handleClickLink = (menuItem: NavigationItem) => {
-		if (typeof menuItem.hrefOrCallback === 'function') {
-			menuItem.hrefOrCallback();
-			return false; // to avoid calling href
-		}
-		dispatch('click_link');
-	};
+	let {
+		navigationItems,
+		type,
+		version = null,
+		currentRoute,
+		onclick,
+		onclick_link
+	}: Props = $props();
 
 	function isActive(item: NavigationItem): boolean {
 		if (typeof item.hrefOrCallback === 'string') {
@@ -47,7 +44,13 @@
 					</form>
 				{:else}
 					<a
-						onclick={() => handleClickLink(item)}
+						onclick={() => {
+							if (typeof item.hrefOrCallback === 'function') {
+								item.hrefOrCallback();
+								return false; // to avoid calling href
+							}
+							onclick_link();
+						}}
 						href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
 						class:iroco-ui-button={item.type === NavigationItemType.BUTTON}
 						class:iroco-ui-button--small={item.type === NavigationItemType.BUTTON}

package/dist/NavBar.svelte.d.ts

@@ -6,24 +6,8 @@ interface Props {
     version?: string | null;
     currentRoute?: string | null;
     onclick?: MouseEventHandler<HTMLButtonElement>;
+    onclick_link?: MouseEventHandler<HTMLButtonElement>;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavBar: $$__sveltets_2_IsomorphicComponent<Props, {
-    click_link: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NavBar = InstanceType<typeof NavBar>;
+declare const NavBar: import("svelte").Component<Props, {}, "">;
+type NavBar = ReturnType<typeof NavBar>;
 export default NavBar;

package/dist/Navigation.svelte

@@ -47,8 +47,8 @@
 			{currentRoute}
 			{type}
 			{version}
-			on:click_link={() => (showMenu = false)}
-			on:click={() => (showMenu = false)}
+			onclick_link={() => (showMenu = false)}
+			onclick={() => (showMenu = false)}
 		/>
 	{/if}
 </div>

package/dist/NumberInput.svelte

@@ -1,35 +1,19 @@
 <script lang="ts">
-	import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLInputAttributes {
-		id: string;
-		label: string | '' | undefined;
-		placeholder?: string | '' | undefined;
+		label?: string | '' | undefined;
 		error?: string | undefined;
-		value?: number | undefined;
-		min: number | undefined;
-		max: number | undefined;
-		onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 	}
 
-	let {
-		id,
-		label,
-		placeholder = '',
-		error = undefined,
-		value = $bindable(undefined),
-		min,
-		max,
-		onchange,
-		...rest
-	}: Props = $props();
+	let { id, label, error = undefined, ...rest }: Props = $props();
 </script>
 
 <div class="iroco-ui-input">
 	{#if label}
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
-	<input {onchange} bind:value {id} type="number" {placeholder} {min} {max} {...rest} />
+	<input {id} type="number" {...rest} />
 	{#if error}
 		<p data-testid="error" class="error">{error}</p>
 	{/if}

package/dist/NumberInput.svelte.d.ts

@@ -1,14 +1,8 @@
-import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-    id: string;
-    label: string | '' | undefined;
-    placeholder?: string | '' | undefined;
+    label?: string | '' | undefined;
     error?: string | undefined;
-    value?: number | undefined;
-    min: number | undefined;
-    max: number | undefined;
-    onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 }
-declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+declare const NumberInput: import("svelte").Component<Props, {}, "">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

package/dist/RadioButton.svelte

@@ -2,22 +2,15 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLInputAttributes {
-		value?: string | number | null;
 		group?: string | number | null;
-		name?: string | null;
-		checked?: boolean;
 		children?: import('svelte').Snippet;
 	}
 
-	let { value = null, group = $bindable(null), name = null, checked, children }: Props = $props();
-
-	function onchange(event: Event) {
-		group = event.currentTarget.value;
-	}
+	let { group = $bindable(null), children, ...others }: Props = $props();
 </script>
 
 <label class="iroco-ui-radio">
-	<input type="radio" bind:group {value} {name} {checked} {onchange} />
+	<input type="radio" bind:group {...others} />
 	<span class="radio-button-color"></span>
 	{@render children?.()}
 </label>

package/dist/RadioButton.svelte.d.ts

@@ -1,9 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-    value?: string | number | null;
     group?: string | number | null;
-    name?: string | null;
-    checked?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const RadioButton: import("svelte").Component<Props, {}, "group">;

package/dist/TextInput.svelte

@@ -1,46 +1,30 @@
 <script lang="ts">
-	import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	export type ValidationErrorMessage = { key: string; isHtml?: boolean };
 
 	interface Props extends HTMLInputAttributes {
-		id?: string | null;
-		type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
-		name?: string | null;
 		label?: string | null;
-		placeholder?: string | null;
 		error?: string | null;
 		errors?: Array<ValidationErrorMessage> | null;
 		htmlError?: boolean;
-		value?: string | null;
-		onFocus?: ((e: FocusEvent) => void) | null;
-		onBlur?: ((e: Event) => void) | null;
-		readonly?: boolean;
 		border?: boolean;
-		autocomplete?: FullAutoFill | null | undefined;
-		oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
 	}
 
 	let {
-		id = null,
 		type = 'text',
-		name = null,
 		label = null,
-		placeholder = null,
 		error = null,
-		errors = null,
+		errors = [],
 		htmlError = false,
-		value = $bindable(null),
-		onFocus = null,
-		onBlur = null,
-		readonly = false,
 		border = false,
 		autocomplete = 'on',
-		oninput
+		readonly,
+		...rest
 	}: Props = $props();
 
 	function hasErrors() {
-		return error !== null || errors?.length > 0;
+		return error !== null || (errors?.length ?? 0) > 0;
 	}
 </script>
 
@@ -49,19 +33,12 @@
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
 	<input
-		{oninput}
-		bind:value
-		onfocus={onFocus}
-		onblur={onBlur}
-		{id}
 		{type}
-		{name}
-		{placeholder}
 		class:border
 		class:error={hasErrors()}
 		class:readonlyInput={readonly === true}
-		{readonly}
 		{autocomplete}
+		{...rest}
 	/>
 	{#if error != null}
 		<p data-testid="error" class="error">

package/dist/TextInput.svelte.d.ts

@@ -1,25 +1,15 @@
-import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLInputAttributes } from 'svelte/elements';
 export type ValidationErrorMessage = {
     key: string;
     isHtml?: boolean;
 };
 interface Props extends HTMLInputAttributes {
-    id?: string | null;
-    type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
-    name?: string | null;
     label?: string | null;
-    placeholder?: string | null;
     error?: string | null;
     errors?: Array<ValidationErrorMessage> | null;
     htmlError?: boolean;
-    value?: string | null;
-    onFocus?: ((e: FocusEvent) => void) | null;
-    onBlur?: ((e: Event) => void) | null;
-    readonly?: boolean;
     border?: boolean;
-    autocomplete?: FullAutoFill | null | undefined;
-    oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
 }
-declare const TextInput: import("svelte").Component<Props, {}, "value">;
+declare const TextInput: import("svelte").Component<Props, {}, "">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.5.0",
+	"version": "1.6.0",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {