@misoto22/kioku-ui 0.0.0 → 0.2.0

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'
+};

package/dist/NavMenu/NavMenu.js

@@ -0,0 +1,58 @@
+import * as stylex from '@stylexjs/stylex';
+import { Children } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { NavMenuOrientationProvider } from './orientation.js';
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const styles = {
+  list: {
+    k1xSpc: "x78zum5",
+    kMv6JI: "xj0sio9",
+    kH6xsr: "x3ct3a4",
+    kqGvvJ: "x10im51j",
+    kUOVxO: "xrxpjvj",
+    kZCmMZ: "x1c1uobl",
+    $$css: true
+  },
+  horizontal: {
+    kGNEyG: "x6s0dn4",
+    k1C7PZ: "xzr0trf",
+    kXwgrk: "x1q0g3np",
+    kwnvtZ: "x1a02dak",
+    khm7nJ: "xfhy3zi",
+    $$css: true
+  },
+  vertical: {
+    kGNEyG: "x1qjc9v5",
+    kXwgrk: "xdt5ytf",
+    khm7nJ: "x15i1k40",
+    $$css: true
+  }
+};
+
+/** Props for a named group of navigation destinations. */
+
+/**
+ * Groups destinations into a named navigation landmark. Each child becomes a
+ * list item, so assistive technology can announce how many destinations exist.
+ */
+export function NavMenu({
+  children,
+  label,
+  orientation = 'vertical',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx("nav", {
+    ...props,
+    "aria-label": label,
+    children: /*#__PURE__*/_jsx(NavMenuOrientationProvider, {
+      value: orientation,
+      children: /*#__PURE__*/_jsx("ul", {
+        ...stylex.props(styles.list, styles[orientation]),
+        children: Children.map(children, (child, index) => /*#__PURE__*/_jsx("li", {
+          children: child
+        }, index))
+      })
+    })
+  });
+}

package/dist/NavMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { NavMenu, type NavMenuProps } from './NavMenu.js';
+export { useNavMenuOrientation, type NavMenuOrientation } from './orientation.js';

package/dist/NavMenu/index.js

@@ -0,0 +1,5 @@
+import "../styles/stylex.css";
+export { NavMenu } from './NavMenu.js';
+// The orientation lives beside the context that carries it, because `NavItem`
+// reads it without going through `NavMenu` itself.
+export { useNavMenuOrientation } from './orientation.js';

package/dist/NavMenu/orientation.d.ts

@@ -0,0 +1,4 @@
+/** Axis a navigation menu lays its destinations along. */
+export type NavMenuOrientation = 'horizontal' | 'vertical';
+export declare const NavMenuOrientationProvider: import("react").Provider<NavMenuOrientation>;
+export declare function useNavMenuOrientation(): NavMenuOrientation;

package/dist/NavMenu/orientation.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+/** Axis a navigation menu lays its destinations along. */
+import "../styles/stylex.css";
+/**
+ * The axis a `NavItem` is being laid along.
+ *
+ * An item cannot see its siblings, and the mark it draws depends on them: down
+ * the inline edge it belongs beside the word, across the block edge it belongs
+ * beneath it. Vertical is the default because an item outside any menu is a
+ * row in a rail.
+ */
+const NavMenuOrientationContext = createContext('vertical');
+export const NavMenuOrientationProvider = NavMenuOrientationContext.Provider;
+export function useNavMenuOrientation() {
+  return useContext(NavMenuOrientationContext);
+}

package/dist/NumberInput/NumberInput.d.ts

@@ -0,0 +1,21 @@
+import { type InputHTMLAttributes } from 'react';
+type SharedNumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+    readonly onValueChange?: (value: number | undefined) => void;
+};
+type ControlledNumberInputProps = SharedNumberInputProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: number | undefined) => void;
+    readonly value: number | undefined;
+};
+type UncontrolledNumberInputProps = SharedNumberInputProps & {
+    readonly defaultValue?: number;
+    readonly value?: never;
+};
+/** Props for a numeric entry field. */
+export type NumberInputProps = ControlledNumberInputProps | UncontrolledNumberInputProps;
+/**
+ * Accepts a number. An empty field reports `undefined` rather than `0`, so a
+ * caller can tell "not answered" apart from "answered zero".
+ */
+export declare function NumberInput(props: NumberInputProps): import("react").JSX.Element;
+export {};

package/dist/NumberInput/NumberInput.doc.d.ts

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

package/dist/NumberInput/NumberInput.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const numberInputDoc = {
+  name: 'NumberInput',
+  description: 'Accepts a number and reports an empty field as undefined.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled number.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the parsed number or undefined.'
+  }, {
+    name: 'value',
+    description: 'Controls the current number.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<NumberInput onValueChange={setCount} value={count} />',
+  storyId: 'core-number-input--default'
+};