@misoto22/kioku-ui 0.1.0 → 0.2.0

package/dist/MobileNav/MobileNav.js

@@ -0,0 +1,126 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useFocusTrap } from '../hooks/useFocusTrap.js';
+import { useScrollLock } from '../hooks/useScrollLock.js';
+import { Icon } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+import { Layer } from '../Layer/index.js';
+
+// Wide enough for a two-word destination and its glyph, narrow enough that the
+// page behind it stays visible. Built from the scale, not written as a length.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const drawerMaxWidth = `calc(11 * ${semanticTokens.spacing2xl})`;
+const styles = {
+  drawer: {
+    kWkggS: "x1ixvsy6",
+    kT0f0o: "x1gzn8ix",
+    kfmiAY: "xbx091o",
+    ksu8eU: "xng3xce",
+    kGVxlE: "x1ia5mbg",
+    kMwMTN: "x1y4yzzg",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kMv6JI: "xj0sio9",
+    ks0D6T: "x1jw1975",
+    k3XXqK: "x1t137rt",
+    kORKVm: "x1odjw0f",
+    kmVPX3: "x1cfciu7",
+    khm7nJ: "x13unpfo",
+    kzqmXN: "x1f9tj09",
+    kZs9gx: "x15meki4",
+    kiEn40: "xz32tfx",
+    k7shQP: "x1p22nma",
+    kPJHz1: "x17lds6u",
+    $$css: true
+  }
+};
+
+/** Props for the navigation drawer used on narrow viewports. */
+
+/**
+ * Holds navigation behind a trigger on narrow viewports. It owns its open
+ * state and traps focus inside the drawer while it is open.
+ */
+export function MobileNav({
+  children,
+  closeLabel = 'Close navigation',
+  label,
+  title
+}) {
+  const [open, setOpen] = useState(false);
+  const [drawer, setDrawer] = useState(null);
+  const titleId = useId();
+  useFocusTrap(drawer, open);
+  useScrollLock(open);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(IconButton, {
+      "aria-expanded": open,
+      "aria-label": label,
+      onClick: () => {
+        setOpen(true);
+      },
+      variant: "ghost",
+      children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M4 7h16M4 12h16M4 17h16",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2"
+        })
+      })
+    }), open ? /*#__PURE__*/_jsx(Layer, {
+      children: /*#__PURE__*/_jsx("div", {
+        onMouseDown: event => {
+          if (event.target === event.currentTarget) {
+            setOpen(false);
+          }
+        },
+        ...{
+          className: "x158cxwz x78zum5 x10a8y8t xixxii4"
+        },
+        children: /*#__PURE__*/_jsxs("div", {
+          "aria-labelledby": titleId,
+          "aria-modal": "true",
+          onKeyDown: event => {
+            if (event.key === 'Escape') {
+              setOpen(false);
+            }
+          },
+          ref: setDrawer,
+          role: "dialog",
+          ...stylex.props(styles.drawer, scrolling.region),
+          tabIndex: -1,
+          children: [/*#__PURE__*/_jsxs("div", {
+            ...{
+              className: "x6s0dn4 x1rzuj2w x1w5tod1 xeq6m5c x2w1tkd x78zum5 x1qughib xj1ngls"
+            },
+            children: [/*#__PURE__*/_jsx("p", {
+              id: titleId,
+              ...{
+                className: "x1y4yzzg x69it5h x1fkw5ar x1m30uz7 xmkh2y5 x1vslzj6 x1ghz6dp"
+              },
+              children: title ?? label
+            }), /*#__PURE__*/_jsx(IconButton, {
+              "aria-label": closeLabel,
+              onClick: () => {
+                setOpen(false);
+              },
+              variant: "ghost",
+              children: /*#__PURE__*/_jsx(Icon, {
+                children: /*#__PURE__*/_jsx("path", {
+                  d: "m6 6 12 12M18 6 6 18",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2"
+                })
+              })
+            })]
+          }), children]
+        })
+      })
+    }) : null]
+  });
+}

package/dist/MobileNav/index.d.ts

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

package/dist/MobileNav/index.js

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

package/dist/MoreMenu/MoreMenu.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import type { Alignment, Placement } from '../hooks/useAnchoredPosition.js';
+/** Props for the self-managed overflow menu. */
+export interface MoreMenuProps {
+    readonly alignment?: Alignment;
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly placement?: Placement;
+}
+/**
+ * Collects secondary actions behind one trigger and owns its own open state,
+ * so a caller that has no other reason to hold state does not grow one.
+ */
+export declare function MoreMenu({ alignment, children, label, placement, }: MoreMenuProps): import("react").JSX.Element;

package/dist/MoreMenu/MoreMenu.doc.d.ts

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

