@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Toast/Toast.js

@@ -0,0 +1,234 @@
+import * as stylex from '@stylexjs/stylex';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Layer } from '../Layer/index.js';
+
+// A toast is a floating surface, so its width is set in spacing steps rather
+// than in a literal the token contract cannot theme.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const regionWidth = `calc(16 * ${semanticTokens.spacingXl})`;
+
+// The dot that names the tone. Two of the smallest spacing step: any larger
+// and it stops being a mark on the slip and starts being a bullet.
+const dotSize = `calc(2 * ${semanticTokens.spacingXs})`;
+
+// Notifications arrive from the edge they are anchored to.
+const enter = "x3rxs7e-B";
+const styles = {
+  region: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1ap6kct",
+    krVfgx: "x1ey2m1c",
+    kt4wiu: "xtijo5x",
+    ks0D6T: "xx25b1c",
+    kmVPX3: "x1cfciu7",
+    kfzvcC: "x47corl",
+    kVAEAm: "xixxii4",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  toast: {
+    kGNEyG: "x6s0dn4",
+    k44tkh: "xrnvkan",
+    kKVMdj: "xxyva2q x1aquc0h",
+    kyAemX: "xwm07dd",
+    kWkggS: "x1ixvsy6",
+    kaIpWk: "x7xrhi9",
+    ksu8eU: "xng3xce",
+    kGVxlE: "x165nt33",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kOIVth: "xtl099x",
+    k8WAf4: "x1lr58ck",
+    kg3NbH: "x1q83fih",
+    kfzvcC: "x67bb7w",
+    $$css: true
+  },
+  dot: {
+    kZKoxP: "x1rr45o1",
+    kaIpWk: "xnpwncj",
+    kmuXW: "x2lah0s",
+    kzqmXN: "xz8jsrm",
+    $$css: true
+  },
+  info: {
+    kWkggS: "x18i8t7",
+    $$css: true
+  },
+  success: {
+    kWkggS: "x1sm82us",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "xe2mao8",
+    $$css: true
+  },
+  danger: {
+    kWkggS: "xpqgouk",
+    $$css: true
+  },
+  message: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kzQI83: "x1iyjqo2",
+    kOIVth: "x1iwn5ga",
+    k7Eaqz: "xeuugli",
+    $$css: true
+  },
+  title: {
+    kMwMTN: "x1y4yzzg",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  description: {
+    kMwMTN: "x1mgtvnk",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xgz4m7n",
+    kLWn49: "x1ezks3f",
+    kogj98: "x1ghz6dp",
+    $$css: true
+  },
+  action: {
+    kGNEyG: "x6s0dn4",
+    k1xSpc: "x78zum5",
+    kmuXW: "x2lah0s",
+    kOIVth: "x1ap6kct",
+    $$css: true
+  }
+};
+
+/** Props for one notification surface. */
+
+/** Renders one notification. Use `useToast` rather than placing these by hand. */
+export function Toast({
+  action,
+  description,
+  title,
+  tone = 'info',
+  ...props
+}) {
+  const isDanger = tone === 'danger';
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    "aria-live": isDanger ? 'assertive' : 'polite',
+    role: isDanger ? 'alert' : 'status',
+    ...{
+      className: "x6s0dn4 xrnvkan xxyva2q x1aquc0h xwm07dd x1ixvsy6 x7xrhi9 xng3xce x165nt33 x1y4yzzg x78zum5 xj0sio9 xtl099x x1lr58ck x1q83fih x67bb7w"
+    },
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...stylex.props(styles.dot, styles[tone])
+    }), /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 xdt5ytf x1iyjqo2 x1iwn5ga xeuugli"
+      },
+      children: [/*#__PURE__*/_jsx("p", {
+        ...{
+          className: "x1y4yzzg xj0sio9 xltg2ad xgz4m7n x1ezks3f x1ghz6dp"
+        },
+        children: title
+      }), description === undefined ? null : /*#__PURE__*/_jsx("p", {
+        ...{
+          className: "x1mgtvnk xj0sio9 xltg2ad xgz4m7n x1ezks3f x1ghz6dp"
+        },
+        children: description
+      })]
+    }), action === undefined ? null : /*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x6s0dn4 x78zum5 x2lah0s x1ap6kct"
+      },
+      children: action
+    })]
+  });
+}
+
+/** A notification request handed to `useToast().show`. */
+
+/** The notification queue exposed to descendants. */
+
+const ToastContext = createContext(undefined);
+
+/** Props for the notification queue host. */
+
+/**
+ * Hosts the notification queue and its live region. Place one near the root of
+ * a host application; notifications are requested through `useToast`.
+ */
+export function ToastProvider({
+  children,
+  label = 'Notifications'
+}) {
+  const [toasts, setToasts] = useState([]);
+  const nextId = useRef(0);
+  const timers = useRef(new Map());
+  const dismiss = useCallback(id => {
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+    setToasts(current => current.filter(toast => toast.id !== id));
+  }, []);
+  const show = useCallback(toast => {
+    nextId.current += 1;
+    const id = `toast-${nextId.current}`;
+    setToasts(current => [...current, {
+      ...toast,
+      id
+    }]);
+    const duration = toast.duration ?? 5000;
+    if (duration > 0) {
+      timers.current.set(id, setTimeout(() => {
+        dismiss(id);
+      }, duration));
+    }
+    return id;
+  }, [dismiss]);
+  const pending = timers.current;
+  useEffect(() => () => {
+    for (const timer of pending.values()) {
+      clearTimeout(timer);
+    }
+    pending.clear();
+  }, [pending]);
+  const value = useMemo(() => ({
+    dismiss,
+    show
+  }), [dismiss, show]);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: value,
+    children: [children, /*#__PURE__*/_jsx(Layer, {
+      children: /*#__PURE__*/_jsx("div", {
+        "aria-label": label,
+        "aria-live": "polite",
+        role: "region",
+        ...{
+          className: "x78zum5 xdt5ytf x1ap6kct x1ey2m1c xtijo5x xx25b1c x1cfciu7 x47corl xixxii4 xh8yej3"
+        },
+        children: toasts.map(toast => /*#__PURE__*/_jsx(Toast, {
+          action: toast.action,
+          description: toast.description,
+          title: toast.title,
+          tone: toast.tone
+        }, toast.id))
+      })
+    })]
+  });
+}
+
+/** Reads the notification queue. Throws when no `ToastProvider` is above it. */
+export function useToast() {
+  const value = useContext(ToastContext);
+  if (!value) {
+    throw new Error('useToast must be used within a ToastProvider.');
+  }
+  return value;
+}

