@websline/system-components 0.0.1 → 0.0.3

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

@@ -0,0 +1,85 @@
+export const badgeVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        error: string;
+    };
+    anchor: {
+        top: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+        inline: {
+            wrapper: string;
+            base: string;
+        };
+    };
+    count: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    wrapper: string;
+}, undefined, {
+    color: {
+        primary: string;
+        secondary: string;
+        error: string;
+    };
+    anchor: {
+        top: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+        inline: {
+            wrapper: string;
+            base: string;
+        };
+    };
+    count: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        error: string;
+    };
+    anchor: {
+        top: {
+            base: string;
+        };
+        center: {
+            base: string;
+        };
+        bottom: {
+            base: string;
+        };
+        inline: {
+            wrapper: string;
+            base: string;
+        };
+    };
+    count: {
+        true: string;
+        false: string;
+    };
+}, {
+    base: string;
+    wrapper: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,59 @@
+import { tv } from "tailwind-variants";
+
+const badgeVariants = tv({
+	slots: {
+		base: "inline-flex absolute items-center justify-center rounded-full select-none body-extra-small",
+		wrapper: "inline-flex gap-0.5 relative",
+	},
+	variants: {
+		color: {
+			primary: "bg-blue-500 text-neutral-100 dark:bg-blue-400",
+			secondary:
+				"bg-neutral-900 text-neutral-100 dark:bg-neutral-100 dark:text-neutral-900",
+			error: "bg-red-500 text-neutral-100 dark:bg-red-400",
+		},
+		anchor: {
+			top: {
+				base: "top-0 -translate-y-1/2",
+			},
+			center: {
+				base: "top-1/2 -translate-y-1/2",
+			},
+			bottom: {
+				base: "bottom-0 translate-y-1/2",
+			},
+			inline: {
+				wrapper: "items-center static",
+				base: "static",
+			},
+		},
+		count: {
+			true: "px-1.5 py-0.5 size-auto",
+			false: "size-3",
+		},
+	},
+	compoundVariants: [
+		{
+			align: "end",
+			anchor: ["top", "center", "bottom"],
+			class: "right-0 translate-x-1/2",
+		},
+		{
+			align: "start",
+			anchor: ["top", "center", "bottom"],
+			class: "left-0 -translate-x-1/2",
+		},
+		{
+			align: "end",
+			anchor: "inline",
+			class: "order-1",
+		},
+		{
+			align: "start",
+			anchor: "inline",
+			class: "-order-1",
+		},
+	],
+});
+
+export { badgeVariants };

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

@@ -0,0 +1,52 @@
+<script>
+	import { chipVariants } from "./chip.variants.js";
+	import { Icon } from "../../../index.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {import('svelte').Snippet} [children] Content inside the chip – can be text, HTML, or Svelte components
+	 * @property {string} [class=""] Additional CSS classes for the chip
+	 * @property {boolean} [clickable=false] Whether the Chip is clickable (this disables selected state)
+	 * @property {"default" | "primary" | "error" | "success" | "warning"} [color="default"] Chip color variant
+	 * @property {string} [icon=""] Name of the icon to display
+	 * @property {"start" | "end"} [iconPosition="start"] Position of the icon relative to the content
+	 * @property {boolean} [selected=false] Whether the chip is in a visually selected state
+	 * @property {"small" | "big"} [size="small"] Size of the chip
+	 * @property {"filled" | "outline" | "dashed"} [variant="filled"] Visual style of the chip
+	 */
+
+	/** @type {Props} */
+	let {
+		children,
+		class: className,
+		clickable = false,
+		color = "default",
+		icon = "",
+		iconPosition = "start",
+		selected = false,
+		size = "small",
+		variant = "filled",
+		...rest
+	} = $props();
+
+	let as = $derived(clickable ? "button" : "div");
+</script>
+
+<svelte:element
+	this={as}
+	class={chipVariants({
+		color,
+		size,
+		iconPosition,
+		variant,
+		selected: clickable && selected,
+		class: className,
+	})}
+	{...rest}>
+	{#if icon}
+		<Icon name={icon} size={14} />
+	{/if}
+	<span>
+		{@render children?.()}
+	</span>
+</svelte:element>

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

@@ -0,0 +1,81 @@
+export default Chip;
+type Chip = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const Chip: import("svelte").Component<{
+    /**
+     * Content inside the chip – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the chip
+     */
+    class?: string;
+    /**
+     * Whether the Chip is clickable (this disables selected state)
+     */
+    clickable?: boolean;
+    /**
+     * Chip color variant
+     */
+    color?: "default" | "primary" | "error" | "success" | "warning";
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the chip is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Size of the chip
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the chip
+     */
+    variant?: "filled" | "outline" | "dashed";
+}, {}, "">;
+type Props = {
+    /**
+     * Content inside the chip – can be text, HTML, or Svelte components
+     */
+    children?: import("svelte").Snippet;
+    /**
+     * Additional CSS classes for the chip
+     */
+    class?: string;
+    /**
+     * Whether the Chip is clickable (this disables selected state)
+     */
+    clickable?: boolean;
+    /**
+     * Chip color variant
+     */
+    color?: "default" | "primary" | "error" | "success" | "warning";
+    /**
+     * Name of the icon to display
+     */
+    icon?: string;
+    /**
+     * Position of the icon relative to the content
+     */
+    iconPosition?: "start" | "end";
+    /**
+     * Whether the chip is in a visually selected state
+     */
+    selected?: boolean;
+    /**
+     * Size of the chip
+     */
+    size?: "small" | "big";
+    /**
+     * Visual style of the chip
+     */
+    variant?: "filled" | "outline" | "dashed";
+};

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

@@ -0,0 +1,61 @@
+export const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        small: string;
+        big: string;
+    };
+    iconPosition: {
+        end: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+        dashed: string;
+    };
+}, undefined, "\n        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer\n        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent\n    ", {
+    color: {
+        default: string;
+        primary: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        small: string;
+        big: string;
+    };
+    iconPosition: {
+        end: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+        dashed: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        default: string;
+        primary: string;
+        error: string;
+        success: string;
+        warning: string;
+    };
+    size: {
+        small: string;
+        big: string;
+    };
+    iconPosition: {
+        end: string;
+    };
+    variant: {
+        filled: string;
+        outline: string;
+        dashed: string;
+    };
+}, undefined, "\n        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer\n        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent\n    ", unknown, unknown, undefined>>;

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

