@lavalogic/scoria 0.29.0 → 0.30.0

package/dist/Components/Nav/CallbackButtonWithIcon.d.ts

@@ -0,0 +1,23 @@
+import type { Pathname } from '$app/types';
+import type { IconProps } from '../IconProps.js';
+export type CallbackButtonWithIcon = CallbackButtonWithPath | CallbackButtonWithCallback;
+export interface NavButtonPartial {
+    iconName?: IconProps['name'];
+    label: string;
+    hoverLabel?: string;
+    subtitle?: string;
+    visible?: boolean | Promise<boolean>;
+}
+export type NavButton = NavButtonPartial & ({
+    path: Pathname;
+} | {
+    callback: () => void;
+});
+export interface CallbackButtonWithPath extends NavButtonPartial {
+    path: Pathname;
+    callback?: never;
+}
+export interface CallbackButtonWithCallback extends NavButtonPartial {
+    path?: never;
+    callback: () => void;
+}

package/dist/Components/Nav/CallbackButtonWithIcon.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/Dimensions.d.ts

@@ -0,0 +1,4 @@
+export declare const Dimensions: {
+    readonly smallPanelWidth: 3;
+    readonly fullPanelWidth: 15;
+};

package/dist/Components/Nav/Dimensions.js

@@ -0,0 +1,5 @@
+export const Dimensions = {
+    smallPanelWidth: 3,
+    fullPanelWidth: 15,
+};
+Object.freeze(Dimensions);

package/dist/Components/Nav/Nav.svelte

