@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/Slider/Slider.js

@@ -0,0 +1,133 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useFieldControl } from '../Field/index.js';
+import { clamp } from '../utils/index.js';
+
+/*
+ * A range control is drawn by the engine, and each engine exposes its own
+ * pseudo-elements for the parts and ignores the other's — hence the doubled
+ * declarations. `appearance: 'none'` on the input is what hands authorship
+ * over: without it WebKit keeps painting its own thumb and the one declared
+ * here is ignored outright.
+ *
+ * The filled portion is a gradient on the track rather than a native part,
+ * because only Gecko exposes one (`::-moz-range-progress`) and WebKit has no
+ * counterpart. Painting it the same way in both engines makes them agree by
+ * construction; the Gecko part is then held transparent so it cannot lay a
+ * second fill over the gradient. Styling the track at all also stops WebKit
+ * painting the `accent-color` fill it would otherwise draw, so `accentColor`
+ * has nothing left to colour and is gone.
+ *
+ * The stop position is data — the current value — so it arrives as an inline
+ * custom property, the way `ProgressBar` carries its width.
+ */
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const progressProperty = '--kioku-ui-slider-progress';
+// CSS has no logical direction keyword for a gradient, so this is physical.
+// Under `direction: rtl` the engine flips the control but not the gradient,
+// and the fill would sit on the wrong side.
+//
+// Written out twice rather than built by a helper. StyleX statically evaluates
+// every identifier a style refers to, and a function is not something it can
+// evaluate: a two-argument helper compiled fine through the CLI and failed the
+// consumer that builds this package from source, which is the build that
+// matters because it is the one a user of the library runs.
+const restFill = `linear-gradient(to right, ${semanticTokens.colorAccent} 0 var(${progressProperty}, 0%), ${semanticTokens.colorSurfaceMuted} var(${progressProperty}, 0%) 100%)`;
+const disabledFill = `linear-gradient(to right, ${semanticTokens.colorDisabledText} 0 var(${progressProperty}, 0%), ${semanticTokens.colorDisabledSurface} var(${progressProperty}, 0%) 100%)`;
+
+// The knob's size is a relationship to the rule it rides, not a token that
+// happens to look right: the track plus one spacing step of relief on each
+// side, so it always covers the rule and always overhangs it by the same
+// amount. WebKit then lays it out in flow on top of the track rather than
+// centring it, so it is pulled back by half the difference between the two.
+const trackThickness = semanticTokens.spacingSm;
+const thumbRelief = semanticTokens.spacingXs;
+const thumbSize = `calc(${trackThickness} + ${thumbRelief} * 2)`;
+const thumbCentring = `calc((${trackThickness} - ${thumbSize}) / 2)`;
+/** Props for choosing a number along a visible range. */
+
+/**
+ * Chooses a number along a visible range, and states where it is stopped in
+ * tabular figures beside the track. `formatValue` supplies both that figure and
+ * the spoken text, so "40 percent" can be read and announced where the raw
+ * number would not help.
+ */
+export function Slider({
+  'aria-describedby': ariaDescribedBy,
+  defaultValue,
+  disabled,
+  formatValue,
+  id,
+  max = 100,
+  min = 0,
+  onValueChange,
+  step = 1,
+  style,
+  value,
+  ...props
+}) {
+  const field = useFieldControl();
+  const [internalValue, setInternalValue] = useState(defaultValue ?? min);
+  const current = value ?? internalValue;
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+
+  // Measured from the value the input itself renders, so a controlled and an
+  // uncontrolled slider fill alike, and clamped so a value outside the bounds
+  // cannot put the gradient stop past either end.
+  const span = max - min;
+  const filled = span > 0 ? (clamp(current, min, max) - min) / span * 100 : 0;
+  function handleChange(event) {
+    const next = Number(event.currentTarget.value);
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+  return /*#__PURE__*/_jsxs("span", {
+    ...{
+      className: "x6s0dn4 x78zum5 x1ap6kct"
+    },
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      "aria-describedby": describedBy,
+      ...(formatValue ? {
+        'aria-valuetext': formatValue(current)
+      } : {}),
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      max: max,
+      min: min,
+      onChange: handleChange,
+      step: step,
+      ...{
+        0: {
+          className: "xjyslct xjbqb8w x8bzu9p x1ypdohk xs83m0k xh8yej3 x10im51j xrxpjvj xeuugli xim9sqm xrehox6 xke1osf xspuxwo xibs45w xre6lft x190sim1 x1xh32x5 x1pa892o xydmiip x1vqielv x1d77byu x1dek2a6 x10tpo51 x1n5f1mu xfa5xkh xunt9l3 xv100k4 x14nwjuf x1o337t x1wwh93d x2x32ti x1vc2n96 x15meki4 xz32tfx x1p22nma x17lds6u"
+        },
+        1: {
+          className: "xjyslct xjbqb8w x8bzu9p xs83m0k xh8yej3 x10im51j xrxpjvj xeuugli xke1osf xspuxwo xibs45w x190sim1 x1xh32x5 xydmiip x1vqielv x10tpo51 x1n5f1mu xfa5xkh xv100k4 x14nwjuf x1o337t x1wwh93d x1vc2n96 x15meki4 xz32tfx x1p22nma x17lds6u xt0e3qv x5cn99w x132qrmo x1bzo22h x1gayi0r xp8s1sa x1w4zfnp x711jsy x1wm6e0w"
+        }
+      }[!!disabled << 0],
+      // The stop position is data, so it stays inline — after stylex.props,
+      // which would otherwise overwrite the style attribute it is carried in.
+      style: {
+        ...style,
+        [progressProperty]: `${filled}%`
+      },
+      type: "range",
+      value: current
+    }), /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "x17y7oyd x2lah0s x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xp4054r"
+        },
+        1: {
+          className: "x2lah0s x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xp4054r x1mgtvnk"
+        }
+      }[!!disabled << 0],
+      children: formatValue ? formatValue(current) : String(current)
+    })]
+  });
+}

