@websline/system-components 0.0.5 → 1.0.0

package/dist/components/atoms/actions/button/Button.svelte

@@ -56,7 +56,7 @@
 		buttonVariants({
 			color,
 			class: className,
-			disabled,
+			disabled: tagSpecificProps.disabled,
 			fullWidth,
 			hasIcon,
 			iconPosition,

package/dist/components/atoms/actions/button/button.variants.js

@@ -2,7 +2,7 @@ import { tv } from "tailwind-variants";
 
 const buttonVariants = tv({
 	slots: {
-		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none",
+		base: "inline-flex cursor-pointer items-center rounded align-middle transition duration-200 select-none focus:outline-offset-2",
 		icon: "flex h-lh items-center",
 		spinner: "flex h-lh items-center justify-center",
 	},

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>

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

@@ -0,0 +1,41 @@
+export default Dragger;
+type Dragger = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Dragger: 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/Globe.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="M12 22C17.5229 22 22 17.5229 22 12M12 22C6.47715 22 2 17.5229 2 12M12 22C14.2092 22 16 17.5229 16 12C16 6.47715 14.2092 2 12 2M12 22C9.79085 22 8 17.5229 8 12C8 6.47715 9.79085 2 12 2M22 12C22 6.47715 17.5229 2 12 2M22 12H2M12 2C6.47715 2 2 6.47715 2 12M4.92896 5.07105C6.7386 6.8807 9.2386 8 12 8C14.7615 8 17.2615 6.8807 19.0711 5.07105M19.0711 18.9289C17.2615 17.1193 14.7615 16 12 16C9.2386 16 6.7386 17.1193 4.92896 18.9289"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default Globe;
+type Globe = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Globe: 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/Layout.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 14H12M12 10H21M3 12.5V15.5M21 8.5V11.5M12 21V3M10.5 3H13.5M10.5 21H13.5M4.5 3H19.5C20.3284 3 21 3.67157 21 4.5V19.5C21 20.3284 20.3284 21 19.5 21H4.5C3.67157 21 3 20.3284 3 19.5V4.5C3 3.67157 3.67157 3 4.5 3Z"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>