tgui-core 3.2.0 → 3.3.1

package/README.md

@@ -70,13 +70,13 @@ The release workflow will take care of setting the `package.json` version, build
 
 ### Development
 
-This project uses [pnpm](https://pnpm.io/installation) for its package manager.
+This project uses [bun](https://bun.sh/docs/installation) for its package manager.
 
 To set up the repository:
-`pnpm install`
+`bun install`
 
 To test your changes using [Storybook](https://storybook.js.org/docs) run:
-`pnpm run storybook`
+`bun storybook`
 
 To run unit tests run
-`pnpm test`
+`bun test`

package/dist/common/fuzzysearch.d.ts

@@ -11,10 +11,14 @@ interface UseFuzzySearchProps<T> {
     getSearchString: (item: T) => string;
 }
 /**
- * A simple hook prooviding fuzzy searching - approximate rather
+ * ## useFuzzySearch
+ *
+ * A simple hook providing fuzzy searching - uses approximate rather
  * than exact pattern matching.
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/hooks-usefuzzysearch--docs)
  */
-export declare function useFuzzySearch<T>({ searchArray, matchStrategy, getSearchString, }: UseFuzzySearchProps<T>): {
+export declare function useFuzzySearch<T>(options: UseFuzzySearchProps<T>): {
     query: string;
     setQuery: (value: string) => void;
     results: T[];

package/dist/common/fuzzysearch.js

@@ -1 +1 @@
-import*as t from"@nozbe/microfuzz";import*as e from"react";function r({searchArray:r,matchStrategy:a="smart",getSearchString:u}){let[o,i]=(0,e.useState)(""),[m,s]=(0,e.useState)([]),f=(0,e.useCallback)((0,t.default)(r,{getText:t=>[u(t)],strategy:a}),[r,u]);return{query:o,setQuery:function(t){if(i(t),""===t.trim())return void s([]);s(f(t).map(t=>t.item))},results:m}}export{r as useFuzzySearch};
+import*as t from"@nozbe/microfuzz";import*as e from"react";function r(r){let{getSearchString:a,matchStrategy:u="smart",searchArray:o}=r,[i,m]=(0,e.useState)(""),[s,f]=(0,e.useState)([]),n=(0,e.useCallback)((0,t.default)(o,{getText:t=>[a(t)],strategy:u}),[o,a]);return{query:i,setQuery:function(t){if(m(t),""===t.trim())return void f([]);f(n(t).map(t=>t.item))},results:s}}export{r as useFuzzySearch};

package/dist/components/Autofocus.d.ts

@@ -1,7 +1,12 @@
-import { type PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+type Props = Partial<{
+    /** Optional child elements */
+    children: ReactNode;
+}>;
 /**
  * ## Autofocus
  *
  * Used to force the window to steal focus on load. Children optional.
  */
-export declare function Autofocus(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function Autofocus(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Blink.d.ts

@@ -1,17 +1,13 @@
-import { Component, type PropsWithChildren } from 'react';
-type Props = Partial<{
-    /**
-     * The interval between blinks, in milliseconds.
-     */
+import { ReactNode } from 'react';
+type Props = {
+    /** Things that blink! */
+    children: ReactNode;
+} & Partial<{
+    /** The interval between blinks, in milliseconds. */
     interval: number;
-    /**
-     * The time to wait before blinking again, in milliseconds.
-     */
+    /** The time to wait before blinking again, in milliseconds.  */
     time: number;
-}> & PropsWithChildren;
-type State = {
-    hidden: boolean;
-};
+}>;
 /**
  * ## Blink
  *
@@ -19,14 +15,5 @@ type State = {
  *
  * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-blink--docs)
  */
-export declare class Blink extends Component<Props, State> {
-    interval: NodeJS.Timeout;
-    timer: NodeJS.Timeout;
-    constructor(props: any);
-    createTimer(): void;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare function Blink(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Blink.js

@@ -1 +1 @@
-import*as t from"react/jsx-runtime";import*as e from"react";class i extends e.Component{interval;timer;constructor(t){super(t),this.state={hidden:!1}}createTimer(){let{interval:t=1e3,time:e=1e3}=this.props;clearInterval(this.interval),clearTimeout(this.timer),this.setState({hidden:!1}),this.interval=setInterval(()=>{this.setState({hidden:!0}),this.timer=setTimeout(()=>{this.setState({hidden:!1})},e)},t+e)}componentDidMount(){this.createTimer()}componentDidUpdate(t){(t.interval!==this.props.interval||t.time!==this.props.time)&&this.createTimer()}componentWillUnmount(){clearInterval(this.interval),clearTimeout(this.timer)}render(){return(0,t.jsx)("span",{style:{visibility:this.state.hidden?"hidden":"visible"},children:this.props.children})}}export{i as Blink};
+import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:i,interval:s=1e3,time:n=1e3}=r,[l,a]=(0,t.useState)(!1);return(0,t.useEffect)(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},n)},s+n);return()=>{clearInterval(e)}},[s,n]),(0,e.jsx)("span",{style:{visibility:l?"hidden":"visible"},children:i})}export{r as Blink};

package/dist/components/Box.js

@@ -1 +1 @@
-import*as e from"react";import*as o from"../common/ui.js";function m(m){let{as:s="div",className:t,children:a,tw:r,...c}=m,u=(0,e.useMemo)(()=>t?`${t} ${(0,o.computeBoxClassName)(c)}`:(0,o.computeBoxClassName)(c),[t,c]),p=(0,e.useMemo)(()=>(0,o.computeBoxProps)({...c,...(0,o.computeTwClass)(r)}),[c,r]);return(0,e.createElement)(s,{...p,className:u},a)}export{m as Box};
+import*as o from"react";import*as e from"../common/ui.js";function m(m){let{as:t="div",className:s,children:a,tw:r,...c}=m,p=s?`${s} ${(0,e.computeBoxClassName)(c)}`:(0,e.computeBoxClassName)(c),u=(0,e.computeBoxProps)({...c,...(0,e.computeTwClass)(r)});return(0,o.createElement)(t,{...u,className:p},a)}export{m as Box};

package/dist/components/Dialog.d.ts

@@ -2,15 +2,16 @@ import type { ReactNode } from 'react';
 type DialogProps = {
     /** The content of the dialog. */
     children: ReactNode;
-    /** The height of the dialog. */
-    height?: string;
     /** The function to call when close is clicked */
     onClose: () => void;
     /** The title of the dialog. */
     title: ReactNode;
+} & Partial<{
+    /** The height of the dialog. */
+    height: string;
     /** The width of the dialog. */
-    width?: string;
-};
+    width: string;
+}>;
 /**
  * ## Dialog
  *
@@ -31,7 +32,7 @@ export declare namespace Dialog {
     var Button: typeof DialogButton;
 }
 type DialogButtonProps = {
-    children: any;
+    children: ReactNode;
     onClick: () => void;
 };
 declare function DialogButton(props: DialogButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DmIcon.js

@@ -1 +1 @@
-import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function t(S){let{className:e,direction:t=2,fallback:o,frame:E=1,icon_state:i,icon:m,movement:n=!1,...H}=S,O=Byond.iconRefMap?.[m];if(!O)return o;let a=`${O}?state=${i}&dir=${t}&movement=${!!n}&frame=${E}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:a,...H})}export{e as Direction,t as DmIcon};
+import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function t(S){let{direction:e=2,fallback:t,frame:o=1,icon_state:E,icon:i,movement:m=!1,...n}=S,H=Byond.iconRefMap?.[i];if(!H)return t;let O=`${H}?state=${E}&dir=${e}&movement=${!!m}&frame=${o}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:O,...n})}export{e as Direction,t as DmIcon};

package/dist/components/Image.d.ts

@@ -1,9 +1,11 @@
 import type { BoxProps } from './Box';
 type Props = Partial<{
-    className: string;
-    /** True is default, this fixes an ie thing */
+    /** True is default, this fixes DM icon rendering issues */
     fixBlur: boolean;
-    /** False by default. Good if you're fetching images on UIs that do not auto update. This will attempt to fix the 'x' icon 5 times. */
+    /**
+     * False by default. Good if you're fetching images on UIs that do not auto
+     * update. This will attempt to fix the 'x' icon 5 times.
+     */
     fixErrors: boolean;
     /** Fill is default. */
     objectFit: 'contain' | 'cover';

package/dist/components/Image.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as A from"react";import*as t from"../common/ui.js";function r(r){let{fixBlur:o=!0,fixErrors:m=!1,objectFit:a="fill",src:i,...n}=r,s=(0,A.useRef)(0),u=(0,t.computeBoxProps)(n);return u.style={...u.style,"-ms-interpolation-mode":o?"nearest-neighbor":"auto",imageRendering:o?"pixelated":"auto",objectFit:a},(0,e.jsx)("img",{onError:e=>{if(m&&s.current<5){let A=e.currentTarget;setTimeout(()=>{A.src=`${i}?attempt=${s.current}`,s.current++},1e3)}},src:i||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...u,alt:"dm icon"})}export{r as Image};
+import*as A from"react/jsx-runtime";import*as e from"react";import*as r from"../common/ui.js";function t(t){let{fixBlur:o=!0,fixErrors:m=!1,objectFit:a="fill",src:i,...n}=t,s=(0,e.useRef)(0),c=(0,r.computeBoxProps)(n);return c.style={...c.style,imageRendering:o?"pixelated":"auto",objectFit:a},(0,A.jsx)("img",{onError:A=>{if(m&&s.current<5){let e=A.currentTarget;setTimeout(()=>{e.src=`${i}?attempt=${s.current}`,s.current++},1e3)}},src:i||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...c,alt:"dm icon"})}export{t as Image};

package/dist/components/InfinitePlane.d.ts

@@ -10,6 +10,8 @@ type Props = {
     initialLeft: number;
     /** The initial top position of the image. */
     initialTop: number;
+    /** Padding applied to the right of the zoom controls */
+    zoomPadding: number;
     /** A callback function that is called when the background image is moved. */
     onBackgroundMoved: (newX: number, newY: number) => void;
     /** A callback function that is called when the zoom value changes. */

package/dist/components/InfinitePlane.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,initialLeft:u=0,initialTop:c=0,onBackgroundMoved:l,onZoomChange:d,...m}=n,[p,f]=(0,t.useState)(0),[x,h]=(0,t.useState)(0),[j,g]=(0,t.useState)(0),[k,v]=(0,t.useState)(!1),[S,w]=(0,t.useState)(0),[b,M]=(0,t.useState)(1);function $(e){f(e.clientX-j),h(e.clientY-S),v(!0)}function B(e){if(!k)return;let t=e.clientX-p,o=e.clientY-x;l?.(t+u,o+c),g(t),w(o)}function y(){v(!1)}(0,t.useEffect)(()=>(window.addEventListener("mouseup",y),()=>{window.removeEventListener("mouseup",y)}),[]);let I=u+j,P=c+S;return(0,e.jsxs)("div",{...(0,o.computeBoxProps)({...m,style:{...m.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[(0,e.jsx)("div",{onMouseDown:$,onMouseMove:B,style:{backgroundImage:`url("${i}")`,backgroundPosition:`${I}px ${P}px`,backgroundRepeat:"repeat",backgroundSize:`${b*r}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),(0,e.jsx)("div",{onMouseDown:$,onMouseMove:B,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${I}px, ${P}px) scale(${b})`,transformOrigin:"top left",width:"100%"},children:s}),(0,e.jsx)(a,{onZoomClick:function(e){if("increase"===e&&b>=1.5||"decrease"===e&&b<=.5)return;let t=Math.round((b+("increase"===e?.1:-.1))*10)/10;M(t),d?.(t)},zoom:b})]})}function a(t){let{zoom:o,onZoomClick:r}=t;return(0,e.jsx)("div",{style:{left:5,position:"absolute",right:5,top:5},children:(0,e.jsxs)(s.Stack,{children:[(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o<=.5,icon:"minus",onClick:()=>r("decrease")})}),(0,e.jsx)(s.Stack.Item,{grow:!0,children:(0,e.jsxs)(i.ProgressBar,{maxValue:1.5,minValue:.5,value:o,children:[o,"x"]})}),(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o>=1.5,icon:"plus",onClick:()=>r("increase")})})]})})}export{r as InfinitePlane};
+import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,zoomPadding:u=0,initialLeft:c=0,initialTop:l=0,onBackgroundMoved:d,onZoomChange:m,...p}=n,[f,x]=(0,t.useState)(0),[h,j]=(0,t.useState)(0),[g,v]=(0,t.useState)(0),[k,S]=(0,t.useState)(!1),[w,b]=(0,t.useState)(0),[M,$]=(0,t.useState)(1);function B(e){x(e.clientX-g),j(e.clientY-w),S(!0)}function y(e){if(!k)return;let t=e.clientX-f,o=e.clientY-h;d?.(t+c,o+l),v(t),b(o)}function I(){S(!1)}function P(e){if("increase"===e&&M>=1.5||"decrease"===e&&M<=.5)return;let t=Math.round((M+("increase"===e?.1:-.1))*10)/10;$(t),m?.(t)}(0,t.useEffect)(()=>(window.addEventListener("mouseup",I),()=>{window.removeEventListener("mouseup",I)}),[]);let Y=c+g,C=l+w;return(0,e.jsxs)("div",{...(0,o.computeBoxProps)({...p,style:{...p.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),P(e.deltaY>0?"increase":"decrease"))},style:{backgroundImage:`url("${i}")`,backgroundPosition:`${Y}px ${C}px`,backgroundRepeat:"repeat",backgroundSize:`${M*r}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${Y}px, ${C}px) scale(${M})`,transformOrigin:"top left",width:"100%"},children:s}),(0,e.jsx)(a,{padding:u,onZoomClick:P,zoom:M})]})}function a(t){let{zoom:o,padding:r,onZoomClick:a}=t;return(0,e.jsx)("div",{style:{left:5,position:"absolute",right:5+r,top:5},children:(0,e.jsxs)(s.Stack,{children:[(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o<=.5,icon:"minus",onClick:()=>a("decrease")})}),(0,e.jsx)(s.Stack.Item,{grow:!0,children:(0,e.jsxs)(i.ProgressBar,{maxValue:1.5,minValue:.5,value:o,children:[o,"x"]})}),(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{r as InfinitePlane};

package/dist/components/LabeledList.d.ts

@@ -87,9 +87,7 @@ declare function LabeledListDivider(props: LabeledListDividerProps): import("rea
  * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-labeledlist--docs)
  */
 export declare namespace LabeledList {
-    /**
-     * Adds some empty space between LabeledList items.
-     */
+    /** Adds some empty space between LabeledList items. */
     const Divider: typeof LabeledListDivider;
     const Item: typeof LabeledListItem;
 }

package/dist/components/Modal.d.ts

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

package/dist/components/NoticeBox.d.ts

@@ -1,7 +1,7 @@
 import { type BoxProps } from './Box';
 type Props = ExclusiveProps & BoxProps;
 /** You MUST use only one or none */
-type NoticeType = 'info' | 'success' | 'warning' | 'danger';
+type NoticeType = 'info' | 'success' | 'danger';
 type None = {
     [K in NoticeType]?: undefined;
 };
@@ -11,9 +11,6 @@ type ExclusiveProps = None | (Omit<None, 'info'> & {
 }) | (Omit<None, 'success'> & {
     /** Green notice */
     success: boolean;
-}) | (Omit<None, 'warning'> & {
-    /** Orange notice */
-    warning: boolean;
 }) | (Omit<None, 'danger'> & {
     /** Red notice */
     danger: boolean;

package/dist/components/NoticeBox.js

@@ -1 +1 @@
-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};
+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,danger:m,...a}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",m&&"NoticeBox--type--danger",s]),...a})}export{c as NoticeBox};

package/dist/components/TrackOutsideClicks.d.ts

@@ -1,12 +1,34 @@
-import { Component, type PropsWithChildren } from 'react';
+import { type ReactElement } from 'react';
 type Props = {
+    /** The excluded element that CAN be clicked */
+    children: ReactElement<HTMLElement>;
+    /** Callback that fires whenever the user clicks something else */
     onOutsideClick: () => void;
-} & PropsWithChildren;
-export declare class TrackOutsideClicks extends Component<Props> {
-    ref: import("react").RefObject<HTMLDivElement | null>;
-    constructor(props: any);
-    componentWillUnmount(): void;
-    handleOutsideClick(event: MouseEvent): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+};
+/**
+ * ## TrackOutsideClicks
+ *
+ * Allows you to track when the user clicks outside of a specific element.
+ *
+ * Example:
+ *
+ * ```tsx
+ * import { TrackOutsideClicks } from 'tgui-core/components';
+ *
+ * function MyComponent() {
+ *  const [isOpen, setIsOpen] = useState(false);
+ *
+ *  return (
+ *    <TrackOutsideClicks onOutsideClick={() => setIsOpen(false)}>
+ *     <div>
+ *       Hello world!
+ *    </div>
+ *   </TrackOutsideClicks>
+ *  );
+ * }
+ * ```
+ *
+ * - [View documentation on tgui core](https://tgstation.github.io/tgui-core/?path=/docs/components-trackoutsideclicks--docs)
+ */
+export declare function TrackOutsideClicks(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/TrackOutsideClicks.js

@@ -1 +1 @@
-import*as e from"react/jsx-runtime";import*as t from"react";class i extends t.Component{ref=(0,t.createRef)();constructor(e){super(e),this.handleOutsideClick=this.handleOutsideClick.bind(this),document.addEventListener("click",this.handleOutsideClick)}componentWillUnmount(){document.removeEventListener("click",this.handleOutsideClick)}handleOutsideClick(e){e.target instanceof Node&&this.ref.current&&!this.ref.current.contains(e.target)&&this.props.onOutsideClick()}render(){return(0,e.jsx)("div",{ref:this.ref,children:this.props.children})}}export{i as TrackOutsideClicks};
+import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:n,onOutsideClick:c}=r,i=(0,t.createRef)();function o(e){e.target instanceof Node&&i.current&&!i.current.contains(e.target)&&c()}return(0,t.useEffect)(()=>(document.addEventListener("click",o),()=>{document.removeEventListener("click",o)}),[]),(0,e.jsx)("div",{ref:i,style:{userSelect:"none"},children:n})}export{r as TrackOutsideClicks};

package/package.json

@@ -6,22 +6,23 @@
   },
   "description": "TGUI core component library",
   "devDependencies": {
-    "@biomejs/biome": "2.0.0-beta.2",
-    "@rsbuild/core": "^1.3.18",
+    "@biomejs/biome": "^2.0.0-beta.5",
+    "@rsbuild/core": "^1.3.20",
     "@rsbuild/plugin-react": "^1.3.1",
     "@rsbuild/plugin-sass": "^1.3.1",
-    "@rslib/core": "^0.6.9",
+    "@rslib/core": "^0.7.1",
     "@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",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
+    "@types/bun": "^1.2.13",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "prettier": "^3.5.3",
-    "sass": "^1.81.0",
-    "storybook": "^8.6.12",
+    "sass": "^1.89.0",
+    "storybook": "^8.6.14",
     "storybook-addon-sass-postcss": "^0.3.2",
     "storybook-react-rsbuild": "^1.0.1",
     "typescript": "^5.8.3"
@@ -54,7 +55,7 @@
   ],
   "license": "MIT",
   "name": "tgui-core",
-  "packageManager": "pnpm@10.10.0",
+  "packageManager": "bun@1.2.13",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
@@ -64,13 +65,13 @@
     "url": "https://github.com/tgstation/tgui-core.git"
   },
   "scripts": {
-    "build": "rslib build",
+    "build-rslib": "rslib build",
     "build-storybook": "storybook build",
     "lint": "biome check lib",
     "lint:fix": "prettier . --write && biome check . --fix",
     "storybook": "storybook dev -p 6006",
-    "test": "node --experimental-strip-types --experimental-test-coverage --test ./tests/*.test.ts"
+    "test": "bun test"
   },
   "type": "module",
-  "version": "3.2.0"
+  "version": "3.3.1"
 }