@asteby/metacore-runtime-react 13.4.1 → 13.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @asteby/metacore-runtime-react
 
+## 13.5.0
+
+### Minor Changes
+
+- 0e427f1: feat(forms): modern date picker, roomy line-items modal, 2-column layout
+
+  Three declarative-form polish items, all driven by field shape — zero per-app code:
+  - **DynamicDateField**: `type: "date"` fields now render a shadcn Calendar inside
+    a Popover instead of the native `<input type="date">`. The Popover portals to
+    the body so the calendar is never clipped by the modal (fixes the cut-off), and
+    it looks modern. The field value stays an ISO `YYYY-MM-DD` string, so payloads
+    are unchanged. No future-date restriction (entries can be post-dated).
+  - **Roomy modal for line-items**: GenericActionModal auto-widens to ~820px when
+    the action has a line-items (`type:"array"`) field so the debit/credit grid has
+    room; plain forms stay compact. An optional `action.modalWidth` overrides.
+    Applied as an inline style so it always takes effect.
+  - **2-column field layout**: scalar fields (journal, date, reference) flow
+    side-by-side instead of one tall vertical stack; line-items grids and textareas
+    span full width. Mirrors DynamicForm so the action modal and standalone form
+    render identically.
+
 ## 13.4.1
 
 ### Patch Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AA6CA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAEhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,kDAiDlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AA8CA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAEhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,kDAiDlB"}

package/dist/action-modal-dispatcher.js

@@ -16,6 +16,7 @@ import { useApi } from './api-context';
 import { DynamicIcon } from './dynamic-icon';
 import { DynamicLineItems } from './dynamic-line-items';
 import { DynamicSelectField } from './dynamic-select-field';
+import { DynamicDateField } from './dynamic-date-field';
 import { isLineItemsField, resolveWidget } from './dynamic-form-schema';
 // Canonical registry lives in @asteby/metacore-sdk
 import { getActionComponent, } from '@asteby/metacore-sdk';
