negodesign 0.0.81 → 0.0.82

package/dist/components/ui/panel/NotFoundEmpty.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-  import * as Empty from "../empty/index.js";
-  import { t } from "../../../i18n";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { Search01Icon } from "@hugeicons/core-free-icons";
-  import type { NotFoundEmptyProps } from "./type";
-
-  let {
-    title,
-    description,
-    icon = Search01Icon,
-    className = "",
-    actionHref = "#/",
-    actionLabel,
-    onAction,
-    showAction = false,
-    children,
-  }: NotFoundEmptyProps = $props();
-
-  const resolvedTitle = $derived(title ?? $t("empty.title"));
-  const resolvedDescription = $derived(description ?? $t("empty.description"));
-</script>
-
-<Empty.Root class="w-full py-8 {className}">
-  <Empty.Header>
-    {#if icon}
-      <Empty.Media variant="icon">
-        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
-      </Empty.Media>
-    {/if}
-    <Empty.Title class="text-base font-semibold">
-      {resolvedTitle}
-    </Empty.Title>
-    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
-      {resolvedDescription}
-    </Empty.Description>
-  </Empty.Header>
-
-  {#if children}
-    <Empty.Content>
-      {@render children()}
-    </Empty.Content>
-  {:else if showAction || onAction}
-    <Empty.Content>
-      {#if onAction}
-        <button
-          type="button"
-          onclick={onAction}
-          class="text-xs font-medium text-primary hover:underline"
-        >
-          {actionLabel ?? $t("empty.contact_support")}
-        </button>
-      {:else}
-        <Empty.Description class="text-xs">
-          {$t("empty.support")}
-          <a
-            href={actionHref}
-            class="text-primary hover:underline font-medium ml-1"
-          >
-            {actionLabel ?? $t("empty.contact_support")}
-          </a>
-        </Empty.Description>
-      {/if}
-    </Empty.Content>
-  {/if}
-</Empty.Root>
+<script lang="ts">
+  import * as Empty from "../empty/index.js";
+  import { t } from "../../../i18n";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { Search01Icon } from "@hugeicons/core-free-icons";
+  import type { NotFoundEmptyProps } from "./type";
+
+  let {
+    title,
+    description,
+    icon = Search01Icon,
+    className = "",
+    actionHref = "#/",
+    actionLabel,
+    onAction,
+    showAction = false,
+    children,
+  }: NotFoundEmptyProps = $props();
+
+  const resolvedTitle = $derived(title ?? $t("empty.title"));
+  const resolvedDescription = $derived(description ?? $t("empty.description"));
+</script>
+
+<Empty.Root class="w-full py-8 {className}">
+  <Empty.Header>
+    {#if icon}
+      <Empty.Media variant="icon">
+        <HugeiconsIcon {icon} class="size-6 text-muted-foreground" />
+      </Empty.Media>
+    {/if}
+    <Empty.Title class="text-base font-semibold">
+      {resolvedTitle}
+    </Empty.Title>
+    <Empty.Description class="text-sm text-muted-foreground max-w-sm">
+      {resolvedDescription}
+    </Empty.Description>
+  </Empty.Header>
+
+  {#if children}
+    <Empty.Content>
+      {@render children()}
+    </Empty.Content>
+  {:else if showAction || onAction}
+    <Empty.Content>
+      {#if onAction}
+        <button
+          type="button"
+          onclick={onAction}
+          class="text-xs font-medium text-primary hover:underline"
+        >
+          {actionLabel ?? $t("empty.contact_support")}
+        </button>
+      {:else}
+        <Empty.Description class="text-xs">
+          {$t("empty.support")}
+          <a
+            href={actionHref}
+            class="text-primary hover:underline font-medium ml-1"
+          >
+            {actionLabel ?? $t("empty.contact_support")}
+          </a>
+        </Empty.Description>
+      {/if}
+    </Empty.Content>
+  {/if}
+</Empty.Root>

package/dist/components/ui/phone-input/country-selector.svelte

@@ -1,87 +1,87 @@
-<script lang="ts" module>
-	import type { Country } from "./types";
-
-	export const COUNTRIES: Country[] = [
-		{ id: "ao", iso2: "ao", name: "Angola", dialCode: "244" },
-		{ id: "br", iso2: "br", name: "Brazil", dialCode: "55" },
-		{ id: "cv", iso2: "cv", name: "Cape Verde", dialCode: "238" },
-		{ id: "cn", iso2: "cn", name: "China", dialCode: "86" },
-		{ id: "fr", iso2: "fr", name: "France", dialCode: "33" },
-		{ id: "gw", iso2: "gw", name: "Guinea-Bissau", dialCode: "245" },
-		{ id: "jp", iso2: "jp", name: "Japan", dialCode: "81" },
-		{ id: "mz", iso2: "mz", name: "Mozambique", dialCode: "258" },
-		{ id: "pt", iso2: "pt", name: "Portugal", dialCode: "351" },
-		{
-			id: "st",
-			iso2: "st",
-			name: "São Tomé and Príncipe",
-			dialCode: "239",
-		},
-		{ id: "za", iso2: "za", name: "South Africa", dialCode: "27" },
-		{ id: "es", iso2: "es", name: "Spain", dialCode: "34" },
-		{ id: "gb", iso2: "gb", name: "United Kingdom", dialCode: "44" },
-		{ id: "us", iso2: "us", name: "United States", dialCode: "1" },
-	];
-</script>
-
-<script lang="ts">
-	import { cn } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte";
-	import { GlobalIcon } from "@hugeicons/core-free-icons";
-	import type { CountryCode } from "./types";
-
-	interface Props {
-		selected?: CountryCode | null;
-		dialCode?: string;
-		disabled?: boolean;
-		onselect?: (val: CountryCode | null) => void;
-		order?: (a: Country, b: Country) => number;
-	}
-
-	let {
-		selected = $bindable(null),
-		// eslint-disable-next-line no-useless-assignment
-		dialCode = $bindable(""),
-		disabled = false,
-		onselect = undefined,
-		order = (a, b) => {
-			return a.name.localeCompare(b.name);
-		},
-	}: Props = $props();
-
-	let ordered = $derived(COUNTRIES.slice().sort(order));
-
-	function handleChange(e: Event) {
-		selected = (e.currentTarget as HTMLSelectElement).value;
-		onselect?.(selected);
-	}
-
-	$effect(() => {
-		const country = COUNTRIES.find((c) => c.iso2 === selected);
-		dialCode = country?.dialCode ?? "";
-	});
-</script>
-
-<div class="relative flex shrink-0 items-center">
-	<HugeiconsIcon
-		icon={GlobalIcon}
-		strokeWidth={2}
-		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
-	/>
-	<select
-		value={selected ?? ""}
-		onchange={handleChange}
-		aria-label="Country code"
-		{disabled}
-		class={cn(
-			"border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background",
-			disabled ? "cursor-not-allowed opacity-50" : "",
-		)}
-	>
-		{#each ordered as country (country.id)}
-			<option value={country.iso2}>
-				(+{country.dialCode})
-			</option>
-		{/each}
-	</select>
-</div>
+<script lang="ts" module>
+	import type { Country } from "./types";
+
+	export const COUNTRIES: Country[] = [
+		{ id: "ao", iso2: "ao", name: "Angola", dialCode: "244" },
+		{ id: "br", iso2: "br", name: "Brazil", dialCode: "55" },
+		{ id: "cv", iso2: "cv", name: "Cape Verde", dialCode: "238" },
+		{ id: "cn", iso2: "cn", name: "China", dialCode: "86" },
+		{ id: "fr", iso2: "fr", name: "France", dialCode: "33" },
+		{ id: "gw", iso2: "gw", name: "Guinea-Bissau", dialCode: "245" },
+		{ id: "jp", iso2: "jp", name: "Japan", dialCode: "81" },
+		{ id: "mz", iso2: "mz", name: "Mozambique", dialCode: "258" },
+		{ id: "pt", iso2: "pt", name: "Portugal", dialCode: "351" },
+		{
+			id: "st",
+			iso2: "st",
+			name: "São Tomé and Príncipe",
+			dialCode: "239",
+		},
+		{ id: "za", iso2: "za", name: "South Africa", dialCode: "27" },
+		{ id: "es", iso2: "es", name: "Spain", dialCode: "34" },
+		{ id: "gb", iso2: "gb", name: "United Kingdom", dialCode: "44" },
+		{ id: "us", iso2: "us", name: "United States", dialCode: "1" },
+	];
+</script>
+
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { GlobalIcon } from "@hugeicons/core-free-icons";
+	import type { CountryCode } from "./types";
+
+	interface Props {
+		selected?: CountryCode | null;
+		dialCode?: string;
+		disabled?: boolean;
+		onselect?: (val: CountryCode | null) => void;
+		order?: (a: Country, b: Country) => number;
+	}
+
+	let {
+		selected = $bindable(null),
+		// eslint-disable-next-line no-useless-assignment
+		dialCode = $bindable(""),
+		disabled = false,
+		onselect = undefined,
+		order = (a, b) => {
+			return a.name.localeCompare(b.name);
+		},
+	}: Props = $props();
+
+	let ordered = $derived(COUNTRIES.slice().sort(order));
+
+	function handleChange(e: Event) {
+		selected = (e.currentTarget as HTMLSelectElement).value;
+		onselect?.(selected);
+	}
+
+	$effect(() => {
+		const country = COUNTRIES.find((c) => c.iso2 === selected);
+		dialCode = country?.dialCode ?? "";
+	});
+</script>
+
+<div class="relative flex shrink-0 items-center">
+	<HugeiconsIcon
+		icon={GlobalIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute left-2.5 size-4"
+	/>
+	<select
+		value={selected ?? ""}
+		onchange={handleChange}
+		aria-label="Country code"
+		{disabled}
+		class={cn(
+			"border-input bg-input/30 focus-visible:ring-ring/50 dark:bg-input/30 focus-visible:border-ring h-9 w-fit appearance-none rounded-l-md rounded-r-none border py-1 pr-8 pl-8 text-sm transition-[color,box-shadow] focus-visible:ring-[3px] outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>option]:bg-background",
+			disabled ? "cursor-not-allowed opacity-50" : "",
+		)}
+	>
+		{#each ordered as country (country.id)}
+			<option value={country.iso2}>
+				(+{country.dialCode})
+			</option>
+		{/each}
+	</select>
+</div>

package/dist/components/ui/phone-input/flag.svelte

@@ -1,12 +1,12 @@
-<script lang="ts">
-	import type { Country } from './types';
-
-	interface Props {
-		country?: Country | null;
-	}
-
-	let { country = null }: Props = $props();
-</script>
-
-<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
+<script lang="ts">
+	import type { Country } from './types';
+
+	interface Props {
+		country?: Country | null;
+	}
+
+	let { country = null }: Props = $props();
+</script>
+
+<span class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm">
 </span>

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

@@ -1,163 +1,163 @@
-<script lang="ts" module>
-	import type { TelInputOptions } from "./types";
-
-	export const defaultOptions: TelInputOptions = {
-		spaces: true,
-		autoPlaceholder: true,
-	};
-</script>
-
-<script lang="ts">
-	import CountrySelector, { COUNTRIES } from "./country-selector.svelte";
-	import { type PhoneInputProps } from ".";
-	import { cn } from "../../../utils.js";
-
-	let {
-		class: className = undefined,
-		defaultCountry = "ao",
-		country = $bindable(defaultCountry),
-		options = defaultOptions,
-		placeholder,
-		readonly = false,
-		disabled = false,
-		value = $bindable(""),
-		valid = $bindable(true),
-		// eslint-disable-next-line no-useless-assignment
-		detailedValue = $bindable(null),
-		order = undefined,
-		name = undefined,
-		...rest
-	}: PhoneInputProps = $props();
-
-	let el: HTMLInputElement | undefined = $state();
-	let dialCode = $state("");
-	let number = $state("");
-	let displayNumber = $state("");
-	let lastEmitted = $state("");
-
-	const currentCountry = $derived(
-		COUNTRIES.find((c) => c.iso2 === country) ?? null,
-	);
-
-	function nationalDigits(input: string): string {
-		return input.replace(/\D/g, "");
-	}
-
-	function formatNational(input: string): string {
-		const digits = nationalDigits(input);
-		if (!options?.spaces) return digits;
-		return digits.match(/.{1,3}/g)?.join(" ") ?? "";
-	}
-
-	function formatFull(code: string, input: string): string {
-		const national = nationalDigits(input);
-		if (!national) return "";
-		return options?.spaces
-			? `+${code} ${formatNational(national)}`
-			: `+${code}${national}`;
-	}
-
-	function parseValue(
-		input: string,
-	): { code: string; number: string } | null {
-		const digits = nationalDigits(input);
-		if (!digits) return null;
-		for (const c of COUNTRIES) {
-			if (
-				digits.startsWith(c.dialCode) &&
-				digits.length > c.dialCode.length
-			) {
-				return {
-					code: c.dialCode,
-					number: digits.slice(c.dialCode.length),
-				};
-			}
-		}
-		const exact = COUNTRIES.find((c) => digits === c.dialCode);
-		if (exact) return { code: exact.dialCode, number: "" };
-		return { code: "", number: digits };
-	}
-
-	function isValidNumber(input: string): boolean {
-		const length = nationalDigits(input).length;
-		if (!length) return true;
-		return length >= 6 && length <= 15;
-	}
-
-	function handleNumberInput(e: Event) {
-		const input = (e.currentTarget as HTMLInputElement).value;
-		displayNumber = input;
-		number = input.replace(/[^\d]/g, "");
-	}
-
-	function focus() {
-		setTimeout(() => {
-			el?.focus();
-		}, 0);
-	}
-
-	$effect(() => {
-		const full = formatFull(dialCode, number);
-		if (value !== full) {
-			value = full;
-			lastEmitted = full;
-		}
-		valid = isValidNumber(number);
-		detailedValue = {
-			country: currentCountry,
-			code: dialCode,
-			number: nationalDigits(number),
-		};
-	});
-
-	$effect(() => {
-		const incoming = value;
-		if (incoming === lastEmitted) return;
-		lastEmitted = incoming;
-		const parsed = parseValue(incoming);
-		if (!parsed) {
-			if (!nationalDigits(incoming)) {
-				number = "";
-				displayNumber = "";
-			}
-			return;
-		}
-		if (parsed.code) {
-			const matched = COUNTRIES.find((c) => c.dialCode === parsed.code);
-			if (matched && matched.iso2 !== country) country = matched.iso2;
-		}
-		dialCode = parsed.code;
-		number = parsed.number;
-		displayNumber = formatNational(parsed.number);
-	});
-</script>
-
-<div class={cn("flex h-9 w-full min-w-0 items-center")}>
-	<div class="">
-		<CountrySelector
-			{order}
-			{disabled}
-			bind:selected={country}
-			bind:dialCode
-			onselect={focus}
-		/>
-	</div>
-	<input
-		type="tel"
-		{name}
-		bind:this={el}
-		bind:value={displayNumber}
-		oninput={handleNumberInput}
-		{placeholder}
-		{readonly}
-		{disabled}
-		aria-invalid={!valid}
-		class={cn(
-			"border-input bg-transparent border-l-none selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 flex-1 rounded-r-md rounded-l-none border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-			className,
-		)}
-		{...rest}
-	/>
-</div>
+<script lang="ts" module>
+	import type { TelInputOptions } from "./types";
+
+	export const defaultOptions: TelInputOptions = {
+		spaces: true,
+		autoPlaceholder: true,
+	};
+</script>
+
+<script lang="ts">
+	import CountrySelector, { COUNTRIES } from "./country-selector.svelte";
+	import { type PhoneInputProps } from ".";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className = undefined,
+		defaultCountry = "ao",
+		country = $bindable(defaultCountry),
+		options = defaultOptions,
+		placeholder,
+		readonly = false,
+		disabled = false,
+		value = $bindable(""),
+		valid = $bindable(true),
+		// eslint-disable-next-line no-useless-assignment
+		detailedValue = $bindable(null),
+		order = undefined,
+		name = undefined,
+		...rest
+	}: PhoneInputProps = $props();
+
+	let el: HTMLInputElement | undefined = $state();
+	let dialCode = $state("");
+	let number = $state("");
+	let displayNumber = $state("");
+	let lastEmitted = $state("");
+
+	const currentCountry = $derived(
+		COUNTRIES.find((c) => c.iso2 === country) ?? null,
+	);
+
+	function nationalDigits(input: string): string {
+		return input.replace(/\D/g, "");
+	}
+
+	function formatNational(input: string): string {
+		const digits = nationalDigits(input);
+		if (!options?.spaces) return digits;
+		return digits.match(/.{1,3}/g)?.join(" ") ?? "";
+	}
+
+	function formatFull(code: string, input: string): string {
+		const national = nationalDigits(input);
+		if (!national) return "";
+		return options?.spaces
+			? `+${code} ${formatNational(national)}`
+			: `+${code}${national}`;
+	}
+
+	function parseValue(
+		input: string,
+	): { code: string; number: string } | null {
+		const digits = nationalDigits(input);
+		if (!digits) return null;
+		for (const c of COUNTRIES) {
+			if (
+				digits.startsWith(c.dialCode) &&
+				digits.length > c.dialCode.length
+			) {
+				return {
+					code: c.dialCode,
+					number: digits.slice(c.dialCode.length),
+				};
+			}
+		}
+		const exact = COUNTRIES.find((c) => digits === c.dialCode);
+		if (exact) return { code: exact.dialCode, number: "" };
+		return { code: "", number: digits };
+	}
+
+	function isValidNumber(input: string): boolean {
+		const length = nationalDigits(input).length;
+		if (!length) return true;
+		return length >= 6 && length <= 15;
+	}
+
+	function handleNumberInput(e: Event) {
+		const input = (e.currentTarget as HTMLInputElement).value;
+		displayNumber = input;
+		number = input.replace(/[^\d]/g, "");
+	}
+
+	function focus() {
+		setTimeout(() => {
+			el?.focus();
+		}, 0);
+	}
+
+	$effect(() => {
+		const full = formatFull(dialCode, number);
+		if (value !== full) {
+			value = full;
+			lastEmitted = full;
+		}
+		valid = isValidNumber(number);
+		detailedValue = {
+			country: currentCountry,
+			code: dialCode,
+			number: nationalDigits(number),
+		};
+	});
+
+	$effect(() => {
+		const incoming = value;
+		if (incoming === lastEmitted) return;
+		lastEmitted = incoming;
+		const parsed = parseValue(incoming);
+		if (!parsed) {
+			if (!nationalDigits(incoming)) {
+				number = "";
+				displayNumber = "";
+			}
+			return;
+		}
+		if (parsed.code) {
+			const matched = COUNTRIES.find((c) => c.dialCode === parsed.code);
+			if (matched && matched.iso2 !== country) country = matched.iso2;
+		}
+		dialCode = parsed.code;
+		number = parsed.number;
+		displayNumber = formatNational(parsed.number);
+	});
+</script>
+
+<div class={cn("flex h-9 w-full min-w-0 items-center")}>
+	<div class="">
+		<CountrySelector
+			{order}
+			{disabled}
+			bind:selected={country}
+			bind:dialCode
+			onselect={focus}
+		/>
+	</div>
+	<input
+		type="tel"
+		{name}
+		bind:this={el}
+		bind:value={displayNumber}
+		oninput={handleNumberInput}
+		{placeholder}
+		{readonly}
+		{disabled}
+		aria-invalid={!valid}
+		class={cn(
+			"border-input bg-transparent border-l-none selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 flex-1 rounded-r-md rounded-l-none border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className,
+		)}
+		{...rest}
+	/>
+</div>