@websline/system-components 1.0.11 → 1.0.13

package/dist/components/atoms/actions/button/button.variants.d.ts

@@ -34,9 +34,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -84,9 +81,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };
@@ -134,9 +128,6 @@ export const buttonVariants: import("tailwind-variants").TVReturnType<{
         };
     };
     variant: {
-        filled: {
-            base: string;
-        };
         outlined: {
             base: string;
         };

package/dist/components/atoms/actions/button/button.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const buttonVariants = tv({
 	slots: {
-		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none focus:outline-offset-2",
+		base: "inline-flex cursor-pointer items-center rounded-lg border border-transparent align-middle transition duration-200 select-none focus:outline-offset-2",
 		icon: "flex h-lh items-center",
 		spinner: "flex h-lh items-center justify-center",
 	},
@@ -29,27 +29,24 @@ const buttonVariants = tv({
 		},
 		size: {
 			small: {
-				base: "gap-2 px-3 py-1.25 button-small",
+				base: "gap-2 px-3 py-1.25 ui-button-small",
 				spinner: "w-4",
 			},
 			medium: {
-				base: "gap-2 px-3 py-1.5 button-default",
+				base: "gap-2 px-3 py-[7px] ui-button-default",
 				spinner: "w-5",
 			},
 			large: {
-				base: "gap-3 px-3 py-2.5 button-default",
+				base: "gap-3 px-3 py-[7px] ui-button-default leading-6",
 				spinner: "w-5",
 			},
 		},
 		variant: {
-			filled: {
-				base: "border-1 border-transparent",
-			},
 			outlined: {
-				base: "border-1",
+				base: "border-current",
 			},
 			text: {
-				base: "relative !px-0 after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
+				base: "relative px-0! after:absolute after:bottom-0 after:left-0 after:h-[1.5px] after:w-0 after:transition-all after:duration-300 after:content-[''] hover:after:w-full",
 			},
 		},
 	},
@@ -65,7 +62,7 @@ const buttonVariants = tv({
 			color: "primary",
 			variant: "outlined",
 			class: {
-				base: "border-blue-500 text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-400 dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
+				base: "text-blue-500 hover:border-blue-600 hover:bg-blue-600 hover:text-white dark:text-blue-400 dark:hover:border-blue-500 dark:hover:bg-blue-500",
 			},
 		},
 		{
@@ -78,7 +75,7 @@ const buttonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class: {
-				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:border-neutral-200 dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-inherit",
+				base: "text-neutral-900 hover:border-neutral-700 hover:bg-neutral-700 hover:text-white dark:text-neutral-200 dark:hover:border-neutral-500 dark:hover:bg-neutral-500 dark:hover:text-neutral-900",
 			},
 		},
 		{
@@ -92,7 +89,7 @@ const buttonVariants = tv({
 			color: "success",
 			variant: "outlined",
 			class: {
-				base: "border-green-500 text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:border-green-500 dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
+				base: "text-green-500 hover:border-green-700 hover:bg-green-700 hover:text-white dark:text-green-500 dark:hover:border-green-700 dark:hover:bg-green-700",
 			},
 		},
 		{
@@ -106,7 +103,7 @@ const buttonVariants = tv({
 			color: "error",
 			variant: "outlined",
 			class: {
-				base: "border-red-500 text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:border-red-500 dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
+				base: "text-red-500 hover:border-red-700 hover:bg-red-700 hover:text-white dark:text-red-500 dark:hover:border-red-700 dark:hover:bg-red-700",
 			},
 		},
 		{

package/dist/components/atoms/actions/closeButton/CloseButton.svelte

@@ -67,7 +67,7 @@
 	onclick={handleClose}
 	onmouseenter={handleMouseOver}
 	{...rest}>
-	<Icon class="relative z-10" name="close" size={16} />
+	<Icon class="relative z-10" name="closeSmall" size={16} />
 	{#if animate}
 		<span
 			bind:this={barEl}

package/dist/components/atoms/actions/iconButton/iconButton.variants.js

@@ -19,9 +19,9 @@ const iconButtonVariants = tv({
 			large: "p-2.75",
 		},
 		variant: {
-			filled: "border-1 border-transparent",
-			outlined: "border-1",
-			transparent: "border-1 border-transparent",
+			filled: "border border-transparent",
+			outlined: "border",
+			transparent: "border border-transparent",
 		},
 	},
 	compoundVariants: [

package/dist/components/atoms/avatar/avatar.variants.js

@@ -5,7 +5,7 @@ const avatarVariants = tv({
 		base: "flex overflow-hidden",
 		image: "h-full w-full object-cover",
 		fallback:
-			"flex h-full w-full items-center justify-center bg-blue-100 heading-h6 text-neutral-900",
+			"flex h-full w-full items-center justify-center bg-blue-100 ui-title-2 text-neutral-900",
 	},
 	variants: {
 		as: {
@@ -13,7 +13,7 @@ const avatarVariants = tv({
 		},
 		shape: {
 			circle: "rounded-full",
-			square: "rounded",
+			square: "rounded-sm",
 		},
 	},
 });

package/dist/components/atoms/badge/badge.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const badgeVariants = tv({
 	slots: {
-		base: "absolute inline-flex items-center justify-center rounded-full body-extra-small select-none",
+		base: "absolute inline-flex items-center justify-center rounded-full ui-caption-helper select-none",
 		wrapper: "relative inline-flex gap-0.5",
 	},
 	variants: {

package/dist/components/atoms/chip/chip.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const chipVariants = tv({
 	base: [
-		"relative inline-flex items-center gap-1 rounded border align-middle select-none [button]:cursor-pointer",
+		"relative inline-flex items-center gap-1 rounded-sm border align-middle select-none [button]:cursor-pointer",
 		"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
 	],
 	variants: {
@@ -15,7 +15,7 @@ const chipVariants = tv({
 			warning: "bg-yellow-500 text-neutral-900",
 		},
 		size: {
-			small: "min-h-[20px] px-2 py-0.5 body-extra-small",
+			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
 			big: "min-h-[28px] px-3 py-1.5 body-small",
 		},
 		iconPosition: {

package/dist/components/atoms/feedback/progressBar/progressBar.variants.js

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const progressBarVariants = tv({
 	slots: {
-		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-[var(--progress)] after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
+		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-(--progress) after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
 		base: "flex items-center gap-4",
-		label: "body-small text-nowrap text-neutral-500 tabular-nums",
+		label: "ui-select-label text-nowrap text-neutral-500 tabular-nums",
 	},
 });
 

package/dist/components/atoms/helperText/helperText.variants.d.ts

@@ -2,7 +2,7 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", {
+}, undefined, "ui-caption-helper text-neutral-500", {
     error: {
         true: string;
     };
@@ -10,4 +10,4 @@ export const helperTextVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "body-extra-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-caption-helper text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/helperText/helperText.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const helperTextVariants = tv({
-	base: "body-extra-small text-neutral-500",
+	base: "ui-caption-helper text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/icon/Icon.svelte

@@ -34,7 +34,7 @@
 	<Comp
 		aria-hidden={title ? undefined : "true"}
 		aria-label={title || undefined}
-		class={`cms-icon ${className}`}
+		class={`cms-icon${className ? ` ${className}` : ""}`}
 		{color}
 		height={wh}
 		role={title ? "img" : undefined}

package/dist/components/atoms/input/input.variants.js

@@ -6,7 +6,7 @@ import { tv } from "tailwind-variants";
 const inputBaseVariant = tv({
 	slots: {
 		base: [
-			"w-full rounded bg-transparent px-4 body-default",
+			"w-full rounded-lg px-4 body-small",
 			"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
 			"bg-white dark:bg-neutral-800",
 			"outline-transparent transition-[border,color,outline] duration-300",
@@ -29,9 +29,9 @@ const inputBaseVariant = tv({
 			error: false,
 			class: {
 				base: [
-					"hover:ring-1 focus:ring-1",
-					"hover:border-blue-500 hover:ring-blue-500 focus:border-blue-500 focus:ring-blue-500",
-					"dark:hover:border-blue-400 dark:hover:ring-blue-400 dark:focus:border-blue-400 dark:focus:ring-blue-400",
+					"focus-within:ring-1 hover:ring-1",
+					"focus-within:border-blue-500 focus-within:ring-blue-500 hover:border-blue-500 hover:ring-blue-500",
+					"dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400 dark:hover:border-blue-400 dark:hover:ring-blue-400",
 				],
 			},
 		},

package/dist/components/atoms/label/label.variants.d.ts

@@ -5,7 +5,7 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", {
+}, undefined, "ui-select-label text-neutral-500", {
     error: {
         true: string;
     };
@@ -19,4 +19,4 @@ export const labelVariants: import("tailwind-variants").TVReturnType<{
     hidden: {
         true: string;
     };
-}, undefined, "body-small text-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "ui-select-label text-neutral-500", unknown, unknown, undefined>>;

package/dist/components/atoms/label/label.variants.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const labelVariants = tv({
-	base: "body-small text-neutral-500",
+	base: "ui-select-label text-neutral-500",
 	variants: {
 		error: {
 			true: "text-red-500",

package/dist/components/atoms/select/Select.svelte

@@ -30,7 +30,6 @@
 		required = false,
 		value = $bindable(),
 		variant = "default",
-
 		...rest
 	} = $props();
 

package/dist/components/atoms/select/select.variants.js

@@ -6,7 +6,7 @@ const selectVariants = tv({
 	slots: {
 		base: [
 			"flex items-center",
-			"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::picker(select)]:border-0 [&::picker(select)]:p-1",
+			"[&::picker(select)]:my-1 [&::picker(select)]:rounded-sm [&::picker(select)]:border-0 [&::picker(select)]:p-1",
 			"[&::picker-icon]:hidden",
 			"[&::picker(select)]:bg-white [&::picker(select)]:shadow-sm dark:[&::picker(select)]:bg-neutral-800",
 			"bg-none after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
@@ -14,7 +14,7 @@ const selectVariants = tv({
 			"[&:open]:after:rotate-180",
 		],
 		option: [
-			"flex rounded p-2 body-small",
+			"flex rounded-sm p-2 ui-select-label",
 			"bg-white dark:bg-neutral-800",
 			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",

package/dist/components/molecules/notification/notification.variants.js

@@ -2,12 +2,12 @@ import { tv } from "tailwind-variants";
 
 const notificationVariants = tv({
 	slots: {
-		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border-1 border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
-		close: "col-[3] self-start",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
+		close: "col-3 self-start",
 		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
-		message: "body-extra-small text-neutral-500",
-		title: "body-default dark:text-white",
+		message: "ui-caption-helper text-neutral-500",
+		title: "body-small dark:text-white",
 	},
 	variants: {
 		variant: {

package/dist/components/molecules/pickers/colorSwatch/colorSwatch.variants.js

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 const colorSwatchVariants = tv({
 	slots: {
-		base: "flex cursor-pointer items-center justify-center gap-1 rounded transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
-		iconText: "flex h-4 w-4 items-center justify-center rounded",
+		base: "flex cursor-pointer items-center justify-center gap-1 rounded-sm transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
+		iconText: "flex h-4 w-4 items-center justify-center rounded-sm",
 		iconArrow: "dark:text-white",
 	},
 	variants: {

package/dist/components/molecules/richTextEditor/richTextEditor.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const richTextEditorVariants = tv({
 	slots: {
-		base: "body-default text-neutral-800 dark:text-white",
+		base: "body-small text-neutral-800 dark:text-white",
 		toolbar:
 			"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
 		field: [

package/dist/components/molecules/selectorCard/selectorCard.variants.js

@@ -2,11 +2,12 @@ import { tv } from "tailwind-variants";
 
 const selectorCardVariants = tv({
 	slots: {
-		base: "flex cursor-pointer gap-3 rounded-sm border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
-		content: "flex grow flex-col items-start gap-1",
-		helperText: "body-small text-neutral-500",
+		base: "flex cursor-pointer gap-3 rounded-lg border border-neutral-300 bg-white px-4 py-3 dark:border-neutral-700 dark:bg-neutral-800",
+		content: "",
+		helperText: "ui-caption-helper text-neutral-500",
 		input: "shrink-0",
-		label: "cursor-[inherit] heading-h6 text-neutral-900 dark:text-neutral-200",
+		label:
+			"mb-0.5 cursor-[inherit] ui-title-2 text-neutral-900 dark:text-neutral-200",
 	},
 	variants: {
 		disabled: {
@@ -16,7 +17,7 @@ const selectorCardVariants = tv({
 		},
 		error: {
 			true: {
-				base: "!border-red-500 outline-1 !outline-red-500",
+				base: "border-red-500! outline-1 outline-red-500!",
 				label: "text-red-500 dark:text-red-500",
 			},
 		},

package/dist/components/molecules/tagSelector/Dropdown.svelte

@@ -0,0 +1,113 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { onDestroy, onMount } from "svelte";
+	import { tagSelectorVariants } from "./tagSelector.variants.js";
+
+	let {
+		filtered,
+		highlighted,
+		inputRef,
+		labelCreate,
+		localValues,
+		onCreateItem,
+		onSelectItem,
+		query,
+		showCreate,
+		value = [],
+		...rest
+	} = $props();
+
+	let styles = $derived(tagSelectorVariants());
+
+	let dropdownPosition = $state("bottom");
+	let dropdownMaxHeight = $state(200);
+
+	const attachHighlightedItem = (item) => {
+		if (inputRef) {
+			// so the screen reader can read the highlighted option aloud
+			if (item.id) inputRef.setAttribute("aria-activedescendant", item.id);
+			else inputRef.removeAttribute("aria-activedescendant");
+		}
+
+		// maybe scroll item into view
+		if (item.offsetTop < item.offsetParent.scrollTop)
+			item.scrollIntoView({ block: "nearest" });
+		else if (
+			item.offsetTop + item.offsetHeight >
+			item.offsetParent.scrollTop + item.offsetParent.offsetHeight
+		)
+			item.scrollIntoView({ block: "nearest" });
+	};
+
+	const updateDropdownPosition = () => {
+		if (!inputRef) return;
+
+		const rect = inputRef.getBoundingClientRect();
+		const spaceBelow = window.innerHeight - rect.bottom;
+		const spaceAbove = rect.top;
+
+		dropdownPosition = spaceBelow > spaceAbove ? "bottom" : "top";
+
+		dropdownMaxHeight =
+			dropdownPosition === "bottom"
+				? Math.min(300, spaceBelow - 24)
+				: Math.min(300, spaceAbove - 24);
+	};
+
+	const getOptionId = (itemId) =>
+		`${localValues?.id ?? "tagselector"}-option-${itemId}`;
+
+	onMount(() => updateDropdownPosition());
+	onDestroy(() => {
+		inputRef?.removeAttribute("aria-activedescendant");
+	});
+
+	let showDropdown = $derived(filtered.length > 0 || showCreate);
+</script>
+
+<svelte:window onscroll={updateDropdownPosition} onresize={updateDropdownPosition} />
+
+<div
+	class={styles.dropdown({ dropdownPosition, showDropdown })}
+	id={localValues.id}
+	role="listbox"
+	style={`max-height: ${dropdownMaxHeight}px`}
+	tabindex="-1"
+	{...rest}>
+	{#snippet option({ highlighted, id, label, selected, ...rest })}
+		<button
+			aria-selected={selected}
+			{@attach highlighted ? attachHighlightedItem : null}
+			class={styles.dropdownItem()}
+			data-highlighted={highlighted}
+			{id}
+			role="option"
+			tabindex="-1"
+			{...rest}>
+			{label}
+			{#if selected}
+				<Icon class={styles.dropdownCheckmark()} name="check" size={16} />
+			{/if}
+		</button>
+	{/snippet}
+
+	{#each filtered as item, i (item.id)}
+		{@render option({
+			highlighted: highlighted === i,
+			id: getOptionId(item.id),
+			label: item.label,
+			selected: value.includes(item.id),
+			onclick: () => onSelectItem(item.id),
+		})}
+	{/each}
+
+	{#if showCreate}
+		{@render option({
+			highlighted: highlighted === filtered.length,
+			id: getOptionId("create"),
+			label: `${labelCreate}: "${query}"`,
+			selected: false,
+			onclick: onCreateItem,
+		})}
+	{/if}
+</div>

package/dist/components/molecules/tagSelector/Dropdown.svelte.d.ts

@@ -0,0 +1,29 @@
+export default Dropdown;
+type Dropdown = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Dropdown: import("svelte").Component<{
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    labelCreate: any;
+    localValues: any;
+    onCreateItem: any;
+    onSelectItem: any;
+    query: any;
+    showCreate: any;
+    value?: any[];
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    filtered: any;
+    highlighted: any;
+    inputRef: any;
+    labelCreate: any;
+    localValues: any;
+    onCreateItem: any;
+    onSelectItem: any;
+    query: any;
+    showCreate: any;
+    value?: any[];
+} & Record<string, any>;