@redseed/redseed-ui-tailwindcss 7.53.0 → 7.55.0

package/components/form_field_date_range.css

@@ -0,0 +1,177 @@
+.rsui-form-field-date-range {
+    @apply relative;
+}
+
+.rsui-form-field-date-range__group {
+    @apply relative flex flex-nowrap overflow-hidden;
+    @apply text-base transition;
+    @apply w-full border rounded-lg ring-0;
+    @apply bg-background-primary placeholder-text-secondary border-border-primary;
+    @apply has-[:focus]:border-border-primary;
+    @apply has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-border-primary has-[:focus-visible]:ring-offset-2;
+    @apply has-[:disabled]:text-text-disabled has-[:disabled]:bg-background-disabled has-[:disabled]:border-border-disabled has-[:disabled]:ring-0;
+}
+
+/*
+ * The trigger is a button, not an input, so `:user-invalid` — which the other
+ * fields lean on — never fires here. The error border is driven by the same
+ * `aria-invalid` the control already sets for assistive tech, so the visual and
+ * the announced state cannot drift apart.
+ */
+.rsui-form-field-date-range__group:has([aria-invalid='true']) {
+    @apply border-border-error ring-0;
+}
+
+.rsui-form-field-date-range__trigger {
+    @apply flex-1 flex items-center text-left cursor-pointer;
+    @apply text-base text-text-primary transition py-3 px-3 xs:px-4 pr-12 outline-hidden focus:outline-hidden;
+    @apply bg-background-primary;
+    @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-not-allowed;
+}
+
+.rsui-form-field-date-range__value {
+    @apply truncate;
+}
+
+.rsui-form-field-date-range__placeholder {
+    @apply truncate text-text-secondary select-none;
+}
+
+.rsui-form-field-date-range__icon {
+    @apply absolute top-0 right-3 bottom-0 flex items-center justify-center;
+    @apply text-text-primary h-full w-8 pointer-events-none;
+}
+
+.rsui-form-field-date-range__icon svg {
+    @apply size-5;
+}
+
+.rsui-form-field-date-range__popover {
+    @apply hidden absolute top-0 z-50;
+    @apply bg-background-primary p-4 mt-2 rounded-lg shadow-full-light;
+    @apply flex flex-col sm:flex-row gap-4;
+    @apply max-h-[80vh] overflow-y-auto;
+}
+
+.rsui-form-field-date-range__popover--open {
+    @apply flex;
+}
+
+/* The preset rail sits inside the popover (MUI's shortcuts placement) rather
+   than above the field, so the control stays one control. */
+.rsui-form-field-date-range__presets {
+    @apply flex flex-row sm:flex-col flex-wrap gap-1 shrink-0;
+    @apply sm:border-r sm:border-border-secondary sm:pr-4;
+}
+
+.rsui-form-field-date-range__preset {
+    @apply text-left text-sm whitespace-nowrap px-3 py-2 rounded-lg cursor-pointer transition;
+    @apply text-text-primary hover:bg-background-secondary;
+    @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-inset outline-hidden;
+    @apply disabled:text-text-disabled disabled:hover:bg-transparent disabled:cursor-not-allowed;
+}
+
+.rsui-form-field-date-range__preset--selected {
+    @apply bg-background-secondary font-semibold;
+}
+
+.rsui-form-field-date-range__calendars {
+    @apply relative flex flex-col gap-2;
+}
+
+.rsui-form-field-date-range__nav {
+    @apply absolute inset-x-0 top-0 flex items-center justify-between pointer-events-none;
+}
+
+.rsui-form-field-date-range__nav-button {
+    @apply flex items-center justify-center size-8 rounded-lg cursor-pointer pointer-events-auto transition;
+    @apply text-text-primary hover:bg-background-secondary;
+    @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-inset outline-hidden;
+}
+
+.rsui-form-field-date-range__nav-button svg {
+    @apply size-5;
+}
+
+.rsui-form-field-date-range__months {
+    @apply flex flex-col sm:flex-row gap-6;
+}
+
+.rsui-form-field-date-range__month {
+    @apply flex flex-col gap-2;
+}
+
+.rsui-form-field-date-range__caption {
+    @apply text-sm font-semibold text-center text-text-primary h-8 flex items-center justify-center;
+}
+
+.rsui-form-field-date-range__table {
+    @apply border-collapse;
+}
+
+.rsui-form-field-date-range__weekday {
+    @apply size-9 text-xs font-normal text-text-secondary;
+}
+
+.rsui-form-field-date-range__cell {
+    @apply p-0;
+}
+
+.rsui-form-field-date-range__day {
+    @apply size-9 text-sm rounded-lg cursor-pointer transition;
+    @apply text-text-primary hover:bg-background-secondary;
+    @apply focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:ring-inset outline-hidden;
+}
+
+/*
+ * Which days sit inside the window is this component's most important visual
+ * affordance, so the fill is Brand-200 — about 1.56:1 against the popover's
+ * white, against 1.14:1 for background-brand-invert (Brand-50) and 1.07:1 for
+ * background-brand (Brand-25), both of which read as no fill at all.
+ *
+ * Brand-200 is deliberately the stopping point. Nothing in the ramp reaches the
+ * 3:1 that WCAG 1.4.11 asks of a component state until Brand-400 (~3.47:1),
+ * which is dark enough to need light text and would make an in-range day look
+ * almost like an endpoint — losing the distinction the fill exists to draw. So
+ * this is a legibility improvement rather than a compliance fix, chosen with
+ * that trade-off understood.
+ *
+ * The ramp step rather than a semantic token because none of the three
+ * background-brand-* tokens maps to Brand-200; if in-range fills turn up in
+ * other components, this wants promoting to a token of its own.
+ *
+ * Day numerals stay text-text-primary (Grey-900, #171c26) and clear AA on this
+ * fill comfortably. The endpoints are unaffected: white on Brand-500 at 6.4:1.
+ */
+.rsui-form-field-date-range__day--in-range {
+    @apply bg-brand-200 rounded-none;
+}
+
+.rsui-form-field-date-range__day--range-start,
+.rsui-form-field-date-range__day--range-end {
+    @apply bg-background-brand-contrast text-text-on-color font-semibold;
+    @apply hover:bg-background-brand-contrast;
+}
+
+/*
+ * The day the presets resolve against — "today" as the server sees it.
+ *
+ * Marked with an underline rather than a ring. It previously used ring-1 in the
+ * same colour as the focus ring's ring-2, so the only thing separating "this
+ * day has keyboard focus" from "this is the reference date" was one pixel of
+ * ring width — on a widget whose entire interaction model is a roving focus.
+ * A different SHAPE keeps the two readable at a glance, and readable at all for
+ * anyone who cannot compare two greys.
+ */
+.rsui-form-field-date-range__day--reference {
+    @apply font-semibold underline decoration-2 underline-offset-4;
+}
+
+.rsui-form-field-date-range__day--unavailable {
+    @apply text-text-disabled cursor-not-allowed;
+    @apply hover:bg-transparent;
+}
+
+.rsui-form-field-date-range__sr-only {
+    @apply sr-only;
+}

