@misoto22/kioku-ui 0.1.0 → 0.2.0

package/dist/NavMenu/NavMenu.js

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import { Children } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { NavMenuOrientationProvider } from './orientation.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  list: {
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kH6xsr: "x3ct3a4",
+    kqGvvJ: "x10im51j",
+    kUOVxO: "xrxpjvj",
+    kZCmMZ: "x1c1uobl",
+    $$css: true
+  },
+  horizontal: {
+    kGNEyG: "x6s0dn4",
+    k1C7PZ: "xzr0trf",
+    kXwgrk: "x1q0g3np",
+    kwnvtZ: "x1a02dak",
+    khm7nJ: "xfhy3zi",
+    $$css: true
+  },
+  vertical: {
+    kGNEyG: "x1qjc9v5",
+    kXwgrk: "xdt5ytf",
+    khm7nJ: "x15i1k40",
+    $$css: true
+  }
+};
+
+/** Props for a named group of navigation destinations. */
+
+/**
+ * Groups destinations into a named navigation landmark. Each child becomes a
+ * list item, so assistive technology can announce how many destinations exist.
+ */
+export function NavMenu({
+  children,
+  label,
+  orientation = 'vertical',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("nav", {
+    ...props,
+    "aria-label": label,
+    children: /*#__PURE__*/_jsx(NavMenuOrientationProvider, {
+      value: orientation,
+      children: /*#__PURE__*/_jsx("ul", {
+        ...stylex.props(styles.list, styles[orientation]),
+        children: Children.map(children, (child, index) => /*#__PURE__*/_jsx("li", {
+          children: child
+        }, index))
+      })
+    })
+  });
+}

package/dist/NavMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavMenu, type NavMenuProps } from './NavMenu.js';
+export { useNavMenuOrientation, type NavMenuOrientation } from './orientation.js';

package/dist/NavMenu/index.js

@@ -0,0 +1,5 @@
+import "../styles/stylex.css";
+export { NavMenu } from './NavMenu.js';
+// The orientation lives beside the context that carries it, because `NavItem`
+// reads it without going through `NavMenu` itself.
+export { useNavMenuOrientation } from './orientation.js';

package/dist/NavMenu/orientation.d.ts

@@ -0,0 +1,4 @@
+/** Axis a navigation menu lays its destinations along. */
+export type NavMenuOrientation = 'horizontal' | 'vertical';
+export declare const NavMenuOrientationProvider: import("react").Provider<NavMenuOrientation>;
+export declare function useNavMenuOrientation(): NavMenuOrientation;

package/dist/NavMenu/orientation.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+/** Axis a navigation menu lays its destinations along. */
+import "../styles/stylex.css";
+/**
+ * The axis a `NavItem` is being laid along.
+ *
+ * An item cannot see its siblings, and the mark it draws depends on them: down
+ * the inline edge it belongs beside the word, across the block edge it belongs
+ * beneath it. Vertical is the default because an item outside any menu is a
+ * row in a rail.
+ */
+const NavMenuOrientationContext = createContext('vertical');
+export const NavMenuOrientationProvider = NavMenuOrientationContext.Provider;
+export function useNavMenuOrientation() {
+  return useContext(NavMenuOrientationContext);
+}

package/dist/NumberInput/NumberInput.d.ts

@@ -0,0 +1,21 @@
+import { type InputHTMLAttributes } from 'react';
+type SharedNumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+    readonly onValueChange?: (value: number | undefined) => void;
+};
+type ControlledNumberInputProps = SharedNumberInputProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: number | undefined) => void;
+    readonly value: number | undefined;
+};
+type UncontrolledNumberInputProps = SharedNumberInputProps & {
+    readonly defaultValue?: number;
+    readonly value?: never;
+};
+/** Props for a numeric entry field. */
+export type NumberInputProps = ControlledNumberInputProps | UncontrolledNumberInputProps;
+/**
+ * Accepts a number. An empty field reports `undefined` rather than `0`, so a
+ * caller can tell "not answered" apart from "answered zero".
+ */
+export declare function NumberInput(props: NumberInputProps): import("react").JSX.Element;
+export {};

package/dist/NumberInput/NumberInput.doc.d.ts

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

package/dist/NumberInput/NumberInput.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const numberInputDoc = {
+  name: 'NumberInput',
+  description: 'Accepts a number and reports an empty field as undefined.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled number.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the parsed number or undefined.'
+  }, {
+    name: 'value',
+    description: 'Controls the current number.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<NumberInput onValueChange={setCount} value={count} />',
+  storyId: 'core-number-input--default'
+};

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';