@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Typeahead/Typeahead.js

@@ -0,0 +1,177 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { scrolling } from '../scrolling/index.js';
+import { useInternationalization } from '../i18n/index.js';
+import { useFieldControl } from '../Field/index.js';
+
+// The popup hangs one hairline gap below the field it belongs to.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const listboxOffset = `calc(100% + ${semanticTokens.spacingXs})`;
+// Roughly eight rows before the list starts scrolling.
+const listboxHeight = `calc(8 * ${semanticTokens.spacing2xl})`;
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const markHeight = '64%';
+const styles = {
+  panel: {
+    kWkggS: "x40o0ze",
+    kaIpWk: "x7xrhi9",
+    kGVxlE: "x165nt33",
+    k87sOh: "xvxsu38",
+    kkqhue: "x17y0mx6",
+    kskxy: "xwl5e8q",
+    kORKVm: "x1odjw0f",
+    k8WAf4: "x10y07nz",
+    kVAEAm: "x10l6tqk",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  }
+};
+
+/** One suggestion offered by a `Typeahead`. */
+
+/** Props for a text field with filtered suggestions. */
+
+/**
+ * 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 function Typeahead({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  emptyMessage,
+  id,
+  inputValue,
+  onInputValueChange,
+  onSelect,
+  options,
+  readOnly,
+  required,
+  ...props
+}) {
+  const field = useFieldControl();
+  const {
+    messages
+  } = useInternationalization();
+  const listboxId = useId();
+  const optionPrefix = useId();
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const expanded = open && inputValue !== '';
+  const activeOption = options[activeIndex];
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const isInvalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleKeyDown(event) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      setOpen(true);
+      if (options.length > 0) {
+        const step = event.key === 'ArrowDown' ? 1 : -1;
+        setActiveIndex(index => (index + step + options.length) % options.length);
+      }
+      return;
+    }
+    if (event.key === 'Home' || event.key === 'End') {
+      if (!expanded || options.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      setActiveIndex(event.key === 'Home' ? 0 : options.length - 1);
+      return;
+    }
+    if (event.key === 'Enter' && expanded && activeOption) {
+      event.preventDefault();
+      onSelect(activeOption);
+      setOpen(false);
+      return;
+    }
+    if (event.key === 'Escape') {
+      setOpen(false);
+    }
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "xrvj5dj x1n2onr6"
+    },
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      "aria-activedescendant": expanded && activeOption ? `${optionPrefix}-${activeIndex}` : undefined,
+      "aria-autocomplete": "list"
+      // Named only while the popup it points at is rendered.
+      ,
+      "aria-controls": expanded ? listboxId : undefined,
+      "aria-describedby": describedBy,
+      "aria-expanded": expanded,
+      "aria-invalid": resolvedInvalid,
+      autoComplete: "off",
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      onChange: event => {
+        onInputValueChange(event.currentTarget.value);
+        setActiveIndex(0);
+        setOpen(true);
+      },
+      onKeyDown: handleKeyDown,
+      readOnly: readOnly,
+      required: required ?? field?.required,
+      role: "combobox",
+      value: inputValue,
+      ...{
+        0: {
+          className: "xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg xj0sio9 x1ti3rys xr8hsnb xgz4m7n x1ezks3f x10y07nz x1qtbwip x1elc2ff xshfolx xxjumz xh8yej3 x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xyo1xaz"
+        },
+        2: {
+          className: "x8kq9my x1jnjmdy xpxnlqs x9f619 xj0sio9 x1ti3rys xr8hsnb xgz4m7n x1ezks3f x10y07nz x1qtbwip x1elc2ff xshfolx xxjumz xh8yej3 x1e4qbc8 x48zea8 x1oulntk x609gy3 xn50xp2 x15meki4 xz32tfx x1p22nma x17lds6u xyo1xaz x1ixvsy6 xilcjya x1y4yzzg"
+        },
+        1: {
+          className: "xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x1y4yzzg xj0sio9 x1ti3rys xr8hsnb xgz4m7n x1ezks3f x10y07nz x1qtbwip x1elc2ff xshfolx xxjumz xh8yej3 x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u xcf5wgx x1v4z90s x1r1toob"
+        },
+        3: {
+          className: "x8kq9my x1jnjmdy xpxnlqs x9f619 xj0sio9 x1ti3rys xr8hsnb xgz4m7n x1ezks3f x10y07nz x1qtbwip x1elc2ff xshfolx xxjumz xh8yej3 x1e4qbc8 x48zea8 x1oulntk x609gy3 x15meki4 xz32tfx x1p22nma x17lds6u x1ixvsy6 x1y4yzzg xcf5wgx x1v4z90s x1r1toob"
+        }
+      }[!!(readOnly && !disabled) << 1 | !!(isInvalid && !disabled) << 0],
+      type: "text"
+    }), !expanded ? null : /*#__PURE__*/_jsxs("div", {
+      ...stylex.props(styles.panel, scrolling.region),
+      children: [/*#__PURE__*/_jsx("ul", {
+        id: listboxId,
+        role: "listbox",
+        ...{
+          className: "x3ct3a4 x10im51j x1c1uobl"
+        },
+        children: options.map((option, index) => /*#__PURE__*/_jsx("li", {
+          "aria-selected": index === activeIndex,
+          id: `${optionPrefix}-${index}`,
+          onClick: () => {
+            onSelect(option);
+            setOpen(false);
+          },
+          role: "option",
+          ...{
+            0: {
+              className: "x17y7oyd x1ypdohk xj0sio9 x1ti3rys xq5azjn x1ezks3f x10y07nz x1wkw8jr x1n2onr6 x1elc2ff xs2xxs2 xxjumz x1c0aqn8 x1t0gddj"
+            },
+            1: {
+              className: "x1ypdohk xj0sio9 x1ti3rys xq5azjn x1ezks3f x10y07nz x1wkw8jr x1n2onr6 x1elc2ff xs2xxs2 xxjumz x798k6d x1y4yzzg x12ukevf x1cpjm7i xmpob1l x1knuo7r x1682cnc x1hmns74 xkjykve xell8bx"
+            }
+          }[!!(index === activeIndex) << 0],
+          children: option.label
+        }, option.value))
+      }), options.length === 0 ?
+      /*#__PURE__*/
+      // A listbox may own nothing but options, so the notice sits beside
+      // it and announces itself instead.
+      _jsx("p", {
+        role: "status",
+        ...{
+          className: "x17y7oyd xj0sio9 xltg2ad xgz4m7n x1ezks3f x10im51j x10y07nz x1wkw8jr"
+        },
+        children: emptyMessage ?? messages.typeaheadEmpty
+      }) : null]
+    })]
+  });
+}

