@iroco/ui 1.0.0 → 1.1.0

package/dist/Alert.svelte

@@ -3,7 +3,7 @@
 
 	interface Props {
 		type?: 'success' | 'danger' | 'flash';
-		callback: (e: Event) => void;
+		callback?: (e: Event) => void;
 		children?: import('svelte').Snippet;
 	}
 

package/dist/Alert.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     type?: 'success' | 'danger' | 'flash';
-    callback: (e: Event) => void;
+    callback?: (e: Event) => void;
     children?: import('svelte').Snippet;
 }
 declare const Alert: import("svelte").Component<Props, {}, "">;

package/dist/Button.svelte

@@ -9,7 +9,7 @@
 		fullWidth?: boolean;
 		id?: string | null;
 		children?: import('svelte').Snippet;
-		onclick: MouseEventHandler<HTMLButtonElement> | null | undefined
+		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
 	let {
@@ -23,14 +23,6 @@
 		onclick
 	}: Props = $props();
 
-	export {
-		type,
-		disabled,
-		kind,
-		size,
-		fullWidth,
-		id,
-	}
 </script>
 
 <button

package/dist/Button.svelte.d.ts

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

package/dist/DataTable.svelte

@@ -1,6 +1,11 @@
-<script  lang="ts">
+<script lang="ts">
 	import type { Component } from 'svelte';
 
+	interface Props {
+		rows: Array<TableRow>,
+		columns: Array<TableColumn>
+	}
+
 	type TableColumn = {
 		key: string;
 		title: string;
@@ -15,7 +20,7 @@
 		[key: string]: string | number;
 	};
 
-	let { rows, columns }: { rows: Array<TableRow>, columns: Array<TableColumn> } = $props();
+	let { rows, columns }: Props = $props();
 </script>
 
 <table class="data-table">

package/dist/DataTable.svelte.d.ts

@@ -10,10 +10,10 @@ type TableColumn = {
 type TableRow = {
     [key: string]: string | number;
 };
-type $$ComponentProps = {
+interface Props {
     rows: Array<TableRow>;
     columns: Array<TableColumn>;
-};
-declare const DataTable: Component<$$ComponentProps, {}, "">;
+}
+declare const DataTable: Component<Props, {}, "">;
 type DataTable = ReturnType<typeof DataTable>;
 export default DataTable;

package/dist/IconIrocoLogo.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
 	import { Color } from './definition';
 
+	interface Props {
+		href?: string;
+		ariaLabel?: string;
+		width?: string;
+		height?: string;
+		color?: Color | string;
+	}
+
 	let {
 		href = '/',
 		ariaLabel = 'go to Iroco home',
 		width = '5rem',
 		height = '5rem',
 		color = Color.green
-	}: {
-		href?: string;
-		ariaLabel?: string;
-		width?: string;
-		height?: string;
-		color?: Color|string;
-	} = $props();
+	}: Props = $props();
 </script>
 
 <a class="iroco-logo" {href} aria-label={ariaLabel}>

package/dist/IconIrocoLogo.svelte.d.ts

@@ -1,11 +1,11 @@
 import { Color } from './definition';
-type $$ComponentProps = {
+interface Props {
     href?: string;
     ariaLabel?: string;
     width?: string;
     height?: string;
     color?: Color | string;
-};
-declare const IconIrocoLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const IconIrocoLogo: import("svelte").Component<Props, {}, "">;
 type IconIrocoLogo = ReturnType<typeof IconIrocoLogo>;
 export default IconIrocoLogo;

package/dist/IrocoLogo.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 
+	interface Props {
+		href?: string;
+		ariaLabel?: string;
+		width?: string;
+		height?: string;
+	}
+
 	let {
 		href = `/`,
 		ariaLabel = 'go to Iroco home',
 		width = '10rem',
 		height = '10rem'
-	}: {
-		href?: string;
-		ariaLabel?: string;
-		width?: string;
-		height?: string;
-	} = $props();
+	}: Props = $props();
 </script>
 
 <a class="iroco-logo" {href} aria-label={ariaLabel}>

