@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/NumberInput/NumberInput.js

@@ -0,0 +1,136 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for a numeric entry field. */
+
+/**
+ * Accepts a number. An empty field reports `undefined` rather than `0`, so a
+ * caller can tell "not answered" apart from "answered zero".
+ */
+export function NumberInput(props) {
+  // `value` may legitimately be undefined while controlled, so presence of the
+  // prop — not its value — decides which mode the field is in.
+  const controlled = 'value' in props;
+  const {
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    defaultValue,
+    disabled,
+    id,
+    onValueChange,
+    readOnly,
+    required,
+    value,
+    ...rest
+  } = props;
+  const field = useFieldControl();
+  const controlRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue === undefined ? '' : String(defaultValue));
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const invalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function report(raw) {
+    if (!controlled) {
+      setInternalValue(raw);
+    }
+    onValueChange?.(raw === '' ? undefined : Number(raw));
+  }
+  function handleChange(event) {
+    report(event.currentTarget.value);
+  }
+
+  // The step is taken by the input itself: `stepUp`/`stepDown` already honour
+  // `step`, `min` and `max`, and re-implementing that arithmetic here would be
+  // a second, worse copy of a rule the platform already keeps.
+  function step(direction) {
+    const control = controlRef.current;
+    if (!control) {
+      return;
+    }
+    if (direction === 'up') {
+      control.stepUp();
+    } else {
+      control.stepDown();
+    }
+    report(control.value);
+  }
+  const steppable = !disabled && !readOnly;
+  return /*#__PURE__*/_jsxs("span", {
+    ...{
+      0: {
+        className: "x1qjc9v5 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x12uk28n"
+      },
+      4: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x12uk28n x1ixvsy6 xilcjya"
+      },
+      2: {
+        className: "x1qjc9v5 xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xcf5wgx x9a976t xtku8dq"
+      },
+      6: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x1ixvsy6 xcf5wgx x9a976t xtku8dq"
+      },
+      1: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      5: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      3: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      7: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      }
+    }[!!(readOnly && !disabled) << 2 | !!(invalid && !disabled) << 1 | !!disabled << 0],
+    children: [/*#__PURE__*/_jsx("input", {
+      ...rest,
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      inputMode: "decimal",
+      onChange: handleChange,
+      readOnly: readOnly,
+      ref: controlRef,
+      required: required ?? field?.required,
+      ...{
+        0: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x1y4yzzg x7ohnf4 x1ti3rys xss6m8b x1kbjp2h x1ezks3f xeuugli x1yrzqix x10y07nz x1qtbwip xp4054r xh8yej3 x3pxiar x1raxpij x7uq1h6 x1l72qor x1e4qbc8 x609gy3 xi5y0ii"
+        },
+        1: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x7ohnf4 x1ti3rys xss6m8b x1kbjp2h x1ezks3f xeuugli x1yrzqix x10y07nz x1qtbwip xp4054r xh8yej3 x3pxiar x1raxpij x7uq1h6 x1l72qor x1e4qbc8 x609gy3 xi5y0ii x1y4yzzg"
+        }
+      }[!!(readOnly && !disabled) << 0],
+      type: "number",
+      value: controlled ? value === undefined ? '' : String(value) : internalValue
+    }), steppable ? /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x1d7crt5 xb2q83l x1rclw80 x78zum5 xdt5ytf x2lah0s x7w4az0"
+      },
+      children: [/*#__PURE__*/_jsx("button", {
+        "aria-hidden": "true",
+        onClick: () => {
+          step('up');
+        },
+        tabIndex: -1,
+        type: "button",
+        ...{
+          className: "x6s0dn4 xjbqb8w xng3xce xc342km x1ypdohk x78zum5 x1iyjqo2 xl56j7k x1717udv x1n2onr6 x1elc2ff x15406qy xxjumz x1c0aqn8 x15nsxps xf0wkg8 x177x8g6 x8b8sbn xnc0v1b x1vvd6c1 x15yekmo x15sszh6 x1cpjm7i xlsogae x1hmns74 x1k3hjl9 x1w5tod1 xeq6m5c x8g82mo"
+        }
+      }), /*#__PURE__*/_jsx("button", {
+        "aria-hidden": "true",
+        onClick: () => {
+          step('down');
+        },
+        tabIndex: -1,
+        type: "button",
+        ...{
+          className: "x6s0dn4 xjbqb8w xng3xce xc342km x1ypdohk x78zum5 x1iyjqo2 xl56j7k x1717udv x1n2onr6 x1elc2ff x15406qy xxjumz x1c0aqn8 x15nsxps xf0wkg8 x177x8g6 x8b8sbn xnc0v1b x1vvd6c1 x15yekmo x15sszh6 x1cpjm7i xlsogae x1hmns74 xge3izv"
+        }
+      })]
+    }) : null]
+  });
+}

