tgui-core 2.0.6 → 2.1.0

package/dist/components/Knob.js

@@ -1,133 +1 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { keyOfMatchingRange as F, scale as c } from "../common/math.js";
-import { classes as S } from "../common/react.js";
-import { computeBoxProps as $, computeBoxClassName as j } from "../common/ui.js";
-import { DraggableControl as E } from "./DraggableControl.js";
-function A(m) {
-  const {
-    // Draggable props (passthrough)
-    animated: d,
-    format: g,
-    maxValue: a,
-    minValue: o,
-    onChange: p,
-    onDrag: u,
-    step: _,
-    stepPixelSize: b,
-    unclamped: f,
-    unit: h,
-    value: r,
-    // Own props
-    bipolar: n,
-    className: x,
-    color: K,
-    fillValue: i,
-    ranges: v = {},
-    size: N = 1,
-    style: y,
-    ...s
-  } = m;
-  return /* @__PURE__ */ e(
-    E,
-    {
-      dragMatrix: [0, -1],
-      animated: d,
-      format: g,
-      maxValue: a,
-      minValue: o,
-      onChange: p,
-      onDrag: u,
-      step: _,
-      stepPixelSize: b,
-      unclamped: f,
-      unit: h,
-      value: r,
-      children: (V) => {
-        const {
-          displayElement: D,
-          displayValue: t,
-          dragging: M,
-          handleDragStart: k,
-          inputElement: B
-        } = V, P = c(
-          i ?? t,
-          o,
-          a
-        ), C = c(t, o, a), w = K || F(i ?? r, v) || "default", z = Math.min((C - 0.5) * 270, 225);
-        return /* @__PURE__ */ l(
-          "div",
-          {
-            className: S([
-              "Knob",
-              `Knob--color--${w}`,
-              n && "Knob--bipolar",
-              x,
-              j(s)
-            ]),
-            ...$({
-              style: {
-                fontSize: `${N}em`,
-                ...y
-              },
-              ...s
-            }),
-            onMouseDown: k,
-            children: [
-              /* @__PURE__ */ e("div", { className: "Knob__circle", children: /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "Knob__cursorBox",
-                  style: {
-                    transform: `rotate(${z}deg)`
-                  },
-                  children: /* @__PURE__ */ e("div", { className: "Knob__cursor" })
-                }
-              ) }),
-              M && /* @__PURE__ */ e("div", { className: "Knob__popupValue", children: D }),
-              /* @__PURE__ */ l(
-                "svg",
-                {
-                  className: "Knob__ring Knob__ringTrackPivot",
-                  viewBox: "0 0 100 100",
-                  children: [
-                    /* @__PURE__ */ e("circle", { className: "Knob__ringTrack", cx: "50", cy: "50", r: "50" }),
-                    /* @__PURE__ */ e("title", { children: "track" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ l(
-                "svg",
-                {
-                  className: "Knob__ring Knob__ringFillPivot",
-                  viewBox: "0 0 100 100",
-                  children: [
-                    /* @__PURE__ */ e("title", { children: "fill" }),
-                    /* @__PURE__ */ e(
-                      "circle",
-                      {
-                        className: "Knob__ringFill",
-                        style: {
-                          strokeDashoffset: Math.max(
-                            ((n ? 2.75 : 2) - P * 1.5) * Math.PI * 50,
-                            0
-                          )
-                        },
-                        cx: "50",
-                        cy: "50",
-                        r: "50"
-                      }
-                    )
-                  ]
-                }
-              ),
-              B
-            ]
-          }
-        );
-      }
-    }
-  );
-}
-export {
-  A as Knob
-};
+import*as s from"react/jsx-runtime";import*as o from"../common/math.js";import*as r from"../common/react.js";import*as e from"../common/ui.js";import*as a from"./DraggableControl.js";function c(c){let{animated:l,format:n,maxValue:i,minValue:t,onChange:m,onDrag:x,step:_,stepPixelSize:b,unclamped:d,unit:j,value:g,bipolar:h,className:K,color:f,fillValue:p,ranges:u={},size:v=1,style:N,...y}=c;return(0,s.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:n,maxValue:i,minValue:t,onChange:m,onDrag:x,step:_,stepPixelSize:b,unclamped:d,unit:j,value:g,children:a=>{let{displayElement:c,displayValue:l,dragging:n,handleDragStart:m,inputElement:x}=a,_=(0,o.scale)(p??l,t,i),b=(0,o.scale)(l,t,i),d=f||(0,o.keyOfMatchingRange)(p??g,u)||"default",j=Math.min((b-.5)*270,225);return(0,s.jsxs)("div",{className:(0,r.classes)(["Knob",`Knob--color--${d}`,h&&"Knob--bipolar",K,(0,e.computeBoxClassName)(y)]),...(0,e.computeBoxProps)({style:{fontSize:`${v}em`,...N},...y}),onMouseDown:m,children:[(0,s.jsx)("div",{className:"Knob__circle",children:(0,s.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${j}deg)`},children:(0,s.jsx)("div",{className:"Knob__cursor"})})}),n&&(0,s.jsx)("div",{className:"Knob__popupValue",children:c}),(0,s.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,s.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,s.jsx)("title",{children:"track"})]}),(0,s.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,s.jsx)("title",{children:"fill"}),(0,s.jsx)("circle",{className:"Knob__ringFill",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*_)*Math.PI*50,0)},cx:"50",cy:"50",r:"50"})]}),x]})}})}export{c as Knob};

package/dist/components/LabeledControls.d.ts

@@ -1,4 +1,4 @@
-import { FlexProps } from './Flex';
+import { type FlexProps } from './Flex';
 /**
  *  ## LabeledControls
  * LabeledControls is a horizontal grid that is designed to hold various

package/dist/components/LabeledControls.js

@@ -1,39 +1 @@
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-import { Flex as e } from "./Flex.js";
-function s(n) {
-  const { children: r, wrap: l, ...c } = n;
-  return /* @__PURE__ */ t(
-    e,
-    {
-      mx: -0.5,
-      wrap: l,
-      align: "stretch",
-      justify: "space-between",
-      ...c,
-      children: r
-    }
-  );
-}
-function m(n) {
-  const { label: r, children: l, mx: c = 1, ...i } = n;
-  return /* @__PURE__ */ t(e.Item, { mx: c, children: /* @__PURE__ */ o(
-    e,
-    {
-      height: "100%",
-      direction: "column",
-      align: "center",
-      textAlign: "center",
-      justify: "space-between",
-      ...i,
-      children: [
-        /* @__PURE__ */ t(e.Item, {}),
-        /* @__PURE__ */ t(e.Item, { children: l }),
-        /* @__PURE__ */ t(e.Item, { color: "label", children: r })
-      ]
-    }
-  ) });
-}
-s.Item = m;
-export {
-  s as LabeledControls
-};
+import*as e from"react/jsx-runtime";import*as t from"./Flex.js";function l(l){let{children:r,wrap:n,...i}=l;return(0,e.jsx)(t.Flex,{mx:-.5,wrap:n,align:"stretch",justify:"space-between",...i,children:r})}l.Item=function(l){let{label:r,children:n,mx:i=1,...x}=l;return(0,e.jsx)(t.Flex.Item,{mx:i,children:(0,e.jsxs)(t.Flex,{height:"100%",direction:"column",align:"center",textAlign:"center",justify:"space-between",...x,children:[(0,e.jsx)(t.Flex.Item,{}),(0,e.jsx)(t.Flex.Item,{children:n}),(0,e.jsx)(t.Flex.Item,{color:"label",children:r})]})})};export{l as LabeledControls};

package/dist/components/LabeledList.d.ts

@@ -1,5 +1,5 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { BooleanLike } from '../common/react';
+import type { PropsWithChildren, ReactNode } from 'react';
+import { type BooleanLike } from '../common/react';
 export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
 type LabeledListItemProps = Partial<{
     /** Buttons to render aside the content. */

package/dist/components/LabeledList.js

@@ -1,89 +1 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
-import { classes as c } from "../common/react.js";
-import { unit as g } from "../common/ui.js";
-import { Box as r } from "./Box.js";
-import { Divider as x } from "./Divider.js";
-import { Tooltip as N } from "./Tooltip.js";
-function b(e) {
-  const { children: t } = e;
-  return /* @__PURE__ */ l("table", { className: "LabeledList", children: /* @__PURE__ */ l("tbody", { children: t }) });
-}
-function v(e) {
-  const {
-    className: t,
-    label: o,
-    labelColor: m = "label",
-    labelWrap: L,
-    color: p,
-    textAlign: _,
-    buttons: a,
-    content: f,
-    children: h,
-    verticalAlign: s = "baseline",
-    tooltip: n
-  } = e;
-  let i;
-  o && (i = o, typeof o == "string" && (i += ":")), n !== void 0 && (i = /* @__PURE__ */ l(N, { content: n, children: /* @__PURE__ */ l(
-    r,
-    {
-      as: "span",
-      style: {
-        borderBottom: "2px dotted rgba(255, 255, 255, 0.8)"
-      },
-      children: i
-    }
-  ) }));
-  const u = /* @__PURE__ */ l(
-    r,
-    {
-      as: "td",
-      color: m,
-      className: c([
-        "LabeledList__cell",
-        // Kinda flipped because we want nowrap as default. Cleaner CSS this way though.
-        !L && "LabeledList__label--nowrap"
-      ]),
-      verticalAlign: s,
-      children: i
-    }
-  );
-  return /* @__PURE__ */ d("tr", { className: c(["LabeledList__row", t]), children: [
-    u,
-    /* @__PURE__ */ d(
-      r,
-      {
-        as: "td",
-        color: p,
-        textAlign: _,
-        className: "LabeledList__cell",
-        colSpan: a ? void 0 : 2,
-        verticalAlign: s,
-        children: [
-          f,
-          h
-        ]
-      }
-    ),
-    a && /* @__PURE__ */ l("td", { className: "LabeledList__cell LabeledList__buttons", children: a })
-  ] });
-}
-function y(e) {
-  const t = e.size ? g(Math.max(0, e.size - 1)) : 0;
-  return /* @__PURE__ */ l("tr", { className: "LabeledList__row", children: /* @__PURE__ */ l(
-    "td",
-    {
-      colSpan: 3,
-      style: {
-        paddingTop: t,
-        paddingBottom: t
-      },
-      children: /* @__PURE__ */ l(x, {})
-    }
-  ) });
-}
-((e) => {
-  e.Divider = y, e.Item = v;
-})(b || (b = {}));
-export {
-  b as LabeledList
-};
+var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingTop:t,paddingBottom:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:x,children:b,verticalAlign:p="baseline",tooltip:j}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==j&&(l=(0,s.jsx)(o.Tooltip,{content:j,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let _=(0,s.jsx)(i.Box,{as:"td",color:d,className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),verticalAlign:p,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[_,(0,s.jsxs)(i.Box,{as:"td",color:c,textAlign:m,className:"LabeledList__cell",colSpan:L?void 0:2,verticalAlign:p,children:[x,b]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};

package/dist/components/MenuBar.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+type MenuBarItemProps = {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    display: ReactNode;
+    entry: string;
+    openMenuBar: string | null;
+    openOnHover: boolean;
+    openWidth: string;
+    setOpenMenuBar: (entry: string | null) => void;
+    setOpenOnHover: (flag: boolean) => void;
+};
+declare function MenuDropdown(props: MenuBarItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace MenuDropdown {
+    var MenuItemToggle: (props: any) => import("react/jsx-runtime").JSX.Element;
+    var MenuItem: (props: MenuItemProps) => import("react/jsx-runtime").JSX.Element;
+    var Separator: () => import("react/jsx-runtime").JSX.Element;
+}
+type MenuItemProps = Partial<{
+    value: any;
+    displayText: string;
+    onClick: (value: any) => void;
+}>;
+type MenuBarProps = {
+    children: ReactNode;
+};
+export declare function MenuBar(props: MenuBarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MenuBar {
+    var Dropdown: typeof MenuDropdown;
+}
+export {};

package/dist/components/MenuBar.js

@@ -1,133 +1 @@
-import { jsxs as B, jsx as n } from "react/jsx-runtime";
-import { useRef as f } from "react";
-import { classes as d } from "../common/react.js";
-import { Box as c } from "./Box.js";
-import { Floating as h } from "./Floating.js";
-import { Icon as v } from "./Icon.js";
-function N(r) {
-  const {
-    children: e,
-    className: a,
-    disabled: o,
-    display: t,
-    onClick: u,
-    onMouseOver: s,
-    open: m,
-    openWidth: l,
-    onOutsideClick: _,
-    ...M
-  } = r, p = f(null);
-  return /* @__PURE__ */ n(
-    h,
-    {
-      allowedOutsideClasses: ".Menubar_inner",
-      content: /* @__PURE__ */ n(
-        "div",
-        {
-          className: "MenuBar__menu",
-          style: {
-            width: l
-          },
-          children: e
-        }
-      ),
-      children: /* @__PURE__ */ n("div", { ref: p, className: "Menubar_inner", children: /* @__PURE__ */ n(
-        c,
-        {
-          className: d([
-            "MenuBar__MenuBarButton",
-            "MenuBar__font",
-            "MenuBar__hover",
-            a
-          ]),
-          ...M,
-          onClick: o ? () => null : u,
-          onMouseOver: s,
-          children: /* @__PURE__ */ n("span", { className: "MenuBar__MenuBarButton-text", children: t })
-        }
-      ) })
-    }
-  );
-}
-function i(r) {
-  const {
-    entry: e,
-    children: a,
-    openWidth: o,
-    display: t,
-    setOpenMenuBar: u,
-    openMenuBar: s,
-    setOpenOnHover: m,
-    openOnHover: l,
-    disabled: _,
-    className: M
-  } = r;
-  return /* @__PURE__ */ n(
-    N,
-    {
-      openWidth: o,
-      display: t,
-      disabled: _,
-      open: s === e,
-      className: M,
-      onClick: () => {
-        u(s === e ? null : e), m(!l);
-      },
-      onOutsideClick: () => {
-        u(null), m(!1);
-      },
-      onMouseOver: () => {
-        l && u(e);
-      },
-      children: a
-    }
-  );
-}
-O.Dropdown = i;
-function k(r) {
-  const { value: e, displayText: a, onClick: o, checked: t } = r;
-  return /* @__PURE__ */ B(
-    c,
-    {
-      className: d([
-        "MenuBar__font",
-        "MenuBar__MenuItem",
-        "MenuBar__MenuItemToggle",
-        "MenuBar__hover"
-      ]),
-      onClick: () => o(e),
-      children: [
-        /* @__PURE__ */ n("div", { className: "MenuBar__MenuItemToggle__check", children: /* @__PURE__ */ n(v, { size: 1.3, name: t ? "check" : "" }) }),
-        a
-      ]
-    }
-  );
-}
-i.MenuItemToggle = k;
-function g(r) {
-  const { value: e, displayText: a, onClick: o } = r;
-  return /* @__PURE__ */ n(
-    c,
-    {
-      className: d([
-        "MenuBar__font",
-        "MenuBar__MenuItem",
-        "MenuBar__hover"
-      ]),
-      onClick: () => o == null ? void 0 : o(e),
-      children: a
-    }
-  );
-}
-i.MenuItem = g;
-function I() {
-  return /* @__PURE__ */ n("div", { className: "MenuBar__Separator" });
-}
-i.Separator = I;
-function O(r) {
-  const { children: e } = r;
-  return /* @__PURE__ */ n(c, { className: "MenuBar", children: e });
-}
-export {
-  O as MenuBar
-};
+import*as e from"react/jsx-runtime";import*as n from"react";import*as r from"../common/react.js";import*as s from"./Box.js";import*as a from"./Floating.js";import*as o from"./Icon.js";function t(o){let{children:t,className:l,disabled:u,display:c,onClick:i,onMouseOver:m,open:_,openWidth:M,onOutsideClick:B,...d}=o,x=(0,n.useRef)(null);return(0,e.jsx)(a.Floating,{allowedOutsideClasses:".Menubar_inner",content:(0,e.jsx)("div",{className:"MenuBar__menu",style:{width:M},children:t}),children:(0,e.jsx)("div",{ref:x,className:"Menubar_inner",children:(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...d,onClick:u?()=>null:i,onMouseOver:m,children:(0,e.jsx)("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function l(n){let{entry:r,children:s,openWidth:a,display:o,setOpenMenuBar:l,openMenuBar:u,setOpenOnHover:c,openOnHover:i,disabled:m,className:_}=n;return(0,e.jsx)(t,{openWidth:a,display:o,disabled:m,open:u===r,className:_,onClick:()=>{l(u===r?null:r),c(!i)},onOutsideClick:()=>{l(null),c(!1)},onMouseOver:()=>{i&&l(r)},children:s})}function u(n){let{children:r}=n;return(0,e.jsx)(s.Box,{className:"MenuBar",children:r})}u.Dropdown=l,l.MenuItemToggle=function(n){let{value:a,displayText:t,onClick:l,checked:u}=n;return(0,e.jsxs)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>l(a),children:[(0,e.jsx)("div",{className:"MenuBar__MenuItemToggle__check",children:(0,e.jsx)(o.Icon,{size:1.3,name:u?"check":""})}),t]})},l.MenuItem=function(n){let{value:a,displayText:o,onClick:t}=n;return(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>t?.(a),children:o})},l.Separator=function(){return(0,e.jsx)("div",{className:"MenuBar__Separator"})};export{u as MenuBar};

package/dist/components/Modal.d.ts

@@ -1,5 +1,5 @@
-import { KeyboardEvent } from 'react';
-import { BoxProps } from './Box';
+import type { KeyboardEvent } from 'react';
+import type { BoxProps } from './Box';
 export type ModalProps = BoxProps & Partial<{
     /** Fires once the enter key is pressed */
     onEnter: (e: KeyboardEvent<HTMLInputElement>) => void;

package/dist/components/Modal.js

@@ -1,22 +1 @@
-import { jsx as s } from "react/jsx-runtime";
-import { KEY as l, isEscape as n } from "../common/keys.js";
-import { classes as f } from "../common/react.js";
-import { computeBoxProps as p, computeBoxClassName as d } from "../common/ui.js";
-import { Dimmer as u } from "./Dimmer.js";
-function K(i) {
-  const { className: a, children: t, onEnter: m, onEscape: r, ...e } = i;
-  function c(o) {
-    o.key === l.Enter && (m == null || m(o)), n(o.key) && (r == null || r(o));
-  }
-  return /* @__PURE__ */ s(u, { className: "Modal__dimmer", onKeyDown: c, children: /* @__PURE__ */ s(
-    "div",
-    {
-      className: f(["Modal", a, d(e)]),
-      ...p(e),
-      children: t
-    }
-  ) });
-}
-export {
-  K as Modal
-};
+import*as o from"react/jsx-runtime";import*as m from"../common/keys.js";import*as s from"../common/react.js";import*as e from"../common/ui.js";import*as r from"./Dimmer.js";function a(a){let{className:i,children:t,onEnter:c,onEscape:n,...l}=a;return(0,o.jsx)(r.Dimmer,{className:"Modal__dimmer",onKeyDown:function(o){o.key===m.KEY.Enter&&c?.(o),(0,m.isEscape)(o.key)&&n?.(o)},children:(0,o.jsx)("div",{className:(0,s.classes)(["Modal",i,(0,e.computeBoxClassName)(l)]),...(0,e.computeBoxProps)(l),children:t})})}export{a as Modal};

package/dist/components/NoticeBox.d.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from './Box';
+import { type BoxProps } from './Box';
 type Props = ExclusiveProps & BoxProps;
 /** You MUST use only one or none */
 type NoticeType = 'info' | 'success' | 'warning' | 'danger';

package/dist/components/NoticeBox.js

@@ -1,23 +1 @@
-import { jsx as n } from "react/jsx-runtime";
-import { classes as x } from "../common/react.js";
-import { Box as a } from "./Box.js";
-function f(e) {
-  const { className: c, color: o, info: t, success: s, warning: m, danger: r, ...i } = e;
-  return /* @__PURE__ */ n(
-    a,
-    {
-      className: x([
-        "NoticeBox",
-        o && `NoticeBox--color--${o}`,
-        t && "NoticeBox--type--info",
-        s && "NoticeBox--type--success",
-        r && "NoticeBox--type--danger",
-        c
-      ]),
-      ...i
-    }
-  );
-}
-export {
-  f as NoticeBox
-};
+import*as o from"react/jsx-runtime";import*as e from"../common/react.js";import*as t from"./Box.js";function c(c){let{className:s,color:r,info:i,success:x,warning:m,danger:a,...B}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",a&&"NoticeBox--type--danger",s]),...B})}export{c as NoticeBox};

package/dist/components/NumberInput.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties, Component, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from 'react';
-import { BooleanLike } from '../common/react';
-import { BoxProps } from './Box';
+import { Component, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
+import { type BooleanLike } from '../common/react';
+import { type BoxProps } from './Box';
 type Props = Required<{
     /** Highest possible value. */
     maxValue: number;
@@ -12,21 +12,13 @@ type Props = Required<{
     value: number | string;
 }> & Partial<{
     /** Animates the value if it was changed externally. */
-    animated: BooleanLike;
-    /** Custom class name. */
-    className: BoxProps['className'];
+    animated: boolean;
     /** Makes the input field uneditable & non draggable to prevent user changes */
-    disabled: BooleanLike;
-    /** Fill all available horizontal space. */
-    fluid: BooleanLike;
-    /** Input font size */
-    fontSize: CSSProperties['fontSize'];
+    disabled: boolean;
     /** Format value using this function before displaying it. */
     format: (value: number) => string;
-    /** Input height */
-    height: CSSProperties['height'];
-    /** Input line height */
-    lineHeight: CSSProperties['lineHeight'];
+    /** Adjusts the width to 100% of its parent container */
+    fluid: boolean;
     /** An event which fires when you release the input or successfully enter a number. */
     onChange: (value: number) => void;
     /** An event which fires about every 500ms when you drag the input up and down, on release and on manual editing. */
@@ -35,9 +27,7 @@ type Props = Required<{
     stepPixelSize: number;
     /** Unit to display to the right of value. */
     unit: string;
-    /** Width in Box units */
-    width: BoxProps['width'];
-}>;
+}> & BoxProps;
 type State = {
     currentValue: number;
     dragging: BooleanLike;
@@ -51,7 +41,7 @@ type State = {
  * to fine tune the value, or single click it to manually type a number.
  */
 export declare class NumberInput extends Component<Props, State> {
-    inputRef: import('react').RefObject<HTMLInputElement | null>;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
     dragTimeout: NodeJS.Timeout;
     dragInterval: NodeJS.Timeout;
     state: State;