@websline/system-components 1.0.4 → 1.0.6

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

@@ -0,0 +1,30 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=1.5] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height = 24, width = 24, strokeWidth = 1.5, ...rest } = $props();
+</script>
+
+<svg 
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+  <path d="M12,14.31v-2c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3M12,22c2.76,0,5.26-1.12,7.07-2.93,1.81-1.81,2.93-4.31,2.93-7.07s-1.12-5.26-2.93-7.07c-1.81-1.81-4.31-2.93-7.07-2.93s-5.26,1.12-7.07,2.93c-1.81,1.81-2.93,4.31-2.93,7.07s1.12,5.26,2.93,7.07c1.81,1.81,4.31,2.93,7.07,2.93Z" fill="none" stroke={color} 
+	stroke-width={strokeWidth}
+	stroke-linecap="round" 
+	stroke-linejoin="round" 
+	/>
+  <path d="M12.05,18.88c1.61,0,1.61-2.5,0-2.5s-1.61,2.5,0,2.5h0Z" fill={color}/>
+</svg>
+
+
+
+

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

@@ -0,0 +1,41 @@
+export default WebslineSupport;
+type WebslineSupport = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const WebslineSupport: 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

@@ -683,4 +683,22 @@ export const registry: {
          */
         width?: number;
     }, {}, "">;
+    webslineSupport: import("svelte").Component<{
+        /**
+         * Icon color
+         */
+        color?: string;
+        /**
+         * Icon height
+         */
+        height?: number;
+        /**
+         * Icon StrokeWidth
+         */
+        strokeWidth?: number;
+        /**
+         * Icon width
+         */
+        width?: number;
+    }, {}, "">;
 };

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

@@ -36,6 +36,7 @@ import Trash from "./components/Trash.svelte";
 import Underline from "./components/Underline.svelte";
 import Undo from "./components/Undo.svelte";
 import Unlink from "./components/Unlink.svelte";
+import WebslineSupport from "./components/WebslineSupport.svelte";
 
 export const registry = {
 	academy: Academy,
@@ -76,4 +77,5 @@ export const registry = {
 	underline: Underline,
 	undo: Undo,
 	unlink: Unlink,
+	webslineSupport: WebslineSupport,
 };

package/dist/components/atoms/input/Input.svelte

@@ -41,8 +41,9 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
@@ -51,10 +52,10 @@
 <input
 	class={inputVariants({
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 		error: localValues.error,
-	})}
-	{disabled}
+	}).base()}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	{placeholder}

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

@@ -1,22 +1,115 @@
+/**
+ * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
+ */
+export const inputBaseVariant: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>;
 export const inputVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    disabled: {
+        true: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+    error: {
+        true: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", {
+}, {
+    base: string[];
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", unknown, unknown, undefined>>;
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

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

@@ -1,15 +1,54 @@
 import { tv } from "tailwind-variants";
 
-const inputVariants = tv({
-	base: "transition-[border, outline] h-10 w-full rounded border border-neutral-500 bg-transparent px-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white",
+/**
+ * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
+ */
+const inputBaseVariant = tv({
+	slots: {
+		base: [
+			"w-full rounded bg-transparent px-4 body-default",
+			"text-neutral-900 placeholder-neutral-500 dark:text-neutral-200",
+			"outline-transparent transition-[border,color,outline] duration-300",
+			"border border-neutral-300 dark:border-neutral-700",
+		],
+	},
 	variants: {
 		disabled: {
-			true: "cursor-not-allowed opacity-50",
+			true: { base: "cursor-not-allowed opacity-40" },
 		},
 		error: {
-			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
+			true: {
+				base: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			disabled: false,
+			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",
+				],
+			},
 		},
+		{
+			defaultValue: true,
+			error: false,
+			class: {
+				base: "text-neutral-500 dark:text-neutral-500",
+			},
+		},
+	],
+});
+
+const inputVariants = tv({
+	extend: inputBaseVariant,
+	slots: {
+		base: "h-10",
 	},
 });
 
-export { inputVariants };
+export { inputBaseVariant, inputVariants };

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

@@ -35,6 +35,7 @@
 		}
 
 		return {
+			disabled,
 			id,
 			required,
 		};
@@ -47,9 +48,9 @@
 	class={radioVariants({
 		checked,
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 	})}
-	{disabled}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	required={localValues.required}

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

@@ -37,22 +37,24 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
 
-	let styles = $derived(selectVariants());
+	let styles = $derived(
+		selectVariants({
+			defaultValue: value === "" || value == null,
+			error: localValues.error,
+		}),
+	);
 </script>
 
 <select
-	class={styles.select({
-		class: className,
-		disabled,
-		error: localValues.error,
-	})}
-	{disabled}
+	class={styles.base({ class: className, disabled: localValues.disabled })}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	required={localValues.required}
 	bind:value
@@ -72,8 +74,7 @@
 
 <style>
 	select {
-		appearance: base-select;
-
+		&,
 		&::picker(select) {
 			appearance: base-select;
 		}

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

@@ -1,58 +1,66 @@
 export const selectVariants: import("tailwind-variants").TVReturnType<{
     disabled: {
-        true: {
+        false: {
+            base: string;
             option: string;
-            select: string;
         };
-        false: {
+        true: {
             option: string;
-            select: string[];
+        };
+    };
+}, {
+    base: string[];
+    option: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
-}, undefined, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
-            option: string;
-            select: string;
+            base: string;
         };
-        false: {
-            option: string;
-            select: string[];
+    };
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
+    base: string[];
 }, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
-            option: string;
-            select: string;
-        };
-        false: {
-            option: string;
-            select: string[];
+            base: string;
         };
     };
     error: {
         true: {
-            select: string;
+            base: string;
         };
     };
 }, {
-    select: string[];
-    option: string[];
-}, undefined, unknown, unknown, undefined>>;
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

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

