@marianmeres/stuic 1.126.0 → 2.0.0-next.2

package/dist/components/Button/index.js

@@ -0,0 +1 @@
+export { default as Button } from './Button.svelte';

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

@@ -0,0 +1,26 @@
+export default ColResize;
+type ColResize = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ColResize: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ColorScheme/{LocalColorScheme.svelte → ColorSchemeLocal.svelte}

@@ -4,8 +4,8 @@
 -->
 <svelte:head>
 	<script>
-		const KEY = 'color-scheme';
+		const KEY = "stuic-color-scheme";
 		const cls = window.document.documentElement.classList;
-		localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
+		localStorage.getItem(KEY) === "dark" ? cls.add("dark") : cls.remove("dark");
 	</script>
 </svelte:head>

package/dist/components/ColorScheme/ColorSchemeLocal.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ColorSchemeLocal;
+type ColorSchemeLocal = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ColorSchemeLocal: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ColorScheme/{SystemAwareColorScheme.svelte → ColorSchemeSystemAware.svelte}

@@ -3,12 +3,12 @@
 -->
 <svelte:head>
 	<script>
-		const KEY = 'color-scheme';
+		const KEY = "stuic-color-scheme";
 		const cls = window.document.documentElement.classList;
 		if (KEY in localStorage) {
-			localStorage.getItem(KEY) === 'dark' ? cls.add('dark') : cls.remove('dark');
-		} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			cls.add('dark');
+			localStorage.getItem(KEY) === "dark" ? cls.add("dark") : cls.remove("dark");
+		} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+			cls.add("dark");
 		}
 	</script>
 </svelte:head>

package/dist/components/ColorScheme/ColorSchemeSystemAware.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ColorSchemeSystemAware;
+type ColorSchemeSystemAware = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ColorSchemeSystemAware: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ColorScheme/color-scheme.d.ts

@@ -1,10 +1,28 @@
+/**
+ * Color scheme toggler and manager
+ */
 export declare class ColorScheme {
-    static readonly KEY = "color-scheme";
-    static readonly DARK = "dark";
-    static readonly LIGHT = "light";
-    static getSystemValue: () => "dark" | "light";
-    static getLocalValue: (fallback?: string | null) => string | null;
-    static getValue: () => string | null;
-    static toggle: () => void;
-    static reset: () => void;
+    static readonly KEY: "stuic-color-scheme";
+    static readonly DARK: "dark";
+    static readonly LIGHT: "light";
+    /**
+     * Reads the `prefers-color-scheme` system setting
+     */
+    static getSystemValue(): "dark" | "light";
+    /**
+     * Reads locally (localStorage) saved value
+     */
+    static getLocalValue(fallback?: "dark" | "light"): "dark" | "light";
+    /**
+     * Tries local first, fallbacks to system
+     */
+    static getValue(): "dark" | "light";
+    /**
+     * Sets and saves the opposite of current.
+     */
+    static toggle(): void;
+    /**
+     *
+     */
+    static reset(): void;
 }

package/dist/components/ColorScheme/color-scheme.js

