@softwareone/spi-sv5-library 0.1.3 → 1.0.0

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { addToast } from '../Toast/toastState.svelte';
- 
+
 	interface Step {
 		title: string;
 		description: string;
@@ -47,7 +47,7 @@
 			isFormValid = false;
 			return;
 		}
-		if (currentStep < steps.length) { 
+		if (currentStep < steps.length) {
 			goToStep(currentStep + 1);
 		} else {
 			addToast({
@@ -147,7 +147,6 @@
 </div>
 
 <style>
-	/* Layout */
 	.progress-wizard {
 		display: flex;
 		flex-direction: column;
@@ -158,7 +157,6 @@
 		border-radius: 8px;
 		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 		overflow: hidden;
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 14px;
 	}
 
@@ -181,20 +179,19 @@
 		margin-bottom: -20px;
 	}
 
-	/* Header */
 	.progress-header {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 24px;
-		gap: var(--spacing-2, 16px);
+		gap: 16px;
 		border-bottom: 2px solid transparent;
 		border-image: linear-gradient(259deg, #00c9cd 16.32%, #472aff 59.03%, #392d9c 99.99%);
 		border-image-slice: 1;
 	}
 
 	.progress-header .title {
-		color: var(--brand-type, #000);
+		color: #000;
 		font-size: 18px;
 		font-weight: 600;
 		line-height: 26px;
@@ -205,13 +202,6 @@
 		font-size: 24px;
 	}
 
-	/* Sidebar Steps */
-	.progress-sidebar ol {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-	}
-
 	.progress-sidebar li {
 		display: flex;
 		position: relative;
@@ -226,10 +216,9 @@
 	}
 
 	.progress-sidebar li.active {
-		color: var(--brand-primary, #472aff);
+		color: #472aff;
 	}
 
-	/* Step Button */
 	.step-button {
 		all: unset;
 		width: 100%;
@@ -242,40 +231,39 @@
 
 	.step-button:hover .step-icon,
 	li.active .step-icon {
-		border-color: var(--brand-primary, #472aff);
+		border-color: #472aff;
 	}
 
 	.step-button:hover .step-details,
 	.step-button:hover .step-details small,
 	li.active .step-button .step-details small {
-		color: var(--brand-primary, #472aff);
+		color: #472aff;
 	}
 
-	/* Step Icon & Line */
 	.step-icon {
 		width: 24px;
 		height: 24px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: var(--brand-alert-1, #eaecff);
-		border: 2px solid var(--brand-alert-1, #eaecff);
+		background: #eaecff;
+		border: 2px solid #eaecff;
 		border-radius: 50%;
 		margin-right: 10px;
 		font-size: 0.9rem;
-		color: var(--brand-primary, #472aff);
+		color: #472aff;
 	}
 
 	li .done .step-icon {
-		background: var(--brand-primary, #472aff);
+		background: #472aff;
 		color: white;
-		border-color: var(--brand-primary, #472aff);
+		border-color: #472aff;
 	}
 
 	.step-button .step-icon.error {
-		background: var(--alerts-danger-3, #fce8ea);
+		background: #fce8ea;
 		color: #bb1425;
-		border-color: var(--alerts-danger-3, #bb1425);
+		border-color: #bb1425;
 	}
 
 	.step-line-wrapper {
@@ -301,10 +289,9 @@
 
 	li.completed .step-line,
 	li .done .step-line {
-		background: var(--brand-primary, #472aff);
+		background: #472aff;
 	}
 
-	/* Step Details */
 	.step-details {
 		display: flex;
 		flex-direction: column;
@@ -323,7 +310,6 @@
 		margin-bottom: 20px;
 	}
 
-	/* Footer */
 	.progress-footer {
 		display: flex;
 		justify-content: space-between;
@@ -332,7 +318,6 @@
 		border-top: 1px solid #e6e6e6;
 	}
 
-	/* Buttons */
 	.btn {
 		padding: 10px 20px;
 		border-radius: 4px;
@@ -342,13 +327,13 @@
 	}
 
 	.btn.primary {
-		background: var(--brand-primary, #472aff);
+		background: #472aff;
 		color: white;
 	}
 
 	.btn.secondary {
-		background: var(--alerts-info-1, #eaecff);
-		color: var(--brand-primary, #472aff);
+		background: #eaecff;
+		color: #472aff;
 		margin-right: 10px;
 	}
 
@@ -359,7 +344,7 @@
 
 	.link {
 		background: transparent;
-		color: var(--brand-primary, #472aff);
+		color: #472aff;
 		font-size: 0.9rem;
 	}
 

package/dist/Tabs/Tabs.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Tab } from '../index.js';
+
+	interface TabsProps {
+		tabs: Tab[];
+		activeTab?: number;
+	}
+
+	let { tabs = [], activeTab = 0 }: TabsProps = $props();
+
+	const handleClick = (index: number) => (): void => {
+		activeTab = index;
+	};
+</script>
+
+<div class="tabs-container">
+	<div class="tabs-list" role="tablist" aria-label="tabs">
+		{#each tabs as tab}
+			{#if !tab.hidden}
+				{@const isActiveTab = activeTab === tab.index}
+				<button
+					id="tab-{tab.index}"
+					role="tab"
+					aria-selected={isActiveTab}
+					aria-controls="panel-{tab.index}"
+					tabindex={isActiveTab ? 0 : -1}
+					type="button"
+					class:active={isActiveTab}
+					onclick={handleClick(tab.index)}
+				>
+					{tab.label}
+				</button>
+			{/if}
+		{/each}
+	</div>
+
+	{#each tabs as tab}
+		{#if activeTab === tab.index}
+			<div
+				class="tabs-content"
+				id="panel-{tab.index}"
+				role="tabpanel"
+				aria-labelledby="tab-{tab.index}"
+			>
+				{@render tab.component?.()}
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.tabs-container {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.tabs-list {
+		display: flex;
+		gap: 16px;
+		border-bottom: 1px solid #e0e5e8;
+	}
+
+	.tabs-list button {
+		border-radius: 8px;
+		background-color: #fff;
+		padding: 20px 16px 20px;
+		position: relative;
+		border: none;
+		font-size: 16px;
+	}
+
+	.tabs-list button:hover {
+		background-color: #f4f6f8;
+		cursor: pointer;
+	}
+
+	.tabs-list button.active {
+		color: #472aff;
+	}
+
+	.tabs-list button::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: -2px;
+		width: 0;
+		height: 4px;
+		background-color: #472aff;
+		border-radius: 8px;
+		transform: translateX(-50%);
+	}
+
+	.tabs-list button:hover::after,
+	.tabs-list button.active::after {
+		width: 90%;
+	}
+
+	.tabs-content {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		border-radius: 0px 0px 16px 16px;
+		overflow: hidden;
+		padding: 24px;
+		box-sizing: border-box;
+		min-height: 300px;
+		text-align: left;
+		font-size: 18px;
+	}
+</style>

package/dist/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Tab } from '../index.js';
+interface TabsProps {
+    tabs: Tab[];
+    activeTab?: number;
+}
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/Tabs/tabsState.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+export interface Tab {
+    index: number;
+    label: string;
+    component?: Snippet;
+    hidden?: boolean;
+}

package/dist/Tabs/tabsState.svelte.js

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

package/dist/Toast/Toast.svelte

@@ -65,9 +65,8 @@
 		align-items: center;
 		gap: 16px;
 		border-radius: 8px;
-		border: 1px solid var(--gray-2, #e0e5e8);
-		background: var(--brand-white, #fff);
-		/* shadow/dropdown */
+		border: 1px solid #e0e5e8;
+		background: #fff;
 		box-shadow:
 			0px 4px 5px 0px rgba(51, 56, 64, 0.15),
 			0px 1px 3px 0px rgba(51, 56, 64, 0.2),
@@ -78,27 +77,23 @@
 		padding: 8px 0px;
 		align-items: flex-start;
 		gap: 8px;
-		color: var(--brand-type, #000);
-
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #000;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.toast-content-link {
 		display: flex;
 		align-items: flex-start;
-		color: var(--alerts-info-4, #2b1999);
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #2b1999;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
 	.toast-content-link:hover {
-		color: var(--brand-primary, #472aff);
+		color: #472aff;
 		text-decoration: underline;
 	}
 </style>

package/dist/Tooltip/Tooltip.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import type { FlyParams } from 'svelte/transition';
+	import { fly } from 'svelte/transition';
+
+	type Position = 'top' | 'bottom' | 'left' | 'right';
+	type Width = 'xs' | 'sm' | 'md';
+
+	interface TooltipProps {
+		content: string;
+		position?: Position;
+		width?: Width;
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		content,
+		position = 'top',
+		width = 'xs',
+		class: customClass = '',
+		children
+	}: TooltipProps = $props();
+
+	let isVisible = $state(false);
+
+	const toggleTooltip = () => {
+		isVisible = !isVisible;
+	};
+
+	const TRANSITION_DURATION = 200;
+	const ARROW_OFFSET = 8;
+
+	const transitionConfig: FlyParams = {
+		duration: TRANSITION_DURATION,
+		easing: cubicOut,
+		y: position === 'top' ? ARROW_OFFSET : position === 'bottom' ? -ARROW_OFFSET : 0,
+		x: position === 'left' ? ARROW_OFFSET : position === 'right' ? -ARROW_OFFSET : 0
+	};
+</script>
+
+<div
+	class="tooltip-trigger"
+	role="button"
+	tabindex="0"
+	onmouseenter={toggleTooltip}
+	onmouseleave={toggleTooltip}
+	onfocus={toggleTooltip}
+	onblur={toggleTooltip}
+>
+	{@render children()}
+
+	{#if isVisible && content}
+		<div
+			class="tooltip tooltip-{position} tooltip-{width} {customClass}"
+			in:fly={transitionConfig}
+			out:fly={transitionConfig}
+			role="tooltip"
+			aria-live="polite"
+		>
+			{content}
+			<div class="tooltip-arrow tooltip-arrow-{position}" aria-hidden="true"></div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tooltip-trigger {
+		position: relative;
+		display: inline-block;
+	}
+
+	.tooltip-trigger:focus-visible {
+		outline: none;
+	}
+
+	.tooltip {
+		position: absolute;
+		z-index: 1000;
+		padding: 8px 12px;
+		border-radius: 6px;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 20px;
+		text-align: center;
+		pointer-events: none;
+		background-color: #25282d;
+		color: #ffffff;
+		white-space: normal;
+	}
+
+	.tooltip-xs {
+		width: 120px;
+	}
+
+	.tooltip-sm {
+		width: 200px;
+	}
+
+	.tooltip-md {
+		width: 320px;
+	}
+
+	.tooltip-top {
+		bottom: calc(100% + 12px);
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.tooltip-bottom {
+		top: calc(100% + 12px);
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
+	.tooltip-left {
+		top: 50%;
+		right: calc(100% + 12px);
+		transform: translateY(-50%);
+	}
+
+	.tooltip-right {
+		top: 50%;
+		left: calc(100% + 12px);
+		transform: translateY(-50%);
+	}
+
+	.tooltip-arrow {
+		position: absolute;
+		border: 6px solid transparent;
+	}
+
+	.tooltip-arrow-top {
+		top: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border-top-color: #25282d;
+	}
+
+	.tooltip-arrow-bottom {
+		bottom: 100%;
+		left: 50%;
+		transform: translateX(-50%);
+		border-bottom-color: #25282d;
+	}
+
+	.tooltip-arrow-left {
+		top: 50%;
+		left: 100%;
+		transform: translateY(-50%);
+		border-left-color: #25282d;
+	}
+
+	.tooltip-arrow-right {
+		top: 50%;
+		right: 100%;
+		transform: translateY(-50%);
+		border-right-color: #25282d;
+	}
+
+	@media (max-width: 768px) {
+		.tooltip {
+			font-size: 11px;
+			padding: 6px 10px;
+		}
+	}
+</style>

package/dist/Tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type Position = 'top' | 'bottom' | 'left' | 'right';
+type Width = 'xs' | 'sm' | 'md';
+interface TooltipProps {
+    content: string;
+    position?: Position;
+    width?: Width;
+    class?: string;
+    children: Snippet;
+}
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/assets/icons/feedback.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 22.4C29.0902 21.3906 29.9629 20.1693 30.5647 18.8109C31.1665 17.4526 31.4848 15.9856 31.5 14.5C31.5 7.7 24.8 2.5 16.5 2.5C8.2 2.5 1.5 7.7 1.5 14.5C1.5 21.3 8.2 26.8 16.5 26.8C17.9145 26.7937 19.3236 26.6259 20.7 26.3L28.5 29.5L28 22.4Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 8.5V16.5" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.5 22C17.1904 22 17.75 21.4404 17.75 20.75C17.75 20.0596 17.1904 19.5 16.5 19.5C15.8096 19.5 15.25 20.0596 15.25 20.75C15.25 21.4404 15.8096 22 16.5 22Z" fill="black"/>
+</svg>

package/dist/index.d.ts

@@ -1,13 +1,30 @@
+import Avatar from './Avatar/Avatar.svelte';
+import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
+import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chips from './Chips/Chips.svelte';
+import { ChipType } from './Chips/chipsState.svelte.js';
+import ErrorPage from './ErrorPage/ErrorPage.svelte';
+import Footer from './Footer/Footer.svelte';
+import Input from './Form/Input/Input.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
+import TextArea from './Form/TextArea/TextArea.svelte';
+import Header from './Header/Header.svelte';
+import HeaderAccount from './Header/HeaderAccount.svelte';
+import HeaderLoader from './Header/HeaderLoader.svelte';
+import HeaderLogo from './Header/HeaderLogo.svelte';
+import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
+import { ColumnType, ImageType, type HighlightPanelColumn } from './HighlightPanel/highlightPanelState.svelte.js';
+import Menu from './Menu/Menu.svelte';
+import Sidebar from './Menu/Sidebar.svelte';
+import type { MenuItem } from './Menu/SidebarState.svelte';
 import Modal from './Modal/Modal.svelte';
+import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
 import Spinner from './Spinner/Spinner.svelte';
+import Tabs from './Tabs/Tabs.svelte';
+import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
-import Toggle from './Toggle/Toggle.svelte';
-import Header from './Header/Header.svelte';
-import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
-import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
-import Chips from './Chips/Chips.svelte';
-import Footer from './Footer/Footer.svelte';
-import Card from './Card/Card.svelte';
-export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap, Chips, Footer, Card };
+import Tooltip from './Tooltip/Tooltip.svelte';
+export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type Tab, type Toast };

package/dist/index.js

@@ -1,14 +1,28 @@
-// Reexport your entry components here
+import Avatar from './Avatar/Avatar.svelte';
+import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
+import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import Button from './Button/Button.svelte';
+import Card from './Card/Card.svelte';
+import Chips from './Chips/Chips.svelte';
+import { ChipType } from './Chips/chipsState.svelte.js';
+import ErrorPage from './ErrorPage/ErrorPage.svelte';
+import Footer from './Footer/Footer.svelte';
+import Input from './Form/Input/Input.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
+import TextArea from './Form/TextArea/TextArea.svelte';
+import Header from './Header/Header.svelte';
+import HeaderAccount from './Header/HeaderAccount.svelte';
+import HeaderLoader from './Header/HeaderLoader.svelte';
+import HeaderLogo from './Header/HeaderLogo.svelte';
+import HighlightPanel from './HighlightPanel/HighlightPanel.svelte';
+import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
+import Menu from './Menu/Menu.svelte';
+import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
+import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
 import Spinner from './Spinner/Spinner.svelte';
+import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
-import Toggle from './Toggle/Toggle.svelte';
-import Header from './Header/Header.svelte';
-import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
-import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
-import Chips from './Chips/Chips.svelte';
-import Footer from './Footer/Footer.svelte';
-import Card from './Card/Card.svelte';
-export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips, Footer, Card };
+import Tooltip from './Tooltip/Tooltip.svelte';
+export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "0.1.3",
+	"version": "1.0.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -59,6 +59,7 @@
 	},
 	"dependencies": {
 		"@sveltejs/kit": "^2.16.0",
+		"http-status-codes": "^2.3.0",
 		"lucide-svelte": "^0.475.0",
 		"zod": "^3.24.4"
 	}