@marianmeres/stuic 3.0.0 → 3.0.1

package/dist/components/Switch/SwitchButton.svelte

@@ -1,134 +0,0 @@
-<script lang="ts" module>
-	import type { Snippet } from "svelte";
-	import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
-
-	export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-		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>;
-	}
-</script>
-
-<script lang="ts">
-	import { tick } from "svelte";
-	import { twMerge } from "../../utils/tw-merge.js";
-
-	import "./index.css";
-
-	let {
-		button = $bindable(),
-		size = "md",
-		class: classProp,
-		dotClass,
-		checked = $bindable(),
-		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-105 active:brightness-95
-			disabled:!cursor-not-allowed disabled:!opacity-50 disabled:hover:brightness-100
-	
-			bg-neutral-400 dark:bg-neutral-400
-
-			aria-[checked=true]:bg-(--stuic-switch-accent)
-
-			focus:outline-0
-			focus:ring-(--stuic-switch-accent)/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)) === 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

@@ -1,21 +0,0 @@
-import type { Snippet } from "svelte";
-import type { FormEventHandler, HTMLButtonAttributes } from "svelte/elements";
-export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-    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>;
-}
-import "./index.css";
-declare const SwitchButton: import("svelte").Component<Props, {}, "button" | "checked">;
-type SwitchButton = ReturnType<typeof SwitchButton>;
-export default SwitchButton;