@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/segmented-control/SegmentedControl.js

@@ -0,0 +1,269 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import "./SegmentedControl.css";
+import "./segmented-control-impl.css";
+import { segmentedControlItemParts } from "../segmented-control-item/SegmentedControlItem.types.js";
+import { segmentedControlDefaults, segmentedControlParts, } from "./SegmentedControl.types.js";
+/**
+ * How far each key moves along the row, or where it lands outright.
+ *
+ * Both axes answer, and the row is horizontal. A vertical pair on a horizontal control
+ * costs nothing and spares the reader a guess about which keys this one listens for —
+ * the alternative is a control that ignores half the arrows for no reason it can explain.
+ */
+const KEYS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+    Home: "first",
+    End: "last",
+};
+/**
+ * Both handlers, the segment's own first.
+ *
+ * `cloneElement` replaces rather than merges, so a segment already reporting its own
+ * presses would silently stop — and that is the handler a page is most likely to have
+ * written, since it is how they learn which segment was pressed.
+ */
+function chain(theirs, ours) {
+    if (theirs === undefined)
+        return ours;
+    return (value) => {
+        theirs(value);
+        ours(value);
+    };
+}
+/**
+ * A row of mutually exclusive values, and the three things about them that belong to the
+ * row rather than to any one segment: which is chosen, how tall they all are, and
+ * whether the choice can be made at all.
+ *
+ * It measures one thing — where the chosen segment sits — so the pill can travel to it.
+ * That is the whole reason the pill is a single element this component positions rather
+ * than a ground each segment paints: two grounds cross-fading always reads as two
+ * grounds, and no selector can answer where a sibling is. No container query reaches it
+ * either, the question being about a sibling's position rather than a box's own width.
+ *
+ * The measurement is deliberately small: one element per change, read for its offset and
+ * its size. Not the whole row, not on scroll, not per frame.
+ *
+ * It measures the segment itself rather than a wrapper around it, which is where this
+ * parts company with Product's. `offsetLeft` is read from the nearest positioned
+ * ancestor, and the segment's is this element — the groove is `position: relative` and
+ * the segment, though positioned itself, has nothing positioned between the two. Product
+ * wraps each segment in a box of its own because its own layout decisions live there;
+ * here the row divides itself, so the wrapper would be a part with nothing to bind and
+ * one more element between the pill and the thing it is measuring.
+ *
+ * What it does own is the radio pattern, which stops being optional the moment the
+ * segments carry `role="radio"`. One tab stop for the whole row, the arrow keys inside
+ * it, and selection following focus — because there is always exactly one answer, so
+ * moving focus without changing the answer would leave the reader looking at one segment
+ * while another is in force.
+ *
+ * A `value` naming no segment chooses none of them. Falling back to the first would tell
+ * the reader a value is in force that the page never set, and hide whatever caused the
+ * mismatch — a stale piece of state, a segment that has not loaded yet.
+ */
+export function SegmentedControl({ layout = segmentedControlDefaults.layout, size = segmentedControlDefaults.size, disabled = segmentedControlDefaults.disabled, 
+// No fallback, because there is no default to fall back to. The contract requires it:
+// the question the segments are answers to is the one thing nothing else can supply.
+label, value, onChange, children, ...rest }) {
+    const rootRef = useRef(null);
+    const segments = Children.toArray(children).filter((isValidElement));
+    /**
+     * Whether the consumer owns which value is in force.
+     *
+     * Naming a value is the whole of it — there is no second prop to remember and no mode
+     * to set.
+     */
+    const controlled = value !== undefined;
+    const seeded = segments.findIndex((segment) => segment.props.selected === true);
+    /**
+     * Which segment the reader has chosen, or null while they have chosen none.
+     *
+     * Unread while controlled. The row does not keep a second opinion alongside the
+     * consumer's: a press updates their state, their state comes back as `value`, and a
+     * row holding its own answer as well is how the two come to disagree.
+     */
+    const [picked, setPicked] = useState(null);
+    /**
+     * The seed this row has already taken, so a new one can be told from the old.
+     *
+     * `picked ?? seeded` alone meant the reader's first press won forever: after it, a
+     * consumer moving `selected` was ignored for the life of the component. Compared
+     * during render rather than in an effect, which is React's own answer for state
+     * derived from props — an effect would paint one frame of the stale segment first, and
+     * that frame is the bug in miniature.
+     */
+    const [seenSeed, setSeenSeed] = useState(seeded);
+    if (seeded !== seenSeed) {
+        setSeenSeed(seeded);
+        setPicked(null);
+    }
+    const named = segments.findIndex((segment) => segment.props.value === value);
+    const active = controlled
+        ? named === -1
+            ? null
+            : named
+        : (seeded === seenSeed ? picked : null) ?? (seeded === -1 ? null : seeded);
+    /**
+     * Where the tab stop sits.
+     *
+     * The chosen segment, or the first when nothing is chosen — which is the radiogroup
+     * pattern, and the reason it matters is that -1 on every segment would make the whole
+     * row unreachable by keyboard the moment a `value` named nothing.
+     */
+    const stop = active ?? 0;
+    /**
+     * Where the pill is, or null when nothing is chosen and there is nothing to mark.
+     *
+     * Held as state rather than written to the DOM directly, so the pill is positioned by
+     * a render like everything else and React is never surprised by an attribute it did
+     * not write.
+     */
+    const [pill, setPill] = useState(null);
+    const measure = useCallback(() => {
+        const root = rootRef.current;
+        if (root === null)
+            return;
+        if (active === null) {
+            setPill(null);
+            return;
+        }
+        /*
+          Queried by class rather than indexed into the children: the pill is a child of this
+          element too, so the nth child and the nth segment stopped being the same thing the
+          moment it arrived.
+    
+          Read off the segment's own generated constant rather than typed out here — the
+          class belongs to another component, and a literal would make this measurement
+          depend on a name nothing checks: rename the part and the pill stops working with
+          every gate still green.
+        */
+        const box = root.querySelectorAll(`:scope > .${segmentedControlItemParts.root}`)[active];
+        if (box === undefined) {
+            setPill(null);
+            return;
+        }
+        setPill({
+            x: box.offsetLeft,
+            y: box.offsetTop,
+            w: box.offsetWidth,
+            h: box.offsetHeight,
+        });
+    }, [active]);
+    // Layout rather than a plain effect: between the two the pill would be painted at its
+    // previous place, which is a frame of it sitting under the wrong word.
+    useLayoutEffect(measure, [measure, segments.length, size, layout]);
+    /*
+      The row changing shape moves the segment underneath the pill.
+  
+      Absent where there is no ResizeObserver rather than fatal — the pill stays where the
+      last measurement put it, which is correct until something resizes and is a mark in
+      the right place either way at the moment it is drawn. jsdom is the environment that
+      asks: the generated behaviour test runs there.
+    */
+    useEffect(() => {
+        const root = rootRef.current;
+        if (root === null)
+            return;
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => measure());
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [measure]);
+    /**
+     * An arrow key chooses the segment it lands on, by the same route a press does.
+     *
+     * Focused and then clicked rather than notified through a channel of this component's
+     * own. The segment's `onSelect` is how a page hears about a press, and giving the
+     * keyboard a second route would mean two ways to hear about one event — with the
+     * keyboard one silently missing from every consumer who only wired up the first.
+     *
+     * The focus moves as well as the selection. A focus left behind on the old segment
+     * would put the ring on one word and the choice on another, and the next arrow key
+     * would then step from the wrong place.
+     */
+    const onKeyDown = (event) => {
+        // A closed row moves nothing. The reader still reaches it and still hears why.
+        if (disabled)
+            return;
+        const step = KEYS[event.key];
+        if (step === undefined)
+            return;
+        if (segments.length === 0)
+            return;
+        // Before anything moves: the arrows would otherwise scroll the page, and Home and
+        // End would jump to the top and bottom of it, which is a long way from a row of three.
+        event.preventDefault();
+        /*
+          Every segment the reader can actually land on. A barred one is stepped over rather
+          than focused, and that is not a courtesy: selection follows focus here, so focusing
+          a segment whose press is refused would leave the ring on one word and the answer on
+          another — the one thing this pattern may not do. It also keeps the forbidden pair
+          out of reach, since the only way to select is to land on it.
+        */
+        const reachable = segments
+            .map((segment, index) => ({ segment, index }))
+            .filter(({ segment }) => segment.props.disabled !== true)
+            .map(({ index }) => index);
+        // Every option barred. Nothing to move to, and no row for the reader to be wrong about.
+        if (reachable.length === 0)
+            return;
+        const here = reachable.indexOf(stop);
+        const next = step === "first"
+            ? reachable[0]
+            : step === "last"
+                ? reachable[reachable.length - 1]
+                : here === -1
+                    ? // The tab stop is itself barred, which a consumer can arrange by disabling
+                        // a segment after it was chosen. Land on the first thing that answers.
+                        reachable[0]
+                    : reachable[(here + step + reachable.length) % reachable.length];
+        if (next === undefined)
+            return;
+        const target = rootRef.current?.querySelectorAll(`.${segmentedControlItemParts.root}`)[next];
+        target?.focus();
+        target?.click();
+    };
+    return (_jsxs("div", { ...rest, ref: rootRef, className: segmentedControlParts.root, role: "radiogroup", "aria-label": label, "aria-disabled": disabled ? true : undefined, "data-layout": layout, "data-size": size, "data-disabled": String(disabled), onKeyDown: onKeyDown, children: [_jsx("span", { className: segmentedControlParts.indicator, hidden: pill === null, style: pill === null
+                    ? undefined
+                    : {
+                        blockSize: `${pill.h}px`,
+                        inlineSize: `${pill.w}px`,
+                        translate: `${pill.x}px ${pill.y}px`,
+                    } }), segments.map((segment, index) => cloneElement(segment, {
+                // Both are the row's to decide, and both overwrite whatever the segment was
+                // given: one chosen value, one height. Availability is the segment's own — the
+                // row has no disabled to hand down, because its own closes the question rather
+                // than any one answer.
+                size,
+                selected: index === active,
+                // One stop for the whole row. Every segment stays findable — the arrow keys
+                // reach them — and a reader tabs into the question rather than through the
+                // answers.
+                tabIndex: index === stop ? 0 : -1,
+                /*
+                  The segment's own handler runs either way: it is how a page learns what was
+                  chosen. The row records the choice only when nobody else is holding it — a
+                  controlled row that also moved its own copy would have two answers to one
+                  question and show the stale one for a frame.
+      
+                  Suppressed entirely while the row is closed, rather than by handing each
+                  segment a `disabled` it would then carry into the chosen one — a pair the
+                  item forbids. `cloneElement` replaces rather than merges, so undefined takes
+                  the consumer's handler with it, which is the point: a closed row runs nothing.
+                */
+                onSelect: disabled
+                    ? undefined
+                    : chain(segment.props.onSelect, (pressed) => {
+                        if (!controlled)
+                            setPicked(index);
+                        onChange?.(pressed);
+                    }),
+            }))] }));
+}

