@websline/system-components 1.2.4 → 1.2.5

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const buttonVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const closeButtonVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const iconButtonVariants = tv({
 	base: "inline-flex cursor-pointer transition duration-200 select-none",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const avatarVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const badgeVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const checkboxVariants = tv({
 	base: "size-4 cursor-pointer rounded border border-current bg-transparent bg-none text-neutral-900 ring-0 ring-transparent ring-offset-transparent outline-transparent duration-300 after:block after:size-full checked:bg-none checked:after:bg-current focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:text-white",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const chipVariants = tv({
 	base: [

package/dist/components/atoms/colorChip/ColorChip.svelte

@@ -3,6 +3,7 @@
 
 	/**
 	 * @typedef {Object} Props
+	 * @property {boolean} [active=false] Whether the ColorChip is active
 	 * @property {string} [borderColor=""] Border color value (hex, rgb, etc.)
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [clickable=false] Whether the ColorChip is clickable
@@ -13,6 +14,7 @@
 
 	/** @type {Props} */
 	let {
+		active = false,
 		borderColor = "",
 		class: className = "",
 		clickable = false,
@@ -27,7 +29,7 @@
 
 <svelte:element
 	this={as}
-	class={colorChipVariants({ class: className, clickable, shape, size })}
+	class={colorChipVariants({ active, class: className, clickable, shape, size })}
 	style="background-color: {color}; border-color: {borderColor};"
 	{...rest}>
 </svelte:element>

package/dist/components/atoms/colorChip/ColorChip.svelte.d.ts

@@ -4,6 +4,10 @@ type ColorChip = {
     $set?(props: Partial<Props>): void;
 };
 declare const ColorChip: import("svelte").Component<{
+    /**
+     * Whether the ColorChip is active
+     */
+    active?: boolean;
     /**
      * Border color value (hex, rgb, etc.)
      */
@@ -30,6 +34,10 @@ declare const ColorChip: import("svelte").Component<{
     size?: "small" | "medium" | "large";
 }, {}, "">;
 type Props = {
+    /**
+     * Whether the ColorChip is active
+     */
+    active?: boolean;
     /**
      * Border color value (hex, rgb, etc.)
      */

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

@@ -1,4 +1,7 @@
 export const colorChipVariants: import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+    };
     clickable: {
         true: string[];
     };
@@ -12,6 +15,9 @@ export const colorChipVariants: import("tailwind-variants").TVReturnType<{
         large: string;
     };
 }, undefined, "border border-transparent", {
+    active: {
+        true: string;
+    };
     clickable: {
         true: string[];
     };
@@ -25,6 +31,9 @@ export const colorChipVariants: import("tailwind-variants").TVReturnType<{
         large: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
+    active: {
+        true: string;
+    };
     clickable: {
         true: string[];
     };

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

@@ -1,8 +1,11 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const colorChipVariants = tv({
 	base: "border border-transparent",
 	variants: {
+		active: {
+			true: "ring-2 ring-blue-500 ring-offset-1",
+		},
 		clickable: {
 			true: [
 				"cursor-pointer",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const progressBarVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const spinnerVariants = tv({
 	base: "inline-flex animate-[spin_0.7s_linear_infinite]",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const helperTextVariants = tv({
 	base: "ui-caption-helper text-neutral-500",

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

@@ -1,46 +1,3 @@
-/**
- * @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 | {

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

@@ -1,49 +1,4 @@
-import { tv } from "tailwind-variants";
-
-/**
- * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
- */
-const inputBaseVariant = tv({
-	slots: {
-		base: [
-			"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",
-			"border border-neutral-300 dark:border-neutral-700",
-		],
-	},
-	variants: {
-		disabled: {
-			true: { base: "cursor-not-allowed opacity-40" },
-		},
-		error: {
-			true: {
-				base: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
-			},
-		},
-	},
-	compoundVariants: [
-		{
-			disabled: false,
-			error: false,
-			class: {
-				base: [
-					"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",
-				],
-			},
-		},
-		{
-			defaultValue: true,
-			error: false,
-			class: {
-				base: "text-neutral-500 dark:text-neutral-500",
-			},
-		},
-	],
-});
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 
 const inputVariants = tv({
 	extend: inputBaseVariant,
@@ -57,4 +12,4 @@ const inputVariants = tv({
 	},
 });
 
-export { inputBaseVariant, inputVariants };
+export { inputVariants };

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const labelVariants = tv({
 	base: "ui-select-label text-neutral-500",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const radioVariants = tv({
 	base: "m-0.5 h-4 w-4 cursor-pointer appearance-none rounded-full border-0 bg-transparent ring-0 inset-ring-1 ring-transparent inset-ring-neutral-300 ring-offset-transparent outline-transparent duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-300 dark:inset-ring-neutral-600",

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

@@ -1,5 +1,4 @@
-import { tv } from "tailwind-variants";
-import { inputBaseVariant } from "../input/input.variants.js";
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 
 const selectVariants = tv({
 	extend: inputBaseVariant,

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const switchVariants = tv({
 	base: "relative h-4 w-7 cursor-pointer appearance-none rounded-full border-0 bg-neutral-300 ring-inherit ring-offset-transparent outline-transparent transition-[outline] after:absolute after:top-0 after:left-0 after:m-0.25 after:h-3.5 after:w-3.5 after:translate-x-0 after:rounded-full after:bg-neutral-200 after:shadow-toggle after:transition-transform after:duration-300 checked:bg-none focus:outline-1 focus:outline-offset-1 focus:outline-blue-500 dark:bg-neutral-300 dark:after:bg-neutral-300 dark:focus:outline-blue-300",

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

@@ -1,5 +1,4 @@
-import { tv } from "tailwind-variants";
-import { inputBaseVariant } from "../input/input.variants.js";
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 
 const textareaVariants = tv({
 	extend: inputBaseVariant,

package/dist/components/atoms/utils/xScroll/xScroll.variants.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const EDGE_BASE =
 	"pointer-events-none absolute top-0 z-1000 h-full w-6 from-current to-transparent";

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

@@ -1,5 +1,4 @@
-import { tv } from "tailwind-variants";
-import { inputBaseVariant } from "../../atoms/input/input.variants.js";
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 
 const comboBoxVariants = tv({
 	extend: inputBaseVariant,

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const formActionsVariants = tv({
 	base: "flex items-center justify-end gap-2",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const formFieldVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const formLayoutVariants = tv({
 	base: "grid gap-2 [&>[data-form-actions]]:mt-4",

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const notificationVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../../utils/tailwind.js";
 
 const colorSwatchVariants = tv({
 	slots: {

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

@@ -1,8 +1,8 @@
 export default RichTextEditor;
 type RichTextEditor = SvelteComponent<{
+    content?: string;
     size?: string;
     placeholder?: string;
-    content?: string;
     toolbarConfig?: {
         bold: {
             enabled: boolean;
@@ -40,9 +40,9 @@ type RichTextEditor = SvelteComponent<{
     $$bindings?: string;
 };
 declare const RichTextEditor: $$__sveltets_2_IsomorphicComponent<{
+    content?: string;
     size?: string;
     placeholder?: string;
-    content?: string;
     toolbarConfig?: {
         bold: {
             enabled: boolean;

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const richTextEditorVariants = tv({
 	slots: {

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

@@ -56,9 +56,7 @@
 
 <div
 	aria-disabled={disabled}
-	class={styles.base({
-		class: className,
-	})}
+	class={styles.base({ class: className })}
 	onclick={handleClick}
 	{...rest}>
 	{#if type === "radio"}

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

@@ -1,13 +1,13 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const selectorCardVariants = tv({
 	slots: {
 		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",
+		content: "mr-1 w-full leading-0",
+		helperText: "mt-0.5 ui-caption-helper text-neutral-500",
 		input: "shrink-0",
 		label:
-			"mb-0.5 cursor-[inherit] ui-title-2 text-neutral-900 dark:text-neutral-200",
+			"mb-0.5 cursor-[inherit] font-medium text-neutral-900 dark:text-neutral-200",
 	},
 	variants: {
 		disabled: {

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

@@ -1,5 +1,4 @@
-import { tv } from "tailwind-variants";
-import { inputBaseVariant } from "../../atoms/input/input.variants.js";
+import { inputBaseVariant, tv } from "../../../utils/tailwind.js";
 
 const tagSelectorVariants = tv({
 	extend: inputBaseVariant,

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const toggleGroupVariants = tv({
 	slots: {

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

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const toggleGroupItemVariants = tv({
 	slots: {

package/dist/components/organisms/dialog/dialog.variants.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const dialogVariants = tv({
 	slots: {

package/dist/components/organisms/modal/modal.variants.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const modalVariants = tv({
 	slots: {

package/dist/components/organisms/notificationGroup/notificationGroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const notificationGroupVariants = tv({
 	slots: {

package/dist/components/organisms/popover/popover.variants.js

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils/tailwind.js";
 
 const popoverVariants = tv({
 	slots: {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * as utils from "./utils/index.js";
+export { twMergeConfig } from "./utils/tailwind.js";
 export { default as Avatar } from "./components/atoms/avatar/Avatar.svelte";
 export { default as Badge } from "./components/atoms/badge/Badge.svelte";
 export { default as Button } from "./components/atoms/actions/button/Button.svelte";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * as utils from "./utils/index.js";
+export { twMergeConfig } from "./utils/tailwind.js";
 
 /**
  * Atoms

package/dist/utils/tailwind.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @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 tv: import("tailwind-variants").TV;
+export namespace twMergeConfig {
+    let classGroups: {
+        "wl-typo": ({
+            display: ((classPart: any) => classPart is string)[];
+            heading?: undefined;
+            body?: undefined;
+            ui?: undefined;
+        } | {
+            heading: ((classPart: any) => classPart is string)[];
+            display?: undefined;
+            body?: undefined;
+            ui?: undefined;
+        } | {
+            body: ((classPart: any) => classPart is string)[];
+            display?: undefined;
+            heading?: undefined;
+            ui?: undefined;
+        } | {
+            ui: ((classPart: any) => classPart is string)[];
+            display?: undefined;
+            heading?: undefined;
+            body?: undefined;
+        })[];
+    };
+    let conflictingClassGroups: {
+        "wl-typo": string[];
+    };
+}

package/dist/utils/tailwind.js

@@ -0,0 +1,80 @@
+import { createTV } from "tailwind-variants";
+
+const isArbitraryClass = (classPart) => typeof classPart === "string";
+const fontSizeClassGroups = [
+	{ display: [isArbitraryClass] },
+	{ heading: [isArbitraryClass] },
+	{ body: [isArbitraryClass] },
+	{ ui: [isArbitraryClass] },
+];
+
+const mixedTypoClassGroup = "wl-typo";
+const twMergeConfig = {
+	// improve merging, see https://github.com/dcastil/tailwind-merge/blob/v2.2.2/docs/configuration.md
+	classGroups: {
+		// combine custom typo into a class group
+		[mixedTypoClassGroup]: fontSizeClassGroups,
+	},
+	conflictingClassGroups: {
+		// define which properties the given group overwrite only when placed after
+		[mixedTypoClassGroup]: [
+			"letter-spacing",
+			"line-height",
+			"font-size",
+			"font-weight",
+		],
+	},
+};
+
+// common Tailwind Variants utility with custom config
+const tv = createTV({
+	twMerge: true,
+	twMergeConfig,
+});
+
+/**
+ * @property {boolean} [defaultValue] Use this variant if the element doesn't support the placeholder selector
+ */
+const inputBaseVariant = tv({
+	slots: {
+		base: [
+			"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",
+			"border border-neutral-300 dark:border-neutral-700",
+		],
+	},
+	variants: {
+		disabled: {
+			true: { base: "cursor-not-allowed opacity-40" },
+		},
+		error: {
+			true: {
+				base: "border-current text-red-500 ring ring-current dark:border-current dark:text-red-500",
+			},
+		},
+	},
+	compoundVariants: [
+		{
+			disabled: false,
+			error: false,
+			class: {
+				base: [
+					"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",
+				],
+			},
+		},
+		{
+			defaultValue: true,
+			error: false,
+			class: {
+				base: "text-neutral-500 dark:text-neutral-500",
+			},
+		},
+	],
+});
+
+export { inputBaseVariant, tv, twMergeConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "publishConfig": {
     "access": "public"
   },