@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/TopNavMegaMenu/TopNavMegaMenu.d.ts

@@ -0,0 +1,30 @@
+import { type AnchorHTMLAttributes, type ReactNode } from 'react';
+/** One titled column inside a mega menu. */
+export interface MegaMenuColumn {
+    readonly items: ReactNode;
+    readonly title?: string;
+}
+/** Props for the banner's panelled menu. */
+export interface TopNavMegaMenuProps {
+    readonly columns: readonly MegaMenuColumn[];
+    readonly featured?: ReactNode;
+    readonly label: string;
+}
+/**
+ * A wide banner panel holding several columns of destinations. Like
+ * `TopNavMenu` it is a disclosure, not a `menu`: everything inside navigates
+ * somewhere rather than running a command.
+ */
+export declare function TopNavMegaMenu({ columns, featured, label, }: TopNavMegaMenuProps): import("react").JSX.Element;
+/** Props for the promoted entry inside a mega menu. */
+export interface TopNavMegaMenuFeaturedCardProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'className' | 'href' | 'media' | 'title'> {
+    readonly description?: ReactNode;
+    readonly href: string;
+    readonly media?: ReactNode;
+    readonly title: ReactNode;
+}
+/**
+ * The one promoted destination in a mega menu. It is a single link, so the
+ * whole card is one tab stop — never put another control inside it.
+ */
+export declare function TopNavMegaMenuFeaturedCard({ description, href, media, title, ...props }: TopNavMegaMenuFeaturedCardProps): import("react").JSX.Element;

package/dist/TopNavMegaMenu/TopNavMegaMenu.doc.d.ts

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

package/dist/TopNavMegaMenu/TopNavMegaMenu.doc.js

@@ -0,0 +1,38 @@
+import "../styles/stylex.css";
+export const topNavMegaMenuDoc = {
+  name: 'TopNavMegaMenu',
+  description: 'A wide banner panel holding columns of destinations.',
+  props: [{
+    name: 'columns',
+    description: 'Supplies the titled columns of links.'
+  }, {
+    name: 'featured',
+    description: 'Places a promoted entry beside the columns.'
+  }, {
+    name: 'label',
+    description: 'Names the trigger and the panel.'
+  }],
+  inheritedProps: ['None; TopNavMegaMenu owns its trigger and panel'],
+  example: '<TopNavMegaMenu columns={columns} label="Product" />',
+  storyId: 'core-top-nav-mega-menu--default'
+};
+export const topNavMegaMenuFeaturedCardDoc = {
+  name: 'TopNavMegaMenuFeaturedCard',
+  description: 'The promoted destination inside a mega menu.',
+  props: [{
+    name: 'description',
+    description: 'Adds a supporting line under the title.'
+  }, {
+    name: 'href',
+    description: 'Sets the destination the card links to.'
+  }, {
+    name: 'media',
+    description: 'Places an image or glyph above the title.'
+  }, {
+    name: 'title',
+    description: 'Names the promoted destination.'
+  }],
+  inheritedProps: ['AnchorHTMLAttributes<HTMLAnchorElement> except children, className, href, media, and title'],
+  example: '<TopNavMegaMenuFeaturedCard href="/new" title="What’s new" />',
+  storyId: 'core-top-nav-mega-menu--default'
+};

package/dist/TopNavMegaMenu/TopNavMegaMenu.js

