@efolusi/meridian 1.5.0

package/data/Sparkline.d.ts

@@ -0,0 +1,14 @@
+export interface SparklineProps {
+  /** Series values */
+  data: number[];
+  /** @default 120 */ width?: number;
+  /** @default 32 */ height?: number;
+  /** Color override; inferred from first vs last value */
+  direction?: 'up' | 'down' | 'flat';
+  /** @default 1.5 */ strokeWidth?: number;
+  /** Faint area fill @default true */
+  area?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Sparkline(props: SparklineProps): React.JSX.Element;

package/data/Sparkline.js

@@ -0,0 +1,42 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+export function Sparkline({
+  data = [],
+  width = 120,
+  height = 32,
+  direction,
+  strokeWidth = 1.5,
+  area = true,
+  style,
+  className,
+  ...rest
+}) {
+  if (!data.length) return null;
+  const min = Math.min(...data),
+    max = Math.max(...data),
+    span = max - min || 1;
+  const pad = strokeWidth;
+  const pts = data.map((v, i) => [pad + i / (data.length - 1) * (width - pad * 2), pad + (1 - (v - min) / span) * (height - pad * 2)]);
+  const dir = direction || (data[data.length - 1] >= data[0] ? 'up' : 'down');
+  const color = dir === 'up' ? 'var(--success-600)' : dir === 'down' ? 'var(--danger-600)' : 'var(--text-primary)';
+  const line = pts.map(p => p.map(n => n.toFixed(1)).join(',')).join(' ');
+  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
+    width: width,
+    height: height,
+    viewBox: `0 0 ${width} ${height}`,
+    style: style,
+    className: className,
+    "aria-hidden": "true"
+  }), area && /*#__PURE__*/React.createElement("polygon", {
+    points: `${pad},${height - pad} ${line} ${width - pad},${height - pad}`,
+    fill: color,
+    opacity: "0.09"
+  }), /*#__PURE__*/React.createElement("polyline", {
+    points: line,
+    fill: "none",
+    stroke: color,
+    strokeWidth: strokeWidth,
+    strokeLinejoin: "round",
+    strokeLinecap: "round"
+  }));
+}

package/data/Stat.d.ts