package/dist/NumberInput/index.d.ts

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

package/dist/NumberInput/index.js

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

package/dist/Numeral/Numeral.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+/** Props for a figure set in the mono face. */
+export type NumeralProps = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;
+/**
+ * Sets a figure — a count, a metric, a duration, a page number — in the mono
+ * face with tabular numerals, so a column of them lines up on the same stems.
+ * Named `Numeral` rather than `Figure` because `figure` already means an
+ * image with a caption in HTML.
+ */
+export declare function Numeral({ children, ...props }: NumeralProps): import("react").JSX.Element;

package/dist/Numeral/Numeral.doc.d.ts

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

package/dist/Numeral/Numeral.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const numeralDoc = {
+  name: 'Numeral',
+  description: 'Sets a figure in the mono face with tabular numerals.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the figure.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except className'],
+  example: '<Numeral>1,204</Numeral>',
+  storyId: 'core-numeral--default'
+};

package/dist/Numeral/Numeral.js

@@ -0,0 +1,24 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Props for a figure set in the mono face. */
+
+/**
+ * Sets a figure — a count, a metric, a duration, a page number — in the mono
+ * face with tabular numerals, so a column of them lines up on the same stems.
+ * Named `Numeral` rather than `Figure` because `figure` already means an
+ * image with a caption in HTML.
+ */
+export function Numeral({
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    ...props,
+    ...{
+      className: "x7ohnf4 xss6m8b x1kbjp2h"
+    },
+    children: children
+  });
+}

package/dist/Numeral/index.d.ts

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

package/dist/Numeral/index.js

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

package/dist/Outline/Outline.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** One heading in the page outline. */
+export interface OutlineEntry {
+    readonly depth?: 1 | 2 | 3;
+    readonly href: string;
+    readonly label: ReactNode;
+}
+/** Props for the in-page table of contents. */
+export interface OutlineProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {
+    readonly currentHref?: string;
+    readonly entries: readonly OutlineEntry[];
+    readonly label?: string;
+}
+/**
+ * Lists the headings of the current page so a reader can jump between them.
+ * The active entry is marked with `aria-current`, not colour alone.
+ */
+export declare function Outline({ currentHref, entries, label, ...props }: OutlineProps): import("react").JSX.Element;

package/dist/Outline/Outline.doc.d.ts

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

package/dist/Outline/Outline.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const outlineDoc = {
+  name: 'Outline',
+  description: 'Lists the headings of the current page for in-page jumps.',
+  props: [{
+    name: 'currentHref',
+    description: 'Marks which heading the reader is at.'
+  }, {
+    name: 'entries',
+    description: 'Supplies the headings in reading order.'
+  }, {
+    name: 'label',
+    description: 'Names the navigation landmark.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children and className'],
+  example: '<Outline currentHref="#tokens" entries={headings} />',
+  storyId: 'core-outline--default'
+};

package/dist/Outline/Outline.js

@@ -0,0 +1,98 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Link } from '../navigation/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  entry: {
+    kVhnKS: "xb2q83l",
+    k2ei4v: "xjwnu81",
+    k1xSpc: "x1lliihq",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "xltg2ad",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    k8WAf4: "x10y07nz",
+    kMnn75: "xkrqix3",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "x1i6m205",
+    kAMwcw: "xxjumz",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  },
+  inactive: {
+    kGJrpR: "x1d7crt5",
+    kMwMTN: "x17y7oyd",
+    k63SB2: "x1jcbhmk",
+    kilqSj: "xepcd2k",
+    kDPRdz: "x1t0gddj",
+    $$css: true
+  },
+  current: {
+    kGJrpR: "x1vmkb7r",
+    kMwMTN: "x1y4yzzg",
+    $$css: true
+  },
+  depth1: {
+    kZCmMZ: "x32qhjx",
+    $$css: true
+  },
+  depth2: {
+    kZCmMZ: "x1cywkco",
+    $$css: true
+  },
+  depth3: {
+    kZCmMZ: "x1wcz300",
+    $$css: true
+  }
+};
+const depths = {
+  1: styles.depth1,
+  2: styles.depth2,
+  3: styles.depth3
+};
+
+/** One heading in the page outline. */
+
+/** Props for the in-page table of contents. */
+
+/**
+ * Lists the headings of the current page so a reader can jump between them.
+ * The active entry is marked with `aria-current`, not colour alone.
+ */
+export function Outline({
+  currentHref,
+  entries,
+  label = 'On this page',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("nav", {
+    ...props,
+    "aria-label": label,
+    children: /*#__PURE__*/_jsx("ul", {
+      ...{
+        className: "x78zum5 xdt5ytf x18cwcfb x3ct3a4 x10im51j x1c1uobl"
+      },
+      children: entries.map(({
+        depth = 1,
+        href,
+        label: entryLabel
+      }) => {
+        const current = href === currentHref;
+        return /*#__PURE__*/_jsx("li", {
+          children: /*#__PURE__*/_jsx(Link, {
+            ...(current ? {
+              'aria-current': 'location'
+            } : {}),
+            href: href,
+            ...stylex.props(styles.entry, depths[depth], current ? styles.current : styles.inactive),
+            children: entryLabel
+          })
+        }, href);
+      })
+    })
+  });
+}

package/dist/Outline/index.d.ts

@@ -0,0 +1 @@
+export { Outline, type OutlineEntry, type OutlineProps } from './Outline.js';

package/dist/Outline/index.js

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

package/dist/OverflowList/OverflowList.d.ts

@@ -0,0 +1,19 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One entry that can move into the overflow menu. */
+export interface OverflowEntry {
+    readonly label: string;
+    readonly node: ReactNode;
+    readonly onSelect?: () => void;
+}
+/** Props for a row that folds its tail into a menu. */
+export interface OverflowListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly entries: readonly OverflowEntry[];
+    readonly overflowLabel?: string;
+    readonly visibleCount: number;
+}
+/**
+ * Shows the first `visibleCount` entries and folds the rest into a menu. The
+ * count is supplied by the caller rather than measured here, so the component
+ * stays predictable and does not thrash on resize.
+ */
+export declare function OverflowList({ entries, overflowLabel, visibleCount, ...props }: OverflowListProps): import("react").JSX.Element;

package/dist/OverflowList/OverflowList.doc.d.ts

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

package/dist/OverflowList/OverflowList.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const overflowListDoc = {
+  name: 'OverflowList',
+  description: 'Shows leading entries and folds the rest into a menu.',
+  props: [{
+    name: 'entries',
+    description: 'Supplies every entry in priority order.'
+  }, {
+    name: 'overflowLabel',
+    description: 'Names the overflow trigger and menu.'
+  }, {
+    name: 'visibleCount',
+    description: 'Sets how many entries stay in the row.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<OverflowList entries={actions} visibleCount={3} />',
+  storyId: 'core-overflow-list--default'
+};

package/dist/OverflowList/OverflowList.js

@@ -0,0 +1,81 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Button } from '../Button/index.js';
+import { DropdownMenu, DropdownMenuItem } from '../DropdownMenu/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** One entry that can move into the overflow menu. */
+
+/** Props for a row that folds its tail into a menu. */
+
+/**
+ * Shows the first `visibleCount` entries and folds the rest into a menu. The
+ * count is supplied by the caller rather than measured here, so the component
+ * stays predictable and does not thrash on resize.
+ */
+export function OverflowList({
+  entries,
+  overflowLabel = 'More',
+  visibleCount,
+  ...props
+}) {
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const shown = entries.slice(0, visibleCount);
+  const hidden = entries.slice(visibleCount);
+  return /*#__PURE__*/_jsxs("div", {
+    ...props,
+    ...{
+      className: "x6s0dn4 x78zum5 xozqiw3 xj0sio9 x1iwn5ga xeuugli"
+    },
+    children: [shown.map(entry => /*#__PURE__*/_jsx("span", {
+      ...{
+        className: "x2lah0s"
+      },
+      children: entry.node
+    }, entry.label)), hidden.length === 0 ? null : /*#__PURE__*/_jsxs("span", {
+      ...{
+        className: "x2lah0s"
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        ref: anchorRef,
+        ...{
+          className: "x3nfvp2"
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          onClick: () => {
+            setOpen(value => !value);
+          },
+          size: "sm",
+          variant: "ghost",
+          children: /*#__PURE__*/_jsxs("span", {
+            ...{
+              className: "xj0sio9 xltg2ad xq5azjn"
+            },
+            children: [overflowLabel, " (", /*#__PURE__*/_jsx("span", {
+              ...{
+                className: "x7ohnf4 xltg2ad xss6m8b x1kbjp2h"
+              },
+              children: hidden.length
+            }), ")"]
+          })
+        })
+      }), /*#__PURE__*/_jsx(DropdownMenu, {
+        anchorRef: anchorRef,
+        label: overflowLabel,
+        onDismiss: () => {
+          setOpen(false);
+        },
+        open: open,
+        children: hidden.map(entry => /*#__PURE__*/_jsx(DropdownMenuItem, {
+          onClick: () => {
+            entry.onSelect?.();
+            setOpen(false);
+          },
+          children: entry.label
+        }, entry.label))
+      })]
+    })]
+  });
+}

package/dist/OverflowList/index.d.ts

