@datatechsolutions/tympan 0.3.1 → 0.4.0

package/dist/styles.css

@@ -10081,6 +10081,268 @@
   }
 }
 
+/* ./components/calendar/Calendar.css */
+/* Calendar (spec: wave-5-general/calendar.md; design direction §2.3, §2.4, §2.6, §2.10). */
+@layer tympan.components {
+  .ty-calendar {
+    --ty-calendar-cell: calc(var(--ty-control-height) + var(--ty-space-1));
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-2);
+    min-inline-size: 0;
+  }
+  .ty-calendar__rac {
+    display: block;
+  }
+
+  /* Header: previous / title (or pickers) / next. */
+  .ty-calendar__stepper {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+  }
+  .ty-calendar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ty-control-height);
+    block-size: var(--ty-control-height);
+    flex: none;
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-ink-2);
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-calendar__nav[data-hovered] {
+    background: var(--ty-surface-sunken);
+  }
+  .ty-calendar__nav[data-pressed] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-calendar__nav[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+  .ty-calendar__nav[aria-disabled='true'],
+  .ty-calendar__nav[data-disabled] {
+    color: var(--ty-ink-3);
+    cursor: not-allowed;
+    opacity: 0.45;
+  }
+  .ty-calendar__heading {
+    flex: 1;
+    min-block-size: var(--ty-control-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--ty-space-2);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-label);
+    font-weight: var(--ty-font-weight-semibold);
+    text-align: center;
+  }
+  .ty-calendar__pickers {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    gap: var(--ty-space-2);
+  }
+
+  /* Month grids, side by side, stacked below the small breakpoint. */
+  .ty-calendar__body {
+    display: flex;
+    gap: var(--ty-space-5);
+  }
+  .ty-calendar[data-months='2'] .ty-calendar__body,
+  .ty-calendar[data-months='3'] .ty-calendar__body {
+    justify-content: center;
+  }
+  .ty-calendar__month {
+    display: flex;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-calendar__weeks {
+    display: flex;
+    flex-direction: column;
+    padding-block: calc(var(--ty-font-size-meta) + var(--ty-space-2));
+  }
+  .ty-calendar__week {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    min-block-size: var(--ty-calendar-cell);
+    padding: 1px;
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    font-variant-numeric: tabular-nums;
+  }
+  .ty-calendar__grid {
+    flex: 1;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  .ty-calendar__weekday {
+    padding-block-end: var(--ty-space-1);
+    color: var(--ty-ink-3);
+    font-size: var(--ty-font-size-meta);
+    font-weight: var(--ty-font-weight-regular);
+    text-align: center;
+  }
+  .ty-calendar__grid td {
+    padding: 1px;
+    text-align: center;
+  }
+
+  /* Day cells: states carry shape and colour, never colour alone. */
+  .ty-calendar__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ty-calendar-cell);
+    min-block-size: var(--ty-calendar-cell);
+    border-radius: var(--ty-radius-control);
+    color: var(--ty-ink-2);
+    font-size: var(--ty-font-size-body);
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-calendar__day-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    border-radius: inherit;
+  }
+  .ty-calendar__day[data-outside-month] {
+    color: var(--ty-ink-3);
+  }
+  .ty-calendar[data-months='2'] .ty-calendar__day[data-outside-month],
+  .ty-calendar[data-months='3'] .ty-calendar__day[data-outside-month] {
+    visibility: hidden;
+  }
+  .ty-calendar:not([data-outside-days]) .ty-calendar__day[data-outside-month] {
+    display: none;
+  }
+  .ty-calendar__day[data-hovered] {
+    background: var(--ty-surface-sunken);
+  }
+  .ty-calendar__day-box[data-today] {
+    color: var(--ty-ink);
+    font-weight: var(--ty-font-weight-semibold);
+    box-shadow: inset 0 0 0 1px var(--ty-line-strong);
+  }
+  .ty-calendar__day[data-selected] {
+    background: var(--ty-accent);
+    color: var(--ty-on-cta);
+    font-weight: var(--ty-font-weight-semibold);
+  }
+  .ty-calendar__day[data-selected] .ty-calendar__day-box {
+    color: inherit;
+  }
+  .ty-calendar__day[data-selection-start] {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .ty-calendar__day[data-selection-end] {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .ty-calendar__day[data-selected]:not([data-selection-start]):not([data-selection-end]) {
+    border-radius: 0;
+  }
+  .ty-calendar__day[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-calendar__day[data-unavailable] .ty-calendar__day-number {
+    color: var(--ty-ink-3);
+    text-decoration: line-through;
+  }
+  .ty-calendar__day[data-disabled],
+  .ty-calendar__day[data-unavailable] {
+    cursor: not-allowed;
+  }
+  .ty-calendar__day[data-disabled] {
+    opacity: 0.45;
+  }
+  .ty-calendar__error {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-1);
+    color: var(--ty-danger);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+  }
+  .ty-calendar__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2);
+    padding-block-start: var(--ty-space-2);
+    border-block-start: 1px solid var(--ty-line-soft);
+  }
+
+  /* Touch: every day cell reaches the target size. */
+  @media (pointer: coarse), (max-width: 1023.98px) {
+    .ty-calendar {
+      --ty-calendar-cell: var(--ty-control-target);
+    }
+  }
+
+  /* Several months stack below the small breakpoint. */
+  @media (max-width: 639.98px) {
+    .ty-calendar[data-months='2'] .ty-calendar__body,
+    .ty-calendar[data-months='3'] .ty-calendar__body {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-calendar *,
+    .ty-calendar *::before,
+    .ty-calendar *::after {
+      animation-duration: 0s;
+      transition-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-calendar__day[data-selected] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .ty-calendar__day-box[data-today] {
+      box-shadow: none;
+      outline: 1px solid CanvasText;
+    }
+    .ty-calendar__day[data-unavailable] {
+      color: GrayText;
+      opacity: 1;
+    }
+    .ty-calendar__day[data-disabled] {
+      color: GrayText;
+      opacity: 1;
+    }
+    .ty-calendar__day[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+    .ty-calendar__day,
+    .ty-calendar__weekday,
+    .ty-calendar__week {
+      forced-color-adjust: none;
+    }
+  }
+}
+
 /* ./components/data-table/DataTable.css */
 /* DataTable (spec: wave-1/data-table.md; design direction §2.2, §2.3, §2.6, §2.9). */
 @layer tympan.components {
@@ -10445,6 +10707,148 @@
   }
 }
 
+/* ./components/date-range-field/DateRangeField.css */
+/* DateRangeField (spec: wave-5-general/date-range-field.md; tokens as DateField and Calendar). */
+@layer tympan.components {
+  .ty-date-range-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-1);
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__picker {
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__group {
+    display: flex;
+    align-items: center;
+    gap: var(--ty-space-2);
+    min-block-size: var(--ty-control-height);
+    padding-inline: var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-input);
+    color: var(--ty-ink);
+    font-size: var(--ty-font-size-body);
+    cursor: text;
+  }
+  .ty-date-range-field__group[data-focus-within] {
+    border-color: var(--ty-accent);
+  }
+  .ty-date-range-field__group[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-date-range-field[data-invalid] .ty-date-range-field__group {
+    border-color: var(--ty-danger);
+  }
+  .ty-date-range-field__group[data-disabled] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink-3);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  .ty-date-range-field__input {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    min-block-size: var(--ty-control-target);
+    padding-inline: var(--ty-space-1);
+    font-variant-numeric: tabular-nums;
+    outline: none;
+  }
+  .ty-date-range-field__segment {
+    padding-inline: 1px;
+    border-radius: calc(var(--ty-radius-control) / 2);
+    color: var(--ty-ink);
+    font-variant-numeric: tabular-nums;
+    outline: none;
+    cursor: inherit;
+  }
+  .ty-date-range-field__segment[data-placeholder] {
+    color: var(--ty-ink-3);
+  }
+  .ty-date-range-field__segment[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 1px;
+  }
+  .ty-date-range-field__dash {
+    color: var(--ty-ink-3);
+  }
+  .ty-date-range-field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: var(--ty-control-target);
+    block-size: var(--ty-control-target);
+    margin-inline-end: calc((var(--ty-control-target) - var(--ty-control-height)) / -2);
+    border: 0;
+    border-radius: var(--ty-radius-control);
+    background: transparent;
+    color: var(--ty-ink-2);
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+  }
+  .ty-date-range-field__trigger[data-hovered] {
+    background: var(--ty-surface-sunken);
+    color: var(--ty-ink);
+  }
+  .ty-date-range-field__trigger[data-focus-visible] {
+    outline: var(--ty-focus-width) solid var(--ty-focus-ring);
+    outline-offset: 2px;
+  }
+
+  /* Popover panel: presets and calendar, apply actions at the end. */
+  .ty-date-range-field__surface {
+    display: block;
+  }
+  .ty-date-range-field__panel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ty-space-3);
+    min-inline-size: 0;
+  }
+  .ty-date-range-field__presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ty-space-2);
+  }
+  .ty-date-range-field__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--ty-space-2);
+    padding-block-start: var(--ty-space-2);
+    border-block-start: 1px solid var(--ty-line-soft);
+  }
+
+  /* Narrow screens: the popover is a tray; presets become a chip row that scrolls. */
+  .ty-date-range-field__surface[data-presentation='tray'] .ty-date-range-field__presets {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+    padding-block-end: var(--ty-space-1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-date-range-field__surface {
+      animation-duration: 0s;
+      transition-duration: 0s;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-date-range-field__group {
+      border-color: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-date-range-field__trigger[data-focus-visible] {
+      outline: 2px solid Highlight;
+    }
+  }
+}
+
 /* ./components/drawer/Drawer.css */
 /* Drawer (spec: wave-1/drawer.md; design direction §2.4, §2.5, §2.7, §2.8). */
 @layer tympan.components {
@@ -14519,6 +14923,78 @@
   }
 }
 
+/* ./components/tooltip/Tooltip.css */
+/* Tooltip (spec: wave-5-general/tooltip.md; design direction §2.5, §2.7). */
+@layer tympan.components {
+  .ty-tooltip {
+    box-sizing: border-box;
+    max-inline-size: min(36ch, calc(100vw - 2 * var(--ty-space-4)));
+    padding-block: var(--ty-space-1) var(--ty-space-1);
+    padding-inline: var(--ty-space-2) var(--ty-space-3);
+    border: 1px solid var(--ty-line);
+    border-radius: var(--ty-radius-control);
+    background: var(--ty-surface-raised-solid);
+    color: var(--ty-ink);
+    font-family: var(--ty-font-sans);
+    font-size: var(--ty-font-size-meta);
+    line-height: var(--ty-font-line-height-meta);
+    box-shadow: var(--ty-shadow-floating);
+    z-index: var(--ty-z-popover);
+  }
+
+  /* Entrance and exit use opacity only (WCAG 1.4.13: hoverable, persistent). */
+  .ty-tooltip[data-entering] {
+    animation: ty-tooltip-fade var(--ty-dur-quick) var(--ty-ease);
+  }
+  .ty-tooltip[data-exiting] {
+    animation: ty-tooltip-fade var(--ty-dur-quick) var(--ty-ease-out) reverse;
+  }
+
+  @keyframes ty-tooltip-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  .ty-tooltip__content {
+    display: inline-block;
+  }
+
+  .ty-tooltip__arrow svg {
+    display: block;
+    fill: var(--ty-surface-raised-solid);
+    stroke: var(--ty-line);
+    stroke-width: 1px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ty-tooltip[data-entering],
+    .ty-tooltip[data-exiting] {
+      animation: none;
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    .ty-tooltip {
+      background: var(--ty-surface-raised-solid);
+      box-shadow: var(--ty-shadow-floating);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ty-tooltip {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+      forced-color-adjust: none;
+    }
+    .ty-tooltip__arrow svg {
+      fill: Canvas;
+      stroke: CanvasText;
+    }
+  }
+}
+
 /* ./groups/forms-a.css */
 /* Stylesheets of the "forms-a" group (imported by src/styles.css). */
 /* ../internal/forms-a/shared.css */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datatechsolutions/tympan",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Tympan: accessible React components (React 18.3 or 19) on React Aria Components, styled with --ty-* CSS custom properties in @layer tympan. The flow and provenance canvas (graph viewer, DAG editor, run inspection) ships as the @datatechsolutions/tympan/flow subpath. Generated avatars (DiceBear, CC0/MIT styles only) ship as the /avatars subpath and country and region flags as the /flags subpath.",
   "license": "FSL-1.1-ALv2",
   "author": "Natalia Mesquita",
@@ -154,7 +154,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^3.1.1",
-    "@datatechsolutions/tympan-tokens": "^0.3.1",
+    "@datatechsolutions/tympan-tokens": "^0.4.0",
     "@dicebear/core": "^9.4.3",
     "@internationalized/date": "^3.12.4",
     "@types/d3-array": "^3.2.2",