@softwareone/spi-sv5-library 0.1.3 → 1.1.0

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,33 @@
+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 TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.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 type { ModalProps } from './Modal/modalState.svelte.js';
+import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import Search from './Search/Search.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, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type Tab, type Toast };

package/dist/index.js

@@ -1,14 +1,29 @@
-// 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 TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.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 Search from './Search/Search.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, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "0.1.3",
+	"version": "1.1.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -55,11 +55,10 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"vite": "^6.0.0",
+		"zod": "^3.25.76"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.16.0",
-		"lucide-svelte": "^0.475.0",
-		"zod": "^3.24.4"
+		"@sveltejs/kit": "^2.16.0"
 	}
 }

package/dist/Toggle/Toggle.svelte

@@ -1,170 +0,0 @@
-<script lang="ts">
-	import { Check, X } from 'lucide-svelte';
-
-	interface ToggleProps {
-		status?: 'on' | 'off';
-		disabled?: boolean;
-		onToggle?: () => void;	
-	}
-
-	let { status, disabled, onToggle }: ToggleProps = $props();
-
-	status = status || 'off';
-	disabled = disabled || false;
-
-	if (!onToggle) {
-		onToggle = () => {
-			if (status === 'on') {
-				status = 'off';
-			} else {
-				status = 'on';
-			}
-		};
-	}
-
-</script>
-
-{#if status === 'off'}
-	{#if disabled}
-	<div class="toggle-container">
-		<button class="toggle-off-disabled">
-			<div class="toggle-icon-off-disabled">
-				<X size="14" />
-			</div>
-		</button>
-	</div>
-	{:else}
-	<div class="toggle-container">
-		<button class="toggle-off" onclick={onToggle}>
-			<div class="toggle-icon-off">
-				<X size="14" />
-			</div>
-		</button>
-	</div>
-	{/if}
-{:else}
-	{#if disabled}
-	<div class="toggle-container">
-		<button class="toggle-on-disabled">
-			<div class="toggle-icon-on-disabled">
-				<Check size="14" />
-			</div>
-		</button>
-	</div>
-	{:else}
-	<div class="toggle-container">
-		<button class="toggle-on" onclick={onToggle}>
-			<div class="toggle-icon-on">
-				<Check size="14" />
-			</div>
-		</button>
-	</div>
-	{/if}
-{/if}
-
-
-<style>
-	.toggle-container {
-		display: inline-flex;
-		align-items: flex-start;
-		gap: 10px;
-	}
-	.toggle-container:hover .toggle-on {
-		background: var(--brand-primary, #3520BF);
-		border: 2px solid var(--brand-primary, #3520BF);
-		color: var(--brand-primary, #3520BF);
-	}
-	.toggle-container:hover .toggle-off {
-		border: 2px solid var(--brand-primary, #434952);
-	}
-	.toggle-container:hover .toggle-icon-off {
-		border: 2px solid var(--brand-primary, #434952);
-		background: var(--brand-white, #434952);
-	}
-	.toggle-on {
-		display: flex;
-		width: 40px;
-		padding: 2px;
-		justify-content: flex-end;
-		align-items: center;
-		gap: 10px;
-		border-radius: 12px;
-		border: 2px solid var(--brand-primary, #472aff);
-		background: var(--brand-primary, #472aff);
-		cursor: pointer;
-		color: var(--brand-primary, #472aff);
-	}
-	.toggle-icon-on {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		border-radius: var(--Card-radius, 16px);
-		border: 2px solid var(--brand-primary, #fff);
-		background: var(--brand-white, #fff);
-	}
-	.toggle-off {
-		display: flex;
-		width: 40px;
-		padding: 2px;
-		justify-content: flex-start;
-		align-items: center;
-		gap: 10px;
-		border-radius: 12px;
-		border: 2px solid var(--brand-primary, #6b7180);
-		background: var(--brand-primary, #fff);
-		color: var(--brand-primary, #fff);
-		cursor: pointer;
-	}
-	.toggle-icon-off {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		border-radius: var(--Card-radius, 16px);
-		border: 2px solid var(--brand-primary, #6b7180);
-		background: var(--brand-white, #6b7180);
-	}
-	.toggle-on-disabled {
-		display: flex;
-		width: 40px;
-		padding: 2px;
-		justify-content: flex-end;
-		align-items: center;
-		gap: 10px;
-		border-radius: 12px;
-		border: 2px solid var(--brand-primary, #6B7180);
-		background: var(--brand-primary, #6B7180);
-	}
-	.toggle-icon-on-disabled {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		border-radius: var(--Card-radius, 16px);
-		border: 2px solid var(--brand-primary, #fff);
-		background: var(--brand-white, #fff);
-		color: var(--brand-primary, #6B7180);
-	}
-	.toggle-off-disabled {
-		display: flex;
-		width: 40px;
-		padding: 2px;
-		justify-content: flex-start;
-		align-items: center;
-		gap: 10px;
-		border-radius: 12px;
-		border: 2px solid var(--brand-primary, #6b7180);
-		background: var(--brand-primary, #E0E5E8);
-	}
-	.toggle-icon-off-disabled {
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		gap: 10px;
-		border-radius: var(--Card-radius, 16px);
-		border: 2px solid var(--brand-primary, #6b7180);
-		background: var(--brand-white, #6b7180);
-		color: var(--brand-primary, #fff);
-	}
-</style>