@misoto22/kioku-ui 0.1.0 → 0.2.0

package/dist/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from 'react';
+/** Props for a determinate or indeterminate progress track. */
+export interface ProgressBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'children' | 'className' | 'role'> {
+    readonly label: string;
+    readonly max?: number;
+    readonly value?: number;
+}
+/**
+ * Reports how far a task has run. Omitting `value` reports work of unknown
+ * length, which a screen reader announces as busy rather than as a percentage.
+ */
+export declare function ProgressBar({ label, max, value, ...props }: ProgressBarProps): import("react").JSX.Element;

package/dist/ProgressBar/ProgressBar.doc.d.ts

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

package/dist/ProgressBar/ProgressBar.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const progressBarDoc = {
+  name: 'ProgressBar',
+  description: 'Reports how far a task has run.',
+  props: [{
+    name: 'label',
+    description: 'Names what is progressing.'
+  }, {
+    name: 'max',
+    description: 'Sets the value that counts as complete.'
+  }, {
+    name: 'value',
+    description: 'Sets progress so far; omit when unknown.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-valuemax, aria-valuemin, aria-valuenow, children, className, and role'],
+  example: '<ProgressBar label="Uploading" value={40} />',
+  storyId: 'core-progress-bar--default'
+};

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1,51 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// Carries the stub of an unknown-length task across its track: from just
+// off the leading edge to just past the trailing one.
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const sweep = "x1do5dr1-B";
+/** Props for a determinate or indeterminate progress track. */
+
+/**
+ * Reports how far a task has run. Omitting `value` reports work of unknown
+ * length, which a screen reader announces as busy rather than as a percentage.
+ */
+export function ProgressBar({
+  label,
+  max = 100,
+  value,
+  ...props
+}) {
+  const determinate = value !== undefined;
+  const clamped = determinate ? Math.min(Math.max(value, 0), max) : undefined;
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label,
+    "aria-valuemax": max,
+    "aria-valuemin": 0,
+    ...(clamped === undefined ? {} : {
+      'aria-valuenow': clamped
+    }),
+    role: "progressbar",
+    ...{
+      className: "xavu78a xnpwncj x1lliihq x1ieyhmn xb3r6kr xh8yej3"
+    },
+    children: /*#__PURE__*/_jsx("span", {
+      ...{
+        0: {
+          className: "x1i8m2t6 xnpwncj x1lliihq x5yr21d xv6reb9 x1j4rzew xxjumz"
+        },
+        1: {
+          className: "x1i8m2t6 xnpwncj x1lliihq x5yr21d xv6reb9 x1j4rzew xxjumz xslpo9u xa4qsjk x1a44k40 x1aquc0h xsus3lq xz84dc7"
+        }
+      }[!!!determinate << 0],
+      // The width is data, so it stays inline — after stylex.props, which
+      // would otherwise overwrite the style attribute it is carried in.
+      style: clamped === undefined ? undefined : {
+        inlineSize: `${clamped / max * 100}%`
+      }
+    })
+  });
+}

package/dist/ProgressBar/index.d.ts

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

package/dist/ProgressBar/index.js

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

package/dist/RadioList/RadioList.d.ts

@@ -0,0 +1,30 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One mutually exclusive choice. */
+export interface RadioOption {
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly label: ReactNode;
+    readonly value: string;
+}
+type SharedRadioListProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> & {
+    readonly legend: ReactNode;
+    readonly onValueChange?: (value: string) => void;
+    readonly options: readonly RadioOption[];
+};
+type ControlledRadioListProps = SharedRadioListProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledRadioListProps = SharedRadioListProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props for a set of mutually exclusive choices. */
+export type RadioListProps = ControlledRadioListProps | UncontrolledRadioListProps;
+/**
+ * Offers mutually exclusive choices. It emits a `fieldset` with a `legend`, so
+ * assistive technology announces the question before the answers.
+ */
+export declare function RadioList({ defaultValue, legend, onValueChange, options, value, ...props }: RadioListProps): import("react").JSX.Element;
+export {};