package/dist/components/core/segmented-control/SegmentedControl.types.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SegmentedControlOwnProps {
+    /**
+     * `hug` — Every segment takes the width of its own words and the row takes the total. The default, and what suits a control sharing a line with something else — beside a heading, above a card, at the end of a toolbar. The reader sees labels of unequal length, which is how words look
+     * `fill` — The segments split the container into equal shares and the row stretches across it. For a control as wide as whatever it heads — a period switch above a pricing table — where the segments should read as equals of matching weight rather than as a collection of names
+     */
+    layout?: 'hug' | 'fill';
+    /**
+     * `sm` — A control seated in something already dense — a filter row, a picker in a navigation bar. Desktop only: below what a finger reliably hits
+     * `md` — The default. Sized to a medium control, so the row lines up with the fields and buttons next to it
+     * `lg` — A choice in a hero or a conversion band, where the control is the point of the section rather than an adjustment within it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** The question cannot be answered yet — a period switch above prices that have not loaded, a plan picker before an account is chosen. The whole groove dims as one object and the row stops answering the pointer and the arrow keys */
+    disabled?: boolean;
+    /** Always — a radiogroup with no name is announced as a set of choices with nothing said about what they are choices of. Name the question rather than the act: 'Billing period', not 'Choose a billing period' */
+    label: string;
+    /** The page is holding which segment is in force, which is the ordinary case here — the choice drives a price, a figure or a card rendered beside the control, so the page already has the answer. Passing it makes the row controlled: it shows what it is told and reports presses through onChange.
+  
+  Leave it off and the row holds its own answer, seeded from whichever segment arrived selected. That suits a control whose effect is entirely local. */
+    value?: string;
+    /** Whenever value is — together they are how a page holds the choice. It is called with the chosen segment's value after that segment's own onSelect, so a segment that reports its own presses keeps doing so inside a row */
+    onChange?: (value: string) => void;
+    /** Allowed: SegmentedControlItem */
+    children: ReactNode;
+}
+export type SegmentedControlProps = SegmentedControlOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'layout' | 'size' | 'disabled' | 'label' | 'value' | 'onChange'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const segmentedControlParts: {
+    readonly root: "dds-segmentedcontrol";
+    readonly indicator: "dds-segmentedcontrol__indicator";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const segmentedControlDefaults: {
+    readonly layout: "hug";
+    readonly size: "md";
+    readonly disabled: false;
+};

package/dist/components/core/segmented-control/SegmentedControl.types.js

@@ -0,0 +1,8 @@
+// GENERATED from segmented-control.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const segmentedControlParts = {
+    root: 'dds-segmentedcontrol',
+    indicator: 'dds-segmentedcontrol__indicator',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const segmentedControlDefaults = { layout: 'hug', size: 'md', disabled: false };

package/dist/components/core/segmented-control/segmented-control-impl.css

@@ -0,0 +1,57 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did
+ * before — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * In fill, every segment takes an equal share of the row.
+ *
+ * `flex: 1 1 0` rather than a width: a basis of zero is what makes the shares equal
+ * regardless of how long each word is, which is the whole difference between fill and
+ * hug — hug lets the words decide and fill refuses to. The segment's own
+ * `min-inline-size` still holds underneath it, so the equal shares have a floor and a
+ * narrow screen crowds the row rather than drawing targets a finger cannot hit.
+ *
+ * Written here rather than in either contract because it belongs to neither on its own.
+ * It is the row's decision — the same segment in a hug row must not stretch — and the
+ * rule has to reach another component's root, which no contract field can address: a
+ * contract styles its own parts, and the segment is not one of this component's.
+ */
+:where([data-dds-context="marketing"])
+  .dds-segmentedcontrol[data-layout="fill"]
+  .dds-segmentedcontrolitem {
+  flex: 1 1 0;
+}
+
+/*
+ * What the pill's travel is made of.
+ *
+ * `transition-property` is a list of property names, which no token can be — so it is
+ * here, while how long the travel takes and on what curve are decisions and live in the
+ * contract as motion.duration.normal and motion.easing.standard. The reduced-motion
+ * guard the generator writes covers `.dds-segmentedcontrol *`, so this is switched off
+ * with everything else.
+ *
+ * `translate` and the two sizes rather than `inset` and `width`: these are the
+ * properties the pill is actually set with, and translate is the one a browser can
+ * animate without laying the row out again on every frame. Both axes are listed because
+ * the row's height changes with `size` and its width with the words in it, and a pill
+ * that jumped on one axis while easing on the other would read as broken rather than as
+ * fast.
+ *
+ * Two classes deep, and that is load-bearing rather than tidy. The generated rule for
+ * this part is `.dds-segmentedcontrol .dds-segmentedcontrol__indicator`, so a bare class
+ * here would lose on specificity however late it loaded — the quiet way an override of
+ * generated CSS fails, and one that costs the pill its travel with every gate still green.
+ */
+:where([data-dds-context="marketing"])
+  .dds-segmentedcontrol
+  .dds-segmentedcontrol__indicator {
+  transition-property: translate, inline-size, block-size;
+}

package/dist/components/core/segmented-control-item/SegmentedControlItem.css

@@ -0,0 +1,151 @@
+/* GENERATED from segmentedcontrolitem.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem {
+  transition-property: background-color, opacity, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  outline-style: solid;
+  padding-block: 0;
+  position: relative;
+  text-decoration: none;
+  white-space: nowrap;
+  border-radius: var(--radius-pill);
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem .dds-segmentedcontrolitem__sizer {
+  block-size: 0;
+  display: block;
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem .dds-segmentedcontrolitem__label {
+  transition-property: color, font-weight;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-disabled="true"] {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="false"] .dds-segmentedcontrolitem__icon {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="false"] .dds-segmentedcontrolitem__label {
+  color: var(--color-fg-muted);
+  font-weight: var(--font-body-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="true"] .dds-segmentedcontrolitem__icon {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="true"] .dds-segmentedcontrolitem__label {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="lg"] {
+  padding-inline: var(--space-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="lg"] .dds-segmentedcontrolitem__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="lg"] .dds-segmentedcontrolitem__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="lg"] .dds-segmentedcontrolitem__sizer {
+  font-weight: var(--font-label-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="md"] {
+  padding-inline: var(--space-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="md"] .dds-segmentedcontrolitem__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="md"] .dds-segmentedcontrolitem__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="md"] .dds-segmentedcontrolitem__sizer {
+  font-weight: var(--font-label-sm-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="sm"] {
+  padding-inline: var(--space-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="sm"] .dds-segmentedcontrolitem__icon {
+  block-size: var(--icon-control-sm);
+  inline-size: var(--icon-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="sm"] .dds-segmentedcontrolitem__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-size="sm"] .dds-segmentedcontrolitem__sizer {
+  font-weight: var(--font-label-sm-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="true"][data-size="lg"] .dds-segmentedcontrolitem__label {
+  font-weight: var(--font-label-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="true"][data-size="md"] .dds-segmentedcontrolitem__label {
+  font-weight: var(--font-label-sm-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="true"][data-size="sm"] .dds-segmentedcontrolitem__label {
+  font-weight: var(--font-label-sm-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem[data-selected="false"][data-disabled="false"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem .dds-segmentedcontrolitem__icon {
+  transition-property: color;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrolitem,
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrolitem * { transition: none; }
+}
+

package/dist/components/core/segmented-control-item/SegmentedControlItem.d.ts

@@ -0,0 +1,50 @@
+import "./SegmentedControlItem.css";
+import "./segmented-control-item-impl.css";
+import { type SegmentedControlItemProps } from "./SegmentedControlItem.types.js";
+export type { SegmentedControlItemProps };
+/**
+ * One segment in a row, as a radio.
+ *
+ * A `<button>` carrying `role="radio"` rather than an `<input type="radio">`, and the
+ * reason is the label: a real radio input cannot hold a glyph beside its text, so the
+ * mark and the words would have to live in a sibling `<label>` and the box the reader
+ * presses would stop being the box that paints. The role and `aria-checked` give a
+ * screen reader everything the input would have, and `SegmentedControl` supplies the
+ * rest of the pattern — one tab stop, and the arrow keys inside it.
+ *
+ * Two of the props are the row's rather than the consumer's. `selected` is, because only
+ * one segment may be chosen and a segment cannot see its siblings; `size` is, because a
+ * row at mixed heights is not a row. Both are overwritten on every render of the group.
+ * `disabled` is the consumer's, and bars this one option while the rest still answer.
+ *
+ * It declares no height. The row fixes its own to the control ramp and stretches its
+ * segments inside it, so a segment is whatever the control is less the inset either
+ * side — which is what spares this package the second size ramp Product keeps in step
+ * with the first by hand.
+ *
+ * `disabled` is `aria-disabled` and a data attribute, never the native attribute. A
+ * native `disabled` removes the button from the accessibility tree, so a reader would
+ * not be told the option is there and unavailable — they would never learn it exists,
+ * which is the one outcome this prop is for. Being non-native it has to be enforced
+ * here, so `onClick` is swallowed while it holds. The stylesheet reads `data-disabled`
+ * for the same reason: `:disabled` would never match, and a rule written against it is
+ * one the browser discards in silence.
+ *
+ * Both data attributes are written in either direction rather than omitted when false.
+ * A styling axis is read by attribute selectors both ways — the hover tint is bound on
+ * `selected: false` and `disabled: false` — and an attribute absent when false matches
+ * neither.
+ *
+ * The spread goes before the attributes this component decides rather than after, which
+ * is the opposite of Tab in this package. Those are attributes the component owns, so a
+ * consumer overriding one meant to; these *are* the component. A `data-selected` from
+ * outside would repaint the segment into a state its own prop contradicts, and an
+ * `aria-checked` from outside would tell the reader a different value is in force.
+ * `tabIndex` is deliberately left in the spread, because that one is the row's to set —
+ * it is how the roving tab stop arrives.
+ *
+ * `value` is destructured rather than left in the rest spread even though it is read
+ * here: on a `<button>` a `value` attribute means something else entirely, and the row
+ * reads this one off the element's props without it ever needing to reach the DOM.
+ */
+export declare function SegmentedControlItem({ selected, disabled, size, value, label, icon, onSelect, onClick, ...rest }: SegmentedControlItemProps): import("react").JSX.Element;