@@ -0,0 +1,134 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Heading } from '../Heading/index.js';
+import { Icon } from '../Icon/index.js';
+import { Link } from '../navigation/index.js';
+import { Popover } from '../Popover/index.js';
+import { Text } from '../Text/index.js';
+
+// The trigger wears the same mark as the destinations beside it: two
+// hairlines at the inline-start edge, hinted on hover and claimed when open.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const hoverMarkHeight = '40%';
+const openMarkHeight = '72%';
+const columnMinWidth = `calc(7 * ${semanticTokens.spacing2xl})`;
+const panelMaxWidth = `calc(30 * ${semanticTokens.spacing2xl})`;
+/** One titled column inside a mega menu. */
+
+/** Props for the banner's panelled menu. */
+
+/**
+ * A wide banner panel holding several columns of destinations. Like
+ * `TopNavMenu` it is a disclosure, not a `menu`: everything inside navigates
+ * somewhere rather than running a command.
+ */
+export function TopNavMegaMenu({
+  columns,
+  featured,
+  label
+}) {
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      ...{
+        className: "x3nfvp2"
+      },
+      children: /*#__PURE__*/_jsxs("button", {
+        "aria-expanded": open,
+        onClick: () => {
+          setOpen(value => !value);
+        },
+        ...{
+          0: {
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x17y7oyd xzr0trf x1ypdohk x3nfvp2 xj0sio9 x1ti3rys xq5azjn xmm8wyw x10y07nz x1qtbwip x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1rsmet2 x1943h6x xu1tlqk x1t0gddj"
+          },
+          1: {
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km xzr0trf x1ypdohk x3nfvp2 xj0sio9 x1ti3rys xq5azjn xmm8wyw x10y07nz x1qtbwip x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1y4yzzg x12ukevf x1aeu7hm"
+          }
+        }[!!open << 0],
+        type: "button",
+        children: [label, /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          ...{
+            0: {
+              className: "x6s0dn4 x3nfvp2 xv6reb9 x11xpdln xxjumz"
+            },
+            1: {
+              className: "x6s0dn4 x3nfvp2 xv6reb9 x11xpdln xxjumz x19jd1h0"
+            }
+          }[!!open << 0],
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: "sm",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "m6 9 6 6 6-6",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2"
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      alignment: "start",
+      anchorRef: anchorRef,
+      "aria-label": label,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      open: open,
+      role: "group",
+      children: /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "xrvj5dj x1ws3dqe xhp26gn x1wrn7nl"
+        },
+        children: [columns.map((column, index) => /*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 xdt5ytf x15i1k40"
+          },
+          children: [column.title === undefined ? null : /*#__PURE__*/_jsx("p", {
+            ...{
+              className: "x17y7oyd x13fdfvb xnlz8j1 x1it3fuk x1m30uz7 x1di4hct x1vslzj6 x1ghz6dp x13jfld5 xyri2b x32qhjx"
+            },
+            children: column.title
+          }), column.items]
+        }, column.title ?? index)), featured]
+      })
+    })]
+  });
+}
+
+/** Props for the promoted entry inside a mega menu. */
+
+/**
+ * The one promoted destination in a mega menu. It is a single link, so the
+ * whole card is one tab stop — never put another control inside it.
+ */
+export function TopNavMegaMenuFeaturedCard({
+  description,
+  href,
+  media,
+  title,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(Link, {
+    ...props,
+    href: href,
+    ...{
+      className: "xavu78a x1l6hjkl x78zum5 xdt5ytf x14rluyd xfhy3zi xkrqix3 x1elc2ff x1edtteb xxjumz x15meki4 xz32tfx x1p22nma x17lds6u xz4i334"
+    },
+    children: [media, /*#__PURE__*/_jsx(Heading, {
+      level: 3,
+      size: "subsection",
+      children: title
+    }), description === undefined ? null : /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      tone: "secondary",
+      children: description
+    })]
+  });
+}

package/dist/TopNavMegaMenu/index.d.ts

@@ -0,0 +1 @@
+export { TopNavMegaMenu, TopNavMegaMenuFeaturedCard, type MegaMenuColumn, type TopNavMegaMenuFeaturedCardProps, type TopNavMegaMenuProps, } from './TopNavMegaMenu.js';

package/dist/TopNavMegaMenu/index.js

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

package/dist/TopNavMenu/TopNavMenu.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import type { Alignment, Placement } from '../hooks/useAnchoredPosition.js';
+/** Props for a grouped menu inside the page banner. */
+export interface TopNavMenuProps {
+    readonly alignment?: Alignment;
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly placement?: Placement;
+}
+/**
+ * A banner menu that owns its open state. It is a disclosure rather than a
+ * `menu`: the panel holds links to elsewhere, and calling those `menuitem`
+ * would promise a command that runs here.
+ */
+export declare function TopNavMenu({ alignment, children, label, placement, }: TopNavMenuProps): import("react").JSX.Element;

package/dist/TopNavMenu/TopNavMenu.doc.d.ts

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

package/dist/TopNavMenu/TopNavMenu.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const topNavMenuDoc = {
+  name: 'TopNavMenu',
+  description: 'A grouped disclosure menu inside the page banner.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the panel up along the cross axis.'
+  }, {
+    name: 'children',
+    description: 'Supplies the destinations.'
+  }, {
+    name: 'label',
+    description: 'Names the trigger and the panel.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the trigger.'
+  }],
+  inheritedProps: ['None; TopNavMenu owns its trigger and panel'],
+  example: '<TopNavMenu label="Product"><NavItem href="/a">A</NavItem></TopNavMenu>',
+  storyId: 'core-top-nav-menu--default'
+};

