@xenosystem/elements-react 0.0.1

package/src/forms/RadioGroup.css

@@ -0,0 +1,115 @@
+/*
+ * `<RadioGroup>` / `<RadioRow>` — SQUARE markers (radius-xs) with a smaller inner square, never circles.
+ * CSS-first: paint is keyed off `data-selection` (off|on) and `data-availability`; layout off
+ * `data-orientation`. Monochrome shell — only theme tokens, no literal colours.
+ */
+.xeno-radiogroup {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.xeno-radiogroup[data-orientation='horizontal'] {
+  flex-direction: row;
+  gap: 12px;
+}
+
+.xeno-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0;
+  padding: 6px 8px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--xeno-radius-md);
+  color: var(--xeno-text);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  text-align: left;
+  cursor: pointer;
+  user-select: none;
+  transition: background var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-radio:hover:not(:disabled) {
+  background: var(--xeno-hover);
+}
+
+.xeno-radio-marker {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  background: var(--xeno-canvas);
+  border: 1px solid var(--xeno-border);
+  border-radius: var(--xeno-radius-xs);
+  transition: border-color var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-radio:hover:not(:disabled) .xeno-radio-marker {
+  border-color: var(--xeno-muted);
+}
+.xeno-radio[data-selection='on'] .xeno-radio-marker {
+  border-color: var(--xeno-text);
+}
+
+/* The mark is a SQUARE, and at 8px it has to be drawn like one. It carried `--xeno-radius-xs` (3px),
+   which is 37% of its own width — enough rounding that at this size it reads as a dot rather than as a
+   square. `--xeno-radius-hair` puts it at 19%, in the same family as the switch knob's 21%. */
+.xeno-radio-dot {
+  width: 8px;
+  height: 8px;
+  background: var(--xeno-text);
+  border-radius: var(--xeno-radius-hair, 1.5px);
+  scale: 0;
+  opacity: 0;
+  transition:
+    scale var(--xeno-dur) var(--xeno-ease),
+    opacity var(--xeno-dur) var(--xeno-ease);
+}
+.xeno-radio[data-selection='on'] .xeno-radio-dot {
+  scale: 1;
+  opacity: 1;
+}
+/* Choosing STAMPS: the square overshoots and settles, so the choice lands rather than fades in. Only on
+   the way in — letting go is quiet, and the transition above still handles it.
+   Armed at the group, which is safe HERE and would not be on a multi-select: exactly one radio can be
+   on, so the only one whose rule starts matching when the group arms is the one that just changed. */
+.xeno-radiogroup[data-motion='ready'] .xeno-radio[data-selection='on'] .xeno-radio-dot {
+  animation: xeno-radio-stamp 260ms var(--xeno-ease-overshoot, cubic-bezier(0.34, 1.4, 0.5, 1));
+}
+@keyframes xeno-radio-stamp {
+  0% { scale: 0; opacity: 0; }
+  45% { scale: 1.22; opacity: 1; }
+  100% { scale: 1; opacity: 1; }
+}
+
+.xeno-radio-label {
+  color: var(--xeno-text);
+}
+
+.xeno-radio:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--xeno-canvas),
+    0 0 0 4px var(--xeno-border);
+}
+
+.xeno-radio:disabled,
+.xeno-radio[data-availability='disabled'] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .xeno-radio,
+  .xeno-radio-marker,
+  .xeno-radio-dot {
+    transition: none;
+  }
+  /* The mark still appears — it just does not stamp. */
+  .xeno-radio-dot {
+    animation: none !important;
+  }
+}

package/src/goo.css

