@websline/system-components 1.3.4 → 1.3.6

package/dist/components/atoms/checkbox/Checkbox.svelte

@@ -23,7 +23,7 @@
 		id,
 		name,
 		required,
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/atoms/chip/Chip.svelte

@@ -35,12 +35,13 @@
 <svelte:element
 	this={as}
 	class={chipVariants({
+		class: className,
+		clickable,
 		color,
-		size,
 		iconPosition,
-		variant,
 		selected: clickable && selected,
-		class: className,
+		size,
+		variant,
 	})}
 	type={clickable ? "button" : undefined}
 	{...rest}>

package/dist/components/atoms/chip/chip.variants.d.ts

@@ -6,17 +6,17 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, string[], {
     color: {
@@ -26,17 +26,17 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     color: {
@@ -46,16 +46,16 @@ export const chipVariants: import("tailwind-variants").TVReturnType<{
         success: string;
         warning: string;
     };
-    size: {
-        small: string;
-        big: string;
-    };
     iconPosition: {
         end: string;
     };
+    size: {
+        big: string;
+        small: string;
+    };
     variant: {
+        dashed: string;
         filled: string;
         outline: string;
-        dashed: string;
     };
 }, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/atoms/chip/chip.variants.js

@@ -8,109 +8,128 @@ const chipVariants = tv({
 	variants: {
 		color: {
 			default:
-				"bg-neutral-200 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-200",
+				"bg-neutral-100 text-neutral-900 dark:bg-neutral-700 dark:text-neutral-200",
 			primary: "bg-blue-500 text-neutral-100 dark:bg-blue-400",
 			error: "bg-red-500 text-neutral-100",
 			success: "bg-green-500 text-neutral-100",
 			warning: "bg-yellow-500 text-neutral-900",
 		},
-		size: {
-			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
-			big: "min-h-[28px] px-3 py-1.5 body-small",
-		},
 		iconPosition: {
 			end: "flex-row-reverse",
 		},
+		size: {
+			big: "min-h-[28px] px-3 py-1.5 body-small",
+			small: "min-h-[20px] px-2 py-0.5 ui-tag-badge",
+		},
 		variant: {
+			dashed: "border-dashed",
 			filled: "border-transparent",
-			outline: "bg-transparent dark:bg-transparent",
-			dashed: "border-dashed bg-transparent dark:bg-transparent",
+			outline: "",
 		},
 	},
 	compoundVariants: [
 		// Outline || Dashed
+		{
+			selected: false,
+			variant: ["dashed", "outline"],
+			class: "bg-transparent dark:bg-transparent",
+		},
 		{
 			color: "default",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "border-gray-300 dark:border-gray-700",
 		},
 		{
 			color: "primary",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class:
 				"border-blue-500 text-blue-500 dark:border-blue-400 dark:text-neutral-100",
 		},
 		{
 			color: "error",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "text-red-500",
 		},
 		{
 			color: "success",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "text-green-500",
 		},
 		{
 			color: "warning",
+			selected: false,
 			variant: ["outline", "dashed"],
 			class: "border-yellow-500 text-neutral-900 dark:text-yellow-600",
 		},
-		// Selected
+
+		// Clickable (hover state = selected state, except for default)
 		{
-			selected: true,
+			clickable: true,
 			color: "default",
-			class: "bg-neutral-900 text-neutral-100 dark:bg-blue-400",
+			class: "hover:bg-neutral-200 hover:dark:bg-neutral-900",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "primary",
-			class: "bg-blue-600 dark:bg-blue-500",
+			class: "hover:bg-blue-600 hover:text-neutral-100 hover:dark:bg-blue-500",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "error",
-			class: "bg-red-700",
+			class: "hover:bg-red-700 hover:text-neutral-100",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "success",
-			class: "bg-green-700",
+			class: "hover:bg-green-700 hover:text-neutral-100",
 		},
 		{
-			selected: true,
+			clickable: true,
 			color: "warning",
-			class: "bg-yellow-600",
+			class: "hover:bg-yellow-600 hover:text-neutral-900",
 		},
-		// Selected & Outline || Dashed
+		// Clickable & Outline || Dashed
+		{
+			clickable: true,
+			variant: ["dashed", "outline"],
+			class: "hover:border-transparent hover:dark:border-transparent",
+		},
+
+		// Selected
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "default",
-			class: "border-neutral-900 dark:border-blue-400",
+			class: "bg-neutral-900 text-neutral-100 dark:bg-blue-400",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "primary",
-			class: "border-blue-600 bg-blue-600 text-neutral-100 dark:border-blue-500",
+			class: "bg-blue-600 dark:bg-blue-500",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "error",
-			class: "border-red-700 text-neutral-100 dark:bg-red-700",
+			class: "bg-red-700",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "success",
-			class: "border-green-700 text-neutral-100 dark:bg-green-700",
+			class: "bg-green-700",
 		},
 		{
 			selected: true,
-			variant: ["outline", "dashed"],
 			color: "warning",
-			class: "border-yellow-600 dark:bg-yellow-600 dark:text-neutral-900",
+			class: "bg-yellow-600",
+		},
+		// Selected & Outline || Dashed
+		{
+			selected: true,
+			variant: ["dashed", "outline"],
+			class: "border-transparent dark:border-transparent",
 		},
 	],
 });

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

@@ -0,0 +1,29 @@
+<script>
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [color=""] Icon color
+	 * @property {number} [height=24] Icon height
+	 * @property {number} [width=24] Icon width
+	 */
+
+	/** @type {Props} */
+	let { color, height, width, ...rest } = $props();
+</script>
+
+<svg
+	{height}
+	{width}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...rest}>
+	<path
+		d="M9.97051 5.577L10.5728 7.2495C11.2418 9.10575 12.7035 10.5675 14.5598 11.2365L16.2323 11.8388C16.383 11.8935 16.383 12.1073 16.2323 12.1613L14.5598 12.7635C12.7035 13.4325 11.2418 14.8943 10.5728 16.7505L9.97051 18.423C9.91576 18.5738 9.70201 18.5738 9.64801 18.423L9.04576 16.7505C8.37676 14.8943 6.91501 13.4325 5.05876 12.7635L3.38626 12.1613C3.23551 12.1065 3.23551 11.8928 3.38626 11.8388L5.05876 11.2365C6.91501 10.5675 8.37676 9.10575 9.04576 7.2495L9.64801 5.577C9.70201 5.4255 9.91576 5.4255 9.97051 5.577Z"
+		fill={color} />
+	<path
+		d="M17.499 1.55775L17.8043 2.4045C18.1433 3.34425 18.8835 4.0845 19.8233 4.4235L20.67 4.72875C20.7465 4.7565 20.7465 4.8645 20.67 4.89225L19.8233 5.1975C18.8835 5.5365 18.1433 6.27675 17.8043 7.2165L17.499 8.06325C17.4713 8.13975 17.3633 8.13975 17.3355 8.06325L17.0303 7.2165C16.6913 6.27675 15.951 5.5365 15.0113 5.1975L14.1645 4.89225C14.088 4.8645 14.088 4.7565 14.1645 4.72875L15.0113 4.4235C15.951 4.0845 16.6913 3.34425 17.0303 2.4045L17.3355 1.55775C17.3633 1.4805 17.472 1.4805 17.499 1.55775Z"
+		fill={color} />
+	<path
+		d="M17.499 15.9375L17.8043 16.7843C18.1433 17.724 18.8835 18.4643 19.8233 18.8033L20.67 19.1085C20.7465 19.1363 20.7465 19.2443 20.67 19.272L19.8233 19.5773C18.8835 19.9163 18.1433 20.6565 17.8043 21.5963L17.499 22.443C17.4713 22.5195 17.3633 22.5195 17.3355 22.443L17.0303 21.5963C16.6913 20.6565 15.951 19.9163 15.0113 19.5773L14.1645 19.272C14.088 19.2443 14.088 19.1363 14.1645 19.1085L15.0113 18.8033C15.951 18.4643 16.6913 17.724 17.0303 16.7843L17.3355 15.9375C17.3633 15.861 17.472 15.861 17.499 15.9375Z"
+		fill={color} />
+</svg>

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

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

