@websline/system-components 1.3.1 → 1.3.3

package/dist/components/atoms/actions/iconButton/IconButton.svelte

@@ -6,7 +6,7 @@
 	 * @typedef {Object} Props
 	 * @property {string} [as="button"] The HTML element to use for the button
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {"primary" | "secondary" | "success" | "danger"} [color="primary"] Button color
+	 * @property {"default" | "primary" | "secondary" | "success" | "danger" | "transparent"} [color="default"] Button color
 	 * @property {boolean} [disabled=false] Whether the button is disabled
 	 * @property {boolean} [loading=false] Whether the button is in a loading state, for example after a form submission
 	 * @property {string} [icon=""] Icon name
@@ -14,14 +14,14 @@
 	 * @property {"circle" | "square"} [shape="round"] Button shape
 	 * @property {"small" | "medium" | "large"} [size="medium"] Button size
 	 * @property {string} [type="button"] Button type, e.g. "button", "submit", "reset"
-	 * @property {"filled" | "outlined" | "transparent"} [variant="filled"] Button style
+	 * @property {"filled" | "outlined"} [variant="filled"] Button style
 	 */
 
 	/** @type {Props} */
 	let {
 		as = "button",
 		class: className = "",
-		color = "primary",
+		color = "default",
 		disabled = false,
 		icon = "",
 		iconSize,
@@ -66,6 +66,6 @@
 	{#if loading}
 		<Spinner size="small" />
 	{:else}
-		<Icon name={icon} size={iconSize > 0 ? iconSize : (size === "large" ? 24 : 16)} />
+		<Icon name={icon} size={iconSize > 0 ? iconSize : size === "large" ? 24 : 16} />
 	{/if}
 </svelte:element>

package/dist/components/atoms/actions/iconButton/IconButton.svelte.d.ts

@@ -15,7 +15,7 @@ declare const IconButton: import("svelte").Component<{
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "success" | "danger";
+    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
     /**
      * Whether the button is disabled
      */
@@ -47,7 +47,7 @@ declare const IconButton: import("svelte").Component<{
     /**
      * Button style
      */
-    variant?: "filled" | "outlined" | "transparent";
+    variant?: "filled" | "outlined";
 }, {}, "">;
 type Props = {
     /**
@@ -61,7 +61,7 @@ type Props = {
     /**
      * Button color
      */
-    color?: "primary" | "secondary" | "success" | "danger";
+    color?: "default" | "primary" | "secondary" | "success" | "danger" | "transparent";
     /**
      * Whether the button is disabled
      */
@@ -93,5 +93,5 @@ type Props = {
     /**
      * Button style
      */
-    variant?: "filled" | "outlined" | "transparent";
+    variant?: "filled" | "outlined";
 };

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

@@ -17,7 +17,6 @@ export const iconButtonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: string;
         outlined: string;
-        transparent: string;
     };
 }, undefined, "inline-flex cursor-pointer transition duration-200 select-none", {
     disabled: {
@@ -38,7 +37,6 @@ export const iconButtonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: string;
         outlined: string;
-        transparent: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     disabled: {
@@ -59,6 +57,5 @@ export const iconButtonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         filled: string;
         outlined: string;
-        transparent: string;
     };
 }, undefined, "inline-flex cursor-pointer transition duration-200 select-none", unknown, unknown, undefined>>;

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

@@ -21,10 +21,21 @@ const iconButtonVariants = tv({
 		variant: {
 			filled: "border border-transparent",
 			outlined: "border",
-			transparent: "border border-transparent",
 		},
 	},
 	compoundVariants: [
+		{
+			color: "default",
+			variant: "filled",
+			class:
+				"bg-neutral-100 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700",
+		},
+		{
+			color: "default",
+			variant: "outlined",
+			class:
+				"text-neutral-900 hover:border-neutral-300 hover:bg-neutral-300 dark:border-white dark:text-white dark:hover:border-neutral-700 dark:hover:bg-neutral-700",
+		},
 		{
 			color: "primary",
 			variant: "filled",
@@ -47,7 +58,7 @@ const iconButtonVariants = tv({
 			color: "secondary",
 			variant: "outlined",
 			class:
-				"text-neutral-900 hover:border-neutral-900 hover:bg-neutral-900 hover:text-white dark:border-white dark:text-white dark:hover:border-neutral-200 dark:hover:bg-neutral-200 dark:hover:text-inherit",
+				"text-neutral-900 hover:border-neutral-900 hover:bg-neutral-900 hover:text-white dark:border-white dark:text-white dark:hover:border-neutral-200 dark:hover:bg-neutral-200 dark:hover:text-neutral-900",
 		},
 		{
 			color: "success",
@@ -74,16 +85,9 @@ const iconButtonVariants = tv({
 				"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",
 		},
 		{
-			shape: "square",
-			variant: "transparent",
+			color: "transparent",
 			class:
-				"bg-transparent hover:bg-neutral-300 dark:text-white dark:hover:bg-neutral-700",
-		},
-		{
-			shape: "square",
-			variant: "filled",
-			class:
-				"bg-neutral-100 text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-900 dark:text-white dark:hover:bg-neutral-700",
+				"border-transparent bg-transparent hover:bg-neutral-300 dark:text-white dark:hover:bg-neutral-700",
 		},
 	],
 });

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

@@ -0,0 +1,33 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M8 4.16663C8.18398 4.16663 8.33381 4.31569 8.33398 4.49963C8.33398 4.68372 8.18409 4.83362 8 4.83362C7.81606 4.83344 7.66699 4.68362 7.66699 4.49963C7.66717 4.3158 7.81617 4.1668 8 4.16663Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+	<path
+		d="M8.16634 11.3334V6.66671H7.49967M6.99967 11.3334H9.33301M7.99967 14.6667C9.84061 14.6667 11.5073 13.9205 12.7137 12.7141C13.9201 11.5076 14.6663 9.84097 14.6663 8.00004C14.6663 6.15911 13.9201 4.49244 12.7137 3.28599C11.5073 2.07957 9.84061 1.33337 7.99967 1.33337C6.15874 1.33337 4.49207 2.07957 3.28563 3.28599C2.0792 4.49244 1.33301 6.15911 1.33301 8.00004C1.33301 9.84097 2.0792 11.5076 3.28563 12.7141C4.49207 13.9205 6.15874 14.6667 7.99967 14.6667Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Info.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Info;
+type Info = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Info: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/index.d.ts

@@ -395,6 +395,24 @@ export const registry: {
          */
         width?: number;
     }, {}, "">;
+    info: import("svelte").Component<{
+        /**
+         * Icon color
+         */
+        color?: string;
+        /**
+         * Icon height
+         */
+        height?: number;
+        /**
+         * Icon StrokeWidth
+         */
+        strokeWidth?: number;
+        /**
+         * Icon width
+         */
+        width?: number;
+    }, {}, "">;
     italic: import("svelte").Component<{
         /**
          * Icon color

package/dist/components/atoms/icon/index.js

@@ -20,6 +20,7 @@ import Dragger from "./components/Dragger.svelte";
 import FilePDF from "./components/FilePDF.svelte";
 import Globe from "./components/Globe.svelte";
 import History from "./components/History.svelte";
+import Info from "./components/Info.svelte";
 import Italic from "./components/Italic.svelte";
 import Layout from "./components/Layout.svelte";
 import Link from "./components/Link.svelte";
@@ -64,6 +65,7 @@ export const registry = {
 	"file-pdf": FilePDF,
 	globe: Globe,
 	history: History,
+	info: Info,
 	italic: Italic,
 	layout: Layout,
 	link: Link,

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("bold") ? "default" : "transparent"}
 		icon="bold"
 		onclick={() => editor.chain().focus().toggleBold().run()}
-		shape="square"
-		variant={editor.isActive("bold") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("italic") ? "default" : "transparent"}
 		icon="italic"
 		onclick={() => editor.chain().focus().toggleItalic().run()}
-		shape="square"
-		variant={editor.isActive("italic") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -27,8 +27,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("link") ? "default" : "transparent"}
 		icon="link"
 		onclick={handleOpenLinkModal}
-		shape="square"
-		variant={editor.isActive("link") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("bulletList") ? "default" : "transparent"}
 		icon="listUnordered"
 		onclick={() => editor.chain().focus().toggleBulletList().run()}
-		shape="square"
-		variant={editor.isActive("bulletList") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("orderedList") ? "default" : "transparent"}
 		icon="listOrdered"
 		onclick={() => editor.chain().focus().toggleOrderedList().run()}
-		shape="square"
-		variant={editor.isActive("orderedList") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color="transparent"
 		icon="redo"
 		onclick={() => editor.chain().focus().redo().run()}
-		shape="square"
-		variant="transparent" />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color={editor.isActive("underline") ? "default" : "transparent"}
 		icon="underline"
 		onclick={() => editor.chain().focus().toggleUnderline().run()}
-		shape="square"
-		variant={editor.isActive("underline") ? "filled" : "transparent"} />
+		shape="square" />
 {/if}

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

@@ -6,8 +6,8 @@
 
 {#if editor}
 	<IconButton
+		color="transparent"
 		icon="undo"
 		onclick={() => editor.chain().focus().undo().run()}
-		shape="square"
-		variant="transparent" />
+		shape="square" />
 {/if}

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

@@ -8,7 +8,7 @@ const tagSelectorVariants = tv({
 		item: "h-7.5",
 		searchField: "relative h-7.5 w-30",
 		searchInput:
-			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-8 ui-tag-badge placeholder-current focus:ring-0",
+			"absolute inset-0 appearance-none border-0 bg-transparent pr-1 pl-7 ui-tag-badge placeholder-current focus:ring-0",
 		dropdown:
 			"absolute z-1 w-full max-w-100 overflow-y-auto bg-white p-1 pr-5 shadow-sm dark:border-neutral-700 dark:bg-neutral-800",
 		dropdownCheckmark: "ml-auto shrink-0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "publishConfig": {
     "access": "public"
   },
@@ -62,7 +62,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-storybook": "^10.2.0",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.1.0",
+    "globals": "^17.2.0",
     "playwright": "^1.58.0",
     "postcss-url": "^10.1.3",
     "prettier": "^3.8.1",
@@ -70,7 +70,7 @@
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.17",
     "storybook": "^10.2.0",
-    "svelte": "^5.48.3",
+    "svelte": "^5.48.5",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",