package/dist/Toast/index.d.ts

@@ -0,0 +1 @@
+export { Toast, ToastProvider, useToast, type ToastContextValue, type ToastOptions, type ToastProps, type ToastProviderProps, } from './Toast.js';

package/dist/Toast/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { Toast, ToastProvider, useToast } from './Toast.js';

package/dist/Toggle/Toggle.js

@@ -1,8 +1,20 @@
 import * as stylex from '@stylexjs/stylex';
 import { useState } from 'react';
 import { semanticTokens } from '../authoring.stylex.js';
+
+// The console's switch, in tokens, and the same block `Switch` is cut from —
+// the two are one control wearing two names, so they may not drift apart. Its
+// proportions are relationships rather than measurements: a track one spacing
+// step tall, a knob inset by a hairline on each side, and a travel of exactly
+// the difference between the track's two dimensions. Nothing here is a
+// literal, so the control keeps its proportions when density moves it.
 import "../styles/stylex.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const trackHeight = semanticTokens.spacingLg;
+const trackWidth = semanticTokens.sizeControlMd;
+const knobInset = `calc(${semanticTokens.borderWidth} * 2)`;
+const knobSize = `calc(${trackHeight} - ${knobInset} * 2)`;
+const knobTravel = `calc(${trackWidth} - ${trackHeight})`;
 export function Toggle({
   children,
   defaultPressed = false,
@@ -29,35 +41,41 @@ export function Toggle({
     },
     role: "switch",
     ...{
-      className: "x6s0dn4 xjbqb8w x9r1u3d xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x1y4yzzg xj0sio9 x1ti3rys x1ap6kct xl56j7k xq5j1ye x16d7gm3 x10y07nz xov5yc9 x1pg383a x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xszm2ej"
+      className: "x6s0dn4 xjbqb8w x9r1u3d x8kq9my x1jnjmdy xpxnlqs x1ypdohk x3nfvp2 x1y4yzzg xj0sio9 x1ti3rys xq5azjn x1ap6kct xl56j7k xq5j1ye x16d7gm3 x10y07nz xov5yc9 x1elc2ff xs2xxs2 xxjumz x1pg383a x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u xuc1b5w"
     },
     type: type,
     children: [/*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...{
         0: {
-          className: "x6s0dn4 xavu78a xilcjya xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 x1089um4"
+          className: "x6s0dn4 xmjv2u5 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf"
         },
         2: {
-          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1089um4 x1j40q36 x10ghty7 x13a6bvl"
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x1i8m2t6"
         },
         1: {
-          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 x1089um4 x19blmh3 x1lnk2a9"
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x19blmh3"
         },
         3: {
-          className: "x6s0dn4 xnpwncj x1jnjmdy xpxnlqs x3nfvp2 x2lah0s x7s8d8b x1089um4 x13a6bvl x19blmh3 x1lnk2a9"
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x19blmh3"
         }
       }[!!isPressed << 1 | !!disabled << 0],
       children: /*#__PURE__*/_jsx("span", {
         "aria-hidden": "true",
         ...{
           0: {
-            className: "x40o0ze xnpwncj x1elh21b x1t7hrd4 x1af11ui"
+            className: "x1ixvsy6 xnpwncj x6or1qq x1o0tod x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s"
+          },
+          2: {
+            className: "x1ixvsy6 xnpwncj x6or1qq x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xuaxbnl"
           },
           1: {
-            className: "xnpwncj x1elh21b x1t7hrd4 x1af11ui xsq02lv"
+            className: "xnpwncj x6or1qq x1o0tod x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xsq02lv"
+          },
+          3: {
+            className: "xnpwncj x6or1qq x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xuaxbnl xsq02lv"
           }
-        }[!!disabled << 0]
+        }[!!isPressed << 1 | !!disabled << 0]
       })
     }), children]
   });

