@marianmeres/stuic 2.1.5 → 2.1.6

package/dist/components/AlertConfirmPrompt/Current.svelte

@@ -31,6 +31,9 @@
 		classMenuLi?: string;
 		classButton?: string;
 		classSpinnerBox?: string;
+		defaultIcons?: Partial<
+			Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>
+		>;
 	}
 
 	let {
@@ -49,6 +52,7 @@
 		classMenuLi,
 		classButton,
 		classSpinnerBox,
+		defaultIcons = acpDefaultIcons,
 	}: Props = $props();
 
 	let current = $derived(acp?.current!);
@@ -56,7 +60,7 @@
 	let iconFn = $derived.by(() => {
 		let out = current.iconFn;
 		if (current.iconFn === true) {
-			out = acpDefaultIcons[current.variant];
+			out = defaultIcons[current.variant];
 		}
 		return out;
 	});

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -15,6 +15,7 @@ interface Props {
     classMenuLi?: string;
     classButton?: string;
     classSpinnerBox?: string;
+    defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
 }
 declare const Current: import("svelte").Component<Props, {}, "isPending">;
 type Current = ReturnType<typeof Current>;

package/dist/components/Button/Button.svelte

@@ -10,11 +10,11 @@
 		inline-flex items-center justify-center gap-x-2
 		px-3 py-2
 
-		hover:brightness-[1.05]
-		active:brightness-[0.95]
+		hover:brightness-105
+		active:brightness-95
 		disabled:hover:brightness-100
 
-		focus:brightness-[1.05] 
+		focus:brightness-105
 		focus:border-button-border-focus focus:dark:border-button-border-focus-dark
 
 		        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20