@@ -0,0 +1,14 @@
+export interface StatProps {
+  label: React.ReactNode;
+  /** Pre-formatted, e.g. "$48.2k" */
+  value: React.ReactNode;
+  /** e.g. "12.4%" */
+  delta?: React.ReactNode;
+  /** Colors + arrows the delta @default 'flat' */
+  direction?: 'up' | 'down' | 'flat';
+  /** Muted line under the value */
+  hint?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Stat(props: StatProps): React.JSX.Element;

package/data/Stat.js

@@ -0,0 +1,40 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-stat__label{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--weight-medium)}
+.ef-stat__row{display:flex;align-items:baseline;gap:8px;margin-top:6px}
+.ef-stat__value{font-family:var(--font-mono);font-size:26px;font-weight:var(--weight-semibold);letter-spacing:-0.01em;color:var(--text-primary)}
+.ef-stat__delta{font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap}
+.ef-stat__delta--up{color:var(--success-600)}
+.ef-stat__delta--down{color:var(--danger-600)}
+.ef-stat__delta--flat{color:var(--text-muted)}
+.ef-stat__hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:4px}
+`;
+export function Stat({
+  label,
+  value,
+  delta,
+  direction = 'flat',
+  hint,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-stat', CSS);
+  const arrow = direction === 'up' ? '↑ ' : direction === 'down' ? '↓ ' : '';
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: className,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-stat__label"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "ef-stat__row"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ef-stat__value"
+  }, value), delta != null ? /*#__PURE__*/React.createElement("span", {
+    className: `ef-stat__delta ef-stat__delta--${direction}`
+  }, arrow, delta) : null), hint ? /*#__PURE__*/React.createElement("div", {
+    className: "ef-stat__hint"
+  }, hint) : null);
+}

package/data/StatusDot.d.ts

@@ -0,0 +1,10 @@
+export interface StatusDotProps {
+  /** @default 'ok' */
+  state?: 'ok' | 'warn' | 'err' | 'busy' | 'off';
+  label?: React.ReactNode;
+  /** Radiating pulse for live states */
+  pulse?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function StatusDot(props: StatusDotProps): React.JSX.Element;

package/data/StatusDot.js

@@ -0,0 +1,34 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-status{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-sm);color:var(--text-primary)}
+.ef-status__dot{position:relative;width:8px;height:8px;border-radius:var(--radius-full);flex:none}
+.ef-status--ok .ef-status__dot{background:var(--success-600)}
+.ef-status--warn .ef-status__dot{background:var(--warning-600)}
+.ef-status--err .ef-status__dot{background:var(--danger-600)}
+.ef-status--busy .ef-status__dot{background:var(--caramel-500)}
+.ef-status--off .ef-status__dot{background:var(--sand-400)}
+@keyframes ef-status-pulse{0%{box-shadow:0 0 0 0 currentColor;opacity:.5}100%{box-shadow:0 0 0 6px currentColor;opacity:0}}
+.ef-status--pulse .ef-status__dot::after{content:'';position:absolute;inset:0;border-radius:var(--radius-full);animation:ef-status-pulse 1.6s var(--ease-out) infinite}
+.ef-status--ok .ef-status__dot::after{color:var(--success-600)}
+.ef-status--warn .ef-status__dot::after{color:var(--warning-600)}
+.ef-status--err .ef-status__dot::after{color:var(--danger-600)}
+.ef-status--busy .ef-status__dot::after{color:var(--caramel-500)}
+`;
+export function StatusDot({
+  state = 'ok',
+  label,
+  pulse,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-status', CSS);
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    className: `ef-status ef-status--${state}${pulse ? ' ef-status--pulse' : ''}${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-status__dot"
+  }), label ? /*#__PURE__*/React.createElement("span", null, label) : null);
+}

package/data/Table.d.ts

@@ -0,0 +1,53 @@
+export interface TableColumn {
+  /** Row field to read */
+  key: string;
+  label: React.ReactNode;
+  width?: number | string;
+  align?: 'left' | 'center' | 'right';
+  /** Mono tabular figures */
+  numeric?: boolean;
+  /** Show a sort control in the header for this column */
+  sortable?: boolean;
+  /** Value to sort on, when it is not simply row[key] */
+  sortAccessor?: (row: any) => any;
+  /** Custom cell: (value, row, rowIndex) => node */
+  render?: (value: any, row: any, index: number) => React.ReactNode;
+}
+export interface TableSort {
+  key: string;
+  direction: 'asc' | 'desc';
+}
+export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {
+  columns: TableColumn[];
+  rows: any[];
+  /** Field name or fn for React keys @default index */
+  rowKey?: string | ((row: any) => string);
+  onRowClick?: (row: any) => void;
+  dense?: boolean;
+  /** Controlled sort. Omit and the table sorts itself. */
+  sort?: TableSort | null;
+  defaultSort?: TableSort;
+  onSortChange?: (sort: TableSort) => void;
+  /** Adds a leading checkbox column with a select-all header */
+  selectable?: boolean;
+  /** Controlled selection, as row keys */
+  selected?: Array<string | number>;
+  defaultSelected?: Array<string | number>;
+  onSelectionChange?: (selected: Array<string | number>) => void;
+  /** Pin the header while the body scrolls (implies a scroll box) */
+  stickyHeader?: boolean;
+  /** Height of the scroll box @default 320 when sticky */
+  maxHeight?: number | string;
+  /** Replace the body with shimmer rows */
+  loading?: boolean;
+  /** @default 3 */
+  loadingRows?: number;
+  /** Shown when there are no rows @default 'Nothing to show yet.' */
+  empty?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+}
+/** Ref lands on the scrolling wrapper element. */
+export declare const Table: React.ForwardRefExoticComponent<
+  TableProps & React.RefAttributes<HTMLDivElement>
+>;

package/data/Table.js

@@ -0,0 +1,174 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { injectEfCss } from "../forms/Button.js";
+import { Checkbox } from "../forms/Checkbox.js";
+import { Icon } from "../icons/Icon.js";
+const CSS = `
+.ef-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
+.ef-table-wrap--sticky{overflow-y:auto}
+.ef-table{width:100%;border-collapse:collapse}
+.ef-table th{text-align:left;padding:10px var(--table-pad-x);font-size:11px;font-weight:var(--weight-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-default);white-space:nowrap}
+.ef-table--sticky thead th{position:sticky;top:0;z-index:1;background:var(--surface-card)}
+.ef-table td{padding:var(--table-pad-y) var(--table-pad-x);font-size:var(--text-md);border-bottom:1px solid var(--border-default);vertical-align:middle}
+.ef-table tr:last-child td{border-bottom:none}
+.ef-table--dense td{padding:8px var(--table-pad-x);font-size:var(--text-sm)}
+.ef-table__row--click{cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
+.ef-table__row--click:hover{background:var(--surface-subtle)}
+.ef-table__row--sel{background:var(--accent-subtle)}
+.ef-table .ef-num{font-family:var(--font-mono);font-size:13px}
+.ef-table__sort{display:inline-flex;align-items:center;gap:4px;border:none;background:none;padding:0;margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
+.ef-table__sort:hover{color:var(--text-primary)}
+.ef-table__sort:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
+.ef-table__sort__i{display:inline-flex;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
+.ef-table__sort:hover .ef-table__sort__i,.ef-table__sort--on .ef-table__sort__i{opacity:1}
+.ef-table__sel{width:1%;white-space:nowrap}
+.ef-table__msg{padding:28px var(--table-pad-x);text-align:center;font-size:var(--text-md);color:var(--text-muted)}
+.ef-table__skel{height:12px;border-radius:var(--radius-sm);background:var(--surface-sunken);animation:ef-table-pulse 1.2s var(--ease-in-out) infinite}
+@keyframes ef-table-pulse{50%{opacity:.45}}
+`;
+const compare = (a, b) => {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b), undefined, {
+    numeric: true,
+    sensitivity: 'base'
+  });
+};
+export const Table = /*#__PURE__*/React.forwardRef(function Table({
+  columns,
+  rows,
+  rowKey,
+  onRowClick,
+  dense,
+  sort: sortProp,
+  defaultSort,
+  onSortChange,
+  selectable,
+  selected: selectedProp,
+  defaultSelected,
+  onSelectionChange,
+  stickyHeader,
+  maxHeight,
+  loading,
+  loadingRows = 3,
+  empty = 'Nothing to show yet.',
+  style,
+  className,
+  ...rest
+}, ref) {
+  injectEfCss('ef-css-table', CSS);
+  const key = (row, i) => rowKey ? typeof rowKey === 'function' ? rowKey(row) : row[rowKey] : i;
+  const [innerSort, setInnerSort] = React.useState(defaultSort || null);
+  const sort = sortProp !== undefined ? sortProp : innerSort;
+  const applySort = next => {
+    if (sortProp === undefined) setInnerSort(next);
+    if (onSortChange) onSortChange(next);
+  };
+  const toggleSort = colKey => {
+    const dir = sort && sort.key === colKey && sort.direction === 'asc' ? 'desc' : 'asc';
+    applySort({
+      key: colKey,
+      direction: dir
+    });
+  };
+  const [innerSel, setInnerSel] = React.useState(defaultSelected || []);
+  const selected = selectedProp !== undefined ? selectedProp : innerSel;
+  const applySel = next => {
+    if (selectedProp === undefined) setInnerSel(next);
+    if (onSelectionChange) onSelectionChange(next);
+  };
+
+  // Sorting is applied here, not expected of the caller: a table that renders
+  // a sort affordance it does not honour is worse than one with no affordance.
+  const sorted = React.useMemo(() => {
+    if (!sort || !sort.key) return rows;
+    const col = columns.find(c => c.key === sort.key);
+    if (!col) return rows;
+    const get = col.sortAccessor || (row => row[col.key]);
+    const out = rows.slice().sort((x, y) => compare(get(x), get(y)));
+    return sort.direction === 'desc' ? out.reverse() : out;
+  }, [rows, columns, sort]);
+  const allKeys = sorted.map((r, i) => key(r, i));
+  const allOn = allKeys.length > 0 && allKeys.every(k => selected.includes(k));
+  const someOn = !allOn && allKeys.some(k => selected.includes(k));
+  const span = columns.length + (selectable ? 1 : 0);
+  const wrapStyle = stickyHeader || maxHeight ? {
+    maxHeight: maxHeight || 320,
+    ...style
+  } : style;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, rest, {
+    className: `ef-table-wrap${stickyHeader || maxHeight ? ' ef-table-wrap--sticky' : ''}`,
+    style: wrapStyle
+  }), /*#__PURE__*/React.createElement("table", {
+    className: `ef-table${dense ? ' ef-table--dense' : ''}${stickyHeader ? ' ef-table--sticky' : ''}${className ? ' ' + className : ''}`
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, selectable ? /*#__PURE__*/React.createElement("th", {
+    className: "ef-table__sel"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    "aria-label": allOn ? 'Deselect all rows' : 'Select all rows',
+    checked: allOn,
+    ref: el => {
+      if (el) el.indeterminate = someOn;
+    },
+    onChange: e => applySel(e.target.checked ? allKeys : [])
+  })) : null, columns.map(c => {
+    const on = sort && sort.key === c.key;
+    return /*#__PURE__*/React.createElement("th", {
+      key: c.key,
+      style: {
+        width: c.width,
+        textAlign: c.align
+      },
+      "aria-sort": c.sortable ? on ? sort.direction === 'asc' ? 'ascending' : 'descending' : 'none' : undefined
+    }, c.sortable ? /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: `ef-table__sort${on ? ' ef-table__sort--on' : ''}`,
+      onClick: () => toggleSort(c.key)
+    }, c.label, /*#__PURE__*/React.createElement("span", {
+      className: "ef-table__sort__i"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: on && sort.direction === 'desc' ? 'chevron-down' : 'chevron-up',
+      size: 13
+    }))) : c.label);
+  }))), /*#__PURE__*/React.createElement("tbody", null, loading ? Array.from({
+    length: loadingRows
+  }, (_, i) => /*#__PURE__*/React.createElement("tr", {
+    key: 'sk' + i
+  }, Array.from({
+    length: span
+  }, (_, j) => /*#__PURE__*/React.createElement("td", {
+    key: j
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ef-table__skel",
+    style: {
+      width: j === 0 ? '55%' : '75%'
+    }
+  }))))) : sorted.length === 0 ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    className: "ef-table__msg",
+    colSpan: span
+  }, empty)) : sorted.map((row, i) => {
+    const k = key(row, i);
+    const isSel = selectable && selected.includes(k);
+    return /*#__PURE__*/React.createElement("tr", {
+      key: k,
+      className: `${onRowClick ? 'ef-table__row--click' : ''}${isSel ? ' ef-table__row--sel' : ''}`.trim() || undefined,
+      onClick: onRowClick ? () => onRowClick(row) : undefined
+    }, selectable ? /*#__PURE__*/React.createElement("td", {
+      className: "ef-table__sel",
+      onClick: e => e.stopPropagation()
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      "aria-label": `Select row ${i + 1}`,
+      checked: !!isSel,
+      onChange: e => applySel(e.target.checked ? [...selected, k] : selected.filter(x => x !== k))
+    })) : null, columns.map(c => /*#__PURE__*/React.createElement("td", {
+      key: c.key,
+      className: c.numeric ? 'ef-num' : '',
+      style: {
+        textAlign: c.align
+      }
+    }, c.render ? c.render(row[c.key], row, i) : row[c.key])));
+  }))));
+});

package/dates/Calendar.d.ts

@@ -0,0 +1,8 @@
+export interface CalendarProps {
+  /** Selected date as YYYY-MM-DD */
+  value?: string;
+  onChange?: (date: string) => void;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function Calendar(props: CalendarProps): React.JSX.Element;

package/dates/Calendar.js

@@ -0,0 +1,143 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { IconButton } from "../forms/IconButton.js";
+import { injectEfCss } from "../forms/Button.js";
+const CSS = `
+.ef-cal{width:252px;user-select:none}
+.ef-cal__head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
+.ef-cal__month{flex:1;text-align:center;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
+.ef-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
+.ef-cal__row{display:contents}
+.ef-cal__dow{text-align:center;font-size:10px;font-weight:var(--weight-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);padding:4px 0}
+.ef-cal__day{height:32px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);transition:background var(--dur-fast) var(--ease-out)}
+.ef-cal__day:hover{background:var(--sand-100)}
+.ef-cal__day:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.ef-cal__day--out{color:var(--sand-400)}
+.ef-cal__day--today{border-color:var(--sand-400)}
+.ef-cal__day--sel{background:var(--accent);color:var(--accent-contrast);font-weight:var(--weight-semibold)}
+.ef-cal__day--sel:hover{background:var(--sand-900)}
+`;
+const DOW = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+const DOW_FULL = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+const iso = d => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
+export function Calendar({
+  value,
+  onChange,
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-cal', CSS);
+  const sel = value ? new Date(value + 'T00:00:00') : null;
+  const [view, setView] = React.useState(() => {
+    const b = sel || new Date();
+    return [b.getFullYear(), b.getMonth()];
+  });
+  const [y, m] = view;
+  const first = new Date(y, m, 1);
+  const offset = (first.getDay() + 6) % 7;
+  const start = new Date(y, m, 1 - offset);
+  const today = iso(new Date());
+  const cells = Array.from({
+    length: 42
+  }, (_, i) => new Date(start.getFullYear(), start.getMonth(), start.getDate() + i));
+  const gridRef = React.useRef(null);
+  const [focusIso, setFocusIso] = React.useState(() => sel ? iso(sel) : today);
+  const focusTarget = cells.some(d => iso(d) === focusIso) ? focusIso : iso(first);
+  const move = days => {
+    const base = new Date(focusTarget + 'T00:00:00');
+    const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + days);
+    setFocusIso(iso(next));
+    if (next.getMonth() !== m || next.getFullYear() !== y) setView([next.getFullYear(), next.getMonth()]);
+  };
+  React.useEffect(() => {
+    const g = gridRef.current;
+    if (!g || !g.contains(document.activeElement)) return;
+    const btn = g.querySelector(`[data-iso="${focusTarget}"]`);
+    if (btn) btn.focus();
+  }, [focusTarget, y, m]);
+  const onGridKey = e => {
+    const map = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    if (e.key in map) {
+      e.preventDefault();
+      move(map[e.key]);
+      return;
+    }
+    const dow = () => (new Date(focusTarget + 'T00:00:00').getDay() + 6) % 7;
+    if (e.key === 'Home') {
+      e.preventDefault();
+      move(-dow());
+    } else if (e.key === 'End') {
+      e.preventDefault();
+      move(6 - dow());
+    } else if (e.key === 'PageUp') {
+      e.preventDefault();
+      setView(m === 0 ? [y - 1, 11] : [y, m - 1]);
+    } else if (e.key === 'PageDown') {
+      e.preventDefault();
+      setView(m === 11 ? [y + 1, 0] : [y, m + 1]);
+    }
+  };
+  const rows = Array.from({
+    length: 6
+  }, (_, r) => cells.slice(r * 7, r * 7 + 7));
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: `ef-cal${className ? ' ' + className : ''}`,
+    style: style
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "ef-cal__head"
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    icon: "chevron-left",
+    label: "Previous month",
+    size: "sm",
+    onClick: () => setView(m === 0 ? [y - 1, 11] : [y, m - 1])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "ef-cal__month",
+    "aria-live": "polite"
+  }, MONTHS[m], " ", y), /*#__PURE__*/React.createElement(IconButton, {
+    icon: "chevron-right",
+    label: "Next month",
+    size: "sm",
+    onClick: () => setView(m === 11 ? [y + 1, 0] : [y, m + 1])
+  })), /*#__PURE__*/React.createElement("div", {
+    role: "grid",
+    ref: gridRef,
+    onKeyDown: onGridKey,
+    "aria-label": `${MONTHS[m]} ${y}`,
+    className: "ef-cal__grid"
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: "ef-cal__row"
+  }, DOW.map((d, i) => /*#__PURE__*/React.createElement("span", {
+    key: d,
+    role: "columnheader",
+    "aria-label": DOW_FULL[i],
+    className: "ef-cal__dow"
+  }, d))), rows.map((row, ri) => /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: "ef-cal__row",
+    key: ri
+  }, row.map(d => {
+    const id = iso(d);
+    return /*#__PURE__*/React.createElement("button", {
+      key: id,
+      role: "gridcell",
+      "data-iso": id,
+      tabIndex: id === focusTarget ? 0 : -1,
+      "aria-selected": sel ? id === iso(sel) : undefined,
+      "aria-current": id === today ? 'date' : undefined,
+      "aria-label": `${d.getDate()} ${MONTHS[d.getMonth()]} ${d.getFullYear()}`,
+      className: `ef-cal__day${d.getMonth() !== m ? ' ef-cal__day--out' : ''}${id === today ? ' ef-cal__day--today' : ''}${sel && id === iso(sel) ? ' ef-cal__day--sel' : ''}`,
+      onClick: () => {
+        setFocusIso(id);
+        if (onChange) onChange(id);
+      }
+    }, d.getDate());
+  })))));
+}

package/dates/DatePicker.d.ts

@@ -0,0 +1,12 @@
+export interface DatePickerProps {
+  label?: string;
+  /** Controlled YYYY-MM-DD */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (date: string) => void;
+  /** @default 'Pick a date' */
+  placeholder?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+export declare function DatePicker(props: DatePickerProps): React.JSX.Element;

package/dates/DatePicker.js

@@ -0,0 +1,118 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { Icon } from "../icons/Icon.js";
+import { Calendar } from "./Calendar.js";
+import { injectEfCss } from "../forms/Button.js";
+import { useFieldProps } from "../forms/FormField.js";
+import { Portal, useAnchoredStyle } from "../overlay/Portal.js";
+const CSS = `
+.ef-datepicker{position:relative;display:inline-flex;flex-direction:column;gap:6px}
+.ef-datepicker__label{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
+.ef-datepicker__btn{display:inline-flex;align-items:center;gap:8px;height:var(--control-h-md);padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-card);font-family:var(--font-sans);font-size:var(--text-md);color:var(--text-primary);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
+.ef-datepicker__btn:hover{border-color:var(--sand-400)}
+.ef-datepicker__btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
+.ef-datepicker__btn--empty{color:var(--text-muted)}
+.ef-datepicker__pop{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:12px;z-index:var(--z-dropdown);animation:ef-dp-in var(--dur-fast) var(--ease-out)}
+@keyframes ef-dp-in{from{opacity:0;transform:translateY(-3px)}}
+`;
+const fmt = v => {
+  if (!v) return null;
+  const d = new Date(v + 'T00:00:00');
+  return d.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric'
+  });
+};
+export function DatePicker({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Pick a date',
+  style,
+  className,
+  ...rest
+}) {
+  injectEfCss('ef-css-datepicker', CSS);
+  // Picks up id / aria wiring when nested in a FormField; standalone this is a no-op.
+  const field = useFieldProps({
+    id: rest.id,
+    'aria-describedby': rest['aria-describedby']
+  });
+  const [inner, setInner] = React.useState(defaultValue || '');
+  const v = value != null ? value : inner;
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  const btnRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const {
+    style: anchored
+  } = useAnchoredStyle(ref, panelRef, {
+    open,
+    placement: 'bottom',
+    align: 'start'
+  });
+  React.useEffect(() => {
+    if (!open) return;
+    // the calendar is portaled out of `ref`, so look for it in the panel
+    const day = panelRef.current && panelRef.current.querySelector('[role="gridcell"][tabindex="0"]');
+    if (day) day.focus();
+    const away = e => {
+      const inTrigger = ref.current && ref.current.contains(e.target);
+      const inPanel = panelRef.current && panelRef.current.contains(e.target);
+      if (!inTrigger && !inPanel) setOpen(false);
+    };
+    const key = e => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        if (btnRef.current) btnRef.current.focus();
+      }
+    };
+    document.addEventListener('mousedown', away);
+    document.addEventListener('keydown', key);
+    return () => {
+      document.removeEventListener('mousedown', away);
+      document.removeEventListener('keydown', key);
+    };
+  }, [open]);
+  return /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+    ref: ref,
+    className: `ef-datepicker${className ? ' ' + className : ''}`,
+    style: style
+  }), label ? /*#__PURE__*/React.createElement("span", {
+    className: "ef-datepicker__label"
+  }, label) : null, /*#__PURE__*/React.createElement("button", _extends({}, field.controlProps, {
+    type: "button",
+    ref: btnRef,
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    className: `ef-datepicker__btn${v ? '' : ' ef-datepicker__btn--empty'}`,
+    onClick: () => setOpen(o => !o)
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "calendar",
+    size: 15,
+    style: {
+      color: 'var(--text-muted)'
+    }
+  }), fmt(v) || placeholder, /*#__PURE__*/React.createElement(Icon, {
+    name: "chevron-down",
+    size: 14,
+    style: {
+      color: 'var(--text-muted)',
+      marginLeft: 'auto'
+    }
+  })), open && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+    ref: panelRef,
+    className: "ef-datepicker__pop",
+    style: anchored
+  }, /*#__PURE__*/React.createElement(Calendar, {
+    value: v || undefined,
+    onChange: d => {
+      if (value == null) setInner(d);
+      if (onChange) onChange(d);
+      setOpen(false);
+      if (btnRef.current) btnRef.current.focus();
+    }
+  }))));
+}