@websline/system-components 1.0.0 → 1.0.2

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

@@ -3,16 +3,20 @@ import Add from "./components/Add.svelte";
 import Attach from "./components/Attach.svelte";
 import Block from "./components/Block.svelte";
 import Bold from "./components/Bold.svelte";
+import Calendar from "./components/Calendar.svelte";
 import Check from "./components/Check.svelte";
+import CheckboxStack from "./components/CheckboxStack.svelte";
 import ChevronDown from "./components/ChevronDown.svelte";
 import Close from "./components/Close.svelte";
 import CloseSmall from "./components/CloseSmall.svelte";
-import Cogs from "./components/Cogs.svelte";
 import Controlling from "./components/Controlling.svelte";
 import Dashboard from "./components/Dashboard.svelte";
 import Database from "./components/Database.svelte";
+import Download from "./components/Download.svelte";
 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 Italic from "./components/Italic.svelte";
 import Layout from "./components/Layout.svelte";
 import Link from "./components/Link.svelte";
@@ -20,6 +24,8 @@ import ListOrdered from "./components/ListOrdered.svelte";
 import ListUnordered from "./components/ListUnordered.svelte";
 import Menu from "./components/Menu.svelte";
 import Notifications from "./components/Notifications.svelte";
+import Out from "./components/Out.svelte";
+import Overflow from "./components/Overflow.svelte";
 import Page from "./components/Page.svelte";
 import Picture from "./components/Picture.svelte";
 import Redo from "./components/Redo.svelte";
@@ -29,6 +35,7 @@ import Settings from "./components/Settings.svelte";
 import Trash from "./components/Trash.svelte";
 import Underline from "./components/Underline.svelte";
 import Undo from "./components/Undo.svelte";
+import Unlink from "./components/Unlink.svelte";
 
 export const registry = {
 	academy: Academy,
@@ -36,16 +43,20 @@ export const registry = {
 	attach: Attach,
 	block: Block,
 	bold: Bold,
+	calendar: Calendar,
 	check: Check,
+	"checkbox-stack": CheckboxStack,
 	chevronDown: ChevronDown,
 	close: Close,
 	closeSmall: CloseSmall,
-	cogs: Cogs,
 	controlling: Controlling,
 	dashboard: Dashboard,
 	database: Database,
+	download: Download,
 	dragger: Dragger,
+	"file-pdf": FilePDF,
 	globe: Globe,
+	history: History,
 	italic: Italic,
 	layout: Layout,
 	link: Link,
@@ -53,6 +64,8 @@ export const registry = {
 	listUnordered: ListUnordered,
 	menu: Menu,
 	notifications: Notifications,
+	out: Out,
+	overflow: Overflow,
 	page: Page,
 	picture: Picture,
 	redo: Redo,
@@ -62,4 +75,5 @@ export const registry = {
 	trash: Trash,
 	underline: Underline,
 	undo: Undo,
+	unlink: Unlink,
 };

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

@@ -5,7 +5,7 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", {
+}, 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", {
     disabled: {
         true: string;
     };
@@ -19,4 +19,4 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
     error: {
         true: string;
     };
-}, undefined, "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white", unknown, unknown, undefined>>;
+}, 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>>;

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

@@ -1,13 +1,13 @@
 import { tv } from "tailwind-variants";
 
 const inputVariants = tv({
-	base: "rounded px-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 h-10 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white",
+	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",
 	variants: {
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
 		},
 		error: {
-			true: "border border-red-500 outline focus:ring-red-500 focus:border-red-500 outline-red-500 text-red-500",
+			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
 		},
 	},
 });

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