package/dist/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,24 @@
+import { type ButtonHTMLAttributes } from 'react';
+import type { ControlSize } from '../Button/index.js';
+type SharedToggleButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-pressed' | 'className'> & {
+    readonly onPressedChange?: (pressed: boolean) => void;
+    readonly size?: ControlSize;
+};
+type ControlledToggleButtonProps = SharedToggleButtonProps & {
+    readonly defaultPressed?: never;
+    readonly onPressedChange: (pressed: boolean) => void;
+    readonly pressed: boolean;
+};
+type UncontrolledToggleButtonProps = SharedToggleButtonProps & {
+    readonly defaultPressed?: boolean;
+    readonly pressed?: never;
+};
+/** Props for a button that stays pressed. */
+export type ToggleButtonProps = ControlledToggleButtonProps | UncontrolledToggleButtonProps;
+/**
+ * A button that stays pressed. It reports state through `aria-pressed`, which
+ * is what separates it from `Switch`: this is a command that stays on, not a
+ * setting that applies on its own.
+ */
+export declare function ToggleButton({ children, defaultPressed, disabled, onClick, onPressedChange, pressed, size, type, ...props }: ToggleButtonProps): import("react").JSX.Element;
+export {};

package/dist/ToggleButton/ToggleButton.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const toggleButtonDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/ToggleButton/ToggleButton.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const toggleButtonDoc = {
+  name: 'ToggleButton',
+  description: 'A button that stays pressed.',
+  props: [{
+    name: 'defaultPressed',
+    description: 'Sets the initial uncontrolled state.'
+  }, {
+    name: 'onPressedChange',
+    description: 'Receives the next pressed state.'
+  }, {
+    name: 'pressed',
+    description: 'Controls the pressed state.'
+  }, {
+    name: 'size',
+    description: 'Selects the fixed control height.'
+  }],
+  inheritedProps: ['ButtonHTMLAttributes<HTMLButtonElement> except aria-pressed and className'],
+  example: '<ToggleButton onPressedChange={setBold} pressed={bold}>Bold</ToggleButton>',
+  storyId: 'core-toggle-button--default'
+};

package/dist/ToggleButton/ToggleButton.js

