@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Input/_internal/InputWrap.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { slide } from "svelte/transition";
+	import type { ValidationResult } from "../../../actions/validate.svelte.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
+	import Thc, { isTHCNotEmpty, type THC } from "../../Thc/Thc.svelte";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	interface Props {
+		id: string;
+		size?: "sm" | "md" | "lg" | string;
+		class?: string;
+		label?: SnippetWithId | THC;
+		labelAfter?: SnippetWithId | THC;
+		inputBefore?: SnippetWithId | THC;
+		children: Snippet;
+		inputAfter?: SnippetWithId | THC;
+		inputBelow?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		required?: boolean;
+		disabled?: boolean;
+		validation?: ValidationResult | undefined;
+		//
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		//
+		classLabel?: string;
+		classLabelBox?: string;
+		classInputBox?: string;
+		classInputBoxWrap?: string;
+		classDescBox?: string;
+		classBelowBox?: string;
+		classValidationBox?: string;
+		style?: string;
+	}
+	let {
+		id,
+		size = "md",
+		class: classProp,
+		label,
+		labelAfter,
+		inputBefore,
+		children,
+		inputAfter,
+		inputBelow,
+		description,
+		below,
+		required = false,
+		disabled = false,
+		validation,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classDescBox,
+		classBelowBox,
+		classValidationBox,
+		style,
+	}: Props = $props();
+
+	let invalid = $derived(validation && !validation?.valid);
+
+	let width = $state<number>(0);
+
+	$effect(() => {
+		// a non-zero breakpoint has priority
+		if (labelLeftBreakpoint) {
+			labelLeft = !(width && width < labelLeftBreakpoint);
+		}
+	});
+
+	let _classCommon = $derived(
+		[invalid && "invalid", disabled && "disabled", required && "required", size]
+			.filter(Boolean)
+			.join(" ")
+	);
+
+	let hasLabel = $derived(isTHCNotEmpty(label) || typeof label === "function");
+
+	const _preset = {
+		label: {
+			size: {
+				sm: "text-sm",
+				lg: "font-semibold",
+			} as any,
+		},
+		inputBox: {
+			size: {
+				sm: "text-sm",
+			} as any,
+		},
+	};
+</script>
+
+{#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
+	{#if typeof value === "function"}
+		{@render value({ id })}
+	{:else if value}
+		<Thc thc={value} forceAsHtml />
+	{/if}
+{/snippet}
+
+<div
+	class={twMerge(
+		"stuic-input",
+		_classCommon,
+		"mb-8 grid",
+		hasLabel && labelLeft && labelLeftWidth === "normal" && "width-normal grid-cols-4",
+		hasLabel && labelLeft && labelLeftWidth === "wide" && "width-wide grid-cols-3",
+		classProp
+	)}
+	bind:clientWidth={width}
+	{style}
+>
+	<div
+		class={twMerge(
+			"label-box",
+			_classCommon,
+			"flex",
+			labelLeft ? "left items-start mt-2" : "items-end",
+			classLabelBox
+		)}
+	>
+		{#if label}
+			<label
+				for={id}
+				class={twMerge(
+					"block",
+					_classCommon,
+					"flex-1 px-2 mb-1 text-base",
+					required && "after:content-['*'] after:opacity-40 after:pl-1",
+					_preset.label.size[size],
+					classLabel
+				)}
+			>
+				{@render snippetOrThc({ id, value: label })}
+			</label>
+		{/if}
+
+		{@render snippetOrThc({ id, value: labelAfter })}
+	</div>
+
+	<div
+		class={twMerge(
+			"input-box",
+			_classCommon,
+			hasLabel && labelLeft && labelLeftWidth === "normal" && "col-span-3",
+			hasLabel && labelLeft && labelLeftWidth === "wide" && "col-span-2",
+			classInputBox
+		)}
+	>
+		<div
+			class={twMerge(
+				"input-wrap",
+				_classCommon,
+				`rounded-md border border-neutral-300 dark:border-neutral-600
+				bg-neutral-100 dark:bg-neutral-700
+				focus-within:border-input-accent focus-within:dark:border-input-accent-dark
+				focus-within:ring-input-accent/20 focus-within:dark:ring-input-accent-dark/20
+				focus-within:ring-4`,
+				invalid && "border-input-accent dark:border-input-accent-dark",
+				disabled && "cursor-not-allowed opacity-50",
+				_preset.inputBox.size[size],
+				classInputBoxWrap
+			)}
+		>
+			<div class="flex">
+				{@render snippetOrThc({ id, value: inputBefore })}
+				{@render children()}
+				{@render snippetOrThc({ id, value: inputAfter })}
+			</div>
+			{@render snippetOrThc({ id, value: inputBelow })}
+		</div>
+
+		{#if validation && !validation?.valid}
+			<div
+				transition:slide={{ duration: 150 }}
+				class={twMerge(
+					"validation-box",
+					_classCommon,
+					"my-1 text-xs px-2 text-input-accent dark:text-input-accent-dark",
+					classValidationBox
+				)}
+			>
+				{@html validation.message}
+			</div>
+		{/if}
+
+		{#if description}
+			<div
+				class={twMerge(
+					"desc-box",
+					_classCommon,
+					"mx-2 mt-1 text-sm opacity-50",
+					classDescBox
+				)}
+			>
+				{@render snippetOrThc({ id, value: description })}
+			</div>
+		{/if}
+
+		{#if below}
+			<div class={twMerge("below-box", _classCommon, "mx-2 my-1", classBelowBox)}>
+				{@render snippetOrThc({ id, value: below })}
+			</div>
+		{/if}
+	</div>
+</div>

package/dist/components/Input/_internal/InputWrap.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from "svelte";
+import type { ValidationResult } from "../../../actions/validate.svelte.js";
+import { type THC } from "../../Thc/Thc.svelte";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+interface Props {
+    id: string;
+    size?: "sm" | "md" | "lg" | string;
+    class?: string;
+    label?: SnippetWithId | THC;
+    labelAfter?: SnippetWithId | THC;
+    inputBefore?: SnippetWithId | THC;
+    children: Snippet;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    required?: boolean;
+    disabled?: boolean;
+    validation?: ValidationResult | undefined;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    classLabel?: string;
+    classLabelBox?: string;
+    classInputBox?: string;
+    classInputBoxWrap?: string;
+    classDescBox?: string;
+    classBelowBox?: string;
+    classValidationBox?: string;
+    style?: string;
+}
+declare const InputWrap: import("svelte").Component<Props, {}, "">;
+type InputWrap = ReturnType<typeof InputWrap>;
+export default InputWrap;

package/dist/components/Input/index.css

@@ -0,0 +1,134 @@
+@import "../../_shared.css";
+@plugin '@tailwindcss/forms';
+
+/* prettier-ignore */
+@theme inline {
+	--color-input-accent: var(--color-input-accent, var(--color-red-600));
+	--color-input-accent-dark: var(--color-input-accent-dark, var(--color-red-400));
+}
+
+.stuic-input {
+	.form-input {
+		@apply rounded-md border-0 w-full flex-1
+			text-base placeholder:text-base
+			bg-transparent
+			tracking-tight
+			focus:outline-0 focus-visible:ring-0
+			placeholder:tracking-tight
+			placeholder:text-neutral-950/35 dark:placeholder:text-neutral-50/35
+			text-neutral-950 dark:text-neutral-50;
+		&.sm {
+			@apply text-sm placeholder:text-sm;
+		}
+		&.lg {
+			@apply text-lg placeholder:text-lg;
+		}
+	}
+
+	select.form-input {
+		@apply pr-8;
+	}
+
+	textarea {
+		scrollbar-width: thin;
+	}
+
+	/* https://danielstern.ca/range.css/ */
+	input[type="range"] {
+		--thumb-width: 18px;
+		--thumb-height: 18px;
+		--thumb-border-radius: 100%;
+		--track-border-radius: 18px;
+		--track-height: 4px;
+		--track-bg: #808080;
+
+		width: 100%;
+		/* margin: 7px 0; */
+		margin: calc((var(--thumb-height) - var(--track-height)) / 2) 0;
+		background-color: transparent;
+		appearance: none;
+
+		&:focus {
+			@apply ring-0 outline-0 border-0;
+		}
+		&::-webkit-slider-runnable-track {
+			/* background: var(--track-bg); */
+			border: 0;
+			border-radius: var(--track-border-radius);
+			width: 100%;
+			height: var(--track-height);
+			cursor: pointer;
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&::-webkit-slider-thumb {
+			/* margin-top: -7px; */
+			margin-top: calc(-1 * (var(--thumb-height) - var(--track-height)) / 2);
+			width: var(--thumb-width);
+			height: var(--thumb-height);
+			border: 0;
+			border-radius: var(--thumb-border-radius);
+			cursor: pointer;
+			-webkit-appearance: none;
+			@apply bg-input-accent dark:bg-input-accent-dark;
+		}
+		&:focus::-webkit-slider-runnable-track {
+			/* background: var(--track-bg); */
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&::-moz-range-track {
+			/* background: var(--track-bg); */
+			border: 0;
+			border-radius: var(--track-border-radius);
+			width: 100%;
+			height: var(--track-height);
+			cursor: pointer;
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&::-moz-range-thumb {
+			width: var(--thumb-width);
+			height: var(--thumb-height);
+			border: 0;
+			border-radius: var(--thumb-border-radius);
+			cursor: pointer;
+			@apply bg-input-accent dark:bg-input-accent-dark;
+		}
+		&::-ms-track {
+			background: transparent;
+			border-color: transparent;
+			border-width: calc((var(--thumb-height) - var(--track-height)) / 2) 0;
+			color: transparent;
+			width: 100%;
+			height: var(--track-height);
+			cursor: pointer;
+		}
+		&::-ms-fill-lower {
+			/* background: var(--track-bg); */
+			border: 0;
+			border-radius: var(--thumb-border-radius);
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&::-ms-fill-upper {
+			/* background: var(--track-bg); */
+			border: 0;
+			border-radius: var(--thumb-border-radius);
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&::-ms-thumb {
+			width: var(--thumb-width);
+			height: var(--thumb-height);
+			border: 0;
+			border-radius: var(--thumb-border-radius);
+			cursor: pointer;
+			margin-top: 0px;
+			@apply bg-input-accent dark:bg-input-accent-dark;
+		}
+		&:focus::-ms-fill-lower {
+			/* background: var(--track-bg); */
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+		&:focus::-ms-fill-upper {
+			/* background: var(--track-bg); */
+			@apply bg-neutral-300 dark:bg-neutral-600;
+		}
+	}
+}

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

@@ -0,0 +1,11 @@
+export * from "./types.js";
+export { default as FieldCheckbox } from "./FieldCheckbox.svelte";
+export { default as FieldFile } from "./FieldFile.svelte";
+export { default as FieldInput } from "./FieldInput.svelte";
+export { default as FieldLikeButton } from "./FieldLikeButton.svelte";
+export { default as FieldOptions } from "./FieldOptions.svelte";
+export { default as FieldRadios } from "./FieldRadios.svelte";
+export { default as FieldSelect } from "./FieldSelect.svelte";
+export { default as Fieldset } from "./Fieldset.svelte";
+export { default as FieldSwitch } from "./FieldSwitch.svelte";
+export { default as FieldTextarea } from "./FieldTextarea.svelte";

package/dist/components/Input/index.js

@@ -0,0 +1,11 @@
+export * from "./types.js";
+export { default as FieldCheckbox } from "./FieldCheckbox.svelte";
+export { default as FieldFile } from "./FieldFile.svelte";
+export { default as FieldInput } from "./FieldInput.svelte";
+export { default as FieldLikeButton } from "./FieldLikeButton.svelte";
+export { default as FieldOptions } from "./FieldOptions.svelte";
+export { default as FieldRadios } from "./FieldRadios.svelte";
+export { default as FieldSelect } from "./FieldSelect.svelte";
+export { default as Fieldset } from "./Fieldset.svelte";
+export { default as FieldSwitch } from "./FieldSwitch.svelte";
+export { default as FieldTextarea } from "./FieldTextarea.svelte";

package/dist/components/Input/types.d.ts

@@ -0,0 +1,11 @@
+import type { THC } from "../Thc/Thc.svelte";
+export interface FieldSelectOption {
+    label: string;
+    value?: string;
+    optgroup?: string;
+}
+export interface FieldRadiosOption {
+    label: string;
+    value?: string;
+    description?: THC;
+}

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+	type KnownMeta = "cmd" | "opt" | "shift" | "ctrl" | "alt" | "win" | "meta";
+
+	// just the base ones...
+	// Windows Ctrl         → macOS Command (⌘)
+	// Windows Alt          → macOS Option (⌥)
+	// Windows Shift        → macOS Shift (⇧)
+
+	export const macToOther: Partial<Record<KnownMeta, KnownMeta>> = {
+		cmd: "win",
+	};
+
+	export const otherToMac: Partial<Record<KnownMeta, KnownMeta>> = {
+		win: "cmd",
+	};
+
+	export const macSymbol: Partial<Record<KnownMeta, string>> = {
+		meta: "⌘",
+		cmd: "⌘",
+		shift: "⇧",
+		ctrl: "⌃",
+		alt: "⌥",
+	};
+
+	export const otherSymbol: Partial<Record<KnownMeta, string>> = {
+		meta: "⊞",
+		win: "⊞",
+		shift: "⇧",
+	};
+</script>
+
+<script lang="ts">
+	import { isMac } from "../../utils/is-mac.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { ucfirst } from "../../utils/ucfirst.js";
+
+	/**
+	 * This needs more thoughts... now just quick-n-dirty...
+	 */
+
+	interface Props {
+		class?: string;
+		metas?: KnownMeta[];
+		keys: string;
+		forcedOs?: "mac" | "win" | "linux";
+	}
+
+	let { class: classProp, metas, keys, forcedOs }: Props = $props();
+
+	function wrap(s: string, mac: boolean) {
+		const cls = ["pr-0.5 font-mono tracking-tight"];
+		const sym = mac ? macSymbol[s as KnownMeta] : otherSymbol[s as KnownMeta];
+		if (sym) {
+			s = sym;
+			cls.push("font-sans pr-0");
+		}
+		const _class = twMerge(...cls);
+		return `<span class="${_class}">${ucfirst(s)}</span>`;
+	}
+
+	async function get_meta_key() {
+		if (!metas?.length) return "";
+		const mac = forcedOs ? forcedOs === "mac" : await isMac();
+		const replace = mac ? otherToMac : macToOther;
+		const kk = (metas || []).map((m) => wrap(replace[m] ?? m, mac));
+		const _unique = uniq(kk);
+		if (_unique.length !== kk.length) {
+			console.warn(
+				`Some meta keys (${metas.join(", ")}) were mapped as duplicates for this OS (${mac ? "MacOS" : "not MacOS"})`
+			);
+		}
+		return _unique.join("");
+	}
+
+	function uniq(s: string[]) {
+		return [...new Set(s)];
+	}
+</script>
+
+<kbd
+	class={twMerge(
+		"text-xs leading-0 space-x-0.5 rounded px-1 py-0 outline outline-neutral-400",
+		classProp
+	)}
+>
+	{#await get_meta_key() then metaKey}
+		<span class="font-sans">{@html metaKey}</span><span>{keys}</span>
+	{/await}
+</kbd>

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

@@ -0,0 +1,17 @@
+type KnownMeta = "cmd" | "opt" | "shift" | "ctrl" | "alt" | "win" | "meta";
+export declare const macToOther: Partial<Record<KnownMeta, KnownMeta>>;
+export declare const otherToMac: Partial<Record<KnownMeta, KnownMeta>>;
+export declare const macSymbol: Partial<Record<KnownMeta, string>>;
+export declare const otherSymbol: Partial<Record<KnownMeta, string>>;
+/**
+ * This needs more thoughts... now just quick-n-dirty...
+ */
+interface Props {
+    class?: string;
+    metas?: KnownMeta[];
+    keys: string;
+    forcedOs?: "mac" | "win" | "linux";
+}
+declare const KbdShortcut: import("svelte").Component<Props, {}, "">;
+type KbdShortcut = ReturnType<typeof KbdShortcut>;
+export default KbdShortcut;

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

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

package/dist/components/KbdShortcut/index.js

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

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import Backdrop from "../Backdrop/Backdrop.svelte";
+	import { type FocusTrapOptions } from "../../actions/focus-trap.js";
+	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	const prefersReduced = prefersReducedMotion();
+
+	interface Props {
+		visible?: boolean;
+		children: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+		classBackdrop?: string;
+		classInner?: string;
+		class?: string;
+		classHeader?: string;
+		classMain?: string;
+		classFooter?: string;
+
+		labelledby?: string;
+		describedby?: string;
+		transitionDuration?: number;
+		elBackdrop?: HTMLDivElement;
+		el?: HTMLDivElement;
+		focusTrap?: boolean | FocusTrapOptions;
+		onEscape?: undefined | (() => void);
+
+		noScrollLock?: boolean;
+	}
+
+	let {
+		visible = $bindable(false),
+		children,
+		header,
+		footer,
+		classBackdrop,
+		classInner,
+		class: classProp,
+		classHeader,
+		classMain,
+		classFooter,
+		labelledby,
+		describedby,
+		transitionDuration = 100,
+		// transitionEnabled = true,
+		elBackdrop = $bindable(),
+		el = $bindable(),
+		focusTrap = true,
+		onEscape,
+		noScrollLock = false,
+	}: Props = $props();
+
+	let backdrop: Backdrop = $state()!;
+
+	export function close() {
+		backdrop.close();
+	}
+
+	export function open(openerOrEvent?: null | HTMLElement | MouseEvent) {
+		backdrop.open(openerOrEvent);
+	}
+
+	export function setOpener(opener?: null | HTMLElement) {
+		backdrop.setOpener(opener);
+	}
+
+	export function visibility() {
+		return backdrop.visibility();
+	}
+</script>
+
+<Backdrop
+	bind:this={backdrop}
+	bind:el={elBackdrop}
+	bind:visible
+	class={twMerge(
+		"justify-center items-center bg-black/25 p-2 sm:p-4 md:p-[10vh] transition-all",
+		classBackdrop
+	)}
+	{focusTrap}
+	fadeOutDuration={transitionDuration}
+	{onEscape}
+	{noScrollLock}
+>
+	<div
+		bind:this={el}
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={labelledby}
+		aria-describedby={describedby}
+		class={twMerge(
+			"overflow-x-hidden overflow-y-hidden w-full h-full max-w-3xl",
+			// "overflow-y-auto w-full h-full max-w-3xl max-h-[66vh] border",
+			classInner
+		)}
+	>
+		<div
+			class={twMerge(
+				"bg-white dark:bg-neutral-800 rounded-md flex flex-col overflow-hidden",
+				"w-full max-h-full md:max-h-2/3",
+				classProp
+			)}
+		>
+			{#if header}
+				<div class={twMerge("header", classHeader)}>
+					{@render header()}
+				</div>
+			{/if}
+			<div class={twMerge("main overflow-auto flex-1", classMain)}>
+				{@render children()}
+			</div>
+			{#if footer}
+				<div class={twMerge("footer", classFooter)}>
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	</div>
+</Backdrop>
+
+<style>
+	.main {
+		scrollbar-width: thin;
+	}
+</style>

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

@@ -0,0 +1,32 @@
+import type { Snippet } from "svelte";
+import { type FocusTrapOptions } from "../../actions/focus-trap.js";
+interface Props {
+    visible?: boolean;
+    children: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+    classBackdrop?: string;
+    classInner?: string;
+    class?: string;
+    classHeader?: string;
+    classMain?: string;
+    classFooter?: string;
+    labelledby?: string;
+    describedby?: string;
+    transitionDuration?: number;
+    elBackdrop?: HTMLDivElement;
+    el?: HTMLDivElement;
+    focusTrap?: boolean | FocusTrapOptions;
+    onEscape?: undefined | (() => void);
+    noScrollLock?: boolean;
+}
+declare const Modal: import("svelte").Component<Props, {
+    close: () => void;
+    open: (openerOrEvent?: null | HTMLElement | MouseEvent) => void;
+    setOpener: (opener?: null | HTMLElement) => void;
+    visibility: () => {
+        readonly visible: boolean;
+    };
+}, "el" | "visible" | "elBackdrop">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

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

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

package/dist/components/Modal/index.js

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