@marianmeres/stuic 1.126.0 → 2.0.0-next.3

package/dist/components/Switch/Switch.svelte

@@ -1,131 +1,171 @@
-<script context="module">export class SwitchConfig {
-  static defaultSize = "md";
-  static defaultVariant = void 0;
-  static presetBase = `
-			relative inline-flex flex-shrink-0 items-center
-			m-2
-			rounded-full cursor-pointer
-			transition-colors duration-100
-			
-			hover:brightness-[1.05] active:brightness-[0.95]
-			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
-
-			bg-neutral-400 dark:bg-neutral-400
-			data-[checked=true]:bg-stuic-primary dark:data-[checked=true]:bg-stuic-primary-dark
-		`.trim();
-  static presetsSize = {
-    xs: "h-4 w-7",
-    sm: "h-5 w-9",
-    md: "h-6 w-11",
-    lg: "h-7 w-14",
-    xl: "h-8 w-16"
-  };
-  static class = "";
-  // to be defined at consumer level...
-  static variant = {};
-  // DOT
-  static presetBaseDot = `
-			block flex items-center justify-center
-			translate-x-1 rounded-full  
-			transition-all duration-100
-			shadow
-			bg-neutral-50 dark:bg-neutral-50
-			text-neutral-950 dark:text-neutral-950
-		`.trim();
-  static presetsSizeDot = {
-    // size + translate-x = width
-    xs: "size-2 data-[checked=true]:translate-x-4",
-    sm: "size-3 data-[checked=true]:translate-x-5",
-    md: "size-4 data-[checked=true]:translate-x-6",
-    lg: "size-5 data-[checked=true]:translate-x-8",
-    xl: "size-6 data-[checked=true]:translate-x-9"
-  };
-  static classDot = "";
-  // to be defined at consumer level...
-  static variantDot = {};
-}
-</script>
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+	import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import {
+		validate as validateAction,
+		type ValidateOptions,
+		type ValidationResult,
+	} from "../../actions/validate.svelte.js";
+
+	import "./index.css";
 
-<script>import { createEventDispatcher } from "svelte";
-import { twMerge2 } from "../../utils/tw-merge2.js";
-let _class = "";
-export { _class as class };
-export let classDot = "";
-export let label = "";
-export let checked = false;
-export let disabled = false;
-export let tabindex = 0;
-export let variant = SwitchConfig.defaultVariant;
-export let stopPropagation = true;
-export let preventDefault = false;
-const _defaultNoopHook = () => Promise.resolve(void 0);
-export let preHook = _defaultNoopHook;
-const _whitelist = ["xs", "sm", "md", "lg", "xl"];
-export let size = SwitchConfig.defaultSize;
-$:
-  if (!_whitelist.includes(size))
-    size = SwitchConfig.defaultSize;
-let switchClass;
-$:
-  switchClass = twMerge2(
-    SwitchConfig.presetBase,
-    SwitchConfig.presetsSize[size],
-    SwitchConfig.class,
-    variant && `${variant || ""}`.split(" ").reduce((m, v) => {
-      m += SwitchConfig.variant?.[v] + " ";
-      return m;
-    }, ""),
-    _class
-  );
-let dotClass;
-$:
-  dotClass = twMerge2(
-    SwitchConfig.presetBaseDot,
-    SwitchConfig.presetsSizeDot[size],
-    SwitchConfig.classDot,
-    classDot
-  );
-const dispatch = createEventDispatcher();
+	interface Props extends HTMLButtonAttributes {
+		button?: HTMLButtonElement;
+		checked?: boolean;
+		size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+		name?: string;
+		class?: string;
+		dotClass?: string;
+		label?: string;
+		required?: boolean;
+		disabled?: boolean;
+		tabindex?: number;
+		on?: Snippet;
+		off?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+		onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
+		preHook?: (current: boolean) => Promise<false | any>;
+		//
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		setValidationResult?: (res: ValidationResult) => void;
+	}
+
+	let {
+		button = $bindable(),
+		size = "md",
+		name,
+		class: classProp,
+		dotClass,
+		checked = $bindable(false),
+		required,
+		disabled,
+		tabindex = 0,
+		label,
+		on,
+		off,
+		onclick,
+		preHook,
+		validate,
+		setValidationResult,
+		...rest
+	}: Props = $props();
+
+	const _preset: any = {
+		size: {
+			xs: `h-4 w-7`,
+			sm: `h-5 w-9`,
+			md: `h-6 w-11`,
+			lg: `h-7 w-13`,
+			xl: `h-8 w-15`,
+		},
+		dot: {
+			size: {
+				xs: `size-2 data-[checked=true]:translate-x-4`,
+				sm: `size-3 data-[checked=true]:translate-x-5`,
+				md: `size-4 data-[checked=true]:translate-x-6`,
+				lg: `size-5 data-[checked=true]:translate-x-7`,
+				xl: `size-6 data-[checked=true]:translate-x-8`,
+			},
+		},
+	};
+
+	//
+	let wrap = $state<HTMLLabelElement>()!;
+	let checkbox = $state<HTMLInputElement>()!;
+
+	function change() {
+		checkbox.checked = !checked;
+		checkbox.dispatchEvent(new Event("change", { bubbles: true, cancelable: true }));
+		wrap.focus();
+	}
 </script>
 
