@websline/system-components 1.3.4 → 1.3.5

package/dist/components/atoms/checkbox/Checkbox.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/chip/Chip.svelte

@@ -35,12 +35,13 @@
 <svelte:element
 	this={as}
 	class={chipVariants({
+		class: className,
+		clickable,
 		color,
-		size,
 		iconPosition,
-		variant,
 		selected: clickable && selected,
-		class: className,
+		size,
+		variant,
 	})}
 	type={clickable ? "button" : undefined}
 	{...rest}>

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

@@ -6,17 +6,17 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, string[], {
     color: {
@@ -26,17 +26,17 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
@@ -46,16 +46,16 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, string[], unknown, unknown, undefined>>;

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

@@ -8,109 +8,128 @@ const chipVariants = tv({
 	variants: {
 		color: {
 			default:
-				"bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-200",
+				"bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-200",
 			primary: "bg-blue-500 text-neutral-100 dark:bg-blue-400",
 			error: "bg-red-500 text-neutral-100",
 			success: "bg-green-500 text-neutral-100",
 			warning: "bg-yellow-500 text-neutral-900",
 		},
-		size: {
-			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
-			big: "min-h-[28px] px-3 py-1.5 body-small",
-		},
 		iconPosition: {
 			end: "flex-row-reverse",
 		},
+		size: {
+			big: "min-h-[28px] px-3 py-1.5 body-small",
+			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
+		},
 		variant: {
+			dashed: "border-dashed",
 			filled: "border-transparent",
-			outline: "bg-transparent dark:bg-transparent",
-			dashed: "border-dashed bg-transparent dark:bg-transparent",
+			outline: "",
 		},
 	},
 	compoundVariants: [
 		// Outline || Dashed
+		{
+			selected: false,
+			variant: ["dashed", "outline"],
+			class: "bg-transparent dark:bg-transparent",
+		},
 		{
 			color: "default",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "border-gray-300 dark:border-gray-700",
 		},
 		{
 			color: "primary",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class:
 				"border-blue-500 text-blue-500 dark:border-blue-400 dark:text-neutral-100",
 		},
 		{
 			color: "error",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "text-red-500",
 		},
 		{
 			color: "success",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "text-green-500",
 		},
 		{
 			color: "warning",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "border-yellow-500 text-neutral-900 dark:text-yellow-600",
 		},
-		// Selected
+
+		// Clickable (hover state = selected state, except for default)
 		{
-			selected: true,
+			clickable: true,
 			color: "default",
-			class: "bg-neutral-900 text-neutral-100 dark:bg-blue-400",
+			class: "hover:bg-neutral-200 hover:dark:bg-neutral-900",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "primary",
-			class: "bg-blue-600 dark:bg-blue-500",
+			class: "hover:bg-blue-600 hover:text-neutral-100 hover:dark:bg-blue-500",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "error",
-			class: "bg-red-700",
+			class: "hover:bg-red-700 hover:text-neutral-100",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "success",
-			class: "bg-green-700",
+			class: "hover:bg-green-700 hover:text-neutral-100",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "warning",
-			class: "bg-yellow-600",
+			class: "hover:bg-yellow-600 hover:text-neutral-900",
 		},
-		// Selected & Outline || Dashed
+		// Clickable & Outline || Dashed
+		{
+			clickable: true,
+			variant: ["dashed", "outline"],
+			class: "hover:border-transparent hover:dark:border-transparent",
+		},
+
+		// Selected
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "default",
-			class: "border-neutral-900 dark:border-blue-400",
+			class: "bg-neutral-900 text-neutral-100 dark:bg-blue-400",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "primary",
-			class: "border-blue-600 bg-blue-600 text-neutral-100 dark:border-blue-500",
+			class: "bg-blue-600 dark:bg-blue-500",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "error",
-			class: "border-red-700 text-neutral-100 dark:bg-red-700",
+			class: "bg-red-700",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "success",
-			class: "border-green-700 text-neutral-100 dark:bg-green-700",
+			class: "bg-green-700",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "warning",
-			class: "border-yellow-600 dark:bg-yellow-600 dark:text-neutral-900",
+			class: "bg-yellow-600",
+		},
+		// Selected & Outline || Dashed
+		{
+			selected: true,
+			variant: ["dashed", "outline"],
+			class: "border-transparent dark:border-transparent",
 		},
 	],
 });

package/dist/components/atoms/radio/Radio.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/switch/Switch.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/tag/Tag.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { Icon } from "../../../index.js";
+	import { tagVariants } from "./tag.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Content inside the tag – can be text, HTML, or Svelte components
+	 * @property {string} [class=""] Additional CSS classes for the tag
+	 * @property {string} [icon=""] Name of the icon to display
+	 * @property {"start" | "end"} [iconPosition="start"] Position of the icon relative to the content
+	 * @property {boolean} [selected=false] Whether the tag is in a visually selected state
+	 * @property {"round" | "round-big"} [shape="round"] Shape of the tag
+	 * @property {"small" | "big"} [size="small"] Size of the tag
+	 * @property {"filled" | "outline"} [variant="filled"] Visual style of the tag
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		icon = "",
+		iconPosition = "start",
+		selected = false,
+		shape = "round",
+		size = "small",
+		variant = "filled",
+		...rest
+	} = $props();
+</script>
+
+<button
+	class={tagVariants({
+		class: className,
+		iconPosition,
+		selected,
+		shape,
+		size,
+		variant,
+	})}
+	{...rest}>
+	{#if icon}
+		<Icon name={icon} size={14} />
+	{/if}
+	<span>
+		{@render children?.()}
+	</span>
+</button>

package/dist/components/atoms/tag/Tag.svelte.d.ts

@@ -0,0 +1,73 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Tag: import("svelte").Component<{
+    /**
+     * Content inside the tag – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the tag
+     */
+    class?: string;
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the tag is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Shape of the tag
+     */
+    shape?: "round" | "round-big";
+    /**
+     * Size of the tag
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the tag
+     */
+    variant?: "filled" | "outline";
+}, {}, "">;
+type Props = {
+    /**
+     * Content inside the tag – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the tag
+     */
+    class?: string;
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the tag is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Shape of the tag
+     */
+    shape?: "round" | "round-big";
+    /**
+     * Size of the tag
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the tag
+     */
+    variant?: "filled" | "outline";
+};

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

@@ -0,0 +1,58 @@
+export const tagVariants: import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, string[], {
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    iconPosition: {
+        end: string;
+    };
+    selected: {
+        true: string;
+    };
+    shape: {
+        round: string;
+        "round-big": string;
+    };
+    size: {
+        big: string;
+        small: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,32 @@
+import { tv } from "../../../utils/tailwind.js";
+
+const tagVariants = tv({
+	base: [
+		"relative inline-flex cursor-pointer items-center gap-1 align-middle ui-tag-badge select-none",
+		"ring-blue-500 ring-offset-1 ring-offset-transparent outline-0 focus-visible:ring-1 dark:ring-blue-400",
+		"text-neutral-900 hover:bg-neutral-200 dark:text-neutral-200 hover:dark:bg-neutral-700",
+		"border border-neutral-100 hover:border-neutral-200 dark:border-neutral-700 hover:dark:border-neutral-700",
+	],
+	variants: {
+		iconPosition: {
+			end: "flex-row-reverse",
+		},
+		selected: {
+			true: "border-neutral-900 bg-neutral-900 text-neutral-100 dark:border-blue-400 dark:bg-blue-400",
+		},
+		shape: {
+			round: "rounded-sm",
+			"round-big": "rounded-lg",
+		},
+		size: {
+			big: "min-h-8 px-3",
+			small: "min-h-6 px-2",
+		},
+		variant: {
+			filled: "bg-neutral-100 dark:bg-neutral-700",
+			outline: "bg-transparent",
+		},
+	},
+});
+
+export { tagVariants };

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte

@@ -1,61 +1,53 @@
 <script>
-	import { onMount, onDestroy } from "svelte";
+	import { onMount, setContext } from "svelte";
 	import RichTextEditorToolbar from "./toolbar/RichTextEditorToolbar.svelte";
 	import { richTextEditorVariants } from "./richTextEditor.variants.js";
 
-	/**
-	 * TODO: Transform into runes. Currently not possible because re-rendering is not executed correctly. Best to check, for example, whether the Bold button is correctly marked when set.
-	 */
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {classes} [classes] CSS class overrides for editor parts
-	 * @property {string} [content=""] The initial content of the editor
-	 * @property {string} [fieldName=""] The name of the field for form submissions
-	 * @property {boolean} [hideToolbar=false] Whether to hide the toolbar
-	 * @property {"small" | "medium" | "large"} [size="medium"] RichTextEditor size
-	 * @property {string} [placeholder=""] Placeholder text for the editor
-	 */
-
-	/** @type {Props} */
-	export let classes = {};
-	export let content = "";
-	export let fieldName = "";
-	export let hideToolbar = false;
-	export let placeholder = "Beginne mit dem Schreiben...";
-	export let size = "medium";
-	export let toolbarConfig = {
-		bold: {
-			enabled: true,
-		},
-		history: {
-			enabled: true,
-		},
-		italic: {
-			enabled: true,
-		},
-		link: {
-			enabled: true,
-		},
-		list: {
-			enabled: true,
-		},
-		listOrdered: {
-			enabled: true,
-		},
-		underline: {
-			enabled: true,
-		},
-		color: {
-			enabled: true,
-			colors: ["#121110", "#0000ff"],
-			defaultColor: "#121110",
+	let {
+		classes = {},
+		content = "",
+		fieldName = "",
+		hideToolbar = false,
+		placeholder = "",
+		size = "medium",
+		toolbarConfig = {
+			bold: {
+				enabled: true,
+			},
+			history: {
+				enabled: true,
+			},
+			italic: {
+				enabled: true,
+			},
+			link: {
+				enabled: true,
+			},
+			list: {
+				enabled: true,
+			},
+			listOrdered: {
+				enabled: true,
+			},
+			underline: {
+				enabled: true,
+			},
+			color: {
+				enabled: true,
+				colors: ["#121110", "#0000ff"],
+				defaultColor: "#121110",
+			},
 		},
-	};
+		...rest
+	} = $props();
 
-	let element;
-	let editor;
-	let htmlInputValue;
+	let element = $state();
+	let htmlInputValue = $state();
+	let editor = $state.raw();
+
+	let styles = $derived(richTextEditorVariants({ hideToolbar, size }));
+
+	setContext("richt-text-editor", () => editor);
 
 	const initEditor = async () => {
 		const { Editor } = await import("@tiptap/core");
@@ -111,8 +103,7 @@
 				},
 			},
 			content,
-			onTransaction: () => {
-				editor = editor;
+			onUpdate: () => {
 				htmlInputValue = editor.getHTML();
 			},
 		});
@@ -122,12 +113,10 @@
 
 	onMount(() => {
 		initEditor();
-	});
 
-	onDestroy(() => {
-		if (editor) {
-			editor.destroy();
-		}
+		return () => {
+			editor?.destroy();
+		};
 	});
 
 	const cleanHTMLWhitespace = (html) => {
@@ -152,14 +141,12 @@
 
 		return dom.innerHTML.trim();
 	};
-
-	let styles = richTextEditorVariants({ hideToolbar, size });
 </script>
 
-<div class={styles.base({ class: classes.base })}>
+<div class={styles.base({ class: classes.base })} {...rest}>
 	{#if !hideToolbar}
 		<div class={styles.toolbar({ class: classes.toolbar })}>
-			<RichTextEditorToolbar {editor} {toolbarConfig} />
+			<RichTextEditorToolbar {toolbarConfig} />
 		</div>
 	{/if}
 	{#if fieldName}