@@ -120,7 +121,26 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             setExecuting(false);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "grid gap-4 py-4", children: action.fields?.map((field) => (_jsxs("div", { className: "grid gap-2", children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v))] }, field.key))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
+    // Size the modal to the form. A line-items form (the debit/credit grid of a
+    // journal entry, a "receive goods" modal) needs room for its columns, so it
+    // gets a roomy width; a plain field form stays compact. An explicit
+    // `action.modalWidth` (number px or CSS length) overrides — the declarative
+    // escape hatch. Width is applied as an inline style (guaranteed to apply,
+    // unlike an arbitrary Tailwind class that the host's scan may drop), capped
+    // to the viewport so it stays responsive on phones.
+    const hasLineItems = useMemo(() => (action.fields ?? []).some(isLineItemsField), [action.fields]);
+    const explicitWidth = action.modalWidth;
+    const widthPx = explicitWidth != null
+        ? (typeof explicitWidth === 'number' ? `${explicitWidth}px` : explicitWidth)
+        : hasLineItems
+            ? '820px'
+            : undefined;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: widthPx ? '' : 'sm:max-w-lg', style: widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(DynamicIcon, { name: action.icon, className: "h-5 w-5" }), action.label] }), action.confirmMessage && _jsx(DialogDescription, { children: action.confirmMessage })] }), _jsx("div", { className: "grid gap-4 py-4 sm:grid-cols-2", children: action.fields?.map((field) => {
+                        const fullWidth = isLineItemsField(field) ||
+                            resolveWidget(field) === 'textarea' ||
+                            resolveWidget(field) === 'richtext';
+                        return (_jsxs("div", { className: 'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : ''), children: [_jsxs(Label, { htmlFor: field.key, children: [field.label, field.required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), renderField(field, formData[field.key], (v) => updateField(field.key, v))] }, field.key));
+                    }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: executing, children: t('common.cancel') }), _jsxs(Button, { onClick: execute, disabled: executing, style: action.color ? { backgroundColor: action.color, color: 'white' } : undefined, children: [executing ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : _jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] })] })] }) }));
 }
 function renderField(field, value, onChange) {
     // Repeatable line-items group → row grid (value is an array of row objects).
@@ -145,7 +165,9 @@ function renderField(field, value, onChange) {
         case 'number':
             return _jsx(Input, { id: field.key, type: "number", value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || ''), placeholder: field.placeholder });
         case 'date':
-            return _jsx(Input, { id: field.key, type: "date", value: value || '', onChange: (e) => onChange(e.target.value) });
+            // Modern shadcn Calendar in a Popover (portaled, never clipped by the
+            // modal) instead of the native, dated, easily-cut <input type=date>.
+            return _jsx(DynamicDateField, { field: field, value: value, onChange: onChange });
         default:
             return _jsx(Input, { id: field.key, type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
     }

package/dist/dynamic-date-field.d.ts

@@ -0,0 +1,9 @@
+import type { ActionFieldDef } from './types';
+export interface DynamicDateFieldProps {
+    field: ActionFieldDef;
+    value: any;
+    onChange: (v: any) => void;
+}
+export declare function DynamicDateField({ field, value, onChange }: DynamicDateFieldProps): import("react/jsx-runtime").JSX.Element;
+export default DynamicDateField;
+//# sourceMappingURL=dynamic-date-field.d.ts.map

package/dist/dynamic-date-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-date-field.d.ts","sourceRoot":"","sources":["../src/dynamic-date-field.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AA+BD,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAkCjF;AAED,eAAe,gBAAgB,CAAA"}

package/dist/dynamic-date-field.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DynamicDateField — modern date picker for declarative forms: a shadcn
+// Calendar inside a Popover, instead of the native `<input type="date">` whose
+// browser calendar looks dated and gets clipped inside a modal.
+//
+// Contract: the field VALUE stays an ISO date string ("YYYY-MM-DD") so the form
+// payload is unchanged (the kernel/handlers already expect that). We parse the
+// string to a Date for the Calendar and format back to ISO on select. The
+// Popover portals to the document body, so the calendar is never clipped by the
+// modal's overflow — fixing the "se corta" cut-off.
+//
+// Deliberately NOT reusing metacore-ui's `DatePicker` shared helper: that one
+// hard-disables future dates and pins a fixed 240px width, neither of which is
+// right for a generic declarative field (a journal entry can be post-dated).
+import { useState } from 'react';
+import { Button, Calendar, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
+import { CalendarIcon } from 'lucide-react';
+// Parse "YYYY-MM-DD" (or any Date-parseable string) into a local Date, or
+// undefined when empty/invalid. Uses noon to dodge timezone day-shift.
+function toDate(v) {
+    if (!v)
+        return undefined;
+    const s = String(v);
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+    if (m)
+        return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12);
+    const d = new Date(s);
+    return isNaN(d.getTime()) ? undefined : d;
+}
+// Format a Date back to "YYYY-MM-DD" (local, no timezone shift).
+function toISO(d) {
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    return `${y}-${m}-${day}`;
+}
+// Human label for the trigger. Locale-aware, falls back to the raw ISO.
+function label(d) {
+    if (!d)
+        return '';
+    try {
+        return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
+    }
+    catch {
+        return toISO(d);
+    }
+}
+export function DynamicDateField({ field, value, onChange }) {
+    const [open, setOpen] = useState(false);
+    const selected = toDate(value);
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", id: field.key, "data-empty": !selected, className: "w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground", children: [_jsx(CalendarIcon, { className: "mr-2 size-4 shrink-0 opacity-50" }), _jsx("span", { className: "truncate", children: selected ? label(selected) : (field.placeholder || 'Elegí una fecha') })] }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: _jsx(Calendar, { mode: "single", captionLayout: "dropdown", selected: selected, defaultMonth: selected, onSelect: (d) => {
+                        onChange(d ? toISO(d) : '');
+                        setOpen(false);
+                    } }) })] }));
+}
+export default DynamicDateField;

package/dist/dynamic-form.d.ts

@@ -3,6 +3,7 @@ import { buildZodSchema, resolveWidget } from './dynamic-form-schema';
 export { buildZodSchema, resolveWidget };
 export { DynamicLineItems } from './dynamic-line-items';
 export { DynamicSelectField } from './dynamic-select-field';
