@iroco/ui 0.21.0 → 0.50.0

package/Alert.svelte

@@ -0,0 +1,72 @@
+<script>export let type = "success";
+export let content;
+export let callback;
+</script>
+
+<div class={`alert alert--${type}`} on:click={callback}>
+	{content}
+</div>
+
+<style>.font-color-blue {
+  color: #00b9ff;
+}
+
+.font-color-darkBlue {
+  color: #211d28;
+}
+
+.font-color-nightBlue {
+  color: #18151e;
+}
+
+.font-color-green {
+  color: #00d692;
+}
+
+.font-color-red {
+  color: #ff504d;
+}
+
+.font-color-yellow {
+  color: #ffe032;
+}
+
+.font-color-beige {
+  color: #f2ebe3;
+}
+
+.font-color-darkBeige {
+  color: #a9a29e;
+}
+
+.font-color-mediumGrey {
+  color: #464452;
+}
+
+.font-color-darkGrey {
+  color: #33323a;
+}
+
+.font-color-lightGrey {
+  color: #f5f5f5;
+}
+
+.alert {
+  min-height: 2em;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.3em;
+  padding: 0 1em 0 1em;
+  font-size: 1.2em;
+  justify-content: center;
+  margin-bottom: 1em;
+  cursor: pointer;
+}
+.alert--danger {
+  background-color: rgba(255, 80, 77, 0.5);
+  border: 1px solid #ff504d;
+}
+.alert--success {
+  background-color: rgba(0, 214, 146, 0.5);
+  border: 1px solid #00d692;
+}</style>

package/Alert.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "success" | "danger" | undefined;
+        content: string;
+        callback: (e: Event) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

package/{lib/iroco.css → Button.svelte}

