@iroco/ui 1.0.0-9 → 1.0.0

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

@@ -1,111 +1,19 @@
-export namespace meta {
-    export let title: string;
-    export { TextInput as component };
-    export namespace argTypes {
-        export namespace id {
-            namespace control {
-                let type: string;
-            }
-        }
-        export namespace type_1 {
-            export namespace control_1 {
-                let type_2: string;
-                export { type_2 as type };
-            }
-            export { control_1 as control };
-            export let options: string[];
-        }
-        export { type_1 as type };
-        export namespace name {
-            export namespace control_2 {
-                let type_3: string;
-                export { type_3 as type };
-            }
-            export { control_2 as control };
-        }
-        export namespace label {
-            export namespace control_3 {
-                let type_4: string;
-                export { type_4 as type };
-            }
-            export { control_3 as control };
-        }
-        export namespace placeholder {
-            export namespace control_4 {
-                let type_5: string;
-                export { type_5 as type };
-            }
-            export { control_4 as control };
-        }
-        export namespace error {
-            export namespace control_5 {
-                let type_6: string;
-                export { type_6 as type };
-            }
-            export { control_5 as control };
-        }
-        export namespace htmlError {
-            export namespace control_6 {
-                let type_7: string;
-                export { type_7 as type };
-            }
-            export { control_6 as control };
-        }
-        export namespace value {
-            export namespace control_7 {
-                let type_8: string;
-                export { type_8 as type };
-            }
-            export { control_7 as control };
-        }
-        export namespace readonly {
-            export namespace control_8 {
-                let type_9: string;
-                export { type_9 as type };
-            }
-            export { control_8 as control };
-        }
-        export namespace border {
-            export namespace control_9 {
-                let type_10: string;
-                export { type_10 as type };
-            }
-            export { control_9 as control };
-        }
-        export namespace autocomplete {
-            export namespace control_10 {
-                let type_11: string;
-                export { type_11 as type };
-            }
-            export { control_10 as control };
-        }
-    }
-    export namespace args {
-        let type_12: string;
-        export { type_12 as type };
-    }
-}
-/** @typedef {typeof __propDef.props}  TextInputProps */
-/** @typedef {typeof __propDef.events}  TextInputEvents */
-/** @typedef {typeof __propDef.slots}  TextInputSlots */
-export default class TextInput extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
 import { TextInput } 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 TextInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type TextInput = InstanceType<typeof TextInput>;
+export default TextInput;

package/dist/TextInput.svelte

@@ -1,20 +1,42 @@
-<script>import {} from "./definition";
-export let id;
-export let type = TextInputType.text;
-export let name;
-export let label = void 0;
-export let placeholder = void 0;
-export let error = void 0;
-export let htmlError = false;
-export let value = void 0;
-export let onFocus = void 0;
-export let onBlur = void 0;
-export let readonly = false;
-export let border = false;
-export let autocomplete = "on";
-function typeAction(node) {
-  node.type = type;
-}
+<script lang="ts">
+	/* eslint-disable svelte/no-at-html-tags */
+	import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+
+	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;
+		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,
+		htmlError = false,
+		value = $bindable(null),
+		onFocus = null,
+		onBlur = null,
+		readonly = false,
+		border = false,
+		autocomplete = 'on',
+		oninput
+	}: Props = $props();
+
+
 </script>
 
 <div class="iroco-ui-input">
