@websline/system-components 1.3.4 → 1.3.6

package/dist/components/molecules/richTextEditor/toolbar/RichTextEditorToolbar.svelte

@@ -9,41 +9,40 @@
 	import ToolbarRedo from "./ToolbarRedo.svelte";
 	import ToolbarColor from "./ToolbarColor.svelte";
 
-	let { editor, toolbarConfig } = $props();
+	let { toolbarConfig } = $props();
 </script>
 
 {#if toolbarConfig && toolbarConfig.bold && toolbarConfig.bold.enabled}
-	<ToolbarBold {editor} />
+	<ToolbarBold />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.italic && toolbarConfig.italic.enabled}
-	<ToolbarItalic {editor} />
+	<ToolbarItalic />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.underline && toolbarConfig.underline.enabled}
-	<ToolbarUnderline {editor} />
+	<ToolbarUnderline />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.link && toolbarConfig.link.enabled}
-	<ToolbarLink {editor} onOpenLink={toolbarConfig.link.onOpenLink} />
+	<ToolbarLink onOpenLink={toolbarConfig.link.onOpenLink} />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.color && toolbarConfig.color.enabled && toolbarConfig.color.colors.length > 0}
 	<ToolbarColor
 		colors={toolbarConfig.color.colors}
-		defaultColor={toolbarConfig.color.defaultColor}
-		{editor} />
+		defaultColor={toolbarConfig.color.defaultColor} />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.list && toolbarConfig.list.enabled}
-	<ToolbarList {editor} />
+	<ToolbarList />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.listOrdered && toolbarConfig.listOrdered.enabled}
-	<ToolbarListOrdered {editor} />
+	<ToolbarListOrdered />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.history && toolbarConfig.history.enabled}
-	<ToolbarUndo {editor} />
-	<ToolbarRedo {editor} />
+	<ToolbarUndo />
+	<ToolbarRedo />
 {/if}

package/dist/components/molecules/richTextEditor/toolbar/RichTextEditorToolbar.svelte.d.ts

