@sesamehr/react-design-system 2.0.0-beta.20 → 2.0.0-beta.21

package/dist/Navigation/ToggleTabs/useToggleTabsPill.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+/**
+ * Moves the selected pill over whichever tab is active.
+ *
+ * The selected state used to be a background on the trigger itself, which is
+ * why it could not travel: two elements cannot transition into one another. So
+ * the pill is a single element in the track, taken out of flow, and what moves
+ * is its geometry — published as custom properties on the track
+ * (`--toggle-tabs-pill-x/y/width/height`) for the stylesheet to spend.
+ *
+ * The handoff is the point. Nothing here decides how the pill is drawn: no
+ * `transform` string, no radius, no colour, no orientation branch. This writes
+ * four numbers and the component's own rule composes them, which keeps a
+ * measurement out of the stylesheet's job and the stylesheet's job out of here
+ * — and means the vertical orientation needs no code, only the `y` that is
+ * already being written.
+ *
+ * Both axes always, for that reason: `data-orientation="vertical"` turns the
+ * track into a column and the pill then travels down it, measured by exactly
+ * the same two rectangles.
+ *
+ * The whole of it runs off observers rather than off the render, which is what
+ * lets it be a single effect with no dependency on the active value: a tab
+ * changing, a tab arriving and a tab being resized are all DOM events by the
+ * time they matter here.
+ */
+export declare function useToggleTabsPill(track: RefObject<HTMLElement | null>): void;