@@ -1,19 +1,43 @@
-const _window = typeof window !== 'undefined' ? window : null;
+/**
+ * Color scheme toggler and manager
+ */
 export class ColorScheme {
-    static KEY = 'color-scheme';
-    static DARK = 'dark';
-    static LIGHT = 'light';
-    static getSystemValue = () => _window?.matchMedia(`(prefers-color-scheme: ${ColorScheme.DARK})`).matches
-        ? ColorScheme.DARK
-        : ColorScheme.LIGHT;
-    static getLocalValue = (fallback = null) => localStorage?.getItem(ColorScheme.KEY) || fallback;
-    static getValue = () => ColorScheme.getLocalValue(ColorScheme.getSystemValue());
-    static toggle = () => {
+    static KEY = "stuic-color-scheme";
+    static DARK = "dark";
+    static LIGHT = "light";
+    /**
+     * Reads the `prefers-color-scheme` system setting
+     */
+    static getSystemValue() {
+        return globalThis.matchMedia?.(`(prefers-color-scheme: ${ColorScheme.DARK})`).matches
+            ? ColorScheme.DARK
+            : ColorScheme.LIGHT;
+    }
+    /**
+     * Reads locally (localStorage) saved value
+     */
+    static getLocalValue(fallback = "light") {
+        return (globalThis.localStorage?.getItem(ColorScheme.KEY) || fallback);
+    }
+    /**
+     * Tries local first, fallbacks to system
+     */
+    static getValue() {
+        return ColorScheme.getLocalValue(ColorScheme.getSystemValue());
+    }
+    /**
+     * Sets and saves the opposite of current.
+     */
+    static toggle() {
         // returns bool, indicating whether token is in the list after the call or not.
-        const isDark = _window?.document.documentElement.classList.toggle(ColorScheme.DARK);
-        localStorage?.setItem(ColorScheme.KEY, isDark ? ColorScheme.DARK : ColorScheme.LIGHT);
-    };
-    static reset = () => {
-        localStorage?.removeItem(ColorScheme.KEY);
-    };
+        const isDark = globalThis?.document?.documentElement.classList.toggle(ColorScheme.DARK);
+        globalThis.localStorage?.setItem(ColorScheme.KEY, isDark ? ColorScheme.DARK : ColorScheme.LIGHT);
+    }
+    /**
+     *
+     */
+    static reset() {
+        globalThis.localStorage?.removeItem(ColorScheme.KEY);
+        globalThis?.document?.documentElement.classList.remove(ColorScheme.DARK, ColorScheme.LIGHT);
+    }
 }

package/dist/components/ColorScheme/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./color-scheme.js";
+export { default as ColorSchemeLocal } from "./ColorSchemeLocal.svelte";
+export { default as ColorSchemeSystemAware } from "./ColorSchemeSystemAware.svelte";

package/dist/components/ColorScheme/index.js

@@ -0,0 +1,3 @@
+export * from "./color-scheme.js";
+export { default as ColorSchemeLocal } from "./ColorSchemeLocal.svelte";
+export { default as ColorSchemeSystemAware } from "./ColorSchemeSystemAware.svelte";

package/dist/components/DismissibleMessage/DismissibleMessage.svelte

