@websline/system-components 0.0.4 → 0.0.5

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

@@ -0,0 +1,112 @@
+export const modalVariants: import("tailwind-variants").TVReturnType<{
+    noPadding: {
+        true: {
+            body: string;
+        };
+        false: {
+            body: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+}, undefined, {
+    noPadding: {
+        true: {
+            body: string;
+        };
+        false: {
+            body: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    noPadding: {
+        true: {
+            body: string;
+        };
+        false: {
+            body: string;
+        };
+    };
+    size: {
+        sm: {
+            container: string;
+        };
+        md: {
+            container: string;
+        };
+        lg: {
+            container: string;
+        };
+        xl: {
+            container: string;
+        };
+        "2xl": {
+            container: string;
+        };
+        full: {
+            container: string;
+        };
+    };
+}, {
+    close: string;
+    container: string;
+    header: string;
+    body: string;
+    overlay: string;
+    positioner: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,30 @@
+import { tv } from "tailwind-variants";
+
+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)]",
+		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",
+		positioner: "fixed inset-0 z-1 grid items-center justify-items-center",
+		trigger: "cursor-pointer",
+	},
+	variants: {
+		noPadding: {
+			true: { body: "p-0" },
+			false: { body: "p-4" },
+		},
+		size: {
+			sm: { container: "max-w-[480px]" },
+			md: { container: "max-w-[640px]" },
+			lg: { container: "max-w-[960px]" },
+			xl: { container: "max-w-[1280px]" },
+			"2xl": { container: "max-w-[1920px]" },
+			full: { container: "max-w-none" },
+		},
+	},
+});
+
+export { modalVariants };

package/dist/index.d.ts

@@ -5,23 +5,28 @@ export { default as Button } from "./components/atoms/actions/button/Button.svel
 export { default as Chip } from "./components/atoms/chip/Chip.svelte";
 export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
 export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
-export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
-export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
+export { default as HelperText } from "./components/atoms/helperText/HelperText.svelte";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
 export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
-export { default as Input } from "./components/atoms/form/input/Input.svelte";
-export { default as Label } from "./components/atoms/form/label/Label.svelte";
-export { default as Radio } from "./components/atoms/form/radio/Radio.svelte";
-export { default as Select } from "./components/atoms/form/select/Select.svelte";
+export { default as Input } from "./components/atoms/input/Input.svelte";
+export { default as Label } from "./components/atoms/label/Label.svelte";
+export { default as ProgressBar } from "./components/atoms/feedback/progressBar/ProgressBar.svelte";
+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/form/switch/Switch.svelte";
-export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
+export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
+export { default as FormActions } from "./components/molecules/formActions/formActions.svelte";
+export { default as FormField } from "./components/molecules/formField/FormField.svelte";
+export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
 export { default as NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
 export { default as SelectorCard } from "./components/molecules/selectorCard/SelectorCard.svelte";
 export { default as ToggleGroup } from "./components/molecules/toggleGroup/ToggleGroup.svelte";
 export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/ToggleGroupItem.svelte";
+export * as Dialog from "./components/organisms/dialog/index.js";
+export * as Modal from "./components/organisms/modal/index.js";
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
 export * as Popover from "./components/organisms/popover/index.js";

package/dist/index.js

@@ -10,23 +10,26 @@ export { default as Button } from "./components/atoms/actions/button/Button.svel
 export { default as Chip } from "./components/atoms/chip/Chip.svelte";
 export { default as CloseButton } from "./components/atoms/actions/closeButton/CloseButton.svelte";
 export { default as ColorChip } from "./components/atoms/colorChip/ColorChip.svelte";
-export { default as FormField } from "./components/atoms/form/formField/FormField.svelte";
-export { default as HelperText } from "./components/atoms/form/helperText/HelperText.svelte";
+export { default as HelperText } from "./components/atoms/helperText/HelperText.svelte";
 export { default as Icon } from "./components/atoms/icon/Icon.svelte";
 export { default as IconButton } from "./components/atoms/actions/iconButton/IconButton.svelte";
-export { default as Input } from "./components/atoms/form/input/Input.svelte";
-export { default as Label } from "./components/atoms/form/label/Label.svelte";
-export { default as Radio } from "./components/atoms/form/radio/Radio.svelte";
-export { default as Select } from "./components/atoms/form/select/Select.svelte";
+export { default as Input } from "./components/atoms/input/Input.svelte";
+export { default as Label } from "./components/atoms/label/Label.svelte";
+export { default as ProgressBar } from "./components/atoms/feedback/progressBar/ProgressBar.svelte";
+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/form/switch/Switch.svelte";
-export { default as Textarea } from "./components/atoms/form/textarea/Textarea.svelte";
+export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 
 /**
  * Molecules
  */
 
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";
+export { default as FormActions } from "./components/molecules/formActions/formActions.svelte";
+export { default as FormField } from "./components/molecules/formField/FormField.svelte";
+export { default as FormLayout } from "./components/molecules/formLayout/FormLayout.svelte";
 export { default as NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
 export { default as Notification } from "./components/molecules/notification/Notification.svelte";
 export { default as RichTextEditor } from "./components/molecules/richTextEditor/RichTextEditor.svelte";
@@ -38,5 +41,7 @@ export { default as ToggleGroupItem } from "./components/molecules/toggleGroup/T
  * Organisms
  */
 
+export * as Dialog from "./components/organisms/dialog/index.js";
+export * as Modal from "./components/organisms/modal/index.js";
 export { default as NotificationGroup } from "./components/organisms/notificationGroup/NotificationGroup.svelte";
 export * as Popover from "./components/organisms/popover/index.js";

package/dist/utils/a11y.d.ts

@@ -0,0 +1 @@
+export function generateId(): string;

package/dist/utils/a11y.js

@@ -0,0 +1,5 @@
+let idCount = Math.round(Math.random() * 10); // start with a random number between 0-10
+
+const generateId = () => `wlsc-${++idCount}`;
+
+export { generateId };

package/dist/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./a11y.js";
 export * from "./colors.js";
 export * from "./notification.js";
 export * from "./theme.svelte.js";

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+export * from "./a11y.js";
 export * from "./colors.js";
 export * from "./notification.js";
 export * from "./theme.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -53,7 +53,7 @@
     "@storybook/sveltekit": "^9.1.10",
     "@storybook/theming": "^8.6.14",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.46.1",
+    "@sveltejs/kit": "^2.46.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/forms": "^0.5.10",
@@ -72,7 +72,7 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "publint": "^0.3.14",
     "storybook": "^9.1.10",
-    "svelte": "^5.39.9",
+    "svelte": "^5.39.11",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",
     "vite": "^7.1.9",