@websline/system-components 0.0.4 → 0.0.6

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/atoms/icon/Icon.svelte

@@ -18,6 +18,7 @@
 		size = 24,
 		strokeWidth = 1.5,
 		title = "",
+		...rest
 	} = $props();
 
 	let Comp = $derived(registry[name]);
@@ -38,7 +39,8 @@
 		height={wh}
 		role={title ? "img" : undefined}
 		{strokeWidth}
-		width={wh} />
+		width={wh}
+		{...rest} />
 {/if}
 
 <style>

package/dist/components/atoms/icon/Icon.svelte.d.ts

@@ -10,7 +10,7 @@ declare const Icon: import("svelte").Component<{
     size?: number;
     strokeWidth?: number;
     title?: string;
-}, {}, "">;
+} & Record<string, any>, {}, "">;
 type $$ComponentProps = {
     class?: string;
     color?: string;
@@ -18,4 +18,4 @@ type $$ComponentProps = {
     size?: number;
     strokeWidth?: number;
     title?: string;
-};
+} & Record<string, any>;

package/dist/components/atoms/icon/components/Attach.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 20 20"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M10.037 3.48299L3.63626 9.9625C2.12125 11.4962 2.12125 13.9827 3.63626 15.5164C5.15126 17.05 7.60758 17.05 9.12258 15.5164L16.7425 7.80265C17.7525 6.78023 17.7525 5.12253 16.7425 4.10007C15.7325 3.07765 14.095 3.07765 13.0849 4.10007L5.46506 11.8138C4.96004 12.325 4.96004 13.1539 5.46506 13.665C5.97003 14.1763 6.78881 14.1763 7.29382 13.665L13.6945 7.18556"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Attach.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Attach;
+type Attach = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Attach: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Block.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M22 7L12 2L2 7M22 7V17L12 22M22 7L12 12M2 7V17L12 22M2 7L12 12M12 22V12M17 4.5L7 9.5"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Block.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Block;
+type Block = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Block: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Cogs.svelte

@@ -0,0 +1,31 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 20 20"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M7.6176 17.5001C6.22131 17.0892 4.97843 16.3264 3.99429 15.3157C4.36143 14.8857 4.58268 14.33 4.58268 13.7233C4.58268 12.3587 3.46339 11.2524 2.08268 11.2524C1.99916 11.2524 1.91659 11.2565 1.83518 11.2644C1.72426 10.7284 1.66602 10.1736 1.66602 9.60519C1.66602 8.74426 1.79967 7.91418 2.04759 7.13409C2.05927 7.13425 2.07097 7.13433 2.08268 7.13433C3.46339 7.13433 4.58268 6.02809 4.58268 4.66347C4.58268 4.27172 4.49043 3.90129 4.32627 3.57218C5.28997 2.68654 6.46622 2.02374 7.77106 1.66675C8.18452 2.46774 9.02714 3.01625 9.99935 3.01625C10.9716 3.01625 11.8142 2.46774 12.2276 1.66675C13.5325 2.02374 14.7087 2.68654 15.6724 3.57218C15.5083 3.90129 15.416 4.27172 15.416 4.66347C15.416 6.02809 16.5353 7.13433 17.916 7.13433C17.9277 7.13433 17.9394 7.13425 17.9511 7.13409C18.199 7.91418 18.3327 8.74426 18.3327 9.60519C18.3327 10.1736 18.2744 10.7284 18.1635 11.2644C18.0821 11.2565 17.9996 11.2524 17.916 11.2524C16.5353 11.2524 15.416 12.3587 15.416 13.7233C15.416 14.33 15.6373 14.8857 16.0044 15.3157C15.0203 16.3264 13.7774 17.0892 12.3811 17.5001C12.0588 16.5038 11.1143 15.7823 9.99935 15.7823C8.88435 15.7823 7.93985 16.5038 7.6176 17.5001Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+	<path
+		d="M9.99935 12.4878C11.6102 12.4878 12.916 11.1972 12.916 9.60515C12.916 8.01309 11.6102 6.72248 9.99935 6.72248C8.38852 6.72248 7.08268 8.01309 7.08268 9.60515C7.08268 11.1972 8.38852 12.4878 9.99935 12.4878Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Cogs.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Cogs;
+type Cogs = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Cogs: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Controlling.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M3 3V21H21M7 17L11 9L16 13.5L21 3"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Controlling.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Controlling;
+type Controlling = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Controlling: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Dashboard.svelte

@@ -0,0 +1,41 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M9 3H4C3.44771 3 3 3.44771 3 4V9C3 9.5523 3.44771 10 4 10H9C9.5523 10 10 9.5523 10 9V4C10 3.44771 9.5523 3 9 3Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+	<path
+		d="M9 14H4C3.44771 14 3 14.4477 3 15V20C3 20.5523 3.44771 21 4 21H9C9.5523 21 10 20.5523 10 20V15C10 14.4477 9.5523 14 9 14Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+	<path
+		d="M20 3H15C14.4477 3 14 3.44771 14 4V9C14 9.5523 14.4477 10 15 10H20C20.5523 10 21 9.5523 21 9V4C21 3.44771 20.5523 3 20 3Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+	<path
+		d="M20 14H15C14.4477 14 14 14.4477 14 15V20C14 20.5523 14.4477 21 15 21H20C20.5523 21 21 20.5523 21 20V15C21 14.4477 20.5523 14 20 14Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Dashboard.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Dashboard;
+type Dashboard = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Dashboard: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Database.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M19 5.5V9.5M19 5.5C19 6.8807 15.6421 8 11.5 8C7.35785 8 4 6.8807 4 5.5M19 5.5C19 4.11929 15.6421 3 11.5 3C7.35785 3 4 4.11929 4 5.5M19 9.5V17.5C19 19 16 20 11.5 20C7 20 4 18.8807 4 17.5V13.5M19 9.5C19 11 15.6421 12 11.5 12C7.35785 12 4 10.8807 4 9.5M4 13.5V9.5M4 13.5C4 14.8807 7.35785 16 11.5 16C15.6421 16 19 15 19 13.5M4 9.5V5.5"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

package/dist/components/atoms/icon/components/Database.svelte.d.ts

@@ -0,0 +1,41 @@
+export default Database;
+type Database = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Database: import("svelte").Component<{
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+}, {}, "">;
+type Props = {
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon height
+     */
+    height?: number;
+    /**
+     * Icon StrokeWidth
+     */
+    strokeWidth?: number;
+    /**
+     * Icon width
+     */
+    width?: number;
+};

package/dist/components/atoms/icon/components/Dragger.svelte

@@ -0,0 +1,27 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [strokeWidth=24] Icon StrokeWidth
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, strokeWidth, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 8 14"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<circle cx="1.5" cy="2" r={strokeWidth} fill={color} />
+	<circle cx="6.5" cy="2" r={strokeWidth} fill={color} />
+	<circle cx="1.5" cy="7" r={strokeWidth} fill={color} />
+	<circle cx="6.5" cy="7" r={strokeWidth} fill={color} />
+	<circle cx="1.5" cy="12" r={strokeWidth} fill={color} />
+	<circle cx="6.5" cy="12" r={strokeWidth} fill={color} />
+</svg>