@iroco/ui 1.0.0-9 → 1.0.1

package/dist/Navigation.svelte.d.ts

@@ -1,23 +1,21 @@
-import { SvelteComponent } from "svelte";
 import type { NavigationItem } from './definition';
 import { Color } from './definition';
-declare const __propDef: {
-    props: {
-        href?: string | undefined;
-        navigationItems: Array<NavigationItem>;
-        type?: "sidebar" | "topbar" | undefined;
-        title?: string | null | undefined;
-        version?: string | null | undefined;
-        color?: Color | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NavigationProps = typeof __propDef.props;
-export type NavigationEvents = typeof __propDef.events;
-export type NavigationSlots = typeof __propDef.slots;
-export default class Navigation extends SvelteComponent<NavigationProps, NavigationEvents, NavigationSlots> {
+interface Props {
+    baseUrl?: string;
+    href?: string;
+    navigationItems: Array<NavigationItem>;
+    type?: 'sidebar' | 'topbar';
+    title?: string | null;
+    version?: string | null;
+    color?: Color | string;
+    navigating?: {
+        to: {
+            url: {
+                pathname: string;
+            };
+        };
+    } | null;
 }
-export {};
+declare const Navigation: import("svelte").Component<Props, {}, "">;
+type Navigation = ReturnType<typeof Navigation>;
+export default Navigation;

package/dist/NumberInput.stories.svelte

@@ -1,7 +1,11 @@
-<script context="module">
+<script module lang="ts">
 	import { NumberInput } from './index';
 
-	export const meta = {
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+
+
 		title: 'Iroco-UI/Form/NumberInput',
 		component: NumberInput,
 		argTypes: {
@@ -27,18 +31,19 @@
 				control: { type: 'number' }
 			}
 		}
-	};
+	});
 </script>
 
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<form class="iroco-ui-form">
 		<NumberInput {...args} />
 	</form>
-</Template>
+{/snippet}
 
 <Story name="Default" />
 <Story name="Label" args={{ label: 'Label' }} />

package/dist/NumberInput.stories.svelte.d.ts

@@ -1,77 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { NumberInput as component };
-    export namespace argTypes {
-        namespace id {
-            namespace control {
-                let type: string;
-            }
-        }
-        namespace label {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-        }
-        namespace placeholder {
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-        }
-        namespace error {
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-        namespace value {
-            export namespace control_4 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_4 as control };
-        }
-        namespace min {
-            export namespace control_5 {
-                let type_5: string;
-                export { type_5 as type };
-            }
-            export { control_5 as control };
-        }
-        namespace max {
-            export namespace control_6 {
-                let type_6: string;
-                export { type_6 as type };
-            }
-            export { control_6 as control };
-        }
-    }
-}
-/** @typedef {typeof __propDef.props}  NumberInputProps */
-/** @typedef {typeof __propDef.events}  NumberInputEvents */
-/** @typedef {typeof __propDef.slots}  NumberInputSlots */
-export default class NumberInput extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type NumberInputProps = typeof __propDef.props;
-export type NumberInputEvents = typeof __propDef.events;
-export type NumberInputSlots = typeof __propDef.slots;
 import { NumberInput } from './index';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+    z_$$bindings?: Bindings;
+}
+declare const NumberInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NumberInput = InstanceType<typeof NumberInput>;
+export default NumberInput;

package/dist/NumberInput.svelte