@@ -0,0 +1,125 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  base: {
+    kGNEyG: "x6s0dn4",
+    kWkggS: "x1ixvsy6",
+    kfdmCh: "x1w5tod1",
+    kt9PQ7: "x151ckkc",
+    kPef9Z: "x4tqos1",
+    kEafiO: "xlyo07a",
+    kJRH4f: "x18l35ku",
+    kjGldf: "x1gkoo59",
+    kaIpWk: "x8kq9my",
+    kB7OPa: "x9f619",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x3nfvp2",
+    kMv6JI: "xj0sio9",
+    kOIVth: "x1ap6kct",
+    kjj79g: "xl56j7k",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x1eaenvl",
+    kAMwcw: "xxjumz",
+    kD2jPA: "x48zea8",
+    k6n8hv: "x5lffqx",
+    kznhgF: "x7ct1ft",
+    kYN844: "x8iy62q",
+    khENu7: "x19li835",
+    kWC4TW: "x609gy3",
+    kYPGJ8: "xtgyt42",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  },
+  sm: {
+    kGuDYH: "xltg2ad",
+    kZKoxP: "x1vbl8lt",
+    kg3NbH: "x1qtbwip",
+    $$css: true
+  },
+  md: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xr8hsnb",
+    kg3NbH: "x1wkw8jr",
+    $$css: true
+  },
+  lg: {
+    kGuDYH: "x1ti3rys",
+    kZKoxP: "xscltuj",
+    kg3NbH: "x1q83fih",
+    $$css: true
+  },
+  unpressed: {
+    kL6WhQ: "x1rzuj2w",
+    kLZC3w: "x1uie7tv",
+    kBCPoo: "x3l7yry",
+    kGJrpR: "xm8cy6x",
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1jcbhmk",
+    kDKVdO: "xbo0ryh",
+    kP7EFm: "x1hp37ie",
+    k3tVK3: "x3f7sda",
+    kZSJX8: "x1ay06zv",
+    kgOR3W: "x11v2k1x",
+    ktLb98: "x1975ut4",
+    kyXix: "x1y3run3",
+    kZoyvs: "xvp6dmp",
+    k5ER9S: "x16pkv37",
+    kWhZoL: "x85vu61",
+    $$css: true
+  },
+  pressed: {
+    kL6WhQ: "x52u802",
+    kLZC3w: "x1uie7tv",
+    kBCPoo: "x3l7yry",
+    kGJrpR: "xm8cy6x",
+    kMwMTN: "x1y4yzzg",
+    k63SB2: "x1m30uz7",
+    $$css: true
+  }
+};
+
+/** Props for a button that stays pressed. */
+
+/**
+ * A button that stays pressed. It reports state through `aria-pressed`, which
+ * is what separates it from `Switch`: this is a command that stays on, not a
+ * setting that applies on its own.
+ */
+export function ToggleButton({
+  children,
+  defaultPressed = false,
+  disabled,
+  onClick,
+  onPressedChange,
+  pressed,
+  size = 'md',
+  type = 'button',
+  ...props
+}) {
+  const [internalPressed, setInternalPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /*#__PURE__*/_jsx("button", {
+    ...props,
+    "aria-pressed": isPressed,
+    disabled: disabled,
+    onClick: event => {
+      const next = !isPressed;
+      if (pressed === undefined) {
+        setInternalPressed(next);
+      }
+      onPressedChange?.(next);
+      onClick?.(event);
+    },
+    ...stylex.props(styles.base, styles[size], isPressed ? styles.pressed : styles.unpressed),
+    type: type,
+    children: children
+  });
+}

package/dist/ToggleButton/index.d.ts

@@ -0,0 +1 @@
+export { ToggleButton, type ToggleButtonProps } from './ToggleButton.js';

package/dist/ToggleButton/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ToggleButton } from './ToggleButton.js';

package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import type { ControlSize } from '../Button/index.js';
+import { type ListOrientation } from '../hooks/useListFocus.js';
+/** One option inside a toggle group. */
+export interface ToggleOption {
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: string;
+}
+interface SharedProps {
+    readonly label: string;
+    readonly options: readonly ToggleOption[];
+    readonly orientation?: ListOrientation;
+    readonly size?: ControlSize;
+}
+interface SingleProps extends SharedProps {
+    readonly onValueChange: (value: string) => void;
+    readonly selectionMode?: 'single';
+    readonly value: string;
+}
+interface MultipleProps extends SharedProps {
+    readonly onValueChange: (value: readonly string[]) => void;
+    readonly selectionMode: 'multiple';
+    readonly value: readonly string[];
+}
+/** Props for a set of toggle buttons acting as one control. */
+export type ToggleButtonGroupProps = MultipleProps | SingleProps;
+/**
+ * A row of toggle buttons that behaves as one control: one tab stop, arrow
+ * keys between options.
+ *
+ * `single` keeps exactly one option pressed, which is what `SegmentedControl`
+ * also does — prefer that when the options are views of the same thing, and
+ * this when they are formatting-style toggles that happen to be exclusive.
+ */
+export declare function ToggleButtonGroup(props: ToggleButtonGroupProps): import("react").JSX.Element;
+export {};