package/dist/Slider/index.d.ts

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

package/dist/Slider/index.js

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

package/dist/Spinner/Spinner.js

@@ -3,6 +3,10 @@ import { semanticTokens } from '../authoring.stylex.js';
 import "../styles/stylex.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const spin = "x1fy8ia8-B";
+
+// Two hairlines wide. At fourteen pixels a one-pixel ring is a thread: it
+// reads as a control that failed to draw rather than as something turning.
+const ringWidth = `calc(2 * ${semanticTokens.borderWidth})`;
 export function Spinner({
   label,
   ...props
@@ -19,7 +23,7 @@ export function SpinnerVisual() {
   return /*#__PURE__*/_jsx("span", {
     "aria-hidden": "true",
     ...{
-      className: "xslpo9u xa4qsjk xpedhrg x1aquc0h xsus3lq x11a5md6 x2nywlj xnpwncj x1jnjmdy xpxnlqs x1rg5ohu x7s8d8b x1psh5v9"
+      className: "xslpo9u xa4qsjk xpedhrg x1aquc0h x1esw782 xjoehub xilcjya xnpwncj x1jnjmdy x1xc1ci x1rg5ohu x7s8d8b x1psh5v9"
     }
   });
 }

package/dist/StatusDot/StatusDot.d.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'react';
-import type { StatusTone } from '../Badge/index.js';
+import type { BadgeTone } from '../Badge/index.js';
 /** Props for a labelled live-status indicator using semantic status tones. */
 export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'aria-label' | 'children' | 'className' | 'role'> {
     readonly 'aria-label': string;
-    readonly tone?: StatusTone;
+    readonly tone?: BadgeTone;
 }
 export declare function StatusDot({ tone, ...props }: StatusDotProps): import("react").JSX.Element;

package/dist/StatusDot/StatusDot.js

@@ -10,6 +10,14 @@ const styles = {
     kzqmXN: "x1rcf1qu",
     $$css: true
   },
+  neutral: {
+    kWkggS: "xjbqb8w",
+    kVAM5u: "x169nxdn",
+    ksu8eU: "x1jnjmdy",
+    kMzoRj: "xu41ay5",
+    kB7OPa: "x9f619",
+    $$css: true
+  },
   info: {
     kWkggS: "x18i8t7",
     $$css: true

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,9 @@
+import type { ToggleProps } from '../Toggle/index.js';
+/** Props for a control that applies its change immediately. */
+export type SwitchProps = ToggleProps;
+/**
+ * Turns a setting on or off, taking effect at once. Use `Toggle` when the
+ * control expresses a pressed state inside a toolbar instead of a setting,
+ * and a `CheckboxInput` when the value is only submitted with a form.
+ */
+export declare function Switch({ children, defaultPressed, disabled, onClick, onPressedChange, pressed, type, ...props }: SwitchProps): import("react").JSX.Element;

package/dist/Switch/Switch.doc.d.ts

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

package/dist/Switch/Switch.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const switchDoc = {
+  name: 'Switch',
+  description: 'Turns a setting on or off, taking effect immediately.',
+  props: [{
+    name: 'defaultPressed',
+    description: 'Sets the initial uncontrolled state.'
+  }, {
+    name: 'disabled',
+    description: 'Blocks activation.'
+  }, {
+    name: 'onPressedChange',
+    description: 'Receives the next state.'
+  }, {
+    name: 'pressed',
+    description: 'Controls the current state.'
+  }],
+  inheritedProps: ['ToggleProps, the same prop contract Toggle accepts'],
+  example: '<Switch onPressedChange={setLive} pressed={live}>Live updates</Switch>',
+  storyId: 'core-switch--default'
+};

package/dist/Switch/Switch.js

@@ -0,0 +1,86 @@
+import * as stylex from '@stylexjs/stylex';
+import { useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+// The console's switch, in tokens. Its proportions are the point: a track as
+// tall as one spacing step, a knob inset by a hairline on each side, and a
+// travel of exactly the difference. Nothing here is a literal, so the control
+// keeps its proportions when density moves it.
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const trackHeight = semanticTokens.spacingLg;
+const trackWidth = semanticTokens.sizeControlMd;
+const knobInset = `calc(${semanticTokens.borderWidth} * 2)`;
+const knobSize = `calc(${trackHeight} - ${knobInset} * 2)`;
+const knobTravel = `calc(${trackWidth} - ${trackHeight})`;
+/** Props for a control that applies its change immediately. */
+
+/**
+ * Turns a setting on or off, taking effect at once. Use `Toggle` when the
+ * control expresses a pressed state inside a toolbar instead of a setting,
+ * and a `CheckboxInput` when the value is only submitted with a form.
+ */
+export function Switch({
+  children,
+  defaultPressed = false,
+  disabled,
+  onClick,
+  onPressedChange,
+  pressed,
+  type = 'button',
+  ...props
+}) {
+  const [internalPressed, setInternalPressed] = useState(defaultPressed);
+  const isPressed = pressed ?? internalPressed;
+  return /*#__PURE__*/_jsxs("button", {
+    ...props,
+    "aria-checked": isPressed,
+    disabled: disabled,
+    onClick: event => {
+      const nextPressed = !isPressed;
+      if (pressed === undefined) {
+        setInternalPressed(nextPressed);
+      }
+      onPressedChange?.(nextPressed);
+      onClick?.(event);
+    },
+    role: "switch",
+    ...{
+      className: "x6s0dn4 xjbqb8w x9r1u3d x8kq9my x1jnjmdy xpxnlqs x1y4yzzg x1ypdohk x3nfvp2 xj0sio9 x1ti3rys x1ap6kct x1nhvcw1 xq5azjn x1ezks3f xq5j1ye x16d7gm3 x10y07nz xov5yc9 x1elc2ff xs2xxs2 xxjumz x1pg383a x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u xuc1b5w"
+    },
+    type: type,
+    children: [/*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ...{
+        0: {
+          className: "x6s0dn4 xmjv2u5 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf"
+        },
+        2: {
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x1i8m2t6"
+        },
+        1: {
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x19blmh3"
+        },
+        3: {
+          className: "x6s0dn4 x8kq9my x9f619 x3nfvp2 x2lah0s x7s8d8b x1nhvcw1 xpqd16k x1elc2ff x15406qy xxjumz x4ml2zf x19blmh3"
+        }
+      }[!!isPressed << 1 | !!disabled << 0],
+      children: /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...{
+          0: {
+            className: "x1ixvsy6 xnpwncj x6or1qq x1o0tod x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s"
+          },
+          2: {
+            className: "x1ixvsy6 xnpwncj x6or1qq x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xuaxbnl"
+          },
+          1: {
+            className: "xnpwncj x6or1qq x1o0tod x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xsq02lv"
+          },
+          3: {
+            className: "xnpwncj x6or1qq x1n2onr6 xv6reb9 x2hifos xxjumz xoc8r4s xuaxbnl xsq02lv"
+          }
+        }[!!isPressed << 1 | !!disabled << 0]
+      })
+    }), children]
+  });
+}

package/dist/Switch/index.d.ts

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

package/dist/Switch/index.js

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

package/dist/TabList/TabList.d.ts

@@ -0,0 +1,25 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One selectable tab in a `TabList`. */
+export interface TabOption {
+    /**
+     * The `id` of the panel this tab reveals. Supply it when the panel is in the
+     * DOM: `aria-controls` pointing at an element that does not exist is worse
+     * than omitting it, because assistive technology follows the reference.
+     */
+    readonly controls?: string;
+    readonly disabled?: boolean;
+    readonly id: string;
+    readonly label: ReactNode;
+}
+/** Props for a single-select strip of tabs. */
+export interface TabListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'onSelect' | 'role'> {
+    readonly label: string;
+    readonly onSelect: (id: string) => void;
+    readonly selectedId: string;
+    readonly tabs: readonly TabOption[];
+}
+/**
+ * Selects one of several panels. The strip is one tab stop: arrow keys move
+ * between tabs and selection follows focus, matching the ARIA tabs pattern.
+ */
+export declare function TabList({ label, onSelect, selectedId, tabs, ...props }: TabListProps): import("react").JSX.Element;

package/dist/TabList/TabList.doc.d.ts

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

package/dist/TabList/TabList.doc.js

@@ -0,0 +1,21 @@
+import "../styles/stylex.css";
+export const tabListDoc = {
+  name: 'TabList',
+  description: 'Selects one of several panels through the ARIA tabs pattern.',
+  props: [{
+    name: 'label',
+    description: 'Names the tab strip for assistive technology.'
+  }, {
+    name: 'onSelect',
+    description: 'Receives the id of the newly selected tab.'
+  }, {
+    name: 'selectedId',
+    description: 'Identifies the currently selected tab.'
+  }, {
+    name: 'tabs',
+    description: 'Supplies the tab options in reading order; each may name the panel it controls.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLDivElement> except children, className, onSelect, and role'],
+  example: '<TabList label="Views" onSelect={setView} selectedId={view} tabs={views} />',
+  storyId: 'core-tab-list--default'
+};

package/dist/TabList/TabList.js

@@ -0,0 +1,79 @@
+import * as stylex from '@stylexjs/stylex';
+import { useId, useRef, createElement as _createElement } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { useListFocus } from '../hooks/useListFocus.js';
+
+// The primary rank of underline: two hairlines, one weight above the rule the
+// strip stands on. A subordinate rank of tab would take a single hairline.
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectedMarkWidth = `calc(2 * ${semanticTokens.borderWidth})`;
+/** One selectable tab in a `TabList`. */
+
+/** Props for a single-select strip of tabs. */
+
+/**
+ * Selects one of several panels. The strip is one tab stop: arrow keys move
+ * between tabs and selection follows focus, matching the ARIA tabs pattern.
+ */
+export function TabList({
+  label,
+  onSelect,
+  selectedId,
+  tabs,
+  ...props
+}) {
+  const listRef = useRef(null);
+  const {
+    onKeyDown
+  } = useListFocus(listRef, {
+    orientation: 'horizontal'
+  });
+  const prefix = useId();
+  return /*#__PURE__*/_jsx("div", {
+    ...props,
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: listRef,
+    role: "tablist",
+    ...{
+      className: "x1pha0wt x1k3hjl9 x1w5tod1 xeq6m5c x1dk1kt8 x78zum5 xj0sio9"
+    },
+    children: tabs.map(({
+      controls,
+      disabled,
+      id,
+      label: tabLabel
+    }) => {
+      const selected = id === selectedId;
+      return /*#__PURE__*/_createElement("button", {
+        ...(controls === undefined ? {} : {
+          'aria-controls': controls
+        }),
+        "aria-selected": selected,
+        disabled: disabled ?? false,
+        id: `${prefix}-${id}-tab`,
+        key: id,
+        onClick: () => {
+          onSelect(id);
+        },
+        onFocus: () => {
+          if (!disabled) {
+            onSelect(id);
+          }
+        },
+        role: "tab",
+        ...{
+          0: {
+            className: "xjbqb8w x16stqrj x1w5tod1 x15enn7b x1ejq31n x972fbf xkgv12d xuxrje7 x17y7oyd x1ypdohk xj0sio9 x1ti3rys x1jcbhmk xq5azjn x1nadmzk xj1ngls xexx8yu xnjsko4 x1elc2ff x1i6m205 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x1kz4h7b"
+          },
+          1: {
+            className: "xjbqb8w x1w5tod1 x15enn7b x1ejq31n x972fbf xkgv12d xuxrje7 x1ypdohk xj0sio9 x1ti3rys x1jcbhmk xq5azjn x1nadmzk xj1ngls xexx8yu xnjsko4 x1elc2ff x1i6m205 xxjumz x609gy3 xtgyt42 x15meki4 xz32tfx x1p22nma x17lds6u x52u802 x1y4yzzg"
+          }
+        }[!!selected << 0],
+        tabIndex: selected ? 0 : -1,
+        type: "button"
+      }, tabLabel);
+    })
+  });
+}

package/dist/TabList/index.d.ts

@@ -0,0 +1 @@
+export { TabList, type TabListProps, type TabOption } from './TabList.js';

package/dist/TabList/index.js

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

package/dist/Table/Table.d.ts

@@ -8,13 +8,23 @@ export interface TableProps extends Omit<TableHTMLAttributes<HTMLTableElement>,
 export type TableCaptionProps = Omit<HTMLAttributes<HTMLTableCaptionElement>, 'className'>;
 export type TableHeadProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'className'>;
 export type TableBodyProps = TableHeadProps;
-export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'className'>;
-export type TableHeaderCellProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className'>;
-export type TableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className'>;
+export interface TableRowProps extends Omit<HTMLAttributes<HTMLTableRowElement>, 'aria-selected' | 'className'> {
+    /**
+     * Marks the row as the chosen one. A rule down its leading edge, and
+     * `aria-selected` so the choice is not carried by the mark alone.
+     */
+    readonly selected?: boolean;
+}
+export interface TableHeaderCellProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    readonly numeric?: boolean;
+}
+export interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    readonly numeric?: boolean;
+}
 export declare function Table({ children, density, dividers, ...props }: TableProps): import("react").JSX.Element;
 export declare function TableCaption({ children, ...props }: TableCaptionProps): import("react").JSX.Element;
 export declare function TableHead({ children, ...props }: TableHeadProps): import("react").JSX.Element;
 export declare function TableBody({ children, ...props }: TableBodyProps): import("react").JSX.Element;
-export declare function TableRow({ children, ...props }: TableRowProps): import("react").JSX.Element;
-export declare function TableHeaderCell({ children, scope, ...props }: TableHeaderCellProps): import("react").JSX.Element;
-export declare function TableCell({ children, ...props }: TableCellProps): import("react").JSX.Element;
+export declare function TableRow({ children, selected, ...props }: TableRowProps): import("react").JSX.Element;
+export declare function TableHeaderCell({ children, numeric, scope, ...props }: TableHeaderCellProps): import("react").JSX.Element;
+export declare function TableCell({ children, numeric, ...props }: TableCellProps): import("react").JSX.Element;

package/dist/Table/Table.doc.d.ts

@@ -53,11 +53,15 @@ export declare const tableBodyDoc: {
 export declare const tableRowDoc: {
     name: string;
     description: string;
-    props: {
+    props: ({
+        name: string;
+        description: string;
+        required?: undefined;
+    } | {
         name: string;
         description: string;
         required: true;
-    }[];
+    })[];
     inheritedProps: string[];
     example: string;
     storyId: string;
@@ -81,11 +85,15 @@ export declare const tableHeaderCellDoc: {
 export declare const tableCellDoc: {
     name: string;
     description: string;
-    props: {
+    props: ({
         name: string;
         description: string;
         required: true;
-    }[];
+    } | {
+        name: string;
+        description: string;
+        required?: undefined;
+    })[];
     inheritedProps: string[];
     example: string;
     storyId: string;

package/dist/Table/Table.doc.js

@@ -57,6 +57,9 @@ export const tableRowDoc = {
   name: 'TableRow',
   description: 'Groups related header or data cells in a native table row.',
   props: [{
+    name: 'selected',
+    description: 'Marks the row as chosen with a rule down its leading edge.'
+  }, {
     name: 'children',
     description: 'Supplies cells.',
     required: true
@@ -75,6 +78,9 @@ export const tableHeaderCellDoc = {
   }, {
     name: 'scope',
     description: 'Associates the header with a row or column.'
+  }, {
+    name: 'numeric',
+    description: 'Aligns the label over a column of figures.'
   }],
   inheritedProps: ['ThHTMLAttributes<HTMLTableCellElement> except className'],
   example: '<TableHeaderCell scope="col">Name</TableHeaderCell>',
@@ -87,6 +93,9 @@ export const tableCellDoc = {
     name: 'children',
     description: 'Supplies the cell value.',
     required: true
+  }, {
+    name: 'numeric',
+    description: 'Sets the value as a figure so a column of them lines up.'
   }],
   inheritedProps: ['TdHTMLAttributes<HTMLTableCellElement> except className'],
   example: '<TableCell>24</TableCell>',