@websline/system-components 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -5,23 +5,27 @@ 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 NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
+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 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,24 +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 NavigationItem } from "./components/molecules/navigationItem/NavigationItem.svelte";
+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 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";
@@ -38,5 +40,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.6",
   "publishConfig": {
     "access": "public"
   },
@@ -26,16 +26,16 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.6.5",
-    "@tiptap/extension-color": "^3.6.5",
-    "@tiptap/extension-highlight": "^3.6.5",
-    "@tiptap/extension-placeholder": "^3.6.5",
-    "@tiptap/extension-text-align": "^3.6.5",
-    "@tiptap/extension-text-style": "^3.6.5",
-    "@tiptap/pm": "^3.6.5",
-    "@tiptap/starter-kit": "^3.6.5",
-    "bits-ui": "^2.11.4",
-    "dompurify": "^3.2.7",
+    "@tiptap/core": "^3.7.0",
+    "@tiptap/extension-color": "^3.7.0",
+    "@tiptap/extension-highlight": "^3.7.0",
+    "@tiptap/extension-placeholder": "^3.7.0",
+    "@tiptap/extension-text-align": "^3.7.0",
+    "@tiptap/extension-text-style": "^3.7.0",
+    "@tiptap/pm": "^3.7.0",
+    "@tiptap/starter-kit": "^3.7.0",
+    "bits-ui": "^2.11.6",
+    "dompurify": "^3.3.0",
     "tailwind-merge": "3.3.1",
     "tailwind-variants": "^3.1.1",
     "uuid": "^13.0.0"
@@ -53,13 +53,13 @@
     "@storybook/sveltekit": "^9.1.10",
     "@storybook/theming": "^8.6.14",
     "@sveltejs/adapter-auto": "^6.1.1",
-    "@sveltejs/kit": "^2.46.1",
+    "@sveltejs/kit": "^2.47.0",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.14",
-    "@types/node": "^24.7.0",
+    "@types/node": "^24.7.2",
     "@vitest/browser": "^3.2.4",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
@@ -69,13 +69,13 @@
     "playwright": "^1.56.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.0",
     "publint": "^0.3.14",
     "storybook": "^9.1.10",
-    "svelte": "^5.39.9",
+    "svelte": "^5.40.1",
     "tailwindcss": "^4.1.14",
     "typescript": "^5.9.3",
-    "vite": "^7.1.9",
+    "vite": "^7.1.10",
     "vitest": "^3.2.4",
     "vitest-browser-svelte": "^1.1.0"
   },

package/dist/components/molecules/navigationItem/NavigationItem.svelte

