iryx-ui 0.11.0 → 0.13.0

package/theme.css

@@ -200,6 +200,46 @@
   --animate-dialog-in: dialog-in 150ms ease-out;
   --animate-dialog-out: dialog-out 150ms ease-in;
   --animate-toast-in: toast-in 150ms ease-out;
+  /*
+   * One easing for every drawer transition, enter/exit and drag-release alike,
+   * so a panel that is let go mid-swipe finishes the way it would have opened.
+   */
+  --iryx-drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-drawer-in-right: drawer-in-right 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-right: drawer-out-right 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-left: drawer-in-left 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-left: drawer-out-left 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-top: drawer-in-top 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-top: drawer-out-top 300ms var(--iryx-drawer-ease);
+  --animate-drawer-in-bottom: drawer-in-bottom 300ms var(--iryx-drawer-ease);
+  --animate-drawer-out-bottom: drawer-out-bottom 300ms var(--iryx-drawer-ease);
+  /*
+   * Collapsible unroll. Same curve as the drawer, under its own name: it
+   * decelerates hard at the end, so the panel settles instead of stopping.
+   * Closing is quicker than opening — a slow exit reads as lag.
+   */
+  --iryx-collapsible-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-collapsible-down: collapsible-down 240ms var(--iryx-collapsible-ease);
+  --animate-collapsible-up: collapsible-up 180ms var(--iryx-collapsible-ease);
+  /*
+   * The rows lift and fade as two animations, not one keyframe set, because
+   * they want different curves. On the shared emphasized ease the opacity is
+   * already at ~1 within a couple of frames — the fade is technically there and
+   * perceptually absent. Its own ease-out, held back briefly so the panel has
+   * started moving first, is what makes it read.
+   *
+   * The fade finishes well before the lift on purpose: the rows are legible for
+   * the back half of the unroll, so the motion settles rather than the content
+   * still arriving as it stops.
+   *
+   * `both` matters: the fade is delayed, and without it the rows would paint at
+   * full opacity for those first 40ms and then start fading in from visible.
+   */
+  --animate-collapsible-content-in:
+    collapsible-lift-in 260ms var(--iryx-collapsible-ease),
+    collapsible-fade-in 220ms 40ms ease-out both;
+  --animate-collapsible-content-out:
+    collapsible-fade-out 140ms ease-in both;
 }
 
 /* Indeterminate Progress: slide a short bar back and forth across the track. */
@@ -244,9 +284,304 @@
   }
 }
 
+/*
+ * Collapsible open/close.
+ *
+ * `height: auto` is not tweenable, so Reka measures the panel and publishes it
+ * as --reka-collapsible-content-height; these keyframes animate to that.
+ *
+ * The height animation has to own the element Reka sets the variable on, and
+ * that element must carry no margin, padding or border of its own — margin is
+ * not part of the animated height, so it would survive the close as a visible
+ * gap under a panel that is supposedly shut. The indent, rule and row spacing
+ * live on an inner wrapper instead.
+ */
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height);
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/*
+ * The rows lift into place while the panel unrolls, so they arrive under their
+ * own steam rather than being uncovered by a moving mask. This animates the
+ * independent `translate` property, not `transform`, so it cannot compose with
+ * a transform an app puts on the same element.
+ */
+@keyframes collapsible-lift-in {
+  from {
+    translate: 0 -0.5rem;
+  }
+}
+
+@keyframes collapsible-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes collapsible-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes toast-in {
   from {
     opacity: 0;
     transform: translateY(0.5rem);
   }
 }
