@cahyo-dimas/freeday 1.12.0 → 1.13.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.13.0] — 2026-07-30
+### Added
+- **`FdyDatepicker` clear affordance — an optional date can now be unset (#37A).** A new `clearable`
+  prop renders a small × button in the trigger (overlaid in the calendar-icon slot) whenever a date is
+  set, emitting `''` (`update:modelValue` + `change` in Vue, `onChange('')` in React) to return to
+  empty — closing a functional regression vs the native `<input type="date">`, which offered a clear
+  control. Off by default; both adapters. Verified in-browser: the × is right-aligned in the icon slot,
+  vertically centred, hides the calendar icon while shown, and never overlaps the value text (even a
+  long, ellipsised one).
+- **`FdyDatepicker` month-nav labels are now overridable (#37B).** The previous/next-month `aria-label`s
+  were hardcoded, leaking to every screen-reader user with no way to change them; added
+  `prevMonthLabel` / `nextMonthLabel` props (plus `clearLabel` for the new × button). Month and weekday
+  names already localise via `Intl` + the `locale` prop.
+### Changed
+- **`FdyDatepicker` default UI strings are now English** (`Select date` placeholder, `Previous month` /
+  `Next month` nav labels) instead of Indonesian, matching the kit's English-first public docs. Pass
+  `placeholder` / `prevMonthLabel` / `nextMonthLabel` for other languages. Scope is the Vue + React
+  `FdyDatepicker` adapters only — the vanilla `freeday-datepicker.js` enhancer (used by the Indonesian
+  docs demos) keeps its Indonesian defaults.
+
 ## [1.12.0] — 2026-07-29
 ### Added
 - **Chart colour overrides can now name a categorical palette slot (#36).** `data-fdy-colors` (and the

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.12.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.12.0)
+[![Release](https://img.shields.io/badge/release-v1.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.13.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.12.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.12.0)
+[![Release](https://img.shields.io/badge/release-v1.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.13.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/react/components/FdyDatepicker.tsx

@@ -33,6 +33,14 @@ export interface FdyDatepickerProps {
   describedby?: string;
   id?: string;
   ariaLabelledby?: string;
+  /** Show a clear (×) button in the trigger when a date is set, so an optional date can be unset. Calls onChange('') to reset. Off by default. */
+  clearable?: boolean;
+  /** aria-label for the previous-month nav button. Default 'Previous month' — override for non-English UIs (month/weekday names already follow `locale`). */
+  prevMonthLabel?: string;
+  /** aria-label for the next-month nav button. Default 'Next month'. */
+  nextMonthLabel?: string;
+  /** aria-label for the clear button (when `clearable`). Default 'Clear date'. */
+  clearLabel?: string;
 }
 
 function pad(n: number): string {
@@ -109,7 +117,11 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   const maxDate: Date | null = useMemo((): Date | null => parseISO(props.max), [props.max]);
   const isDisabled: boolean = props.disabled === true;
   const isInvalid: boolean = props.invalid === true;
-  const displayPlaceholder: string = props.placeholder ?? 'Pilih tanggal';
+  const displayPlaceholder: string = props.placeholder ?? 'Select date';
+  const showClear: boolean = props.clearable === true && selectedDate !== null && !isDisabled;
+  const prevMonthLabelText: string = props.prevMonthLabel ?? 'Previous month';
+  const nextMonthLabelText: string = props.nextMonthLabel ?? 'Next month';
+  const clearLabelText: string = props.clearLabel ?? 'Clear date';
 
   const [viewMonth, setViewMonth] = useState<Date>((): Date => startOfMonth(parseISO(props.value) ?? new Date()));
   const [focusDate, setFocusDate] = useState<Date>((): Date => parseISO(props.value) ?? new Date());
@@ -203,6 +215,13 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
     closePanel(true);
   }
 
+  // Clear (reset to empty). Calls onChange('') — parseISO('') is null, so the placeholder shows again.
+  function clearValue(): void {
+    props.onChange('');
+    setOpen(false);
+    triggerRef.current?.focus();
+  }
+
   function openPanel(): void {
     if (isDisabled || open) return;
     const next: Date = selectedDate ?? focusDate ?? new Date();
@@ -307,21 +326,34 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
         <span className={selectedDate === null ? 'fdy-datepicker__value fdy-datepicker__value--placeholder' : 'fdy-datepicker__value'}>
           {displayValue}
         </span>
-        <span className="fdy-datepicker__icon" aria-hidden="true">
+        <span className={showClear ? 'fdy-datepicker__icon is-hidden' : 'fdy-datepicker__icon'} aria-hidden="true">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
             <rect x="3" y="4" width="18" height="18" rx="2"></rect>
             <path d="M16 2v4M8 2v4M3 10h18"></path>
           </svg>
         </span>
       </button>
+      {showClear ? (
+        <button
+          type="button"
+          className="fdy-datepicker__clear"
+          aria-label={clearLabelText}
+          onMouseDown={(e: React.MouseEvent): void => e.preventDefault()}
+          onClick={clearValue}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      ) : null}
 
       <div ref={panelRef} className="fdy-datepicker__panel" role="dialog" aria-modal="false" aria-labelledby={titleId} hidden={!open}>
         <div className="fdy-cal__head">
-          <button type="button" className="fdy-cal__nav" aria-label="Bulan sebelumnya" onClick={(): void => setViewMonth(addMonths(viewMonth, -1))}>
+          <button type="button" className="fdy-cal__nav" aria-label={prevMonthLabelText} onClick={(): void => setViewMonth(addMonths(viewMonth, -1))}>
             &lsaquo;
           </button>
           <div id={titleId} className="fdy-cal__title">{monthFmt.format(viewMonth)}</div>
-          <button type="button" className="fdy-cal__nav" aria-label="Bulan berikutnya" onClick={(): void => setViewMonth(addMonths(viewMonth, 1))}>
+          <button type="button" className="fdy-cal__nav" aria-label={nextMonthLabelText} onClick={(): void => setViewMonth(addMonths(viewMonth, 1))}>
             &rsaquo;
           </button>
         </div>

package/adapters/vue/components/FdyDatepicker.vue

@@ -35,6 +35,14 @@ const props = defineProps<{
   describedby?: string;
   id?: string;
   ariaLabelledby?: string;
+  /** Show a clear (×) button in the trigger when a date is set, so an optional date can be unset. Emits `''` via update:modelValue + change. Off by default. */
+  clearable?: boolean;
+  /** aria-label for the previous-month nav button. Default 'Previous month' — override for non-English UIs (month/weekday names already follow `locale`). */
+  prevMonthLabel?: string;
+  /** aria-label for the next-month nav button. Default 'Next month'. */
+  nextMonthLabel?: string;
+  /** aria-label for the clear button (when `clearable`). Default 'Clear date'. */
+  clearLabel?: string;
 }>();
 
 const emit = defineEmits<{
@@ -98,7 +106,13 @@ const minDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(p
 const maxDate: ComputedRef<Date | null> = computed((): Date | null => parseISO(props.max));
 const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
-const displayPlaceholder: ComputedRef<string> = computed((): string => props.placeholder ?? 'Pilih tanggal');
+const displayPlaceholder: ComputedRef<string> = computed((): string => props.placeholder ?? 'Select date');
+const showClear: ComputedRef<boolean> = computed(
+  (): boolean => props.clearable === true && selectedDate.value !== null && isDisabled.value === false,
+);
+const prevMonthLabelText: ComputedRef<string> = computed((): string => props.prevMonthLabel ?? 'Previous month');
+const nextMonthLabelText: ComputedRef<string> = computed((): string => props.nextMonthLabel ?? 'Next month');
+const clearLabelText: ComputedRef<string> = computed((): string => props.clearLabel ?? 'Clear date');
 
 const view: Ref<Date> = ref(startOfMonth(selectedDate.value ?? new Date()));
 const focusDate: Ref<Date> = ref(selectedDate.value ?? new Date());
@@ -188,6 +202,14 @@ function pick(d: Date): void {
   closePanel(true);
 }
 
+// Clear (reset to empty). Emits '' — parseISO('') is null, so the placeholder shows again.
+function clearValue(): void {
+  emit('update:modelValue', '');
+  emit('change', '');
+  open.value = false;
+  triggerEl.value?.focus();
+}
+
 function openPanel(): void {
   if (isDisabled.value || open.value) return;
   focusDate.value = selectedDate.value ?? focusDate.value ?? new Date();
@@ -297,19 +319,31 @@ onBeforeUnmount((): void => {
       @click="toggle"
     >
       <span class="fdy-datepicker__value" :class="{ 'fdy-datepicker__value--placeholder': selectedDate === null }">{{ displayValue }}</span>
-      <span class="fdy-datepicker__icon" aria-hidden="true">
+      <span class="fdy-datepicker__icon" :class="{ 'is-hidden': showClear }" aria-hidden="true">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <rect x="3" y="4" width="18" height="18" rx="2"></rect>
           <path d="M16 2v4M8 2v4M3 10h18"></path>
         </svg>
       </span>
     </button>
+    <button
+      v-if="showClear"
+      type="button"
+      class="fdy-datepicker__clear"
+      :aria-label="clearLabelText"
+      @mousedown.prevent
+      @click="clearValue"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18M6 6l12 12"></path>
+      </svg>
+    </button>
 
     <div ref="panelEl" class="fdy-datepicker__panel" role="dialog" aria-modal="false" popover="manual" :aria-labelledby="titleId" :hidden="!open">
       <div class="fdy-cal__head">
-        <button type="button" class="fdy-cal__nav" aria-label="Bulan sebelumnya" @click="view = addMonths(view, -1)">‹</button>
+        <button type="button" class="fdy-cal__nav" :aria-label="prevMonthLabelText" @click="view = addMonths(view, -1)">‹</button>
         <div :id="titleId" class="fdy-cal__title">{{ monthFmt.format(view) }}</div>
-        <button type="button" class="fdy-cal__nav" aria-label="Bulan berikutnya" @click="view = addMonths(view, 1)">›</button>
+        <button type="button" class="fdy-cal__nav" :aria-label="nextMonthLabelText" @click="view = addMonths(view, 1)">›</button>
       </div>
       <div class="fdy-cal__grid" role="grid" :aria-labelledby="titleId" @keydown="onGridKeydown">
         <div v-for="w in weekdayHeaders" :key="w" class="fdy-cal__dow" role="columnheader" :aria-label="w">{{ w }}</div>

package/dist/freeday.bundle.css

@@ -848,6 +848,14 @@ a { color: var(--color-primary); }
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
 .fdy-datepicker__icon svg{display:block;width:1.05rem;height:1.05rem;}
+/* Clearable: a reset button overlaid in the icon slot (the trigger is itself a <button>, so the
+   clear control is a sibling, not a child). Shown only when clearable + a date is set; the calendar
+   icon is hidden (kept in flow so the value's ellipsis boundary doesn't shift). */
+.fdy-datepicker__icon.is-hidden{visibility:hidden;}
+.fdy-datepicker__clear{position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
+.fdy-datepicker__clear:hover{color:var(--color-text);background:var(--color-surface-2);}
+.fdy-datepicker__clear:focus-visible{outline:none;color:var(--color-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-datepicker__clear svg{display:block;width:.9rem;height:.9rem;}
 
 .fdy-datepicker__panel{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;padding:var(--space-3);background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
 .fdy-datepicker__panel[hidden]{display:none;}

package/dist/freeday.css

@@ -503,6 +503,14 @@ a { color: var(--color-primary); }
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
 .fdy-datepicker__icon svg{display:block;width:1.05rem;height:1.05rem;}
+/* Clearable: a reset button overlaid in the icon slot (the trigger is itself a <button>, so the
+   clear control is a sibling, not a child). Shown only when clearable + a date is set; the calendar
+   icon is hidden (kept in flow so the value's ellipsis boundary doesn't shift). */
+.fdy-datepicker__icon.is-hidden{visibility:hidden;}
+.fdy-datepicker__clear{position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
+.fdy-datepicker__clear:hover{color:var(--color-text);background:var(--color-surface-2);}
+.fdy-datepicker__clear:focus-visible{outline:none;color:var(--color-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-datepicker__clear svg{display:block;width:.9rem;height:.9rem;}
 
 .fdy-datepicker__panel{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;padding:var(--space-3);background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
 .fdy-datepicker__panel[hidden]{display:none;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/datepicker.css

@@ -11,6 +11,14 @@
 .fdy-datepicker__value--placeholder{color:var(--color-text-subtle);}
 .fdy-datepicker__icon{flex:none;display:inline-flex;color:var(--color-text-subtle);}
 .fdy-datepicker__icon svg{display:block;width:1.05rem;height:1.05rem;}
+/* Clearable: a reset button overlaid in the icon slot (the trigger is itself a <button>, so the
+   clear control is a sibling, not a child). Shown only when clearable + a date is set; the calendar
+   icon is hidden (kept in flow so the value's ellipsis boundary doesn't shift). */
+.fdy-datepicker__icon.is-hidden{visibility:hidden;}
+.fdy-datepicker__clear{position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard);}
+.fdy-datepicker__clear:hover{color:var(--color-text);background:var(--color-surface-2);}
+.fdy-datepicker__clear:focus-visible{outline:none;color:var(--color-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
+.fdy-datepicker__clear svg{display:block;width:.9rem;height:.9rem;}
 
 .fdy-datepicker__panel{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;padding:var(--space-3);background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
 .fdy-datepicker__panel[hidden]{display:none;}