includio-cms 0.34.1 → 0.35.0

package/API.md

@@ -1,8 +1,8 @@
-# includio-cms — Public API v0.34.1
+# includio-cms — Public API v0.35.0
 
 > Auto-generated by `scripts/generate-api-md.ts`. Do not edit by hand.
 
-Entry points: **19** · Stable: **488** · Experimental: **4**
+Entry points: **19** · Stable: **490** · Experimental: **4**
 
 Tags:
 - `@public` — frozen for v1.0; semver-protected.
@@ -362,6 +362,7 @@ Tags:
 - `const sessionRelations: <inferred>`
 - `interface ShippingCarrierConfig`
 - `type ShopCarrierType = 'none' | 'inpost' | string`
+- `type ShopCouponAppliesTo = 'net' | 'gross'`
 - `const shopCouponRedemptionsTable: <inferred>`
 - `const shopCouponsTable: <inferred>`
 - `type ShopCouponType = 'percent' | 'fixed'`
@@ -404,6 +405,7 @@ Tags:
 - `type InpostServiceType = | 'inpost_locker_standard' | 'inpost_locker_express' | 'inpost_courier_standard' | 'inpost_courie...`
 - `interface ShippingCarrierConfig`
 - `type ShopCarrierType = 'none' | 'inpost' | string`
+- `type ShopCouponAppliesTo = 'net' | 'gross'`
 - `const shopCouponRedemptionsTable: <inferred>`
 - `const shopCouponsTable: <inferred>`
 - `type ShopCouponType = 'percent' | 'fixed'`

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to includio-cms are documented here.
 Generated from `src/lib/updates/` — do not edit manually.
 
+## 0.35.0 — 2026-06-05
+
+Kupon `appliesTo` (netto/brutto), uczestnicy w `notes` (admin + email), Calendar+Popover w polach `date`/`datetime` (admin), `api.ts` bez `FormEntryMap` gdy projekt nie ma form. Additive only — domyślne zachowania bez zmian.
+
+### Added
+- `shop_coupons` dostaje kolumnę `applies_to` (enum `net`/`gross`, default `net`). `calculateCouponDiscountNet()` (`$lib/shop/pricing.ts`) liczy zniżkę od brutto (konwersja do netto przez średnią ważoną VAT) gdy `appliesTo="gross"` — działa zarówno dla `percent`, jak i `fixed`. Storage rabatu w bazie nadal w netto (canonical). Domyślnie `net` — istniejące kupony zachowują obecne zachowanie.
+- Admin coupon form (`coupon-form.svelte`) zyskuje toggle „Rabat dotyczy: netto / brutto" wzorowany na `inputMode` w `shop-field.svelte` — z helper textem objaśniającym wpływ na cenę zamówienia.
+- `order.notes` jest teraz traktowane jako opcjonalny JSON (`{ org?, orgName?, participants?: Array<{firstName, lastName}> }`) w admin order detail (`shop-order-detail-page.svelte`) oraz w kontekście emaila (`items.pl.html`/`items.en.html` przez `email.ts`). Plain-text notatki nadal renderują się raw — JSON wykrywany przez `try/catch` parse + shape guard.
+- Admin pola `date` i `datetime` (`date-field.svelte`, `datetime-field.svelte`) używają `bits-ui` Calendar w `Popover` zamiast natywnych `<input type="date|datetime-local">` — kalendarz z dropdownem miesiąca/roku, dwa Selecty (godzina 00–23, minuta 00/15/30/45) dla datetime, locale `pl-PL`/`en-GB` z `interfaceLanguage`. Output bez zmian: ISO datetime (`datetime`) / `YYYY-MM-DDT00:00:00.000Z` (`date`).
+
+### Fixed
+- `generateAPI()` (`src/lib/core/server/generator/generator.ts`) nie wstrzykuje już importu `FormEntryMap` / `createFormSubmission` w wygenerowanym `api.ts`, gdy projekt nie ma zdefiniowanych form (`config.forms` puste). Wcześniej projekty bez form miały martwy import, który psuł type-check / build.
+
+### Migration
+
+```sql
+ALTER TABLE shop_coupons ADD COLUMN IF NOT EXISTS applies_to text NOT NULL DEFAULT 'net';
+```
+
 ## 0.34.1 — 2026-06-03
 
 Fix: `AccountPage` eksportowany z głównego barrela `includio-cms/admin/client` (wcześniej brakowało go w eksportach, a scaffold importował z nieistniejącego subpath `includio-cms/admin/client/account`). Generowany `+page.svelte` dla konta importuje teraz z `includio-cms/admin/client`. Additive only.

