negodesign 0.0.72 → 0.0.74

package/dist/components/ui/input-otp/input-otp.svelte

@@ -1,182 +1,182 @@
-<script lang="ts">
-	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-	import { setInputOTPContext, type OtpCell } from "./context.svelte.js";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(""),
-		maxlength = 6,
-		length,
-		placeholder = "",
-		disabled = false,
-		id,
-		onValueChange,
-		class: className,
-		children,
-		...restProps
-	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
-		value?: string;
-		maxlength?: number;
-		length?: number;
-		placeholder?: string;
-		disabled?: boolean;
-		id?: string;
-		onValueChange?: (value: string) => void;
-		children?: Snippet<[{ cells: OtpCell[] }]>;
-	} = $props();
-
-	const total = $derived(length ?? maxlength);
-	let activeIndex = $state<number | null>(null);
-	const inputs = $state<Array<HTMLInputElement | null>>([]);
-
-	const cells = $derived(
-		Array.from({ length: total }, (_, index) => ({
-			index,
-			char: value[index] ?? "",
-			hasFakeCaret: activeIndex === index && value[index] === "",
-		}))
-	);
-
-	function focusIndex(index: number) {
-		if (index < 0 || index >= total) return;
-		const el = inputs[index];
-		el?.focus();
-		el?.select();
-	}
-
-	function focusNext(index: number) {
-		focusIndex(Math.min(index + 1, total - 1));
-	}
-
-	function focusPrev(index: number) {
-		focusIndex(index - 1);
-	}
-
-	function registerInput(index: number, el: HTMLInputElement | null) {
-		inputs[index] = el;
-	}
-
-	function setActive(index: number | null) {
-		activeIndex = index;
-	}
-
-	function setValueAt(index: number, char: string) {
-		if (index < 0 || index >= total) return;
-		const chars = value.split("");
-		chars[index] = char.slice(0, 1);
-		value = chars.join("");
-		activeIndex = Math.min(index + 1, total - 1);
-		focusNext(index);
-	}
-
-	function clearValueAt(index: number) {
-		if (index < 0 || index >= total) return;
-		const chars = value.split("");
-		chars[index] = "";
-		value = chars.join("");
-	}
-
-	function handleKeyDown(index: number, event: KeyboardEvent) {
-		if (event.key === "Backspace") {
-			event.preventDefault();
-			if (value[index]) {
-				clearValueAt(index);
-			} else {
-				clearValueAt(index - 1);
-				focusPrev(index);
-			}
-		} else if (event.key === "Delete") {
-			event.preventDefault();
-			clearValueAt(index);
-		} else if (event.key === "ArrowLeft") {
-			event.preventDefault();
-			focusPrev(index);
-		} else if (event.key === "ArrowRight") {
-			event.preventDefault();
-			focusNext(index);
-		} else if (event.key === "Home") {
-			event.preventDefault();
-			focusIndex(0);
-		} else if (event.key === "End") {
-			event.preventDefault();
-			focusIndex(total - 1);
-		}
-	}
-
-	function handlePaste(index: number, event: ClipboardEvent) {
-		event.preventDefault();
-		const digits = (event.clipboardData?.getData("text") ?? "")
-			.replace(/\D/g, "")
-			.split("");
-		if (!digits.length) return;
-		const chars = value.split("");
-		let cursor = index;
-		for (const digit of digits) {
-			if (cursor >= total) break;
-			chars[cursor] = digit;
-			cursor++;
-		}
-		value = chars.join("");
-		activeIndex = cursor - 1;
-		focusIndex(cursor - 1);
-	}
-
-	// svelte-ignore state_referenced_locally
-	let ctxState = $state({
-		value,
-		maxlength: total,
-		placeholder,
-		disabled,
-		activeIndex: null as number | null,
-		setActive,
-		setValueAt,
-		clearValueAt,
-		focusNext,
-		focusPrev,
-		handleKeyDown,
-		handlePaste,
-		registerInput,
-	});
-
-	const ctx = setInputOTPContext(ctxState);
-
-	$effect(() => {
-		ctx.value = value;
-		ctx.maxlength = total;
-		ctx.placeholder = placeholder;
-		ctx.disabled = disabled;
-		ctx.activeIndex = activeIndex;
-	});
-
-	let isInitialValue = true;
-	$effect(() => {
-		if (isInitialValue) {
-			isInitialValue = false;
-			return;
-		}
-		onValueChange?.(value);
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="input-otp"
-	spellcheck={false}
-	class={cn(
-		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
-		className
-	)}
-	{...restProps}
->
-	{@render children?.({ cells })}
-	<input
-		type="hidden"
-		data-slot="input-otp-input"
-		value={value}
-		{id}
-		disabled={disabled}
-		aria-hidden={true}
-	/>
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { setInputOTPContext, type OtpCell } from "./context.svelte.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		maxlength = 6,
+		length,
+		placeholder = "",
+		disabled = false,
+		id,
+		onValueChange,
+		class: className,
+		children,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		value?: string;
+		maxlength?: number;
+		length?: number;
+		placeholder?: string;
+		disabled?: boolean;
+		id?: string;
+		onValueChange?: (value: string) => void;
+		children?: Snippet<[{ cells: OtpCell[] }]>;
+	} = $props();
+
+	const total = $derived(length ?? maxlength);
+	let activeIndex = $state<number | null>(null);
+	const inputs = $state<Array<HTMLInputElement | null>>([]);
+
+	const cells = $derived(
+		Array.from({ length: total }, (_, index) => ({
+			index,
+			char: value[index] ?? "",
+			hasFakeCaret: activeIndex === index && value[index] === "",
+		}))
+	);
+
+	function focusIndex(index: number) {
+		if (index < 0 || index >= total) return;
+		const el = inputs[index];
+		el?.focus();
+		el?.select();
+	}
+
+	function focusNext(index: number) {
+		focusIndex(Math.min(index + 1, total - 1));
+	}
+
+	function focusPrev(index: number) {
+		focusIndex(index - 1);
+	}
+
+	function registerInput(index: number, el: HTMLInputElement | null) {
+		inputs[index] = el;
+	}
+
+	function setActive(index: number | null) {
+		activeIndex = index;
+	}
+
+	function setValueAt(index: number, char: string) {
+		if (index < 0 || index >= total) return;
+		const chars = value.split("");
+		chars[index] = char.slice(0, 1);
+		value = chars.join("");
+		activeIndex = Math.min(index + 1, total - 1);
+		focusNext(index);
+	}
+
+	function clearValueAt(index: number) {
+		if (index < 0 || index >= total) return;
+		const chars = value.split("");
+		chars[index] = "";
+		value = chars.join("");
+	}
+
+	function handleKeyDown(index: number, event: KeyboardEvent) {
+		if (event.key === "Backspace") {
+			event.preventDefault();
+			if (value[index]) {
+				clearValueAt(index);
+			} else {
+				clearValueAt(index - 1);
+				focusPrev(index);
+			}
+		} else if (event.key === "Delete") {
+			event.preventDefault();
+			clearValueAt(index);
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			focusPrev(index);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			focusNext(index);
+		} else if (event.key === "Home") {
+			event.preventDefault();
+			focusIndex(0);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			focusIndex(total - 1);
+		}
+	}
+
+	function handlePaste(index: number, event: ClipboardEvent) {
+		event.preventDefault();
+		const digits = (event.clipboardData?.getData("text") ?? "")
+			.replace(/\D/g, "")
+			.split("");
+		if (!digits.length) return;
+		const chars = value.split("");
+		let cursor = index;
+		for (const digit of digits) {
+			if (cursor >= total) break;
+			chars[cursor] = digit;
+			cursor++;
+		}
+		value = chars.join("");
+		activeIndex = cursor - 1;
+		focusIndex(cursor - 1);
+	}
+
+	// svelte-ignore state_referenced_locally
+	let ctxState = $state({
+		value,
+		maxlength: total,
+		placeholder,
+		disabled,
+		activeIndex: null as number | null,
+		setActive,
+		setValueAt,
+		clearValueAt,
+		focusNext,
+		focusPrev,
+		handleKeyDown,
+		handlePaste,
+		registerInput,
+	});
+
+	const ctx = setInputOTPContext(ctxState);
+
+	$effect(() => {
+		ctx.value = value;
+		ctx.maxlength = total;
+		ctx.placeholder = placeholder;
+		ctx.disabled = disabled;
+		ctx.activeIndex = activeIndex;
+	});
+
+	let isInitialValue = true;
+	$effect(() => {
+		if (isInitialValue) {
+			isInitialValue = false;
+			return;
+		}
+		onValueChange?.(value);
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="input-otp"
+	spellcheck={false}
+	class={cn(
+		"cn-input-otp-input gap-2 flex items-center disabled:cursor-not-allowed has-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.({ cells })}
+	<input
+		type="hidden"
+		data-slot="input-otp-input"
+		value={value}
+		{id}
+		disabled={disabled}
+		aria-hidden={true}
+	/>
 </div>

package/dist/components/{core/label → ui/label/core}/LabelOr.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-  import Separator from "../../ui/separator/separator.svelte";
-  import { t } from "../../../i18n";
-
-  type Props = {
-    variant?: "SEPARATOR";
-  };
-
-  let { variant }: Props = $props();
-</script>
-
-{#if variant === "SEPARATOR"}
-  <div class="relative my-1 text-center">
-    <div class="absolute inset-0 flex items-center">
-      <Separator />
-    </div>
-    <span
-      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
-    >
-      {$t("label.or")}
-    </span>
-  </div>
-{:else}
-  {$t("label.or")}
-{/if}
+<script lang="ts">
+  import Separator from "../../separator/separator.svelte";
+  import { t } from "../../../../i18n";
+
+  type Props = {
+    variant?: "SEPARATOR";
+  };
+
+  let { variant }: Props = $props();
+</script>
+
+{#if variant === "SEPARATOR"}
+  <div class="relative my-1 text-center">
+    <div class="absolute inset-0 flex items-center">
+      <Separator />
+    </div>
+    <span
+      class="relative bg-white dark:bg-primary px-4 text-[10px] uppercase text-slate-400 tracking-wider"
+    >
+      {$t("label.or")}
+    </span>
+  </div>
+{:else}
+  {$t("label.or")}
+{/if}

package/dist/components/ui/label/label.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLLabelAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLLabelAttributes> = $props();
-</script>
-
-<label
-	bind:this={ref}
-	data-slot="label"
-	class={cn("text-sm font-medium leading-4 text-foreground", className)}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLLabelAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLabelAttributes> = $props();
+</script>
+
+<label
+	bind:this={ref}
+	data-slot="label"
+	class={cn("text-sm font-medium leading-4 text-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
 </label>

package/dist/components/ui/language-switcher/language-switcher.svelte

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-  export type LanguageSwitcherProps = {
-    /** Dropdown alignment */
-    align?: "start" | "center" | "end";
-
-    /** Button variant */
-    variant?: "outline" | "ghost";
-
-    class?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { GlobalIcon } from "@hugeicons/core-free-icons";
-  import * as DropdownMenu from "../dropdown-menu";
-  import { buttonVariants } from "../button";
-  import { t, locale, locales } from "../../../i18n";
-  import { cn } from "../../../utils.js";
-
-  let {
-    align = "end",
-    variant = "outline",
-    class: className,
-  }: LanguageSwitcherProps = $props();
-</script>
-
-<DropdownMenu.Root>
-  <DropdownMenu.Trigger
-    class={cn(
-      buttonVariants({ variant, size: "icon" }),
-      className,
-      "rounded-full bg-input",
-    )}
-    aria-label="Change language"
-  >
-    <HugeiconsIcon icon={GlobalIcon} class="size-4" />
-    <span class="sr-only">Change language</span>
-  </DropdownMenu.Trigger>
-  <DropdownMenu.Content {align}>
-    <DropdownMenu.RadioGroup bind:value={$locale}>
-      {#each $locales as code (code)}
-        <DropdownMenu.RadioItem value={code}>
-          {$t(`language.${code}`)}
-        </DropdownMenu.RadioItem>
-      {/each}
-    </DropdownMenu.RadioGroup>
-  </DropdownMenu.Content>
+<script lang="ts" module>
+  export type LanguageSwitcherProps = {
+    /** Dropdown alignment */
+    align?: "start" | "center" | "end";
+
+    /** Button variant */
+    variant?: "outline" | "ghost";
+
+    class?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { GlobalIcon } from "@hugeicons/core-free-icons";
+  import * as DropdownMenu from "../dropdown-menu";
+  import { buttonVariants } from "../button";
+  import { t, locale, locales } from "../../../i18n";
+  import { cn } from "../../../utils.js";
+
+  let {
+    align = "end",
+    variant = "outline",
+    class: className,
+  }: LanguageSwitcherProps = $props();
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger
+    class={cn(
+      buttonVariants({ variant, size: "icon" }),
+      className,
+      "rounded-full bg-input",
+    )}
+    aria-label="Change language"
+  >
+    <HugeiconsIcon icon={GlobalIcon} class="size-4" />
+    <span class="sr-only">Change language</span>
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content {align}>
+    <DropdownMenu.RadioGroup bind:value={$locale}>
+      {#each $locales as code (code)}
+        <DropdownMenu.RadioItem value={code}>
+          {$t(`language.${code}`)}
+        </DropdownMenu.RadioItem>
+      {/each}
+    </DropdownMenu.RadioGroup>
+  </DropdownMenu.Content>
 </DropdownMenu.Root>

package/dist/components/ui/light-switch/light-switch.svelte

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-  import type { ButtonSize } from "../button/button.svelte";
-
-  export type LightSwitchProps = {
-    variant?: "outline" | "ghost";
-    size?: ButtonSize;
-  };
-</script>
-
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons";
-  import { toggleMode } from "../../../theme.svelte";
-  import Button from "../button/button.svelte";
-
-  let { variant = "outline", size = "default" }: LightSwitchProps = $props();
-
-  const sizeMap = {
-    default: "icon",
-    xs: "icon-xs",
-    sm: "icon-sm",
-    lg: "icon-lg",
-    icon: "icon",
-    "icon-xs": "icon-xs",
-    "icon-sm": "icon-sm",
-    "icon-lg": "icon-lg",
-  };
-
-  function handleClick() {
-    toggleMode();
-  }
-</script>
-
-<Button
-  onclick={handleClick}
-  {variant}
-  size={sizeMap[size] as ButtonSize}
-  class="relative rounded-full bg-input"
->
-  <HugeiconsIcon
-    icon={Sun01Icon}
-    class="scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
-  />
-  <HugeiconsIcon
-    icon={Moon01Icon}
-    class="absolute scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
-  />
-  <span class="sr-only">Toggle theme</span>
+<script lang="ts" module>
+  import type { ButtonSize } from "../button/button.svelte";
+
+  export type LightSwitchProps = {
+    variant?: "outline" | "ghost";
+    size?: ButtonSize;
+  };
+</script>
+
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Sun01Icon, Moon01Icon } from "@hugeicons/core-free-icons";
+  import { toggleMode } from "../../../theme.svelte";
+  import Button from "../button/button.svelte";
+
+  let { variant = "outline", size = "default" }: LightSwitchProps = $props();
+
+  const sizeMap = {
+    default: "icon",
+    xs: "icon-xs",
+    sm: "icon-sm",
+    lg: "icon-lg",
+    icon: "icon",
+    "icon-xs": "icon-xs",
+    "icon-sm": "icon-sm",
+    "icon-lg": "icon-lg",
+  };
+
+  function handleClick() {
+    toggleMode();
+  }
+</script>
+
+<Button
+  onclick={handleClick}
+  {variant}
+  size={sizeMap[size] as ButtonSize}
+  class="relative rounded-full bg-input"
+>
+  <HugeiconsIcon
+    icon={Sun01Icon}
+    class="scale-100 rotate-0 transition-all! dark:scale-0 dark:-rotate-90"
+  />
+  <HugeiconsIcon
+    icon={Moon01Icon}
+    class="absolute scale-0 rotate-90 transition-all! dark:scale-100 dark:rotate-0"
+  />
+  <span class="sr-only">Toggle theme</span>
 </Button>

package/dist/components/{core → ui}/link/link-forget-password.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-  import { t } from "../../../i18n";
-  import type { HTMLAnchorAttributes } from "svelte/elements";
-
-  type Props = HTMLAnchorAttributes;
-
-  let { ...restProps }: Props = $props();
-</script>
-
-<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
-  {$t("link.forget.password")}!
-</a>
+<script lang="ts">
+  import { t } from "../../../i18n";
+  import type { HTMLAnchorAttributes } from "svelte/elements";
+
+  type Props = HTMLAnchorAttributes;
+
+  let { ...restProps }: Props = $props();
+</script>
+
+<a {...restProps} class="text-xs text-slate-500 hover:text-slate-800 z-10">
+  {$t("link.forget.password")}!
+</a>