premium-ds 0.1.0

package/src/components/date-picker/TimeField.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+/* TimeField.tsx - standalone time field.
+   -------------------------------------------------------------------------
+   The segmented HH:MM machine (time-core.tsx) wearing the Input vocabulary -
+   usable anywhere a bare time is needed, without the calendar.
+
+     <TimeField
+       label="Send at"
+       value="09:30"             // canonical 'HH:mm' (24h) | null
+       onChange={(t) => ...}       // live - the instant both segments exist
+       format="12h"              // display only; storage stays 24h
+       minuteStep={15}           // ↑/↓ granularity (typing is exact)
+       min="09:00" max="17:30"   // saturation bounds - clamp, never error
+     />
+
+   Primitives consumed (A8): the .fld Input vocabulary (label/message/error
+   chrome), TimeSegments (the machine), Icon. The box is a div wearing
+   .fld__input - clicking its empty area seats focus in the hours segment.
+   Buildless global was window.TimeField; a bundled app imports it. */
+
+import type { PointerEvent } from 'react';
+import { FieldShell, useControllable } from './field-shell';
+import { TimeSegments } from './time-core';
+
+export interface TimeFieldProps {
+  /** Controlled value, canonical 'HH:mm' (24h). */
+  value?: string | null;
+  defaultValue?: string | null;
+  /** Fires live - the instant both segments exist. */
+  onChange?: (value: string) => void;
+  label?: string;
+  /** Display only; storage stays 24h. Default '24h'. */
+  format?: '24h' | '12h';
+  /** ↑/↓ step granularity in minutes (typing is exact). Default 5. */
+  minuteStep?: number;
+  /** Lower bound 'HH:mm' - saturates, never errors. */
+  min?: string;
+  /** Upper bound 'HH:mm' - saturates, never errors. */
+  max?: string;
+  required?: boolean;
+  invalid?: boolean;
+  message?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function TimeField({
+  value, // controlled: 'HH:mm' | null
+  defaultValue = null,
+  onChange,
+  label,
+  format = '24h',
+  minuteStep = 5,
+  min,
+  max,
+  required = false,
+  invalid = false,
+  message,
+  disabled = false,
+  className = '',
+}: TimeFieldProps) {
+  const [val, commit] = useControllable(value, defaultValue, onChange);
+
+  /* clicking the box (not a segment) seats focus where typing starts */
+  function onBoxPointerDown(e: PointerEvent<HTMLDivElement>) {
+    if (disabled || (e.target as HTMLElement).closest('.tsg__seg')) return;
+    e.preventDefault();
+    const seg = e.currentTarget.querySelector('.tsg__seg') as HTMLElement | null;
+    if (seg) seg.focus();
+  }
+
+  return (
+    <FieldShell
+      variant="tfd"
+      label={label}
+      required={required}
+      invalid={invalid}
+      message={message}
+      icon="clock"
+      className={className}
+    >
+      <div
+        className={'fld__input tfd__box' + (disabled ? ' is-disabled' : '')}
+        onPointerDown={onBoxPointerDown}
+      >
+        <TimeSegments
+          value={val}
+          onCommit={commit}
+          format={format}
+          minuteStep={minuteStep}
+          min={min}
+          max={max}
+          disabled={disabled}
+          ariaLabel={label || 'Time'}
+        />
+      </div>
+    </FieldShell>
+  );
+}

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

@@ -0,0 +1,591 @@
+/* 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);
+}
+
+/* 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(--bg-subtle);
+  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 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: var(--radius-md);
+  background: var(--bg-muted);
+  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(--bg-muted);
+  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;
+}