@zyncat/ui 0.8.0

package/src/components/composites/date-picker/date-picker.css

@@ -0,0 +1,595 @@
+/* date-picker domain - geometry + paint for DateField/DateTimeField (.dtp*), DateRangeField (.drp*), TimeField (.tfd*, .tsg*). */
+
+.dtf__trigger {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  cursor: pointer;
+  gap: var(--space-2);
+}
+.dtf__value {
+  font: var(--type-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-strong);
+}
+.dtf__placeholder {
+  color: var(--text-disabled);
+}
+.dtf__trigger:disabled .dtf__value {
+  color: var(--text-disabled);
+}
+
+/* Hover - subtle gray wash + stronger border, matching Select's trigger. The border
+   darkens via the shared .fld__input:hover; this adds the neutral wash it omits. Held
+   off while focused or open, where the accent focus look owns the trigger. */
+.dtf__trigger:hover:not(:disabled):not(:focus):not([aria-expanded='true']) {
+  background-color: var(--neutral-wash);
+}
+
+/* open - focus moves into the panel, so the trigger holds the focus look itself while expanded. */
+.dtf__trigger[aria-expanded='true']:not(:disabled) {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+
+.dtp {
+  --dtp-cell: var(--control-height);
+  background: var(--bg-surface-raised);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+
+.dtp__cal {
+  padding: var(--space-3) var(--space-3) var(--space-2);
+}
+
+/* header - month flush-left (semibold sans), year as a quiet mono chip; carets + today-jump grouped right. */
+.dtp__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  margin-inline: calc(-1 * var(--space-3));
+  padding-inline: var(--space-3);
+  padding-bottom: var(--space-2);
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  margin-bottom: var(--space-3);
+}
+.dtp__month {
+  padding-inline-start: var(--space-2); /* optical: toward the first numeral */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  font: var(--type-caption);
+  font-weight: var(--weight-semibold);
+  color: var(--text-strong);
+}
+.dtp__year {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  font-weight: var(--weight-regular);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  background: var(--bg-muted);
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+}
+.dtp__navs {
+  display: flex;
+  gap: var(--space-1);
+}
+.dtp__nav {
+  width: var(--control-height-sm);
+  height: var(--control-height-sm);
+  display: grid;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: var(--text-muted);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.dtp__nav:hover:not(:disabled) {
+  background: var(--neutral-wash);
+  color: var(--text-strong);
+}
+.dtp__nav:active:not(:disabled) {
+  background: var(--bg-muted);
+}
+.dtp__nav:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.dtp__nav:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+.dtp__dow {
+  display: grid;
+  grid-template-columns: repeat(7, var(--dtp-cell));
+  gap: var(--space-1);
+  padding-bottom: var(--space-3);
+}
+.dtp__dow span {
+  font: var(--type-micro);
+  color: var(--text-subtle);
+  text-align: center;
+}
+
+.dtp__days {
+  position: relative; /* containing block + measuring frame for the glide pill */
+  display: grid;
+  grid-template-columns: repeat(7, var(--dtp-cell));
+  gap: var(--space-1);
+  isolation: isolate; /* the hover pill's z:-1 must resolve here, above the panel bg, below cell content */
+}
+/* ARIA rows - no boxes; the buttons stay direct grid items */
+.dtp__row {
+  display: contents;
+}
+
+/* day cell - the button must create no stacking context, so the pill (z0) / numeral (z1) resolve at grid level. */
+.dtp__day {
+  position: relative;
+  width: var(--dtp-cell);
+  height: var(--dtp-cell);
+  display: grid;
+  place-items: center;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-body);
+  cursor: pointer;
+  transition: var(--transition-colors);
+}
+.dtp__day:hover:not(:disabled) {
+  color: var(--text-strong);
+} /* background comes from the shared glide pill, not per-cell */
+.dtp__day:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+.dtp__day.is-out {
+  color: var(--text-subtle);
+}
+.dtp__day:disabled {
+  color: var(--text-disabled);
+  cursor: default;
+}
+
+/* gliding hover pill (useGlide) - bg-muted (not -subtle, else ~ invisible on the raised surface); z:-1 under numerals + selection tint. */
+.dtp__hover {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  will-change: transform, opacity;
+}
+
+/* selection - a quiet tint, not a solid fill (so it never outshouts Done); the layoutId node, so fill + border travel together. */
+.dtp__pill {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  border-radius: var(--radius-md);
+  background: var(--accent-subtle);
+  border: var(--border-hairline) solid var(--accent-border);
+}
+.dtp__num {
+  position: relative;
+  z-index: 1;
+}
+.dtp__day.is-selected .dtp__num {
+  color: var(--text-accent);
+  font-weight: var(--weight-semibold);
+}
+
+/* today - accent numeral + a short bar, never a fill (fill means "picked"); reads on the selection tint too. */
+.dtp__day.is-today .dtp__num {
+  color: var(--text-accent);
+  font-weight: var(--weight-semibold);
+}
+.dtp__dot {
+  position: absolute;
+  bottom: var(--space-1);
+  left: 50%;
+  width: var(--space-2);
+  height: calc(var(--space-px) * 2);
+  margin-left: calc(-1 * var(--space-1));
+  border-radius: var(--space-px);
+  background: var(--accent);
+  z-index: 1;
+}
+.dtp__day:disabled .dtp__num {
+  color: var(--text-disabled);
+}
+.dtp__day:disabled .dtp__dot {
+  background: var(--text-disabled);
+}
+
+/* time row - DateTimeField's slot, between the grid and the footer */
+.dtp__time {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+}
+.dtp__timeLabel {
+  font: var(--type-caption);
+  font-weight: var(--weight-medium);
+  color: var(--text-muted);
+  margin-right: auto;
+}
+
+/* keyboard hint - shown only on focus-within; asymmetric easing (eases in, leaves fast). */
+.dtp__timeHint {
+  display: inline-flex;
+  gap: var(--space-1);
+  opacity: 0;
+  transform: translateX(var(--space-1));
+  pointer-events: none;
+  transition:
+    opacity var(--duration-fast) var(--ease-exit),
+    transform var(--duration-fast) var(--ease-exit);
+}
+.dtp__time:focus-within .dtp__timeHint {
+  opacity: 1;
+  transform: none;
+  transition:
+    opacity var(--duration-base) var(--ease-entrance),
+    transform var(--duration-base) var(--ease-entrance);
+}
+.dtp__timeHint kbd {
+  font-family: var(--font-mono);
+  font-size: var(--size-micro);
+  line-height: 1;
+  color: var(--text-subtle);
+  background: var(--bg-subtle);
+  border: var(--border-hairline) solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1);
+}
+
+.dtp__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-subtle);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+}
+.dtp__tz {
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dtp__footSpacer {
+  flex: 1 1 auto;
+}
+
+.drp {
+  --dtp-cell: var(--control-height); /* the day grid reuses .dtp__days/.dtp__dow, which size columns off this var */
+  background: var(--bg-surface-raised);
+  border: var(--border-hairline) solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+}
+.drp__body {
+  display: flex;
+  align-items: stretch;
+}
+
+.drp__presets {
+  flex: none;
+  width: max-content; /* sized by the longest preset label - no magic width number */
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-px);
+  padding: var(--space-3) var(--space-2);
+  border-right: var(--border-hairline) solid var(--border-subtle);
+  background: var(--bg-subtle);
+  isolation: isolate; /* the glide pill's z:-1 resolves here */
+}
+.drp__preset {
+  position: relative;
+  appearance: none;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  color: var(--text-body);
+  font: var(--type-caption);
+  padding: var(--space-2);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-colors);
+  white-space: nowrap;
+}
+.drp__preset:hover {
+  color: var(--text-strong);
+} /* bg comes from the glide pill */
+.drp__preset:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-accent);
+}
+.drp__preset.is-active {
+  background: var(--accent-subtle);
+  color: var(--text-accent);
+  font-weight: var(--weight-medium);
+}
+/* gliding hover indicator - one pill that glides between presets (see glide-pill); the active tint is separate. */
+.drp__presetGlide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  background: var(--neutral-wash);
+  will-change: transform, opacity;
+}
+
+.drp__months {
+  position: relative; /* containing block + measuring frame for the glide pill spanning both grids */
+  isolation: isolate; /* contain the pill's z:-1 here, else it paints behind the panel surface */
+  display: flex;
+}
+.drp__months .dtp__cal {
+  padding: var(--space-3);
+}
+.drp__months .dtp__cal + .dtp__cal {
+  border-left: var(--border-hairline) solid var(--border-subtle);
+}
+
+/* directional month slide - CSS keyframe on the keyed grid remount (can't fight Motion's layoutId caps); gated on reduced-motion. */
+@media (prefers-reduced-motion: no-preference) {
+  .drp .dtp__days[data-enter='1'] {
+    animation: drp-month-in-l var(--duration-base) var(--ease-entrance);
+  }
+  .drp .dtp__days[data-enter='-1'] {
+    animation: drp-month-in-r var(--duration-base) var(--ease-entrance);
+  }
+}
+@keyframes drp-month-in-l {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes drp-month-in-r {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* month header - prev caret hugs the left edge, next caret the right; the label centers between. */
+.drp__mhead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding-bottom: var(--space-3);
+  margin-bottom: var(--space-3);
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  margin-inline: calc(-1 * var(--space-3));
+  padding-inline: var(--space-3);
+}
+.drp__mhead .dtp__month {
+  flex: 1 1 auto;
+  text-align: center;
+  padding-inline-start: 0;
+}
+.drp__mhead--right {
+  justify-content: space-between;
+}
+
+/* range band - extends 1px into the 4px gap toward an in-range neighbour (kills the subpixel seam), rounds where it stops. */
+.drp__band {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: var(
+    --accent-subtle
+  ); /* opaque, so the 1px gap-bridge overlaps don't stack into darker seams between days */
+}
+.drp__band--extL {
+  left: calc(-1 * var(--space-1) - 1px);
+}
+.drp__band--extR {
+  right: calc(-1 * var(--space-1) - 1px);
+}
+.drp__band--roundL {
+  border-top-left-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-md);
+}
+.drp__band--roundR {
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
+
+/* endpoint cap - a Motion layoutId node that glides between cells; the ghost variant (outline, no fill) marks the tentative end. */
+.drp__cap {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: var(--radius-md);
+  background: var(--accent-border); /* more opaque than the band - a clear selection marker, not a heavy solid fill */
+}
+.drp__cap--ghost {
+  background: transparent;
+  border: var(--border-hairline) solid var(--accent);
+}
+
+/* numerals ride above caps (z2); selection reads strong accent, in-range a touch quieter. */
+.drp .dtp__num {
+  z-index: 2;
+}
+.drp .dtp__day.is-in-range .dtp__num {
+  color: var(--text-accent);
+}
+.drp .dtp__day.is-cap .dtp__num,
+.drp .dtp__day.is-cap-ghost .dtp__num {
+  color: var(--text-accent);
+  font-weight: var(--weight-semibold);
+}
+
+.drp .dtp__day.is-cap .dtp__dot,
+.drp .dtp__day.is-cap-ghost .dtp__dot {
+  background: var(--accent);
+}
+
+.drp__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  background: var(--bg-subtle);
+  border-top: var(--border-hairline) solid var(--border-subtle);
+}
+.drp__readout {
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-body);
+  white-space: nowrap;
+}
+.drp__readout .drp__count {
+  color: var(--text-subtle);
+}
+.drp__readout.is-empty {
+  color: var(--text-disabled);
+}
+.drp__tz {
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+.drp__footSpacer {
+  flex: 1 1 auto;
+}
+
+/* bottom-sheet skin (mobile) - sheds border/shadow (the sheet supplies elevation), rounds only top corners, one month. */
+.drp--sheet {
+  --dtp-cell: var(--control-height-lg);
+} /* 40px touch targets */
+.drp--sheet {
+  width: 100vw;
+  max-width: 100%;
+  border: 0;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  box-shadow: none;
+}
+.drp--sheet .drp__body {
+  flex-direction: column;
+}
+.drp--sheet .drp__presets {
+  width: auto;
+  flex-direction: row;
+  overflow-x: auto;
+  gap: var(--space-1);
+  border-right: 0;
+  border-bottom: var(--border-hairline) solid var(--border-subtle);
+  scrollbar-width: none;
+}
+.drp--sheet .drp__presets::-webkit-scrollbar {
+  display: none;
+}
+.drp--sheet .drp__preset {
+  flex: none;
+}
+.drp--sheet .drp__months {
+  justify-content: center;
+  padding-block: var(--space-2);
+}
+
+.tsg {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--font-mono);
+  font-size: var(--size-caption);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-strong);
+}
+.tsg__seg {
+  padding: var(--space-1);
+  border-radius: var(--radius-sm);
+  outline: none;
+  cursor: text;
+  user-select: none;
+  transition: var(--transition-colors);
+}
+/* :focus, not :focus-visible, on purpose - a clicked segment reads selected like keyboard entry. */
+.tsg__seg:focus {
+  background: var(--accent-subtle);
+  color: var(--text-accent);
+}
+.tsg__seg.is-empty {
+  color: var(--text-disabled);
+}
+.tsg__seg.is-empty:focus {
+  color: var(--text-accent);
+}
+.tsg__sep {
+  color: var(--text-subtle);
+}
+.tsg__seg--mer {
+  margin-left: var(--space-1);
+}
+
+.tsg.is-disabled,
+.tsg.is-disabled .tsg__seg {
+  color: var(--text-disabled);
+  cursor: not-allowed;
+}
+
+/* .tfd__box is a DIV wearing .fld__input chrome, so input's :focus can't reach it - re-stated as :focus-within, scoped under .tfd to win the cascade. */
+.tfd__box {
+  display: inline-flex;
+  align-items: center;
+  cursor: text;
+}
+.tfd .tfd__box:focus-within {
+  border-color: var(--accent);
+  background: var(--bg-surface);
+  box-shadow: var(--ring-accent);
+}
+.tfd.is-error .tfd__box {
+  border-color: var(--danger);
+}
+.tfd.is-error .tfd__box:hover:not(.is-disabled):not(:focus-within) {
+  border-color: var(--danger-text);
+}
+.tfd.is-error .tfd__box:focus-within {
+  box-shadow: var(--ring-danger);
+}
+.tfd .tfd__box.is-disabled {
+  background: var(--bg-muted);
+  cursor: not-allowed;
+}