package/dist/Typeahead/index.d.ts

@@ -0,0 +1 @@
+export { Typeahead, type TypeaheadOption, type TypeaheadProps, } from './Typeahead.js';

package/dist/Typeahead/index.js

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

package/dist/TypeaheadItem/TypeaheadItem.d.ts

@@ -0,0 +1,15 @@
+import type { LiHTMLAttributes, ReactNode } from 'react';
+/** Props for one suggestion inside a typeahead listbox. */
+export interface TypeaheadItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'aria-disabled' | 'aria-selected' | 'className' | 'role'> {
+    readonly active?: boolean;
+    readonly description?: ReactNode;
+    readonly disabled?: boolean;
+    readonly leading?: ReactNode;
+    readonly trailing?: ReactNode;
+}
+/**
+ * One suggestion, for a caller rendering its own list. It reports
+ * `aria-selected` rather than taking focus, because the combobox pattern
+ * keeps focus in the input and points at the active option instead.
+ */
+export declare function TypeaheadItem({ active, children, description, disabled, leading, trailing, ...props }: TypeaheadItemProps): import("react").JSX.Element;

package/dist/TypeaheadItem/TypeaheadItem.doc.d.ts

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

package/dist/TypeaheadItem/TypeaheadItem.doc.js

@@ -0,0 +1,24 @@
+import "../styles/stylex.css";
+export const typeaheadItemDoc = {
+  name: 'TypeaheadItem',
+  description: 'One suggestion inside a typeahead listbox.',
+  props: [{
+    name: 'active',
+    description: 'Marks the option the combobox points at.'
+  }, {
+    name: 'description',
+    description: 'Adds secondary text under the label.'
+  }, {
+    name: 'disabled',
+    description: 'Marks the option as unavailable.'
+  }, {
+    name: 'leading',
+    description: 'Places content before the label.'
+  }, {
+    name: 'trailing',
+    description: 'Places content after the label.'
+  }],
+  inheritedProps: ['LiHTMLAttributes<HTMLLIElement> except aria-disabled, aria-selected, className, and role'],
+  example: '<TypeaheadItem active>Ada Lovelace</TypeaheadItem>',
+  storyId: 'core-typeahead--states'
+};