@@ -1,17 +1,35 @@
-<script>export let id;
-export let label;
-export let placeholder = "";
-export let error = void 0;
-export let value = void 0;
-export let min;
-export let max;
+<script lang="ts">
+	import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLInputAttributes{
+		id: string;
+		label: string | '' | undefined;
+		placeholder?: 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();
 </script>
 
 <div class="iroco-ui-input">
 	{#if label}
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
-	<input on:change bind:value {id} type="number" {placeholder} {min} {max} {...$$restProps} />
+	<input {onchange} bind:value {id} type="number" {placeholder} {min} {max} {...rest} />
 	{#if error}
 		<p data-testid="error" class="error">{error}</p>
 	{/if}

package/dist/NumberInput.svelte.d.ts

@@ -1,25 +1,14 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        id: string;
-        label: string | '' | undefined;
-        placeholder?: string | '' | undefined;
-        error?: string | undefined;
-        value?: number | undefined;
-        min: number | undefined;
-        max: number | undefined;
-    };
-    events: {
-        change: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NumberInputProps = typeof __propDef.props;
-export type NumberInputEvents = typeof __propDef.events;
-export type NumberInputSlots = typeof __propDef.slots;
-export default class NumberInput extends SvelteComponent<NumberInputProps, NumberInputEvents, NumberInputSlots> {
+import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    id: string;
+    label: string | '' | undefined;
+    placeholder?: string | '' | undefined;
+    error?: string | undefined;
+    value?: number | undefined;
+    min: number | undefined;
+    max: number | undefined;
+    onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 }
-export {};
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/RadioButton.stories.svelte

@@ -1,39 +1,26 @@
-<script context="module">
+<script module lang="ts">
 	import { RadioButton } from './index';
 
-	export const meta = {
+	import {defineMeta,setTemplate} from '@storybook/addon-svelte-csf'
+
+	const {Story} = defineMeta({
+
 		title: 'Iroco-UI/Form/RadioButton',
 		component: RadioButton,
-		argTypes: {
-			value: {
-				control: { type: 'string' }
-			},
-			group: {
-				control: { type: 'string' }
-			},
-			name: {
-				control: { type: 'string' }
-			},
-			checked: {
-				control: { type: 'boolean' }
-			}
-		}
-	};
+	})
+	let group = $state('bar');
 </script>
-
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
-
-	let group = 'bar';
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
-	<form class="iroco-ui-form">
-		<RadioButton bind:group name="name-hello" value="hello" {...args}>Hello</RadioButton>
-		<RadioButton bind:group name="name-foo" value="foo">Foo</RadioButton>
-		<RadioButton bind:group name="name-bar" value="bar">Bar</RadioButton>
-	</form>
-	Selected group : {group}
-</Template>
+{#snippet template({ ...args })}
+		<form class="iroco-ui-form">
+			<RadioButton bind:group name="name-hello" value="hello" {...args}>Hello</RadioButton>
+			<RadioButton bind:group name="name-foo" value="foo">Foo</RadioButton>
+			<RadioButton bind:group name="name-bar" value="bar">Bar</RadioButton>
+		</form>
+		Selected group : {group}
+	{/snippet}
 
 <Story name="Default" />

package/dist/RadioButton.stories.svelte.d.ts

@@ -1,56 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { RadioButton as component };
-    export namespace argTypes {
-        namespace value {
-            namespace control {
-                let type: string;
-            }
-        }
-        namespace group {
-            export namespace control_1 {
-                let type_1: string;
-                export { type_1 as type };
-            }
-            export { control_1 as control };
-        }
-        namespace name {
-            export namespace control_2 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_2 as control };
-        }
-        namespace checked {
-            export namespace control_3 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_3 as control };
-        }
-    }
-}
-/** @typedef {typeof __propDef.props}  RadioButtonProps */
-/** @typedef {typeof __propDef.events}  RadioButtonEvents */
-/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
-export default class RadioButton extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
 import { RadioButton } from './index';
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+    z_$$bindings?: Bindings;
+}
+declare const RadioButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioButton = InstanceType<typeof RadioButton>;
+export default RadioButton;

package/dist/RadioButton.svelte

@@ -1,18 +1,32 @@
-<script>export let value;
-export let group = null;
-export let name;
-export let checked;
-function onChange(event) {
-  group = event.target.value;
-}
-$:
-  checked = group === value;
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLInputAttributes {
+		value?: string | null;
+		group?: string | 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;
+	}
+
 </script>
 
 <label class="iroco-ui-radio">
