create-brainerce-store 1.58.0 → 1.59.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.58.0",
+      version: "1.59.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"

package/messages/en.json

@@ -245,6 +245,11 @@
     "customFieldsImageRemove": "Remove",
     "customFieldsImageUploading": "Uploading...",
     "customFieldsImageTooLarge": "File must be under 5MB",
+    "customFieldsDatePlaceholder": "Select a date",
+    "customFieldsDateToday": "Today",
+    "customFieldsDateClear": "Clear",
+    "customFieldsDatePrevMonth": "Previous month",
+    "customFieldsDateNextMonth": "Next month",
     "changeOptions": "Change options",
     "surcharges": "Additional charges"
   },

package/messages/he.json

@@ -245,6 +245,11 @@
     "customFieldsImageRemove": "הסר",
     "customFieldsImageUploading": "...מעלה",
     "customFieldsImageTooLarge": "הקובץ חייב להיות מתחת ל-5MB",
+    "customFieldsDatePlaceholder": "בחרו תאריך",
+    "customFieldsDateToday": "היום",
+    "customFieldsDateClear": "נקה",
+    "customFieldsDatePrevMonth": "חודש קודם",
+    "customFieldsDateNextMonth": "חודש הבא",
     "changeOptions": "שנה אפשרויות",
     "surcharges": "תוספות"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.58.0",
+  "version": "1.59.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/components/checkout/custom-fields-step.tsx

