@websline/system-components 0.0.3 → 0.0.5

package/dist/components/atoms/actions/closeButton/CloseButton.svelte

@@ -6,7 +6,7 @@
 	 * @typedef {Object} Props
 	 * @property {boolean} [autoClose=false] Whether the button should automatically close after a duration
 	 * @property {number} [durationInSeconds=6] Duration in seconds before auto-close triggers
-	 * @property {() => void} onClose Function to call when the button is clicked or auto-closed
+	 * @property {(event) => void} [onClose] Function to call when the button is clicked or auto-closed
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {"circle" | "square"} [shape="round"] Button shape
 	 */
@@ -16,6 +16,7 @@
 		autoClose = false,
 		class: className = "",
 		durationInSeconds = 6,
+		onclick,
 		onClose,
 		shape = "square",
 		...rest
@@ -48,12 +49,14 @@
 
 	let calculatedDurationInSeconds = $derived(durationInSeconds * 1000);
 
-	const handleClose = () => {
-		if (onClose) onClose();
+	const handleClose = (e) => {
+		onClose?.(e);
+		if (e.defaultPrevented) return;
+		onclick?.(e);
 	};
 
-	const handleAnimationComplete = () => {
-		if (autoClose) onClose();
+	const handleAnimationComplete = (e) => {
+		if (autoClose) handleClose(e);
 	};
 </script>
 

package/dist/components/atoms/actions/closeButton/CloseButton.svelte.d.ts

@@ -15,7 +15,7 @@ declare const CloseButton: import("svelte").Component<{
     /**
      * Function to call when the button is clicked or auto-closed
      */
-    onClose: () => void;
+    onClose?: (event: any) => void;
     /**
      * Additional CSS classes to apply to the component
      */
@@ -37,7 +37,7 @@ type Props = {
     /**
      * Function to call when the button is clicked or auto-closed
      */
-    onClose: () => void;
+    onClose?: (event: any) => void;
     /**
      * Additional CSS classes to apply to the component
      */

package/dist/components/atoms/feedback/progressBar/ProgressBar.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { generateId } from "../../../../utils";
+	import { progressBarVariants } from "./progressBar.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {number} [currentStep=1] The current step in the progress
+	 * @property {string} [label=""] Optional label to display alongside the progress bar
+	 * @property {number} [totalSteps] The total number of steps in the progress
+	 */
+
+	/** @type {Props} */
+	let {
+		class: className = "",
+		currentStep = 1,
+		label = "",
+		totalSteps,
+		...rest
+	} = $props();
+
+	let labelId = generateId();
+	let styles = $derived(progressBarVariants());
+
+	// || 0 in case currentStep or totalSteps result in NaN
+	let steps = $derived({
+		current: Math.max(0, currentStep) || 0,
+		total: Math.max(0, totalSteps, currentStep) || 0,
+	});
+</script>
+
+<div
+	aria-valuemax={steps.total}
+	aria-valuemin="0"
+	aria-valuenow={steps.current}
+	aria-labelledby={!label || rest["aria-label"] ? undefined : labelId}
+	role="progressbar"
+	class={styles.base({ class: className })}
+	{...rest}>
+	{#if label}
+		<span class={styles.label()} id={labelId}
+			>{label} {steps.current}/{steps.total}</span>
+	{/if}
+	<span
+		class={styles.bar()}
+		style:--progress={`${(steps.current / steps.total) * 100}%`}></span>
+</div>

package/dist/components/atoms/feedback/progressBar/ProgressBar.svelte.d.ts

@@ -0,0 +1,41 @@
+export default ProgressBar;
+type ProgressBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ProgressBar: import("svelte").Component<{
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The current step in the progress
+     */
+    currentStep?: number;
+    /**
+     * Optional label to display alongside the progress bar
+     */
+    label?: string;
+    /**
+     * The total number of steps in the progress
+     */
+    totalSteps?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * The current step in the progress
+     */
+    currentStep?: number;
+    /**
+     * Optional label to display alongside the progress bar
+     */
+    label?: string;
+    /**
+     * The total number of steps in the progress
+     */
+    totalSteps?: number;
+};

package/dist/components/atoms/feedback/progressBar/progressBar.variants.d.ts

@@ -0,0 +1,29 @@
+export const progressBarVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+        };
+    };
+}, {
+    bar: string;
+    base: string;
+    label: string;
+}, undefined, any, {
+    bar: string;
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<any, {
+    bar: string;
+    base: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,11 @@
+import { tv } from "tailwind-variants";
+
+const progressBarVariants = tv({
+	slots: {
+		bar: "h-1 w-full rounded-sm bg-neutral-100 after:block after:h-full after:w-[var(--progress)] after:rounded-sm after:bg-neutral-900 after:transition-[width] after:duration-300 after:ease-in-out dark:bg-neutral-900 dark:after:bg-neutral-100",
+		base: "flex items-center gap-4 p-2",
+		label: "body-small text-nowrap text-neutral-500",
+	},
+});
+
+export { progressBarVariants };

package/dist/components/molecules/formActions/formActions.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { formActionsVariants } from "./formActions.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [customLayout=false] If true, the default layout is disabled
+	 * @property {boolean} [fullWidth=false] If true, the form actions will take the full width of its container
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		customLayout = false,
+		fullWidth = false,
+	} = $props();
+</script>
+
+<div
+	class={formActionsVariants({ class: className, customLayout, fullWidth })}
+	data-form-actions>
+	{@render children?.()}
+</div>

package/dist/components/molecules/formActions/formActions.svelte.d.ts

@@ -0,0 +1,41 @@
+export default FormActions;
+type FormActions = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FormActions: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * If true, the default layout is disabled
+     */
+    customLayout?: boolean;
+    /**
+     * If true, the form actions will take the full width of its container
+     */
+    fullWidth?: boolean;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * If true, the default layout is disabled
+     */
+    customLayout?: boolean;
+    /**
+     * If true, the form actions will take the full width of its container
+     */
+    fullWidth?: boolean;
+};

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

@@ -0,0 +1,22 @@
+export const formActionsVariants: import("tailwind-variants").TVReturnType<{
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "flex items-center justify-end gap-2", {
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    customLayout: {
+        false: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, "flex items-center justify-end gap-2", unknown, unknown, undefined>>;

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

@@ -0,0 +1,16 @@
+import { tv } from "tailwind-variants";
+
+const formActionsVariants = tv({
+	base: "flex items-center justify-end gap-2",
+	variants: {
+		customLayout: {
+			false:
+				"[&:has(>button:nth-of-type(3):last-of-type)>button:first-of-type]:mr-auto",
+		},
+		fullWidth: {
+			true: "[&>*]:w-full [&>*]:justify-center",
+		},
+	},
+});
+
+export { formActionsVariants };

package/dist/components/{atoms/form → molecules}/formField/FormField.svelte

@@ -1,12 +1,12 @@
 <script>
 	import { setContext } from "svelte";
 	import { formFieldVariants } from "./formField.variants.js";
-	import { HelperText, Label } from "../../../../index.js";
+	import { HelperText, Label } from "../../../index.js";
 
 	/**
 	 * @typedef {Object} Props
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
-	 * @property {string} [class=""] Additional CSS classes for the form field
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [error=false] Whether the form field has an error
 	 * @property {string} [errorText=""] The error text for the form field
 	 * @property {string} [helperText=""] The helper text for the form field

package/dist/components/{atoms/form → molecules}/formField/FormField.svelte.d.ts

@@ -9,7 +9,7 @@ declare const FormField: import("svelte").Component<{
      */
     children?: import("svelte").Snippet;
     /**
-     * Additional CSS classes for the form field
+     * Additional CSS classes to apply to the component
      */
     class?: string;
     /**
@@ -47,7 +47,7 @@ type Props = {
      */
     children?: import("svelte").Snippet;
     /**
-     * Additional CSS classes for the form field
+     * Additional CSS classes to apply to the component
      */
     class?: string;
     /**

package/dist/components/molecules/formLayout/FormLayout.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { formLayoutVariants } from "./formLayout.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {0|1|2|3|4|6|8} [gap=2] Gap between form elements (in Tailwind spacing scale)
+	 */
+
+	/** @type {Props} */
+	let { children, class: className, gap = 2 } = $props();
+</script>
+
+<div class={formLayoutVariants({ class: className, gap })}>
+	{@render children?.()}
+</div>

package/dist/components/molecules/formLayout/FormLayout.svelte.d.ts

@@ -0,0 +1,33 @@
+export default FormLayout;
+type FormLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const FormLayout: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Gap between form elements (in Tailwind spacing scale)
+     */
+    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Gap between form elements (in Tailwind spacing scale)
+     */
+    gap?: 0 | 1 | 2 | 3 | 4 | 6 | 8;
+};

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

@@ -0,0 +1,31 @@
+export const formLayoutVariants: import("tailwind-variants").TVReturnType<{
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, "grid gap-2 [&>[data-form-actions]]:mt-4", {
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    gap: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+    };
+}, undefined, "grid gap-2 [&>[data-form-actions]]:mt-4", unknown, unknown, undefined>>;

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

@@ -0,0 +1,18 @@
+import { tv } from "tailwind-variants";
+
+const formLayoutVariants = tv({
+	base: "grid gap-2 [&>[data-form-actions]]:mt-4",
+	variants: {
+		gap: {
+			0: "gap-0",
+			1: "gap-1",
+			2: "gap-2",
+			3: "gap-3",
+			4: "gap-4",
+			6: "gap-6",
+			8: "gap-8",
+		},
+	},
+});
+
+export { formLayoutVariants };

package/dist/components/organisms/dialog/Dialog.svelte

@@ -0,0 +1,17 @@
+<script>
+	import { Dialog } from "bits-ui";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {(open: boolean) => void} [onOpenChange] Callback fired when the open state of the dialog changes
+	 * @property {boolean} [open=false] Wether this dialog is open or not, bound to the component
+	 */
+
+	/** @type {Props} */
+	let { children, onOpenChange, open = $bindable(false), ...rest } = $props();
+</script>
+
+<Dialog.Root bind:open {onOpenChange} {...rest}>
+	{@render children?.()}
+</Dialog.Root>

package/dist/components/organisms/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,34 @@
+export default Dialog;
+type Dialog = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Dialog: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Callback fired when the open state of the dialog changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Wether this dialog is open or not, bound to the component
+     */
+    open?: boolean;
+}, {}, "open">;
+import { Dialog } from "bits-ui";
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Callback fired when the open state of the dialog changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Wether this dialog is open or not, bound to the component
+     */
+    open?: boolean;
+};

package/dist/components/organisms/dialog/DialogAction.svelte

@@ -0,0 +1,72 @@
+<script>
+	import { Dialog } from "bits-ui";
+	import { Button } from "../../../index.js";
+
+	/**
+	 * Defines the semantic role of the button within a dialog.
+	 *
+	 * - "cta": The primary call-to-action. Represents the main decision the dialog is asking for.
+	 *   This can be constructive (e.g. "Save") or destructive (e.g. "Delete").
+	 *   There should be only one CTA per dialog.
+	 *
+	 * - "secondary": An alternative but relevant option besides the main action.
+	 *   Example: "Don't save" in a save confirmation dialog.
+	 *   Use only when the dialog provides more than two choices.
+	 *
+	 * - "dismiss": A cancel/close action that simply exits the dialog without
+	 *   committing to any of the main or secondary actions. Typically labeled
+	 *   "Cancel" or "Close". Should always be visually de-emphasized.
+	 *
+	 * Default: "cta"
+	 */
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"cta" | "secondary" | "dismiss"} [role="cta"] Semantic role of the button within a dialog
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className = "",
+		color = "secondary",
+		role = "cta",
+		...rest
+	} = $props();
+
+	let buttonProps = $derived.by(
+		() =>
+			({
+				cta: {
+					color,
+					tabIndex: 3,
+					variant: "filled",
+				},
+				secondary: {
+					tabIndex: 2,
+					variant: "outlined",
+				},
+				dismiss: {
+					tabIndex: 1,
+					variant: "text",
+				},
+			})[role] || {
+				variant: "filled",
+			},
+	);
+</script>
+
+<Dialog.Close
+	class={className}
+	color="secondary"
+	data-role={role}
+	size="large"
+	{...rest}>
+	{#snippet child({ props })}
+		<Button {...props} {...buttonProps}>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</Dialog.Close>

package/dist/components/organisms/dialog/DialogAction.svelte.d.ts

@@ -0,0 +1,33 @@
+export default DialogAction;
+type DialogAction = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogAction: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Semantic role of the button within a dialog
+     */
+    role?: "cta" | "secondary" | "dismiss";
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Semantic role of the button within a dialog
+     */
+    role?: "cta" | "secondary" | "dismiss";
+};

package/dist/components/organisms/dialog/DialogActions.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { FormActions } from "../../../index.js";
+	import { dialogVariants } from "./dialog.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "" } = $props();
+
+	let styles = $derived(dialogVariants());
+</script>
+
+<FormActions class={styles.formActions({ class: className })} customLayout>
+	{@render children?.()}
+</FormActions>

package/dist/components/organisms/dialog/DialogActions.svelte.d.ts

@@ -0,0 +1,25 @@
+export default DialogActions;
+type DialogActions = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const DialogActions: import("svelte").Component<{
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+}, {}, "">;
+type Props = {
+    /**
+     * Children content – can be text, HTML, or other Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+};

package/dist/components/organisms/dialog/DialogBody.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { dialogVariants } from "./dialog.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 */
+
+	/** @type {Props} */
+	let { children, class: className = "", ...rest } = $props();
+
+	let styles = $derived(dialogVariants());
+</script>
+
+<div class={styles.body({ class: className })} {...rest}>
+	{@render children?.()}
+</div>