negodesign 0.0.73 → 0.0.75

package/dist/components/{core → ui}/panel/NotFoundEmpty.svelte

@@ -1,66 +1,66 @@
-<script lang="ts">
-  import * as Empty from "../../ui/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/{core → ui}/panel/type.d.ts

@@ -1,4 +1,4 @@
-import type { CarouselPlugins } from "../../ui/carousel/context";
+import type { CarouselPlugins } from "../carousel/context";
 import type { Snippet } from "svelte";
 import type { IconSvgElement } from "@hugeicons/svelte";
 /**

package/dist/components/ui/panel/type.js

@@ -0,0 +1 @@
+export {};

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, UnfoldMoreIcon } 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.name} (+{country.dialCode})
-			</option>
-		{/each}
-	</select>
-	<HugeiconsIcon
-		icon={UnfoldMoreIcon}
-		strokeWidth={2}
-		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
-	/>
+<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, UnfoldMoreIcon } 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.name} (+{country.dialCode})
+			</option>
+		{/each}
+	</select>
+	<HugeiconsIcon
+		icon={UnfoldMoreIcon}
+		strokeWidth={2}
+		class="text-muted-foreground pointer-events-none absolute right-2.5 size-4"
+	/>
 </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,148 +1,148 @@
-<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', className)}>
-	<CountrySelector
-		{order}
-		{disabled}
-		bind:selected={country}
-		bind:dialCode
-		onselect={focus}
-	/>
-	<input
-		type="tel"
-		{name}
-		bind:this={el}
-		bind:value={displayNumber}
-		oninput={handleNumberInput}
-		{placeholder}
-		readonly={readonly}
-		{disabled}
-		aria-invalid={!valid}
-		class={cn(
-			'border-input border-l-none bg-background 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'
-		)}
-		{...rest}
-	/>
+<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', className)}>
+	<CountrySelector
+		{order}
+		{disabled}
+		bind:selected={country}
+		bind:dialCode
+		onselect={focus}
+	/>
+	<input
+		type="tel"
+		{name}
+		bind:this={el}
+		bind:value={displayNumber}
+		oninput={handleNumberInput}
+		{placeholder}
+		readonly={readonly}
+		{disabled}
+		aria-invalid={!valid}
+		class={cn(
+			'border-input border-l-none bg-background 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'
+		)}
+		{...rest}
+	/>
 </div>