@iroco/ui 1.6.18 → 1.8.0

package/dist/Alert.stories.svelte

@@ -14,15 +14,9 @@
 
 {#snippet template({ ...args })}
 	<Alert {...args} onclose={() => alert('click')}>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eros lacus, commodo eu tristique
-		non, ultricies eu tellus. Nulla facilisi. Integer a tincidunt purus. Proin vulputate tristique
-		magna. Aliquam id eros id ante malesuada interdum. Phasellus tristique ac leo at fringilla. Cras
-		a viverra nibh, vitae rutrum ante. Sed pharetra nibh ac velit dignissim ornare sed accumsan
-		lacus. Vestibulum tincidunt purus sapien, ac dapibus sem semper a. Nullam venenatis vestibulum
-		risus id molestie. Aliquam facilisis nunc at nunc aliquam hendrerit. Etiam sodales sodales
-		lectus, ut suscipit lacus vehicula nec. Proin vel magna sed orci condimentum ornare in a odio.
-		In varius eu augue eget tincidunt. Ut quis porttitor nulla. Nulla leo nunc, efficitur non ipsum
-		vel, tincidunt auctor lectus.
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+		<p>Nunc eros lacus, commodo eu tristique non, ultricies eu tellus.</p>
+		<p>Nulla facilisi. Integer a tincidunt purus.</p>
 	</Alert>
 {/snippet}
 

package/dist/Alert.svelte

@@ -5,14 +5,21 @@
 	interface Props {
 		type?: 'success' | 'danger' | 'flash';
 		showClose?: boolean;
+		fullWidth?: boolean;
 		onclose?: MouseEventHandler<HTMLButtonElement>;
 		children?: import('svelte').Snippet;
 	}
 
-	let { type = 'success', showClose = true, onclose, children }: Props = $props();
+	let {
+		type = 'success',
+		showClose = true,
+		fullWidth = false,
+		onclose,
+		children
+	}: Props = $props();
 </script>
 
-<div class={`alert alert--${type}`}>
+<div class={['alert', `alert--${type}`, { fullWidth }]}>
 	{#if showClose}
 		<button onclick={onclose} class="alert__close">
 			<IconClose width="2em" height="2em" />
@@ -59,4 +66,8 @@
 .alert__close:focus {
   outline-color: var(--color-secondary);
   outline-style: auto;
+}
+
+.fullWidth {
+  width: 100%;
 }</style>

package/dist/Alert.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MouseEventHandler } from 'svelte/elements';
 interface Props {
     type?: 'success' | 'danger' | 'flash';
     showClose?: boolean;
+    fullWidth?: boolean;
     onclose?: MouseEventHandler<HTMLButtonElement>;
     children?: import('svelte').Snippet;
 }

package/dist/Highlight.stories.svelte

@@ -0,0 +1,33 @@
+<script module lang="ts">
+	import { Highlight } from './index';
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Iroco-UI/Atoms/Highlight',
+		component: Highlight
+	});
+</script>
+
+<script lang="ts">
+	setTemplate(template);
+</script>
+
+{#snippet template({ ...args })}
+	<Highlight {...args}>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eros lacus, commodo eu tristique
+		non, ultricies eu tellus. Nulla facilisi. Integer a tincidunt purus. Proin vulputate tristique
+		magna. Aliquam id eros id ante malesuada interdum. Phasellus tristique ac leo at fringilla. Cras
+		a viverra nibh, vitae rutrum ante. Sed pharetra nibh ac velit dignissim ornare sed accumsan
+		lacus. Vestibulum tincidunt purus sapien, ac dapibus sem semper a. Nullam venenatis vestibulum
+		risus id molestie. Aliquam facilisis nunc at nunc aliquam hendrerit. Etiam sodales sodales
+		lectus, ut suscipit lacus vehicula nec. Proin vel magna sed orci condimentum ornare in a odio.
+		In varius eu augue eget tincidunt. Ut quis porttitor nulla. Nulla leo nunc, efficitur non ipsum
+		vel, tincidunt auctor lectus.
+	</Highlight>
+{/snippet}
+
+<Story name="Default" />
+<Story name="Secondary" args={{ kind: 'secondary' }} />
+<Story name="Danger" args={{ kind: 'danger' }} />
+<Story name="Flash" args={{ kind: 'flash' }} />
+<Story name="Success" args={{ kind: 'success' }} />

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

@@ -0,0 +1,19 @@
+import { Highlight } from './index';
+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;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Highlight: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Highlight = InstanceType<typeof Highlight>;
+export default Highlight;

package/dist/Highlight.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		kind: 'secondary' | 'primary' | 'danger' | 'warning';
+		children;
+	}
+
+	let { kind = 'primary', children }: Props = $props();
+</script>
+
+<div class={`boo boo--${kind}`}>
+	{@render children?.()}
+</div>
+
+<style>
+	.boo {
+		border-style: solid;
+		border-width: 1px;
+		border-radius: 5px;
+		padding: 1rem;
+	}
+
+	.boo--primary {
+		border-color: var(--color-primary);
+	}
+
+	.boo--secondary {
+		border-color: var(--color-secondary);
+	}
+
+	.boo--danger {
+		border-color: var(--color-danger);
+	}
+
+	.boo--warning {
+		border-color: var(--color-warning);
+	}
+</style>

package/dist/Highlight.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    kind: 'secondary' | 'primary' | 'danger' | 'warning';
+    children: any;
+}
+declare const Highlight: import("svelte").Component<Props, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import './scss/style.scss';
 export { default as Alert } from './Alert.svelte';
 export { default as Button } from './Button.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as DataTable } from './DataTable.svelte';
 export { default as IconBurger } from './IconBurger.svelte';
 export { default as IconClose } from './IconClose.svelte';

package/dist/index.js

@@ -1,6 +1,7 @@
 import './scss/style.scss';
 export { default as Alert } from './Alert.svelte';
 export { default as Button } from './Button.svelte';
+export { default as Highlight } from './Highlight.svelte';
 export { default as DataTable } from './DataTable.svelte';
 export { default as IconBurger } from './IconBurger.svelte';
 export { default as IconClose } from './IconClose.svelte';

package/package.json

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