package/dist/RadioList/RadioList.doc.d.ts

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

package/dist/RadioList/RadioList.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const radioListDoc = {
+  name: 'RadioList',
+  description: 'Offers a set of mutually exclusive choices.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled choice.'
+  }, {
+    name: 'legend',
+    description: 'States the question the options answer.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the newly chosen value.'
+  }, {
+    name: 'options',
+    description: 'Supplies the choices in reading order.'
+  }, {
+    name: 'value',
+    description: 'Controls the current choice.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFieldSetElement> except children, className, defaultValue, and onChange'],
+  example: '<RadioList legend="Visibility" onValueChange={setScope} options={scopes} value={scope} />',
+  storyId: 'core-radio-list--default'
+};

package/dist/RadioList/RadioList.js

@@ -0,0 +1,130 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+
+// The same block and the same centring `CheckboxInput` uses: one micro-control
+// tall, sitting on the first line of its label rather than on the label's whole
+// box, so a radio and a checkbox in the same form line up and a wrapped label
+// does not drag the dot downwards. Written as a relationship so a density
+// change carries both.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const dotSize = semanticTokens.spacingLg;
+const dotFirstLineOffset = `calc((${semanticTokens.fontSizeMd} * ${semanticTokens.lineHeightBody} - ${dotSize}) / 2)`;
+const styles = {
+  label: {
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xt3l3uh",
+    kAMwcw: "xxjumz",
+    $$css: true
+  },
+  labelChosen: {
+    kMwMTN: "x1y4yzzg",
+    k63SB2: "x1m30uz7",
+    $$css: true
+  },
+  labelClear: {
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  },
+  labelDisabled: {
+    kMwMTN: "x1yx38ia",
+    k63SB2: "x1jcbhmk",
+    $$css: true
+  }
+};
+
+/** One mutually exclusive choice. */
+
+/** Props for a set of mutually exclusive choices. */
+
+/**
+ * Offers mutually exclusive choices. It emits a `fieldset` with a `legend`, so
+ * assistive technology announces the question before the answers.
+ */
+export function RadioList({
+  defaultValue,
+  legend,
+  onValueChange,
+  options,
+  value,
+  ...props
+}) {
+  const name = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue ?? '');
+  const selected = value ?? internalValue;
+  return /*#__PURE__*/_jsxs("fieldset", {
+    ...props,
+    ...{
+      className: "xng3xce xc342km x78zum5 xdt5ytf xj0sio9 x1ap6kct x1ghz6dp x1717udv"
+    },
+    children: [/*#__PURE__*/_jsx("legend", {
+      ...{
+        className: "x17y7oyd x69it5h xnlz8j1 x1m30uz7 x1di4hct x1vslzj6 x11dva6t x1717udv"
+      },
+      children: legend
+    }), options.map(({
+      description,
+      disabled,
+      label,
+      value: optionValue
+    }) => {
+      const isChosen = selected === optionValue;
+      return /*#__PURE__*/_jsxs("label", {
+        ...{
+          className: "x1cy8zhl x78zum5 x1ap6kct"
+        },
+        children: [/*#__PURE__*/_jsx("input", {
+          checked: isChosen,
+          disabled: disabled ?? false,
+          name: name,
+          onChange: () => {
+            if (value === undefined) {
+              setInternalValue(optionValue);
+            }
+            onValueChange?.(optionValue);
+          },
+          value: optionValue,
+          ...{
+            0: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u"
+            },
+            2: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u x5e5nlz xdahmmw xaamv6x x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub"
+            },
+            1: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u xh3cs80"
+            },
+            3: {
+              className: "xjyslct xavu78a x7s8d8b x1wxkff4 xnpwncj x1jnjmdy xpxnlqs x9f619 x1ypdohk x1rg5ohu x2lah0s x1psh5v9 xat24cr x1ktc51x xrxpjvj x1n2onr6 x1elc2ff xts7igz xxjumz x48zea8 x1oulntk xtgyt42 x18v3itu x15meki4 xz32tfx x1p22nma x17lds6u xdahmmw xaamv6x x1cpjm7i x1t94pr5 x1knuo7r xfbisj7 x1hmns74 xbnewub xh3cs80"
+            }
+          }[!!isChosen << 1 | !!(isChosen && disabled) << 0],
+          type: "radio"
+        }), /*#__PURE__*/_jsxs("span", {
+          ...{
+            className: "x78zum5 xdt5ytf x1iwn5ga"
+          },
+          children: [/*#__PURE__*/_jsx("span", {
+            ...stylex.props(styles.label, disabled ? styles.labelDisabled : isChosen ? styles.labelChosen : styles.labelClear),
+            children: label
+          }), description === undefined ? null : /*#__PURE__*/_jsx("span", {
+            ...{
+              0: {
+                className: "x1mgtvnk xj0sio9 xltg2ad xgz4m7n x1ezks3f"
+              },
+              1: {
+                className: "xj0sio9 xltg2ad xgz4m7n x1ezks3f x1yx38ia"
+              }
+            }[!!disabled << 0],
+            children: description
+          })]
+        })]
+      }, optionValue);
+    })]
+  });
+}