@@ -4,10 +4,8 @@ type RichTextEditorToolbar = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const RichTextEditorToolbar: import("svelte").Component<{
-    editor: any;
     toolbarConfig: any;
 }, {}, "">;
 type $$ComponentProps = {
-    editor: any;
     toolbarConfig: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("bold")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("bold") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="bold"
 		onclick={() => editor.chain().focus().toggleBold().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarBold;
 type ToolbarBold = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarBold: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarBold: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte

@@ -1,9 +1,11 @@
 <script>
+	import { getContext } from "svelte";
 	import { ColorSwatch } from "../../../../index.js";
 
-	let { colors = [], defaultColor = "#121110", editor } = $props();
+	let { colors = [], defaultColor = "#121110" } = $props();
 
 	let isOpen = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
 	let selectedColor = $derived(defaultColor);
 
 	const handleColorSelect = (color) => {
@@ -15,9 +17,10 @@
 
 	$effect(() => {
 		if (!editor) return;
-
-		const attrs = editor.getAttributes("textStyle");
-		selectedColor = attrs.color || defaultColor;
+		return editor.on("transaction", () => {
+			const attrs = editor.getAttributes("textStyle");
+			selectedColor = attrs.color || defaultColor;
+		});
 	});
 </script>
 

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte.d.ts

@@ -6,10 +6,8 @@ type ToolbarColor = {
 declare const ToolbarColor: import("svelte").Component<{
     colors?: any[];
     defaultColor?: string;
-    editor: any;
 }, {}, "">;
 type $$ComponentProps = {
     colors?: any[];
     defaultColor?: string;
-    editor: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("italic")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("italic") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="italic"
 		onclick={() => editor.chain().focus().toggleItalic().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarItalic;
 type ToolbarItalic = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarItalic: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarItalic: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte

@@ -1,7 +1,16 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor, onOpenLink } = $props();
+	let { onOpenLink } = $props();
+
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("link")));
+	});
 
 	const setLink = () => {
 		const focus = () => editor.chain().focus();
@@ -27,7 +36,7 @@
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("link") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="link"
 		onclick={handleOpenLinkModal}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte.d.ts

@@ -4,10 +4,8 @@ type ToolbarLink = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ToolbarLink: import("svelte").Component<{
-    editor: any;
     onOpenLink: any;
 }, {}, "">;
 type $$ComponentProps = {
-    editor: any;
     onOpenLink: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("bulletList")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("bulletList") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="listUnordered"
 		onclick={() => editor.chain().focus().toggleBulletList().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarList;
 type ToolbarList = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarList: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarList: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("orderedList")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("orderedList") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="listOrdered"
 		onclick={() => editor.chain().focus().toggleOrderedList().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarListOrdered;
 type ToolbarListOrdered = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarListOrdered: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarListOrdered: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte

@@ -1,7 +1,8 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let editor = $derived(getContext("richt-text-editor")());
 </script>
 
 {#if editor}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarRedo;
 type ToolbarRedo = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarRedo: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarRedo: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("underline")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("underline") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="underline"
 		onclick={() => editor.chain().focus().toggleUnderline().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarUnderline;
 type ToolbarUnderline = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarUnderline: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarUnderline: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte

@@ -1,7 +1,8 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let editor = $derived(getContext("richt-text-editor")());
 </script>
 
 {#if editor}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarUndo;
 type ToolbarUndo = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarUndo: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarUndo: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -31,7 +31,7 @@
 		name,
 		required = false,
 		type = "radio",
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

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

@@ -1,5 +1,5 @@
 <script>
-	import { Chip } from "../../../index.js";
+	import { Tag } from "../../../index.js";
 	import { tagSelectorVariants } from "./tagSelector.variants.js";
 
 	let {
@@ -21,17 +21,13 @@
 <div class={styles.valueList()}>
 	{#each value as s (s)}
 		{@const opt = options.find((i) => i.id === s)}
-		<Chip
-			class={styles.item()}
-			clickable
-			icon="closeSmall"
-			onclick={() => onRemoveItem(s)}>
+		<Tag class={styles.item()} icon="closeSmall" onclick={() => onRemoveItem(s)}>
 			{opt?.label ?? s}
-		</Chip>
+		</Tag>
 	{/each}
 
 	{#if !localValues.disabled}
-		<Chip class={styles.searchField()} icon="add" variant="outline">
+		<Tag class={styles.searchField()} icon="add" variant="outline">
 			<input
 				bind:this={inputRef}
 				bind:value={query}
@@ -47,6 +43,6 @@
 					: {}}
 				{placeholder}
 				role="searchbox" />
-		</Chip>
+		</Tag>
 	{/if}
 </div>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -13,6 +13,8 @@
 	 * @property {"default" | "raised"} [appearance="default"] The appearance variant of the component
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the toggle group is disabled
+	 * @property {string} [name] The name of the toggle group, used for form submission
 	 * @property {"small" | "medium"} [size="medium"] The size variant of the component
 	 * @property {string} [value=""] The value of the toggle group
 	 * @property {"default" | "tabs"} [variant="default"] The variant of the toggle group
@@ -28,6 +30,8 @@
 		appearance = "default",
 		children,
 		class: className = "",
+		disabled = false,
+		name,
 		size = "medium",
 		value = $bindable(),
 		variant = "default",
@@ -50,17 +54,31 @@
 		};
 	});
 
+	let inputProps = $derived({
+		disabled,
+		name,
+		value,
+	});
+
 	let styles = $derived.by(() => {
 		if (variant === "tabs") {
-			return toggleGroupTabVariants();
+			return toggleGroupTabVariants({ disabled });
 		}
 
-		return toggleGroupVariants({ appearance, size, variant });
+		return toggleGroupVariants({ appearance, disabled, size, variant });
 	});
 </script>
 
 <XScroll class={styles.base({ class: className })}>
-	<div bind:this={toggleGroupEl} class={styles.tabs()} role="tablist" {...rest}>
+	<div
+		bind:this={toggleGroupEl}
+		class={styles.tabs()}
+		inert={disabled}
+		role="tablist"
+		{...rest}>
+		{#if name}
+			<input type="hidden" {...inputProps} />
+		{/if}
 		{@render children?.()}
 	</div>
 </XScroll>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts

@@ -16,6 +16,14 @@ declare const ToggleGroup: import("svelte").Component<{
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * Whether the toggle group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The name of the toggle group, used for form submission
+     */
+    name?: string;
     /**
      * The size variant of the component
      */
@@ -42,6 +50,14 @@ type Props = {
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * Whether the toggle group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The name of the toggle group, used for form submission
+     */
+    name?: string;
     /**
      * The size variant of the component
      */

package/dist/components/molecules/toggleGroup/ToggleGroupItem.svelte

@@ -45,15 +45,17 @@
 			store.update(localeValue);
 		}}
 		type="button">
-		<span class={stylesByVariant.span()}>
+		<div class={stylesByVariant.content()}>
 			{#if icon}
 				<Icon
 					class={stylesByVariant.icon()}
 					name={icon}
 					size={variant === "tabs" || size === "small" ? 16 : 24} />
 			{/if}
-			{@render children?.()}
-		</span>
+			<span class={stylesByVariant.span()}>
+				{@render children?.()}
+			</span>
+		</div>
 		{#if isActive}
 			<div
 				class={stylesByVariant.trigger({ appearance })}

package/dist/components/molecules/toggleGroup/toggleGroup.variants.d.ts

@@ -3,6 +3,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -19,6 +24,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -35,6 +45,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -48,26 +63,30 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
     tabs: string;
 }, undefined, unknown, unknown, undefined>>;
 export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            tabs?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            tabs?: import("tailwind-variants").ClassValue;
+    disabled: {
+        true: {
+            base: string;
         };
     };
 }, {
     base: string;
     tabs: string;
-}, undefined, any, {
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     tabs: string;
-}, import("tailwind-variants").TVReturnType<any, {
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     tabs: string;
 }, undefined, unknown, unknown, undefined>>;

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

@@ -10,6 +10,11 @@ const toggleGroupVariants = tv({
 			default: "text-neutral-100 dark:text-neutral-900",
 			raised: "text-neutral-300 dark:text-neutral-700",
 		},
+		disabled: {
+			true: {
+				base: "opacity-40",
+			},
+		},
 		size: {
 			small: {
 				tabs: "h-9 p-1",
@@ -26,6 +31,13 @@ const toggleGroupTabVariants = tv({
 		base: "",
 		tabs: "flex h-9 gap-4 border-b border-neutral-300 dark:border-neutral-700",
 	},
+	variants: {
+		disabled: {
+			true: {
+				base: "opacity-40",
+			},
+		},
+	},
 });
 
 export { toggleGroupVariants, toggleGroupTabVariants };