@cahyo-dimas/freeday 1.7.0

package/adapters/react/components/FdyCfl.tsx

@@ -0,0 +1,362 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
+
+// React port of adapters/vue/components/FdyCfl.vue over freeday's `.fdy-cfl*` +
+// `.fdy-input-group` classes (see src/components/cfl.css, input-group.css). A controlled
+// async choose-from-list: `value: Row | null` + `onChange(row)` in place of Vue's
+// `v-model:Row|null`, driving a native <dialog> whose rows come from the caller's
+// `fetchPage(query, page)`. Re-implements the Vue source's open/close + debounced search +
+// dense sticky-header results + single-commit-on-click + keyboard, plus the async-correctness
+// pieces a server picker needs: loading/empty/error states, retry, pagination, an
+// out-of-order fetch guard, and an in-memory cache cleared on open/close.
+
+export interface CflColumn<Row> {
+  key: keyof Row & string;
+  label: string;
+}
+
+export interface CflPage<Row> {
+  rows: Row[];
+  hasMore: boolean;
+}
+
+export interface FdyCflProps<Row extends Record<string, unknown>> {
+  value: Row | null;
+  onChange: (value: Row) => void;
+  fetchPage: (query: string, page: number) => Promise<CflPage<Row>>;
+  columns: ReadonlyArray<CflColumn<Row>>;
+  display: (row: Row) => string;
+  rowKey: (row: Row) => string;
+  /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
+  pageSize?: number;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+}
+
+export function FdyCfl<Row extends Record<string, unknown>>(props: FdyCflProps<Row>): JSX.Element {
+  const baseId: string = useId();
+  const fieldId: string = props.id ?? `${baseId}-field`;
+  const titleId: string = `${baseId}-title`;
+  const resultsId: string = `${baseId}-results`;
+  const rowId = (index: number): string => `${baseId}-row-${index}`;
+
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const [query, setQuery] = useState<string>('');
+  const [rows, setRows] = useState<Row[]>([]);
+  const [page, setPage] = useState<number>(0);
+  const [hasMore, setHasMore] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [activeIndex, setActiveIndex] = useState<number>(-1);
+
+  // Out-of-order guard: every fetch takes a monotonically increasing token; a resolved or
+  // rejected page is applied only if it still owns the latest token. A newer search, a
+  // load-more, a dialog close, or an unmount all bump it — this keeps a slow stale response
+  // from overwriting fresh results (or a closed/unmounted component's state).
+  const reqIdRef = useRef<number>(0);
+  // In-memory cache keyed by `${query}::${page}`, cleared on open and on close.
+  const cacheRef = useRef<Map<string, CflPage<Row>>>(new Map<string, CflPage<Row>>());
+  const lastPageRef = useRef<number>(0);
+  const lastAppendRef = useRef<boolean>(false);
+  const searchTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isDisabled: boolean = props.disabled === true;
+  const isInvalid: boolean = props.invalid === true;
+  const displayValue: string = props.value !== null ? props.display(props.value) : '';
+  // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
+  // search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
+  const hasRows: boolean = rows.length > 0;
+  const controlsId: string | undefined = hasRows ? resultsId : undefined;
+  const activeDescendant: string | undefined = hasRows && activeIndex >= 0 ? rowId(activeIndex) : undefined;
+  const isInitialLoading: boolean = loading && rows.length === 0;
+  const isBlockingError: boolean = error !== null && rows.length === 0;
+  const isEmpty: boolean = !loading && error === null && rows.length === 0;
+
+  // --- Async engine ----------------------------------------------------------------------
+  async function load(targetQuery: string, targetPage: number, append: boolean): Promise<void> {
+    lastPageRef.current = targetPage;
+    lastAppendRef.current = append;
+    const token: number = ++reqIdRef.current;
+    const key = `${targetQuery}::${targetPage}`;
+    setError(null);
+    setLoading(true);
+    try {
+      const cached: CflPage<Row> | undefined = cacheRef.current.get(key);
+      const res: CflPage<Row> = cached ?? (await props.fetchPage(targetQuery, targetPage));
+      if (token !== reqIdRef.current) return; // stale — a newer request has started
+      if (cached === undefined) cacheRef.current.set(key, res);
+      const copy: Row[] = res.rows.slice(); // never mutate the caller's array
+      setRows((prev: Row[]): Row[] => (append ? prev.concat(copy) : copy));
+      setHasMore(res.hasMore);
+      setPage(targetPage);
+      if (!append) setActiveIndex(copy.length > 0 ? 0 : -1);
+    } catch (err: unknown) {
+      if (token !== reqIdRef.current) return;
+      setError(err instanceof Error ? err : new Error(String(err)));
+    } finally {
+      if (token === reqIdRef.current) setLoading(false);
+    }
+  }
+
+  // Mirrors Vue's `retry()`: only `lastPage`/`lastAppend` are frozen from the failed request —
+  // the query is re-read live so a retry after editing the search box (within the debounce
+  // window) uses what's currently typed, not a stale snapshot.
+  function retry(): void {
+    void load(query, lastPageRef.current, lastAppendRef.current);
+  }
+
+  function loadMore(): void {
+    if (loading || !hasMore) return;
+    void load(query, page + 1, true);
+  }
+
+  function onSearchInput(e: React.ChangeEvent<HTMLInputElement>): void {
+    const value: string = e.target.value;
+    setQuery(value);
+    if (searchTimerRef.current !== null) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout((): void => {
+      searchTimerRef.current = null;
+      void load(value, 0, false);
+    }, 250);
+  }
+
+  // --- Active-row / keyboard ---------------------------------------------------------------
+  function setActive(index: number): void {
+    if (rows.length === 0) {
+      setActiveIndex(-1);
+      return;
+    }
+    const clamped: number = Math.max(0, Math.min(index, rows.length - 1));
+    setActiveIndex(clamped);
+  }
+
+  // Scroll the active row into view once it (re)renders — React's analogue of Vue's
+  // `nextTick(() => scrollIntoView(...))`; fires for both keyboard nav and row hover, same as
+  // the Vue source's `setActive`.
+  useEffect((): void => {
+    if (activeIndex < 0) return;
+    document.getElementById(rowId(activeIndex))?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+
+  function commit(row: Row): void {
+    props.onChange(row);
+    closeDialog();
+  }
+
+  function onKeydown(e: React.KeyboardEvent<HTMLDialogElement>): void {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setActive(activeIndex + 1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setActive(activeIndex - 1);
+        break;
+      case 'Home':
+        if (rows.length > 0) {
+          e.preventDefault();
+          setActive(0);
+        }
+        break;
+      case 'End':
+        if (rows.length > 0) {
+          e.preventDefault();
+          setActive(rows.length - 1);
+        }
+        break;
+      case 'Enter': {
+        const row: Row | undefined = activeIndex >= 0 ? rows[activeIndex] : undefined;
+        if (row !== undefined) {
+          e.preventDefault();
+          commit(row);
+        }
+        break;
+      }
+      default:
+        break; // Escape is left to the native <dialog> cancel/close
+    }
+  }
+
+  // --- Open / close ------------------------------------------------------------------------
+  function openDialog(): void {
+    if (isDisabled) return;
+    if (searchTimerRef.current !== null) {
+      clearTimeout(searchTimerRef.current);
+      searchTimerRef.current = null;
+    }
+    cacheRef.current.clear();
+    setQuery('');
+    setRows([]);
+    setPage(0);
+    setHasMore(false);
+    setError(null);
+    setActiveIndex(-1);
+    dialogRef.current?.showModal();
+    searchRef.current?.focus();
+    void load('', 0, false);
+  }
+
+  function closeDialog(): void {
+    dialogRef.current?.close();
+  }
+
+  // Fires for every close path (button, Esc, commit); centralise cleanup here.
+  function onClose(): void {
+    reqIdRef.current++; // invalidate any in-flight fetch so it can't apply after close
+    if (searchTimerRef.current !== null) {
+      // Cancel a debounce armed just before close (e.g. typed a char then clicked a row) so
+      // it can't fire a stray fetchPage after the dialog is gone.
+      clearTimeout(searchTimerRef.current);
+      searchTimerRef.current = null;
+    }
+    cacheRef.current.clear();
+    setLoading(false);
+    triggerRef.current?.focus();
+  }
+
+  function cellText(row: Row, key: keyof Row & string): string {
+    const value: unknown = row[key];
+    return value === null || value === undefined ? '' : String(value);
+  }
+
+  // Unmount safety: bump the token so any in-flight fetch's setState is dropped, and cancel a
+  // pending debounce — mirrors Vue's onBeforeUnmount plus the same token trick onClose uses.
+  useEffect((): (() => void) => {
+    return (): void => {
+      reqIdRef.current++;
+      if (searchTimerRef.current !== null) clearTimeout(searchTimerRef.current);
+    };
+  }, []);
+
+  return (
+    <div className="fdy-input-group">
+      <input
+        id={fieldId}
+        className="fdy-input"
+        type="text"
+        readOnly
+        value={displayValue}
+        placeholder={props.placeholder}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+      />
+      <button
+        ref={triggerRef}
+        type="button"
+        className="fdy-input-group__btn"
+        aria-haspopup="dialog"
+        aria-labelledby={props.ariaLabelledby}
+        aria-label={props.ariaLabelledby ? undefined : 'Buka pencarian'}
+        disabled={isDisabled}
+        onClick={openDialog}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <circle cx={11} cy={11} r={7}></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      </button>
+
+      <dialog ref={dialogRef} className="fdy-modal fdy-modal--cfl" aria-labelledby={titleId} onClose={onClose} onKeyDown={onKeydown}>
+        <div className="fdy-modal__header">
+          <h3 id={titleId} className="fdy-modal__title">Pilih data</h3>
+          <button className="fdy-modal__close" type="button" aria-label="Tutup" onClick={closeDialog}>&times;</button>
+        </div>
+
+        <div className="fdy-modal__body">
+          <div className="fdy-cfl__search">
+            <div className="fdy-input-group" style={{ maxWidth: 'none' }}>
+              <span className="fdy-input-group__addon fdy-input-group__addon--icon">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <circle cx={11} cy={11} r={7}></circle>
+                  <path d="m21 21-4.35-4.35"></path>
+                </svg>
+              </span>
+              <input
+                ref={searchRef}
+                className="fdy-input"
+                type="search"
+                value={query}
+                placeholder="Cari…"
+                aria-label="Cari data"
+                aria-controls={controlsId}
+                aria-activedescendant={activeDescendant}
+                onChange={onSearchInput}
+              />
+            </div>
+          </div>
+
+          <div className="fdy-cfl__results">
+            {isInitialLoading ? (
+              <p className="fdy-cfl__empty" role="status">Memuat…</p>
+            ) : isBlockingError ? (
+              <div className="fdy-cfl__empty" role="alert">
+                <p style={{ margin: '0 0 var(--space-3)' }}>{error?.message}</p>
+                <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>Coba lagi</button>
+              </div>
+            ) : isEmpty ? (
+              <p className="fdy-cfl__empty">Tidak ada hasil.</p>
+            ) : (
+              <>
+                <table id={resultsId} className="fdy-table" aria-label="Hasil pencarian">
+                  <thead>
+                    <tr>
+                      {props.columns.map((col: CflColumn<Row>): JSX.Element => (
+                        <th key={col.key} scope="col">{col.label}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {rows.map((row: Row, i: number): JSX.Element => (
+                      <tr
+                        id={rowId(i)}
+                        key={props.rowKey(row)}
+                        className="fdy-cfl__row"
+                        aria-selected={i === activeIndex ? 'true' : undefined}
+                        onClick={(): void => commit(row)}
+                        onMouseMove={(): void => setActive(i)}
+                      >
+                        {props.columns.map((col: CflColumn<Row>): JSX.Element => (
+                          <td key={col.key}>{cellText(row, col.key)}</td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+
+                {error !== null ? (
+                  <div className="fdy-cfl__empty" role="alert" style={{ padding: 'var(--space-4) var(--space-5)' }}>
+                    <p style={{ margin: '0 0 var(--space-3)' }}>{error.message}</p>
+                    <button className="fdy-btn fdy-btn--sm" type="button" onClick={retry}>Coba lagi</button>
+                  </div>
+                ) : hasMore ? (
+                  <div style={{ padding: 'var(--space-3) var(--space-4)', textAlign: 'center' }}>
+                    <button className="fdy-btn fdy-btn--ghost fdy-btn--sm" type="button" disabled={loading} onClick={loadMore}>
+                      {loading ? 'Memuat…' : 'Muat lebih banyak'}
+                    </button>
+                  </div>
+                ) : null}
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="fdy-modal__footer">
+          <span className="fdy-cfl__count">Klik baris untuk memilih</span>
+          <div className="fdy-cfl__actions">
+            <button className="fdy-btn fdy-btn--ghost" type="button" onClick={closeDialog}>Tutup</button>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}

package/adapters/react/components/FdyChart.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useRef, type ReactNode, type JSX } from 'react';
+
+export interface FdyChartSeries {
+  label: string;
+  values: number[];
+  role?: string;
+}
+
+export interface FdyChartProps {
+  type: 'line' | 'area' | 'bar' | 'sparkline' | 'donut';
+  series?: ReadonlyArray<FdyChartSeries>;
+  values?: ReadonlyArray<number>;
+  labels?: ReadonlyArray<string>;
+  format?: 'number' | 'percent' | 'currency';
+  stacked?: boolean;
+  legend?: 'auto' | 'always' | 'none';
+  colors?: ReadonlyArray<string>;
+  color?: string;
+  center?: string | number;
+  'aria-label'?: string;
+  children?: ReactNode;
+}
+
+interface FreedayChartApi { update: (el: HTMLElement) => void; }
+function chartApi(): FreedayChartApi | null {
+  const api: FreedayChartApi | undefined = (window as unknown as { FreedayChart?: FreedayChartApi }).FreedayChart;
+  return api !== undefined && typeof api.update === 'function' ? api : null;
+}
+
+export function FdyChart(props: FdyChartProps): JSX.Element {
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const isCartesian: boolean =
+    props.type === 'line' || props.type === 'area' || (props.type === 'bar' && (props.series !== undefined || props.stacked === true));
+  const rootClass: string =
+    props.type === 'sparkline' ? 'fdy-sparkline'
+    : props.type === 'donut' ? 'fdy-donut'
+    : props.type === 'bar' && !isCartesian ? 'fdy-bars'
+    : '';
+
+  useEffect((): void => {
+    const el: HTMLDivElement | null = rootRef.current;
+    const api: FreedayChartApi | null = chartApi();
+    if (el === null || api === null) return;
+    api.update(el);
+    el.dataset.fdyChartReady = '1'; // claim it so the global auto-init won't render it again
+  }, [props.type, props.series, props.values, props.labels, props.format, props.stacked, props.legend, props.colors, props.color, props.center]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={rootClass}
+      data-fdy-chart={props.type}
+      data-series={props.series !== undefined ? JSON.stringify(props.series) : undefined}
+      data-values={props.values !== undefined ? props.values.join(',') : undefined}
+      data-labels={props.labels !== undefined ? props.labels.join(',') : undefined}
+      data-fdy-format={props.format ?? undefined}
+      data-fdy-stacked={props.stacked === true ? '' : undefined}
+      data-fdy-legend={props.legend ?? undefined}
+      data-fdy-colors={props.colors !== undefined ? props.colors.join(',') : undefined}
+      data-fdy-color={props.color ?? undefined}
+      data-fdy-center={props.center !== undefined ? String(props.center) : undefined}
+      aria-label={props['aria-label']}
+      role="img"
+    >
+      {props.children}
+    </div>
+  );
+}

package/adapters/react/components/FdyCombo.tsx

@@ -0,0 +1,166 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+
+export interface FdyComboOption<T extends string> {
+  value: T;
+  label: string;
+}
+
+export interface FdyComboProps<T extends string> {
+  value: T;
+  options: ReadonlyArray<FdyComboOption<T>>;
+  onChange: (value: T) => void;
+  id?: string;
+  ariaLabelledby?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}
+
+export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element {
+  const baseId: string = useId();
+  const buttonId: string = props.id ?? `${baseId}-btn`;
+  const listboxId: string = `${baseId}-listbox`;
+  const optionId = (index: number): string => `${baseId}-opt-${index}`;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listboxRef = useRef<HTMLUListElement>(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [highlighted, setHighlighted] = useState<number>(-1);
+
+  usePopover(listboxRef, buttonRef, open);
+
+  // Popover attr for React 18 (JSX may not type it): set once on mount.
+  useEffect((): void => {
+    listboxRef.current?.setAttribute('popover', 'manual');
+  }, []);
+
+  const isDisabled: boolean = props.disabled === true;
+  const isInvalid: boolean = props.invalid === true;
+  const selectedIndex: number = useMemo(
+    (): number => props.options.findIndex((o: FdyComboOption<T>): boolean => o.value === props.value),
+    [props.options, props.value],
+  );
+  const selectedLabel: string = selectedIndex >= 0 ? props.options[selectedIndex].label : (props.placeholder ?? '');
+  const isPlaceholder: boolean = selectedIndex < 0;
+  const activeDescendant: string | undefined = open && highlighted >= 0 ? optionId(highlighted) : undefined;
+
+  const setHighlight = (index: number): void => {
+    const len: number = props.options.length;
+    setHighlighted(len === 0 ? -1 : ((index % len) + len) % len);
+  };
+  const openList = (): void => {
+    if (isDisabled || open) return;
+    setOpen(true);
+    const start: number = selectedIndex >= 0 ? selectedIndex : 0;
+    const len: number = props.options.length;
+    setHighlighted(len === 0 ? -1 : ((start % len) + len) % len);
+  };
+  const closeList = (focusButton: boolean): void => {
+    setOpen(false);
+    setHighlighted(-1);
+    if (focusButton) buttonRef.current?.focus();
+  };
+  const toggle = (): void => { if (open) closeList(false); else openList(); };
+  const choose = (index: number): void => {
+    const opt: FdyComboOption<T> | undefined = props.options[index];
+    if (opt === undefined) return;
+    if (opt.value !== props.value) props.onChange(opt.value);
+    closeList(true);
+  };
+
+  // Type-to-select: buffer keystrokes for 500ms and jump to the first matching label.
+  const typedRef = useRef<string>('');
+  const typedTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const typeahead = (char: string): void => {
+    typedRef.current += char.toLowerCase();
+    if (typedTimer.current !== null) clearTimeout(typedTimer.current);
+    typedTimer.current = setTimeout((): void => { typedRef.current = ''; }, 500);
+    const match: number = props.options.findIndex((o: FdyComboOption<T>): boolean =>
+      o.label.toLowerCase().startsWith(typedRef.current));
+    if (match >= 0) { if (!open) setOpen(true); setHighlight(match); }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (isDisabled) return;
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); if (open) setHighlight(highlighted + 1); else openList(); break;
+      case 'ArrowUp': e.preventDefault(); if (open) setHighlight(highlighted - 1); else openList(); break;
+      case 'Home': if (open) { e.preventDefault(); setHighlight(0); } break;
+      case 'End': if (open) { e.preventDefault(); setHighlight(props.options.length - 1); } break;
+      case 'Enter':
+      case ' ': e.preventDefault(); if (open && highlighted >= 0) choose(highlighted); else openList(); break;
+      case 'Escape': if (open) { e.preventDefault(); closeList(true); } break;
+      case 'Tab': if (open) closeList(false); break;
+      default:
+        if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) typeahead(e.key);
+    }
+  };
+
+  const onFocusout = (e: React.FocusEvent<HTMLDivElement>): void => {
+    const next: EventTarget | null = e.relatedTarget;
+    if (rootRef.current !== null && !(next instanceof Node && rootRef.current.contains(next))) closeList(false);
+  };
+
+  // Close when a pointer lands outside the whole combo.
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    const onDocPointerDown = (e: MouseEvent): void => {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) closeList(false);
+    };
+    document.addEventListener('mousedown', onDocPointerDown);
+    return (): void => document.removeEventListener('mousedown', onDocPointerDown);
+  }, [open]);
+
+  useEffect((): (() => void) => (): void => {
+    if (typedTimer.current !== null) clearTimeout(typedTimer.current);
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      className={isInvalid ? 'fdy-combo fdy-combo--error' : 'fdy-combo'}
+      data-value={props.value}
+      onKeyDown={onKeyDown}
+      onBlur={onFocusout}
+    >
+      <button
+        id={buttonId}
+        ref={buttonRef}
+        type="button"
+        className={open ? 'fdy-combo__button is-open' : 'fdy-combo__button'}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-controls={listboxId}
+        aria-expanded={open}
+        aria-activedescendant={activeDescendant}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+        onClick={toggle}
+      >
+        <span className={isPlaceholder ? 'fdy-combo__value fdy-combo__value--placeholder' : 'fdy-combo__value'}>{selectedLabel}</span>
+      </button>
+      <ul id={listboxId} ref={listboxRef} className="fdy-combo__listbox" role="listbox" hidden={!open}>
+        {props.options.map((opt: FdyComboOption<T>, i: number): JSX.Element => (
+          <li
+            id={optionId(i)}
+            key={opt.value}
+            className={i === highlighted ? 'fdy-combo__option is-highlighted' : 'fdy-combo__option'}
+            role="option"
+            aria-selected={opt.value === props.value}
+            onClick={(): void => choose(i)}
+            onMouseMove={(): void => setHighlight(i)}
+          >
+            <span className="fdy-combo__check">{opt.value === props.value ? '✓' : ''}</span>{opt.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/adapters/react/components/FdyDateRange.tsx

@@ -0,0 +1,66 @@
+import type { JSX } from 'react';
+import { FdyDatepicker } from './FdyDatepicker';
+
+// A controlled date range over freeday's `.fdy-daterange` layout (src/components/datepicker.css):
+// two linked FdyDatepickers where the end can't precede the start (start.max = end, end.min = start).
+// `value` + `onChange` in place of Vue's `v-model`; this composes the single-date picker rather than
+// re-implementing the calendar. Note: the vanilla enhancer's cross-calendar `.in-range` day shading
+// is not reproduced (each picker is independent) — the min/max linkage is what keeps the range valid.
+
+export interface DateRangeValue {
+  start: string | null;
+  end: string | null;
+}
+
+export interface FdyDateRangeProps {
+  value: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
+  min?: string;
+  max?: string;
+  locale?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+}
+
+export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
+  const onStart = (start: string): void => props.onChange({ start, end: props.value.end });
+  const onEnd = (end: string): void => props.onChange({ start: props.value.start, end });
+
+  return (
+    <div
+      className="fdy-daterange"
+      role="group"
+      aria-label={props.ariaLabel}
+      aria-labelledby={props.ariaLabelledby}
+    >
+      <FdyDatepicker
+        value={props.value.start}
+        onChange={onStart}
+        min={props.min}
+        max={props.value.end ?? props.max}
+        locale={props.locale}
+        disabled={props.disabled}
+        invalid={props.invalid}
+        describedby={props.describedby}
+        placeholder={props.startPlaceholder ?? 'Dari'}
+      />
+      <span className="fdy-daterange__sep" aria-hidden="true">–</span>
+      <FdyDatepicker
+        value={props.value.end}
+        onChange={onEnd}
+        min={props.value.start ?? props.min}
+        max={props.max}
+        locale={props.locale}
+        disabled={props.disabled}
+        invalid={props.invalid}
+        describedby={props.describedby}
+        placeholder={props.endPlaceholder ?? 'Sampai'}
+      />
+    </div>
+  );
+}