@@ -42,6 +42,11 @@
 			active:shadow-none active:translate-[1px]
 			disabled:shadow-none disabled:active:shadow-none disabled:active:translate-none
 		`,
+		inverse: `
+			bg-transparent dark:bg-transparent 
+			hover:bg-button-bg hover:dark:bg-button-bg-dark
+			hover:brightness-100 
+		`,
 	};
 </script>
 
@@ -58,7 +63,9 @@
 		size?: "sm" | "md" | "lg" | string;
 		muted?: boolean;
 		noshadow?: boolean;
+		noborder?: boolean;
 		unstyled?: boolean;
+		inverse?: boolean; // a.k.a. formerly "outlined"
 		class?: string;
 		href?: string;
 		children?: Snippet<[{ checked?: boolean }]>;
@@ -74,6 +81,8 @@
 		class: classProp,
 		muted,
 		noshadow,
+		noborder,
+		inverse,
 		unstyled,
 		href,
 		children,
@@ -108,12 +117,15 @@
 			size,
 			muted && "muted",
 			noshadow && "no-shadow",
+			noborder && "border-none",
+			inverse && "inverse",
 			// now, attach the default tw classes (unless not explicitly forbidden)
 			!unstyled && _base,
 			!unstyled && size && _preset.size[size],
 			!unstyled && variant && _preset.variant[variant],
 			!unstyled && muted && _preset.muted,
 			!unstyled && !noshadow && _preset.shadow,
+			!unstyled && inverse && _preset.inverse,
 		]
 			.filter(Boolean)
 			.join(" ")

package/dist/components/Button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
@@ -8,7 +8,9 @@ interface Props extends HTMLButtonAttributes {
     size?: "sm" | "md" | "lg" | string;
     muted?: boolean;
     noshadow?: boolean;
+    noborder?: boolean;
     unstyled?: boolean;
+    inverse?: boolean;
     class?: string;
     href?: string;
     children?: Snippet<[{

package/dist/components/Button/index.css

@@ -7,7 +7,7 @@
 	--color-button-text-dark: var(--color-button-text-dark, var(--color-white));
 
 	--color-button-border: var(--color-button-border, var(--color-neutral-400));
-	--color-button-border-dark: var(--color-button-border-dark, var(--color-neutral-800));
+	--color-button-border-dark: var(--color-button-border-dark, var(--color-neutral-600));
 
 	--color-button-border-focus: var(--color-button-border-focus, var(--color-neutral-500));
 	--color-button-border-focus-dark: var(--color-button-border-focus-dark, var(--color-neutral-500));

package/dist/components/Switch/Switch.svelte

@@ -93,7 +93,7 @@
 
 		transition-colors duration-100
 
-		hover:brightness-[1.05] active:brightness-[0.95]
+		hover:brightness-105 active:brightness-95
 		data-[disabled=true]:!cursor-not-allowed data-[disabled=true]:!opacity-50 data-[disabled=true]:hover:brightness-100
 
 		bg-neutral-400 dark:bg-neutral-400

package/dist/components/Switch/SwitchButton.svelte

@@ -68,7 +68,7 @@
 	
 			transition-colors duration-100
 	
-			hover:brightness-[1.05] active:brightness-[0.95]
+			hover:brightness-105 active:brightness-95
 			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
 	
 			bg-neutral-400 dark:bg-neutral-400

package/dist/utils/hex-to-oklch.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/hex-to-oklch.js

@@ -0,0 +1,53 @@
+"use strict";
+/**
+ * Converts a hex color string to OKLCH
+ * @param {string} hex - The hex color string (with or without leading #)
+ * @returns {Object} An object with l (lightness), c (chroma), and h (hue) properties
+ */
+function hexToOklch(hex) {
+    // Remove the hash if it exists
+    hex = hex.replace(/^#/, "");
+    // Handle both 3-digit and 6-digit formats
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    // Parse the hex values to RGB (0-1)
+    const r = parseInt(hex.substring(0, 2), 16) / 255;
+    const g = parseInt(hex.substring(2, 4), 16) / 255;
+    const b = parseInt(hex.substring(4, 6), 16) / 255;
+    // Convert RGB to linear RGB (removing gamma correction)
+    const linearR = r <= 0.04045 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+    const linearG = g <= 0.04045 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+    const linearB = b <= 0.04045 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+    // Convert to XYZ
+    const x = 0.4124 * linearR + 0.3576 * linearG + 0.1805 * linearB;
+    const y = 0.2126 * linearR + 0.7152 * linearG + 0.0722 * linearB;
+    const z = 0.0193 * linearR + 0.1192 * linearG + 0.9505 * linearB;
+    // Convert XYZ to LMS (cone response)
+    const l = 0.819 * x + 0.3619 * y - 0.1289 * z;
+    const m = 0.0329 * x + 0.9293 * y + 0.0361 * z;
+    const s = 0.0482 * x + 0.2645 * y + 0.6886 * z;
+    // Apply non-linearity to LMS
+    const lp = Math.cbrt(l);
+    const mp = Math.cbrt(m);
+    const sp = Math.cbrt(s);
+    // Convert to Oklab
+    const L = 0.2104 * lp + 0.7936 * mp - 0.004 * sp;
+    const a = 1.9779 * lp - 2.4285 * mp + 0.4505 * sp;
+    const bb = 0.0259 * lp + 0.7827 * mp - 0.8086 * sp;
+    // Convert Oklab to Oklch
+    const C = Math.sqrt(a * a + bb * bb);
+    let h = (Math.atan2(bb, a) * 180) / Math.PI;
+    // Ensure hue is positive
+    if (h < 0) {
+        h += 360;
+    }
+    return {
+        l: parseFloat(L.toFixed(4)),
+        c: parseFloat(C.toFixed(4)),
+        h: parseFloat(h.toFixed(2)),
+    };
+}
+// Example usage:
+// const oklch = hexToOklch("#ff5733");
+// console.log(oklch); // Example output: { l: 0.6321, c: 0.1549, h: 27.23 }

package/dist/utils/hex-to-rgb.d.ts

@@ -0,0 +1,6 @@
+/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};

package/dist/utils/hex-to-rgb.js

@@ -0,0 +1,12 @@
+/** Will convert #fff or #ffffff to {r: 255, g: 255, b: 255} */
+export function hexToRgb(hex) {
+    hex = hex.replace(/^#/, "");
+    // both 3-digit and 6-digit formats
+    if (hex.length === 3) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+    }
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return { r, g, b };
+}

package/dist/utils/index.d.ts

@@ -5,6 +5,8 @@ export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
+export * from "./hex-to-oklch.js";
+export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/dist/utils/index.js

@@ -5,6 +5,8 @@ export * from "./escape-regex.js";
 export * from "./event-emitter.js";
 export * from "./event-modifiers.js";
 export * from "./get-id.js";
+export * from "./hex-to-oklch.js";
+export * from "./hex-to-rgb.js";
 export * from "./is-browser.js";
 export * from "./is-mac.js";
 export * from "./is-nullish.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "2.1.5",
+	"version": "2.1.6",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",