package/dist/MoreMenu/MoreMenu.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const moreMenuDoc = {
+  name: 'MoreMenu',
+  description: 'Collects secondary actions behind a self-managed trigger.',
+  props: [{
+    name: 'alignment',
+    description: 'Lines the menu up along the cross axis.'
+  }, {
+    name: 'children',
+    description: 'Supplies the menu items.'
+  }, {
+    name: 'label',
+    description: 'Names the trigger and the menu.'
+  }, {
+    name: 'placement',
+    description: 'Selects the preferred side of the trigger.'
+  }],
+  inheritedProps: ['None; MoreMenu owns its trigger and menu'],
+  example: '<MoreMenu label="More actions"><DropdownMenuItem>Archive</DropdownMenuItem></MoreMenu>',
+  storyId: 'core-more-menu--default'
+};

package/dist/MoreMenu/MoreMenu.js

@@ -0,0 +1,68 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { DropdownMenu } from '../DropdownMenu/index.js';
+import { Icon } from '../Icon/index.js';
+import { IconButton } from '../IconButton/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** Props for the self-managed overflow menu. */
+
+/**
+ * Collects secondary actions behind one trigger and owns its own open state,
+ * so a caller that has no other reason to hold state does not grow one.
+ */
+export function MoreMenu({
+  alignment,
+  children,
+  label,
+  placement
+}) {
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("span", {
+      ref: anchorRef,
+      ...{
+        className: "x3nfvp2"
+      },
+      children: /*#__PURE__*/_jsx(IconButton, {
+        "aria-expanded": open,
+        "aria-haspopup": "menu",
+        "aria-label": label,
+        onClick: () => {
+          setOpen(value => !value);
+        },
+        variant: "ghost",
+        children: /*#__PURE__*/_jsxs(Icon, {
+          children: [/*#__PURE__*/_jsx("circle", {
+            cx: "5",
+            cy: "12",
+            r: "1.75"
+          }), /*#__PURE__*/_jsx("circle", {
+            cx: "12",
+            cy: "12",
+            r: "1.75"
+          }), /*#__PURE__*/_jsx("circle", {
+            cx: "19",
+            cy: "12",
+            r: "1.75"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(DropdownMenu, {
+      ...(alignment ? {
+        alignment
+      } : {}),
+      anchorRef: anchorRef,
+      label: label,
+      onDismiss: () => {
+        setOpen(false);
+      },
+      open: open,
+      ...(placement ? {
+        placement
+      } : {}),
+      children: children
+    })]
+  });
+}

package/dist/MoreMenu/index.d.ts

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

package/dist/MoreMenu/index.js

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

package/dist/MultiSelector/MultiSelector.d.ts

@@ -0,0 +1,17 @@
+import { type HTMLAttributes } from 'react';
+import { type TypeaheadOption } from '../Typeahead/index.js';
+/** Props for choosing several options through a typeahead. */
+export interface MultiSelectorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> {
+    readonly emptyMessage?: string;
+    readonly label: string;
+    readonly onValueChange: (values: readonly string[]) => void;
+    readonly options: readonly TypeaheadOption[];
+    readonly removeLabel?: (label: string) => string;
+    readonly value: readonly string[];
+}
+/**
+ * Chooses several options through a typeahead. Each choice becomes a removable
+ * chip with its own labelled button, so a keyboard reader can undo one pick
+ * without clearing the rest.
+ */
+export declare function MultiSelector({ emptyMessage, label, onValueChange, options, removeLabel, value, ...props }: MultiSelectorProps): import("react").JSX.Element;

package/dist/MultiSelector/MultiSelector.doc.d.ts

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

package/dist/MultiSelector/MultiSelector.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const multiSelectorDoc = {
+  name: 'MultiSelector',
+  description: 'Chooses several options through a typeahead.',
+  props: [{
+    name: 'emptyMessage',
+    description: 'States that nothing matched.'
+  }, {
+    name: 'label',
+    description: 'Names the search field.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next set of values.'
+  }, {
+    name: 'options',
+    description: 'Supplies every selectable option.'
+  }, {
+    name: 'removeLabel',
+    description: 'Builds the name of each remove control.'
+  }, {
+    name: 'value',
+    description: 'Controls the current set of values.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, defaultValue, and onChange'],
+  example: '<MultiSelector label="Owners" onValueChange={setOwners} options={people} value={owners} />',
+  storyId: 'core-multi-selector--default'
+};

package/dist/MultiSelector/MultiSelector.js

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Stack } from '../Stack/index.js';
+import { Token } from '../Token/index.js';
+import { Typeahead } from '../Typeahead/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for choosing several options through a typeahead. */
+
+/**
+ * Chooses several options through a typeahead. Each choice becomes a removable
+ * chip with its own labelled button, so a keyboard reader can undo one pick
+ * without clearing the rest.
+ */
+export function MultiSelector({
+  emptyMessage,
+  label,
+  onValueChange,
+  options,
+  removeLabel = chosen => `Remove ${chosen}`,
+  value,
+  ...props
+}) {
+  const [query, setQuery] = useState('');
+  const chosen = options.filter(option => value.includes(option.value));
+  const available = options.filter(option => !value.includes(option.value) && option.label.toLowerCase().includes(query.toLowerCase()));
+  return /*#__PURE__*/_jsxs(Stack, {
+    ...props,
+    gap: "sm",
+    children: [chosen.length === 0 ? null : /*#__PURE__*/_jsx("ul", {
+      ...{
+        className: "x78zum5 x1a02dak x1iwn5ga x3ct3a4 x10im51j x1c1uobl"
+      },
+      children: chosen.map(option => /*#__PURE__*/_jsx("li", {
+        children: /*#__PURE__*/_jsx(Token, {
+          onRemove: () => {
+            onValueChange(value.filter(entry => entry !== option.value));
+          },
+          removeLabel: removeLabel(option.label),
+          children: option.label
+        })
+      }, option.value))
+    }), /*#__PURE__*/_jsx(Typeahead, {
+      "aria-label": label,
+      ...(emptyMessage === undefined ? {} : {
+        emptyMessage
+      }),
+      inputValue: query,
+      onInputValueChange: setQuery,
+      onSelect: option => {
+        onValueChange([...value, option.value]);
+        setQuery('');
+      },
+      options: available
+    })]
+  });
+}

package/dist/MultiSelector/index.d.ts

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

package/dist/MultiSelector/index.js

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

package/dist/NavIcon/NavIcon.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+/** Props for the fixed icon slot inside navigation. */
+export interface NavIconProps {
+    readonly children: ReactNode;
+}
+/**
+ * Reserves one fixed square for a navigation glyph so labels stay aligned
+ * whether or not a given item carries an icon.
+ */
+export declare function NavIcon({ children }: NavIconProps): import("react").JSX.Element;

package/dist/NavIcon/NavIcon.doc.d.ts

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

package/dist/NavIcon/NavIcon.doc.js

@@ -0,0 +1,12 @@
+import "../styles/stylex.css";
+export const navIconDoc = {
+  name: 'NavIcon',
+  description: 'Reserves a fixed square for a navigation glyph.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the glyph to place.'
+  }],
+  inheritedProps: ['None; NavIcon owns its decorative wrapper'],
+  example: '<NavIcon><Icon>{path}</Icon></NavIcon>',
+  storyId: 'core-nav-icon--default'
+};

package/dist/NavIcon/NavIcon.js

@@ -0,0 +1,21 @@
+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 the fixed icon slot inside navigation. */
+
+/**
+ * Reserves one fixed square for a navigation glyph so labels stay aligned
+ * whether or not a given item carries an icon.
+ */
+export function NavIcon({
+  children
+}) {
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    ...{
+      className: "x6s0dn4 x1heor9g x3nfvp2 x2lah0s xj0sio9 x1ti3rys x13knv98 xl56j7k xgz4m7n x1vslzj6 xk4en2i"
+    },
+    children: children
+  });
+}

package/dist/NavIcon/index.d.ts

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

package/dist/NavIcon/index.js

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

package/dist/NavItem/NavItem.d.ts

@@ -0,0 +1,13 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+/** Props for one destination inside a navigation menu. */
+export interface NavItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-current' | 'className' | 'href'> {
+    readonly current?: boolean;
+    readonly href: string;
+    readonly leading?: ReactNode;
+}
+/**
+ * Links to one destination. `current` marks the reader's location with
+ * `aria-current="page"` as well as ink, so the location is not carried by
+ * colour alone.
+ */
+export declare function NavItem({ children, current, href, leading, ...props }: NavItemProps): import("react").JSX.Element;

package/dist/NavItem/NavItem.doc.d.ts

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

package/dist/NavItem/NavItem.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const navItemDoc = {
+  name: 'NavItem',
+  description: 'Links to one destination and can mark it as current.',
+  props: [{
+    name: 'current',
+    description: 'Marks the destination the reader is on.'
+  }, {
+    name: 'href',
+    description: 'Sets the destination the item links to.'
+  }, {
+    name: 'leading',
+    description: 'Places a glyph before the label.'
+  }],
+  inheritedProps: ['AnchorHTMLAttributes<HTMLAnchorElement> except aria-current, className, and href'],
+  example: '<NavItem current href="/releases">Releases</NavItem>',
+  storyId: 'core-nav-item--default'
+};

package/dist/NavItem/NavItem.js

@@ -0,0 +1,62 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Link } from '../navigation/index.js';
+import { useNavMenuOrientation } from '../NavMenu/orientation.js';
+
+// Two hairlines wide: one weight above the rules that separate regions, so the
+// mark reads as a deliberate stroke rather than as another divider. Written as
+// a calc over the border token so a theme that draws heavier lines gets a
+// heavier mark with it.
+//
+// Seven components declare this same pair, and it cannot be shared: StyleX
+// statically evaluates every identifier a style refers to, and it cannot
+// follow one across a module boundary — `stylex.create` throws on the import.
+// A shared module works for a whole compiled style (see `../scrolling`), not
+// for a raw value another file's `stylex.create` reads.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const hoverMarkHeight = '40%';
+/** Props for one destination inside a navigation menu. */
+
+/**
+ * Links to one destination. `current` marks the reader's location with
+ * `aria-current="page"` as well as ink, so the location is not carried by
+ * colour alone.
+ */
+export function NavItem({
+  children,
+  current = false,
+  href,
+  leading,
+  ...props
+}) {
+  const orientation = useNavMenuOrientation();
+  return /*#__PURE__*/_jsxs(Link, {
+    ...props,
+    ...(current ? {
+      'aria-current': 'page'
+    } : {}),
+    href: href,
+    ...{
+      0: {
+        className: "x6s0dn4 xjbqb8w x8kq9my x17y7oyd x78zum5 xj0sio9 x1ti3rys x1ap6kct xq5azjn xmm8wyw x10y07nz xmenv9i x32qhjx x1n2onr6 xkrqix3 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1682cnc x1hmns74 xbezm4w x1ey6c16 x15meki4 xz32tfx x1p22nma x17lds6u x1rsmet2 x1t0gddj xlk0aih x9cv1sk xhq5o37 x18hrlu5 x5ob0zg xnsz3kh xcekfy0 x124lp2h x1a9ivi1"
+      },
+      2: {
+        className: "x6s0dn4 xjbqb8w x8kq9my x78zum5 xj0sio9 x1ti3rys x1ap6kct xq5azjn xmm8wyw x10y07nz xmenv9i x32qhjx x1n2onr6 xkrqix3 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1682cnc x1hmns74 xbezm4w x1ey6c16 x15meki4 xz32tfx x1p22nma x17lds6u x1y4yzzg xlk0aih x9cv1sk xhq5o37 x18hrlu5 x5ob0zg xnsz3kh xcekfy0 x124lp2h x1a9ivi1"
+      },
+      1: {
+        className: "x6s0dn4 xjbqb8w x8kq9my x17y7oyd x78zum5 xj0sio9 x1ti3rys x1ap6kct xq5azjn xmm8wyw x10y07nz xmenv9i x32qhjx x1n2onr6 xkrqix3 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1rsmet2 x1943h6x xu1tlqk x1t0gddj"
+      },
+      3: {
+        className: "x6s0dn4 xjbqb8w x8kq9my x78zum5 xj0sio9 x1ti3rys x1ap6kct xq5azjn xmm8wyw x10y07nz xmenv9i x32qhjx x1n2onr6 xkrqix3 x1elc2ff xt3l3uh xxjumz x1cpjm7i x1knuo7r x1682cnc x1hmns74 xkjykve xbezm4w x1mh21e1 x1ey6c16 xell8bx x15meki4 xz32tfx x1p22nma x17lds6u x1y4yzzg"
+      }
+    }[!!current << 1 | !!(current || orientation === 'vertical') << 0],
+    children: [leading ?? /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        className: "x13knv98 x2lah0s xk4en2i"
+      }
+    }), children]
+  });
+}

package/dist/NavItem/index.d.ts

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

package/dist/NavItem/index.js

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

package/dist/NavMenu/NavMenu.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type NavMenuOrientation } from './orientation.js';
+/** Props for a named group of navigation destinations. */
+export interface NavMenuProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className'> {
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly orientation?: NavMenuOrientation;
+}
+/**
+ * Groups destinations into a named navigation landmark. Each child becomes a
+ * list item, so assistive technology can announce how many destinations exist.
+ */
+export declare function NavMenu({ children, label, orientation, ...props }: NavMenuProps): import("react").JSX.Element;

package/dist/NavMenu/NavMenu.doc.d.ts

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

package/dist/NavMenu/NavMenu.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const navMenuDoc = {
+  name: 'NavMenu',
+  description: 'Groups destinations into a named navigation landmark.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the destinations.'
+  }, {
+    name: 'label',
+    description: 'Names the landmark for assistive technology.'
+  }, {
+    name: 'orientation',
+    description: 'Selects the axis the list runs along.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLElement> except children and className'],
+  example: '<NavMenu label="Primary"><NavItem href="/">Home</NavItem></NavMenu>',
+  storyId: 'core-nav-menu--default'
+};