@softwareone/spi-sv5-library 0.1.3 → 1.1.0

package/dist/Form/TextArea/TextArea.svelte

@@ -0,0 +1,260 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
+		label?: string;
+		value?: string | null;
+		optional?: boolean;
+		error?: string | string[];
+		description?: string;
+		maximumCharactersAllowed?: number;
+		resize?: boolean;
+	}
+
+	let {
+		label,
+		value = $bindable(''),
+		optional = false,
+		error,
+		description,
+		maximumCharactersAllowed,
+		resize = false,
+		id,
+		...props
+	}: TextAreaProps = $props();
+
+	const componentId = $props.id();
+	const textareaId = id || componentId;
+
+	const currentTextLength = $derived(value?.trim().length ?? 0);
+	const isOverLimit = $derived(
+		maximumCharactersAllowed ? currentTextLength > maximumCharactersAllowed : false
+	);
+	const errorMessage = $derived(isOverLimit ? 'Character limit exceeded' : error);
+	const isInvalid = $derived(!!errorMessage);
+	const isValid = $derived(!isInvalid && (!!value || optional));
+</script>
+
+<div class="form-container">
+	{#if label}
+		<div class="form-label-container">
+			<label for={textareaId}>{label}</label>
+			{#if props.required}
+				<span class="form-label-required">Required</span>
+			{:else if optional}
+				<span class="form-label-optional">Optional</span>
+			{/if}
+		</div>
+	{/if}
+
+	<div class={['form-textarea-wrapper', isInvalid && 'error', isValid && 'success']}>
+		<textarea
+			{...props}
+			id={textareaId}
+			bind:value
+			class={[
+				'form-textarea',
+				props.disabled && 'form-textarea-disabled',
+				props.readonly && 'form-textarea-readonly',
+				!resize && 'form-textarea-no-resize'
+			]}
+			aria-invalid={isInvalid}
+		></textarea>
+	</div>
+
+	{#if !!(maximumCharactersAllowed || error || description)}
+		<div class="form-footer">
+			<div class="form-messages">
+				{#if description}
+					<p class="form-message form-message-description">
+						{description}
+					</p>
+				{/if}
+				{#if errorMessage}
+					<p class="form-message form-message-error">
+						{Array.isArray(errorMessage) ? errorMessage[0] : errorMessage}
+					</p>
+				{/if}
+			</div>
+			{#if maximumCharactersAllowed}
+				<div class={['form-character-count', isOverLimit && 'error']}>
+					{currentTextLength} / {maximumCharactersAllowed}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.form-container {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.form-label-container {
+		display: flex;
+		gap: 8px;
+		font-weight: 500;
+	}
+
+	.form-label-optional {
+		color: #6b7180;
+	}
+
+	.form-label-required {
+		color: #dc2626;
+	}
+
+	.form-message {
+		font-size: 12px;
+	}
+
+	.form-textarea-wrapper {
+		position: relative;
+		display: flex;
+		width: 100%;
+		border-radius: 8px;
+		border: 1px solid #6b7180;
+		background: #fff;
+		transition: all 0.2s ease-in-out;
+		overflow: hidden;
+	}
+
+	.form-textarea-wrapper:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
+	.form-textarea-wrapper:focus-within {
+		border-color: #472aff;
+	}
+
+	.form-textarea-wrapper:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.form-textarea {
+		font-size: 14px;
+		line-height: 20px;
+		display: flex;
+		width: 100%;
+		min-height: 80px;
+		padding: 8px 16px;
+		border: none;
+		border-radius: 8px;
+		color: #000;
+		transition: all 0.2s ease-in-out;
+		font-family: inherit;
+	}
+
+	.form-textarea:focus {
+		outline: none;
+	}
+
+	.form-textarea-disabled {
+		background-color: #f3f4f6;
+		border-color: #d1d5db;
+		color: #6b7180;
+		cursor: not-allowed;
+	}
+
+	.form-textarea-readonly {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		cursor: default;
+	}
+
+	.form-textarea-no-resize {
+		resize: none;
+	}
+
+	.form-textarea::placeholder,
+	.form-textarea:disabled::placeholder {
+		color: #6b7180;
+		opacity: 1;
+	}
+
+	.form-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 8px;
+	}
+
+	.form-messages {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+		flex: 1;
+	}
+
+	.form-message-error {
+		color: #dc2626;
+	}
+
+	.form-message-description {
+		color: #6b7180;
+	}
+
+	.form-character-count {
+		font-size: 12px;
+		color: #6b7180;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
+
+	.form-character-count.error {
+		color: #dc2626;
+	}
+
+	.form-textarea-wrapper.error,
+	.form-textarea-wrapper.error:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
+	.form-textarea-wrapper.error:focus-within {
+		border-color: #dc2626;
+	}
+
+	.form-textarea-wrapper.error:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(220, 38, 38, 0.2);
+	}
+
+	.form-textarea-wrapper.success {
+		border-color: #008556;
+	}
+
+	.form-textarea-wrapper.success:hover:not(:has(.form-textarea:disabled)):not(
+			:has(.form-textarea:read-only)
+		),
+	.form-textarea-wrapper.success:focus-within {
+		border-color: #10b981;
+	}
+
+	.form-textarea-wrapper.success:focus-within {
+		box-shadow: 0px 0px 0px 3px rgba(16, 185, 129, 0.15);
+	}
+
+	.form-textarea-wrapper:has(.form-textarea:disabled),
+	.form-textarea-wrapper:has(.form-textarea:read-only) {
+		border-color: #d1d5db !important;
+		box-shadow: none !important;
+	}
+
+	@media (prefers-contrast: high) {
+		.form-textarea {
+			border-width: 2px;
+		}
+
+		.form-textarea:focus {
+			outline: 2px solid;
+			outline-offset: 2px;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.form-textarea {
+			transition: none;
+		}
+	}
+</style>

package/dist/Form/TextArea/TextArea.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
+    label?: string;
+    value?: string | null;
+    optional?: boolean;
+    error?: string | string[];
+    description?: string;
+    maximumCharactersAllowed?: number;
+    resize?: boolean;
+}
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/Form/Toggle/Toggle.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	interface ToggleProps {
+		id?: string;
+		checked?: boolean;
+		disabled?: boolean;
+		onchange?: (event: Event) => void;
+	}
+
+	let { id = '', checked = $bindable(false), disabled = false, onchange }: ToggleProps = $props();
+</script>
+
+<label class="toggle-container">
+	<input
+		type="checkbox"
+		class="toggle-input"
+		bind:checked
+		{disabled}
+		{id}
+		{onchange}
+		role="switch"
+	/>
+	<div class={['toggle-slider', checked && 'checked', disabled && 'disabled']}>
+		<span class="material-icons-outlined toggle-icon">
+			{#if checked}
+				done
+			{:else}
+				close
+			{/if}
+		</span>
+	</div>
+</label>
+
+<style>
+	.toggle-container {
+		position: relative;
+	}
+
+	.toggle-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.toggle-slider {
+		display: flex;
+		width: 40px;
+		padding: 2px;
+		align-items: center;
+		border-radius: 12px;
+		border: 2px solid #6b7180;
+		background: #fff;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	.toggle-slider.checked {
+		justify-content: flex-end;
+		border: 2px solid #472aff;
+		background: #472aff;
+	}
+
+	.toggle-slider.disabled {
+		cursor: not-allowed;
+		border: 2px solid #6b7180;
+		background: #e0e5e8;
+	}
+
+	.toggle-slider.disabled.checked {
+		border: 2px solid #6b7180;
+		background: #6b7180;
+	}
+
+	.toggle-icon {
+		display: flex;
+		font-size: 12px;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		border-radius: 16px;
+		border: 2px solid #6b7180;
+		background: #6b7180;
+		color: #fff;
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+	.toggle-slider.checked .toggle-icon {
+		border: 2px solid #fff;
+		background: #fff;
+		color: #472aff;
+	}
+
+	.toggle-slider.disabled .toggle-icon {
+		cursor: not-allowed;
+		border: 2px solid #6b7180;
+		background: #6b7180;
+		color: #fff;
+	}
+
+	.toggle-slider.disabled.checked .toggle-icon {
+		border: 2px solid #fff;
+		background: #fff;
+		color: #6b7180;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled).checked {
+		background: #3520bf;
+		border: 2px solid #3520bf;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) {
+		border: 2px solid #434952;
+	}
+
+	.toggle-container:hover .toggle-slider:not(.disabled):not(.checked) .toggle-icon {
+		border: 2px solid #434952;
+		background: #434952;
+	}
+</style>

package/dist/{Toggle → Form/Toggle}/Toggle.svelte.d.ts

@@ -1,8 +1,9 @@
 interface ToggleProps {
-    status?: 'on' | 'off';
+    id?: string;
+    checked?: boolean;
     disabled?: boolean;
-    onToggle?: () => void;
+    onchange?: (event: Event) => void;
 }
-declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
 type Toggle = ReturnType<typeof Toggle>;
 export default Toggle;

package/dist/Header/Header.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import HeaderLogo from './HeaderLogo.svelte';
+	import type { Snippet } from 'svelte';
+
 	import HeaderAccount from './HeaderAccount.svelte';
 	import HeaderLoader from './HeaderLoader.svelte';
+	import HeaderLogo from './HeaderLogo.svelte';
 
 	interface HeaderProps {
 		title?: string;
 		homeUrl?: string;
-		disableMenuButton?: boolean;
-		menuButton?: () => void;
 		hideAccount?: boolean;
 		hideHelp?: boolean;
 		hideNotification?: boolean;
@@ -15,165 +15,83 @@
 		userName?: string;
 		profileUrl?: string;
 		hideLoader?: boolean;
+		menu?: Snippet;
 	}
 
-	let { title, homeUrl, disableMenuButton, menuButton, hideAccount, hideHelp, hideNotification, accountName, userName, profileUrl, hideLoader }: HeaderProps =
-		$props();
-
-	title = title || 'Default Title';
-	homeUrl = homeUrl || '/';
-	accountName = accountName || 'Company Name';
-	userName = userName || 'User Name';
-	profileUrl = profileUrl || '/profile';
-
-	if (!menuButton) {
-		menuButton = () => {
-			console.log('Menu button clicked');
-		};
-	}
+	let {
+		title = 'Default Title',
+		homeUrl = '/',
+		hideAccount,
+		hideHelp,
+		hideNotification,
+		accountName = 'Company Name',
+		userName = 'User Name',
+		profileUrl = '/profile',
+		hideLoader,
+		menu
+	}: HeaderProps = $props();
 </script>
 
 <div class="header-container">
-	<div class="header">
-		<div class="header-left">
-			<div class="header-hamburger">
-				<button class={`header-hamburger ${disableMenuButton ? "cursor-default" : "cursor-pointer"}`} onclick={menuButton} aria-labelledby="menu-button">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						height="24px"
-						viewBox="0 -960 960 960"
-						width="24px"
-						fill="#6b7180"
-						><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z" /></svg
-					>
-				</button>
-			</div>
-			<div class="header-logo">
-				<a href={homeUrl}>
-					<HeaderLogo />
-				</a>
-			</div>
-			<div class="header-title">
-				{title}
-			</div>
-		</div>
-		<div class="header-right">
-			{#if !hideHelp}
-			<button class="header-btn" aria-labelledby="help-button">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#6b7180"
-					><path
-						d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"
-					/></svg
-				>
+	<nav class="header-section">
+		{#if !hideLoader}
+			<HeaderLoader />
+		{/if}
+		{@render menu?.()}
+		<a href={homeUrl} title="Home">
+			<HeaderLogo />
+		</a>
+		<h2 class="header-title">
+			{title}
+		</h2>
+	</nav>
+
+	<nav class="header-section">
+		{#if !hideHelp}
+			<button class="header-btn material-icons-outlined" aria-labelledby="help-button">
+				help_outline
 			</button>
-			{/if}
-			{#if !hideNotification}
-			<button class="header-btn" aria-labelledby="notification-button">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#6b7180"
-					><path
-						d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"
-					/></svg
-				>
+		{/if}
+		{#if !hideNotification}
+			<button class="header-btn material-icons-outlined" aria-labelledby="notifications-button">
+				notifications
 			</button>
-			{/if}
-			{#if !hideAccount}
-				<div>
-					<a class="header-btn" href={profileUrl}>
-						<HeaderAccount {accountName} {userName} />
-					</a>
-				</div>
-			{/if}
-		</div>
-	</div>
+		{/if}
+		{#if !hideAccount}
+			<a href={profileUrl} title="Profile">
+				<HeaderAccount {accountName} {userName} />
+			</a>
+		{/if}
+	</nav>
 </div>
 
-{#if !hideLoader}
-	<HeaderLoader />
-{/if}
-
 <style>
 	.header-container {
 		display: flex;
-		width: auto;
-		align-items: flex-start;
-		flex: 1 0 0;
-	}
-	.header {
-		display: flex;
-		height: 80px;
-		padding: 0px 24px;
+		gap: 24px;
 		justify-content: space-between;
 		align-items: center;
-		flex: 1 0 0;
-		border-bottom: 3px solid #aeb1b9;
-		background: #fff;
-	}
-	.header-left {
-		display: flex;
-		height: 41px;
-		align-items: center;
-		gap: 32px;
-	}
-	.header-right {
-		display: flex;
-		max-width: 350px;
-		padding: 8px 24px;
-		align-items: center;
-		gap: 16px;
-		border-radius: 8px;
+		padding: 0px 24px;
 		background: #fff;
-		color: #6b7180;
+		height: 80px;
+		border-bottom: 3px solid #aeb1b9;
 	}
-	.header-hamburger {
+
+	.header-section {
 		display: flex;
-		justify-content: center;
 		align-items: center;
-		gap: 10px;
-		border: none;
-		background-color: transparent;
-		color: #6b7180;
-	}
-	.header-logo {
-		width: 65px;
-		height: 22.941px;
-		flex-shrink: 0;
-		fill: #000;
+		gap: 24px;
 	}
+
 	.header-title {
 		color: #000;
-
-		/* medium/6 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
 		font-size: 24px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: normal;
+		font-weight: 600;
 	}
+
 	.header-btn {
-		text-align: left;
 		border: none;
 		background: transparent;
 		color: #6b7180;
-		text-decoration: none;
-	}
-	.header-btn:hover {
-		cursor: pointer;
-	}
-
-	.cursor-default {
-		cursor: default;
-	}
-	.cursor-pointer {
-		cursor: pointer;
 	}
 </style>

package/dist/Header/Header.svelte.d.ts

@@ -1,8 +1,7 @@
+import type { Snippet } from 'svelte';
 interface HeaderProps {
     title?: string;
     homeUrl?: string;
-    disableMenuButton?: boolean;
-    menuButton?: () => void;
     hideAccount?: boolean;
     hideHelp?: boolean;
     hideNotification?: boolean;
@@ -10,6 +9,7 @@ interface HeaderProps {
     userName?: string;
     profileUrl?: string;
     hideLoader?: boolean;
+    menu?: Snippet;
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;