@@ -0,0 +1,97 @@
+/*
+ * `goo.css` — the travelling hover pill, as a primitive rather than a menu feature.
+ *
+ * ONE filled row that travels to whatever you are pointing at, instead of each row painting its own
+ * background. A fill that appears on the new row and vanishes from the old one is two events with no
+ * journey between them, and it never says where it came from.
+ *
+ * This lives outside `menu.css` because the behaviour is not about menus. Any vertical list of rows can
+ * host it — a menu, a command palette, a product's own hand-rolled dropdown — and the alternative was
+ * every one of those copying the same twenty lines. Pair it with `useGooPill()`, which supplies the two
+ * numbers a stylesheet cannot work out on its own: where the row starts and how tall it is.
+ *
+ * The sidebar keeps its own version, and that is not duplication: a sidebar OWNS its rows (it maps an
+ * `items` array, so the offset is `index x stride` and pure CSS can do it). A host with arbitrary
+ * children cannot assume a stride, so it measures. Same effect, two honest implementations.
+ */
+.xeno-goo-host {
+  /* How far the pill misbehaves on the way. Restrained on purpose — enough deformation to read as
+     weight, not enough to look like jelly on something you use constantly. */
+  --xeno-goo-stretch: 0.14;
+  --xeno-goo-squeeze: 0.06;
+  --xeno-goo-dur: 220ms;
+  --xeno-goo-pill-ease: cubic-bezier(0.34, 1.12, 0.5, 1);
+  isolation: isolate;
+}
+
+/* The pill is positioned against the host, so the host has to be a containing block — but claiming
+   `position: relative` outright would be this stylesheet overruling the host's own layout. A menu panel
+   is `absolute` (it is anchored to a trigger) and a product's panel is Tailwind's `.absolute`; both are
+   one class, so whoever loads last would win, and a panel silently dropped back into flow is a much
+   worse bug than a pill in the wrong place.
+   `:where()` is specificity ZERO: it supplies `relative` only where nothing else has an opinion, and
+   loses to every real position the host declares. `absolute`, `fixed` and `sticky` are all containing
+   blocks too, so losing is the correct outcome, not a fallback. */
+:where(.xeno-goo-host) {
+  position: relative;
+}
+
+/* `--xeno-goo-inset` defaults to the 4px a padded list gives itself, so the pill lines up with the rows
+   rather than with the panel edge. Fill and radius are tokens so a product can hand it its own ink. */
+.xeno-goo-pill {
+  position: absolute;
+  z-index: -1;
+  left: var(--xeno-goo-inset, 4px);
+  right: var(--xeno-goo-inset, 4px);
+  top: var(--xeno-goo-y, 0px);
+  height: var(--xeno-goo-h, 0px);
+  background: var(--xeno-goo-fill, var(--xeno-control));
+  border-radius: var(--xeno-goo-radius, var(--xeno-radius-sm));
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    top var(--xeno-goo-dur) var(--xeno-goo-pill-ease),
+    height var(--xeno-goo-dur) var(--xeno-goo-pill-ease),
+    opacity var(--xeno-dur, 0.14s) ease;
+}
+.xeno-goo-host[data-goo='on'] > .xeno-goo-pill {
+  opacity: 1;
+}
+
+/* The stretch, keyed off the row index so re-pointing restarts it — a browser will not replay an
+   animation whose name did not change. Ten rows; past that the pill still travels, it just stops
+   stretching, which is a fair trade for a list nobody scans by deformation anyway. */
+.xeno-goo-host[data-goo='on'][data-goo-index='0'] > .xeno-goo-pill { animation: xeno-goo-pill-0 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='1'] > .xeno-goo-pill { animation: xeno-goo-pill-1 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='2'] > .xeno-goo-pill { animation: xeno-goo-pill-2 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='3'] > .xeno-goo-pill { animation: xeno-goo-pill-3 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='4'] > .xeno-goo-pill { animation: xeno-goo-pill-4 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='5'] > .xeno-goo-pill { animation: xeno-goo-pill-5 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='6'] > .xeno-goo-pill { animation: xeno-goo-pill-6 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='7'] > .xeno-goo-pill { animation: xeno-goo-pill-7 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='8'] > .xeno-goo-pill { animation: xeno-goo-pill-8 var(--xeno-goo-dur) 1; }
+.xeno-goo-host[data-goo='on'][data-goo-index='9'] > .xeno-goo-pill { animation: xeno-goo-pill-9 var(--xeno-goo-dur) 1; }
+@keyframes xeno-goo-pill-0 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-1 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-2 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-3 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-4 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-5 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-6 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-7 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-8 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+@keyframes xeno-goo-pill-9 { 0% { scale: 1 1; } 50% { scale: calc(1 - var(--xeno-goo-squeeze)) calc(1 + var(--xeno-goo-stretch)); } 100% { scale: 1 1; } }
+
+/* Nothing here raises the rows, on purpose. A negative `z-index` child paints below its parent's in-flow
+   content, so the rows are already over the pill without a single declaration — and a blanket
+   `position: relative` on the host's children would quietly re-anchor any absolutely-positioned
+   descendant (a submenu, a tooltip) to the wrong box. The one thing a host DOES have to give up is rows
+   that paint their own hover background: two filled surfaces read as two highlights. */
+
+/* Motion off: the pill still marks the row, it just stops travelling and deforming to get there. */
+@media (prefers-reduced-motion: reduce) {
+  .xeno-goo-pill {
+    transition: opacity var(--xeno-dur, 0.14s) ease;
+    animation: none !important;
+  }
+}