package/dist/RadioList/index.d.ts

@@ -0,0 +1 @@
+export { RadioList, type RadioListProps, type RadioOption } from './RadioList.js';

package/dist/RadioList/index.js

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

package/dist/Resizable/Resizable.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for a two-panel split whose divider can be moved. */
+export interface ResizableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly handleLabel?: string;
+    readonly max?: number;
+    readonly min?: number;
+    readonly onSizeChange?: (size: number) => void;
+    readonly panel: ReactNode;
+    readonly size?: number;
+    readonly step?: number;
+}
+/**
+ * Splits a region into a sized panel and the rest. The divider is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard.
+ */
+export declare function Resizable({ children, handleLabel, max, min, onSizeChange, panel, size, step, ...props }: ResizableProps): import("react").JSX.Element;

package/dist/Resizable/Resizable.doc.d.ts

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

package/dist/Resizable/Resizable.doc.js

@@ -0,0 +1,33 @@
+import "../styles/stylex.css";
+export const resizableDoc = {
+  name: 'Resizable',
+  description: 'Splits a region into a sized panel and the rest.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the content beside the panel.'
+  }, {
+    name: 'handleLabel',
+    description: 'Names the divider control.'
+  }, {
+    name: 'max',
+    description: 'Caps how wide the panel can grow.'
+  }, {
+    name: 'min',
+    description: 'Sets how narrow the panel can shrink.'
+  }, {
+    name: 'onSizeChange',
+    description: 'Receives the next panel width.'
+  }, {
+    name: 'panel',
+    description: 'Supplies the sized panel content.'
+  }, {
+    name: 'size',
+    description: 'Controls the panel width in pixels.'
+  }, {
+    name: 'step',
+    description: 'Sets how far each arrow key moves the divider.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Resizable panel={<SideNav>…</SideNav>}>{page}</Resizable>',
+  storyId: 'core-resizable--default'
+};

package/dist/Resizable/Resizable.js

