@marianmeres/stuic 1.125.0 → 2.0.0-next.2

package/dist/components/Backdrop/Backdrop.svelte

@@ -1,53 +1,153 @@
-<script context="module">export class BackdropConfig {
-  static class = "";
-  static fadeInDuration = 50;
-  static fadeOutDuration = 150;
-}
+<script lang="ts" module>
+	const _instances = [];
 </script>
 
-<script>import { createEventDispatcher } from "svelte";
-import { fade } from "svelte/transition";
-import { focusTrap } from "../../actions/focus-trap.js";
-import { prefersReducedMotionStore } from "../../utils/prefers-reduced-motion.js";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-const dispatch = createEventDispatcher();
-export let useFocusTrap = true;
-export let focusTrapOptions = {};
-let _class = "";
-export { _class as class };
-export let fadeInDuration = BackdropConfig.fadeInDuration;
-export let fadeOutDuration = BackdropConfig.fadeOutDuration;
-export let transitionEnabled = !$prefersReducedMotionStore;
-$:
-  if (!transitionEnabled) {
-    fadeInDuration = 0;
-    fadeOutDuration = 0;
-  }
-let el;
-$:
-  if (el)
-    dispatch("element", { backdrop: el });
+<script lang="ts">
+	import {
+		focusTrap as focusTrapAction,
+		twMerge,
+		waitForNextRepaint,
+		type FocusTrapOptions,
+	} from "../../index.js";
+	import { createClog } from "@marianmeres/clog";
+	import { PressedKeys, watch } from "runed";
+	import { type Snippet } from "svelte";
+	import { fade } from "svelte/transition";
+
+	const clog = createClog("Backdrop").debug;
+
+	interface Props extends Record<string, any> {
+		class?: string;
+		focusTrap?: boolean | FocusTrapOptions;
+		fadeInDuration?: number;
+		fadeOutDuration?: number;
+		transitionEnabled?: boolean;
+		el?: HTMLDivElement;
+		children?: Snippet;
+		onEscape?: () => void;
+		visible?: boolean;
+		noScrollLock?: boolean;
+	}
+
+	let {
+		class: classProp,
+		focusTrap = true,
+		fadeInDuration = 50,
+		fadeOutDuration = 150,
+		transitionEnabled = true,
+		el = $bindable(),
+		children,
+		onEscape,
+		visible = $bindable(false),
+		noScrollLock,
+		...rest
+	}: Props = $props();
+
+	let _opener: undefined | null | HTMLElement = $state();
+
+	// let keys = new PressedKeys();
+	// let isEscapePressed = $derived(keys.has("Escape"));
+	// $effect(() => {
+	// 	if (isEscapePressed && typeof onEscape === "function") {
+	// 		// clog("Executing onEscape...");
+	// 		onEscape();
+	// 	}
+	// });
+
+	$effect(() => {
+		if (!transitionEnabled) {
+			fadeInDuration = 0;
+			fadeOutDuration = 0;
+		}
+	});
+
+	export function close() {
+		visible = false;
+	}
+
+	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		visible = true;
+		setOpener(
+			(openerOrEvent as any)?.currentTarget ?? openerOrEvent ?? document.activeElement
+		);
+	}
+
+	export function setOpener(opener?: null | HTMLElement) {
+		_opener = opener;
+	}
+
+	export function visibility() {
+		return {
+			get visible() {
+				return visible;
+			},
+		};
+	}
+
+	watch(
+		() => visible,
+		(isVisible, wasVisible) => {
+			if (wasVisible && !isVisible && _opener) {
+				_opener?.focus();
+				_opener = null;
+			}
+		}
+	);
+
+	// lock body scroll when open and restore back
+	let _original: any = {};
+	$effect(() => {
+		if (noScrollLock) return;
+		if (visible) {
+			_original = window.getComputedStyle(document.body);
+			const scrollY = window.scrollY;
+
+			document.body.style.position = "fixed";
+			document.body.style.top = `-${scrollY}px`;
+			document.body.style.width = "100%";
+			document.body.style.overflow = "hidden";
+		} else {
+			const scrollY = document.body.style.top;
+
+			document.body.style.position = _original.position;
+			document.body.style.position = "";
+			document.body.style.top = "";
+			document.body.style.width = "";
+			document.body.style.overflow = "";
+
+			// Restore scroll position
+			window.scrollTo(0, parseInt(scrollY || "0") * -1);
+		}
+	});
+
+	$effect(() => {
+		function onkeydown(e: KeyboardEvent) {
+			if (e.key === "Escape" && typeof onEscape === "function") {
+				e.stopPropagation();
+				e.stopImmediatePropagation();
+				e.preventDefault();
+				onEscape();
+			}
+		}
+		el?.addEventListener("keydown", onkeydown);
+		return () => el?.removeEventListener("keydown", onkeydown);
+	});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- prettier-ignore -->
-<div
-	bind:this={el}
-	class={twMerge2(`
-		fixed inset-0 flex z-10 
-		${BackdropConfig.class} ${_class}
-	`.trim())}
-	on:click
-	on:mousedown
-	on:mouseup
-	on:touchstart|passive
-	on:touchend|passive
-	on:keydown={(e) => e.code === 'Escape' && dispatch('escape')}
-	in:fade={{ duration: fadeInDuration }}
-	out:fade={{ duration: fadeOutDuration }}
-	use:focusTrap={{ enabled: useFocusTrap, ...(focusTrapOptions || {}) }}
-	role="presentation"
-	tabindex="-1" 
->
-	<slot />
-</div>
+{#if visible}
+	<div
+		bind:this={el}
+		role="presentation"
+		tabindex="-1"
+		class={twMerge("fixed inset-0 flex z-10", classProp)}
+		in:fade={{ duration: fadeInDuration }}
+		out:fade={{ duration: fadeOutDuration }}
+		use:focusTrapAction={{
+			...(typeof focusTrap === "object" ? focusTrap : {}),
+			enabled: typeof focusTrap === "boolean" ? focusTrap : !!focusTrap.enabled,
+		}}
+		{...rest}
+	>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -1,39 +1,24 @@
-import { SvelteComponent } from "svelte";
-export declare class BackdropConfig {
-    static class: string;
-    static fadeInDuration: number;
-    static fadeOutDuration: number;
+import { type FocusTrapOptions } from "../../index.js";
+import { type Snippet } from "svelte";
+interface Props extends Record<string, any> {
+    class?: string;
+    focusTrap?: boolean | FocusTrapOptions;
+    fadeInDuration?: number;
+    fadeOutDuration?: number;
+    transitionEnabled?: boolean;
+    el?: HTMLDivElement;
+    children?: Snippet;
+    onEscape?: () => void;
+    visible?: boolean;
+    noScrollLock?: boolean;
 }
-import { type FocusTrapOptions } from '../../actions/focus-trap.js';
-declare const __propDef: {
-    props: {
-        useFocusTrap?: boolean;
-        focusTrapOptions?: Partial<FocusTrapOptions>;
-        class?: string;
-        fadeInDuration?: number;
-        fadeOutDuration?: number;
-        transitionEnabled?: boolean;
+declare const Backdrop: import("svelte").Component<Props, {
+    close: () => void;
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    setOpener: (opener?: null | HTMLElement) => void;
+    visibility: () => {
+        readonly visible: boolean;
     };
-    events: {
-        click: MouseEvent;
-        mousedown: MouseEvent;
-        mouseup: MouseEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        escape: CustomEvent<any>;
-        element: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type BackdropProps = typeof __propDef.props;
-export type BackdropEvents = typeof __propDef.events;
-export type BackdropSlots = typeof __propDef.slots;
-export default class Backdrop extends SvelteComponent<BackdropProps, BackdropEvents, BackdropSlots> {
-}
-export {};
+}, "el" | "visible">;
+type Backdrop = ReturnType<typeof Backdrop>;
+export default Backdrop;

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

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

package/dist/components/Backdrop/index.js

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

package/dist/components/Button/Button.svelte

@@ -1,155 +1,131 @@
-<script context="module">import { twMerge2 } from "../../utils/tw-merge2.js";
-export class ButtonConfig {
-  static defaultSize = "md";
-  static defaultShadow = false;
-  static defaultRounded = true;
-  static defaultVariant = void 0;
-  static presetBase = `
-			text-center 
-			inline-flex items-center gap-x-2
-			hover:brightness-[1.05]
-			active:brightness-[0.95]
-			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
-			no-underline
-			border border-neutral-300  dark:border-neutral-500
-			
-			     bg-neutral-200      text-neutral-950
-			dark:bg-neutral-600 dark:text-neutral-50
-		`.trim();
-  static presetSquare = "p-0 aspect-square justify-center";
-  static presetsRounded = {
-    xs: "rounded",
-    sm: "rounded",
-    md: "rounded",
-    lg: "rounded-md",
-    xl: "rounded-lg"
-  };
-  static presetsShadow = {
-    xs: "shadow-sm dark:shadow-neutral-950",
-    sm: "shadow    dark:shadow-neutral-950",
-    md: "shadow    dark:shadow-neutral-950",
-    lg: "shadow-md dark:shadow-neutral-950",
-    xl: "shadow-md dark:shadow-neutral-950"
-  };
-  static presetsSize = {
-    xs: "px-2   py-0.5 leading-tight text-xs",
-    sm: "px-2.5 py-0.5 leading-normal text-sm",
-    md: "px-3   py-1   leading-normal text-sm",
-    lg: "px-4   py-1.5 leading-normal text-base",
-    xl: "px-4   py-2   leading-normal text-lg"
-  };
-  static classBySize = {
-    xs: "",
-    sm: "",
-    md: "",
-    lg: "",
-    xl: ""
-  };
-  static class = "";
-  // to be defined at consumer level...
-  static variant = {
-    primary: `
-				     bg-stuic-primary             text-stuic-on-primary
-				dark:bg-stuic-primary-dark   dark:text-stuic-on-primary-dark
-			`.trim(),
-    secondary: `
-				     bg-stuic-secondary           text-stuic-on-secondary
-				dark:bg-stuic-secondary-dark dark:text-stuic-on-secondary-dark
-			`.trim()
-  };
-}
+<script lang="ts" module>
+	export const BUTTON_STUIC_BASE_CLASSES = `
+		bg-button-bg text-button-text 
+		dark:bg-button-bg-dark dark:text-button-text-dark
+		font-mono text-sm text-center 
+		leading-4
+		border-1
+		border-button-border dark:border-button-border-dark
+		rounded-md
+		inline-flex items-center justify-center gap-x-2
+		px-3 py-1.5
+
+		hover:brightness-[1.05]
+		active:brightness-[0.95]
+		disabled:hover:brightness-100
+
+		focus:brightness-[1.05] 
+		focus:border-button-border-focus focus:dark:border-button-border-focus-dark
+
+		        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20
+		focus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20
+	`;
+
+	export const BUTTON_STUIC_PRESET_CLASSES: any = {
+		size: {
+			sm: `text-xs rounded-sm px-2 py-0.5`,
+			lg: `text-base rounded-md`,
+		},
+		variant: {
+			primary: `font-medium`,
+			secondary: `
+				bg-neutral-100 dark:bg-neutral-600
+				text-black/60 dark:text-white/80 
+				shadow-[1px_1px_0_0_rgba(0_0_0_/_.2)]
+				active:shadow-none active:translate-[1px]
+				focus:shadow-black/30
+			`,
+		},
+		muted: `text-black/70 dark:text-white/70`,
+		shadow: `
+			shadow-[1px_1px_0_0_rgba(0_0_0_/_.4)]
+			active:shadow-none active:translate-[1px]
+			disabled:shadow-none disabled:active:shadow-none disabled:active:translate-none
+		`,
+	};
 </script>
 
-<script>let _class = "";
-export { _class as class };
-export let href = "";
-export let type = "button";
-export let shadow = ButtonConfig.defaultShadow;
-export let rounded = ButtonConfig.defaultRounded;
-export let variant = ButtonConfig.defaultVariant;
-export let square = false;
-export let disabled = false;
-export let value = void 0;
-const _whitelist = ["xs", "sm", "md", "lg", "xl"];
-export let size = ButtonConfig.defaultSize;
-$:
-  if (!_whitelist.includes(size))
-    size = ButtonConfig.defaultSize;
-let buttonClass;
-$:
-  buttonClass = twMerge2(
-    ButtonConfig.presetBase,
-    // either full, or config, or none
-    rounded ? rounded === "full" || square ? "rounded-full" : ButtonConfig.presetsRounded[size] : "",
-    //
-    shadow && ButtonConfig.presetsShadow[size],
-    //
-    ButtonConfig.presetsSize[size],
-    //
-    ButtonConfig.classBySize[size],
-    //
-    ButtonConfig.class,
-    //
-    variant && `${variant || ""}`.split(" ").reduce((m, v) => {
-      m += ButtonConfig.variant?.[v] + " ";
-      return m;
-    }, " "),
-    //
-    square && ButtonConfig.presetSquare,
-    //
-    _class
-  );
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { twMerge } from "../../utils/tw-merge.js";
+	//
+	import "./index.css";
+
+	// interface Props extends DataAttributes, Partial<Omit<HTMLButtonElement, 'children'>> {
+	interface Props extends HTMLButtonAttributes {
+		variant?: "primary" | "secondary" | string;
+		size?: "sm" | "md" | "lg" | string;
+		muted?: boolean;
+		noshadow?: boolean;
+		unstyled?: boolean;
+		class?: string;
+		href?: string;
+		children?: Snippet<[{ checked?: boolean }]>;
+		// support for switch
+		roleSwitch?: boolean;
+		checked?: boolean;
+		el?: Element;
+	}
+
+	let {
+		variant,
+		size,
+		class: classProp,
+		muted,
+		noshadow,
+		unstyled,
+		href,
+		children,
+		//
+		roleSwitch = false,
+		checked = $bindable(false),
+		el = $bindable(),
+		//
+		...rest
+	}: Props = $props();
+
+	// let button: HTMLButtonElement | undefined = $state();
+
+	$effect(() => {
+		const toggle = () => (checked = !checked);
+		if (!href && roleSwitch && el) {
+			el?.addEventListener("click", toggle);
+		}
+		return () => el?.removeEventListener("click", toggle);
+	});
+
+	const _base = BUTTON_STUIC_BASE_CLASSES;
+	const _preset: any = BUTTON_STUIC_PRESET_CLASSES;
+
+	// see button.css
+	let _class = $derived(
+		[
+			// "namespace" (so we can target it in css files when customizing)
+			"stuic-button",
+			// pass all styling props as classnames as well
+			variant,
+			size,
+			muted && "muted",
+			noshadow && "no-shadow",
+			// 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,
+		]
+			.filter(Boolean)
+			.join(" ")
+	);
 </script>
 
 {#if href}
-	<a
-		{href}
-		class={buttonClass}
-		{...$$restProps}
-		role="button"
-		data-button-size={size}
-		data-button-shadow={shadow}
-		data-button-rounded={rounded}
-		data-button-variant={variant}
-		on:focus
-		on:blur
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:touchstart|passive
-		on:touchend|passive
-		on:touchmove|passive
-		on:touchcancel
-		on:mouseenter
-		on:mouseleave
-	>
-		<slot />
+	<a {href} bind:this={el} class={twMerge(_class, classProp)} {...rest as any}>
+		{@render children?.({})}
 	</a>
 {:else}
-	<button
-		{type}
-		{disabled}
-		class={buttonClass}
-		{value}
-		data-button-size={size}
-		data-button-shadow={shadow}
-		data-button-rounded={rounded}
-		data-button-variant={variant}
-		{...$$restProps}
-		on:focus
-		on:blur
-		on:click
-		on:change
-		on:keydown
-		on:keyup
-		on:touchstart|passive
-		on:touchend|passive
-		on:touchmove|passive
-		on:touchcancel
-		on:mouseenter
-		on:mouseleave
-	>
-		<slot />
+	<button bind:this={el} class={twMerge(_class, classProp)} {...rest}>
+		{@render children?.({ checked })}
 	</button>
 {/if}

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

@@ -1,81 +1,23 @@
-import { SvelteComponent } from "svelte";
-export declare class ButtonConfig {
-    static defaultSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    static defaultShadow: boolean;
-    static defaultRounded: boolean;
-    static defaultVariant: string | undefined;
-    static presetBase: string;
-    static presetSquare: string;
-    static presetsRounded: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static presetsShadow: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static presetsSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static classBySize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static class: string;
-    static variant: Record<string, string>;
+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-4\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-1.5\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_PRESET_CLASSES: any;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import "./index.css";
+interface Props extends HTMLButtonAttributes {
+    variant?: "primary" | "secondary" | string;
+    size?: "sm" | "md" | "lg" | string;
+    muted?: boolean;
+    noshadow?: boolean;
+    unstyled?: boolean;
+    class?: string;
+    href?: string;
+    children?: Snippet<[{
+        checked?: boolean;
+    }]>;
+    roleSwitch?: boolean;
+    checked?: boolean;
+    el?: Element;
 }
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string | undefined;
-        href?: string | undefined;
-        type?: "reset" | "submit" | "button" | null | undefined;
-        shadow?: boolean | undefined;
-        rounded?: boolean | "full" | undefined;
-        variant?: string | undefined | undefined;
-        square?: boolean | undefined;
-        disabled?: boolean | undefined;
-        value?: string | undefined | undefined;
-        size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
-    };
-    events: {
-        focus: FocusEvent;
-        blur: FocusEvent;
-        click: MouseEvent;
-        change: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-export default class Button extends SvelteComponent<ButtonProps, ButtonEvents, ButtonSlots> {
-}
-export {};
+declare const Button: import("svelte").Component<Props, {}, "checked" | "el">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/Button/index.css

@@ -0,0 +1,16 @@
+@import "../../_shared.css";
+
+/* prettier-ignore */
+@theme inline {
+	--color-button-bg: var(--color-button-bg, var(--color-neutral-200));
+	--color-button-bg-dark: var(--color-button-bg-dark, var(--color-neutral-500));
+
+	--color-button-text: var(--color-button-text, var(--color-black));
+	--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-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/Button/index.d.ts

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