package/dist/TypeaheadItem/TypeaheadItem.js

@@ -0,0 +1,84 @@
+import * as stylex from '@stylexjs/stylex';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Item } from '../Item/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const markWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+const markHeight = '64%';
+const styles = {
+  option: {
+    kMwMTN: "x17y7oyd",
+    kkrTdU: "x1ypdohk",
+    kMv6JI: "xj0sio9",
+    kGuDYH: "x1ti3rys",
+    kb6lSQ: "xq5azjn",
+    kLWn49: "x1ezks3f",
+    k8WAf4: "x10y07nz",
+    kg3NbH: "x1wkw8jr",
+    kVAEAm: "x1n2onr6",
+    kIyJzY: "x1elc2ff",
+    k1ekBW: "xs2xxs2",
+    kAMwcw: "xxjumz",
+    $$css: true
+  },
+  idle: {
+    kGzVvX: "x1c0aqn8",
+    kDPRdz: "x1t0gddj",
+    $$css: true
+  },
+  active: {
+    kWkggS: "x798k6d",
+    kMwMTN: "x1y4yzzg",
+    kLkRvE: "x12ukevf",
+    kgeoSG: "x1cpjm7i",
+    kgzTxl: "xmpob1l",
+    k96MEf: "x1knuo7r",
+    kSJ0CW: "x1682cnc",
+    kEoFBp: "x1hmns74",
+    kcTAPf: "xkjykve",
+    kOlAkY: "xell8bx",
+    $$css: true
+  },
+  disabled: {
+    kMwMTN: "x1yx38ia",
+    kkrTdU: "xt0e3qv",
+    $$css: true
+  }
+};
+
+/** Props for one suggestion inside a typeahead listbox. */
+
+/**
+ * One suggestion, for a caller rendering its own list. It reports
+ * `aria-selected` rather than taking focus, because the combobox pattern
+ * keeps focus in the input and points at the active option instead.
+ */
+export function TypeaheadItem({
+  active = false,
+  children,
+  description,
+  disabled = false,
+  leading,
+  trailing,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("li", {
+    ...props,
+    "aria-disabled": disabled || undefined,
+    "aria-selected": active,
+    role: "option",
+    ...stylex.props(styles.option, disabled ? styles.disabled : active ? styles.active : styles.idle),
+    children: /*#__PURE__*/_jsx(Item, {
+      ...(description === undefined ? {} : {
+        description
+      }),
+      ...(leading === undefined ? {} : {
+        leading
+      }),
+      ...(trailing === undefined ? {} : {
+        trailing
+      }),
+      children: children
+    })
+  });
+}

package/dist/TypeaheadItem/index.d.ts

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

package/dist/TypeaheadItem/index.js

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

package/dist/VStack/VStack.d.ts

@@ -0,0 +1,8 @@
+import { type StackProps } from '../Stack/index.js';
+/** Props for a column of evenly spaced children. */
+export type VStackProps = StackProps;
+/**
+ * Arranges children in a column. It is an alias for `Stack`, kept so a layout
+ * written with `HStack` reads symmetrically.
+ */
+export declare function VStack(props: VStackProps): import("react").JSX.Element;

package/dist/VStack/VStack.doc.d.ts

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

package/dist/VStack/VStack.doc.js

@@ -0,0 +1,15 @@
+import "../styles/stylex.css";
+export const vStackDoc = {
+  name: 'VStack',
+  description: 'Arranges children in an evenly spaced column.',
+  props: [{
+    name: 'align',
+    description: 'Places children along the cross axis.'
+  }, {
+    name: 'gap',
+    description: 'Selects the space between children.'
+  }],
+  inheritedProps: ['StackProps, which VStack forwards unchanged'],
+  example: '<VStack gap="md">…</VStack>',
+  storyId: 'core-v-stack--default'
+};

package/dist/VStack/VStack.js

@@ -0,0 +1,14 @@
+import { Stack } from '../Stack/index.js';
+
+/** Props for a column of evenly spaced children. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Arranges children in a column. It is an alias for `Stack`, kept so a layout
+ * written with `HStack` reads symmetrically.
+ */
+export function VStack(props) {
+  return /*#__PURE__*/_jsx(Stack, {
+    ...props
+  });
+}

package/dist/VStack/index.d.ts

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

package/dist/VStack/index.js

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

package/dist/authoring.stylex.d.ts

@@ -16,6 +16,7 @@ export declare const semanticTokens: stylex.VarGroup<Readonly<{
     colorDisabledSurface: string;
     colorDisabledText: string;
     colorFocus: string;
+    colorScrim: string;
     borderDefault: string;
     borderStrong: string;
     borderInteractive: string;
@@ -48,6 +49,12 @@ export declare const semanticTokens: stylex.VarGroup<Readonly<{
     fontWeightStrong: string;
     lineHeightBody: string;
     lineHeightHeading: string;
+    letterSpacingTitle: string;
+    letterSpacingHeading: string;
+    letterSpacingBody: string;
+    letterSpacingLabel: string;
+    letterSpacingEyebrow: string;
+    letterSpacingMono: string;
     spacingXs: string;
     spacingSm: string;
     spacingMd: string;

package/dist/authoring.stylex.js

@@ -17,6 +17,7 @@ export const semanticTokens = {
   colorDisabledSurface: "var(--xfp4pro)",
   colorDisabledText: "var(--x1cuz3ib)",
   colorFocus: "var(--x1doqpnu)",
+  colorScrim: "var(--x1jm0708)",
   borderDefault: "var(--xwf0as5)",
   borderStrong: "var(--x53p1qr)",
   borderInteractive: "var(--x113cbwm)",
@@ -49,6 +50,12 @@ export const semanticTokens = {
   fontWeightStrong: "var(--x49sa2c)",
   lineHeightBody: "var(--x13wxxvu)",
   lineHeightHeading: "var(--x11tbmtr)",
+  letterSpacingTitle: "var(--xnshwgy)",
+  letterSpacingHeading: "var(--x12enohl)",
+  letterSpacingBody: "var(--xu97p9s)",
+  letterSpacingLabel: "var(--xvejcrh)",
+  letterSpacingEyebrow: "var(--x8l75nk)",
+  letterSpacingMono: "var(--x1qdoiyr)",
   spacingXs: "var(--xdjikt8)",
   spacingSm: "var(--x5vtqbe)",
   spacingMd: "var(--xpochg2)",

package/dist/docs/index.d.ts

@@ -1,33 +1,123 @@
 import { alertDoc } from '../Alert/Alert.doc.js';
+import { alertDialogDoc } from '../AlertDialog/AlertDialog.doc.js';
+import { appShellDoc } from '../AppShell/AppShell.doc.js';
 import { asyncStateDoc } from '../AsyncState/AsyncState.doc.js';
 import { badgeDoc } from '../Badge/Badge.doc.js';
+import { bottomSheetDoc } from '../BottomSheet/BottomSheet.doc.js';
+import { bottomSheetSwitcherDoc } from '../BottomSheetSwitcher/BottomSheetSwitcher.doc.js';
+import { breadcrumbsDoc } from '../Breadcrumbs/Breadcrumbs.doc.js';
 import { buttonDoc } from '../Button/Button.doc.js';
 import { cardDoc } from '../Card/Card.doc.js';
 import { cardFooterDoc } from '../CardFooter/CardFooter.doc.js';
 import { cardHeaderDoc } from '../CardHeader/CardHeader.doc.js';
 import { centerDoc } from '../Center/Center.doc.js';
+import { codeDoc } from '../Code/Code.doc.js';
+import { contextMenuDoc } from '../ContextMenu/ContextMenu.doc.js';
+import { dialogDoc } from '../Dialog/Dialog.doc.js';
 import { dividerDoc } from '../Divider/Divider.doc.js';
+import { dropdownMenuDoc, dropdownMenuItemDoc } from '../DropdownMenu/DropdownMenu.doc.js';
 import { emptyStateDoc } from '../EmptyState/EmptyState.doc.js';
+import { eyebrowDoc } from '../Eyebrow/Eyebrow.doc.js';
 import { fieldDoc } from '../Field/Field.doc.js';
 import { gridDoc } from '../Grid/Grid.doc.js';
 import { headingDoc } from '../Heading/Heading.doc.js';
+import { hoverCardDoc } from '../HoverCard/HoverCard.doc.js';
+import { iconDoc } from '../Icon/Icon.doc.js';
 import { iconButtonDoc } from '../IconButton/IconButton.doc.js';
+import { itemDoc } from '../Item/Item.doc.js';
+import { kbdDoc } from '../Kbd/Kbd.doc.js';
+import { layerDoc } from '../Layer/Layer.doc.js';
+import { layoutDoc } from '../Layout/Layout.doc.js';
+import { listDoc, listItemDoc } from '../List/List.doc.js';
 import { metricGridDoc } from '../MetricGrid/MetricGrid.doc.js';
+import { mobileNavDoc } from '../MobileNav/MobileNav.doc.js';
+import { moreMenuDoc } from '../MoreMenu/MoreMenu.doc.js';
+import { navIconDoc } from '../NavIcon/NavIcon.doc.js';
+import { navItemDoc } from '../NavItem/NavItem.doc.js';
+import { navMenuDoc } from '../NavMenu/NavMenu.doc.js';
+import { outlineDoc } from '../Outline/Outline.doc.js';
+import { overlayDoc } from '../Overlay/Overlay.doc.js';
+import { popoverDoc } from '../Popover/Popover.doc.js';
+import { paginationDoc } from '../Pagination/Pagination.doc.js';
 import { sectionDoc } from '../Section/Section.doc.js';
 import { segmentedControlDoc } from '../SegmentedControl/SegmentedControl.doc.js';
+import { sideNavDoc, sideNavSectionDoc } from '../SideNav/SideNav.doc.js';
 import { skeletonDoc } from '../Skeleton/Skeleton.doc.js';
 import { spinnerDoc } from '../Spinner/Spinner.doc.js';
 import { stackDoc } from '../Stack/Stack.doc.js';
 import { statusDotDoc } from '../StatusDot/StatusDot.doc.js';
+import { tabListDoc } from '../TabList/TabList.doc.js';
 import { tableBodyDoc, tableCaptionDoc, tableCellDoc, tableDoc, tableHeadDoc, tableHeaderCellDoc, tableRowDoc } from '../Table/Table.doc.js';
 import { textAreaDoc } from '../TextArea/TextArea.doc.js';
 import { textDoc } from '../Text/Text.doc.js';
 import { textInputDoc } from '../TextInput/TextInput.doc.js';
+import { toastDoc, toastProviderDoc } from '../Toast/Toast.doc.js';
+import { toolbarDoc } from '../Toolbar/Toolbar.doc.js';
 import { toggleDoc } from '../Toggle/Toggle.doc.js';
+import { topNavDoc } from '../TopNav/TopNav.doc.js';
+import { tooltipDoc } from '../Tooltip/Tooltip.doc.js';
 import { visuallyHiddenDoc } from '../VisuallyHidden/VisuallyHidden.doc.js';
 import { linkDoc, linkProviderDoc } from '../navigation/LinkProvider.doc.js';
 import { themeProviderDoc } from '../theme/Theme.doc.js';
+import { calendarDoc } from '../Calendar/Calendar.doc.js';
+import { checkboxInputDoc } from '../CheckboxInput/CheckboxInput.doc.js';
+import { checkboxListDoc } from '../CheckboxList/CheckboxList.doc.js';
+import { complexSelectorDoc } from '../ComplexSelector/ComplexSelector.doc.js';
+import { dateInputDoc } from '../DateInput/DateInput.doc.js';
+import { datePickerDoc } from '../DatePicker/DatePicker.doc.js';
+import { dateRangeInputDoc } from '../DateRangeInput/DateRangeInput.doc.js';
+import { dateTimeInputDoc } from '../DateTimeInput/DateTimeInput.doc.js';
+import { fieldStatusDoc } from '../FieldStatus/FieldStatus.doc.js';
+import { fileInputDoc } from '../FileInput/FileInput.doc.js';
+import { formLayoutDoc } from '../FormLayout/FormLayout.doc.js';
+import { inputGroupDoc } from '../InputGroup/InputGroup.doc.js';
+import { multiSelectorDoc } from '../MultiSelector/MultiSelector.doc.js';
+import { numberInputDoc } from '../NumberInput/NumberInput.doc.js';
+import { numeralDoc } from '../Numeral/Numeral.doc.js';
+import { radioListDoc } from '../RadioList/RadioList.doc.js';
+import { selectorDoc } from '../Selector/Selector.doc.js';
+import { sliderDoc } from '../Slider/Slider.doc.js';
+import { switchDoc } from '../Switch/Switch.doc.js';
+import { timeInputDoc } from '../TimeInput/TimeInput.doc.js';
+import { typeaheadDoc } from '../Typeahead/Typeahead.doc.js';
+import { aspectRatioDoc } from '../AspectRatio/AspectRatio.doc.js';
+import { avatarDoc } from '../Avatar/Avatar.doc.js';
+import { avatarGroupDoc } from '../AvatarGroup/AvatarGroup.doc.js';
+import { bannerDoc } from '../Banner/Banner.doc.js';
+import { blockquoteDoc } from '../Blockquote/Blockquote.doc.js';
+import { carouselDoc } from '../Carousel/Carousel.doc.js';
+import { citationDoc } from '../Citation/Citation.doc.js';
+import { codeBlockDoc } from '../CodeBlock/CodeBlock.doc.js';
+import { indicatorDoc } from '../Indicator/Indicator.doc.js';
+import { lightboxDoc } from '../Lightbox/Lightbox.doc.js';
+import { markdownDoc } from '../Markdown/Markdown.doc.js';
+import { metadataListDoc } from '../MetadataList/MetadataList.doc.js';
+import { progressBarDoc } from '../ProgressBar/ProgressBar.doc.js';
+import { thumbnailDoc } from '../Thumbnail/Thumbnail.doc.js';
+import { timestampDoc } from '../Timestamp/Timestamp.doc.js';
+import { tokenDoc } from '../Token/Token.doc.js';
+import { tokenizerDoc } from '../Tokenizer/Tokenizer.doc.js';
+import { buttonGroupDoc } from '../ButtonGroup/ButtonGroup.doc.js';
+import { clickableCardDoc } from '../ClickableCard/ClickableCard.doc.js';
+import { collapsibleDoc } from '../Collapsible/Collapsible.doc.js';
+import { commandPaletteDoc } from '../CommandPalette/CommandPalette.doc.js';
+import { hStackDoc } from '../HStack/HStack.doc.js';
+import { overflowListDoc } from '../OverflowList/OverflowList.doc.js';
+import { powerSearchDoc } from '../PowerSearch/PowerSearch.doc.js';
+import { resizableDoc } from '../Resizable/Resizable.doc.js';
+import { resizeHandleDoc } from '../ResizeHandle/ResizeHandle.doc.js';
+import { selectableCardDoc } from '../SelectableCard/SelectableCard.doc.js';
+import { toggleButtonDoc } from '../ToggleButton/ToggleButton.doc.js';
+import { treeListDoc } from '../TreeList/TreeList.doc.js';
+import { vStackDoc } from '../VStack/VStack.doc.js';
+import { chatComposerDoc, chatLayoutDoc, chatMessageDoc, chatMessageListDoc, chatMessageMetadataDoc, chatSystemMessageDoc, chatToolCallsDoc } from '../Chat/Chat.doc.js';
+import { internationalizationProviderDoc } from '../i18n/Internationalization.doc.js';
+import { boxDoc } from '../Box/Box.doc.js';
+import { toggleButtonGroupDoc } from '../ToggleButtonGroup/ToggleButtonGroup.doc.js';
+import { typeaheadItemDoc } from '../TypeaheadItem/TypeaheadItem.doc.js';
+import { topNavMenuDoc } from '../TopNavMenu/TopNavMenu.doc.js';
+import { topNavMegaMenuDoc, topNavMegaMenuFeaturedCardDoc } from '../TopNavMegaMenu/TopNavMegaMenu.doc.js';
 import type { ComponentDoc } from './types.js';
-export { cardDoc, cardFooterDoc, cardHeaderDoc, centerDoc, dividerDoc, gridDoc, headingDoc, sectionDoc, stackDoc, textDoc, visuallyHiddenDoc, alertDoc, asyncStateDoc, badgeDoc, buttonDoc, emptyStateDoc, fieldDoc, iconButtonDoc, metricGridDoc, segmentedControlDoc, skeletonDoc, spinnerDoc, statusDotDoc, tableDoc, tableCaptionDoc, tableHeadDoc, tableBodyDoc, tableRowDoc, tableHeaderCellDoc, tableCellDoc, textAreaDoc, textInputDoc, toggleDoc, linkDoc, linkProviderDoc, themeProviderDoc, };
+export { cardDoc, cardFooterDoc, cardHeaderDoc, centerDoc, codeDoc, contextMenuDoc, dialogDoc, dividerDoc, dropdownMenuDoc, dropdownMenuItemDoc, gridDoc, headingDoc, hoverCardDoc, sectionDoc, stackDoc, textDoc, visuallyHiddenDoc, alertDoc, alertDialogDoc, appShellDoc, asyncStateDoc, badgeDoc, bottomSheetDoc, bottomSheetSwitcherDoc, breadcrumbsDoc, buttonDoc, emptyStateDoc, eyebrowDoc, fieldDoc, iconDoc, iconButtonDoc, itemDoc, kbdDoc, layerDoc, layoutDoc, listDoc, listItemDoc, metricGridDoc, mobileNavDoc, moreMenuDoc, navIconDoc, navItemDoc, navMenuDoc, outlineDoc, overlayDoc, paginationDoc, popoverDoc, segmentedControlDoc, sideNavDoc, sideNavSectionDoc, skeletonDoc, spinnerDoc, statusDotDoc, tabListDoc, tableDoc, tableCaptionDoc, tableHeadDoc, tableBodyDoc, tableRowDoc, tableHeaderCellDoc, tableCellDoc, textAreaDoc, textInputDoc, toastDoc, toastProviderDoc, toggleDoc, toolbarDoc, tooltipDoc, topNavDoc, linkDoc, linkProviderDoc, calendarDoc, checkboxInputDoc, checkboxListDoc, complexSelectorDoc, dateInputDoc, datePickerDoc, dateRangeInputDoc, dateTimeInputDoc, fieldStatusDoc, fileInputDoc, formLayoutDoc, inputGroupDoc, multiSelectorDoc, numberInputDoc, numeralDoc, radioListDoc, selectorDoc, sliderDoc, switchDoc, timeInputDoc, typeaheadDoc, aspectRatioDoc, avatarDoc, avatarGroupDoc, bannerDoc, blockquoteDoc, carouselDoc, citationDoc, codeBlockDoc, indicatorDoc, lightboxDoc, markdownDoc, metadataListDoc, progressBarDoc, thumbnailDoc, timestampDoc, tokenDoc, tokenizerDoc, buttonGroupDoc, clickableCardDoc, collapsibleDoc, commandPaletteDoc, hStackDoc, overflowListDoc, powerSearchDoc, resizableDoc, resizeHandleDoc, selectableCardDoc, toggleButtonDoc, treeListDoc, vStackDoc, chatComposerDoc, chatLayoutDoc, chatMessageDoc, chatMessageListDoc, chatToolCallsDoc, internationalizationProviderDoc, boxDoc, toggleButtonGroupDoc, typeaheadItemDoc, topNavMenuDoc, chatMessageMetadataDoc, chatSystemMessageDoc, topNavMegaMenuDoc, topNavMegaMenuFeaturedCardDoc, themeProviderDoc, };
 export { validateComponentDoc, type ComponentDoc, type ComponentDocField, type ComponentDocProp, } from './types.js';
 export declare const componentDocs: readonly ComponentDoc[];