@websline/system-components 1.3.4 → 1.3.5

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 };

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

@@ -13,11 +13,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -36,11 +38,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -59,11 +63,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -80,6 +86,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -95,6 +102,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -110,6 +118,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;

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

@@ -4,15 +4,16 @@ const toggleGroupItemVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap",
 		button:
-			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-button-small transition-[background,color]",
+			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
+		content: "relative z-2 flex items-center justify-center",
 		icon: "shrink-0",
-		span: "relative z-2 flex items-center justify-center gap-2",
+		span: "",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-white",
+				button: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
 				button: "text-neutral-500",
@@ -23,7 +24,8 @@ const toggleGroupItemVariants = tv({
 				button: "px-1",
 			},
 			medium: {
-				button: "px-3",
+				button: "px-2.5",
+				span: "px-2",
 			},
 		},
 	},
@@ -51,8 +53,9 @@ const toggleGroupItemTabVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
 		button: "h-full w-full cursor-pointer ui-button-default transition-[color]",
+		content: "flex items-center justify-center gap-1",
 		icon: "shrink-0",
-		span: "flex items-center justify-center gap-1",
+		span: "",
 		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Radio } from "./components/atoms/radio/Radio.svelte";
 export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Tag } from "./components/atoms/tag/Tag.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as Radio } from "./components/atoms/radio/Radio.svelte";
 export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Tag } from "./components/atoms/tag/Tag.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 

package/package.json

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