package/components/stage_dial.css

@@ -0,0 +1,60 @@
+.rsui-stage-dial {
+    /* Accent falls back to a neutral token when the consumer supplies no color. */
+    --rsui-stage-dial-accent: var(--color-background-secondary-contrast);
+
+    @apply relative m-0 p-0 shrink-0 before:hidden after:hidden;
+}
+
+/* Size ramp — mirrors ProgressCircle's sm/md/lg, scaled up because the dial
+   carries centre content inside the ring. The stroke is in viewBox units, so it
+   scales with the box and needs no per-size rule. */
+.rsui-stage-dial--sm {
+    @apply size-16 text-xs;
+}
+
+.rsui-stage-dial--md {
+    @apply size-24 text-sm;
+}
+
+.rsui-stage-dial--lg {
+    @apply size-32 text-base;
+}
+
+.rsui-stage-dial__svg {
+    @apply w-full h-full;
+}
+
+/* The unfilled ring behind every stage, so the full arc reads as the scale even
+   when only the first stage is reached. */
+.rsui-stage-dial__track {
+    @apply fill-none stroke-border-primary;
+
+    stroke-width: 9;
+    stroke-linecap: round;
+}
+
+.rsui-stage-dial__fill {
+    @apply fill-none;
+
+    stroke: var(--rsui-stage-dial-accent);
+    stroke-width: 9;
+    stroke-linecap: round;
+}
+
+/* Opt-in draw-in. The per-segment delay is set inline by the component, which
+   is what staggers the segments. */
+.rsui-stage-dial--animate .rsui-stage-dial__fill {
+    transition: stroke-dasharray 0.75s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* The ring's inner edge sits at 12.5% of the box (radius 42 less half the
+   9-unit stroke, of 50), so a 15% inset keeps centre content clear of it. */
+.rsui-stage-dial__content {
+    @apply absolute inset-[15%] flex items-center justify-center text-center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .rsui-stage-dial--animate .rsui-stage-dial__fill {
+        transition: none;
+    }
+}

package/components.css

@@ -37,6 +37,7 @@ Please be careful when adding new components and updating the order.
 @import './components/form_field_slot.css';
 @import './components/form_field_checkbox.css';
 @import './components/form_field_combobox.css';
+@import './components/form_field_date_range.css';
 @import './components/form_field_password.css';
 @import './components/form_field_radio_group.css';
 @import './components/form_field_search.css';
@@ -97,6 +98,7 @@ Please be careful when adding new components and updating the order.
 @import './components/skeleton.css';
 @import './components/single_column_layout.css';
 @import './components/sorting.css';
+@import './components/stage_dial.css';
 @import './components/switcher.css';
 @import './components/switcher_item.css';
 @import './components/tab_slider.css';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.53.0",
+    "version": "7.55.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",