-	<input type="radio" bind:group {value} {name} on:change={onChange} {checked} />
-	<span class="radio-button-color" />
-	<slot />
+	<input type="radio" bind:group={group} {value} {name} {checked} {onchange} />
+	<span class="radio-button-color"></span>
+	{@render children?.()}
 </label>
 
 <style>.iroco-ui-radio {

package/dist/RadioButton.svelte.d.ts

@@ -1,21 +1,11 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: string | null;
-        group?: string | null | undefined;
-        name: string | null;
-        checked: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-export default class RadioButton extends SvelteComponent<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    value?: string | null;
+    group?: string | null;
+    name?: string | null;
+    checked: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const RadioButton: import("svelte").Component<Props, {}, "group">;
+type RadioButton = ReturnType<typeof RadioButton>;
+export default RadioButton;

package/dist/SlottedComponentWrapper.svelte

@@ -1,7 +1,7 @@
-<script>
-	export let Component;
+<script lang="ts">
+	let { Component } = $props();
 </script>
 
-<svelte:component this={Component}>
+<Component>
 	<h1 data-testid="slot">Slot value</h1>
-</svelte:component>
+</Component>

package/dist/SlottedComponentWrapper.svelte.d.ts

@@ -1,23 +1,5 @@
-/** @typedef {typeof __propDef.props}  SlottedComponentWrapperProps */
-/** @typedef {typeof __propDef.events}  SlottedComponentWrapperEvents */
-/** @typedef {typeof __propDef.slots}  SlottedComponentWrapperSlots */
-export default class SlottedComponentWrapper extends SvelteComponent<{
+declare const SlottedComponentWrapper: import("svelte").Component<{
     Component: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SlottedComponentWrapperProps = typeof __propDef.props;
-export type SlottedComponentWrapperEvents = typeof __propDef.events;
-export type SlottedComponentWrapperSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        Component: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};
+}, {}, "">;
+type SlottedComponentWrapper = ReturnType<typeof SlottedComponentWrapper>;
+export default SlottedComponentWrapper;

package/dist/TextInput.stories.svelte

@@ -1,61 +1,38 @@
-<script context="module">
+<script module lang="ts">
 	import { TextInput } from './index';
 
-	export const meta = {
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+
+
 		title: 'Iroco-UI/Form/TextInput',
 		component: TextInput,
 		argTypes: {
-			id: {
-				control: { type: 'text' }
-			},
-			type: {
-				control: { type: 'select' },
-				options: ['text', 'email', 'password']
-			},
-			name: {
-				control: { type: 'text' }
-			},
-			label: {
-				control: { type: 'text' }
-			},
-			placeholder: {
-				control: { type: 'text' }
-			},
-			error: {
-				control: { type: 'text' }
-			},
-			htmlError: {
-				control: { type: 'text' }
-			},
-			value: {
-				control: { type: 'number' }
-			},
-			readonly: {
-				control: { type: 'boolean' }
-			},
-			border: {
-				control: { type: 'boolean' }
-			},
-			autocomplete: {
-				control: { type: 'text' }
-			}
-		},
-		args: {
-			type: 'text'
+			type: { control: { type: 'select' } },
+			autocomplete: { control: { type: 'select' } }
 		}
-	};
+	});
+
+	let oninputFoo = $state<string | null>('');
+
+	function handleOnInput(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
+		oninputFoo = '' + event.data + ' ' + event.timeStamp;
+	}
+
 </script>
 
-<script>
-	import { Story, Template } from '@storybook/addon-svelte-csf';
+
+<script lang="ts">
+	setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template({ ...args })}
 	<form class="iroco-ui-form">
-		<TextInput {...args} />
+		<TextInput {...args} oninput={handleOnInput} />
 	</form>
-
-</Template>
+	<p>On input handled : {oninputFoo}</p>
+{/snippet}
 
 <Story name="Default" />
 <Story name="Text" args={{ type: 'text' }} />
@@ -64,7 +41,7 @@
 <Story name="Label" args={{ label: 'Label' }} />
 <Story name="Error" args={{ error: 'An error message' }} />
 <Story name="Placeholder" args={{ placeholder: 'A placeholder' }} />
-<Story name="Border" args={{ placeholder: 'A placeholder' }} />
+<Story name="Border" args={{ border: true }} />
 <Story
 	name="Html Error"
 	args={{