compote-ui 0.60.6 → 0.61.0

package/dist/components/data-table-v9/column-helper.js

@@ -6,7 +6,8 @@ const TYPE_DEFAULTS = {
     time: { align: 'center', size: 80 },
     'date-time': { align: 'center', size: 160 },
     boolean: { align: 'center', size: 90 },
-    url: { align: 'center', size: 60, enableSorting: false }
+    url: { align: 'center', size: 60, enableSorting: false },
+    phone: { align: 'left', size: 160 }
 };
 function applyTypeDefaults(options) {
     const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;

package/dist/components/data-table-v9/data-table-cell-content.svelte

@@ -2,15 +2,18 @@
 	import type { Cell, RowData } from '@tanstack/svelte-table';
 	import { FlexRender } from '@tanstack/svelte-table';
 	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhX } from '../../icons';
+	import { PhArrowSquareOut, PhCheck, PhPhone, PhX } from '../../icons';
 	import type { DataTableFeatures } from './features';
 	import {
 		getBooleanCellValue,
 		getColumnMeta,
+		getPhoneCellValue,
 		getUrlCellValue,
 		justifyClass,
+		openPhoneCell,
 		openUrlCell
 	} from './data-table-utils';
+	import { formatPhoneCellValue } from './phone-format';
 
 	type Props = {
 		cell: Cell<DataTableFeatures, T, unknown>;
@@ -61,6 +64,26 @@
 	{:else}
 		-
 	{/if}
+{:else if meta?.type === 'phone'}
+	{@const value = getPhoneCellValue(cell.getValue())}
+	{#if value}
+		<span class={cn('inline-flex max-w-full items-center gap-1.5', justifyClass(meta.align))}>
+			<button
+				type="button"
+				class="inline-flex shrink-0 appearance-none rounded-sm border-0 bg-transparent p-0 text-ink-dim outline-none hover:text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+				aria-label="Call {value}"
+				onclick={(event) => {
+					event.stopPropagation();
+					openPhoneCell(value);
+				}}
+			>
+				<PhPhone class="size-3.5" />
+			</button>
+			<span class="truncate leading-5">{formatPhoneCellValue(value)}</span>
+		</span>
+	{:else}
+		-
+	{/if}
 {:else}
 	<FlexRender {cell} />
 {/if}

package/dist/components/data-table-v9/data-table-utils.d.ts

@@ -96,6 +96,8 @@ export declare function getPinningStyle<T extends RowData>(column: Column<DataTa
 export declare function getGroupPinningStyle<T extends RowData>(header: Header<DataTableFeatures, T, unknown>, section: 'left' | 'center' | 'right' | undefined, state: DataTableTrackedState, isRowSelectionEnabled?: boolean): string | undefined;
 export declare function getUrlCellValue(value: unknown): string | undefined;
 export declare function openUrlCell(value: string): void;
+export declare function getPhoneCellValue(value: unknown): string | undefined;
+export declare function openPhoneCell(value: string): void;
 export declare function getColumnMeta(columnDef: {
     meta?: DataTableColumnMeta;
 }): DataTableColumnMeta | undefined;

package/dist/components/data-table-v9/data-table-utils.js

@@ -146,6 +146,14 @@ export function getUrlCellValue(value) {
 export function openUrlCell(value) {
     window.open(value, '_blank', 'noopener,noreferrer');
 }
+export function getPhoneCellValue(value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        return undefined;
+    return value;
+}
+export function openPhoneCell(value) {
+    window.location.href = `tel:${value}`;
+}
 // `columnDef.meta` is natively typed as DataTableColumnMeta via the `columnMeta`
 // type-only slot in features.ts; this accessor just narrows the columnDef shape.
 export function getColumnMeta(columnDef) {

package/dist/components/data-table-v9/phone-format.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Generic, country-agnostic readability formatter for E.164-ish phone strings
+ * (e.g. `+381601234567` -> `+381 601234567`). Splits off the country calling
+ * code using a static ITU code table and adds a single space after it; the
+ * subscriber number itself is left ungrouped, since grouping it correctly
+ * requires per-country number-plan knowledge (trunk codes, area codes, etc.)
+ * that doesn't belong in a generic default — apply a `cell` callback for
+ * locale-accurate national formatting. Values that don't start with `+` are
+ * returned unchanged.
+ */
+export declare function formatPhoneCellValue(value: string): string;

package/dist/components/data-table-v9/phone-format.js

@@ -0,0 +1,242 @@
+// E.164 country calling codes (digits only, no leading '+'). Sourced once from
+// svelte-tel-input's country list — kept as a plain literal so the data-table
+// subpath never imports svelte-tel-input (and its libphonenumber-js dependency)
+// at runtime.
+const CALLING_CODES = new Set([
+    '1',
+    '7',
+    '20',
+    '27',
+    '30',
+    '31',
+    '32',
+    '33',
+    '34',
+    '36',
+    '39',
+    '40',
+    '41',
+    '43',
+    '44',
+    '45',
+    '46',
+    '47',
+    '48',
+    '49',
+    '51',
+    '52',
+    '53',
+    '54',
+    '55',
+    '56',
+    '57',
+    '58',
+    '60',
+    '61',
+    '62',
+    '63',
+    '64',
+    '65',
+    '66',
+    '81',
+    '82',
+    '84',
+    '86',
+    '90',
+    '91',
+    '92',
+    '93',
+    '94',
+    '95',
+    '98',
+    '211',
+    '212',
+    '213',
+    '216',
+    '218',
+    '220',
+    '221',
+    '222',
+    '223',
+    '224',
+    '225',
+    '226',
+    '227',
+    '228',
+    '229',
+    '230',
+    '231',
+    '232',
+    '233',
+    '234',
+    '235',
+    '236',
+    '237',
+    '238',
+    '239',
+    '240',
+    '241',
+    '242',
+    '243',
+    '244',
+    '245',
+    '246',
+    '247',
+    '248',
+    '249',
+    '250',
+    '251',
+    '252',
+    '253',
+    '254',
+    '255',
+    '256',
+    '257',
+    '258',
+    '260',
+    '261',
+    '262',
+    '263',
+    '264',
+    '265',
+    '266',
+    '267',
+    '268',
+    '269',
+    '290',
+    '291',
+    '297',
+    '298',
+    '299',
+    '350',
+    '351',
+    '352',
+    '353',
+    '354',
+    '355',
+    '356',
+    '357',
+    '358',
+    '359',
+    '370',
+    '371',
+    '372',
+    '373',
+    '374',
+    '375',
+    '376',
+    '377',
+    '378',
+    '380',
+    '381',
+    '382',
+    '383',
+    '385',
+    '386',
+    '387',
+    '389',
+    '420',
+    '421',
+    '423',
+    '500',
+    '501',
+    '502',
+    '503',
+    '504',
+    '505',
+    '506',
+    '507',
+    '508',
+    '509',
+    '590',
+    '591',
+    '592',
+    '593',
+    '594',
+    '595',
+    '596',
+    '597',
+    '598',
+    '599',
+    '670',
+    '672',
+    '673',
+    '674',
+    '675',
+    '676',
+    '677',
+    '678',
+    '679',
+    '680',
+    '681',
+    '682',
+    '683',
+    '685',
+    '686',
+    '687',
+    '688',
+    '689',
+    '690',
+    '691',
+    '692',
+    '850',
+    '852',
+    '853',
+    '855',
+    '856',
+    '880',
+    '886',
+    '960',
+    '961',
+    '962',
+    '963',
+    '964',
+    '965',
+    '966',
+    '967',
+    '968',
+    '970',
+    '971',
+    '972',
+    '973',
+    '974',
+    '975',
+    '976',
+    '977',
+    '992',
+    '993',
+    '994',
+    '995',
+    '996',
+    '998'
+]);
+function matchCallingCode(digits) {
+    for (const len of [3, 2, 1]) {
+        const candidate = digits.slice(0, len);
+        if (candidate.length === len && CALLING_CODES.has(candidate))
+            return candidate;
+    }
+    return undefined;
+}
+/**
+ * Generic, country-agnostic readability formatter for E.164-ish phone strings
+ * (e.g. `+381601234567` -> `+381 601234567`). Splits off the country calling
+ * code using a static ITU code table and adds a single space after it; the
+ * subscriber number itself is left ungrouped, since grouping it correctly
+ * requires per-country number-plan knowledge (trunk codes, area codes, etc.)
+ * that doesn't belong in a generic default — apply a `cell` callback for
+ * locale-accurate national formatting. Values that don't start with `+` are
+ * returned unchanged.
+ */
+export function formatPhoneCellValue(value) {
+    if (!value.startsWith('+'))
+        return value;
+    const digits = value.slice(1).replace(/\D/g, '');
+    if (digits === '')
+        return value;
+    const code = matchCallingCode(digits);
+    if (!code)
+        return `+${digits}`;
+    const rest = digits.slice(code.length);
+    return rest ? `+${code} ${rest}` : `+${code}`;
+}

package/dist/components/data-table-v9/types.d.ts

@@ -2,7 +2,7 @@ import type { FilterFnOption, RowData } from '@tanstack/svelte-table';
 import type { Component, Snippet } from 'svelte';
 import type { DataTableFeatures } from './features';
 export type DataTableAlign = 'left' | 'center' | 'right';
-export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'date' | 'time' | 'date-time';
+export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'phone' | 'date' | 'time' | 'date-time';
 export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
 export type DataTableCellRenderProps<T extends RowData> = {
     value: unknown;

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import { Select } from '@ark-ui/svelte/select';
+	import { Portal } from '@ark-ui/svelte/portal';
+	import { TelInput, countries } from 'svelte-tel-input';
+	import type { CountryCode } from 'svelte-tel-input/types';
+	import type { PhoneInputProps } from './types';
+	import { createListCollection } from '../../utils/collections';
+	import { cn } from 'tailwind-variants';
+	import { PhCaretDown, PhCheck } from '../../icons';
+	import 'svelte-tel-input/styles/flags.css';
+
+	interface CountryItem {
+		value: string;
+		label: string;
+		flagClass: string;
+		dialCode: string;
+	}
+
+	const countryItems: CountryItem[] = countries.map((c) => ({
+		value: c.iso2,
+		label: `${c.name} +${c.dialCode}`,
+		flagClass: `flag-${c.iso2.toLowerCase()}`,
+		dialCode: c.dialCode
+	}));
+	const collection = createListCollection(countryItems);
+
+	let {
+		value = $bindable(''),
+		country = $bindable(null),
+		valid = $bindable(false),
+		label,
+		placeholder,
+		name,
+		layout = 'vertical',
+		disabled,
+		readonly,
+		invalid,
+		required,
+		class: className,
+		options
+	}: PhoneInputProps = $props();
+
+	const id = $props.id();
+	const numberId = `${id}-number`;
+
+	const selectedItem = $derived(countryItems.find((c) => c.value === country));
+
+	const rootClass = $derived(
+		layout === 'horizontal'
+			? 'flex items-center justify-between gap-1.5 w-full'
+			: 'flex flex-col gap-1.5 w-full max-w-72'
+	);
+</script>
+
+<div class={rootClass}>
+	{#if label}
+		<label for={numberId} class="text-sm leading-none font-medium">
+			{label}
+			{#if required}<span class="text-danger">*</span>{/if}
+		</label>
+	{/if}
+	<div
+		class={cn(
+			'flex h-9 w-full items-center rounded-md border bg-surface-1 shadow-sm transition-shadow focus-within:ring-1 focus-within:ring-ring',
+			'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+			invalid && 'border-danger focus-within:ring-danger',
+			className
+		)}
+		data-disabled={disabled ? '' : undefined}
+	>
+		<Select.Root
+			{collection}
+			value={country ? [country] : []}
+			onValueChange={(details) => {
+				country = (details.items[0]?.value as CountryCode | undefined) ?? null;
+			}}
+			{disabled}
+			readOnly={readonly}
+			class="h-9 shrink-0"
+		>
+			<Select.Control class="h-full">
+				<Select.Trigger
+					aria-label="Country"
+					class="flex h-9 cursor-pointer items-center gap-1.5 rounded-l-md border-r px-2.5 text-sm outline-none transition-colors hover:bg-surface-2 active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent"
+				>
+					{#if selectedItem}
+						<span
+							class="flag {selectedItem.flagClass} shrink-0 rounded-xs shadow-[inset_0_0_0_1px_var(--compote-border)]"
+						></span>
+						<span class="font-medium tabular-nums">+{selectedItem.dialCode}</span>
+					{:else}
+						<span class="text-ink-dim">Country</span>
+					{/if}
+					<PhCaretDown class="size-3 shrink-0 text-ink-dim" />
+				</Select.Trigger>
+			</Select.Control>
+			<Portal>
+				<Select.Positioner>
+					<Select.Content
+						class="z-200 max-h-60 min-w-52 overflow-auto rounded-md border bg-surface-document p-1 shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+					>
+						{#each countryItems as item (item.value)}
+							<Select.Item
+								{item}
+								class="relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm text-ink transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-surface-1 data-[state=checked]:bg-surface-1"
+							>
+								<span
+									class="flag {item.flagClass} shrink-0 rounded-xs shadow-[inset_0_0_0_1px_var(--compote-border)]"
+								></span>
+								<Select.ItemText class="flex-1 truncate">{item.label}</Select.ItemText>
+								<Select.ItemIndicator class="absolute right-2 flex items-center justify-center">
+									<PhCheck class="size-3.5" />
+								</Select.ItemIndicator>
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Positioner>
+			</Portal>
+		</Select.Root>
+		<TelInput
+			id={numberId}
+			bind:value
+			bind:country
+			bind:valid
+			{name}
+			{placeholder}
+			{disabled}
+			{readonly}
+			{required}
+			{options}
+			class="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none placeholder:text-ink-dim disabled:cursor-not-allowed"
+		/>
+	</div>
+</div>

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

@@ -0,0 +1,5 @@
+import type { PhoneInputProps } from './types';
+import 'svelte-tel-input/styles/flags.css';
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value" | "country" | "valid">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/components/phone-input/types.d.ts

@@ -0,0 +1,16 @@
+import type { CountryCode, TelInputOptions } from 'svelte-tel-input/types';
+export interface PhoneInputProps {
+    value?: string;
+    country?: CountryCode | null;
+    valid?: boolean;
+    label?: string;
+    placeholder?: string;
+    name?: string;
+    layout?: 'vertical' | 'horizontal';
+    disabled?: boolean;
+    readonly?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    class?: string;
+    options?: TelInputOptions;
+}

package/dist/components/phone-input/types.js

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

package/dist/icons/PhPhone.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M231.88,175.08A56.26,56.26,0,0,1,176,224C96.6,224,32,159.4,32,80A56.26,56.26,0,0,1,80.92,24.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,117.39,96c-.18.27-.37.52-.57.77L96,121.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,231.88,175.08Z"
+	/>
+</svg>
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

package/dist/icons/PhPhone.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhPhone: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhPhone = ReturnType<typeof PhPhone>;
+export default PhPhone;

package/dist/icons/index.d.ts

@@ -18,6 +18,7 @@ export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte
 export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
 export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
 export { default as PhMinus } from './PhMinus.svelte';
+export { default as PhPhone } from './PhPhone.svelte';
 export { default as PhStar } from './PhStar.svelte';
 export { default as PhUploadSimple } from './PhUploadSimple.svelte';
 export { default as PhUser } from './PhUser.svelte';

package/dist/icons/index.js

@@ -18,6 +18,7 @@ export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte
 export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
 export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
 export { default as PhMinus } from './PhMinus.svelte';
+export { default as PhPhone } from './PhPhone.svelte';
 export { default as PhStar } from './PhStar.svelte';
 export { default as PhUploadSimple } from './PhUploadSimple.svelte';
 export { default as PhUser } from './PhUser.svelte';

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { default as JsonTreeView } from './components/json-tree-view/json-tree-v
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';
+export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
+export type { PhoneInputProps } from './components/phone-input/types';
 export * as Popover from './components/popover';
 export { default as QrCode } from './components/qr-code/qr-code.svelte';
 export { default as Select } from './components/select/select.svelte';

package/dist/index.js

@@ -27,6 +27,7 @@ export { default as ImageCropDialog } from './components/image-crop-dialog/image
 export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
+export { default as PhoneInput } from './components/phone-input/phone-input.svelte';
 export * as Popover from './components/popover';
 export { default as QrCode } from './components/qr-code/qr-code.svelte';
 export { default as Select } from './components/select/select.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.60.6",
+	"version": "0.61.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -58,13 +58,13 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.9",
-		"@sveltejs/kit": "^2.65.2",
+		"@sveltejs/kit": "^2.66.0",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "7.1.2",
 		"@tailwindcss/vite": "^4.3.1",
-		"@tanstack/svelte-table": "^9.0.0-beta.12",
+		"@tanstack/svelte-table": "^9.0.0-beta.17",
 		"@tanstack/svelte-virtual": "^3.13.29",
-		"@types/node": "^22.19.18",
+		"@types/node": "^22.20.0",
 		"eslint": "^10.5.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.19.0",
@@ -90,6 +90,7 @@
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@internationalized/date": "^3.12.2",
 		"runed": "^0.37.1",
+		"svelte-tel-input": "^4.2.0",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2"
 	}