package/src/components/composites/date-picker/date-utils.ts

@@ -0,0 +1,56 @@
+export const MONTHS: string[] = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+export const DOW: string[] = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+export const pad = (n: number): string => String(n).padStart(2, '0');
+export const toKey = (d: Date): string => d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
+export function parse(k: string): Date {
+  const p = k.split('-').map(Number);
+  return new Date(p[0], p[1] - 1, p[2]);
+}
+export const today = (): string => toKey(new Date());
+export const add = (k: string, days: number): string => {
+  const d = parse(k);
+  d.setDate(d.getDate() + days);
+  return toKey(d);
+};
+export const col = (d: Date): number => (d.getDay() + 6) % 7;
+
+export const within = (k: string, min?: string, max?: string): boolean => (!min || k >= min) && (!max || k <= max);
+
+export function displayDay(k: string | null): string | null {
+  if (!k) return null;
+  const d = parse(k);
+  const year = d.getFullYear() === new Date().getFullYear() ? '' : ', ' + d.getFullYear();
+  return MONTHS[d.getMonth()].slice(0, 3) + ' ' + pad(d.getDate()) + year;
+}
+
+export function grid(y: number, m: number): Date[] {
+  const lead = (new Date(y, m, 1).getDay() + 6) % 7;
+  const days: Date[] = [];
+  for (let i = 0; i < 42; i++) days.push(new Date(y, m, 1 - lead + i));
+  return days;
+}
+
+export function tzLabel(tz: string, dateKey?: string): string {
+  try {
+    const at = dateKey ? parse(dateKey) : new Date();
+    const parts = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'shortOffset' }).formatToParts(at);
+    const name = parts.find((p) => p.type === 'timeZoneName');
+    return tz.replace(/_/g, ' ') + (name ? ' - ' + name.value : '');
+  } catch (_e) {
+    return tz;
+  }
+}