+
+/*
+ * Drawer enter/exit, one pair per edge.
+ *
+ * These animate the independent `translate` property, NOT `transform` — the
+ * exact opposite of the dialog's constraint, and for the same underlying
+ * reason. Reka's drawer follows the finger by writing `transform` from
+ * `--drawer-swipe-movement-*` (see `.iryx-drawer` below), so a keyframe on
+ * `transform` would clobber the drag offset and the panel would refuse to
+ * move under the pointer. `translate` composes with it instead.
+ *
+ * The slide is the whole animation — fading a panel that is already moving
+ * reads as two effects fighting.
+ */
+@keyframes drawer-in-right {
+  from {
+    translate: 100% 0;
+  }
+}
+
+@keyframes drawer-out-right {
+  to {
+    translate: 100% 0;
+  }
+}
+
+@keyframes drawer-in-left {
+  from {
+    translate: -100% 0;
+  }
+}
+
+@keyframes drawer-out-left {
+  to {
+    translate: -100% 0;
+  }
+}
+
+@keyframes drawer-in-top {
+  from {
+    translate: 0 -100%;
+  }
+}
+
+@keyframes drawer-out-top {
+  to {
+    translate: 0 -100%;
+  }
+}
+
+@keyframes drawer-in-bottom {
+  from {
+    translate: 0 100%;
+  }
+}
+
+@keyframes drawer-out-bottom {
+  to {
+    translate: 0 100%;
+  }
+}
+
+/*
+ * Sidebar submenu indent.
+ *
+ * Two alignments have to hold at once, and both are derived from the parent
+ * row's icon column rather than chosen:
+ *
+ * - the rule sits on the centre of the parent's icon, so it reads as descending
+ *   from that row instead of floating between columns;
+ * - a child's label lands in the same column as its parent's label, so the
+ *   submenu reads as one list rather than a slightly shifted copy of one.
+ *
+ * Picked by hand these land a few pixels out, which is worse than either a
+ * clean alignment or an obvious indent — it just looks like a mistake. Doing
+ * it as arithmetic keeps the two in step if the row metrics ever change.
+ */
+@layer components {
+  .iryx-sidebar-submenu {
+    /* Mirrors the row: `size-4` icon, `gap-3` to the label, `px-2` inset. */
+    --iryx-sidebar-icon: --spacing(4);
+    --iryx-sidebar-gap: --spacing(3);
+    --iryx-sidebar-inset: --spacing(2);
+
+    margin-left: calc(var(--iryx-sidebar-inset) + var(--iryx-sidebar-icon) / 2);
+    /* The child row contributes its own `px-2`, so that comes back off here. */
+    padding-left: calc(
+      var(--iryx-sidebar-icon) / 2 + var(--iryx-sidebar-gap) - 1px -
+        var(--iryx-sidebar-inset)
+    );
+  }
+}
+
+/*
+ * Drawer drag plumbing.
+ *
+ * This is plain CSS rather than Tailwind utilities because it is variable
+ * arithmetic keyed on an attribute Reka sets at runtime — there is no class
+ * name to generate. Reka writes the live drag offset into
+ * `--drawer-swipe-movement-x/y` and the resting snap position into
+ * `--drawer-snap-point-offset`; both act on the swipe axis, so they add.
+ *
+ * `[data-swiping]` kills the transition while a finger is down, or the panel
+ * lags behind the pointer by a whole easing curve.
+ */
+@layer components {
+  .iryx-drawer {
+    transition: transform 300ms var(--iryx-drawer-ease);
+  }
+
+  .iryx-drawer[data-swipe-direction="up"],
+  .iryx-drawer[data-swipe-direction="down"] {
+    transform: translate3d(
+      0,
+      calc(var(--drawer-swipe-movement-y, 0px) + var(--drawer-snap-point-offset, 0px)),
+      0
+    );
+  }
+
+  .iryx-drawer[data-swipe-direction="left"],
+  .iryx-drawer[data-swipe-direction="right"] {
+    transform: translate3d(
+      calc(var(--drawer-swipe-movement-x, 0px) + var(--drawer-snap-point-offset, 0px)),
+      0,
+      0
+    );
+  }
+
+  .iryx-drawer[data-swiping] {
+    transition-duration: 0ms;
+  }
+}
+
+
+/*
+ * `ITable`'s refresh indicator — an indeterminate bar running along the rule
+ * between the header and the first row, which is where a table conventionally
+ * reports progress. Shown on every load after the first; the initial load has
+ * no rows yet and uses skeletons instead.
+ *
+ * Plain CSS rather than utilities for the same reason as the drawer's drag
+ * plumbing: it is a keyframed `background-position` on a pseudo-element, and
+ * there is no class name for Tailwind to generate.
+ *
+ * `position: relative` on `<thead>` is what anchors the bar to the header's own
+ * box, so it lands on the divider at any header height and follows the table
+ * when it scrolls sideways.
+ */
+@layer components {
+  .iryx-table-loading {
+    position: relative;
+  }
+
+  .iryx-table-loading::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0;
+    /* Sits on the header's 1px bottom rule rather than below it. */
+    bottom: -1px;
+    height: 2px;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--iryx-primary) 50%,
+      transparent 100%
+    );
+    background-repeat: no-repeat;
+    background-size: 40% 100%;
+    animation: iryx-table-loading 1.3s ease-in-out infinite;
+    pointer-events: none;
+  }
+
+  @keyframes iryx-table-loading {
+    from {
+      background-position: -40% 0;
+    }
+    to {
+      background-position: 140% 0;
+    }
+  }
+
+  /*
+   * `animation: none` is safe here, unlike on the dialog and drawer: nothing
+   * waits on `animationend`, so removing the animation cannot strand a Presence
+   * unmount. A steady rule still reports "busy" without the motion.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .iryx-table-loading::after {
+      animation: none !important;
+      background-image: none;
+      background-color: color-mix(in oklab, var(--iryx-primary) 50%, transparent);
+    }
+  }
+}
+
+/*
+ * Reduced motion.
+ *
+ * A reader who has asked their OS to reduce motion has asked for it once, for
+ * everything — so this is a blanket rule rather than a per-component prop.
+ * It lives in `theme.css`, which an app opts into by importing, and it takes
+ * effect only under that explicit preference.
+ *
+ * **Near-zero durations, never `animation: none`.** Reka's `Presence` unmounts
+ * a dialog, drawer, popover or toast when its exit animation raises
+ * `animationend`. Remove the animation outright and that event never fires, so
+ * the element stays mounted forever and the overlay can never be closed twice.
+ * `0.01ms` finishes imperceptibly *and* still fires the event.
+ *
+ * `animation-iteration-count: 1` stops an infinite loop from repainting
+ * forever at 0.01ms a cycle. The two loaders that rely on looping are handled
+ * below, because "run once instantly" would park them where their last
+ * keyframe leaves them — which for the indeterminate progress bar is off the
+ * end of its own track.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-delay: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+    scroll-behavior: auto !important;
+  }
+
+  /*
+   * The indeterminate progress bar travels from -100% to 300%, so running it
+   * once and stopping leaves the indicator outside the track and the component
+   * reads as empty. Parked at the start instead: a short static bar still says
+   * "working, length unknown", which is the whole message.
+   *
+   * Safe to remove outright — unlike the overlays above, nothing is waiting on
+   * `animationend` here.
+   */
+  .iryx-progress-indeterminate {
+    animation: none !important;
+    transform: none !important;
+  }
+}