@@ -1,94 +1,87 @@
-<script context="module">import { slide } from "svelte/transition";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
-import X from "../X/X.svelte";
-const themes = {
-  primary: "bg-stuic-primary      text-stuic-on-primary   dark:bg-stuic-primary-dark   dark:text-stuic-on-primary-dark",
-  secondary: "bg-stuic-secondary    text-stuic-on-secondary dark:bg-stuic-secondary-dark dark:text-stuic-on-secondary-dark",
-  slate: "bg-slate-100          text-slate-800          dark:bg-slate-700            dark:text-slate-100",
-  gray: "bg-gray-100           text-gray-800           dark:bg-gray-700             dark:text-gray-100",
-  zinc: "bg-zinc-100           text-zinc-800           dark:bg-zinc-700             dark:text-zinc-100",
-  neutral: "bg-neutral-100        text-neutral-800        dark:bg-neutral-700          dark:text-neutral-100",
-  stone: "bg-stone-100          text-stone-800          dark:bg-stone-700            dark:text-stone-100",
-  red: "bg-red-100            text-red-800            dark:bg-red-800              dark:text-red-100",
-  orange: "bg-orange-100         text-orange-800         dark:bg-orange-800           dark:text-orange-100",
-  amber: "bg-amber-100          text-amber-800          dark:bg-amber-800            dark:text-amber-100",
-  yellow: "bg-yellow-100         text-yellow-800         dark:bg-yellow-800           dark:text-yellow-50",
-  lime: "bg-lime-100           text-lime-800           dark:bg-lime-800             dark:text-lime-100",
-  green: "bg-green-100          text-green-800          dark:bg-green-800            dark:text-green-100",
-  emerald: "bg-emerald-100        text-emerald-800        dark:bg-emerald-800          dark:text-emerald-50",
-  teal: "bg-teal-100           text-teal-800           dark:bg-teal-800             dark:text-teal-50",
-  cyan: "bg-cyan-100           text-cyan-800           dark:bg-cyan-800             dark:text-cyan-50",
-  sky: "bg-sky-100            text-sky-800            dark:bg-sky-800              dark:text-sky-50",
-  blue: "bg-blue-100           text-blue-800           dark:bg-blue-800             dark:text-blue-100",
-  indigo: "bg-indigo-100         text-indigo-800         dark:bg-indigo-800           dark:text-indigo-100",
-  violet: "bg-violet-100         text-violet-800         dark:bg-violet-800           dark:text-violet-100",
-  purple: "bg-purple-100         text-purple-800         dark:bg-purple-800           dark:text-purple-100",
-  fuchsia: "bg-fuchsia-100        text-fuchsia-800        dark:bg-fuchsia-800          dark:text-fuchsia-100",
-  pink: "bg-pink-100           text-pink-800           dark:bg-pink-800             dark:text-pink-100",
-  rose: "bg-rose-100           text-rose-800           dark:bg-rose-800             dark:text-rose-100"
-};
-const _PRESET = {
-  box: `mb-4 rounded flex text-sm`,
-  content: `flex-1 px-4 py-3`,
-  dismiss: `
-			hover:bg-neutral-950/5 dark:hover:bg-neutral-950/20
-			focus-visible:bg-neutral-950/5 focus-visible:hover:bg-neutral-950/20 focus-visible:ring-0
-			rounded rounded-l-none
-			px-3
-			flex items-center justify-center
-			group
-		`,
-  x: `opacity-75 group-hover:opacity-100`
-};
-export class DismissibleMessageConfig {
-  static class = {
-    box: ``,
-    content: ``,
-    dismiss: ``,
-    x: ``
-  };
-}
-</script>
+<script lang="ts">
+	import { slide } from "svelte/transition";
+	import type { TW_COLORS } from "../../types.js";
+	import Thc, { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
+	import X from "../X/X.svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	import "./index.css";
+
+	interface Props {
+		class?: string;
+		classContent?: string;
+		classDismiss?: string;
+		classX?: string;
+		message: THC | Error;
+		theme?: TW_COLORS;
+		forceAsHtml?: boolean;
+		duration?: number;
+		onDismiss?: (() => void) | null | false;
+	}
 
-<script>let _class = {};
-export { _class as class };
-export let duration = 150;
-export let message;
-export let onDismiss = () => message = "";
-export let theme = "primary";
-export let forceAsHtml = false;
-$:
-  if (message instanceof Error)
-    message = message.toString();
-let show = false;
-$:
-  if (isTHCNotEmpty(message)) {
-    requestAnimationFrame(() => show = true);
-  } else {
-    show = false;
-  }
-const _collectClasses = (k, extra = "") => [
-  _PRESET?.[k],
-  DismissibleMessageConfig?.class?.[k],
-  extra,
-  _class?.[k]
-];
+	let {
+		class: classProps,
+		classContent,
+		classDismiss,
+		classX,
+		message,
+		theme,
+		forceAsHtml = true,
+		duration = 150,
+		onDismiss = () => (message = ""),
+	}: Props = $props();
+
+	let _message = $derived(`${message}`);
+	let _show = $derived(isTHCNotEmpty(_message));
 </script>
 
-<!-- {#if isNotEmpty(message)} -->
-{#if show}
+{#if _show}
 	<div
-		class={twMerge2(_collectClasses('box', themes[theme] ?? themes.primary))}
+		class={twMerge(
+			"stuic-dismissible-message",
+			`mb-4 rounded flex text-sm 
+            bg-dismiss-bg dark:bg-dismiss-bg-dark 
+            border-dismiss-border dark:border-dismiss-border-dark 
+            text-dismiss-text dark:text-dismiss-text-dark`,
+			classProps
+		)}
+		style={theme
+			? `
+                    --color-dismiss-bg: var(--color-${theme}-100);
+                    --color-dismiss-bg-dark: var(--color-${theme}-700);
+
+                    --color-dismiss-text: var(--color-${theme}-800);
+                    --color-dismiss-text-dark: var(--color-${theme}-50);
+
+                    --color-dismiss-border: var(--color-${theme}-500);
+                    --color-dismiss-border-dark: var(--color-${theme}-500);
+                `
+			: ""}
 		transition:slide={{ duration }}
 	>
-		<div class={twMerge2(_collectClasses('content'))}>
-			<Thc thc={message} {forceAsHtml} />
+		<div class={twMerge("content", "flex-1 px-4 py-3", classContent)}>
+			<Thc thc={_message} {forceAsHtml} />
 		</div>
 
-		{#if typeof onDismiss === 'function'}
-			<button class={twMerge2(_collectClasses('dismiss'))} on:click={() => onDismiss()}>
-				<X class={twMerge2(_collectClasses('x'))} strokeWidth={1.5} />
+		{#if typeof onDismiss === "function"}
+			<button
+				onclick={() => onDismiss()}
+				class={twMerge(
+					"dismiss",
+					`hover:bg-neutral-950/5 dark:hover:bg-neutral-950/20
+                    focus-visible:bg-neutral-950/5 focus-visible:hover:bg-neutral-950/20 focus-visible:ring-0
+                    rounded rounded-l-none
+                    px-3
+                    flex items-center justify-center
+                    group`,
+					classDismiss
+				)}
+				type="button"
+			>
+				<X
+					class={twMerge("x", "opacity-75 group-hover:opacity-100", classX)}
+					strokeWidth={1.5}
+				/>
 			</button>
 		{/if}
 	</div>

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

@@ -1,38 +1,17 @@
-import { SvelteComponent } from "svelte";
-import type { TW_COLORS } from '../../utils/tw-types.js';
-import { type THC } from '../Thc/Thc.svelte';
-export declare class DismissibleMessageConfig {
-    static class: {
-        box: string;
-        content: string;
-        dismiss: string;
-        x: string;
-    };
+import type { TW_COLORS } from "../../types.js";
+import { type THC } from "../Thc/Thc.svelte";
+import "./index.css";
+interface Props {
+    class?: string;
+    classContent?: string;
+    classDismiss?: string;
+    classX?: string;
+    message: THC | Error;
+    theme?: TW_COLORS;
+    forceAsHtml?: boolean;
+    duration?: number;
+    onDismiss?: (() => void) | null | false;
 }
-declare const __propDef: {
-    props: {
-        class?: {
-            box?: string;
-            content?: string;
-            dismiss?: string;
-            x?: string;
-        };
-        duration?: number;
-        message: THC | Error;
-        onDismiss?: (() => void) | null | false;
-        theme?: "primary" | "secondary" | TW_COLORS;
-        forceAsHtml?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type DismissibleMessageProps = typeof __propDef.props;
-export type DismissibleMessageEvents = typeof __propDef.events;
-export type DismissibleMessageSlots = typeof __propDef.slots;
-export default class DismissibleMessage extends SvelteComponent<DismissibleMessageProps, DismissibleMessageEvents, DismissibleMessageSlots> {
-}
-export {};
+declare const DismissibleMessage: import("svelte").Component<Props, {}, "">;
+type DismissibleMessage = ReturnType<typeof DismissibleMessage>;
+export default DismissibleMessage;

package/dist/components/DismissibleMessage/index.css

@@ -0,0 +1,13 @@
+@import "../../_shared.css";
+
+/* prettier-ignore */
+@theme inline {
+	--color-dismiss-bg: var(--color-dismiss-bg, var(--color-neutral-200));
+	--color-dismiss-bg-dark: var(--color-dismiss-bg-dark, var(--color-neutral-700));
+
+	--color-dismiss-text: var(--color-dismiss-text, var(--color-neutral-700));
+	--color-dismiss-text-dark: var(--color-dismiss-text-dark, var(--color-neutral-200));
+
+	--color-dismiss-border: var(--color-dismiss-border, var(--color-neutral-500));
+	--color-dismiss-border-dark: var(--color-dismiss-border-dark, var(--color-neutral-500));
+}

package/dist/components/DismissibleMessage/index.d.ts

@@ -0,0 +1 @@
+export { default as DismissibleMessage } from "./DismissibleMessage.svelte";

package/dist/components/DismissibleMessage/index.js

@@ -0,0 +1 @@
+export { default as DismissibleMessage } from "./DismissibleMessage.svelte";