package/dist/IrocoLogo.svelte.d.ts

@@ -1,9 +1,9 @@
-type $$ComponentProps = {
+interface Props {
     href?: string;
     ariaLabel?: string;
     width?: string;
     height?: string;
-};
-declare const IrocoLogo: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const IrocoLogo: import("svelte").Component<Props, {}, "">;
 type IrocoLogo = ReturnType<typeof IrocoLogo>;
 export default IrocoLogo;

package/dist/NavBar.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
 	import { IconClose } from './index';
 	import { createEventDispatcher } from 'svelte';
 	import { NavigationItemType, NavigationItem } from './definition.js';
+	import type { MouseEventHandler } from 'svelte/elements';
 
 	interface Props {
 		navigationItems: Array<NavigationItem>;
 		type: 'sidebar' | 'topbar';
 		version?: string | null;
 		navigating?: { to: { url: { pathname: string } } } | null;
+		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
-
-	let { navigationItems, type, version = null, navigating = null }: Props = $props();
+	let { navigationItems, type, version = null, navigating = null, onclick }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
@@ -37,7 +35,7 @@
 </script>
 
 <nav data-testid={type} class="nav__{type}">
-	<button title="Close menu" onclick={bubble('click')} class="nav__{type}__close">
+	<button title="Close menu" {onclick} class="nav__{type}__close">
 		<IconClose width="3em" height="3em" />
 	</button>
 

package/dist/NavBar.svelte.d.ts

@@ -1,4 +1,5 @@
 import { NavigationItem } from './definition.js';
+import type { MouseEventHandler } from 'svelte/elements';
 interface Props {
     navigationItems: Array<NavigationItem>;
     type: 'sidebar' | 'topbar';
@@ -10,6 +11,7 @@ interface Props {
             };
         };
     } | null;
+    onclick?: 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> & {

package/dist/Navigation.svelte

@@ -3,6 +3,19 @@
 	import { Color } from './definition';
 	import { IconBurger, IconIrocoLogo, IrocoLogo, NavBar } from './';
 
+	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;
+	}
+
+	let showMenu = $state(false);
+
 	let {
 		baseUrl = '',
 		href = `${baseUrl}/`,
@@ -12,17 +25,7 @@
 		version = null,
 		color = Color.green,
 		navigating
-	}: {
-		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
-	} = $props();
-	let showMenu = $state(false);
+	}: Props = $props();
 </script>
 
 <div class="navigation--mobile">

package/dist/Navigation.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { NavigationItem } from './definition';
 import { Color } from './definition';
-type $$ComponentProps = {
+interface Props {
     baseUrl?: string;
     href?: string;
     navigationItems: Array<NavigationItem>;
@@ -15,7 +15,7 @@ type $$ComponentProps = {
             };
         };
     } | null;
-};
-declare const Navigation: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const Navigation: import("svelte").Component<Props, {}, "">;
 type Navigation = ReturnType<typeof Navigation>;
 export default Navigation;

package/dist/RadioButton.svelte

@@ -17,14 +17,14 @@
 		children
 	}: Props = $props();
 
-function onchange(event: Event) {
-	group = event.currentTarget.value
-}
+	function onchange(event: Event) {
+		group = event.currentTarget.value;
+	}
 
 </script>
 
 <label class="iroco-ui-radio">
-	<input type="radio" bind:group={group} {value} {name} {checked} {onchange}/>
+	<input type="radio" bind:group={group} {value} {name} {checked} {onchange} />
 	<span class="radio-button-color"></span>
 	{@render children?.()}
 </label>

package/dist/TextInput.svelte

@@ -36,7 +36,6 @@
 		oninput
 	}: Props = $props();
 
-
 </script>
 
 <div class="iroco-ui-input">

package/package.json

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