@@ -0,0 +1,100 @@
+import * as stylex from '@stylexjs/stylex';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { ResizeHandle } from '../ResizeHandle/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const styles = {
+  panel: {
+    kmuXW: "x2lah0s",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xysyzu8",
+    $$css: true
+  },
+  rest: {
+    kzQI83: "x1iyjqo2",
+    k7Eaqz: "xeuugli",
+    kVQacm: "xysyzu8",
+    $$css: true
+  }
+};
+
+/** Props for a two-panel split whose divider can be moved. */
+
+/**
+ * Splits a region into a sized panel and the rest. The divider is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard.
+ */
+export function Resizable({
+  children,
+  handleLabel,
+  max = 480,
+  min = 160,
+  onSizeChange,
+  panel,
+  size,
+  step = 16,
+  ...props
+}) {
+  const frameRef = useRef(null);
+  const [internalSize, setInternalSize] = useState(size ?? 240);
+  const current = size ?? internalSize;
+  const [dragging, setDragging] = useState(false);
+  const apply = useCallback(next => {
+    const clamped = Math.min(Math.max(next, min), max);
+    if (size === undefined) {
+      setInternalSize(clamped);
+    }
+    onSizeChange?.(clamped);
+  }, [max, min, onSizeChange, size]);
+  useEffect(() => {
+    if (!dragging) {
+      return;
+    }
+    function handleMove(event) {
+      const frame = frameRef.current;
+      if (frame) {
+        apply(event.clientX - frame.getBoundingClientRect().left);
+      }
+    }
+    function stop() {
+      setDragging(false);
+    }
+    document.addEventListener('mousemove', handleMove);
+    document.addEventListener('mouseup', stop);
+    return () => {
+      document.removeEventListener('mousemove', handleMove);
+      document.removeEventListener('mouseup', stop);
+    };
+  }, [apply, dragging]);
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ref: frameRef,
+    ...{
+      className: "x78zum5 xj0sio9 xeuugli"
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.panel, scrolling.region),
+      style: {
+        width: `${current}px`
+      },
+      children: panel
+    }), /*#__PURE__*/_jsx(ResizeHandle, {
+      dragging: dragging,
+      label: handleLabel,
+      max: max,
+      min: min,
+      onMouseDown: () => {
+        setDragging(true);
+      },
+      onValueChange: apply,
+      step: step,
+      value: current
+    }), /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.rest, scrolling.region),
+      children: children
+    })]
+  });
+}

package/dist/Resizable/index.d.ts

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

package/dist/Resizable/index.js

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

package/dist/ResizeHandle/ResizeHandle.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+/** Axis the divider itself runs along, as `aria-orientation` reports it. */
+export type ResizeHandleOrientation = 'horizontal' | 'vertical';
+/** Props for the movable divider a caller places between two panes. */
+export interface ResizeHandleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-orientation' | 'aria-valuemax' | 'aria-valuemin' | 'aria-valuenow' | 'children' | 'className' | 'onKeyDown' | 'role' | 'tabIndex'> {
+    readonly label?: string;
+    readonly max?: number;
+    readonly min?: number;
+    readonly onValueChange?: (value: number) => void;
+    /** Held while the caller is dragging, so the mark survives the pointer. */
+    readonly dragging?: boolean;
+    readonly orientation?: ResizeHandleOrientation;
+    readonly step?: number;
+    readonly value?: number;
+}
+/**
+ * The divider between two panes the caller lays out itself. It is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard. The value attributes appear
+ * only when the caller supplies the numbers behind them, because a separator
+ * that reports a range it does not have is worse than one that reports none.
+ */
+export declare function ResizeHandle({ dragging, label, max, min, onValueChange, orientation, step, value, ...props }: ResizeHandleProps): import("react").JSX.Element;

package/dist/ResizeHandle/ResizeHandle.doc.d.ts

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

