@iroco/ui 1.6.18 → 1.7.0

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.7.0",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {