@vectara/vectara-ui 16.4.0 → 16.5.0

package/lib/components/index.d.ts

@@ -43,6 +43,8 @@ import { InfoListItemType, VuiInfoListItem } from "./infoList/InfoListItem";
 import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiInfoTable, InfoTableColumnAlign, InfoTableRow, InfoTableRowType } from "./infoTable/InfoTable";
 import { VuiInProgress } from "./inProgress/InProgress";
+import { VuiKvTable } from "./kvTable/KvTable";
+import { KvTableItem, KvTableItems, KvTablePadding, KvTableAlign } from "./kvTable/types";
 import { VuiLink, VuiLinkInternal } from "./link/Link";
 import { LinkProps } from "./link/types";
 import { VuiList } from "./list/List";
@@ -97,5 +99,5 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export type { AnchorSide, AppContentPadding, ButtonColor, CalloutColor, ChatLanguage, ChatStyle, ChatTurn, CheckboxConfig, CodeEditorColorConfig, CodeEditorError, CodeLanguage, InfoListItemType, InfoListType, InfoTableColumnAlign, InfoTableRow, InfoTableRowType, KvTableAlign, KvTableItem, KvTableItems, KvTablePadding, LinkProps, MenuItem, OptionListItem, Pagination, RadioButtonConfig, SearchResult, SearchSuggestion, Sections, SectionItem, SpansRow, Stat, StepStatus, StepSize, Steps, StepsVertical, StepVerticalStatus, TabSize, Tree, TreeItem };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/index.js

@@ -39,6 +39,7 @@ import { VuiInfoListItem } from "./infoList/InfoListItem";
 import { VuiInfoMenu } from "./infoMenu/InfoMenu";
 import { VuiInfoTable } from "./infoTable/InfoTable";
 import { VuiInProgress } from "./inProgress/InProgress";
+import { VuiKvTable } from "./kvTable/KvTable";
 import { VuiLink, VuiLinkInternal } from "./link/Link";
 import { VuiList } from "./list/List";
 import { VuiMenu } from "./menu/Menu";
@@ -89,4 +90,4 @@ import { VuiInfoTooltip } from "./tooltip/InfoTooltip";
 import { VuiTopicButton } from "./topicButton/TopicButton";
 import { copyToClipboard } from "../utils/copyToClipboard";
 import { toRgb, toRgba } from "./context/Theme";
-export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };
+export { BADGE_COLOR, BUTTON_COLOR, BUTTON_SIZE, CALLOUT_COLOR, CALLOUT_SIZE, ICON_COLOR, ICON_SIZE, ICON_TYPE, PROGRESS_BAR_COLOR, SPACER_SIZE, SPINNER_COLOR, SKELETON_COLOR, SPINNER_SIZE, TAB_SIZE, TEXT_COLOR, TEXT_SIZE, TITLE_SIZE, addNotification, copyToClipboard, generateTokensProvider, toRgb, toRgba, VuiAccordion, VuiAccountButton, VuiAppContent, VuiAppHeader, VuiAppLayout, VuiAppSideNav, VuiAppSideNavLink, VuiAppSideNavGroup, VuiBadge, VuiButtonPrimary, VuiButtonSecondary, VuiButtonTertiary, VuiIconButton, VuiCallout, VuiCard, VuiChat, VuiCheckbox, VuiCode, VuiCodeEditor, VuiComplexConfigurationButton, VuiContextProvider, VuiCopyButton, VuiDatePicker, VuiDateRangePicker, VuiDrawer, VuiErrorBoundary, VuiFlexContainer, VuiFlexItem, VuiFormGroup, VuiGrid, VuiGridItem, VuiHorizontalRule, VuiIcon, VuiImage, VuiImagePreview, VuiInfoList, VuiInfoListItem, VuiInfoMenu, VuiInfoTable, VuiInfoTooltip, VuiKvTable, VuiInProgress, VuiItemsInput, VuiLabel, VuiLink, VuiLinkInternal, VuiList, VuiMenu, VuiMenuItem, VuiModal, VuiNotifications, VuiNumberInput, VuiOptionsButton, VuiOptionsList, VuiOptionsListItem, VuiPagination, VuiPanel, VuiPasswordInput, VuiPopover, VuiPortal, VuiProgressBar, VuiPrompt, VuiRadioButton, VuiScreenBlock, VuiSearchInput, VuiSearchResult, VuiSearchSelect, VuiSelect, VuiSetting, VuiSimpleCard, VuiSimpleGrid, VuiSpacer, VuiSpans, VuiSpinner, VuiStat, VuiStatList, VuiStatus, VuiSteps, VuiStepsVertical, VuiSummary, VuiSkeleton, VuiSummaryCitation, VuiSuperCheckboxGroup, VuiSuperRadioGroup, VuiTable, VuiTab, VuiTabbedRoutes, VuiTabs, VuiTabsNavigator, VuiText, VuiTextArea, VuiTextColor, VuiTextInput, VuiTimeline, VuiTimelineItem, VuiTitle, VuiToggle, VuiTooltip, VuiTopicButton };