package/dist/ResizeHandle/ResizeHandle.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const resizeHandleDoc = {
+  name: 'ResizeHandle',
+  description: 'Divides two panes with a control arrow keys can move.',
+  props: [{
+    name: 'label',
+    description: 'Names the divider control.'
+  }, {
+    name: 'max',
+    description: 'Reports and caps the largest value.'
+  }, {
+    name: 'min',
+    description: 'Reports and caps the smallest value.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next clamped value.'
+  }, {
+    name: 'orientation',
+    description: 'Sets the axis the divider runs along.'
+  }, {
+    name: 'step',
+    description: 'Sets how far each arrow key moves it.'
+  }, {
+    name: 'value',
+    description: 'Reports where the divider currently sits.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except aria-label, aria-orientation, aria-valuemax, aria-valuemin, aria-valuenow, children, className, onKeyDown, role, and tabIndex'],
+  example: '<ResizeHandle max={480} min={160} onValueChange={setWidth} value={width} />',
+  storyId: 'core-resize-handle--default'
+};

package/dist/ResizeHandle/ResizeHandle.js

@@ -0,0 +1,118 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useInternationalization } from '../i18n/index.js';
+import { clamp } from '../utils/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  handle: {
+    kWkggS: "x3bfdtj",
+    ksu8eU: "xng3xce",
+    kMzoRj: "xc342km",
+    kmuXW: "x2lah0s",
+    kmVPX3: "x1717udv",
+    kVAEAm: "x1n2onr6",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x15406qy",
+    kAMwcw: "xxjumz",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    kIa11j: "xr4amx6",
+    $$css: true
+  },
+  dragging: {
+    kWkggS: "x14kofiu",
+    $$css: true
+  },
+  vertical: {
+    kkrTdU: "xicojor",
+    kzqmXN: "xivnta4",
+    kgzTxl: "xszcg87",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "x1o8qpxl",
+    k96MEf: "x1y3wzot",
+    kSJ0CW: "xfbisj7",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xnyzbwf",
+    $$css: true
+  },
+  horizontal: {
+    kZKoxP: "xendyek",
+    kkrTdU: "xyozgr7",
+    kgzTxl: "x17f96yv",
+    kgeoSG: "x1cpjm7i",
+    kOlAkY: "x1rmj1tg",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "x1682cnc",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xkjykve",
+    $$css: true
+  }
+};
+
+/** Axis the divider itself runs along, as `aria-orientation` reports it. */
+
+/** Props for the movable divider a caller places between two panes. */
+
+/**
+ * The divider between two panes the caller lays out itself. It is a real
+ * `separator` control, so arrow keys move it — a drag handle that only
+ * responds to a pointer is unusable by keyboard. The value attributes appear
+ * only when the caller supplies the numbers behind them, because a separator
+ * that reports a range it does not have is worse than one that reports none.
+ */
+export function ResizeHandle({
+  dragging = false,
+  label,
+  max,
+  min,
+  onValueChange,
+  orientation = 'vertical',
+  step = 16,
+  value,
+  ...props
+}) {
+  const {
+    messages
+  } = useInternationalization();
+  // An unset bound is no bound: a caller that leaves `min` or `max` out has a
+  // range this handle cannot know, so it stops holding the value inside one.
+  const lowerBound = min ?? Number.NEGATIVE_INFINITY;
+  const upperBound = max ?? Number.POSITIVE_INFINITY;
+  const decreaseKey = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';
+  const increaseKey = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';
+  function requestedValue(key) {
+    if (key === decreaseKey) {
+      return value === undefined ? undefined : value - step;
+    }
+    if (key === increaseKey) {
+      return value === undefined ? undefined : value + step;
+    }
+    if (key === 'Home') {
+      return min;
+    }
+    return key === 'End' ? max : undefined;
+  }
+  function handleKeyDown(event) {
+    const next = requestedValue(event.key);
+    if (next === undefined) {
+      return;
+    }
+    event.preventDefault();
+    onValueChange?.(clamp(next, lowerBound, upperBound));
+  }
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label ?? messages.resizeHandle,
+    "aria-orientation": orientation,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    onKeyDown: handleKeyDown,
+    role: "separator",
+    ...stylex.props(styles.handle, styles[orientation], dragging && styles.dragging),
+    tabIndex: 0
+  });
+}

package/dist/ResizeHandle/index.d.ts

@@ -0,0 +1 @@
+export { ResizeHandle, type ResizeHandleOrientation, type ResizeHandleProps, } from './ResizeHandle.js';