package/dist/TopNavMenu/TopNavMenu.js

@@ -0,0 +1,105 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { focusableElements } from '../hooks/focusableSelector.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+import { Icon } from '../Icon/index.js';
+import { Popover } from '../Popover/index.js';
+// The trigger wears the same mark as the destinations beside it: two
+// hairlines at the inline-start edge, hinted on hover and claimed when open.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const hoverMarkHeight = '40%';
+const openMarkHeight = '72%';
+const panelMinWidth = `calc(8 * ${semanticTokens.spacing2xl})`;
+/** Props for a grouped menu inside the page banner. */
+
+/**
+ * A banner menu that owns its open state. It is a disclosure rather than a
+ * `menu`: the panel holds links to elsewhere, and calling those `menuitem`
+ * would promise a command that runs here.
+ */
+export function TopNavMenu({
+  alignment = 'start',
+  children,
+  label,
+  placement = 'bottom'
+}) {
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const {
+    onKeyDown
+  } = useListFocus(panelRef, {
+    orientation: 'vertical'
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      ...{
+        className: "x3nfvp2"
+      },
+      children: /*#__PURE__*/_jsxs("button", {
+        "aria-expanded": open,
+        onClick: () => {
+          setOpen(value => !value);
+        },
+        ...{
+          0: {
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x17y7oyd xzr0trf x1ypdohk x3nfvp2 xj0sio9 x1ti3rys xq5azjn xmm8wyw x10y07nz x1qtbwip x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1rsmet2 x1943h6x xu1tlqk x1t0gddj"
+          },
+          1: {
+            className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km xzr0trf x1ypdohk x3nfvp2 xj0sio9 x1ti3rys xq5azjn xmm8wyw x10y07nz x1qtbwip x1n2onr6 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1y4yzzg x12ukevf x1aeu7hm"
+          }
+        }[!!open << 0],
+        type: "button",
+        children: [label, /*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          ...{
+            0: {
+              className: "x6s0dn4 x3nfvp2 xv6reb9 x11xpdln xxjumz"
+            },
+            1: {
+              className: "x6s0dn4 x3nfvp2 xv6reb9 x11xpdln xxjumz x19jd1h0"
+            }
+          }[!!open << 0],
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: "sm",
+            children: /*#__PURE__*/_jsx("path", {
+              d: "m6 9 6 6 6-6",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2"
+            })
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Popover, {
+      alignment: alignment,
+      anchorRef: anchorRef,
+      "aria-label": label,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      open: open,
+      placement: placement,
+      role: "group",
+      children: /*#__PURE__*/_jsx("div", {
+        onKeyDown: onKeyDown,
+        ref: node => {
+          panelRef.current = node;
+          if (node) {
+            focusableElements(node)[0]?.focus({
+              preventScroll: true
+            });
+          }
+        },
+        ...{
+          className: "x78zum5 xdt5ytf x5qwfmy x15i1k40"
+        },
+        children: children
+      })
+    })]
+  });
+}

package/dist/TopNavMenu/index.d.ts

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

package/dist/TopNavMenu/index.js

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

package/dist/TreeList/TreeList.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One node in a `TreeList`. */
+export interface TreeNode {
+    readonly children?: readonly TreeNode[];
+    readonly id: string;
+    readonly label: ReactNode;
+}
+/** Props for a collapsible hierarchy. */
+export interface TreeListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'aria-label' | 'children' | 'className' | 'onSelect' | 'role'> {
+    readonly expandedIds: readonly string[];
+    readonly label: string;
+    readonly nodes: readonly TreeNode[];
+    readonly onExpandedChange: (ids: readonly string[]) => void;
+    readonly onSelect?: (id: string) => void;
+    readonly selectedId?: string;
+}
+/**
+ * Presents a collapsible hierarchy. The whole tree is one tab stop: up and
+ * down move between visible nodes, right opens a branch, left closes it.
+ */
+export declare function TreeList({ expandedIds, label, nodes, onExpandedChange, onSelect, selectedId, ...props }: TreeListProps): import("react").JSX.Element;

package/dist/TreeList/TreeList.doc.d.ts

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

package/dist/TreeList/TreeList.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const treeListDoc = {
+  name: 'TreeList',
+  description: 'Presents a collapsible hierarchy as one tab stop.',
+  props: [{
+    name: 'expandedIds',
+    description: 'Controls which branches are open.'
+  }, {
+    name: 'label',
+    description: 'Names the tree for assistive technology.'
+  }, {
+    name: 'nodes',
+    description: 'Supplies the hierarchy in reading order.'
+  }, {
+    name: 'onExpandedChange',
+    description: 'Receives the next open branches.'
+  }, {
+    name: 'onSelect',
+    description: 'Receives the id of the chosen node.'
+  }, {
+    name: 'selectedId',
+    description: 'Marks which node is selected.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLUListElement> except aria-label, children, className, onSelect, and role'],
+  example: '<TreeList expandedIds={open} label="Files" nodes={tree} onExpandedChange={setOpen} />',
+  storyId: 'core-tree-list--default'
+};

package/dist/TreeList/TreeList.js

@@ -0,0 +1,146 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { reachableElements } from '../hooks/focusableSelector.js';
+import { Icon } from '../Icon/index.js';
+
+// A selected row is marked by a 2px accent bar against its leading edge, not
+// by a fill. `focusWidth` is this system's 2px.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectionMark = `inset ${semanticTokens.focusWidth} 0 0 0 ${semanticTokens.colorAccent}`;
+
+// The disclosure column, and where the rule beneath it falls. Both are
+// relationships rather than sizes: the marker occupies three spacing steps, the
+// rule drops through the middle of that column, and the row's own inline
+// padding shifts both. A density change moves the marker and its rule together.
+const markerColumn = `calc(3 * ${semanticTokens.spacingSm})`;
+const markerCentre = `calc(1.5 * ${semanticTokens.spacingSm})`;
+const guideIndent = `calc(${semanticTokens.spacingSm} + ${markerCentre})`;
+/** One node in a `TreeList`. */
+
+/** Props for a collapsible hierarchy. */
+
+/**
+ * Presents a collapsible hierarchy. The whole tree is one tab stop: up and
+ * down move between visible nodes, right opens a branch, left closes it.
+ */
+export function TreeList({
+  expandedIds,
+  label,
+  nodes,
+  onExpandedChange,
+  onSelect,
+  selectedId,
+  ...props
+}) {
+  const treeRef = useRef(null);
+  const [focusedId, setFocusedId] = useState(nodes[0]?.id ?? '');
+  function toggle(id, open) {
+    onExpandedChange(open ? [...expandedIds, id] : expandedIds.filter(entry => entry !== id));
+  }
+  function handleKeyDown(event) {
+    const tree = treeRef.current;
+    if (!tree) {
+      return;
+    }
+    const items = reachableElements(tree);
+    const current = items.indexOf(document.activeElement);
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      const step = event.key === 'ArrowDown' ? 1 : -1;
+      const next = items[(current + step + items.length) % items.length];
+      next?.focus({
+        preventScroll: true
+      });
+      return;
+    }
+    const active = items[current];
+    const id = active?.dataset['nodeId'];
+    if (id === undefined) {
+      return;
+    }
+    if (event.key === 'ArrowRight' && active?.dataset['branch'] === 'true') {
+      event.preventDefault();
+      toggle(id, true);
+      return;
+    }
+    if (event.key === 'ArrowLeft' && active?.dataset['branch'] === 'true') {
+      event.preventDefault();
+      toggle(id, false);
+    }
+  }
+  function renderNodes(entries, level) {
+    return entries.map(node => {
+      const branch = (node.children?.length ?? 0) > 0;
+      const open = expandedIds.includes(node.id);
+      return /*#__PURE__*/_jsxs("li", {
+        role: "none",
+        children: [/*#__PURE__*/_jsxs("button", {
+          "aria-current": node.id === selectedId ? 'true' : undefined,
+          ...(branch ? {
+            'aria-expanded': open
+          } : {}),
+          "aria-level": level,
+          "aria-selected": node.id === selectedId,
+          "data-branch": branch ? 'true' : 'false',
+          "data-node-id": node.id,
+          onClick: () => {
+            setFocusedId(node.id);
+            if (branch) {
+              toggle(node.id, !open);
+            }
+            onSelect?.(node.id);
+          },
+          role: "treeitem",
+          ...{
+            0: {
+              className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x9f619 x17y7oyd x1ypdohk x78zum5 xj0sio9 x1ti3rys x1jcbhmk x1iwn5ga xgz4m7n x1ezks3f x10y07nz x1qtbwip x1yc453h x1elc2ff x1koyr57 xxjumz xh8yej3 x15meki4 xz32tfx x1p22nma x17lds6u x1gnnqk1 x1ipqx2d x1kz4h7b"
+            },
+            1: {
+              className: "x6s0dn4 xjbqb8w x8kq9my xng3xce xc342km x9f619 x1ypdohk x78zum5 xj0sio9 x1ti3rys x1jcbhmk x1iwn5ga xgz4m7n x1ezks3f x10y07nz x1qtbwip x1yc453h x1elc2ff x1koyr57 xxjumz xh8yej3 x15meki4 xz32tfx x1p22nma x17lds6u x4hvm6t x1y4yzzg"
+            }
+          }[!!(node.id === selectedId) << 0],
+          tabIndex: node.id === focusedId ? 0 : -1,
+          type: "button",
+          children: [/*#__PURE__*/_jsx("span", {
+            "aria-hidden": "true",
+            ...{
+              0: {
+                className: "x6s0dn4 x1mgtvnk x3nfvp2 x2lah0s xl56j7k xv6reb9 x11xpdln xxjumz xzfp0ct"
+              },
+              1: {
+                className: "x6s0dn4 x1mgtvnk x3nfvp2 x2lah0s xl56j7k xv6reb9 x11xpdln xxjumz xzfp0ct x1iffjtl"
+              }
+            }[!!(branch && open) << 0],
+            children: branch ? /*#__PURE__*/_jsx(Icon, {
+              children: /*#__PURE__*/_jsx("path", {
+                d: "m9 6 6 6-6 6",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2"
+              })
+            }) : null
+          }), node.label]
+        }), branch && open ? /*#__PURE__*/_jsx("ul", {
+          role: "group",
+          ...{
+            className: "x1d7crt5 xb2q83l x1rclw80 x78zum5 xdt5ytf x3ct3a4 x10im51j x1pu5glt x1c1uobl"
+          },
+          children: renderNodes(node.children ?? [], level + 1)
+        }) : null]
+      }, node.id);
+    });
+  }
+  return /*#__PURE__*/_jsx("ul", {
+    ...props,
+    "aria-label": label,
+    onKeyDown: handleKeyDown,
+    ref: treeRef,
+    role: "tree",
+    ...{
+      className: "x78zum5 xdt5ytf xj0sio9 x3ct3a4 x10im51j x1c1uobl"
+    },
+    children: renderNodes(nodes, 1)
+  });
+}

package/dist/TreeList/index.d.ts

@@ -0,0 +1 @@
+export { TreeList, type TreeListProps, type TreeNode } from './TreeList.js';

package/dist/TreeList/index.js

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

package/dist/Typeahead/Typeahead.d.ts

@@ -0,0 +1,20 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+/** One suggestion offered by a `Typeahead`. */
+export interface TypeaheadOption {
+    readonly label: string;
+    readonly value: string;
+}
+/** Props for a text field with filtered suggestions. */
+export interface TypeaheadProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-controls' | 'aria-expanded' | 'autoComplete' | 'children' | 'className' | 'onChange' | 'onKeyDown' | 'onSelect' | 'role' | 'type' | 'value'> {
+    readonly emptyMessage?: ReactNode;
+    readonly inputValue: string;
+    readonly onInputValueChange: (value: string) => void;
+    readonly onSelect: (option: TypeaheadOption) => void;
+    readonly options: readonly TypeaheadOption[];
+}
+/**
+ * Filters suggestions as the reader types, following the ARIA combobox
+ * pattern: the input keeps focus and `aria-activedescendant` names the
+ * highlighted option, so a screen reader announces it without focus moving.
+ */
+export declare function Typeahead({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, disabled, emptyMessage, id, inputValue, onInputValueChange, onSelect, options, readOnly, required, ...props }: TypeaheadProps): import("react").JSX.Element;

package/dist/Typeahead/Typeahead.doc.d.ts

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

package/dist/Typeahead/Typeahead.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const typeaheadDoc = {
+  name: 'Typeahead',
+  description: 'Filters suggestions as the reader types.',
+  props: [{
+    name: 'emptyMessage',
+    description: 'States that nothing matched.'
+  }, {
+    name: 'inputValue',
+    description: 'Controls the text in the field.'
+  }, {
+    name: 'onInputValueChange',
+    description: 'Receives the typed text.'
+  }, {
+    name: 'onSelect',
+    description: 'Receives the chosen suggestion.'
+  }, {
+    name: 'options',
+    description: 'Supplies the suggestions already filtered.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, onChange, onKeyDown, onSelect, role, type, value, autoComplete, and the combobox aria attributes'],
+  example: '<Typeahead inputValue={query} onInputValueChange={setQuery} onSelect={choose} options={matches} />',
+  storyId: 'core-typeahead--default'
+};