@softwareone/spi-sv5-library 0.1.2 → 1.0.0

package/dist/Form/Input/InputIcon.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	type IconType = 'error' | 'success' | 'password';
+
+	interface Props {
+		type: IconType;
+		isPasswordVisible?: boolean;
+		isDateInput?: boolean;
+	}
+
+	let { type, isPasswordVisible = $bindable(false), isDateInput = false }: Props = $props();
+
+	const icons: Record<Exclude<IconType, 'password'>, string> = {
+		error: 'priority_high',
+		success: 'check'
+	};
+</script>
+
+<div class="form-input-icon">
+	{#if type === 'password'}
+		<button
+			type="button"
+			class="form-input-icon-button"
+			onclick={() => (isPasswordVisible = !isPasswordVisible)}
+			aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
+		>
+			<span class="material-icons-outlined form-input-icon form-input-icon--password">
+				{isPasswordVisible ? 'visibility_off' : 'visibility'}
+			</span>
+		</button>
+	{:else}
+		<span class="material-icons-outlined form-input-icon form-input-icon--{type}"
+			class:form-input-icon--date-status={isDateInput && (type === 'error' || type === 'success')}
+			>{icons[type]}</span
+		>
+	{/if}
+</div>
+
+<style>
+	.form-input-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 18px;
+		height: 18px;
+		line-height: 1;
+		position: static;
+		transform: none;
+	}
+
+	.form-input-icon--error {
+		color: #dc2626;
+	}
+
+	.form-input-icon--success {
+		color: #059669;
+	}
+
+	.form-input-icon--password {
+		color: inherit;
+	}
+
+	.form-input-icon--date-status {
+		margin-right: 40px;
+	}
+
+	@-moz-document url-prefix() {
+		.form-input-icon--date-status {
+			margin-right: 35px;
+		}
+	}
+
+	.form-input-icon-button {
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #000;
+		transition: color 0.2s ease;
+		width: 24px;
+		height: 24px;
+		border-radius: 4px;
+		position: relative;
+		z-index: 1;
+		pointer-events: auto;
+	}
+
+	.form-input-icon-button:focus {
+		outline: none;
+	}
+
+	.form-input-icon-button:active {
+		transform: scale(0.95);
+	} 
+</style>

package/dist/Form/Input/InputIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+type IconType = 'error' | 'success' | 'password';
+interface Props {
+    type: IconType;
+    isPasswordVisible?: boolean;
+    isDateInput?: boolean;
+}
+declare const InputIcon: import("svelte").Component<Props, {}, "isPasswordVisible">;
+type InputIcon = ReturnType<typeof InputIcon>;
+export default InputIcon;

package/dist/Form/TextArea/TextArea.svelte

@@ -0,0 +1,258 @@
+<script lang="ts">
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
+		label?: string;
+		value?: string;
+		optional?: boolean;
+		error?: 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">
+						{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;
+    optional?: boolean;
+    error?: 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,136 +1,101 @@
 <script lang="ts">
-	import { Menu, CircleHelp, Bell } from 'lucide-svelte';
-	import HeaderLogo from './HeaderLogo.svelte';
-	import HeaderAccount from './HeaderAccount.svelte';
-	import HeaderLoader from './HeaderLoader.svelte';
+	import { HeaderAccount, HeaderLoader, HeaderLogo, Menu, type MenuItem } from '../index.js';
 
 	interface HeaderProps {
 		title?: string;
 		homeUrl?: string;
-		menuButton?: () => void;
+		disableMenuButton?: boolean;
+		hideAccount?: boolean;
+		hideHelp?: boolean;
+		hideNotification?: boolean;
 		accountName?: string;
 		userName?: string;
 		profileUrl?: string;
-		loader?: boolean;
+		hideLoader?: boolean;
+		menuItems: MenuItem[];
 	}
 
-	let { title, homeUrl, menuButton, accountName, userName, profileUrl, loader }: HeaderProps =
-		$props();
-
-	title = title || 'Default Title';
-	homeUrl = homeUrl || '/';
-	accountName = accountName || 'Company Name';
-	userName = userName || 'User Name';
-	profileUrl = profileUrl || '/profile';
-	loader = loader || true;
-
-	if (!menuButton) {
-		menuButton = () => {
-			console.log('Menu button clicked');
-		};
-	}
+	let {
+		title = 'Default Title',
+		homeUrl = '/',
+		disableMenuButton,
+		hideAccount,
+		hideHelp,
+		hideNotification,
+		accountName = 'Company Name',
+		userName = 'User Name',
+		profileUrl = '/profile',
+		hideLoader,
+		menuItems
+	}: HeaderProps = $props();
 </script>
 
-<div class="header-container">
-	<div class="header">
-		<div class="header-left">
-			<div class="header-hamburger">
-				<button class="header-hamburger" onclick={menuButton}>
-					<Menu size="24" />
-				</button>
-			</div>
-			<div class="header-logo">
-				<a href={homeUrl}>
-					<HeaderLogo />
-				</a>
-			</div>
-			<div class="header-title">
-				{title}
-			</div>
-		</div>
-		<div class="header-right">
-			<button class="header-btn"><CircleHelp /></button>
-			<button class="header-btn"><Bell /></button>
-			<div>
-				<a class="header-btn" href={profileUrl}>
-					<HeaderAccount {accountName} {userName} />
-				</a>
-			</div>
-		</div>
-	</div>
-</div>
+<header class="header">
+	<section class="header-section">
+		<Menu {menuItems} {disableMenuButton} />
+		<a href={homeUrl}>
+			<HeaderLogo />
+		</a>
+		<section class="header-title">
+			{title}
+		</section>
+	</section>
+
+	<section class="header-section">
+		{#if !hideHelp}
+			<button class="header-btn" aria-labelledby="help-button">
+				<span class="material-icons-outlined icon-span"> help_outline </span>
+			</button>
+		{/if}
+		{#if !hideNotification}
+			<button class="header-btn" aria-labelledby="notifications-button">
+				<span class="material-icons-outlined icon-span"> notifications </span>
+			</button>
+		{/if}
+		{#if !hideAccount}
+			<a href={profileUrl}>
+				<HeaderAccount {accountName} {userName} />
+			</a>
+		{/if}
+	</section>
+</header>
 
-{#if loader}
+{#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;
 		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;
-		cursor: pointer;
-		background-color: transparent;
-		color: #6b7180;
-	}
-	.header-logo {
-		width: 65px;
-		height: 22.941px;
-		flex-shrink: 0;
-		fill: #000;
+		gap: 1.5rem;
 	}
+
 	.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;
 	}
+
 	.header-btn {
-		text-align: left;
 		border: none;
 		background: transparent;
-		color: #6b7180;
-		text-decoration: none;
 	}
-	.header-btn:hover {
-		cursor: pointer;
+
+	.icon-span {
+		color: #6b7180;
+		font-size: 24px;
+		font-weight: 400;
+		line-height: 20px;
+		word-wrap: break-word;
 	}
 </style>