@softwareone/spi-sv5-library 0.1.2 → 1.0.0

package/dist/ProgressWizard/ProgressWizard.svelte

@@ -0,0 +1,355 @@
+<script lang="ts">
+	import { addToast } from '../Toast/toastState.svelte';
+
+	interface Step {
+		title: string;
+		description: string;
+		isValid?: boolean;
+	}
+
+	interface StepProps {
+		steps: Step[];
+		currentStep?: number;
+		isFormValid?: boolean;
+		onFinalStepAction?: () => void;
+		useAsPopUp?: boolean;
+		children?: () => any;
+	}
+
+	let {
+		steps = $bindable(),
+		currentStep = $bindable(1),
+		isFormValid = $bindable(),
+		onFinalStepAction,
+		useAsPopUp = false,
+		children
+	}: StepProps = $props();
+
+	steps = steps.map((step) => ({
+		...step,
+		isValid: step.isValid ?? true
+	}));
+
+	let completedSteps = $state<Set<number>>(new Set());
+	let stepsFormInstance: any;
+
+	const goToStep = (step: number) => {
+		if (step <= steps.length) {
+			for (let i = 1; i <= step; i++) {
+				completedSteps.add(i);
+			}
+			currentStep = step;
+		}
+	};
+
+	const nextStep = () => {
+		if (stepsFormInstance && !stepsFormInstance.validateCurrentStep()) {
+			isFormValid = false;
+			return;
+		}
+		if (currentStep < steps.length) {
+			goToStep(currentStep + 1);
+		} else {
+			addToast({
+				type: 'success',
+				message: 'Form submitted successfully!'
+			});
+		}
+	};
+
+	const previousStep = () => {
+		if (currentStep > 1) goToStep(currentStep - 1);
+	};
+
+	const onClose = () => {
+		if (useAsPopUp) {
+			// Logic to close the pop-up
+		}
+	};
+</script>
+
+<div class="progress-wizard">
+	<!-- Header -->
+	<div class="progress-header">
+		<div class="title">Create workspace</div>
+		<div class="header-actions">
+			{#if useAsPopUp}
+				<button class="link close" onclick={onClose}>
+					<span class="material-icons-outlined">close</span>
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Sidebar + Content -->
+	<div class="progress-body">
+		<!-- Sidebar -->
+		<div class="progress-sidebar">
+			<ol>
+				{#each steps as step, index}
+					<li
+						class:completed={completedSteps.has(index + 1)}
+						class:active={currentStep === index + 1}
+					>
+						<button
+							type="button"
+							onclick={() => goToStep(index + 1)}
+							class="step-button"
+							class:done={index + 1 < currentStep}
+						>
+							<div class="step-line-wrapper">
+								{#if index < steps.length - 1}
+									<div class="step-line"></div>
+								{/if}
+								<span class="step-icon" class:error={!step.isValid && index + 1 < currentStep}>
+									{#if index + 1 < currentStep && step.isValid}
+										✔
+									{:else if !step.isValid && index + 1 < currentStep}
+										x
+									{:else}
+										{index + 1}
+									{/if}
+								</span>
+							</div>
+							<div class="step-details">
+								<strong>{step.title}</strong>
+								<small>{step.description}</small>
+							</div>
+						</button>
+					</li>
+				{/each}
+			</ol>
+		</div>
+
+		<!-- Main Content -->
+		<div class="progress-content">
+			<div class="step-content">
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+
+	<!-- Footer -->
+	<div class="progress-footer">
+		<button class="btn link">Cancel</button>
+		<div class="action-buttons">
+			<button class="btn secondary" onclick={previousStep} disabled={currentStep === 1}>Back</button
+			>
+			<button
+				class="btn primary"
+				onclick={nextStep}
+				disabled={currentStep === steps.length && !isFormValid}
+			>
+				{currentStep === steps.length ? 'Create' : 'Next'}
+			</button>
+		</div>
+	</div>
+</div>
+
+<style>
+	.progress-wizard {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: 97vw;
+		margin: 0 auto;
+		background: #fff;
+		border-radius: 8px;
+		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+		overflow: hidden;
+		font-size: 14px;
+	}
+
+	.progress-body {
+		display: flex;
+		width: 100%;
+	}
+
+	.progress-sidebar {
+		width: 100%;
+		min-width: 226px;
+		max-width: 226px;
+		min-height: 50vh;
+		border-right: 1px solid #e6e6e6;
+	}
+
+	.progress-content {
+		flex-grow: 1;
+		padding: 24px;
+		margin-bottom: -20px;
+	}
+
+	.progress-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 24px;
+		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: #000;
+		font-size: 18px;
+		font-weight: 600;
+		line-height: 26px;
+		flex: 1 0 0;
+	}
+
+	.progress-header .header-actions button span {
+		font-size: 24px;
+	}
+
+	.progress-sidebar li {
+		display: flex;
+		position: relative;
+		cursor: default;
+		padding: 16px 24px;
+		gap: 8px;
+		color: inherit;
+	}
+
+	.progress-sidebar li.completed {
+		color: #4caf50;
+	}
+
+	.progress-sidebar li.active {
+		color: #472aff;
+	}
+
+	.step-button {
+		all: unset;
+		width: 100%;
+		display: flex;
+		align-items: flex-start;
+		border-radius: 4px;
+		cursor: pointer;
+		transition: background 0.3s;
+	}
+
+	.step-button:hover .step-icon,
+	li.active .step-icon {
+		border-color: #472aff;
+	}
+
+	.step-button:hover .step-details,
+	.step-button:hover .step-details small,
+	li.active .step-button .step-details small {
+		color: #472aff;
+	}
+
+	.step-icon {
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: #eaecff;
+		border: 2px solid #eaecff;
+		border-radius: 50%;
+		margin-right: 10px;
+		font-size: 0.9rem;
+		color: #472aff;
+	}
+
+	li .done .step-icon {
+		background: #472aff;
+		color: white;
+		border-color: #472aff;
+	}
+
+	.step-button .step-icon.error {
+		background: #fce8ea;
+		color: #bb1425;
+		border-color: #bb1425;
+	}
+
+	.step-line-wrapper {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: flex-start;
+		margin-right: 10px;
+	}
+
+	.step-line {
+		width: 1px;
+		height: 40px;
+		background: #e6e6e6;
+		position: absolute;
+		top: 100%;
+		left: 37%;
+		transform: translateX(-50%);
+		z-index: 0;
+		transition: background 0.3s ease;
+	}
+
+	li.completed .step-line,
+	li .done .step-line {
+		background: #472aff;
+	}
+
+	.step-details {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.step-details strong {
+		font-size: 16px;
+	}
+
+	.step-details small {
+		font-size: 12px;
+		color: #999;
+	}
+
+	.step-content {
+		margin-bottom: 20px;
+	}
+
+	.progress-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 10px 20px;
+		border-top: 1px solid #e6e6e6;
+	}
+
+	.btn {
+		padding: 10px 20px;
+		border-radius: 4px;
+		border: none;
+		cursor: pointer;
+		font-size: 0.9rem;
+	}
+
+	.btn.primary {
+		background: #472aff;
+		color: white;
+	}
+
+	.btn.secondary {
+		background: #eaecff;
+		color: #472aff;
+		margin-right: 10px;
+	}
+
+	.btn:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.link {
+		background: transparent;
+		color: #472aff;
+		font-size: 0.9rem;
+	}
+
+	.close {
+		color: #25282d;
+		border: none;
+	}
+</style>

package/dist/ProgressWizard/ProgressWizard.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Step {
+    title: string;
+    description: string;
+    isValid?: boolean;
+}
+interface StepProps {
+    steps: Step[];
+    currentStep?: number;
+    isFormValid?: boolean;
+    onFinalStepAction?: () => void;
+    useAsPopUp?: boolean;
+    children?: () => any;
+}
+declare const ProgressWizard: import("svelte").Component<StepProps, {}, "steps" | "currentStep" | "isFormValid">;
+type ProgressWizard = ReturnType<typeof ProgressWizard>;
+export default ProgressWizard;

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>