package/dist/ToggleButtonGroup/ToggleButtonGroup.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const toggleButtonGroupDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/ToggleButtonGroup/ToggleButtonGroup.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const toggleButtonGroupDoc = {
+  name: 'ToggleButtonGroup',
+  description: 'A set of toggle buttons acting as one control.',
+  props: [{
+    name: 'label',
+    description: 'Names the group for assistive technology.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next selection.'
+  }, {
+    name: 'options',
+    description: 'Supplies the options in reading order.'
+  }, {
+    name: 'orientation',
+    description: 'Selects the axis arrow keys travel along.'
+  }, {
+    name: 'selectionMode',
+    description: 'Allows one option or several.'
+  }, {
+    name: 'size',
+    description: 'Selects the fixed control height.'
+  }, {
+    name: 'value',
+    description: 'Controls which options are pressed.'
+  }],
+  inheritedProps: ['None; ToggleButtonGroup owns its group element'],
+  example: '<ToggleButtonGroup label="Alignment" onValueChange={setAlign} options={aligns} value={align} />',
+  storyId: 'core-toggle-button-group--default'
+};

package/dist/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,84 @@
+import { useRef } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+import { ToggleButton } from '../ToggleButton/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  group: {
+    k1xSpc: "x3nfvp2",
+    kOIVth: "x1iwn5ga",
+    $$css: true
+  },
+  horizontal: {
+    kXwgrk: "x1q0g3np",
+    kwnvtZ: "x1a02dak",
+    $$css: true
+  },
+  vertical: {
+    kGNEyG: "x1qjc9v5",
+    kXwgrk: "xdt5ytf",
+    $$css: true
+  }
+};
+
+/** One option inside a toggle group. */
+
+/** Props for a set of toggle buttons acting as one control. */
+
+/**
+ * A row of toggle buttons that behaves as one control: one tab stop, arrow
+ * keys between options.
+ *
+ * `single` keeps exactly one option pressed, which is what `SegmentedControl`
+ * also does — prefer that when the options are views of the same thing, and
+ * this when they are formatting-style toggles that happen to be exclusive.
+ */
+export function ToggleButtonGroup(props) {
+  const {
+    label,
+    options,
+    orientation = 'horizontal',
+    size = 'md'
+  } = props;
+  const groupRef = useRef(null);
+  const {
+    onKeyDown
+  } = useListFocus(groupRef, {
+    orientation
+  });
+  const isPressed = value => props.selectionMode === 'multiple' ? props.value.includes(value) : props.value === value;
+
+  // One tab stop for the whole group: the tab order lands on whichever option
+  // is already pressed, and the arrow keys take it from there.
+  const tabStopValue = options.find(option => !option.disabled && isPressed(option.value))?.value ?? options.find(option => !option.disabled)?.value;
+  function choose(value, pressed) {
+    if (props.selectionMode === 'multiple') {
+      props.onValueChange(pressed ? [...props.value, value] : props.value.filter(entry => entry !== value));
+      return;
+    }
+    // A single-select group never empties: pressing the active option again
+    // would leave the control saying nothing is chosen.
+    if (pressed) {
+      props.onValueChange(value);
+    }
+  }
+  return /*#__PURE__*/_jsx("div", {
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: groupRef,
+    role: "group",
+    ...stylex.props(styles.group, styles[orientation]),
+    children: options.map(option => /*#__PURE__*/_jsx(ToggleButton, {
+      disabled: option.disabled ?? false,
+      onPressedChange: pressed => {
+        choose(option.value, pressed);
+      },
+      pressed: isPressed(option.value),
+      size: size,
+      tabIndex: option.value === tabStopValue ? 0 : -1,
+      children: option.label
+    }, option.value))
+  });
+}

package/dist/ToggleButtonGroup/index.d.ts

@@ -0,0 +1 @@
+export { ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleOption, } from './ToggleButtonGroup.js';

package/dist/ToggleButtonGroup/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ToggleButtonGroup } from './ToggleButtonGroup.js';