@@ -0,0 +1,118 @@
+import { tv } from "tailwind-variants";
+
+const chipVariants = tv({
+	base: `
+        inline-flex items-center align-middle rounded select-none relative border gap-1 [button]:cursor-pointer
+        focus-visible:ring-1 ring-blue-500 dark:ring-blue-400 ring-offset-1 outline-0 ring-offset-transparent
+    `,
+	variants: {
+		color: {
+			default:
+				"bg-neutral-200 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: "body-extra-small py-0.5 px-2 min-h-[20px]",
+			big: "body-small py-1.5 px-3 min-h-[28px]",
+		},
+		iconPosition: {
+			end: "flex-row-reverse",
+		},
+		variant: {
+			filled: "border-transparent",
+			outline: "bg-transparent dark:bg-transparent",
+			dashed: "bg-transparent border-dashed dark:bg-transparent",
+		},
+	},
+	compoundVariants: [
+		// Outline || Dashed
+		{
+			color: "default",
+			variant: ["outline", "dashed"],
+			class: "border-gray-300 dark:border-gray-700",
+		},
+		{
+			color: "primary",
+			variant: ["outline", "dashed"],
+			class:
+				"text-blue-500 border-blue-500 dark:text-neutral-100 dark:border-blue-400",
+		},
+		{
+			color: "error",
+			variant: ["outline", "dashed"],
+			class: "text-red-500",
+		},
+		{
+			color: "success",
+			variant: ["outline", "dashed"],
+			class: "text-green-500",
+		},
+		{
+			color: "warning",
+			variant: ["outline", "dashed"],
+			class: "text-neutral-900 border-yellow-500 dark:text-yellow-600",
+		},
+		// Selected
+		{
+			selected: true,
+			color: "default",
+			class: "bg-neutral-900 text-neutral-100 dark:bg-blue-400",
+		},
+		{
+			selected: true,
+			color: "primary",
+			class: "bg-blue-600 dark:bg-blue-500",
+		},
+		{
+			selected: true,
+			color: "error",
+			class: "bg-red-700 ",
+		},
+		{
+			selected: true,
+			color: "success",
+			class: "bg-green-700 ",
+		},
+		{
+			selected: true,
+			color: "warning",
+			class: "bg-yellow-600",
+		},
+		// Selected & Outline || Dashed
+		{
+			selected: true,
+			variant: ["outline", "dashed"],
+			color: "default",
+			class: "border-neutral-900 dark:border-blue-400",
+		},
+		{
+			selected: true,
+			variant: ["outline", "dashed"],
+			color: "primary",
+			class: "text-neutral-100 bg-blue-600 border-blue-600 dark:border-blue-500",
+		},
+		{
+			selected: true,
+			variant: ["outline", "dashed"],
+			color: "error",
+			class: "text-neutral-100 border-red-700 dark:bg-red-700",
+		},
+		{
+			selected: true,
+			variant: ["outline", "dashed"],
+			color: "success",
+			class: "text-neutral-100 border-green-700 dark:bg-green-700",
+		},
+		{
+			selected: true,
+			variant: ["outline", "dashed"],
+			color: "warning",
+			class: "border-yellow-600 dark:bg-yellow-600 dark:text-neutral-900",
+		},
+	],
+});
+
+export { chipVariants };

package/dist/components/atoms/colorChip/ColorChip.svelte

