tgui-core 3.1.4 → 3.2.0

package/dist/components/RoundGauge.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`,cx:"50",cy:"50",r:"45"},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{value:j,format:m})]})}export{c as RoundGauge};
+import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{format:m,value:j})]})}export{c as RoundGauge};

package/dist/components/Section.d.ts

@@ -28,6 +28,7 @@ type Props = Partial<{
 }> & BoxProps;
 /**
  * ## Section
+ *
  * Section is a surface that displays content and actions on a single topic.
  *
  * They should be easy to scan for relevant and actionable information.
@@ -40,6 +41,8 @@ type Props = Partial<{
  *
  * Section can also be titled to clearly define its purpose.
  *
+ * Example:
+ *
  * ```tsx
  * <Section title="Cargo">Here you can order supply crates.</Section>
  * ```
@@ -47,11 +50,15 @@ type Props = Partial<{
  * If you want to have a button on the right side of an section title
  * (for example, to perform some sort of action), there is a way to do that:
  *
+ * Example:
+ *
  * ```tsx
  * <Section title="Cargo" buttons={<Button>Send shuttle</Button>}>
  *   Here you can order supply crates.
  * </Section>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-section--docs)
  */
 export declare function Section(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Section.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{id:a,className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),id:a,...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};

package/dist/components/Slider.d.ts

