@websline/system-components 0.0.2 → 0.0.4

package/dist/utils/colors.d.ts

@@ -0,0 +1,9 @@
+export function hexToRgb(hex: any): number[];
+export function rgbToHex(r: any, g: any, b: any): string;
+export function parseColor(input: any): any;
+export function getLuminance([r, g, b]: [any, any, any]): number;
+export function isLight(color: any): boolean;
+export function isDark(color: any): boolean;
+export function getContrastColor(color: any): "#ffffff" | "#000000";
+export function shadeColor(color: any, percent: any): string;
+export function shouldShowBorder(color: any, background?: string): boolean;

package/dist/utils/colors.js

@@ -0,0 +1,119 @@
+// Example: hexToRgb("#ff0000") -> [255, 0, 0]
+
+const hexToRgb = (hex) => {
+	hex = hex.replace(/^#/, "");
+	if (hex.length === 3) {
+		hex = hex
+			.split("")
+			.map((x) => x + x)
+			.join("");
+	}
+
+	const num = parseInt(hex, 16);
+
+	return [num >> 16, (num >> 8) & 255, num & 255];
+};
+
+// Example: rgbToHex(255, 0, 0) -> "#ff0000"
+
+const rgbToHex = (r, g, b) => {
+	return (
+		"#" +
+		[r, g, b]
+			.map((x) => {
+				const hex = x.toString(16);
+				return hex.length === 1 ? "0" + hex : hex;
+			})
+			.join("")
+	);
+};
+
+// Example: parseColor("rgb(255,0,0)") -> [255,0,0]
+
+const parseColor = (input) => {
+	if (input.startsWith("#")) {
+		return hexToRgb(input);
+	} else if (input.startsWith("rgb")) {
+		const nums = input.match(/[\d.]+/g).map(Number);
+		return nums.slice(0, 3);
+	} else {
+		throw new Error("Unsupported color format: " + input);
+	}
+};
+
+// Example: getLuminance([255,0,0]) -> 0.2126
+
+const getLuminance = ([r, g, b]) => {
+	const a = [r, g, b].map((v) => {
+		v /= 255;
+		return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+	});
+
+	return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+
+// Example: isLight("#ffffff") -> true
+
+const isLight = (color) => {
+	const rgb = parseColor(color);
+
+	return getLuminance(rgb) > 0.5;
+};
+
+// Example: isDark("#000000") -> true
+
+const isDark = (color) => {
+	return !isLight(color);
+};
+
+// Example: getContrastColor("#ff0000") -> "#ffffff"
+
+const getContrastColor = (color) => {
+	const rgb = parseColor(color);
+
+	const L = getLuminance(rgb);
+
+	return L > 0.179 ? "#000000" : "#ffffff";
+};
+
+// Example: shadeColor("#ff0000", -20) -> "#cc0000" (darker)
+
+const shadeColor = (color, percent) => {
+	const rgb = parseColor(color);
+	const shaded = rgb.map((c) =>
+		Math.min(255, Math.max(0, Math.round(c + (c * percent) / 100))),
+	);
+
+	return rgbToHex(...shaded);
+};
+
+// Example: shouldShowBorder("#ffffff", "#ffffff") -> true
+
+const shouldShowBorder = (color, background = "#ffffff") => {
+	const dist = colorDistance(color, background);
+
+	// Adjust threshold as needed
+	// maximum distance ≈ 441 (black vs. white)
+	return dist < 80;
+};
+
+const colorDistance = (c1, c2) => {
+	const [r1, g1, b1] = parseColor(c1);
+	const [r2, g2, b2] = parseColor(c2);
+
+	return Math.sqrt(
+		Math.pow(r1 - r2, 2) + Math.pow(g1 - g2, 2) + Math.pow(b1 - b2, 2),
+	);
+};
+
+export {
+	hexToRgb,
+	rgbToHex,
+	parseColor,
+	getLuminance,
+	isLight,
+	isDark,
+	getContrastColor,
+	shadeColor,
+	shouldShowBorder,
+};

package/dist/utils/index.d.ts

@@ -1 +1,3 @@
+export * from "./colors.js";
 export * from "./notification.js";
+export * from "./theme.svelte.js";

package/dist/utils/index.js

@@ -1 +1,3 @@
+export * from "./colors.js";
 export * from "./notification.js";
+export * from "./theme.svelte.js";

package/dist/utils/theme.svelte.d.ts

@@ -0,0 +1,10 @@
+export namespace theme {
+    export let mode: any;
+    export let background: any;
+    export { backgrounds };
+}
+declare namespace backgrounds {
+    let light: string;
+    let dark: string;
+}
+export {};

package/dist/utils/theme.svelte.js

@@ -0,0 +1,31 @@
+const backgrounds = {
+	light: "#F1F1F2",
+	dark: "#121110",
+};
+
+export const theme = $state({
+	mode: undefined,
+	background: undefined,
+	backgrounds,
+});
+
+const setupObserver = () => {
+	const target = document.documentElement;
+
+	const update = () => {
+		const dark = target.classList.contains("dark");
+		theme.mode = dark ? "dark" : "light";
+		theme.background = dark ? backgrounds.dark : backgrounds.light;
+	};
+
+	const observer = new MutationObserver(update);
+	observer.observe(target, { attributes: true, attributeFilter: ["class"] });
+
+	update();
+
+	return () => observer.disconnect();
+};
+
+if (typeof document !== "undefined") {
+	setupObserver();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "publishConfig": {
     "access": "public"
   },
@@ -26,57 +26,56 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.4.0",
-    "@tiptap/extension-color": "^3.4.0",
-    "@tiptap/extension-highlight": "^3.4.0",
-    "@tiptap/extension-link": "^3.4.0",
-    "@tiptap/extension-placeholder": "^3.4.0",
-    "@tiptap/extension-text-align": "^3.4.0",
-    "@tiptap/extension-text-style": "^3.4.0",
-    "@tiptap/extension-underline": "^3.4.0",
-    "@tiptap/pm": "^3.4.0",
-    "@tiptap/starter-kit": "^3.4.0",
-    "dompurify": "^3.2.6",
+    "@tiptap/core": "^3.6.5",
+    "@tiptap/extension-color": "^3.6.5",
+    "@tiptap/extension-highlight": "^3.6.5",
+    "@tiptap/extension-placeholder": "^3.6.5",
+    "@tiptap/extension-text-align": "^3.6.5",
+    "@tiptap/extension-text-style": "^3.6.5",
+    "@tiptap/pm": "^3.6.5",
+    "@tiptap/starter-kit": "^3.6.5",
+    "bits-ui": "^2.11.4",
+    "dompurify": "^3.2.7",
     "tailwind-merge": "3.3.1",
-    "tailwind-variants": "^3.1.0",
-    "uuid": "^11.1.0"
+    "tailwind-variants": "^3.1.1",
+    "uuid": "^13.0.0"
   },
   "peerDependencies": {
-    "svelte": "^5.38.6"
+    "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.34.0",
-    "@storybook/addon-a11y": "^9.1.4",
-    "@storybook/addon-docs": "^9.1.4",
-    "@storybook/addon-svelte-csf": "^5.0.8",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.37.0",
+    "@storybook/addon-a11y": "^9.1.10",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-svelte-csf": "^5.0.10",
     "@storybook/manager-api": "^8.6.14",
-    "@storybook/sveltekit": "^9.1.4",
+    "@storybook/sveltekit": "^9.1.10",
     "@storybook/theming": "^8.6.14",
-    "@sveltejs/adapter-auto": "^6.1.0",
-    "@sveltejs/kit": "^2.37.0",
-    "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.4",
+    "@sveltejs/adapter-auto": "^6.1.1",
+    "@sveltejs/kit": "^2.46.1",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@tailwindcss/forms": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.12",
-    "@types/node": "^24.3.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/node": "^24.7.0",
     "@vitest/browser": "^3.2.4",
-    "eslint": "^9.34.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^9.1.4",
-    "eslint-plugin-svelte": "^3.12.1",
-    "globals": "^16.3.0",
-    "playwright": "^1.55.0",
+    "eslint-plugin-storybook": "^9.1.10",
+    "eslint-plugin-svelte": "^3.12.4",
+    "globals": "^16.4.0",
+    "playwright": "^1.56.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
-    "publint": "^0.3.12",
-    "storybook": "^9.1.4",
-    "svelte": "^5.38.6",
-    "tailwindcss": "^4.1.12",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.4",
+    "publint": "^0.3.14",
+    "storybook": "^9.1.10",
+    "svelte": "^5.39.9",
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
     "vitest": "^3.2.4",
     "vitest-browser-svelte": "^1.1.0"
   },

package/dist/components/atoms/form/button/button.variants.d.ts

@@ -1,58 +0,0 @@
-export const buttonVariants: import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        filled: string;
-        outlined: string;
-    };
-}, undefined, "flex items-center rounded cursor-pointer transition duration-200 select-none", {
-    disabled: {
-        true: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        filled: string;
-        outlined: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    disabled: {
-        true: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-    loading: {
-        true: string;
-    };
-    size: {
-        small: string;
-        medium: string;
-        large: string;
-    };
-    variant: {
-        filled: string;
-        outlined: string;
-    };
-}, undefined, "flex items-center rounded cursor-pointer transition duration-200 select-none", unknown, unknown, undefined>>;

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

@@ -1,82 +0,0 @@
-import { tv } from "tailwind-variants";
-
-const buttonVariants = tv({
-	base: "flex items-center rounded cursor-pointer transition duration-200 select-none",
-	variants: {
-		disabled: {
-			true: "opacity-40 pointer-events-none",
-		},
-		fullWidth: {
-			true: "w-full justify-center",
-		},
-		loading: {
-			true: "pointer-events-none",
-		},
-		size: {
-			small: "py-1.25 px-3 gap-2 button-small",
-			medium: "py-1.5 px-3 gap-2 button-default",
-			large: "py-2.5 px-3 gap-3 button-default",
-		},
-		variant: {
-			filled: "border-transparent border-1",
-			outlined: "border-1",
-		},
-	},
-	compoundVariants: [
-		{
-			color: "primary",
-			variant: "filled",
-			class:
-				"bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-400 dark:hover:bg-blue-500",
-		},
-		{
-			color: "primary",
-			variant: "outlined",
-			class:
-				"text-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600 hover:text-white dark:text-blue-400 dark:border-blue-400 dark:hover:bg-blue-500 dark:hover:border-blue-500",
-		},
-		{
-			color: "secondary",
-			variant: "filled",
-			class:
-				"bg-neutral-900 text-white hover:bg-neutral-700 dark:bg-neutral-200 dark:text-neutral-900 dark:hover:bg-neutral-500",
-		},
-		{
-			color: "secondary",
-			variant: "outlined",
-			class:
-				"text-neutral-900 hover:bg-neutral-700 hover:text-white hover:border-neutral-700 dark:border-white dark:text-white dark:hover:bg-neutral-500 dark:hover:border-neutral-500 dark:hover:text-inherit",
-		},
-		{
-			color: "tertiary",
-			class:
-				"relative !px-0 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-[1.5px] after:w-0 after:bg-blue-500 hover:after:w-full after:transition-all after:duration-300 dark:text-white dark:after:bg-blue-400",
-		},
-		{
-			color: "success",
-			variant: "filled",
-			class:
-				"bg-green-500 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-700",
-		},
-		{
-			color: "success",
-			variant: "outlined",
-			class:
-				"text-green-500 border-green-500 hover:bg-green-700 hover:border-green-700 hover:text-white dark:text-green-500 dark:border-green-500 dark:hover:bg-green-700 dark:hover:border-green-700",
-		},
-		{
-			color: "danger",
-			variant: "filled",
-			class:
-				"bg-red-500 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-700",
-		},
-		{
-			color: "danger",
-			variant: "outlined",
-			class:
-				"text-red-500 border-red-500 hover:bg-red-700 hover:border-red-700 hover:text-white dark:text-red-500 dark:border-red-500 dark:hover:bg-red-700 dark:hover:border-red-700",
-		},
-	],
-});
-
-export { buttonVariants };

package/dist/components/molecules/richTextEditor/RichTextEditorToolbar.svelte

@@ -1,5 +0,0 @@
-<script>
-	let { editor } = $props();
-</script>
-
-Toolbar in progress...

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

@@ -4,22 +4,22 @@ type Spinner = {
     $set?(props: Partial<Props>): void;
 };
 declare const Spinner: import("svelte").Component<{
-    /**
-     * Spinner size
-     */
-    size?: "small" | "medium" | "large";
     /**
      * Additional CSS classes to apply to the component
      */
     class?: string;
-}, {}, "">;
-type Props = {
     /**
      * Spinner size
      */
     size?: "small" | "medium" | "large";
+}, {}, "">;
+type Props = {
     /**
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * Spinner size
+     */
+    size?: "small" | "medium" | "large";
 };