@@ -6,7 +6,7 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
         false: {
             option: string;
-            select: string;
+            select: string[];
         };
     };
     error: {
@@ -15,8 +15,8 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    select: string;
-    option: string;
+    select: string[];
+    option: string[];
 }, undefined, {
     disabled: {
         true: {
@@ -25,7 +25,7 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
         false: {
             option: string;
-            select: string;
+            select: string[];
         };
     };
     error: {
@@ -34,8 +34,8 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    select: string;
-    option: string;
+    select: string[];
+    option: string[];
 }, import("tailwind-variants").TVReturnType<{
     disabled: {
         true: {
@@ -44,7 +44,7 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
         false: {
             option: string;
-            select: string;
+            select: string[];
         };
     };
     error: {
@@ -53,6 +53,6 @@ export const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
-    select: string;
-    option: string;
+    select: string[];
+    option: string[];
 }, undefined, unknown, unknown, undefined>>;

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

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

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

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

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

@@ -1,13 +1,13 @@
 import { tv } from "tailwind-variants";
 
 const textareaVariants = tv({
-	base: "rounded p-4 body-default bg-transparent border border-neutral-500 text-neutral-800 placeholder-neutral-500 w-full outline-transparent focus:ring-1 focus:ring-blue-500 focus:border-blue-500 hover:border-neutral-800 transition-[border, outline] duration-300 resize-none dark:text-white dark:hover:border-neutral-200 dark:focus:ring-white dark:focus:border-white",
+	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",
 	variants: {
 		disabled: {
 			true: "cursor-not-allowed opacity-50",
 		},
 		error: {
-			true: "border border-red-500 outline focus:ring-red-500 focus:border-red-500 outline-red-500 text-red-500",
+			true: "border border-red-500 text-red-500 outline outline-red-500 focus:border-red-500 focus:ring-red-500",
 		},
 		size: {
 			small: "h-30",

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

@@ -4,7 +4,7 @@ const formFieldVariants = tv({
 	base: "grid gap-2",
 	variants: {
 		layout: {
-			inline: "sm:grid-cols-[minmax(120px,auto)_1fr] items-center",
+			inline: "items-center sm:grid-cols-[minmax(120px,auto)_1fr]",
 		},
 	},
 });

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

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const notificationVariants = tv({
 	slots: {
-		base: "bg-white dark:bg-neutral-900 border-neutral-300 dark:border-neutral-700 border-1 rounded-lg p-2 grid grid-cols-[40px_1fr_24px] gap-2",
+		base: "grid grid-cols-[40px_1fr_24px] gap-2 rounded-lg border-1 border-neutral-300 bg-white p-2 dark:border-neutral-700 dark:bg-neutral-900",
 		close: "col-[3] self-start",
-		icon: "flex h-10 items-center justify-center rounded-sm text-white w-10",
+		icon: "flex h-10 w-10 items-center justify-center rounded-sm text-white",
 		content: "flex flex-col justify-center",
 		message: "body-extra-small text-neutral-500",
 		title: "body-default dark:text-white",

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

@@ -2,8 +2,8 @@ import { tv } from "tailwind-variants";
 
 const colorSwatchVariants = tv({
 	slots: {
-		base: "hover:bg-neutral-300 dark:hover:bg-neutral-700 flex items-center justify-center rounded cursor-pointer gap-1 transition duration-200 select-none cursor-pointer",
-		iconText: "flex items-center justify-center h-4 w-4 rounded",
+		base: "flex cursor-pointer items-center justify-center gap-1 rounded transition duration-200 select-none hover:bg-neutral-300 dark:hover:bg-neutral-700",
+		iconText: "flex h-4 w-4 items-center justify-center rounded",
 		iconArrow: "dark:text-white",
 	},
 	variants: {

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

@@ -18,7 +18,7 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     toolbar: string;
-    field: string;
+    field: string[];
 }, undefined, {
     hideToolbar: {
         true: {
@@ -39,7 +39,7 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     toolbar: string;
-    field: string;
+    field: string[];
 }, import("tailwind-variants").TVReturnType<{
     hideToolbar: {
         true: {
@@ -60,5 +60,5 @@ export const richTextEditorVariants: import("tailwind-variants").TVReturnType<{
 }, {
     base: string;
     toolbar: string;
-    field: string;
+    field: string[];
 }, undefined, unknown, unknown, undefined>>;

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

@@ -4,30 +4,20 @@ const richTextEditorVariants = tv({
 	slots: {
 		base: "body-default text-neutral-800 dark:text-white",
 		toolbar:
-			"flex gap-0.5 px-5 py-2 border-neutral-300 dark:border-neutral-700 border border-b-0 rounded-t-sm pointer",
-		field: `
-			[&>div]:transition-[border]
-			[&>div]:duration-300
-			[&>div]:border
-			[&>div]:border-neutral-300
-			[&>div]:overflow-auto
-			dark:[&>div]:border-neutral-700
-			[&>div]:rounded-b-sm
-			[&>div]:outline-none
-			[&>div]:p-5
-			[&>div]:h-full
-			[&>div>p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]
-			[&>div>p.is-editor-empty:first-child::before]:float-left
-			[&>div>p.is-editor-empty:first-child::before]:h-0
-			[&>div>p.is-editor-empty:first-child::before]:text-neutral-500
-			[&>div>p.is-editor-empty:first-child::before]:pointer-events-none
-			[&>div_a]:underline
-			[&>div_a]:text-blue-500
-			[&>div_ol]:list-decimal
-			[&>div_ol]:pl-4
-			[&>div_ul]:list-disc
-			[&>div_ul]:pl-4
-		`,
+			"pointer flex gap-0.5 rounded-t-sm border border-b-0 border-neutral-300 px-5 py-2 dark:border-neutral-700",
+		field: [
+			"[&>div]:transition-[border] [&>div]:duration-300",
+			"[&>div]:rounded-b-sm [&>div]:border [&>div]:border-neutral-300 [&>div]:outline-none dark:[&>div]:border-neutral-700",
+			"[&>div]:h-full [&>div]:overflow-auto [&>div]:p-5",
+			"[&>div>p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]",
+			"[&>div>p.is-editor-empty:first-child::before]:float-left",
+			"[&>div>p.is-editor-empty:first-child::before]:h-0",
+			"[&>div>p.is-editor-empty:first-child::before]:text-neutral-500",
+			"[&>div>p.is-editor-empty:first-child::before]:pointer-events-none",
+			"[&>div_a]:text-blue-500 [&>div_a]:underline",
+			"[&>div_ol]:list-decimal [&>div_ol]:pl-4",
+			"[&>div_ul]:list-disc [&>div_ul]:pl-4",
+		],
 	},
 	variants: {
 		hideToolbar: {

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

@@ -7,7 +7,7 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         small: string;
         medium: string;
     };
-}, undefined, "flex rounded-sm gap-1", {
+}, undefined, "flex gap-1 rounded-sm", {
     appearance: {
         default: string;
         raised: string;
@@ -25,11 +25,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         small: string;
         medium: string;
     };
-}, undefined, "flex rounded-sm gap-1", unknown, unknown, undefined>>;
+}, undefined, "flex gap-1 rounded-sm", unknown, unknown, undefined>>;
 export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{} | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
         };
     };
-}, undefined, "flex gap-5 h-10 border-b border-b-neutral-500", any, undefined, import("tailwind-variants").TVReturnType<any, undefined, "flex gap-5 h-10 border-b border-b-neutral-500", unknown, unknown, undefined>>;
+}, undefined, "flex h-10 gap-5 border-b border-b-neutral-500", any, undefined, import("tailwind-variants").TVReturnType<any, undefined, "flex h-10 gap-5 border-b border-b-neutral-500", unknown, unknown, undefined>>;

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

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 
 const toggleGroupVariants = tv({
-	base: "flex rounded-sm gap-1",
+	base: "flex gap-1 rounded-sm",
 	variants: {
 		appearance: {
 			default: "bg-neutral-100 dark:bg-neutral-900",
@@ -15,7 +15,7 @@ const toggleGroupVariants = tv({
 });
 
 const toggleGroupTabVariants = tv({
-	base: "flex gap-5 h-10 border-b border-b-neutral-500",
+	base: "flex h-10 gap-5 border-b border-b-neutral-500",
 });
 
 export { toggleGroupVariants, toggleGroupTabVariants };

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

@@ -4,9 +4,9 @@ const toggleGroupItemVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap",
 		button:
-			"button-small w-full h-full cursor-pointer block bg-transparent transition-[background,color] rounded-sm",
+			"block h-full w-full cursor-pointer rounded-sm bg-transparent button-small transition-[background,color]",
 		span: "relative z-2 block",
-		trigger: "absolute inset-0 z-1 bg-white shadow-sm rounded-sm",
+		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
 		isActive: {
@@ -48,11 +48,11 @@ const toggleGroupItemVariants = tv({
 
 const toggleGroupItemTabVariants = tv({
 	slots: {
-		base: "relative h-full w-full whitespace-nowrap px-1",
-		button: "button-default w-full h-full cursor-pointer transition-[color]",
+		base: "relative h-full w-full px-1 whitespace-nowrap",
+		button: "h-full w-full cursor-pointer button-default transition-[color]",
 		span: "block",
 		trigger:
-			"bg-blue-500 h-0.5 w-full absolute -bottom-px left-0 rounded-t-xs dark:bg-blue-400",
+			"absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-blue-500 dark:bg-blue-400",
 	},
 	variants: {
 		isActive: {

package/dist/components/organisms/dialog/dialog.variants.d.ts

@@ -25,7 +25,7 @@ export const dialogVariants: import("tailwind-variants").TVReturnType<{
     overlay: string;
     positioner: string;
     trigger: string;
-    formActions: string;
+    formActions: string[];
 }, undefined, {
     size: {
         sm: {
@@ -53,7 +53,7 @@ export const dialogVariants: import("tailwind-variants").TVReturnType<{
     overlay: string;
     positioner: string;
     trigger: string;
-    formActions: string;
+    formActions: string[];
 }, import("tailwind-variants").TVReturnType<{
     size: {
         sm: {
@@ -81,5 +81,5 @@ export const dialogVariants: import("tailwind-variants").TVReturnType<{
     overlay: string;
     positioner: string;
     trigger: string;
-    formActions: string;
+    formActions: string[];
 }, undefined, unknown, unknown, undefined>>;

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

@@ -9,11 +9,11 @@ const dialogVariants = tv({
 		positioner:
 			"fixed inset-0 z-1 grid items-center justify-items-center overflow-auto",
 		trigger: "cursor-pointer",
-		formActions: `
-      [&>[data-role=dismiss]]:order-1 [&>[data-role=dismiss]]:mr-auto
-      [&>[data-role=secondary]]:order-2
-      [&>[data-role=cta]]:order-3
-    `,
+		formActions: [
+			"[&>[data-role=dismiss]]:order-1 [&>[data-role=dismiss]]:mr-auto",
+			"[&>[data-role=secondary]]:order-2",
+			"[&>[data-role=cta]]:order-3",
+		],
 	},
 	variants: {
 		size: {

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

@@ -4,7 +4,7 @@ const modalVariants = tv({
 	slots: {
 		close: "ml-auto",
 		container:
-			"my-4 w-[calc(100vw-32px)] min-w-xs overflow-hidden rounded-2xl bg-white leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200 grid grid-rows-[auto_1fr] max-h-[calc(100vh-32px)]",
+			"my-4 grid max-h-[calc(100vh-32px)] w-[calc(100vw-32px)] min-w-xs grid-rows-[auto_1fr] overflow-hidden rounded-2xl bg-white leading-[1.486] shadow-sm dark:bg-neutral-800 dark:text-neutral-200",
 		header: "flex items-start border-b border-neutral-300 px-4 py-3",
 		body: "h-full overflow-auto",
 		overlay: "fixed inset-0 bg-black/25",

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

@@ -2,9 +2,9 @@ import { tv } from "tailwind-variants";
 
 const notificationGroupVariants = tv({
 	slots: {
-		bottomLeft: "flex flex-col gap-2 absolute bottom-4 left-4 z-9999 overflow-hidden",
+		bottomLeft: "absolute bottom-4 left-4 z-9999 flex flex-col gap-2 overflow-hidden",
 		bottomRight:
-			"flex flex-col gap-2 absolute bottom-4 right-4 z-9999 overflow-hidden",
+			"absolute right-4 bottom-4 z-9999 flex flex-col gap-2 overflow-hidden",
 	},
 });
 

package/dist/components/organisms/popover/PopoverContent.svelte

@@ -7,9 +7,10 @@
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {"start" | "center" | "end"} [align="center"] The preferred alignment of the anchor to render the floating element against when open. This may change when collisions occur.
 	 * @property {number} [alignOffset=0] The distance in pixels from the anchor to the floating element.
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes for the content
 	 * @property {boolean} [preventScroll=false] When true, prevents the body from scrolling when the content is open. This is useful when you want to use the content as a modal.
 	 * @property {boolean} [portalDisabled=false] Whether the portal is disabled or not. When disabled, the content will be rendered in its original DOM location.
 	 * @property {string} [portalTarget='body'] Where to render the content when it is open. Defaults to the body.
@@ -24,6 +25,8 @@
 		align = "center",
 		alignOffset = 0,
 		children,
+		class: className = "",
+		noPadding = false,
 		preventScroll = false,
 		portalDisabled = false,
 		portalTarget = "body",
@@ -34,7 +37,7 @@
 		...rest
 	} = $props();
 
-	let styles = $derived(popoverVariants());
+	let styles = $derived(popoverVariants({ noPadding }));
 
 	let showHeader = $derived(showClose === true || title !== "");
 </script>
@@ -58,27 +61,28 @@
 	{/if}
 {/snippet}
 
+{#snippet child({ open, props, wrapperProps })}
+	{#if open}
+		<div {...wrapperProps}>
+			<div {...props} in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
+				<div class={styles.body()}>
+					{@render children()}
+				</div>
+				{@render header()}
+			</div>
+		</div>
+	{/if}
+{/snippet}
+
 <Popover.Portal disabled={portalDisabled} to={portalTarget}>
 	<Popover.Content
 		{align}
 		{alignOffset}
-		class={styles.content()}
+		{child}
+		class={styles.content({ class: className })}
 		forceMount
 		{preventScroll}
 		{side}
 		{sideOffset}
-		{...rest}>
-		{#snippet child({ wrapperProps, props, open })}
-			{#if open}
-				<div {...wrapperProps}>
-					<div {...props} in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
-						<div class={styles.body()}>
-							{@render children()}
-						</div>
-						{@render header()}
-					</div>
-				</div>
-			{/if}
-		{/snippet}
-	</Popover.Content>
+		{...rest} />
 </Popover.Portal>