negodesign 0.0.77 → 0.0.79

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

@@ -1,148 +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', 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>
+<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>

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

@@ -1,6 +1,6 @@
-import type { TelInputOptions } from './types';
+import type { TelInputOptions } from "./types";
 export declare const defaultOptions: TelInputOptions;
-import { type PhoneInputProps } from '.';
+import { type PhoneInputProps } from ".";
 declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value" | "country" | "valid" | "detailedValue">;
 type PhoneInput = ReturnType<typeof PhoneInput>;
 export default PhoneInput;

package/dist/components/ui/popover/popover-close.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">
-	import { getPopoverContext } from "./popover-context.svelte.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLButtonAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLButtonElement | null>(null),
-		children,
-		...restProps
-	}: HTMLButtonAttributes & {
-		ref?: HTMLButtonElement | null;
-		children?: Snippet;
-	} = $props();
-
-	const store = getPopoverContext();
-</script>
-
-<button
-	bind:this={ref}
-	type="button"
-	data-slot="popover-close"
-	onclick={() => store.closeMenu()}
-	{...restProps}
->
-	{@render children?.()}
+<script lang="ts">
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLButtonElement | null>(null),
+		children,
+		...restProps
+	}: HTMLButtonAttributes & {
+		ref?: HTMLButtonElement | null;
+		children?: Snippet;
+	} = $props();
+
+	const store = getPopoverContext();
+</script>
+
+<button
+	bind:this={ref}
+	type="button"
+	data-slot="popover-close"
+	onclick={() => store.closeMenu()}
+	{...restProps}
+>
+	{@render children?.()}
 </button>

package/dist/components/ui/popover/popover-content.svelte

@@ -1,93 +1,93 @@
-<script lang="ts">
-	import { getPopoverContext } from "./popover-context.svelte.js";
-	import { cn } from "../../../utils.js";
-	import type { Snippet } from "svelte";
-	import type { HTMLAttributes } from "svelte/elements";
-
-	let {
-		ref = $bindable<HTMLDivElement | null>(null),
-		align = "center",
-		side = "bottom",
-		sideOffset = 4,
-		portalProps,
-		class: className,
-		children,
-		...restProps
-	}: HTMLAttributes<HTMLDivElement> & {
-		ref?: HTMLDivElement | null;
-		align?: "start" | "center" | "end";
-		side?: "top" | "right" | "bottom" | "left";
-		sideOffset?: number;
-		portalProps?: Record<string, unknown>;
-		class?: string;
-		children?: Snippet;
-	} = $props();
-
-	const store = getPopoverContext();
-
-	$effect(() => {
-		if (!store.open) return;
-		function handlePointerDown(event: PointerEvent) {
-			const target = event.target as Node;
-			if (store.anchorEl?.contains(target)) return;
-			if (ref?.contains(target)) return;
-			store.closeMenu();
-		}
-		function handleKeydown(event: KeyboardEvent) {
-			if (event.key === "Escape") {
-				store.closeMenu();
-				store.anchorEl?.focus();
-			}
-		}
-		document.addEventListener("pointerdown", handlePointerDown);
-		document.addEventListener("keydown", handleKeydown);
-		return () => {
-			document.removeEventListener("pointerdown", handlePointerDown);
-			document.removeEventListener("keydown", handleKeydown);
-		};
-	});
-
-	let positionClasses = $derived.by(() => {
-		const horizontal = side === "right" || side === "left";
-		if (horizontal) {
-			const sideClass = side === "left" ? "right-full" : "left-full";
-			const alignClass =
-				align === "end"
-					? "bottom-0"
-					: align === "start"
-						? "top-0"
-						: "top-1/2 -translate-y-1/2";
-			const margin =
-				side === "left"
-					? `margin-right: ${sideOffset + 4}px`
-					: `margin-left: ${sideOffset + 4}px`;
-			return { sideClass, alignClass, margin };
-		}
-		const sideClass = side === "top" ? "bottom-full" : "top-full";
-		const alignClass =
-			align === "end" ? "end-0" : align === "start" ? "start-0" : "start-1/2 -translate-x-1/2";
-		const margin =
-			side === "top"
-				? `margin-bottom: ${sideOffset + 4}px`
-				: `margin-top: ${sideOffset + 4}px`;
-		return { sideClass, alignClass, margin };
-	});
-</script>
-
-{#if store.open}
-	<div
-		bind:this={ref}
-		data-slot="popover-content"
-		data-state={store.open ? "open" : "closed"}
-		style={positionClasses.margin}
-		class={cn(
-			"absolute z-50 w-72 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none animate-zoom-in",
-			positionClasses.sideClass,
-			positionClasses.alignClass,
-			className,
-		)}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
+<script lang="ts">
+	import { getPopoverContext } from "./popover-context.svelte.js";
+	import { cn } from "../../../utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable<HTMLDivElement | null>(null),
+		align = "center",
+		side = "bottom",
+		sideOffset = 4,
+		portalProps,
+		class: className,
+		children,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		align?: "start" | "center" | "end";
+		side?: "top" | "right" | "bottom" | "left";
+		sideOffset?: number;
+		portalProps?: Record<string, unknown>;
+		class?: string;
+		children?: Snippet;
+	} = $props();
+
+	const store = getPopoverContext();
+
+	$effect(() => {
+		if (!store.open) return;
+		function handlePointerDown(event: PointerEvent) {
+			const target = event.target as Node;
+			if (store.anchorEl?.contains(target)) return;
+			if (ref?.contains(target)) return;
+			store.closeMenu();
+		}
+		function handleKeydown(event: KeyboardEvent) {
+			if (event.key === "Escape") {
+				store.closeMenu();
+				store.anchorEl?.focus();
+			}
+		}
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeydown);
+		return () => {
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeydown);
+		};
+	});
+
+	let positionClasses = $derived.by(() => {
+		const horizontal = side === "right" || side === "left";
+		if (horizontal) {
+			const sideClass = side === "left" ? "right-full" : "left-full";
+			const alignClass =
+				align === "end"
+					? "bottom-0"
+					: align === "start"
+						? "top-0"
+						: "top-1/2 -translate-y-1/2";
+			const margin =
+				side === "left"
+					? `margin-right: ${sideOffset + 4}px`
+					: `margin-left: ${sideOffset + 4}px`;
+			return { sideClass, alignClass, margin };
+		}
+		const sideClass = side === "top" ? "bottom-full" : "top-full";
+		const alignClass =
+			align === "end" ? "end-0" : align === "start" ? "start-0" : "start-1/2 -translate-x-1/2";
+		const margin =
+			side === "top"
+				? `margin-bottom: ${sideOffset + 4}px`
+				: `margin-top: ${sideOffset + 4}px`;
+		return { sideClass, alignClass, margin };
+	});
+</script>
+
+{#if store.open}
+	<div
+		bind:this={ref}
+		data-slot="popover-content"
+		data-state={store.open ? "open" : "closed"}
+		style={positionClasses.margin}
+		class={cn(
+			"absolute z-50 w-72 rounded-md border bg-popover p-4 text-sm text-popover-foreground shadow-md outline-none animate-zoom-in",
+			positionClasses.sideClass,
+			positionClasses.alignClass,
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
 {/if}

package/dist/components/ui/popover/popover-portal.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	let { children }: { children?: Snippet } = $props();
-</script>
-
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
 {@render children?.()}