package/lib/components/kvTable/KvTable.d.ts

@@ -0,0 +1,11 @@
+import { KvTableAlign, KvTableItems, KvTablePadding } from "./types";
+type Props = {
+    items: KvTableItems;
+    keyHeader?: React.ReactNode;
+    valueHeader?: React.ReactNode;
+    label?: string;
+    padding?: KvTablePadding;
+    align?: KvTableAlign;
+};
+export declare const VuiKvTable: ({ items, keyHeader, valueHeader, label, padding, align }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/kvTable/KvTable.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+function normalizeItems(items) {
+    if (Array.isArray(items))
+        return items;
+    return Object.entries(items).map(([key, value]) => ({
+        key,
+        value: value == null ? "" : String(value)
+    }));
+}
+const paddingToClassMap = {
+    xxs: "vuiKvTable--paddingXxs",
+    xs: "vuiKvTable--paddingXs",
+    s: "vuiKvTable--paddingS"
+};
+const alignToClassMap = {
+    top: "vuiKvTable--alignTop",
+    middle: "vuiKvTable--alignMiddle",
+    bottom: "vuiKvTable--alignBottom"
+};
+export const VuiKvTable = ({ items, keyHeader, valueHeader, label, padding = "xs", align = "middle" }) => {
+    const hasHeader = keyHeader !== undefined || valueHeader !== undefined;
+    const classes = classNames("vuiKvTable", paddingToClassMap[padding], alignToClassMap[align]);
+    const normalizedItems = normalizeItems(items);
+    return (_jsxs("table", Object.assign({ className: classes, "aria-label": label }, { children: [hasHeader && (_jsx("thead", { children: _jsxs("tr", { children: [keyHeader !== undefined && _jsx("th", { children: keyHeader }), valueHeader !== undefined && _jsx("th", { children: valueHeader })] }) })), _jsx("tbody", { children: normalizedItems.map((item, i) => (_jsxs("tr", { children: [_jsx("th", Object.assign({ scope: "row", className: "vuiKvTableCell--key" }, { children: item.key })), _jsx("td", Object.assign({ className: "vuiKvTableCell--value" }, { children: item.value }))] }, i))) })] })));
+};

package/lib/components/kvTable/_index.scss

@@ -0,0 +1,85 @@
+.vuiKvTable {
+  width: 100%;
+  table-layout: auto;
+  border: 1px solid var(--vui-color-border-light);
+
+  thead {
+    background-color: var(--vui-color-light-shade);
+    border-bottom: 1px solid var(--vui-color-border-light);
+  }
+
+  thead th {
+    font-size: $fontSizeSmall;
+    font-weight: $fontWeightBold;
+    padding: $sizeXs $sizeS;
+    text-align: left;
+  }
+
+  tbody tr {
+    border-bottom: 1px solid var(--vui-color-border-light);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  td {
+    font-size: $fontSizeStandard;
+  }
+}
+
+// Key cell: row header, subdued color, natural (non-wrapping) width.
+.vuiKvTableCell--key {
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+  font-weight: $fontWeightNormal;
+  font-size: $fontSizeStandard;
+  text-align: left;
+}
+
+// Value cell: consumes all remaining width in auto-layout table.
+.vuiKvTableCell--value {
+  width: 100%;
+}
+
+.vuiKvTable--paddingXxs {
+  td,
+  .vuiKvTableCell--key {
+    padding: $sizeXxs $sizeS;
+  }
+}
+
+.vuiKvTable--paddingXs {
+  td,
+  .vuiKvTableCell--key {
+    padding: $sizeXs $sizeS;
+  }
+}
+
+.vuiKvTable--paddingS {
+  td,
+  .vuiKvTableCell--key {
+    padding: $sizeS $sizeS;
+  }
+}
+
+.vuiKvTable--alignTop {
+  td,
+  .vuiKvTableCell--key {
+    vertical-align: top;
+  }
+}
+
+.vuiKvTable--alignMiddle {
+  td,
+  .vuiKvTableCell--key {
+    vertical-align: middle;
+  }
+}
+
+.vuiKvTable--alignBottom {
+  td,
+  .vuiKvTableCell--key {
+    vertical-align: bottom;
+  }
+}

package/lib/components/kvTable/types.d.ts

@@ -0,0 +1,7 @@
+export type KvTableItem = {
+    key: React.ReactNode;
+    value: React.ReactNode;
+};
+export type KvTableItems = KvTableItem[] | Record<string, unknown>;
+export type KvTablePadding = "xxs" | "xs" | "s";
+export type KvTableAlign = "top" | "middle" | "bottom";

package/lib/components/kvTable/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/modal/Modal.js

@@ -59,11 +59,20 @@ export const VuiModal = (_a) => {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 0);
     };
+    // Handle outside clicks, but ignore clicks on notifications.
+    const handleClickOutside = (event) => {
+        const target = event.target;
+        // Check if the click is within a notification.
+        if (target.closest("[data-awareness='notification']")) {
+            return;
+        }
+        onCloseDelayed();
+    };
     const containerClasses = classNames("vuiModalContainer", {
         "vuiModalContainer-isLoaded": showTransition
     });
     const classes = classNames("vuiModal", `vuiModal--${color}`, `vuiModal--${size}`, className);
-    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? onCloseDelayed : undefined, 
+    return (_jsx(VuiPortal, { children: (isOpen || isContentVisible || showTransition) && (_jsx(VuiScreenBlock, Object.assign({ type: "modal", isHidden: !isOpen }, { children: _jsx(FocusOn, Object.assign({ onEscapeKey: onCloseDelayed, onClickOutside: canClickOutsideToClose ? handleClickOutside : undefined, 
                 // Enable manual focus return to work.
                 returnFocus: false, 
                 // Enable focus on contents when it's open,

package/lib/styles/index.css

@@ -3864,6 +3864,73 @@ h2.react-datepicker__current-month {
   background-color: var(--vui-color-light-shade);
 }
 
+.vuiKvTable {
+  width: 100%;
+  table-layout: auto;
+  border: 1px solid var(--vui-color-border-light);
+}
+.vuiKvTable thead {
+  background-color: var(--vui-color-light-shade);
+  border-bottom: 1px solid var(--vui-color-border-light);
+}
+.vuiKvTable thead th {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 8px 12px;
+  text-align: left;
+}
+.vuiKvTable tbody tr {
+  border-bottom: 1px solid var(--vui-color-border-light);
+}
+.vuiKvTable tbody tr:last-child {
+  border-bottom: none;
+}
+.vuiKvTable td {
+  font-size: 14px;
+}
+
+.vuiKvTableCell--key {
+  color: var(--vui-color-subdued-shade);
+  white-space: nowrap;
+  font-weight: 400;
+  font-size: 14px;
+  text-align: left;
+}
+
+.vuiKvTableCell--value {
+  width: 100%;
+}
+
+.vuiKvTable--paddingXxs td,
+.vuiKvTable--paddingXxs .vuiKvTableCell--key {
+  padding: 4px 12px;
+}
+
+.vuiKvTable--paddingXs td,
+.vuiKvTable--paddingXs .vuiKvTableCell--key {
+  padding: 8px 12px;
+}
+
+.vuiKvTable--paddingS td,
+.vuiKvTable--paddingS .vuiKvTableCell--key {
+  padding: 12px 12px;
+}
+
+.vuiKvTable--alignTop td,
+.vuiKvTable--alignTop .vuiKvTableCell--key {
+  vertical-align: top;
+}
+
+.vuiKvTable--alignMiddle td,
+.vuiKvTable--alignMiddle .vuiKvTableCell--key {
+  vertical-align: middle;
+}
+
+.vuiKvTable--alignBottom td,
+.vuiKvTable--alignBottom .vuiKvTableCell--key {
+  vertical-align: bottom;
+}
+
 .vuiLink {
   color: var(--vui-color-primary-shade) !important;
   text-decoration: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.4.0",
+  "version": "16.5.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/drawer/PrimaryDrawer.tsx

@@ -218,6 +218,20 @@ export const PrimaryDrawer = () => {
             that the focus management and scroll locking still work as expected.
           </p>
         </VuiText>
+
+        <VuiSpacer size="m" />
+
+        <VuiButtonSecondary
+          color="primary"
+          onClick={() => {
+            addNotification({
+              color: "primary",
+              message: "Just some information, FYI"
+            });
+          }}
+        >
+          Add notification
+        </VuiButtonSecondary>
       </VuiModal>
 
       <VuiNotifications />

package/src/docs/pages/kvTable/Simple.tsx

@@ -0,0 +1,19 @@
+import { VuiKvTable } from "../../../lib";
+
+export const Simple = () => {
+  return (
+    <VuiKvTable
+      label="Span details"
+      items={{
+        span_id: "b7ad6b7169203331",
+        parent_span_id: "–",
+        trace_id: "0af7651916cd43dd8448eb211c80319c",
+        status: "ok",
+        started_at: "Apr 22, 14:32:11 UTC",
+        duration: "12.48s",
+        step_name: "research",
+        event_id: "evt_9a1f"
+      }}
+    />
+  );
+};

package/src/docs/pages/kvTable/WithHeader.tsx

@@ -0,0 +1,26 @@
+import { VuiBadge, VuiKvTable } from "../../../lib";
+
+export const WithHeader = () => {
+  return (
+    <VuiKvTable
+      label="LLM call attributes"
+      keyHeader="Attribute"
+      valueHeader="Value"
+      items={[
+        { key: "model", value: "claude-sonnet-4-5" },
+        { key: "provider_name", value: "anthropic" },
+        { key: "input_tokens", value: "18432" },
+        { key: "output_tokens", value: "2104" },
+        { key: "cache_read_input_tokens", value: "12000" },
+        { key: "temperature", value: "0.2" },
+        { key: "max_tokens", value: "4096" },
+        {
+          key: "status",
+          value: (
+            <VuiBadge color="success">ok</VuiBadge>
+          )
+        }
+      ]}
+    />
+  );
+};

package/src/docs/pages/kvTable/index.tsx

@@ -0,0 +1,22 @@
+import { Simple } from "./Simple";
+import { WithHeader } from "./WithHeader";
+
+const SimpleSource = require("!!raw-loader!./Simple");
+const WithHeaderSource = require("!!raw-loader!./WithHeader");
+
+export const kvTable = {
+  name: "KV Table",
+  path: "/kvTable",
+  examples: [
+    {
+      name: "Simple",
+      component: <Simple />,
+      source: SimpleSource.default.toString()
+    },
+    {
+      name: "With header",
+      component: <WithHeader />,
+      source: WithHeaderSource.default.toString()
+    }
+  ]
+};

package/src/docs/pages.tsx

@@ -24,6 +24,7 @@ import { image } from "./pages/image";
 import { infoList } from "./pages/infoList";
 import { infoMenu } from "./pages/infoMenu";
 import { infoTable } from "./pages/infoTable";
+import { kvTable } from "./pages/kvTable";
 import { inProgress } from "./pages/inProgress";
 import { input } from "./pages/input";
 import { itemsInput } from "./pages/itemsInput";
@@ -88,7 +89,7 @@ export const categories: Category[] = [
   },
   {
     name: "Info",
-    pages: [table, spans, infoTable, infoList, statList, list, pagination]
+    pages: [table, spans, infoTable, kvTable, infoList, statList, list, pagination]
   },
   {
     name: "Layout",