@@ -0,0 +1,33 @@
+<script>
+	import { colorChipVariants } from "./colorChip.variants.js";
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {string} [borderColor=""] Border color value (hex, rgb, etc.)
+	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [clickable=false] Whether the ColorChip is clickable
+	 * @property {string} [color=""] Color value (hex, rgb, etc.)
+	 * @property {"circle" | "square"} [shape="round"] ColorChip shape
+	 * @property {"small" | "medium" | "large"} [size="medium"] ColorChip size
+	 */
+
+	/** @type {Props} */
+	let {
+		borderColor = "",
+		class: className = "",
+		clickable = false,
+		color = "",
+		shape = "square",
+		size = "medium",
+		...args
+	} = $props();
+
+	let as = $derived(clickable ? "button" : "div");
+</script>
+
+<svelte:element
+	this={as}
+	class={colorChipVariants({ class: className, clickable, shape, size })}
+	style="background-color: {color}; border-color: {borderColor};"
+	{...args}>
+</svelte:element>

package/dist/components/atoms/colorChip/ColorChip.svelte.d.ts

@@ -0,0 +1,57 @@
+export default ColorChip;
+type ColorChip = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const ColorChip: import("svelte").Component<{
+    /**
+     * Border color value (hex, rgb, etc.)
+     */
+    borderColor?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the ColorChip is clickable
+     */
+    clickable?: boolean;
+    /**
+     * Color value (hex, rgb, etc.)
+     */
+    color?: string;
+    /**
+     * ColorChip shape
+     */
+    shape?: "circle" | "square";
+    /**
+     * ColorChip size
+     */
+    size?: "small" | "medium" | "large";
+}, {}, "">;
+type Props = {
+    /**
+     * Border color value (hex, rgb, etc.)
+     */
+    borderColor?: string;
+    /**
+     * Additional CSS classes to apply to the component
+     */
+    class?: string;
+    /**
+     * Whether the ColorChip is clickable
+     */
+    clickable?: boolean;
+    /**
+     * Color value (hex, rgb, etc.)
+     */
+    color?: string;
+    /**
+     * ColorChip shape
+     */
+    shape?: "circle" | "square";
+    /**
+     * ColorChip size
+     */
+    size?: "small" | "medium" | "large";
+};

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

@@ -0,0 +1,40 @@
+export const colorChipVariants: import("tailwind-variants").TVReturnType<{
+    clickable: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "border border-transparent", {
+    clickable: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    clickable: {
+        true: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "border border-transparent", unknown, unknown, undefined>>;

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

@@ -0,0 +1,27 @@
+import { tv } from "tailwind-variants";
+
+const colorChipVariants = tv({
+	base: "border border-transparent",
+	variants: {
+		clickable: {
+			true: `cursor-pointer 
+        hover:brightness-90 focus:outline-none
+        active:brightness-75 
+        transition duration-150 ease-in-out 
+        hover:ring-2 focus:ring-2 
+        hover:ring-offset-1 focus:ring-offset-1 
+        hover:ring-blue-500 focus:ring-blue-500`,
+		},
+		shape: {
+			circle: "rounded-full",
+			square: "rounded-sm",
+		},
+		size: {
+			small: "h-4 w-4",
+			medium: "h-6 w-6",
+			large: "h-8 w-8",
+		},
+	},
+});
+
+export { colorChipVariants };

package/dist/components/atoms/{loading → feedback}/spinner/Spinner.svelte

@@ -1,28 +1,14 @@
 <script>
-	import { tv } from "tailwind-variants";
+	import { spinnerVariants } from "./spinner.variants.js";
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {"small" | "medium" | "large"} [size="medium"] Spinner size
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {"small" | "medium" | "large"} [size="medium"] Spinner size
 	 */
 
 	/** @type {Props} */
 	let { class: className = "", size = "medium" } = $props();
-
-	const spinnerVariants = tv({
-		base: "inline-flex animate-[spin_0.7s_linear_infinite]",
-		variants: {
-			size: {
-				small: "h-4 w-4",
-				medium: "h-6 w-6",
-				large: "h-8 w-8",
-			},
-		},
-		defaultVariants: {
-			size: "medium",
-		},
-	});
 </script>
 
 <svg

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

@@ -0,0 +1,19 @@
+export const spinnerVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "inline-flex animate-[spin_0.7s_linear_infinite]", {
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+}, undefined, "inline-flex animate-[spin_0.7s_linear_infinite]", unknown, unknown, undefined>>;

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

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+
+const spinnerVariants = tv({
+	base: "inline-flex animate-[spin_0.7s_linear_infinite]",
+	variants: {
+		size: {
+			small: "h-4 w-4",
+			medium: "h-6 w-6",
+			large: "h-8 w-8",
+		},
+	},
+	defaultVariants: {
+		size: "medium",
+	},
+});
+
+export { spinnerVariants };