package/dist/components/atoms/icon/components/AlignBottom.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 18.1528H21M3 21H21M15 11.5L12 14.5M12 14.5L9 11.5M12 14.5V3"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default AlignBottom;
+type AlignBottom = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const AlignBottom: 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/AlignBottomOne.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="M17 13.5H7M13.5 17H7M4.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>

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

@@ -0,0 +1,41 @@
+export default AlignBottomOne;
+type AlignBottomOne = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const AlignBottomOne: 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/AlignCenter.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="M18 10H6M21 5H3M21 15H3M18 20H6"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default AlignCenter;
+type AlignCenter = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const AlignCenter: 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/AlignCenterOne.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="M15 12H9M17 7.5H7M17 16.5H7M4.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>

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

@@ -0,0 +1,41 @@
+export default AlignCenterOne;
+type AlignCenterOne = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const AlignCenterOne: 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/AlignLeft.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="M21 5H3M17 10H3M21 15H3M17 20H3"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>

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

@@ -0,0 +1,41 @@
+export default AlignLeft;
+type AlignLeft = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const AlignLeft: 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/AlignMiddle.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="M9 17.9999L12 14.9999L15 17.9999M12 15.4998V21.9998M9 5.99989L12 8.99989L15 5.99989M12 8.49999V2M3 12.0001H21"
+		stroke={color}
+		stroke-width={strokeWidth}
+		stroke-linecap="round"
+		stroke-linejoin="round" />
+</svg>