@@ -22,18 +44,17 @@ function typeAction(node) {
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
 	<input
-		on:input
+		{oninput}
 		bind:value
-		on:focus={onFocus}
-		on:blur={onBlur}
+		onfocus={onFocus}
+		onblur={onBlur}
 		{id}
-		type="text"
+		{type}
 		{name}
 		{placeholder}
 		class:border
 		class:error={error !== null}
-		class:readonlyInput={readonly == true}
-		use:typeAction
+		class:readonlyInput={readonly === true}
 		{readonly}
 		{autocomplete}
 	/>
@@ -67,8 +88,8 @@ textarea:focus {
 }
 .iroco-ui-input > input {
   color: var(--color-text);
-  background: var(--color-body);
-  border: 1px solid var(--color-border);
+  background: var(--color-dark-blue);
+  border: 1px solid var(--color-dark-blue);
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;

package/dist/TextInput.svelte.d.ts

@@ -1,31 +1,20 @@
-import { SvelteComponent } from "svelte";
-import { type TextInputType } from './definition';
-declare const __propDef: {
-    props: {
-        id: string;
-        type?: TextInputType | undefined;
-        name: string;
-        label?: string | undefined;
-        placeholder?: string | undefined;
-        error?: string | undefined;
-        htmlError?: boolean | undefined;
-        value?: string | undefined;
-        onFocus?: ((e: FocusEvent) => void) | undefined;
-        onBlur?: ((e: Event) => void) | undefined;
-        readonly?: boolean | undefined;
-        border?: boolean | undefined;
-        autocomplete?: string | undefined;
-    };
-    events: {
-        input: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TextInputProps = typeof __propDef.props;
-export type TextInputEvents = typeof __propDef.events;
-export type TextInputSlots = typeof __propDef.slots;
-export default class TextInput extends SvelteComponent<TextInputProps, TextInputEvents, TextInputSlots> {
+import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+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;
+    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;
 }
-export {};
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;

package/dist/definition.d.ts

@@ -14,11 +14,6 @@ export declare enum NavigationItemType {
     ANCHOR = 1,
     FORM = 2
 }
-export declare enum TextInputType {
-    text = "text",
-    email = "email",
-    password = "password"
-}
 export declare enum Color {
     blue = "#00B9FF",
     darkBlue = "#211D28",

package/dist/definition.js

@@ -1,15 +1,10 @@
 export class ButtonModel {
-    href;
-    label;
     constructor(href, label) {
         this.href = href;
         this.label = label;
     }
 }
 export class NavigationItem {
-    hrefOrCallback;
-    name;
-    type;
     constructor(name, hrefOrCallback, type = NavigationItemType.ANCHOR) {
         this.hrefOrCallback = hrefOrCallback;
         this.name = name;
@@ -22,12 +17,6 @@ export var NavigationItemType;
     NavigationItemType[NavigationItemType["ANCHOR"] = 1] = "ANCHOR";
     NavigationItemType[NavigationItemType["FORM"] = 2] = "FORM";
 })(NavigationItemType || (NavigationItemType = {}));
-export var TextInputType;
-(function (TextInputType) {
-    TextInputType["text"] = "text";
-    TextInputType["email"] = "email";
-    TextInputType["password"] = "password";
-})(TextInputType || (TextInputType = {}));
 export var Color;
 (function (Color) {
     Color["blue"] = "#00B9FF";

package/dist/index.d.ts

@@ -1,17 +1,21 @@
 import './scss/style.scss';
+export { default as Alert } from './Alert.svelte';
 export { default as Button } from './Button.svelte';
-export { default as TextInput } from './TextInput.svelte';
-export { default as RadioButton } from './RadioButton.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
-export { default as Loader } from './Loader.svelte';
-export { default as IconInfo } from './IconInfo.svelte';
-export { default as NavBar } from './NavBar.svelte';
-export { default as Navigation } from './Navigation.svelte';
 export { default as DataTable } from './DataTable.svelte';
-export { default as IconMore } from './IconMoreSign.svelte';
+export { default as IconBurger } from './IconBurger.svelte';
+export { default as IconClose } from './IconClose.svelte';
 export { default as IconFloppyDisk } from './IconFloppyDisk.svelte';
-export { default as IconTrashCan } from './IconTrashCan.svelte';
-export { default as Alert } from './Alert.svelte';
+export { default as IconInfo } from './IconInfo.svelte';
 export { default as IconIrocoLogo } from './IconIrocoLogo.svelte';
+export { default as IconMoreSign } from './IconMoreSign.svelte';
+export { default as IconTrashCan } from './IconTrashCan.svelte';
+export { default as ImageArticle } from './ImageArticle.svelte';
 export { default as IrocoLogo } from './IrocoLogo.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as NavBar } from './NavBar.svelte';
+export { default as Navigation } from './Navigation.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as SlottedComponentWrapper } from './SlottedComponentWrapper.svelte';
+export { default as TextInput } from './TextInput.svelte';
 export * from './definition';

package/dist/index.js

@@ -1,17 +1,21 @@
 import './scss/style.scss';
+export { default as Alert } from './Alert.svelte';
 export { default as Button } from './Button.svelte';
-export { default as TextInput } from './TextInput.svelte';
-export { default as RadioButton } from './RadioButton.svelte';
-export { default as NumberInput } from './NumberInput.svelte';
-export { default as Loader } from './Loader.svelte';
-export { default as IconInfo } from './IconInfo.svelte';
-export { default as NavBar } from './NavBar.svelte';
-export { default as Navigation } from './Navigation.svelte';
 export { default as DataTable } from './DataTable.svelte';
-export { default as IconMore } from './IconMoreSign.svelte';
+export { default as IconBurger } from './IconBurger.svelte';
+export { default as IconClose } from './IconClose.svelte';
 export { default as IconFloppyDisk } from './IconFloppyDisk.svelte';
-export { default as IconTrashCan } from './IconTrashCan.svelte';
-export { default as Alert } from './Alert.svelte';
+export { default as IconInfo } from './IconInfo.svelte';
 export { default as IconIrocoLogo } from './IconIrocoLogo.svelte';
+export { default as IconMoreSign } from './IconMoreSign.svelte';
+export { default as IconTrashCan } from './IconTrashCan.svelte';
+export { default as ImageArticle } from './ImageArticle.svelte';
 export { default as IrocoLogo } from './IrocoLogo.svelte';
+export { default as Loader } from './Loader.svelte';
+export { default as NavBar } from './NavBar.svelte';
+export { default as Navigation } from './Navigation.svelte';
+export { default as NumberInput } from './NumberInput.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export { default as SlottedComponentWrapper } from './SlottedComponentWrapper.svelte';
+export { default as TextInput } from './TextInput.svelte';
 export * from './definition';

package/dist/scss/button.scss

@@ -18,9 +18,9 @@
 	border-radius: constants.$border-radius;
 
 	&--basic {
-		color: var(--btn-basic-label);
-		background: var(--btn-basic-bg);
-		border: 1px solid var(--btn-basic-border);
+		color: var(--btn-secondary-label);
+		background: var(--btn-secondary-bg);
+		border: 1px solid var(--btn-secondary-border);
 	}
 
 	&--dark {
@@ -70,6 +70,10 @@
 			box-shadow: none;
 		}
 	}
+
+	&--full-width {
+		width: 100%;
+	}
 }
 
 .iroco-ui-link {

package/dist/scss/colors.scss

@@ -9,7 +9,13 @@
 	--color-black-op-40: rgba(0, 0, 0, 0.4);
 	--color-black-op-60: rgba(0, 0, 0, 0.6);
 
+	--color-beige: #f2ebe3;
+	--color-dark-grey: #33323a;
+	--color-medium-grey: #464452;
+	--color-light-grey: #f5f5f5;
+	--color-dark-blue: #211d28;
 	--color-dark-blue-op-30: #211d284d;
+	--color-night-blue: #18151e;
 
 	/* semantic colors */
 	--color-primary-light: #82eec7;
@@ -40,24 +46,28 @@
 	--color-border: #464452;
 
 	/* body */
-	--color-body: #211d28;
+	--color-body: var(--color-dark-blue);
 
 	/* forms */
-	--form-element-border: var(--color-border);
-	--form-element-bg: #f2ebe3;
+	--form-element-border: var(--color-beige);
+	--form-element-bg: var(--color-beige);
 	--form-text-placeholder: #a9a29e;
 
 	/* buttons */
-	--btn-primary-bg: #f2ebe3;
-	--btn-primary-border: #18151e;
-	--btn-primary-label: #f2ebe3;
+	--btn-primary-bg: var(--color-beige);
+	--btn-primary-border: var(--color-night-blue);
+	--btn-primary-label: var(--color-beige);
 
-	--dark-btn-primary-label: #f2ebe3;
-	--dark-btn-primary-bg: #18151e;
+	--dark-btn-primary-label: var(--color-beige);
+	--dark-btn-primary-bg: var(--color-night-blue);
 
-	--btn-basic-label: #18151e;
-	--btn-basic-bg: #f2ebe3;
-	--btn-basic-border: #18151e;
+	--btn-secondary-bg: var(--color-secondary);
+	--btn-secondary-border: var(--color-night-blue);
+	--btn-secondary-label: var(--color-night-blue);
+
+	--btn-basic-label: var(--color-night-blue);
+	--btn-basic-bg: var(--color-beige);
+	--btn-basic-border: var(--color-night-blue);
 
 	--btn-disabled-label: var(--color-black-op-60);
 	--btn-disabled-bg: #a9a29e;

package/dist/scss/fields/_input.scss

@@ -82,7 +82,7 @@
 				-ms-user-select: none;
 				user-select: none;
 				flex-shrink: 0;
-				border-top: solid #f2ebe3 /*colors.$beige*/ 1px;
+				border-top: solid var(--color-beige) 1px;
 				background: white;
 				transition: background linear 100ms;
 

package/dist/scss/fields/_style.scss

@@ -1,2 +1,2 @@
-@import 'input';
-@import 'checkbox';
+@use 'input';
+@use 'checkbox';

package/package.json

@@ -1,15 +1,17 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.0.0-9",
+	"version": "1.0.0",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
+		"watch": "svelte-package -w",
+		"test": "vitest run --passWithNoTests",
+		"test:watch": "vitest watch --passWithNoTests",
+		"svelte:check": "svelte-check --tsconfig ./tsconfig.json",
 		"dev": "storybook dev -p 5175",
-		"build": "svelte-kit sync && svelte-package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:watch": "vitest",
-		"test": "vitest --run",
+		"build": "svelte-package",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
 		"clean": "rm -rf dist && npm cache clean --force",
@@ -17,51 +19,49 @@
 		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
-		"@ljcl/storybook-addon-cssprops": "^3.2.0",
-		"@storybook/addon-essentials": "^7.6.13",
-		"@storybook/addon-interactions": "^7.6.13",
-		"@storybook/addon-links": "^7.6.13",
-		"@storybook/addon-svelte-csf": "^4.1.1",
-		"@storybook/blocks": "^7.6.13",
-		"@storybook/svelte": "^7.6.13",
-		"@storybook/svelte-vite": "^8.0.0-beta.1",
-		"@storybook/sveltekit": "^7.6.13",
-		"@storybook/test": "^7.6.13",
-		"@sveltejs/adapter-auto": "^3.1.1",
-		"@sveltejs/kit": "^2.5.0",
-		"@sveltejs/package": "^2.2.6",
-		"@sveltejs/vite-plugin-svelte": "^3.0.2",
-		"@sveltejs/vite-plugin-svelte-inspector": "^2.0.0",
-		"@testing-library/jest-dom": "^6.4.2",
-		"@testing-library/svelte": "^4.1.0",
+		"@ljcl/storybook-addon-cssprops": "^4.0.0",
+		"@storybook/addon-essentials": "^8.4.7",
+		"@storybook/addon-interactions": "^8.4.7",
+		"@storybook/addon-links": "^8.4.7",
+		"@storybook/addon-mdx-gfm": "^8.4.7",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.21",
+		"@storybook/blocks": "^8.4.7",
+		"@storybook/manager-api": "^8.5.0",
+		"@storybook/svelte": "^8.4.7",
+		"@storybook/svelte-vite": "^8.4.7",
+		"@storybook/test": "^8.4.7",
+		"@storybook/theming": "^8.5.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+		"@testing-library/jest-dom": "^6.6.3",
+		"@testing-library/svelte": "^5.2.6",
 		"@testing-library/user-event": "^14.5.2",
-		"@typescript-eslint/eslint-plugin": "^6.21.0",
-		"@typescript-eslint/parser": "^6.21.0",
-		"@vitest/ui": "^1.2.2",
-		"eslint": "^8.56.0",
+		"@tsconfig/svelte": "^5.0.4",
+		"@typescript-eslint/eslint-plugin": "^8.19.1",
+		"@typescript-eslint/parser": "^8.19.1",
+		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-storybook": "^0.6.15",
-		"eslint-plugin-svelte": "^2.35.1",
-		"jsdom": "^24.0.0",
-		"lint-staged": "^15.2.2",
-		"prettier": "^3.2.5",
-		"prettier-plugin-svelte": "^3.1.2",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"release-it": "^17.0.3",
-		"sass": "^1.70.0",
-		"storybook": "^7.6.13",
-		"svelte": "^4.2.10",
-		"svelte-check": "^3.6.4",
-		"svelte-awesome": "^3.3.1",
-		"tslib": "^2.6.2",
-		"typescript": "^5.0.0",
-		"vite": "^5.1.1",
-		"vitest": "^1.2.2"
+		"eslint-plugin-storybook": "^0.11.2",
+		"eslint-plugin-svelte": "^2.46.1",
+		"happy-dom": "^16.5.3",
+		"lint-staged": "^15.3.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"release-it": "^18.1.1",
+		"sass": "^1.83.1",
+		"storybook": "^8.4.7",
+		"svelte": "^5.17.3",
+		"svelte-awesome": "^3.3.5",
+		"svelte-check": "^4.1.3",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.7",
+		"vitest": "^3.0.0-beta.4"
 	},
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.5.0",
-		"svelte": "^4.2.10"
+		"svelte": "5.x"
 	},
 	"lint-staged": {
 		"*.{js,ts,svelte}": [
@@ -275,5 +275,6 @@
 				"./dist/index.d.ts"
 			]
 		}
-	}
+	},
+	"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
 }

package/dist/RadioButtonTest.svelte

@@ -1,10 +0,0 @@
-<svelte:options accessors={true} />
-
-<script>import RadioButton from "./RadioButton.svelte";
-export let group = "";
-</script>
-
-<form>
-	<RadioButton bind:group value="first" name="name" checked>First</RadioButton>
-	<RadioButton bind:group value="second" name="name">Second</RadioButton>
-</form>

package/dist/RadioButtonTest.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        group?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RadioButtonTestProps = typeof __propDef.props;
-export type RadioButtonTestEvents = typeof __propDef.events;
-export type RadioButtonTestSlots = typeof __propDef.slots;
-export default class RadioButtonTest extends SvelteComponent<RadioButtonTestProps, RadioButtonTestEvents, RadioButtonTestSlots> {
-    get group(): string | undefined;
-    /**accessor*/
-    set group(_: string | undefined);
-}
-export {};