package/DOCS.md

@@ -1,4 +1,4 @@
-# Includio CMS Documentation (v0.34.1)
+# Includio CMS Documentation (v0.35.0)
 
 > This file is auto-generated from the docs site. For the latest version, update the package.
 

package/dist/admin/client/shop/coupon-edit-page.svelte

@@ -114,6 +114,7 @@
 			initial={{
 				code: c.code,
 				type: c.type,
+				appliesTo: c.appliesTo ?? 'net',
 				value: Number(c.value),
 				minOrderAmount: c.minOrderAmount,
 				maxUses: c.maxUses,

package/dist/admin/client/shop/coupon-form.svelte

@@ -32,6 +32,13 @@
 			discountType: string;
 			discountTypePercent: string;
 			discountTypeFixed: string;
+			appliesTo: string;
+			appliesToNet: string;
+			appliesToGross: string;
+			appliesToHelperPercentNet: string;
+			appliesToHelperPercentGross: string;
+			appliesToHelperFixedNet: string;
+			appliesToHelperFixedGross: string;
 			value: string;
 			valuePercent: string;
 			valueFixed: string;
@@ -58,8 +65,19 @@
 			codeHint: 'Litery, cyfry, „_”, „-”. Wielkość liter zostanie ujednolicona do dużych.',
 			codePlaceholder: 'np. ARIA10',
 			discountType: 'Typ rabatu',
-			discountTypePercent: 'Procent (% od kwoty netto)',
+			discountTypePercent: 'Procent (%)',
 			discountTypeFixed: 'Kwota stała (PLN)',
+			appliesTo: 'Rabat dotyczy ceny',
+			appliesToNet: 'Netto',
+			appliesToGross: 'Brutto',
+			appliesToHelperPercentNet:
+				'Procent zostanie odjęty od kwoty netto całego zamówienia.',
+			appliesToHelperPercentGross:
+				'Procent zostanie odjęty od kwoty brutto całego zamówienia.',
+			appliesToHelperFixedNet:
+				'Kwota zostanie odjęta od ceny netto całego zamówienia.',
+			appliesToHelperFixedGross:
+				'Kwota zostanie odjęta od ceny brutto całego zamówienia.',
 			value: 'Wartość',
 			valuePercent: 'Procent (0–100)',
 			valueFixed: 'Kwota (PLN)',
@@ -85,8 +103,15 @@
 			codeHint: 'Letters, digits, "_", "-". Case will be normalized to uppercase.',
 			codePlaceholder: 'e.g. ARIA10',
 			discountType: 'Discount type',
-			discountTypePercent: 'Percent (% off net amount)',
+			discountTypePercent: 'Percent (%)',
 			discountTypeFixed: 'Fixed amount (PLN)',
+			appliesTo: 'Discount applies to',
+			appliesToNet: 'Net',
+			appliesToGross: 'Gross',
+			appliesToHelperPercentNet: 'Percent will be deducted from the net subtotal.',
+			appliesToHelperPercentGross: 'Percent will be deducted from the gross subtotal.',
+			appliesToHelperFixedNet: 'Amount will be deducted from the net subtotal.',
+			appliesToHelperFixedGross: 'Amount will be deducted from the gross subtotal.',
 			value: 'Value',
 			valuePercent: 'Percent (0–100)',
 			valueFixed: 'Amount (PLN)',
@@ -140,6 +165,7 @@
 		const labels: Record<string, string> = {
 			code: t.code,
 			type: t.discountType,
+			appliesTo: t.appliesTo,
 			value: t.value,
 			minOrderAmount: t.minOrder,
 			maxUses: t.maxUses,
@@ -221,6 +247,40 @@
 			<Form.FieldErrors />
 		</Form.Fieldset>
 
+		<Form.Fieldset {form} name="appliesTo" class="space-y-2">
+			<legend class="text-sm font-medium">{t.appliesTo}</legend>
+			<label class="flex items-center gap-2 text-sm">
+				<input
+					type="radio"
+					name="coupon-applies-to"
+					value="net"
+					bind:group={$formData.appliesTo}
+				/>
+				<span>{t.appliesToNet}</span>
+			</label>
+			<label class="flex items-center gap-2 text-sm">
+				<input
+					type="radio"
+					name="coupon-applies-to"
+					value="gross"
+					bind:group={$formData.appliesTo}
+				/>
+				<span>{t.appliesToGross}</span>
+			</label>
+			<p class="text-muted-foreground text-sm">
+				{#if $formData.type === 'percent' && $formData.appliesTo === 'net'}
+					{t.appliesToHelperPercentNet}
+				{:else if $formData.type === 'percent' && $formData.appliesTo === 'gross'}
+					{t.appliesToHelperPercentGross}
+				{:else if $formData.type === 'fixed' && $formData.appliesTo === 'net'}
+					{t.appliesToHelperFixedNet}
+				{:else}
+					{t.appliesToHelperFixedGross}
+				{/if}
+			</p>
+			<Form.FieldErrors />
+		</Form.Fieldset>
+
 		<Form.ElementField name="value" {form}>
 			<Form.Control>
 				{#snippet children({ props })}

package/dist/admin/client/shop/coupon-schema.d.ts

@@ -8,6 +8,7 @@ export type CouponInput = {
     code: string;
     type: 'percent' | 'fixed';
     value: number;
+    appliesTo: 'net' | 'gross';
     minOrderAmount: number | null;
     maxUses: number | null;
     expiresAt: string | null;
@@ -19,6 +20,10 @@ export declare function createCouponSchema(lang?: InterfaceLanguage): z.ZodObjec
         fixed: "fixed";
         percent: "percent";
     }>;
+    appliesTo: z.ZodEnum<{
+        net: "net";
+        gross: "gross";
+    }>;
     value: z.ZodNumber;
     minOrderAmount: z.ZodNullable<z.ZodNumber>;
     maxUses: z.ZodNullable<z.ZodNumber>;

package/dist/admin/client/shop/coupon-schema.js

@@ -31,6 +31,7 @@ export function createCouponSchema(lang = 'pl') {
             .max(64)
             .regex(/^[A-Za-z0-9_-]+$/, m.codeFormat),
         type: z.enum(['percent', 'fixed']),
+        appliesTo: z.enum(['net', 'gross']),
         value: z.number().positive(m.valuePositive),
         minOrderAmount: z.number().int().nonnegative(m.minOrderNonneg).nullable(),
         maxUses: z.number().int().positive(m.maxUsesPositive).nullable(),
@@ -45,6 +46,7 @@ export function createCouponSchema(lang = 'pl') {
 export const defaultCoupon = {
     code: '',
     type: 'percent',
+    appliesTo: 'net',
     value: 10,
     minOrderAmount: null,
     maxUses: null,

package/dist/admin/client/shop/shop-order-detail-page.svelte

@@ -37,6 +37,51 @@
 	const orderId = $derived(page.params.id ?? '');
 	const query = $derived(remotes.getOrderForAdmin(orderId));
 
+	type ParsedNotes = {
+		org: string | null;
+		orgName: string | null;
+		participants: Array<{ firstName: string; lastName: string }>;
+		raw: string | null;
+	};
+
+	function parseOrderNotes(notes: string): ParsedNotes {
+		const trimmed = notes.trim();
+		if (!trimmed.startsWith('{')) {
+			return { org: null, orgName: null, participants: [], raw: notes };
+		}
+		try {
+			const parsed = JSON.parse(trimmed) as {
+				org?: unknown;
+				orgName?: unknown;
+				participants?: unknown;
+			};
+			const org = typeof parsed.org === 'string' ? parsed.org : null;
+			const orgName = typeof parsed.orgName === 'string' ? parsed.orgName : null;
+			const participants = Array.isArray(parsed.participants)
+				? parsed.participants
+						.map((p): { firstName: string; lastName: string } | null => {
+							const fn =
+								typeof (p as { firstName?: unknown })?.firstName === 'string'
+									? (p as { firstName: string }).firstName.trim()
+									: '';
+							const ln =
+								typeof (p as { lastName?: unknown })?.lastName === 'string'
+									? (p as { lastName: string }).lastName.trim()
+									: '';
+							if (!fn && !ln) return null;
+							return { firstName: fn, lastName: ln };
+						})
+						.filter((p): p is { firstName: string; lastName: string } => p !== null)
+				: [];
+			if (!org && participants.length === 0) {
+				return { org: null, orgName: null, participants: [], raw: notes };
+			}
+			return { org, orgName, participants, raw: null };
+		} catch {
+			return { org: null, orgName: null, participants: [], raw: notes };
+		}
+	}
+
 	$effect(() => {
 		const s = sidebarLang[interfaceLanguage.current].shop;
 		const number = query.current?.order?.number;
@@ -743,9 +788,34 @@
 				{/if}
 
 				{#if order.notes}
-					<section class="border-border bg-card space-y-1 rounded-xl border p-5 text-sm">
+					{@const notesData = parseOrderNotes(order.notes)}
+					<section class="border-border bg-card space-y-3 rounded-xl border p-5 text-sm">
 						<h2 class="text-base font-bold">Uwagi klienta</h2>
-						<p class="text-xs whitespace-pre-wrap">{order.notes}</p>
+						{#if notesData.orgName || notesData.org}
+							<div class="text-xs">
+								<span class="text-muted-foreground">Organizacja:</span>
+								<span class="font-semibold">{notesData.orgName ?? notesData.org}</span>
+								{#if notesData.orgName && notesData.org}
+									<span class="text-muted-foreground">({notesData.org})</span>
+								{/if}
+							</div>
+						{/if}
+						{#if notesData.participants.length > 0}
+							<div class="space-y-1">
+								<div class="text-muted-foreground text-xs">Uczestnicy:</div>
+								<ol class="space-y-0.5 text-xs">
+									{#each notesData.participants as p, i (i)}
+										<li class="flex gap-2">
+											<span class="text-muted-foreground tabular-nums">{i + 1}.</span>
+											<span class="font-semibold">{p.firstName} {p.lastName}</span>
+										</li>
+									{/each}
+								</ol>
+							</div>
+						{/if}
+						{#if notesData.raw !== null}
+							<p class="text-xs whitespace-pre-wrap">{notesData.raw}</p>
+						{/if}
 					</section>
 				{/if}
 

package/dist/admin/components/fields/date-field.svelte

@@ -1,51 +1,105 @@
 <script lang="ts">
-	import Input from '../../../components/ui/input/input.svelte';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { Calendar } from '../../../components/ui/calendar/index.js';
+	import * as Popover from '../../../components/ui/popover/index.js';
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
 	import type { DateField } from '../../../types/fields.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { onMount } from 'svelte';
+	import { cn } from '../../../utils.js';
 
 	type Props = {
 		field: DateField;
 		value: string | undefined;
+		id?: string;
+		'aria-invalid'?: string | boolean | undefined;
+		'aria-describedby'?: string | undefined;
 	};
 
 	let { field, value = $bindable(), ...props }: Props = $props();
 
-	// Convert ISO date to YYYY-MM-DD for input
-	function toInputFormat(iso: string | undefined): string {
-		if (!iso) return '';
-		return iso.slice(0, 10);
+	const interfaceLanguage = useInterfaceLanguage();
+	const localeMap: Record<string, string> = { pl: 'pl-PL', en: 'en-GB' };
+	const locale = $derived(localeMap[interfaceLanguage.current] ?? 'en-GB');
+
+	const lang = {
+		pl: { pick: 'Wybierz datę' },
+		en: { pick: 'Pick a date' }
+	} as const;
+	const t = $derived(lang[interfaceLanguage.current as 'pl' | 'en'] ?? lang.en);
+
+	function parseValue(iso: string | undefined): CalendarDate | undefined {
+		if (!iso) return undefined;
+		const ymd = iso.slice(0, 10);
+		const [y, m, d] = ymd.split('-').map(Number);
+		if (!y || !m || !d) return undefined;
+		return new CalendarDate(y, m, d);
+	}
+
+	function pad(n: number): string {
+		return String(n).padStart(2, '0');
 	}
 
-	// Convert YYYY-MM-DD to ISO date string
-	function toIso(local: string): string {
-		if (!local) return '';
-		return `${local}T00:00:00.000Z`;
+	function toIso(d: CalendarDate): string {
+		return `${d.year}-${pad(d.month)}-${pad(d.day)}T00:00:00.000Z`;
 	}
 
-	let localValue = $state(toInputFormat(value));
+	let dateValue = $state<DateValue | undefined>(parseValue(value));
+	let open = $state(false);
+
+	let lastEmittedValue: string | undefined = value;
 
 	$effect(() => {
-		localValue = toInputFormat(value);
+		if (value === lastEmittedValue) return;
+		dateValue = parseValue(value);
+		lastEmittedValue = value;
 	});
 
-	function handleInput(e: Event) {
-		const target = e.target as HTMLInputElement;
-		localValue = target.value;
-		value = target.value ? toIso(target.value) : '';
-	}
+	$effect(() => {
+		const d = dateValue;
+		const next = d ? toIso(d as CalendarDate) : '';
+		if (next !== lastEmittedValue) {
+			lastEmittedValue = next;
+			value = next;
+		}
+	});
 
 	onMount(() => {
-		if (value === undefined) {
-			value = '';
-		}
+		if (value === undefined) value = '';
+	});
+
+	const minDate = $derived(parseValue(field.minDate));
+	const maxDate = $derived(parseValue(field.maxDate));
+
+	const display = $derived.by(() => {
+		if (!value) return t.pick;
+		const d = new Date(value);
+		if (isNaN(d.getTime())) return t.pick;
+		return new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(d);
 	});
 </script>
 
-<Input
-	{...props}
-	value={localValue}
-	oninput={handleInput}
-	type="date"
-	min={field.minDate ? toInputFormat(field.minDate) : undefined}
-	max={field.maxDate ? toInputFormat(field.maxDate) : undefined}
-/>
+<Popover.Root bind:open>
+	<Popover.Trigger
+		{...props}
+		class={cn(
+			'border-input bg-card flex h-9 w-full items-center gap-2 rounded-md border px-3 py-1 text-left text-sm shadow-xs outline-none transition-[color,box-shadow]',
+			'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',
+			!value && 'text-muted-foreground'
+		)}
+	>
+		<CalendarIcon class="size-4 opacity-50" />
+		<span class="flex-1 truncate">{display}</span>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto p-0" align="start">
+		<Calendar
+			type="single"
+			bind:value={dateValue}
+			{locale}
+			minValue={minDate}
+			maxValue={maxDate}
+			captionLayout="dropdown"
+		/>
+	</Popover.Content>
+</Popover.Root>

package/dist/admin/components/fields/date-field.svelte.d.ts

@@ -2,6 +2,9 @@ import type { DateField } from '../../../types/fields.js';
 type Props = {
     field: DateField;
     value: string | undefined;
+    id?: string;
+    'aria-invalid'?: string | boolean | undefined;
+    'aria-describedby'?: string | undefined;
 };
 declare const DateField: import("svelte").Component<Props, {}, "value">;
 type DateField = ReturnType<typeof DateField>;

package/dist/admin/components/fields/datetime-field.svelte

@@ -1,53 +1,166 @@
 <script lang="ts">
-	import Input from '../../../components/ui/input/input.svelte';
+	import { CalendarDate, type DateValue } from '@internationalized/date';
+	import { Calendar } from '../../../components/ui/calendar/index.js';
+	import * as Popover from '../../../components/ui/popover/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
+	import CalendarIcon from '@lucide/svelte/icons/calendar';
+	import ClockIcon from '@lucide/svelte/icons/clock';
 	import type { DateTimeField } from '../../../types/fields.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { onMount } from 'svelte';
+	import { cn } from '../../../utils.js';
 
 	type Props = {
 		field: DateTimeField;
 		value: string | undefined;
+		id?: string;
+		'aria-invalid'?: string | boolean | undefined;
+		'aria-describedby'?: string | undefined;
 	};
 
 	let { field, value = $bindable(), ...props }: Props = $props();
 
-	// Convert ISO datetime to datetime-local format (YYYY-MM-DDTHH:mm)
-	function toDatetimeLocal(iso: string | undefined): string {
-		if (!iso) return '';
-		const date = new Date(iso);
-		if (isNaN(date.getTime())) return '';
-		return date.toISOString().slice(0, 16);
+	const interfaceLanguage = useInterfaceLanguage();
+	const localeMap: Record<string, string> = { pl: 'pl-PL', en: 'en-GB' };
+	const locale = $derived(localeMap[interfaceLanguage.current] ?? 'en-GB');
+
+	const lang = {
+		pl: { pick: 'Wybierz datę i godzinę', time: 'Godzina' },
+		en: { pick: 'Pick date and time', time: 'Time' }
+	} as const;
+	const t = $derived(lang[interfaceLanguage.current as 'pl' | 'en'] ?? lang.en);
+
+	function parseValue(iso: string | undefined): {
+		date: CalendarDate | undefined;
+		hour: string;
+		minute: string;
+	} {
+		if (!iso) return { date: undefined, hour: '09', minute: '00' };
+		const d = new Date(iso);
+		if (isNaN(d.getTime())) return { date: undefined, hour: '09', minute: '00' };
+		return {
+			date: new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate()),
+			hour: String(d.getHours()).padStart(2, '0'),
+			minute: String(d.getMinutes()).padStart(2, '0')
+		};
 	}
 
-	// Convert datetime-local to ISO format
-	function toIso(local: string): string {
-		if (!local) return '';
-		return new Date(local).toISOString();
+	function parseMinMax(iso: string | undefined): CalendarDate | undefined {
+		if (!iso) return undefined;
+		const d = new Date(iso);
+		if (isNaN(d.getTime())) return undefined;
+		return new CalendarDate(d.getFullYear(), d.getMonth() + 1, d.getDate());
 	}
 
-	let localValue = $state(toDatetimeLocal(value));
+	const initial = parseValue(value);
+	let dateValue = $state<DateValue | undefined>(initial.date);
+	let hour = $state(initial.hour);
+	let minute = $state(initial.minute);
+	let open = $state(false);
+
+	let lastEmittedValue: string | undefined = value;
 
 	$effect(() => {
-		localValue = toDatetimeLocal(value);
+		if (value === lastEmittedValue) return;
+		const next = parseValue(value);
+		dateValue = next.date;
+		hour = next.hour;
+		minute = next.minute;
+		lastEmittedValue = value;
 	});
 
-	function handleInput(e: Event) {
-		const target = e.target as HTMLInputElement;
-		localValue = target.value;
-		value = target.value ? toIso(target.value) : '';
-	}
+	$effect(() => {
+		const d = dateValue;
+		const h = hour;
+		const m = minute;
 
-	onMount(() => {
-		if (value === undefined) {
-			value = '';
+		let next: string;
+		if (!d) {
+			next = '';
+		} else {
+			const hourNum = Number.parseInt(h, 10);
+			const minuteNum = Number.parseInt(m, 10);
+			const js = new Date(
+				d.year,
+				d.month - 1,
+				d.day,
+				Number.isFinite(hourNum) ? hourNum : 0,
+				Number.isFinite(minuteNum) ? minuteNum : 0,
+				0,
+				0
+			);
+			next = js.toISOString();
+		}
+
+		if (next !== lastEmittedValue) {
+			lastEmittedValue = next;
+			value = next;
 		}
 	});
+
+	onMount(() => {
+		if (value === undefined) value = '';
+	});
+
+	const minDate = $derived(parseMinMax(field.minDate));
+	const maxDate = $derived(parseMinMax(field.maxDate));
+
+	const display = $derived.by(() => {
+		if (!value) return t.pick;
+		const d = new Date(value);
+		if (isNaN(d.getTime())) return t.pick;
+		return new Intl.DateTimeFormat(locale, {
+			dateStyle: 'long',
+			timeStyle: 'short'
+		}).format(d);
+	});
+
+	const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
+	const minutes = ['00', '15', '30', '45'];
 </script>
 
-<Input
-	{...props}
-	value={localValue}
-	oninput={handleInput}
-	type="datetime-local"
-	min={field.minDate ? toDatetimeLocal(field.minDate) : undefined}
-	max={field.maxDate ? toDatetimeLocal(field.maxDate) : undefined}
-/>
+<Popover.Root bind:open>
+	<Popover.Trigger
+		{...props}
+		class={cn(
+			'border-input bg-card flex h-9 w-full items-center gap-2 rounded-md border px-3 py-1 text-left text-sm shadow-xs outline-none transition-[color,box-shadow]',
+			'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',
+			!value && 'text-muted-foreground'
+		)}
+	>
+		<CalendarIcon class="size-4 opacity-50" />
+		<span class="flex-1 truncate">{display}</span>
+	</Popover.Trigger>
+	<Popover.Content class="w-auto p-0" align="start">
+		<Calendar
+			type="single"
+			bind:value={dateValue}
+			{locale}
+			minValue={minDate}
+			maxValue={maxDate}
+			captionLayout="dropdown"
+		/>
+		<div class="border-border flex items-center gap-2 border-t p-3">
+			<ClockIcon class="size-4 opacity-50" />
+			<span class="text-muted-foreground text-xs font-semibold">{t.time}</span>
+			<Select.Root type="single" bind:value={hour}>
+				<Select.Trigger class="h-8 w-[68px]">{hour}</Select.Trigger>
+				<Select.Content>
+					{#each hours as h (h)}
+						<Select.Item value={h} label={h}>{h}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+			<span class="text-muted-foreground">:</span>
+			<Select.Root type="single" bind:value={minute}>
+				<Select.Trigger class="h-8 w-[68px]">{minute}</Select.Trigger>
+				<Select.Content>
+					{#each minutes as m (m)}
+						<Select.Item value={m} label={m}>{m}</Select.Item>
+					{/each}
+				</Select.Content>
+			</Select.Root>
+		</div>
+	</Popover.Content>
+</Popover.Root>

package/dist/admin/components/fields/datetime-field.svelte.d.ts

@@ -2,6 +2,9 @@ import type { DateTimeField } from '../../../types/fields.js';
 type Props = {
     field: DateTimeField;
     value: string | undefined;
+    id?: string;
+    'aria-invalid'?: string | boolean | undefined;
+    'aria-describedby'?: string | undefined;
 };
 declare const DatetimeField: import("svelte").Component<Props, {}, "value">;
 type DatetimeField = ReturnType<typeof DatetimeField>;