@@ -47,10 +47,14 @@ type Props = {
 }> & BoxProps & PropsWithChildren;
 /**
  * ## Slider
- * A horizontal, [ProgressBar](https://github.com/tgstation/tgui-core/tree/main/lib/components/Progressbar.tsx)-like
+ *
+ * A horizontal,
+ * [ProgressBar](https://tgstation.github.io/tgui-core/?path=/docs/components-progressbar--docs)-like
  * control which allows dialing * in precise values by dragging it left and right.
  *
  * Single click opens an input box to manually type in a number.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-slider--docs)
  */
 export declare function Slider(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Slider.js

@@ -1 +1 @@
-import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{width:`${100*(0,r.clamp01)(_)}%`,opacity:.4}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};
+import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*(0,r.clamp01)(_)}%`}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};

package/dist/components/Stack.d.ts

@@ -12,8 +12,9 @@ type Props = Partial<{
 }> & FlexProps;
 /**
  * ## Stack
+ *
  * A higher-level component that is based on
- * [Flex](https://github.com/tgstation/tgui-core/tree/main/lib/components/Flex.tsx).
+ * [Flex](https://tgstation.github.io/tgui-core/?path=/docs/components-flex--docs).
  *
  * The main difference from `Flex`, is that this component automatically adds
  * spacing between all stack items, reducing the boilerplate that you have to write!
@@ -22,7 +23,8 @@ type Props = Partial<{
  *
  * Stacks can be vertical by adding a `vertical` property.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Stack vertical>
  *   <Stack.Item grow>Button description</Stack.Item>
@@ -36,7 +38,8 @@ type Props = Partial<{
  * Stacks can be used for high level window layout.
  * Make sure to use the `fill` property.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Window>
  *   <Window.Content>
@@ -60,6 +63,8 @@ type Props = Partial<{
  *   </Window.Content>
  * </Window>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-stack--docs)
  */
 export declare function Stack(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Stack {

package/dist/components/Table.d.ts

@@ -23,11 +23,13 @@ type CellProps = Partial<{
 declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ## Table
+ *
  * A straight forward mapping to a standard html table, which is slightly
  * simplified (does not need a `<tbody>` tag) and with sane default styles
  * (e.g. table width is 100% by default).
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Table>
  *   <Table.Row>
@@ -38,6 +40,8 @@ declare function TableCell(props: CellProps): import("react/jsx-runtime").JSX.El
  *   </Table.Row>
  * </Table>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-table--docs)
  */
 export declare namespace Table {
     /**

package/dist/components/Tabs.d.ts

@@ -30,12 +30,14 @@ type TabProps = Partial<{
 }> & BoxProps;
 declare function TabItem(props: TabProps): import("react/jsx-runtime").JSX.Element;
 /**
- *  ## Tabs
+ * ## Tabs
+ *
  * Tabs make it easy to explore and switch between different views.
  *
  * Here is an example of how you would construct a simple tabbed view:
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Tabs>
  *   <Tabs.Tab
@@ -59,10 +61,11 @@ declare function TabItem(props: TabProps): import("react/jsx-runtime").JSX.Eleme
  * a lot of flexibility in regards to how you can layout your tabs.
  *
  * Tabs also support a vertical configuration. This is usually paired with
- * [Stack](https://github.com/tgstation/tgui-core/tree/main/lib/components/Stack.tsx)
+ * [Stack](https://tgstation.github.io/tgui-core/?path=/docs/components-stack--docs)
  * to render tab content to the right.
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Stack>
  *   <Stack.Item>
@@ -76,16 +79,19 @@ declare function TabItem(props: TabProps): import("react/jsx-runtime").JSX.Eleme
  *
  * If you need to combine a tab section with other elements, or if you want to
  * add scrollable functionality to tabs, pair them with the
- * [Section](https://github.com/tgstation/tgui-core/tree/main/lib/components/Section.tsx)
+ * [Section](https://tgstation.github.io/tgui-core/?path=/docs/components-section--docs)
  * component:
  *
- * @example
+ * Example:
+ *
  * ```tsx
  * <Section fill fitted scrollable width="128px">
  *   <Tabs vertical>...</Tabs>
  *   ... other things ...
  * </Section>
  * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-tabs--docs)
  */
 export declare namespace Tabs {
     /**

package/dist/components/TextArea.d.ts

@@ -11,14 +11,14 @@ type Props = Partial<{
      * character
      */
     userMarkup: Record<string, string>;
-}> & TextInputProps;
+}> & TextInputProps<HTMLTextAreaElement>;
 /**
  * ## Textarea
  *
  * An input for larger amounts of text. Use this when you want inputs larger
  * than one row.
  *
- * @see https://github.com/tgstation/tgui-core/blob/main/lib/components/TextArea.tsx
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-textarea--docs)
  */
 export declare function TextArea(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TextArea.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"../common/timer.js";import*as r from"react";import*as n from"../common/keys.js";import*as u from"../common/react.js";import*as a from"../common/ui.js";let o=(0,t.debounce)(e=>e(),250);function s(t){let{autoFocus:s,autoSelect:c,className:l,disabled:m,dontUseTabForIndent:i,expensive:f,fluid:p,maxLength:g,monospace:T,onBlur:b,onChange:v,onEnter:y,onEscape:x,placeholder:E,ref:d,selfClear:k,userMarkup:$,value:h,...j}=t,K=(0,r.useRef)(null),C=d??K,[D,I]=(0,r.useState)(h??"");(0,r.useEffect)(()=>{(s||c)&&setTimeout(()=>{C.current?.focus(),c&&C.current?.select()},1)},[]),(0,r.useEffect)(()=>{C.current&&document.activeElement!==C.current&&h!==D&&I(h??"")},[h]);let B=(0,a.computeBoxProps)(j),A=(0,u.classes)(["Input","TextArea",p&&"Input--fluid",T&&"Input--monospace",m&&"Input--disabled",(0,a.computeBoxClassName)(j),l]);return(0,e.jsx)("textarea",{...B,autoComplete:"off",className:A,maxLength:g,onBlur:function(e){b?.(D)},onChange:function(e){let t=e.currentTarget.value;I(t),v&&(f?o(()=>v(t)):v(t))},onKeyDown:function(e){if(e.key===n.KEY.Enter&&!e.shiftKey){e.preventDefault(),y?.(e.currentTarget.value),k&&I(""),e.currentTarget.blur();return}if((0,n.isEscape)(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!i&&e.key===n.KEY.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;I(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,v?.(e.currentTarget.value);return}if($&&(e.ctrlKey||e.metaKey)&&$[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=$[e.key];I(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,v?.(e.currentTarget.value);return}},placeholder:E,ref:C,spellCheck:!1,value:D})}export{s as TextArea};
+import*as e from"react/jsx-runtime";import*as t from"../common/timer.js";import*as r from"react";import*as n from"../common/keys.js";import*as u from"../common/react.js";import*as a from"../common/ui.js";let o=(0,t.debounce)(e=>e(),250);function s(t){let{autoFocus:s,autoSelect:c,className:l,disabled:m,dontUseTabForIndent:i,expensive:f,fluid:p,maxLength:g,monospace:T,onBlur:b,onChange:v,onEnter:y,onEscape:x,onKeyDown:E,placeholder:d,ref:k,selfClear:$,userMarkup:h,value:j,...K}=t,C=(0,r.useRef)(null),D=k??C,[I,B]=(0,r.useState)(j??"");(0,r.useEffect)(()=>{(s||c)&&setTimeout(()=>{D.current?.focus(),c&&D.current?.select()},1)},[]),(0,r.useEffect)(()=>{D.current&&document.activeElement!==D.current&&j!==I&&B(j??"")},[j]);let A=(0,a.computeBoxProps)(K),N=(0,u.classes)(["Input","TextArea",p&&"Input--fluid",T&&"Input--monospace",m&&"Input--disabled",(0,a.computeBoxClassName)(K),l]);return(0,e.jsx)("textarea",{...A,autoComplete:"off",className:N,maxLength:g,onBlur:function(e){b?.(I)},onChange:function(e){let t=e.currentTarget.value;B(t),v&&(f?o(()=>v(t)):v(t))},onKeyDown:function(e){if(E?.(e),e.key===n.KEY.Enter&&!e.shiftKey){e.preventDefault(),y?.(e.currentTarget.value),$&&B(""),e.currentTarget.blur();return}if((0,n.isEscape)(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!i&&e.key===n.KEY.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;B(`${t.substring(0,r)}	${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,v?.(e.currentTarget.value);return}if(h&&(e.ctrlKey||e.metaKey)&&h[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=h[e.key];B(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,v?.(e.currentTarget.value);return}},placeholder:d,ref:D,spellCheck:!1,value:I})}export{s as TextArea};

package/dist/components/TimeDisplay.d.ts

@@ -7,5 +7,12 @@ type TimeDisplayProps = {
     /** An optional function to format the value */
     format: (value: number) => string;
 }>;
+/**
+ * ## TimeDisplay
+ *
+ * A simple component to format and display time values.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-timedisplay--docs)
+ */
 export declare function TimeDisplay(props: TimeDisplayProps): string | number | null;
 export {};

package/dist/components/Tooltip.d.ts

@@ -9,5 +9,21 @@ type Props = {
     /** Where to place the tooltip relative to the reference element */
     position: Placement;
 }>;
+/**
+ * ## Tooltip
+ *
+ * Displays a tooltip when hovering over the element. The tooltip
+ * can be customized with a custom content and position.
+ *
+ * Example:
+ *
+ * ```tsx
+ * <Tooltip content="This is a tooltip" position="top">
+ *   <Box>Hover over me</Box>
+ * </Tooltip>
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-tooltip--docs)
+ */
 export declare function Tooltip(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tooltip.js

@@ -1 +1 @@
-import*as t from"react/jsx-runtime";import*as o from"./Floating.js";function e(e){let{content:n,children:r,position:i}=e;return(0,t.jsx)(o.Floating,{hoverOpen:!0,content:n,contentClasses:"Tooltip",placement:i,children:r})}export{e as Tooltip};
+import*as t from"react/jsx-runtime";import*as o from"./Floating.js";function e(e){let{content:n,children:r,position:i}=e;return(0,t.jsx)(o.Floating,{content:n,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{e as Tooltip};

package/dist/components/VirtualList.d.ts

@@ -1,7 +1,11 @@
 import { type PropsWithChildren } from 'react';
 /**
+ * ## VirtualList
+ *
  * A vertical list that renders items to fill space up to the extents of the
  * current window, and then defers rendering of other items until they come
  * into view.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-virtuallist--docs)
  */
 export declare function VirtualList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,10 +1,36 @@
 {
-  "name": "tgui-core",
-  "version": "3.1.4",
+  "author": "jlsnow301",
+  "dependencies": {
+    "@floating-ui/react": "^0.27.8",
+    "@nozbe/microfuzz": "^1.0.0"
+  },
   "description": "TGUI core component library",
-  "keywords": ["TGUI", "library", "typescript"],
-  "files": ["dist", "styles"],
+  "devDependencies": {
+    "@biomejs/biome": "2.0.0-beta.2",
+    "@rsbuild/core": "^1.3.18",
+    "@rsbuild/plugin-react": "^1.3.1",
+    "@rsbuild/plugin-sass": "^1.3.1",
+    "@rslib/core": "^0.6.9",
+    "@storybook/addon-console": "^3.0.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/theming": "^8.6.12",
+    "@types/node": "^22.15.17",
+    "@types/react": "^19.1.3",
+    "@types/react-dom": "^19.1.3",
+    "prettier": "^3.5.3",
+    "sass": "^1.81.0",
+    "storybook": "^8.6.12",
+    "storybook-addon-sass-postcss": "^0.3.2",
+    "storybook-react-rsbuild": "^1.0.1",
+    "typescript": "^5.8.3"
+  },
   "exports": {
+    "./*": {
+      "import": "./dist/common/*.js",
+      "require": "./dist/common/*.cjs"
+    },
     "./components": {
       "import": "./dist/components/index.js",
       "require": "./dist/components/index.cjs"
@@ -15,53 +41,36 @@
     },
     "./styles/components/*": {
       "sass": "./styles/components/*"
-    },
-    "./*": {
-      "import": "./dist/common/*.js",
-      "require": "./dist/common/*.cjs"
     }
   },
+  "files": [
+    "dist",
+    "styles"
+  ],
+  "keywords": [
+    "TGUI",
+    "library",
+    "typescript"
+  ],
+  "license": "MIT",
+  "name": "tgui-core",
+  "packageManager": "pnpm@10.10.0",
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/tgstation/tgui-core.git"
   },
   "scripts": {
     "build": "rslib build",
+    "build-storybook": "storybook build",
     "lint": "biome check lib",
     "lint:fix": "prettier . --write && biome check . --fix",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
     "test": "node --experimental-strip-types --experimental-test-coverage --test ./tests/*.test.ts"
   },
-  "author": "jlsnow301",
-  "license": "MIT",
   "type": "module",
-  "dependencies": {
-    "@floating-ui/react": "^0.27.6"
-  },
-  "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@rsbuild/core": "^1.3.5",
-    "@rsbuild/plugin-react": "^1.2.0",
-    "@rsbuild/plugin-sass": "^1.3.1",
-    "@rslib/core": "^0.6.2",
-    "@storybook/addon-console": "^3.0.0",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
-    "@types/node": "^22.14.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.1",
-    "prettier": "^3.5.3",
-    "sass": "^1.81.0",
-    "storybook": "^8.6.12",
-    "storybook-addon-sass-postcss": "^0.3.2",
-    "storybook-react-rsbuild": "^1.0.1",
-    "typescript": "^5.8.3"
-  },
-  "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
-  },
-  "packageManager": "pnpm@10.7.0"
+  "version": "3.2.0"
 }