+export { DynamicDateField } from './dynamic-date-field';
 export interface DynamicFormProps {
     fields: ActionFieldDef[];
     initialValues?: Record<string, any>;

package/dist/dynamic-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAGhB,MAAM,uBAAuB,CAAA;AAK9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CAkGlB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAGhB,MAAM,uBAAuB,CAAA;AAM9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,2CAkGlB"}

package/dist/dynamic-form.js

@@ -8,9 +8,11 @@ import { buildZodSchema, resolveWidget, isLineItemsField, evaluateBalance, } fro
 import { useOptionsResolver } from './use-options-resolver';
 import { DynamicLineItems } from './dynamic-line-items';
 import { DynamicSelectField } from './dynamic-select-field';
+import { DynamicDateField } from './dynamic-date-field';
 export { buildZodSchema, resolveWidget };
 export { DynamicLineItems } from './dynamic-line-items';
 export { DynamicSelectField } from './dynamic-select-field';
+export { DynamicDateField } from './dynamic-date-field';
 export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitLabel = 'Guardar', cancelLabel = 'Cancelar', disabled = false, }) {
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
@@ -113,7 +115,7 @@ function FieldRenderer({ field, value, onChange }) {
         case 'number':
             return _jsx(Input, { id: field.key, type: "number", value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || ''), placeholder: field.placeholder });
         case 'date':
-            return _jsx(Input, { id: field.key, type: "date", value: value || '', onChange: (e) => onChange(e.target.value) });
+            return _jsx(DynamicDateField, { field: field, value: value, onChange: onChange });
         default:
             return _jsx(Input, { id: field.key, type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.4.1",
+  "version": "13.5.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/action-modal-dispatcher.tsx

@@ -40,6 +40,7 @@ import { useApi } from './api-context'
 import { DynamicIcon } from './dynamic-icon'
 import { DynamicLineItems } from './dynamic-line-items'
 import { DynamicSelectField } from './dynamic-select-field'
+import { DynamicDateField } from './dynamic-date-field'
 import { isLineItemsField, resolveWidget } from './dynamic-form-schema'
 import type { ActionFieldDef } from './types'
 // Canonical registry lives in @asteby/metacore-sdk
@@ -224,9 +225,31 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
         }
     }
 
+    // Size the modal to the form. A line-items form (the debit/credit grid of a
+    // journal entry, a "receive goods" modal) needs room for its columns, so it
+    // gets a roomy width; a plain field form stays compact. An explicit
+    // `action.modalWidth` (number px or CSS length) overrides — the declarative
+    // escape hatch. Width is applied as an inline style (guaranteed to apply,
+    // unlike an arbitrary Tailwind class that the host's scan may drop), capped
+    // to the viewport so it stays responsive on phones.
+    const hasLineItems = useMemo(
+        () => (action.fields ?? []).some(isLineItemsField),
+        [action.fields],
+    )
+    const explicitWidth = (action as unknown as { modalWidth?: number | string }).modalWidth
+    const widthPx =
+        explicitWidth != null
+            ? (typeof explicitWidth === 'number' ? `${explicitWidth}px` : explicitWidth)
+            : hasLineItems
+              ? '820px'
+              : undefined
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-lg">
+            <DialogContent
+                className={widthPx ? '' : 'sm:max-w-lg'}
+                style={widthPx ? { maxWidth: widthPx, width: '95vw' } : undefined}
+            >
                 <DialogHeader>
                     <DialogTitle className="flex items-center gap-2">
                         <DynamicIcon name={action.icon} className="h-5 w-5" />
@@ -234,16 +257,30 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                     </DialogTitle>
                     {action.confirmMessage && <DialogDescription>{action.confirmMessage}</DialogDescription>}
                 </DialogHeader>
-                <div className="grid gap-4 py-4">
-                    {action.fields?.map((field) => (
-                        <div key={field.key} className="grid gap-2">
-                            <Label htmlFor={field.key}>
-                                {field.label}
-                                {field.required && <span className="text-red-500 ml-1">*</span>}
-                            </Label>
-                            {renderField(field, formData[field.key], (v: any) => updateField(field.key, v))}
-                        </div>
-                    ))}
+                {/* Responsive 2-column grid: scalar fields (journal, date,
+                    reference) flow side-by-side instead of one tall vertical
+                    stack; line-items grids and textareas span the full width so
+                    they get room. Mirrors DynamicForm's pro layout — driven only
+                    by field shape, fully declarative. */}
+                <div className="grid gap-4 py-4 sm:grid-cols-2">
+                    {action.fields?.map((field) => {
+                        const fullWidth =
+                            isLineItemsField(field) ||
+                            resolveWidget(field) === 'textarea' ||
+                            resolveWidget(field) === 'richtext'
+                        return (
+                            <div
+                                key={field.key}
+                                className={'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : '')}
+                            >
+                                <Label htmlFor={field.key}>
+                                    {field.label}
+                                    {field.required && <span className="text-red-500 ml-1">*</span>}
+                                </Label>
+                                {renderField(field, formData[field.key], (v: any) => updateField(field.key, v))}
+                            </div>
+                        )
+                    })}
                 </div>
                 <DialogFooter>
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={executing}>
@@ -297,7 +334,9 @@ function renderField(
         case 'number':
             return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')} placeholder={field.placeholder} />
         case 'date':
-            return <Input id={field.key} type="date" value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
+            // Modern shadcn Calendar in a Popover (portaled, never clipped by the
+            // modal) instead of the native, dated, easily-cut <input type=date>.
+            return <DynamicDateField field={field} value={value} onChange={onChange} />
         default:
             return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
     }

package/src/dynamic-date-field.tsx

@@ -0,0 +1,96 @@
+// DynamicDateField — modern date picker for declarative forms: a shadcn
+// Calendar inside a Popover, instead of the native `<input type="date">` whose
+// browser calendar looks dated and gets clipped inside a modal.
+//
+// Contract: the field VALUE stays an ISO date string ("YYYY-MM-DD") so the form
+// payload is unchanged (the kernel/handlers already expect that). We parse the
+// string to a Date for the Calendar and format back to ISO on select. The
+// Popover portals to the document body, so the calendar is never clipped by the
+// modal's overflow — fixing the "se corta" cut-off.
+//
+// Deliberately NOT reusing metacore-ui's `DatePicker` shared helper: that one
+// hard-disables future dates and pins a fixed 240px width, neither of which is
+// right for a generic declarative field (a journal entry can be post-dated).
+import { useState } from 'react'
+import {
+    Button,
+    Calendar,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@asteby/metacore-ui/primitives'
+import { CalendarIcon } from 'lucide-react'
+import type { ActionFieldDef } from './types'
+
+export interface DynamicDateFieldProps {
+    field: ActionFieldDef
+    value: any
+    onChange: (v: any) => void
+}
+
+// Parse "YYYY-MM-DD" (or any Date-parseable string) into a local Date, or
+// undefined when empty/invalid. Uses noon to dodge timezone day-shift.
+function toDate(v: any): Date | undefined {
+    if (!v) return undefined
+    const s = String(v)
+    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s)
+    if (m) return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]), 12)
+    const d = new Date(s)
+    return isNaN(d.getTime()) ? undefined : d
+}
+
+// Format a Date back to "YYYY-MM-DD" (local, no timezone shift).
+function toISO(d: Date): string {
+    const y = d.getFullYear()
+    const m = String(d.getMonth() + 1).padStart(2, '0')
+    const day = String(d.getDate()).padStart(2, '0')
+    return `${y}-${m}-${day}`
+}
+
+// Human label for the trigger. Locale-aware, falls back to the raw ISO.
+function label(d: Date | undefined): string {
+    if (!d) return ''
+    try {
+        return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+    } catch {
+        return toISO(d)
+    }
+}
+
+export function DynamicDateField({ field, value, onChange }: DynamicDateFieldProps) {
+    const [open, setOpen] = useState(false)
+    const selected = toDate(value)
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    id={field.key}
+                    data-empty={!selected}
+                    className="w-full justify-start text-start font-normal data-[empty=true]:text-muted-foreground"
+                >
+                    <CalendarIcon className="mr-2 size-4 shrink-0 opacity-50" />
+                    <span className="truncate">
+                        {selected ? label(selected) : (field.placeholder || 'Elegí una fecha')}
+                    </span>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                    mode="single"
+                    captionLayout="dropdown"
+                    selected={selected}
+                    defaultMonth={selected}
+                    onSelect={(d: Date | undefined) => {
+                        onChange(d ? toISO(d) : '')
+                        setOpen(false)
+                    }}
+                />
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export default DynamicDateField

package/src/dynamic-form.tsx

@@ -24,10 +24,12 @@ import {
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { DynamicLineItems } from './dynamic-line-items'
 import { DynamicSelectField } from './dynamic-select-field'
+import { DynamicDateField } from './dynamic-date-field'
 
 export { buildZodSchema, resolveWidget }
 export { DynamicLineItems } from './dynamic-line-items'
 export { DynamicSelectField } from './dynamic-select-field'
+export { DynamicDateField } from './dynamic-date-field'
 
 export interface DynamicFormProps {
     fields: ActionFieldDef[]
@@ -197,7 +199,7 @@ function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
         case 'number':
             return <Input id={field.key} type="number" value={value ?? ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')} placeholder={field.placeholder} />
         case 'date':
-            return <Input id={field.key} type="date" value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} />
+            return <DynamicDateField field={field} value={value} onChange={onChange} />
         default:
             return <Input id={field.key} type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'} value={value || ''} onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)} placeholder={field.placeholder} />
     }