@@ -1,258 +1,270 @@
-'use client';
-
-import { useState } from 'react';
-import type { CheckoutCustomFieldDefinition } from 'brainerce';
-import { useTranslations } from '@/core/lib/translations';
-import { cn } from '@/core/lib/utils';
-
-interface CustomFieldsStepProps {
-  fields: CheckoutCustomFieldDefinition[];
-  values: Record<string, unknown>;
-  onChange: (key: string, value: unknown) => void;
-  onApply: () => void;
-  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
-  loading?: boolean;
-  className?: string;
-}
-
-const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
-const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';
-
-export function CustomFieldsStep({
-  fields,
-  values,
-  onChange,
-  onApply,
-  onUploadFile,
-  loading = false,
-  className,
-}: CustomFieldsStepProps) {
-  const t = useTranslations('checkout');
-  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());
-
-  const isMissing = fields.some((f) => {
-    if (!f.required) return false;
-    const v = values[f.key];
-    return v === undefined || v === null || v === '';
-  });
-
-  return (
-    <div className={cn('space-y-4', className)}>
-      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
-
-      {fields.map((field) => {
-        const value = values[field.key];
-        const labelEl = (
-          <label
-            htmlFor={`cf-${field.key}`}
-            className="text-foreground mb-1 block text-sm font-medium"
-          >
-            {field.name}
-            {field.required && <span className="text-destructive ms-1">*</span>}
-          </label>
-        );
-        const helpEl = field.description ? (
-          <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
-        ) : null;
-
-        switch (field.type) {
-          case 'TEXT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="text"
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'TEXTAREA':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <textarea
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  minLength={field.minLength ?? undefined}
-                  maxLength={field.maxLength ?? undefined}
-                  rows={3}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'NUMBER':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="number"
-                  value={(value as number | string) ?? ''}
-                  onChange={(e) =>
-                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
-                  }
-                  required={field.required}
-                  min={field.minValue ?? undefined}
-                  max={field.maxValue ?? undefined}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'BOOLEAN':
-            return (
-              <div key={field.key} className="flex items-start gap-2">
-                <input
-                  id={`cf-${field.key}`}
-                  type="checkbox"
-                  checked={value === true}
-                  onChange={(e) => onChange(field.key, e.target.checked)}
-                  className="mt-1"
-                />
-                <div className="flex-1">
-                  <label
-                    htmlFor={`cf-${field.key}`}
-                    className="text-foreground text-sm font-medium"
-                  >
-                    {field.name}
-                    {field.required && <span className="text-destructive ms-1">*</span>}
-                  </label>
-                  {helpEl}
-                </div>
-              </div>
-            );
-
-          case 'SELECT':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <select
-                  id={`cf-${field.key}`}
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                >
-                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
-                  {field.options?.map((opt) => (
-                    <option key={opt.value} value={opt.value}>
-                      {opt.label}
-                    </option>
-                  ))}
-                </select>
-                {helpEl}
-              </div>
-            );
-
-          case 'DATE':
-            return (
-              <div key={field.key}>
-                {labelEl}
-                <input
-                  id={`cf-${field.key}`}
-                  type="date"
-                  value={(value as string) ?? ''}
-                  onChange={(e) => onChange(field.key, e.target.value)}
-                  required={field.required}
-                  className="border-border bg-background text-foreground w-full rounded border px-3 py-2 text-sm"
-                />
-                {helpEl}
-              </div>
-            );
-
-          case 'IMAGE': {
-            const isUploading = uploadingKeys.has(field.key);
-            return (
-              <div key={field.key}>
-                {labelEl}
-                {value ? (
-                  <div className="relative inline-block">
-                    <img
-                      src={value as string}
-                      alt={field.name}
-                      className="border-border max-h-32 rounded border object-contain"
-                    />
-                    <button
-                      type="button"
-                      onClick={() => onChange(field.key, '')}
-                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
-                      aria-label={t('customFieldsImageRemove')}
-                    >
-                      ✕
-                    </button>
-                  </div>
-                ) : (
-                  <label
-                    htmlFor={`cf-${field.key}`}
-                    className={cn(
-                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
-                      isUploading ? 'opacity-50' : 'hover:border-primary/40',
-                    )}
-                  >
-                    <span className="text-muted-foreground text-sm">
-                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
-                    </span>
-                    <input
-                      id={`cf-${field.key}`}
-                      type="file"
-                      accept={ACCEPTED_IMAGE_TYPES}
-                      disabled={isUploading || !onUploadFile}
-                      className="hidden"
-                      onChange={async (e) => {
-                        const file = e.target.files?.[0];
-                        if (!file || !onUploadFile) return;
-                        if (file.size > MAX_IMAGE_SIZE) {
-                          alert(t('customFieldsImageTooLarge'));
-                          return;
-                        }
-                        setUploadingKeys((prev) => new Set(prev).add(field.key));
-                        try {
-                          const result = await onUploadFile(file);
-                          onChange(field.key, result.url);
-                        } catch {
-                          // Upload failed — user can retry
-                        } finally {
-                          setUploadingKeys((prev) => {
-                            const next = new Set(prev);
-                            next.delete(field.key);
-                            return next;
-                          });
-                        }
-                      }}
-                    />
-                  </label>
-                )}
-                {helpEl}
-              </div>
-            );
-          }
-
-          default:
-            return null;
-        }
-      })}
-
-      <button
-        type="button"
-        onClick={onApply}
-        disabled={loading || isMissing}
-        className="bg-primary text-primary-foreground w-full rounded px-4 py-3 text-sm font-medium transition-opacity hover:opacity-90 disabled:opacity-50"
-      >
-        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
-      </button>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import type { CheckoutCustomFieldDefinition } from 'brainerce';
+import { useTranslations } from '@/core/lib/translations';
+import { cn } from '@/core/lib/utils';
+import { DatePicker } from '@/components/checkout/date-picker';
+
+/** Inline, dependency-free — this file lives in the base template and must
+ * not assume any design pack (e.g. Atelier's icon set) is present; canvas
+ * scaffolds skip design packs entirely. */
+const INPUT_CLASS =
+  'h-11 w-full rounded-lg border bg-background px-3.5 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary';
+
+interface CustomFieldsStepProps {
+  fields: CheckoutCustomFieldDefinition[];
+  values: Record<string, unknown>;
+  onChange: (key: string, value: unknown) => void;
+  onApply: () => void;
+  onUploadFile?: (file: File) => Promise<{ url: string; key: string }>;
+  loading?: boolean;
+  className?: string;
+}
+
+const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5 MB
+const ACCEPTED_IMAGE_TYPES = 'image/jpeg,image/png,image/webp,image/gif';
+
+export function CustomFieldsStep({
+  fields,
+  values,
+  onChange,
+  onApply,
+  onUploadFile,
+  loading = false,
+  className,
+}: CustomFieldsStepProps) {
+  const t = useTranslations('checkout');
+  const [uploadingKeys, setUploadingKeys] = useState<Set<string>>(new Set());
+
+  const isMissing = fields.some((f) => {
+    if (!f.required) return false;
+    const v = values[f.key];
+    return v === undefined || v === null || v === '';
+  });
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      <p className="text-muted-foreground text-sm">{t('customFieldsSubtitle')}</p>
+
+      {fields.map((field) => {
+        const value = values[field.key];
+        const labelEl = (
+          <label
+            htmlFor={`cf-${field.key}`}
+            className="text-foreground mb-1 block text-sm font-medium"
+          >
+            {field.name}
+            {field.required && <span className="text-destructive ms-1">*</span>}
+          </label>
+        );
+        const helpEl = field.description ? (
+          <p className="text-muted-foreground mt-1 text-xs">{field.description}</p>
+        ) : null;
+
+        switch (field.type) {
+          case 'TEXT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="text"
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  className={INPUT_CLASS}
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'TEXTAREA':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <textarea
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  minLength={field.minLength ?? undefined}
+                  maxLength={field.maxLength ?? undefined}
+                  rows={3}
+                  className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary w-full rounded-lg border px-3.5 py-2.5 text-sm focus-visible:outline-none focus-visible:ring-2"
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'NUMBER':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <input
+                  id={`cf-${field.key}`}
+                  type="number"
+                  value={(value as number | string) ?? ''}
+                  onChange={(e) =>
+                    onChange(field.key, e.target.value === '' ? '' : Number(e.target.value))
+                  }
+                  required={field.required}
+                  min={field.minValue ?? undefined}
+                  max={field.maxValue ?? undefined}
+                  className={INPUT_CLASS}
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'BOOLEAN':
+            return (
+              <div key={field.key} className="flex items-start gap-2">
+                <input
+                  id={`cf-${field.key}`}
+                  type="checkbox"
+                  checked={value === true}
+                  onChange={(e) => onChange(field.key, e.target.checked)}
+                  className="mt-1"
+                />
+                <div className="flex-1">
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className="text-foreground text-sm font-medium"
+                  >
+                    {field.name}
+                    {field.required && <span className="text-destructive ms-1">*</span>}
+                  </label>
+                  {helpEl}
+                </div>
+              </div>
+            );
+
+          case 'SELECT':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <select
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(e) => onChange(field.key, e.target.value)}
+                  required={field.required}
+                  className={INPUT_CLASS}
+                >
+                  <option value="">{t('customFieldsSelectPlaceholder')}</option>
+                  {field.options?.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+                {helpEl}
+              </div>
+            );
+
+          case 'DATE':
+            return (
+              <div key={field.key}>
+                {labelEl}
+                <DatePicker
+                  id={`cf-${field.key}`}
+                  value={(value as string) ?? ''}
+                  onChange={(v) => onChange(field.key, v)}
+                  required={field.required}
+                  minDate={field.dateAvailability?.minDate ?? undefined}
+                  maxDate={field.dateAvailability?.maxDate ?? undefined}
+                  placeholder={t('customFieldsDatePlaceholder')}
+                  todayLabel={t('customFieldsDateToday')}
+                  clearLabel={t('customFieldsDateClear')}
+                  prevMonthLabel={t('customFieldsDatePrevMonth')}
+                  nextMonthLabel={t('customFieldsDateNextMonth')}
+                />
+                {helpEl}
+              </div>
+            );
+
+          case 'IMAGE': {
+            const isUploading = uploadingKeys.has(field.key);
+            return (
+              <div key={field.key}>
+                {labelEl}
+                {value ? (
+                  <div className="relative inline-block">
+                    <img
+                      src={value as string}
+                      alt={field.name}
+                      className="border-border max-h-32 rounded border object-contain"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => onChange(field.key, '')}
+                      className="bg-background/80 text-foreground absolute end-1 top-1 rounded-full p-1 text-xs leading-none"
+                      aria-label={t('customFieldsImageRemove')}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                ) : (
+                  <label
+                    htmlFor={`cf-${field.key}`}
+                    className={cn(
+                      'border-border flex cursor-pointer flex-col items-center gap-2 rounded border-2 border-dashed p-6 text-center transition-colors',
+                      isUploading ? 'opacity-50' : 'hover:border-primary/40'
+                    )}
+                  >
+                    <span className="text-muted-foreground text-sm">
+                      {isUploading ? t('customFieldsImageUploading') : t('customFieldsImageUpload')}
+                    </span>
+                    <input
+                      id={`cf-${field.key}`}
+                      type="file"
+                      accept={ACCEPTED_IMAGE_TYPES}
+                      disabled={isUploading || !onUploadFile}
+                      className="hidden"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (!file || !onUploadFile) return;
+                        if (file.size > MAX_IMAGE_SIZE) {
+                          alert(t('customFieldsImageTooLarge'));
+                          return;
+                        }
+                        setUploadingKeys((prev) => new Set(prev).add(field.key));
+                        try {
+                          const result = await onUploadFile(file);
+                          onChange(field.key, result.url);
+                        } catch {
+                          // Upload failed — user can retry
+                        } finally {
+                          setUploadingKeys((prev) => {
+                            const next = new Set(prev);
+                            next.delete(field.key);
+                            return next;
+                          });
+                        }
+                      }}
+                    />
+                  </label>
+                )}
+                {helpEl}
+              </div>
+            );
+          }
+
+          default:
+            return null;
+        }
+      })}
+
+      <button
+        type="button"
+        onClick={onApply}
+        disabled={loading || isMissing}
+        className="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex h-12 w-full select-none items-center justify-center gap-2 whitespace-nowrap rounded-full px-8 text-base font-semibold transition-colors duration-200 disabled:pointer-events-none disabled:opacity-50"
+      >
+        {loading ? t('customFieldsApplying') : t('customFieldsApply')}
+      </button>
+    </div>
+  );
+}