@@ -1,80 +0,0 @@
-<script>
-	import { Icon } from "../../../index.js";
-	import { fly } from "svelte/transition";
-	import { cubicOut } from "svelte/easing";
-	import { navigationItemVariants } from "./navigationItem.variants.js";
-
-	/**
-	 * @typedef {Object} Props
-	 * @property {string} [as="a"] The HTML element to use for the navigation item
-	 * @property {string} [class=""] Additional CSS classes to apply to the component
-	 * @property {boolean} [disabled=false] Whether the navigation item is disabled
-	 * @property {boolean} [hasAlert=false] Whether the navigation item has an alert
-	 * @property {string} [href=""] The URL the navigation item links to
-	 * @property {string} [icon=""] The name of the icon to display
-	 * @property {string} [label=""] The label of the navigation item
-	 * @property {boolean} [selected=false] Whether the navigation item is selected
-	 * @property {"_self" | "_blank" | "_parent" | "_top"} [target="_self"] The target attribute for the link
-	 */
-
-	/** @type {Props} */
-	let {
-		as = "a",
-		class: className = "",
-		disabled = false,
-		hasAlert = false,
-		href = "",
-		icon = "",
-		label = "",
-		selected = false,
-		target = "_self",
-		...rest
-	} = $props();
-
-	let styles = $derived(navigationItemVariants({ disabled }));
-	let hideTimer;
-
-	let showLabel = $state(false);
-
-	function enter() {
-		clearTimeout(hideTimer);
-		showLabel = true;
-	}
-
-	function leave() {
-		clearTimeout(hideTimer);
-		hideTimer = setTimeout(() => (showLabel = false), 50);
-	}
-</script>
-
-<svelte:element
-	this={as}
-	class={styles.base({ class: className })}
-	{href}
-	onmouseenter={enter}
-	onmouseleave={leave}
-	{target}
-	{...rest}>
-	{#if icon}
-		<div class={styles.icon({ hasAlert, selected })}>
-			<Icon name={icon} />
-		</div>
-	{/if}
-	{#if label && showLabel}
-		<span
-			class={styles.label()}
-			in:fly={{
-				x: -32,
-				y: 0,
-				duration: 300,
-				delay: 0,
-				easing: cubicOut,
-			}}
-			out:fly={{
-				x: -32,
-				y: 0,
-				duration: 300,
-				delay: 0,
-			}}>{label}</span>
-	{/if}
-</svelte:element>

package/dist/components/molecules/navigationItem/NavigationItem.svelte.d.ts

@@ -1,81 +0,0 @@
-export default NavigationItem;
-type NavigationItem = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<Props>): void;
-};
-declare const NavigationItem: import("svelte").Component<{
-    /**
-     * The HTML element to use for the navigation item
-     */
-    as?: string;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Whether the navigation item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the navigation item has an alert
-     */
-    hasAlert?: boolean;
-    /**
-     * The URL the navigation item links to
-     */
-    href?: string;
-    /**
-     * The name of the icon to display
-     */
-    icon?: string;
-    /**
-     * The label of the navigation item
-     */
-    label?: string;
-    /**
-     * Whether the navigation item is selected
-     */
-    selected?: boolean;
-    /**
-     * The target attribute for the link
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-}, {}, "">;
-type Props = {
-    /**
-     * The HTML element to use for the navigation item
-     */
-    as?: string;
-    /**
-     * Additional CSS classes to apply to the component
-     */
-    class?: string;
-    /**
-     * Whether the navigation item is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the navigation item has an alert
-     */
-    hasAlert?: boolean;
-    /**
-     * The URL the navigation item links to
-     */
-    href?: string;
-    /**
-     * The name of the icon to display
-     */
-    icon?: string;
-    /**
-     * The label of the navigation item
-     */
-    label?: string;
-    /**
-     * Whether the navigation item is selected
-     */
-    selected?: boolean;
-    /**
-     * The target attribute for the link
-     */
-    target?: "_self" | "_blank" | "_parent" | "_top";
-};

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

@@ -1,61 +0,0 @@
-export const navigationItemVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, undefined, {
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: {
-            base: string;
-        };
-    };
-    hasAlert: {
-        true: {
-            icon: string;
-        };
-    };
-    selected: {
-        true: {
-            icon: string;
-        };
-    };
-}, {
-    base: string;
-    icon: string;
-    label: string;
-}, undefined, unknown, unknown, undefined>>;

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

@@ -1,29 +0,0 @@
-import { tv } from "tailwind-variants";
-
-const navigationItemVariants = tv({
-	slots: {
-		base: "inline-flex relative cursor-pointer select-none hover:pr-2 hover:[&>div]:bg-neutral-100 dark:hover:[&>div]:bg-neutral-700 dark:text-white",
-		icon: "bg-white dark:bg-neutral-900 p-2.5 rounded-sm transition duration-200 relative z-2",
-		label:
-			"body-small shadow-[0_2px_16px_0_rgba(0,_0,_0,_0.08)] px-2.5 flex items-center rounded-sm left-12 h-full absolute z-1",
-	},
-	variants: {
-		disabled: {
-			true: {
-				base: "opacity-40 pointer-events-none",
-			},
-		},
-		hasAlert: {
-			true: {
-				icon: "after:content-[''] after:absolute after:top-1 after:right-1 after:w-2 after:h-2 after:rounded-full after:bg-blue-500 dark:after:bg-blue-400",
-			},
-		},
-		selected: {
-			true: {
-				icon: "bg-neutral-300 dark:bg-neutral-700",
-			},
-		},
-	},
-});
-
-export { navigationItemVariants };