@@ -0,0 +1,216 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Icon, Size } from '@lavalogic/scoria';
+	import type { NavProps } from './NavProps.js';
+	import ServicesNav from './ServicesNav.svelte';
+
+	const { userName, extras, userDialog, serviceTabs, selectedServiceTab }: NavProps = $props();
+
+	const userIcon = $derived.by(() => {
+		const names = userName.split(' ');
+
+		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
+		return initials;
+	});
+
+	const singleLetter = $derived(userIcon.length === 1);
+	const hasLetters = $derived(userIcon.length > 0);
+
+	let showServicesDialog = $state(false);
+	let showUserDialog = $state(false);
+</script>
+
+<nav class="main-navigation">
+	<span class="nav-link hoverable"> FloWMS </span>
+	<!-- HACK swap above for below when a decent landing page has been added -->
+	<!-- <a
+		href={resolve(Locations.Home)}
+		class="nav-link hoverable"
+	>
+		FloWMS
+	</a> -->
+
+	<div class="nav-link">
+		<button
+			onclick={() => {
+				showServicesDialog = !showServicesDialog;
+			}}
+		>
+			<div class="delimited">
+				<Icon
+					name="block-menu"
+					size={Size.Medium}
+				/>
+				<span>Services</span>
+			</div>
+		</button>
+
+		{#if showServicesDialog}
+			<ServicesNav
+				onclose={() => {
+					showServicesDialog = false;
+				}}
+				{serviceTabs}
+				{selectedServiceTab}
+			/>
+		{/if}
+	</div>
+
+	<div class="nav-search-container">
+		<!-- <TextInput
+			bind:value={searchParam}
+			placeholder="Search for anything"
+			leftIcon={{ name: 'search-1' }}
+		/> -->
+	</div>
+	{#if extras}
+		<div class="nav-link spaced selects">
+			{@render extras()}
+		</div>
+	{/if}
+
+	<div>
+		<button
+			onclick={() => {
+				showUserDialog = !showUserDialog;
+			}}
+		>
+			<span class="nav-link padded">
+				<span
+					class="user-icon"
+					class:visible={hasLetters}
+					class:single-letter={singleLetter}>{userIcon}</span
+				>
+				<span class="user-name">{userName}</span>
+			</span>
+		</button>
+		{#if showUserDialog}
+			{@render userDialog(() => {
+				showUserDialog = false;
+			})}
+		{/if}
+	</div>
+</nav>
+
+<style>div.overlay {
+  position: fixed;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 98;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+a.nav-link {
+  color: unset;
+}
+
+div.user {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+  position: fixed;
+  border-radius: 4px;
+  background-color: #ffffff;
+  padding: 0.75rem;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  right: 0.5rem;
+  z-index: 99;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+}
+
+nav {
+  position: relative;
+  grid-column-start: side-menu;
+  grid-column-end: end;
+  grid-row-start: nav-start;
+  grid-row-end: nav-end;
+  background-color: #ffffff;
+  display: flex;
+  flex-flow: row;
+  align-content: center;
+  justify-content: space-between;
+  border-bottom: solid 1px #cbd4da;
+}
+nav button {
+  background-color: #ffffff;
+  border: none;
+  height: 100%;
+  width: 100%;
+}
+nav button:hover {
+  background-color: rgba(47, 151, 186, 0.1);
+  cursor: pointer;
+}
+
+.spaced {
+  gap: 1rem;
+}
+
+.user-icon {
+  background-color: #dae0e5;
+  padding: 0.5rem;
+  border-radius: 17px;
+  opacity: 0;
+  font-weight: 600;
+}
+.user-icon.visible {
+  opacity: 1;
+}
+.user-icon.single-letter {
+  padding: 0.3rem 0.6rem;
+  border-radius: 14px;
+}
+
+.main-navigation > *:nth-child(even) {
+  position: relative;
+}
+.main-navigation > *:nth-child(even)::before {
+  content: "";
+  height: 1.5rem;
+  border-left: solid 1px #e8e8e8;
+  border-radius: 10px;
+  left: 0;
+  position: absolute;
+}
+.main-navigation > *:nth-child(even)::after {
+  content: "";
+  height: 1.5rem;
+  border-right: solid 1px #e8e8e8;
+  border-radius: 10px;
+  position: absolute;
+  right: 0;
+}
+.main-navigation > *:nth-child(even).selects {
+  padding-left: 1px;
+  padding-right: 1px;
+  width: 32rem;
+  --sv-border: none;
+  --input-width: calc(50% - 0.5rem);
+}
+
+.nav-link {
+  display: flex;
+  justify-content: center;
+  flex-flow: row;
+  align-items: center;
+  /* flex-grow: 1; */
+  min-width: 7.5rem;
+  transition: background-color 200ms ease 0s;
+}
+.nav-link.padded {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  gap: 1rem;
+}
+
+div.delimited {
+  padding: 0 0.5rem;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}</style>

package/dist/Components/Nav/Nav.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavProps } from './NavProps.js';
+declare const Nav: import("svelte").Component<NavProps, {}, "">;
+type Nav = ReturnType<typeof Nav>;
+export default Nav;

package/dist/Components/Nav/NavProps.d.ts

@@ -0,0 +1,9 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+import type { Snippet } from 'svelte';
+export interface NavProps {
+    userName: string;
+    userDialog: Snippet<[closeUserDialog: () => void]>;
+    serviceTabs: Array<TabOption<unknown>>;
+    selectedServiceTab: TabOption<unknown> | undefined;
+    extras?: Snippet;
+}

package/dist/Components/Nav/NavProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -0,0 +1,55 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour, Icon, Size } from '@lavalogic/scoria';
+	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+	import ServiceMenuItem from './ServiceMenuItem.svelte';
+
+	const { title, items, icon }: NavServiceMenuListProps = $props();
+</script>
+
+<div class="wrapper">
+	<h3>
+		<div class="icon">
+			{#if icon}
+				<Icon
+					size={Size.Large}
+					colour={Colour['$font-primary']}
+					{...icon}
+				/>
+			{/if}
+		</div>
+		{title}
+	</h3>
+
+	<div class="items">
+		{#each items as { item } (item.label)}
+			<ServiceMenuItem {item} />
+		{/each}
+	</div>
+</div>
+
+<style>h3 {
+  font-size: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  color: #3a4952;
+}
+h3 .icon {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  width: 3.4rem;
+}
+
+.wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+}
+.wrapper .items {
+  flex-shrink: 1;
+  overflow: auto;
+}</style>

package/dist/Components/Nav/NavServiceMenuList.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+declare const NavServiceMenuList: import("svelte").Component<NavServiceMenuListProps, {}, "">;
+type NavServiceMenuList = ReturnType<typeof NavServiceMenuList>;
+export default NavServiceMenuList;

package/dist/Components/Nav/NavServiceMenuListProps.d.ts

@@ -0,0 +1,7 @@
+import type { IconProps } from '../IconProps.js';
+import type { SideMenuItemProps } from './SideMenuItemProps.js';
+export interface NavServiceMenuListProps {
+    items: Array<SideMenuItemProps>;
+    title: string;
+    icon?: IconProps;
+}

package/dist/Components/Nav/NavServiceMenuListProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/NavTab.svelte

@@ -0,0 +1,123 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { devCatch } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavTabProps } from './NavTabProps.js';
+
+	let { option, selected }: NavTabProps = $props();
+
+	let disabled = $state(true);
+	let visible = $state(true);
+	let isValid = $state(true);
+
+	$effect(() => {
+		if (typeof option.isValid === 'boolean') {
+			isValid = option.isValid;
+		} else {
+			option.isValid
+				?.then((v) => {
+					isValid = v;
+				})
+				.catch(devCatch);
+		}
+	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled
+				.then((v) => {
+					disabled = v;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = true;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+<button
+	class:selected
+	onclick={() => {
+		option.onclick();
+	}}
+	type="button"
+	class="tab"
+	{disabled}
+	class:invalid={!isValid}
+	class:hidden={!visible}
+>
+	<Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.MediumLarge}
+		{...option.iconLeft}
+	/>
+
+	{option.label}
+	{#if option.isValid === false}
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.MediumLarge}
+		/>
+	{:else}
+		<Icon
+			name="nothing"
+			colour={Colour['$brand-primary']}
+			size={Size.MediumLarge}
+			{...option.iconRight}
+		/>
+	{/if}
+</button>
+
+<style>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
+  color: #3a4952;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 1.5rem;
+  background-color: transparent;
+  border: none;
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+  text-align: start;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  width: 100%;
+  justify-content: start;
+  gap: 0.5rem;
+}
+.tab:first-child {
+  border-radius: 4px 0 0 0;
+}
+.tab.selected {
+  color: #259fc7;
+}
+.tab:hover, .tab.selected:hover, .tab.invalid:hover {
+  background-color: #f4f7f9;
+}
+.tab.invalid {
+  color: #aa1414;
+}</style>

package/dist/Components/Nav/NavTab.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NavTabProps } from './NavTabProps.js';
+declare const NavTab: import("svelte").Component<NavTabProps, {}, "">;
+type NavTab = ReturnType<typeof NavTab>;
+export default NavTab;

package/dist/Components/Nav/NavTabProps.d.ts

@@ -0,0 +1,5 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+export interface NavTabProps {
+    option: TabOption<unknown>;
+    selected: boolean;
+}

package/dist/Components/Nav/NavTabProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/ServiceMenuItem.svelte

@@ -0,0 +1,154 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { dev } from '$app/environment';
+	import { resolve } from '$app/paths';
+	import { page } from '$app/state';
+	import { devCatch, Icon, Size } from '@lavalogic/scoria';
+	import { Dimensions } from './Dimensions.js';
+	import type { SideMenuItemProps } from './SideMenuItemProps.js';
+
+	const { item, selected: maybeSelected }: SideMenuItemProps = $props();
+
+	const selected = $derived(maybeSelected ?? (item.path ? page.url.pathname == item.path : false));
+
+	let visible = $state(true);
+
+	$effect(() => {
+		if (typeof item.visible === 'boolean') {
+			visible = item.visible;
+		} else if (item.visible == undefined) {
+			visible = true;
+		} else {
+			item.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
+</script>
+
+{#if item.callback}
+	<button
+		onclick={() => {
+			item.callback();
+		}}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></button
+	>
+{:else if item.path}
+	<!-- FIXME why is this type cast required? -->
+	<a
+		href={resolve(item.path as '/')}
+		style="--iconWidth: {Dimensions.smallPanelWidth}rem"
+		class:selected
+		class:hidden={!visible}
+	>
+		<!-- <div class="selected-marker"></div> -->
+		<div class="icon-wrapper">
+			{#if item.iconName}
+				<Icon
+					name={item.iconName}
+					size={Size.Medium}
+					label={item.label}
+				/>
+			{/if}
+		</div>
+		<div class="spacer"></div>
+		<div class="text">
+			<div class="label">{item.label}</div>
+			{#if item.subtitle}
+				<div class="subtitle">{item.subtitle}</div>
+			{/if}
+		</div></a
+	>
+{:else if dev}
+	Error: Callback had neither callback nor path
+{/if}
+
+<style>button.hidden,
+a.hidden {
+  display: none !important;
+}
+
+button,
+a {
+  font-size: 1rem;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0.8rem 0;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  color: #455661;
+  fill: #455661;
+  box-sizing: border-box;
+}
+button div,
+a div {
+  user-select: none;
+}
+button .text,
+a .text {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.75rem;
+}
+button .text .label,
+a .text .label {
+  font-weight: 500;
+}
+button .subtitle,
+a .subtitle {
+  font-size: 0.875rem;
+  color: #9da9b1;
+}
+button,
+a {
+  transition: border-color ease-out 0.15s 0s, background-color ease-out 0.15s 0s, color ease-out 0.15s 0s, fill ease-out 0.15s 0s;
+}
+button .icon-wrapper,
+a .icon-wrapper {
+  width: var(--iconWidth);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+button.selected, button:hover,
+a.selected,
+a:hover {
+  color: #259fc7;
+}
+button:hover,
+a:hover {
+  background-color: #f4f7f9;
+}
+button .spacer,
+a .spacer {
+  width: 0.5rem;
+}</style>

package/dist/Components/Nav/ServiceMenuItem.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SideMenuItemProps } from './SideMenuItemProps.js';
+declare const ServiceMenuItem: import("svelte").Component<SideMenuItemProps, {}, "">;
+type ServiceMenuItem = ReturnType<typeof ServiceMenuItem>;
+export default ServiceMenuItem;

package/dist/Components/Nav/ServicesNav.svelte

@@ -0,0 +1,91 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { HorizontalTabGroup, type TabOption } from '@lavalogic/scoria';
+	import NavTab from './NavTab.svelte';
+	import type { ServicesNavProps } from './ServicesNavProps.js';
+
+	const { onclose, serviceTabs, selectedServiceTab }: ServicesNavProps = $props();
+
+	let servicesDialogRef: HTMLDivElement | undefined = $state.raw();
+</script>
+
+<div
+	bind:this={servicesDialogRef}
+	role="dialog"
+	tabindex="0"
+	class="overlay"
+	onclick={(e) => {
+		e.stopPropagation();
+		if (servicesDialogRef === e.target) {
+			onclose();
+		}
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Escape') {
+			onclose();
+		}
+	}}
+>
+	<div
+		role="navigation"
+		class="services"
+	>
+		<HorizontalTabGroup
+			name="nav-services"
+			tabs={serviceTabs}
+			selected={selectedServiceTab}
+			tabComponent={navTab}
+			noRadius
+			grow
+		/>
+	</div>
+</div>
+
+{#snippet navTab(option: TabOption<unknown>, selected: boolean)}
+	<NavTab
+		{option}
+		{selected}
+	/>
+{/snippet}
+
+<style>div.overlay {
+  position: fixed;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 98;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+div.services {
+  position: fixed;
+  border-radius: 4px;
+  background-color: #ffffff;
+  top: calc(3.25rem + var(--env-border-height, 0));
+  left: 7.5rem;
+  z-index: 99;
+  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);
+  padding: 0;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: stretch;
+  height: min(710px, 80%);
+  width: 800px;
+}
+
+div.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  width: 600px;
+  gap: 1.5rem;
+  --input-width: 100%;
+}
+div.wrapper .row {
+  width: 100%;
+  gap: 1.5rem;
+  display: flex;
+  flex-flow: row nowrap;
+}</style>

package/dist/Components/Nav/ServicesNav.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ServicesNavProps } from './ServicesNavProps.js';
+declare const ServicesNav: import("svelte").Component<ServicesNavProps, {}, "">;
+type ServicesNav = ReturnType<typeof ServicesNav>;
+export default ServicesNav;

package/dist/Components/Nav/ServicesNavProps.d.ts

@@ -0,0 +1,6 @@
+import type { TabOption } from '../../Types/Internal/TabOption.js';
+export interface ServicesNavProps {
+    onclose: () => void;
+    serviceTabs: Array<TabOption<unknown>>;
+    selectedServiceTab: TabOption<unknown> | undefined;
+}

package/dist/Components/Nav/ServicesNavProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/Nav/SideMenuItemProps.d.ts

@@ -0,0 +1,11 @@
+import type { CallbackButtonWithIcon } from './CallbackButtonWithIcon.js';
+export declare const SideMenuItemVariant: {
+    readonly Nav: "Nav";
+    readonly Tab: "Tab";
+};
+export type SideMenuItemVariant = (typeof SideMenuItemVariant)[keyof typeof SideMenuItemVariant];
+export interface SideMenuItemProps {
+    item: CallbackButtonWithIcon;
+    selected?: boolean;
+    variant?: SideMenuItemVariant;
+}

package/dist/Components/Nav/SideMenuItemProps.js

@@ -0,0 +1,5 @@
+export const SideMenuItemVariant = {
+    Nav: 'Nav',
+    Tab: 'Tab',
+};
+Object.freeze(SideMenuItemVariant);

package/dist/index.d.ts

@@ -58,6 +58,17 @@ export type { MultiSelectCommonProps } from './Components/MultiSelectCommonProps
 export type { MultiSelectProps } from './Components/MultiSelectProps.js';
 export type { MultiSelectPropsAsObject } from './Components/MultiSelectPropsAsObject.js';
 export type { MultiSelectPropsAsPrimitive } from './Components/MultiSelectPropsAsPrimitive.js';
+export { type CallbackButtonWithCallback, type CallbackButtonWithIcon, type CallbackButtonWithPath, type NavButton, type NavButtonPartial, } from './Components/Nav/CallbackButtonWithIcon.js';
+export { Dimensions } from './Components/Nav/Dimensions.js';
+export { default as Nav } from './Components/Nav/Nav.svelte';
+export { type NavProps } from './Components/Nav/NavProps.js';
+export { default as NavServiceMenuList } from './Components/Nav/NavServiceMenuList.svelte';
+export { type NavServiceMenuListProps } from './Components/Nav/NavServiceMenuListProps.js';
+export { default as NavTab } from './Components/Nav/NavTab.svelte';
+export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
+export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
+export { type ServicesNavProps } from './Components/Nav/ServicesNavProps.js';
+export { SideMenuItemVariant, type SideMenuItemProps, } from './Components/Nav/SideMenuItemProps.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export type { NumberInputProps } from './Components/NumberInputProps.js';
 export { type PartialIconProps } from './Components/PartialIconProps.js';

package/dist/index.js

@@ -38,6 +38,17 @@ export { default as LoadingModal } from './Components/LoadingModal.svelte';
 export { default as LoadingOverlay } from './Components/LoadingOverlay.svelte';
 export { default as Modal } from './Components/Modal.svelte';
 export { default as MultiSelect } from './Components/MultiSelect.svelte';
+export {} from './Components/Nav/CallbackButtonWithIcon.js';
+export { Dimensions } from './Components/Nav/Dimensions.js';
+export { default as Nav } from './Components/Nav/Nav.svelte';
+export {} from './Components/Nav/NavProps.js';
+export { default as NavServiceMenuList } from './Components/Nav/NavServiceMenuList.svelte';
+export {} from './Components/Nav/NavServiceMenuListProps.js';
+export { default as NavTab } from './Components/Nav/NavTab.svelte';
+export { default as ServiceMenuItem } from './Components/Nav/ServiceMenuItem.svelte';
+export { default as ServicesNav } from './Components/Nav/ServicesNav.svelte';
+export {} from './Components/Nav/ServicesNavProps.js';
+export { SideMenuItemVariant, } from './Components/Nav/SideMenuItemProps.js';
 export { default as NumberInput } from './Components/NumberInput.svelte';
 export {} from './Components/PartialIconProps.js';
 export { default as PasswordInput } from './Components/PasswordInput.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "publishConfig": {
     "access": "restricted"
   },