@@ -1,46 +1,36 @@
 import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../input/input.variants.js";
 
 const selectVariants = tv({
+	extend: inputBaseVariant,
 	slots: {
-		select: [
-			"flex min-h-10 w-full items-center rounded bg-transparent px-4 pr-2 body-default",
-			"text-neutral-900 dark:text-neutral-200",
-			"transition-[border, outline, color] outline-transparent duration-300",
-			"border border-neutral-500 bg-none",
+		base: [
+			"flex min-h-10 items-center bg-none pr-2",
 			"[&::picker(select)]:my-1 [&::picker(select)]:rounded [&::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",
-			"[&::after]:bg-current [&::after]:bg-size-[100%] [&::after]:bg-center [&::after]:bg-no-repeat",
-			"[&::after]:ml-auto [&::after]:size-5 [&::after]:shrink-0 [&::after]:content-['']",
-			"[&:open::after]:rotate-180",
+			"after:bg-current after:bg-size-[100%] after:bg-center after:bg-no-repeat",
+			"after:ml-auto after:size-5 after:shrink-0",
+			"[&:open]:after:rotate-180",
 		],
 		option: [
 			"flex rounded p-2 body-small",
+			"bg-white dark:bg-neutral-800",
+			"bg-linear-to-r to-transparent",
 			"[&::checkmark]:order-1 [&::checkmark]:ml-auto [&::checkmark]:shrink-0",
 			"[&::checkmark]:bg-current [&::checkmark]:bg-size-[100%] [&::checkmark]:bg-center [&::checkmark]:bg-no-repeat",
 			"[&::checkmark]:size-4 [&::checkmark]:content-['']",
-			"bg-white text-neutral-900 dark:bg-neutral-800 dark:text-neutral-200",
-			"bg-linear-to-r to-transparent",
 		],
 	},
 	variants: {
 		disabled: {
-			true: {
-				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
-				select: "opacity-25",
-			},
 			false: {
+				base: "hover:text-blue-500 dark:hover:text-blue-400",
 				option:
-					"cursor-pointer hover:from-neutral-1000/30 dark:hover:from-neutral-50/30",
-				select: [
-					"hover:border-current hover:ring-current focus:border-current focus:ring-current",
-					"hover:text-blue-500 hover:ring-1 focus:text-blue-500 focus:ring-1 dark:hover:text-blue-400 dark:focus:text-blue-400",
-				],
+					"cursor-pointer text-neutral-900 hover:from-black/15 dark:text-neutral-200 dark:hover:from-white/15",
 			},
-		},
-		error: {
 			true: {
-				select: "border-red-500 text-red-500 dark:border-red-500 dark:text-red-500",
+				option: "text-neutral-500 dark:text-neutral-500 [&::checkmark]:hidden",
 			},
 		},
 	},

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

@@ -35,6 +35,7 @@
 		}
 
 		return {
+			disabled,
 			id,
 			required,
 		};
@@ -46,9 +47,9 @@
 	class={switchVariants({
 		checked,
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 	})}
-	{disabled}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	required={localValues.required}

package/dist/components/atoms/textarea/Textarea.svelte

@@ -41,8 +41,9 @@
 		}
 
 		return {
-			id,
+			disabled,
 			error,
+			id,
 			required,
 		};
 	});
@@ -51,11 +52,11 @@
 <textarea
 	class={textareaVariants({
 		class: className,
-		disabled,
+		disabled: localValues.disabled,
 		error: localValues.error,
 		size,
-	})}
-	{disabled}
+	}).base()}
+	disabled={localValues.disabled}
 	id={localValues.id}
 	{name}
 	{placeholder}

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

@@ -1,37 +1,61 @@
 export const textareaVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: string;
-    };
-    error: {
-        true: string;
-    };
     size: {
         small: string;
         medium: string;
         large: string;
     };
-}, undefined, "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", {
+}, {
+    base: string;
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+    error: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+}, undefined, {
     disabled: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
     error: {
-        true: string;
+        true: {
+            base: string;
+        };
     };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
+}, {
+    base: string[];
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+    error: {
+        true: {
+            base: string;
+        };
     };
-}, undefined, "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white", unknown, unknown, undefined>>;
+}, {
+    base: string[];
+}, undefined, unknown, unknown, undefined>>>;

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

@@ -1,14 +1,12 @@
 import { tv } from "tailwind-variants";
+import { inputBaseVariant } from "../input/input.variants.js";
 
 const textareaVariants = tv({
-	base: "transition-[border, outline] w-full resize-none rounded border border-neutral-500 bg-transparent p-4 body-default text-neutral-800 placeholder-neutral-500 outline-transparent duration-300 hover:border-neutral-800 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:text-white dark:hover:border-neutral-200 dark:focus:border-white dark:focus:ring-white",
+	extend: inputBaseVariant,
+	slots: {
+		base: "resize-none p-4",
+	},
 	variants: {
-		disabled: {
-			true: "cursor-not-allowed opacity-50",
-		},
-		error: {
-			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
-		},
 		size: {
 			small: "h-30",
 			medium: "h-42",