@@ -1,17 +1,39 @@
-.font-color-blue {
-  color: #00B9FF;
+<svelte:options accessors={true} />
+
+<script>export let type = "button";
+export let disabled = false;
+export let kind = "basic";
+export let size = "regular";
+export let id;
+export let node;
+</script>
+
+<button
+	{id}
+	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind}`}
+	class:disabled
+	{type}
+	{disabled}
+	on:click
+	bind:this={node}
+>
+	<slot />
+</button>
+
+<style>.font-color-blue {
+  color: #00b9ff;
 }
 
 .font-color-darkBlue {
-  color: #211D28;
+  color: #211d28;
 }
 
 .font-color-nightBlue {
-  color: #18151E;
+  color: #18151e;
 }
 
 .font-color-green {
-  color: #00D692;
+  color: #00d692;
 }
 
 .font-color-red {
@@ -19,7 +41,7 @@
 }
 
 .font-color-yellow {
-  color: #FFE032;
+  color: #ffe032;
 }
 
 .font-color-beige {
@@ -199,96 +221,55 @@
   }
 }
 
-.iroco-ui-form input, .iroco-ui-form textarea {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
-}
-.iroco-ui-form input:focus, .iroco-ui-form textarea:focus {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
-}
-.iroco-ui-form .iroco-ui-input {
-  display: flex;
-  flex-direction: column;
-}
-.iroco-ui-form .iroco-ui-input > input {
+.iroco-ui-button {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border: none;
+  flex-shrink: 0;
+  margin: 1em 0em;
+  position: relative;
+  text-transform: uppercase;
+  border-radius: 0.3em;
+}
+.iroco-ui-button--basic {
+  background: #f2ebe3;
+  border: 1px solid #18151e;
+}
+.iroco-ui-button--dark {
+  background: #18151e;
   color: #f2ebe3;
-  background: #211D28;
-  border: 1px solid #211D28;
-  padding: 1em 1.5em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  border-radius: 0.5em;
 }
-.iroco-ui-form .iroco-ui-input > input::placeholder {
-  color: rgba(242, 235, 227, 0.5);
+.iroco-ui-button--success {
+  background: #00d692;
+  color: #18151e;
 }
-.iroco-ui-form .iroco-ui-input > input.error {
-  border-color: #ff504d;
+.iroco-ui-button--danger {
+  background: #ff504d;
 }
-.iroco-ui-form .iroco-ui-input > input.readonlyInput {
-  cursor: not-allowed;
+.iroco-ui-button--regular {
+  padding: 1em 2em;
 }
-.iroco-ui-form .iroco-ui-label {
-  color: rgba(242, 235, 227, 0.6);
-  font-weight: bold;
-  padding-bottom: 10px;
-  display: inline-block;
+.iroco-ui-button--small {
+  padding: 0.5em 1em;
 }
-.iroco-ui-form .field {
-  margin-top: 20px;
+.iroco-ui-button--basic:hover, .iroco-ui-button--success:hover, .iroco-ui-button--danger:hover {
+  box-shadow: inset 0 0 0 10em rgba(0, 0, 0, 0.2);
 }
-.iroco-ui-form .field:first-child {
-  margin: 0;
+.iroco-ui-button--dark:hover {
+  box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.2);
 }
-.iroco-ui-form > .submit {
-  margin-top: 40px;
-}
-.iroco-ui-form p.error {
-  margin: 0;
-  color: #ff504d;
+.iroco-ui-button:active {
+  box-shadow: none;
 }
-
-*,
-*::before,
-*::after {
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-a,
-a:visited,
-a:active,
-button {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
-  color: #f2ebe3;
-}
-
-html {
-  margin: 0;
-  padding: 0;
-}
-html > body {
-  font-family: "Arial", sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  color: white;
-  margin: 0;
-  padding: 0;
-  transition: color ease-out 100ms, font-size ease-out 100ms;
-  margin: 0;
-  padding: 0;
+.iroco-ui-button.disabled {
+  background-color: #f5f5f5;
   cursor: default;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-kerning: normal;
-  background: #211D28;
 }
-
-/*# sourceMappingURL=iroco.css.map */
+.iroco-ui-button.disabled:hover {
+  box-shadow: none;
+}</style>

package/Button.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: string | undefined;
+        disabled?: boolean | undefined;
+        kind?: "success" | "danger" | "dark" | "basic" | undefined;
+        size?: "small" | "regular" | undefined;
+        id: string;
+        node: HTMLElement;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+    get type(): string | undefined;
+    /**accessor*/
+    set type(_: string | undefined);
+    get disabled(): boolean | undefined;
+    /**accessor*/
+    set disabled(_: boolean | undefined);
+    get kind(): "success" | "danger" | "dark" | "basic" | undefined;
+    /**accessor*/
+    set kind(_: "success" | "danger" | "dark" | "basic" | undefined);
+    get size(): "small" | "regular" | undefined;
+    /**accessor*/
+    set size(_: "small" | "regular" | undefined);
+    get id(): string;
+    /**accessor*/
+    set id(_: string);
+    get node(): HTMLElement;
+    /**accessor*/
+    set node(_: HTMLElement);
+}
+export {};

package/DataTable.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">export let rows;
+export let columns;
+</script>
+
+<table class="data-table">
+	<thead class="data-table__header">
+		<tr>
+			{#each columns as column}
+				<th class="data-table__header__cell">
+					{column.title}
+				</th>
+			{/each}
+		</tr>
+	</thead>
+
+	<tbody class="data-table__body">
+		{#each rows as row}
+			<tr class="data-table__body__row">
+				{#each columns as { key, renderComponent }}
+					<td class="data-table__body__cell">
+						{#if renderComponent}
+							<svelte:component
+								this={renderComponent.component}
+								on:click={() => renderComponent.props.onclick(row)}
+							/>
+						{:else}
+							{row[key]}
+						{/if}
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>.font-color-blue {
+  color: #00b9ff;
+}
+
+.font-color-darkBlue {
+  color: #211d28;
+}
+
+.font-color-nightBlue {
+  color: #18151e;
+}
+
+.font-color-green {
+  color: #00d692;
+}
+
+.font-color-red {
+  color: #ff504d;
+}
+
+.font-color-yellow {
+  color: #ffe032;
+}
+
+.font-color-beige {
+  color: #f2ebe3;
+}
+
+.font-color-darkBeige {
+  color: #a9a29e;
+}
+
+.font-color-mediumGrey {
+  color: #464452;
+}
+
+.font-color-darkGrey {
+  color: #33323a;
+}
+
+.font-color-lightGrey {
+  color: #f5f5f5;
+}
+
+.data-table {
+  border: 1px solid #464452;
+  width: 100%;
+}
+.data-table__header {
+  font-size: 1.5em;
+  height: 4rem;
+}
+.data-table__header__cell {
+  border-bottom: 1px solid #464452;
+}
+.data-table__body__cell {
+  text-align: center;
+  vertical-align: middle;
+}</style>

package/DataTable.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponent } from 'svelte';
+declare const __propDef: {
+    props: {
+        rows: {
+            [key: string]: string | number;
+        }[];
+        columns: {
+            key: string;
+            title: string;
+            renderComponent?: {
+                component: SvelteComponent;
+                props?: any;
+            } | undefined;
+        }[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableProps = typeof __propDef.props;
+export type DataTableEvents = typeof __propDef.events;
+export type DataTableSlots = typeof __propDef.slots;
+export default class DataTable extends SvelteComponentTyped<DataTableProps, DataTableEvents, DataTableSlots> {
+}
+export {};

package/{src/IconBurger.svelte → IconBurger.svelte}

@@ -1,6 +1,5 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
+<script>export let width = "5rem";
+export let height = "5rem";
 </script>
 
 <svg

package/IconBurger.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconBurgerProps = typeof __propDef.props;
+export type IconBurgerEvents = typeof __propDef.events;
+export type IconBurgerSlots = typeof __propDef.slots;
+export default class IconBurger extends SvelteComponentTyped<IconBurgerProps, IconBurgerEvents, IconBurgerSlots> {
+}
+export {};

package/{src/IconClose.svelte → IconClose.svelte}

@@ -1,6 +1,5 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
+<script>export let width = "5rem";
+export let height = "5rem";
 </script>
 
 <svg

package/IconClose.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconCloseProps = typeof __propDef.props;
+export type IconCloseEvents = typeof __propDef.events;
+export type IconCloseSlots = typeof __propDef.slots;
+export default class IconClose extends SvelteComponentTyped<IconCloseProps, IconCloseEvents, IconCloseSlots> {
+}
+export {};

package/{src/IconFloppyDisk.svelte → IconFloppyDisk.svelte}

@@ -1,7 +1,6 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
-	export let fill = 'currentColor';
+<script>export let width = "5rem";
+export let height = "5rem";
+export let fill = "currentColor";
 </script>
 
 <svg {width} {height} viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">

package/IconFloppyDisk.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+        fill?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconFloppyDiskProps = typeof __propDef.props;
+export type IconFloppyDiskEvents = typeof __propDef.events;
+export type IconFloppyDiskSlots = typeof __propDef.slots;
+export default class IconFloppyDisk extends SvelteComponentTyped<IconFloppyDiskProps, IconFloppyDiskEvents, IconFloppyDiskSlots> {
+}
+export {};

package/{src/IconInfo.svelte → IconInfo.svelte}

@@ -1,6 +1,5 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
+<script>export let width = "5rem";
+export let height = "5rem";
 </script>
 
 <svg

package/IconInfo.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconInfoProps = typeof __propDef.props;
+export type IconInfoEvents = typeof __propDef.events;
+export type IconInfoSlots = typeof __propDef.slots;
+export default class IconInfo extends SvelteComponentTyped<IconInfoProps, IconInfoEvents, IconInfoSlots> {
+}
+export {};

package/{src/IconIrocoLogo.svelte → IconIrocoLogo.svelte}

@@ -1,6 +1,5 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
+<script>export let width = "5rem";
+export let height = "5rem";
 </script>
 
 <svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">

package/IconIrocoLogo.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconIrocoLogoProps = typeof __propDef.props;
+export type IconIrocoLogoEvents = typeof __propDef.events;
+export type IconIrocoLogoSlots = typeof __propDef.slots;
+export default class IconIrocoLogo extends SvelteComponentTyped<IconIrocoLogoProps, IconIrocoLogoEvents, IconIrocoLogoSlots> {
+}
+export {};

package/IconMastodon.svelte

@@ -0,0 +1,19 @@
+<script>export let width = "5em";
+export let height = "5em";
+export let fill = "currentColor";
+</script>
+
+<svg
+	{width}
+	{height}
+	role="img"
+	viewBox="0 0 24 24"
+	class="icon-mastodon"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<title>Mastodon</title>
+	<path
+		d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"
+		{fill}
+	/>
+</svg>

package/IconMastodon.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+        fill?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconMastodonProps = typeof __propDef.props;
+export type IconMastodonEvents = typeof __propDef.events;
+export type IconMastodonSlots = typeof __propDef.slots;
+export default class IconMastodon extends SvelteComponentTyped<IconMastodonProps, IconMastodonEvents, IconMastodonSlots> {
+}
+export {};

package/{src/IconMoreSign.svelte → IconMoreSign.svelte}

@@ -1,6 +1,5 @@
-<script lang="ts">
-	export let width = '3rem';
-	export let height = '3rem';
+<script>export let width = "3rem";
+export let height = "3rem";
 </script>
 
 <svg

package/IconMoreSign.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: string | undefined;
+        height?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IconMoreSignProps = typeof __propDef.props;
+export type IconMoreSignEvents = typeof __propDef.events;
+export type IconMoreSignSlots = typeof __propDef.slots;
+export default class IconMoreSign extends SvelteComponentTyped<IconMoreSignProps, IconMoreSignEvents, IconMoreSignSlots> {
+}
+export {};

package/{src/IconTrashCan.svelte → IconTrashCan.svelte}

@@ -1,16 +1,9 @@
-<script lang="ts">
-	export let width = '5rem';
-	export let height = '5rem';
-	export let stroke = 'currentColor';
+<script>export let width = "5rem";
+export let height = "5rem";
+export let stroke = "currentColor";
 </script>
 
-<svg
-	{width}
-	{height}
-	fill="none"
-	{stroke}
-	viewBox="0 0 24 24"
-	xmlns="http://www.w3.org/2000/svg"
+<svg {width} {height} fill="none" {stroke} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
 	><path
 		stroke-linecap="round"
 		stroke-linejoin="round"