@@ -0,0 +1 @@
+export { OverflowList, type OverflowEntry, type OverflowListProps, } from './OverflowList.js';

package/dist/OverflowList/index.js

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

package/dist/Overlay/Overlay.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** Props for the dismissal, focus, and scroll behaviour behind modal surfaces. */
+export interface OverlayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly dismissOnOutsideClick?: boolean;
+    readonly lockScroll?: boolean;
+    readonly onDismiss?: () => void;
+    readonly open: boolean;
+    readonly scrim?: boolean;
+    readonly trapFocus?: boolean;
+}
+/**
+ * Owns the behaviour every modal surface repeats: an optional scrim, Escape
+ * and outside-click dismissal, a focus trap, and a scroll lock. It carries no
+ * role of its own so the caller names the surface it wraps.
+ */
+export declare function Overlay({ children, dismissOnOutsideClick, lockScroll, onDismiss, open, scrim, trapFocus, ...props }: OverlayProps): import("react").JSX.Element | null;

package/dist/Overlay/Overlay.doc.d.ts

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

package/dist/Overlay/Overlay.doc.js

@@ -0,0 +1,30 @@
+import "../styles/stylex.css";
+export const overlayDoc = {
+  name: 'Overlay',
+  description: 'Supplies scrim, dismissal, focus, and scroll behaviour.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the surface the overlay wraps.'
+  }, {
+    name: 'dismissOnOutsideClick',
+    description: 'Allows a click on the scrim to dismiss the overlay.'
+  }, {
+    name: 'lockScroll',
+    description: 'Freezes document scrolling while open.'
+  }, {
+    name: 'onDismiss',
+    description: 'Runs on Escape or an outside click.'
+  }, {
+    name: 'open',
+    description: 'Controls whether the overlay renders.'
+  }, {
+    name: 'scrim',
+    description: 'Draws a dimming layer behind the surface.'
+  }, {
+    name: 'trapFocus',
+    description: 'Confines Tab to the wrapped surface.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children and className'],
+  example: '<Overlay onDismiss={close} open={open}><Card>...</Card></Overlay>',
+  storyId: 'core-overlay--default'
+};

package/dist/Overlay/Overlay.js

@@ -0,0 +1,74 @@
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import { Layer } from '../Layer/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const scrimEnter = "x18re5ia-B";
+/** Props for the dismissal, focus, and scroll behaviour behind modal surfaces. */
+
+/**
+ * Owns the behaviour every modal surface repeats: an optional scrim, Escape
+ * and outside-click dismissal, a focus trap, and a scroll lock. It carries no
+ * role of its own so the caller names the surface it wraps.
+ */
+export function Overlay({
+  children,
+  dismissOnOutsideClick = true,
+  lockScroll = true,
+  onDismiss,
+  open,
+  scrim = true,
+  trapFocus = true,
+  ...props
+}) {
+  const [surface, setSurface] = useState(null);
+  useFocusTrap(surface, open && trapFocus);
+  useScrollLock(open && lockScroll);
+  useEffect(() => {
+    if (!open || !onDismiss) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        onDismiss?.();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onDismiss, open]);
+  if (!open) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Layer, {
+    children: /*#__PURE__*/_jsx("div", {
+      ...props,
+      onMouseDown: event => {
+        if (dismissOnOutsideClick && event.target === event.currentTarget) {
+          onDismiss?.();
+        }
+      },
+      ...{
+        0: {
+          className: "x6s0dn4 x1g14cin xqcmdr3 x1aquc0h xwm07dd x158cxwz x78zum5 x10a8y8t xl56j7k x1cfciu7 xixxii4"
+        },
+        1: {
+          className: "x6s0dn4 x1g14cin xqcmdr3 x1aquc0h xwm07dd x78zum5 x10a8y8t xl56j7k xixxii4 xjbqb8w x1717udv x47corl"
+        }
+      }[!!!scrim << 0],
+      children: /*#__PURE__*/_jsx("div", {
+        ref: setSurface,
+        tabIndex: -1,
+        ...{
+          className: "xmz0i5r x193iq5w x1t137rt x67bb7w x15meki4 xz32tfx x1p22nma x17lds6u"
+        },
+        children: children
+      })
+    })
+  });
+}

package/dist/Overlay/index.d.ts

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

package/dist/Overlay/index.js

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

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+/** Props for page-number navigation over a bounded result set. */
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'onChange'> {
+    readonly label?: string;
+    readonly onChange: (page: number) => void;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly siblingCount?: number;
+}
+/**
+ * Moves between pages of a bounded result set. Use it only when a reader
+ * needs to jump to a specific page; otherwise prefer cursor navigation.
+ */
+export declare function Pagination({ label, onChange, page, pageCount, siblingCount, ...props }: PaginationProps): import("react").JSX.Element;