-<button
-	class={switchClass}
-	type="button"
-	role="switch"
-	aria-checked={checked}
-	class:checked
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions  -->
+<label
+	bind:this={wrap}
+	class={twMerge(
+		"stuic-switch",
+		`m-2 
+		relative inline-flex flex-shrink-0 items-center
+		rounded-full cursor-pointer
+
+		transition-colors duration-100
+
+		hover:brightness-[1.05] active:brightness-[0.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
+
+		data-[checked=true]:bg-switch-accent
+		dark:data-[checked=true]:bg-switch-accent-dark
+
+		focus:outline-0
+		focus:ring-switch-accent/20 focus:dark:ring-switch-accent-dark/20
+		focus:ring-4`,
+		size,
+		_preset.size[size],
+		classProp
+	)}
 	data-checked={checked}
-	data-size={size}
-	{tabindex}
-	{disabled}
-	on:click={async (e) => {
-		stopPropagation && e.stopPropagation();
-		preventDefault && e.preventDefault();
-
-		// ability to break execution (do the change) by returning explicit `false`
-		if (typeof preHook === 'function' && (await preHook(checked)) === false) {
+	data-disabled={disabled}
+	tabindex={disabled ? -1 : tabindex}
+	onkeydown={(e: KeyboardEvent) => {
+		if (!disabled && !e.metaKey && ["Space", "Enter"].includes(e.code)) {
+			change();
+		}
+	}}
+	onclick={async (e) => {
+		e.preventDefault();
+		if (disabled) return false;
+
+		if (typeof preHook === "function" && (await preHook(checked)) === false) {
 			return false;
 		}
 
-		checked = !checked;
-		dispatch('change', checked);
+		change();
+
+		await tick();
+
+		if (typeof onclick === "function") onclick(e);
 	}}
-	on:click
-	on:keydown
-	on:keyup
-	on:touchstart|passive
-	on:touchend|passive
-	on:touchmove|passive
-	on:touchcancel
-	on:mouseenter
-	on:mouseleave
+	{...rest}
 >
-	{#if label}<span class="sr-only">{@html label}</span>{/if}
-	<span aria-hidden="true" data-checked={checked} data-size={size} class={dotClass}>
+	<span
+		class={twMerge(
+			"dot",
+			`flex items-center justify-center
+			translate-x-1 rounded-full  
+			transition-all duration-100
+			shadow
+			bg-neutral-50 dark:bg-neutral-50
+			text-neutral-950 dark:text-neutral-950`,
+			size,
+			_preset.dot.size[size],
+			dotClass
+		)}
+		data-checked={checked}
+	>
 		{#if checked}
-			<slot name="on" />
+			{@render on?.()}
 		{:else}
-			<slot name="off" />
+			{@render off?.()}
 		{/if}
 	</span>
-</button>
+	<input
+		bind:checked
+		bind:this={checkbox}
+		type="checkbox"
+		class="opacity-0 size-0"
+		{disabled}
+		{required}
+		{name}
+		use:validateAction={() => ({
+			enabled: !!validate,
+			...(typeof validate === "boolean" ? {} : validate),
+			setValidationResult,
+		})}
+		tabindex="-1"
+	/>
+</label>

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

@@ -1,67 +1,26 @@
-import { SvelteComponent } from "svelte";
-export type SwitchPreHook = (previosValue: boolean) => Promise<void | boolean>;
-export declare class SwitchConfig {
-    static defaultSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    static defaultVariant: string | undefined;
-    static presetBase: string;
-    static presetsSize: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static class: string;
-    static variant: Record<string, string>;
-    static presetBaseDot: string;
-    static presetsSizeDot: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    static classDot: string;
-    static variantDot: Record<string, string>;
+import { type Snippet } from "svelte";
+import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
+import { type ValidateOptions, type ValidationResult } from "../../actions/validate.svelte.js";
+import "./index.css";
+interface Props extends HTMLButtonAttributes {
+    button?: HTMLButtonElement;
+    checked?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+    name?: string;
+    class?: string;
+    dotClass?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
+    tabindex?: number;
+    on?: Snippet;
+    off?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
+    preHook?: (current: boolean) => Promise<false | any>;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    setValidationResult?: (res: ValidationResult) => void;
 }
-declare const __propDef: {
-    props: {
-        class?: string;
-        classDot?: string;
-        label?: string;
-        checked?: boolean;
-        disabled?: boolean;
-        tabindex?: number;
-        variant?: string | undefined;
-        stopPropagation?: boolean;
-        preventDefault?: boolean;
-        preHook?: SwitchPreHook;
-        size?: "xs" | "sm" | "md" | "lg" | "xl";
-    };
-    events: {
-        click: MouseEvent;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        touchstart: TouchEvent;
-        touchend: TouchEvent;
-        touchmove: TouchEvent;
-        touchcancel: TouchEvent;
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        on: {};
-        off: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-export default class Switch extends SvelteComponent<SwitchProps, SwitchEvents, SwitchSlots> {
-}
-export {};
+declare const Switch: import("svelte").Component<Props, {}, "button" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Switch/SwitchButton.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { tick, type Snippet } from "svelte";
+	import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
+	import { twMerge } from "../../utils/tw-merge.js";
+
+	import "./index.css";
+
+	interface Props extends HTMLButtonAttributes {
+		button?: HTMLButtonElement;
+		checked?: boolean;
+		size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+		class?: string;
+		dotClass?: string;
+		label?: string;
+		disabled?: boolean;
+		tabindex?: number;
+		on?: Snippet;
+		off?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+		onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
+		preHook?: (current: boolean) => Promise<false | any>;
+	}
+
+	let {
+		button = $bindable(),
+		size = "md",
+		class: classProp,
+		dotClass,
+		checked = $bindable(false),
+		disabled,
+		tabindex = 0,
+		label,
+		on,
+		off,
+		onclick,
+		preHook,
+		...rest
+	}: Props = $props();
+
+	const _preset: any = {
+		size: {
+			xs: `h-4 w-7`,
+			sm: `h-5 w-9`,
+			md: `h-6 w-11`,
+			lg: `h-7 w-13`,
+			xl: `h-8 w-15`,
+		},
+		dot: {
+			size: {
+				xs: `size-2 data-[checked=true]:translate-x-4`,
+				sm: `size-3 data-[checked=true]:translate-x-5`,
+				md: `size-4 data-[checked=true]:translate-x-6`,
+				lg: `size-5 data-[checked=true]:translate-x-7`,
+				xl: `size-6 data-[checked=true]:translate-x-8`,
+			},
+		},
+	};
+</script>
+
+<!-- <div class="inline-block relative"> -->
+<button
+	bind:this={button}
+	class={twMerge(
+		"stuic-switch",
+		`m-2 
+			relative inline-flex flex-shrink-0 items-center
+			rounded-full cursor-pointer
+	
+			transition-colors duration-100
+	
+			hover:brightness-[1.05] active:brightness-[0.95]
+			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
+	
+			bg-neutral-400 dark:bg-neutral-400
+	
+			aria-[checked=true]:bg-switch-accent
+			dark:aria-[checked=true]:bg-switch-accent-dark
+	
+			focus:outline-0
+			focus:ring-switch-accent/20 focus:dark:ring-switch-accent-dark/20
+			focus:ring-4`,
+		size,
+		_preset.size[size],
+		classProp
+	)}
+	type="button"
+	role="switch"
+	aria-checked={checked}
+	value={`${!!checked}`}
+	{tabindex}
+	{disabled}
+	onclick={async (e) => {
+		if (typeof preHook === "function" && (await preHook(checked)) === false) {
+			return false;
+		}
+		checked = !checked;
+
+		await tick();
+
+		if (typeof onclick === "function") onclick(e);
+
+		button!.dispatchEvent(
+			new CustomEvent("change", { bubbles: true, cancelable: true, detail: checked })
+		);
+	}}
+	{...rest}
+>
+	{#if label}<span class="sr-only">{@html label}</span>{/if}
+	<span
+		aria-hidden="true"
+		data-checked={checked}
+		class={twMerge(
+			"dot",
+			`flex items-center justify-center
+				translate-x-1 rounded-full  
+				transition-all duration-100
+				shadow
+				bg-neutral-50 dark:bg-neutral-50
+				text-neutral-950 dark:text-neutral-950`,
+			size,
+			_preset.dot.size[size],
+			dotClass
+		)}
+	>
+		{#if checked}
+			{@render on?.()}
+		{:else}
+			{@render off?.()}
+		{/if}
+	</span>
+</button>

package/dist/components/Switch/SwitchButton.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type Snippet } from "svelte";
+import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
+import "./index.css";
+interface Props extends HTMLButtonAttributes {
+    button?: HTMLButtonElement;
+    checked?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | string;
+    class?: string;
+    dotClass?: string;
+    label?: string;
+    disabled?: boolean;
+    tabindex?: number;
+    on?: Snippet;
+    off?: Snippet;
+    onclick?: (event: MouseEvent) => void;
+    onchange?: FormEventHandler<HTMLButtonElement> | null | undefined;
+    preHook?: (current: boolean) => Promise<false | any>;
+}
+declare const SwitchButton: import("svelte").Component<Props, {}, "button" | "checked">;
+type SwitchButton = ReturnType<typeof SwitchButton>;
+export default SwitchButton;

package/dist/components/Switch/index.css

@@ -0,0 +1,7 @@
+@import "../../_shared.css";
+
+/* prettier-ignore */
+@theme inline {
+	--color-switch-accent: var(--color-switch-accent, var(--color-red-600));
+	--color-switch-accent-dark: var(--color-switch-accent-dark, var(--color-red-400));
+}

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

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

package/dist/components/Switch/index.js

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

package/dist/components/Thc/Thc.svelte

@@ -1,20 +1,77 @@
-<script context="module">const _is = (m) => typeof m === "string" && m;
-export const isTHCNotEmpty = (m) => _is(m) || _is(m?.text) || _is(m?.html) || m?.component;
+<script lang="ts" module>
+	// THC = Text or Html or Component
+
+	interface WithComponent {
+		component: any;
+		props?: Record<string, any>;
+	}
+
+	interface WithText {
+		text: string;
+	}
+
+	interface WithHtml {
+		html: string;
+	}
+
+	interface WithSnippet {
+		snippet: Snippet;
+	}
+
+	type AsSnippet = Snippet;
+
+	//
+	export type THC =
+		| string
+		| WithText
+		| WithHtml
+		| WithComponent
+		| WithSnippet
+		| AsSnippet;
+
+	const _is = (m: any) => typeof m === "string" && m;
+
+	export function isTHCNotEmpty(m: any) {
+		return _is(m) || _is(m?.text) || _is(m?.html) || m?.component;
+	}
+
+	/**
+	 * Will try to extract textual (or html) content from THC
+	 */
+	export function getTHCStringContent(m: any): string {
+		return m?.html || m?.text || (typeof m === "string" ? m : "") || "";
+	}
 </script>
 
-<script>export let thc;
-export let forceAsHtml = false;
-export let allowCastToStringFallback = true;
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props extends Record<string, any> {
+		thc: THC;
+		forceAsHtml?: boolean;
+		allowCastToStringFallback?: boolean;
+	}
+
+	let {
+		thc,
+		forceAsHtml = false,
+		allowCastToStringFallback = true,
+		...rest
+	}: Props = $props();
 </script>
 
-{#if typeof thc === 'string'}
+{#if typeof thc === "string"}
 	{#if forceAsHtml}{@html thc}{:else}{thc}{/if}
-{:else if thc?.text}
+{:else if "text" in thc && thc.text}
 	{#if forceAsHtml}{@html thc.text}{:else}{thc.text}{/if}
-{:else if thc?.html}
+{:else if "html" in thc && thc.html}
 	{@html thc.html}
-{:else if thc?.component}
-	<svelte:component this={thc.component} {...thc?.props || {}} {...$$restProps || {}} />
+{:else if typeof thc === "function"}
+	{@render thc()}
+{:else if typeof thc === "object" && "snippet" in thc}
+	{@render thc.snippet()}
+{:else if typeof thc === "object" && "component" in thc}
+	<thc.component {...thc.props || {}} {...rest || {}} />
 {:else if allowCastToStringFallback}
 	<!-- cast to string as the last resort (if enabled) -->
 	{thc}