package/templates/nextjs/base/src/components/checkout/date-picker.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '@/core/lib/utils';
+
+/**
+ * Custom calendar dropdown for checkout DATE custom fields — replaces the
+ * native `<input type="date">`, whose OS/browser-rendered popup can't be
+ * restyled with CSS in any browser (only the closed field can be).
+ *
+ * Lives next to `custom-fields-step.tsx` (not under `src/ui/`) and stays
+ * dependency-free from any design pack for the same reason that file does:
+ * canvas scaffolds wipe `src/ui` and ship no pack, but never touch
+ * `src/components/`, so this must work without either.
+ *
+ * `minDate`/`maxDate` ("YYYY-MM-DD") disable individual out-of-range days.
+ * Blocked weekdays/dates and DATETIME business-hours slots are out of scope —
+ * `dateAvailability` isn't read here.
+ */
+interface DatePickerProps {
+  id?: string;
+  value: string; // 'YYYY-MM-DD' or ''
+  onChange: (value: string) => void;
+  required?: boolean;
+  minDate?: string;
+  maxDate?: string;
+  placeholder: string;
+  todayLabel: string;
+  clearLabel: string;
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  className?: string;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function toYMD(y: number, m: number, d: number): string {
+  return `${y}-${pad(m + 1)}-${pad(d)}`;
+}
+
+function parseYMD(value: string): { y: number; m: number; d: number } | null {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return null;
+  return { y: Number(match[1]), m: Number(match[2]) - 1, d: Number(match[3]) };
+}
+
+export function DatePicker({
+  id,
+  value,
+  onChange,
+  required,
+  minDate,
+  maxDate,
+  placeholder,
+  todayLabel,
+  clearLabel,
+  prevMonthLabel,
+  nextMonthLabel,
+  className,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [locale, setLocale] = useState<string | undefined>(undefined);
+  const [rtl, setRtl] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setLocale(document.documentElement.lang || undefined);
+    setRtl(document.documentElement.dir === 'rtl');
+  }, []);
+
+  const selected = parseYMD(value);
+  const min = minDate ? parseYMD(minDate) : null;
+  const max = maxDate ? parseYMD(maxDate) : null;
+  const today = new Date();
+  const [view, setView] = useState(() => {
+    const initial = selected ?? { y: today.getFullYear(), m: today.getMonth() };
+    return { y: initial.y, m: initial.m };
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('mousedown', onDocClick);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDocClick);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  function isDisabled(y: number, m: number, d: number): boolean {
+    if (min && (y < min.y || (y === min.y && (m < min.m || (m === min.m && d < min.d))))) {
+      return true;
+    }
+    if (max && (y > max.y || (y === max.y && (m > max.m || (m === max.m && d > max.d))))) {
+      return true;
+    }
+    return false;
+  }
+
+  function selectDay(y: number, m: number, d: number) {
+    if (isDisabled(y, m, d)) return;
+    onChange(toYMD(y, m, d));
+    setView({ y, m });
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
+  function shiftMonth(delta: number) {
+    setView((v) => {
+      let m = v.m + delta;
+      let y = v.y;
+      if (m < 0) {
+        m = 11;
+        y -= 1;
+      } else if (m > 11) {
+        m = 0;
+        y += 1;
+      }
+      return { y, m };
+    });
+  }
+
+  const monthLabel = new Date(view.y, view.m, 1).toLocaleDateString(locale, {
+    month: 'long',
+    year: 'numeric',
+  });
+  const weekdayLabels = Array.from({ length: 7 }, (_, i) => {
+    // A Sunday-anchored week (2023-01-01 was a Sunday) formatted with the
+    // page's own locale — matches whatever week-start convention that
+    // locale's date formatting implies.
+    const d = new Date(2023, 0, 1 + i);
+    return d.toLocaleDateString(locale, { weekday: 'narrow' });
+  });
+
+  const firstOfMonth = new Date(view.y, view.m, 1);
+  const startWeekday = firstOfMonth.getDay();
+  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+  const daysInPrevMonth = new Date(view.y, view.m, 0).getDate();
+
+  const cells: Array<{ day: number; muted: boolean; y: number; m: number }> = [];
+  for (let i = startWeekday - 1; i >= 0; i--) {
+    const m = view.m === 0 ? 11 : view.m - 1;
+    const y = view.m === 0 ? view.y - 1 : view.y;
+    cells.push({ day: daysInPrevMonth - i, muted: true, y, m });
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, muted: false, y: view.y, m: view.m });
+  }
+  while (cells.length % 7 !== 0) {
+    const idx = cells.length - startWeekday - daysInMonth + 1;
+    const m = view.m === 11 ? 0 : view.m + 1;
+    const y = view.m === 11 ? view.y + 1 : view.y;
+    cells.push({ day: idx, muted: true, y, m });
+  }
+
+  const displayValue = selected
+    ? new Date(selected.y, selected.m, selected.d).toLocaleDateString(locale)
+    : '';
+
+  return (
+    <div ref={rootRef} className={cn('relative', className)}>
+      <button
+        ref={triggerRef}
+        type="button"
+        id={id}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-required={required}
+        className={cn(
+          'bg-background focus-visible:ring-primary flex h-11 w-full items-center rounded-lg border px-3.5 pe-11 text-start text-sm focus-visible:outline-none focus-visible:ring-2',
+          displayValue ? 'text-foreground' : 'text-muted-foreground'
+        )}
+      >
+        {displayValue || placeholder}
+        <svg
+          aria-hidden="true"
+          width={18}
+          height={18}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={1.75}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground pointer-events-none absolute end-3.5 top-1/2 -translate-y-1/2"
+        >
+          <rect x="3.5" y="5" width="17" height="15.5" rx="2.5" />
+          <path d="M3.5 9.5h17M8 3v3.5M16 3v3.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          role="dialog"
+          aria-label={placeholder}
+          className="border-border bg-background absolute start-0 z-20 mt-2 w-[19rem] rounded-2xl border p-4 shadow-xl"
+        >
+          <div className="mb-3 flex items-center justify-between">
+            <div className="flex gap-1">
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? 1 : -1)}
+                aria-label={prevMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '›' : '‹'}
+              </button>
+              <button
+                type="button"
+                onClick={() => shiftMonth(rtl ? -1 : 1)}
+                aria-label={nextMonthLabel}
+                className="border-border hover:bg-secondary flex h-8 w-8 items-center justify-center rounded-full border text-sm"
+              >
+                {rtl ? '‹' : '›'}
+              </button>
+            </div>
+            <div className="font-display text-sm font-medium capitalize">{monthLabel}</div>
+          </div>
+
+          <div className="mb-1 grid grid-cols-7">
+            {weekdayLabels.map((w, i) => (
+              <span
+                key={i}
+                className="text-muted-foreground py-1 text-center text-[0.7rem] font-semibold"
+              >
+                {w}
+              </span>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 gap-0.5">
+            {cells.map((c, i) => {
+              const disabled = c.muted || isDisabled(c.y, c.m, c.day);
+              const isToday =
+                !c.muted &&
+                c.y === today.getFullYear() &&
+                c.m === today.getMonth() &&
+                c.day === today.getDate();
+              const isSelected =
+                selected &&
+                !c.muted &&
+                c.y === selected.y &&
+                c.m === selected.m &&
+                c.day === selected.d;
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => selectDay(c.y, c.m, c.day)}
+                  className={cn(
+                    'flex aspect-square items-center justify-center rounded-full text-sm tabular-nums',
+                    c.muted && 'text-muted-foreground/40',
+                    disabled && !c.muted && 'text-muted-foreground/40 cursor-not-allowed',
+                    !disabled && !isSelected && 'hover:bg-secondary',
+                    isToday && !isSelected && 'ring-primary font-semibold ring-1',
+                    isSelected && 'bg-primary text-primary-foreground font-bold'
+                  )}
+                >
+                  {c.day}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="border-border mt-3 flex justify-between border-t pt-3">
+            <button
+              type="button"
+              onClick={() => {
+                const t = new Date();
+                selectDay(t.getFullYear(), t.getMonth(), t.getDate());
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {todayLabel}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                onChange('');
+                setOpen(false);
+              }}
+              className="text-primary text-sm font-semibold hover:underline"
+            >
+              {clearLabel}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}