tgui-core 1.3.2 → 1.4.0

package/dist/common/ui.d.ts

@@ -0,0 +1,113 @@
+import { BoxProps } from '../components/Box';
+import { BooleanLike } from './react';
+type UnitMapper = (value: unknown) => string | undefined;
+/**
+ * Coverts our rem-like spacing unit into a CSS unit.
+ */
+export declare const unit: UnitMapper;
+/**
+ * Same as `unit`, but half the size for integers numbers.
+ */
+export declare const halfUnit: UnitMapper;
+export type StringStyleMap = {
+    /** Align text inside the box. */
+    align: string | BooleanLike;
+    /** A direct mapping to `position` CSS property. */
+    position: string | BooleanLike;
+    /** Vertical align property. */
+    verticalAlign: string | BooleanLike;
+    /** Sets background color. */
+    backgroundColor: string | BooleanLike;
+    /** Applies an atomic `color-<name>` class to the element. */
+    color: string | BooleanLike;
+    /** Opacity, from 0 to 1. */
+    opacity: string | BooleanLike;
+    /** Sets text color. */
+    textColor: string | BooleanLike;
+    /** Margin on all sides. */
+    m: string | BooleanLike;
+    /** Bottom margin. */
+    mb: string | BooleanLike;
+    /** Left margin. */
+    ml: string | BooleanLike;
+    /** Right margin. */
+    mr: string | BooleanLike;
+    /** Top margin. */
+    mt: string | BooleanLike;
+    /** Horizontal margin. */
+    mx: string | BooleanLike;
+    /** Vertical margin. */
+    my: string | BooleanLike;
+    /** Bottom margin. */
+    bottom: string | BooleanLike;
+    /** Left margin. */
+    left: string | BooleanLike;
+    /** Right margin. */
+    right: string | BooleanLike;
+    /** Top margin. */
+    top: string | BooleanLike;
+    /** Overflow property. */
+    overflow: string | BooleanLike;
+    /** Overflow-X property. */
+    overflowX: string | BooleanLike;
+    /** Overflow-Y property. */
+    overflowY: string | BooleanLike;
+    /** Padding on all sides. */
+    p: string | BooleanLike;
+    /** Bottom padding. */
+    pb: string | BooleanLike;
+    /** Left padding. */
+    pl: string | BooleanLike;
+    /** Right padding. */
+    pr: string | BooleanLike;
+    /** Top padding. */
+    pt: string | BooleanLike;
+    /** Horizontal padding. */
+    px: string | BooleanLike;
+    /** Vertical padding. */
+    py: string | BooleanLike;
+    /** Box height. */
+    height: string | BooleanLike;
+    /** Box maximum height. */
+    maxHeight: string | BooleanLike;
+    /** Box maximum width. */
+    maxWidth: string | BooleanLike;
+    /** Box minimum height. */
+    minHeight: string | BooleanLike;
+    /** Box minimum width. */
+    minWidth: string | BooleanLike;
+    /** Box width. */
+    width: string | BooleanLike;
+    /** Font family. */
+    fontFamily: string | BooleanLike;
+    /** Font size. */
+    fontSize: string | BooleanLike;
+    /** Font weight. */
+    fontWeight: string | BooleanLike;
+    /** Directly affects the height of text lines. Useful for adjusting button height. */
+    lineHeight: string | BooleanLike;
+    /** Align text inside the box. */
+    textAlign: string | BooleanLike;
+};
+export declare const stringStyleMap: Record<keyof StringStyleMap, any>;
+export type BooleanStyleMap = {
+    /** Make text bold. */
+    bold: boolean;
+    /** Fill positioned parent. */
+    fillPositionedParent: boolean;
+    /** Forces the `Box` to appear as an `inline-block`. */
+    inline: boolean;
+    /** Make text italic. */
+    italic: boolean;
+    /** Stops text from wrapping. */
+    nowrap: boolean;
+    /** Preserves line-breaks and spacing in text. */
+    preserveWhitespace: boolean;
+};
+export declare const booleanStyleMap: Record<keyof BooleanStyleMap, any>;
+export declare function computeBoxProps(props: any): Record<string, any>;
+export declare function computeBoxClassName(props: BoxProps): string;
+type StyleMap = StringStyleMap & BooleanStyleMap;
+/** Super light implementation of tailwind-like class names. */
+export declare function computeTwClass(input: string | undefined): StyleMap;
+export {};

package/dist/common/ui.js

@@ -0,0 +1,137 @@
+import { CSS_COLORS as u } from "./constants.js";
+import { classes as y } from "./react.js";
+const f = (o) => {
+  if (typeof o == "string")
+    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
+  if (typeof o == "number")
+    return `${o}rem`;
+}, p = (o) => {
+  if (typeof o == "string")
+    return f(o);
+  if (typeof o == "number")
+    return f(o * 0.5);
+};
+function w(o) {
+  return !h(o);
+}
+function h(o) {
+  return typeof o == "string" && u.includes(o);
+}
+const c = (o) => (t, i) => {
+  (typeof i == "number" || typeof i == "string") && (t[o] = i);
+}, n = (o, t) => (i, e) => {
+  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
+}, l = (o, t) => (i, e) => {
+  e && (i[o] = t);
+}, s = (o, t, i) => (e, r) => {
+  if (typeof r == "number" || typeof r == "string")
+    for (let m = 0; m < i.length; m++)
+      e[o + i[m]] = t(r);
+}, a = (o) => (t, i) => {
+  w(i) && (t[o] = i);
+}, d = {
+  align: c("textAlign"),
+  bottom: n("bottom", f),
+  fontFamily: c("fontFamily"),
+  fontSize: n("fontSize", f),
+  fontWeight: c("fontWeight"),
+  height: n("height", f),
+  left: n("left", f),
+  maxHeight: n("maxHeight", f),
+  maxWidth: n("maxWidth", f),
+  minHeight: n("minHeight", f),
+  minWidth: n("minWidth", f),
+  opacity: c("opacity"),
+  overflow: c("overflow"),
+  overflowX: c("overflowX"),
+  overflowY: c("overflowY"),
+  position: c("position"),
+  right: n("right", f),
+  textAlign: c("textAlign"),
+  top: n("top", f),
+  verticalAlign: c("verticalAlign"),
+  width: n("width", f),
+  lineHeight: (o, t) => {
+    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = f(t));
+  },
+  // Margin
+  m: s("margin", p, [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right"
+  ]),
+  mb: n("marginBottom", p),
+  ml: n("marginLeft", p),
+  mr: n("marginRight", p),
+  mt: n("marginTop", p),
+  mx: s("margin", p, ["Left", "Right"]),
+  my: s("margin", p, ["Top", "Bottom"]),
+  // Padding
+  p: s("padding", p, [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right"
+  ]),
+  pb: n("paddingBottom", p),
+  pl: n("paddingLeft", p),
+  pr: n("paddingRight", p),
+  pt: n("paddingTop", p),
+  px: s("padding", p, ["Left", "Right"]),
+  py: s("padding", p, ["Top", "Bottom"]),
+  // Color props
+  color: a("color"),
+  textColor: a("color"),
+  backgroundColor: a("backgroundColor")
+}, b = {
+  bold: l("fontWeight", "bold"),
+  fillPositionedParent: (o, t) => {
+    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
+  },
+  inline: l("display", "inline-block"),
+  italic: l("fontStyle", "italic"),
+  nowrap: l("whiteSpace", "nowrap"),
+  preserveWhitespace: l("whiteSpace", "pre-wrap")
+};
+function T(o) {
+  const t = {}, i = {};
+  for (const e in o) {
+    if (e === "style")
+      continue;
+    const r = o[e], m = d[e] || b[e];
+    m ? m(i, r) : t[e] = r;
+  }
+  return t.style = { ...i, ...o.style }, t;
+}
+function S(o) {
+  const t = o.textColor || o.color, { backgroundColor: i } = o;
+  return y([
+    h(t) && `color-${t}`,
+    h(i) && `color-bg-${i}`
+  ]);
+}
+function P(o) {
+  const t = {};
+  if (!o) return t;
+  const i = o.split(" ");
+  for (const e of i) {
+    const [r, m] = e.split("-");
+    if (r)
+      if (r in d) {
+        if (m === "") continue;
+        const g = Number(m);
+        !Number.isNaN(g) && Number.isFinite(g) ? t[r] = g : t[r] = m;
+      } else r in b ? t[r] = !0 : console.warn(`Unknown prop ${r}`);
+  }
+  return t;
+}
+export {
+  b as booleanStyleMap,
+  S as computeBoxClassName,
+  T as computeBoxProps,
+  P as computeTwClass,
+  p as halfUnit,
+  d as stringStyleMap,
+  f as unit
+};

package/dist/components/Box.d.ts

@@ -1,8 +1,7 @@
 import { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode, UIEventHandler } from 'react';
 import { BooleanLike } from '../common/react';
-type BooleanProps = Partial<Record<keyof typeof booleanStyleMap, boolean>>;
-type StringProps = Partial<Record<keyof typeof stringStyleMap, string | BooleanLike>>;
-export type EventHandlers = Partial<{
+import { BooleanStyleMap, StringStyleMap } from '../common/ui';
+type EventHandlers = {
     onClick: MouseEventHandler<HTMLDivElement>;
     onContextMenu: MouseEventHandler<HTMLDivElement>;
     onDoubleClick: MouseEventHandler<HTMLDivElement>;
@@ -14,78 +13,91 @@ export type EventHandlers = Partial<{
     onMouseOver: MouseEventHandler<HTMLDivElement>;
     onMouseUp: MouseEventHandler<HTMLDivElement>;
     onScroll: UIEventHandler<HTMLDivElement>;
-}>;
-export type BoxProps = Partial<{
+};
+type InternalProps = {
+    /** The component used for the root node. */
     as: string;
+    /** The content of the component. */
     children: ReactNode;
+    /** Class name to pass into the component. */
     className: string | BooleanLike;
+    /** The unique id of the component. */
     id: string;
+    /** The inline style of the component. */
     style: CSSProperties;
-}> & BooleanProps & StringProps & EventHandlers;
+    /**
+     * ### tw
+     * A shorthand classname syntax based loosely on tailwind.
+     *
+     * This takes all Box style props with a dash separator for params, e.g.'mb-4' or the prop name alone e.g. 'bold'.
+     *
+     * It's compatible with regular Box props, even on the same component, but it will take precedence.
+     *
+     * ### Example:
+     * ```tsx
+     * <Box tw="mb-2 bold fontSize-16px">
+     *  // Is equivalent to
+     * <Box mb={2} bold fontSize="16px">
+     *  ```
+     *
+     * ### Caveats:
+     * 1. You can't use this for custom props from other components.
+     *
+     * 2. There is no type info or safety for this method. Like the old days, it simply won't work if you use it incorrectly.
+     *
+     * 3. This should be a static string with minimal interpolation. If you need more logic, prefer the props approach.
+     */
+    tw: string;
+};
+export type BoxProps = Partial<InternalProps & BooleanStyleMap & StringStyleMap & EventHandlers>;
 type DangerDoNotUse = {
     dangerouslySetInnerHTML?: {
         __html: any;
     };
 };
 /**
- * Coverts our rem-like spacing unit into a CSS unit.
- */
-export declare function unit(value: unknown): string | undefined;
-/**
- * Same as `unit`, but half the size for integers numbers.
+ * # Box
+ *
+ * The Box component serves as a wrapper component for most of the CSS utility
+ * needs. It creates a new DOM element, a `<div>` by default that can be changed
+ * with the `as` property. Let's say you want to use a `<span>` instead:
+ *
+ * @example
+ * ```tsx
+ * <Box as="span" m={1}>
+ *   <Button />
+ * </Box>
+ * ```
+ *
+ * This works great when the changes can be isolated to a new DOM element.
+ * For instance, you can change the margin this way.
+ *
+ * However, sometimes you have to target the underlying DOM element.
+ * For instance, you want to change the text color of the button. The Button
+ * component defines its own color. CSS inheritance doesn't help.
+ *
+ * To workaround this problem, the Box children accept a render props function.
+ * This way, `Button` can pull out the `className` generated by the `Box`.
+ *
+ * @example
+ * ```tsx
+ * <Box color="primary">{(props) => <Button {...props} />}</Box>
+ * ```
+ *
+ * ## Box Units
+ *
+ * `Box` units, like width, height and margins can be defined in two ways:
+ *
+ * - By plain numbers
+ *   - 1 unit equals `1rem` for width, height and positioning properties.
+ *   - 1 unit equals `0.5rem` for margins and paddings.
+ * - By strings with proper CSS units
+ *   - For example: `100px`, `2em`, `1rem`, `100%`, etc.
+ *
+ * If you need more precision, you can always use fractional numbers.
+ *
+ * Default font size (`1rem`) is equal to `12px`.
  */
-export declare function halfUnit(value: unknown): string | undefined;
-declare const stringStyleMap: {
-    readonly align: (style: any, value: any) => void;
-    readonly bottom: (style: any, value: any) => void;
-    readonly fontFamily: (style: any, value: any) => void;
-    readonly fontSize: (style: any, value: any) => void;
-    readonly fontWeight: (style: any, value: any) => void;
-    readonly height: (style: any, value: any) => void;
-    readonly left: (style: any, value: any) => void;
-    readonly maxHeight: (style: any, value: any) => void;
-    readonly maxWidth: (style: any, value: any) => void;
-    readonly minHeight: (style: any, value: any) => void;
-    readonly minWidth: (style: any, value: any) => void;
-    readonly opacity: (style: any, value: any) => void;
-    readonly overflow: (style: any, value: any) => void;
-    readonly overflowX: (style: any, value: any) => void;
-    readonly overflowY: (style: any, value: any) => void;
-    readonly position: (style: any, value: any) => void;
-    readonly right: (style: any, value: any) => void;
-    readonly textAlign: (style: any, value: any) => void;
-    readonly top: (style: any, value: any) => void;
-    readonly verticalAlign: (style: any, value: any) => void;
-    readonly width: (style: any, value: any) => void;
-    readonly lineHeight: (style: any, value: any) => void;
-    readonly m: (style: any, value: any) => void;
-    readonly mb: (style: any, value: any) => void;
-    readonly ml: (style: any, value: any) => void;
-    readonly mr: (style: any, value: any) => void;
-    readonly mt: (style: any, value: any) => void;
-    readonly mx: (style: any, value: any) => void;
-    readonly my: (style: any, value: any) => void;
-    readonly p: (style: any, value: any) => void;
-    readonly pb: (style: any, value: any) => void;
-    readonly pl: (style: any, value: any) => void;
-    readonly pr: (style: any, value: any) => void;
-    readonly pt: (style: any, value: any) => void;
-    readonly px: (style: any, value: any) => void;
-    readonly py: (style: any, value: any) => void;
-    readonly color: (style: any, value: any) => void;
-    readonly textColor: (style: any, value: any) => void;
-    readonly backgroundColor: (style: any, value: any) => void;
-};
-declare const booleanStyleMap: {
-    readonly bold: (style: any, value: any) => void;
-    readonly fillPositionedParent: (style: any, value: any) => void;
-    readonly inline: (style: any, value: any) => void;
-    readonly italic: (style: any, value: any) => void;
-    readonly nowrap: (style: any, value: any) => void;
-    readonly preserveWhitespace: (style: any, value: any) => void;
-};
-export declare function computeBoxProps(props: any): Record<string, any>;
-export declare function computeBoxClassName(props: BoxProps): string;
 export declare function Box(props: BoxProps & DangerDoNotUse): import('react').ReactElement<{
     className: string;
 }, string | import('react').JSXElementConstructor<any>>;

package/dist/components/Box.js

@@ -1,133 +1,19 @@
-import { createElement as y } from "react";
-import { CSS_COLORS as b } from "../common/constants.js";
-import { classes as u } from "../common/react.js";
-function p(o) {
-  if (typeof o == "string")
-    return o.endsWith("px") ? `${Number.parseFloat(o) / 12}rem` : o;
-  if (typeof o == "number")
-    return `${o}rem`;
-}
-function r(o) {
-  if (typeof o == "string")
-    return p(o);
-  if (typeof o == "number")
-    return p(o * 0.5);
-}
-function x(o) {
-  return !a(o);
-}
-function a(o) {
-  return typeof o == "string" && b.includes(o);
-}
-const m = (o) => (t, i) => {
-  (typeof i == "number" || typeof i == "string") && (t[o] = i);
-}, n = (o, t) => (i, e) => {
-  (typeof e == "number" || typeof e == "string") && (i[o] = t(e));
-}, l = (o, t) => (i, e) => {
-  e && (i[o] = t);
-}, g = (o, t, i) => (e, f) => {
-  if (typeof f == "number" || typeof f == "string")
-    for (let c = 0; c < i.length; c++)
-      e[o + i[c]] = t(f);
-}, s = (o) => (t, i) => {
-  x(i) && (t[o] = i);
-}, C = {
-  align: m("textAlign"),
-  bottom: n("bottom", p),
-  fontFamily: m("fontFamily"),
-  fontSize: n("fontSize", p),
-  fontWeight: m("fontWeight"),
-  height: n("height", p),
-  left: n("left", p),
-  maxHeight: n("maxHeight", p),
-  maxWidth: n("maxWidth", p),
-  minHeight: n("minHeight", p),
-  minWidth: n("minWidth", p),
-  opacity: m("opacity"),
-  overflow: m("overflow"),
-  overflowX: m("overflowX"),
-  overflowY: m("overflowY"),
-  position: m("position"),
-  right: n("right", p),
-  textAlign: m("textAlign"),
-  top: n("top", p),
-  verticalAlign: m("verticalAlign"),
-  width: n("width", p),
-  lineHeight: (o, t) => {
-    typeof t == "number" ? o.lineHeight = t : typeof t == "string" && (o.lineHeight = p(t));
-  },
-  // Margin
-  m: g("margin", r, [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right"
-  ]),
-  mb: n("marginBottom", r),
-  ml: n("marginLeft", r),
-  mr: n("marginRight", r),
-  mt: n("marginTop", r),
-  mx: g("margin", r, ["Left", "Right"]),
-  my: g("margin", r, ["Top", "Bottom"]),
-  // Padding
-  p: g("padding", r, [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right"
-  ]),
-  pb: n("paddingBottom", r),
-  pl: n("paddingLeft", r),
-  pr: n("paddingRight", r),
-  pt: n("paddingTop", r),
-  px: g("padding", r, ["Left", "Right"]),
-  py: g("padding", r, ["Top", "Bottom"]),
-  // Color props
-  color: s("color"),
-  textColor: s("color"),
-  backgroundColor: s("backgroundColor")
-}, w = {
-  bold: l("fontWeight", "bold"),
-  fillPositionedParent: (o, t) => {
-    t && (o.position = "absolute", o.top = 0, o.bottom = 0, o.left = 0, o.right = 0);
-  },
-  inline: l("display", "inline-block"),
-  italic: l("fontStyle", "italic"),
-  nowrap: l("whiteSpace", "nowrap"),
-  preserveWhitespace: l("whiteSpace", "pre-wrap")
-};
-function S(o) {
-  const t = {}, i = {};
-  for (const e of Object.keys(o)) {
-    if (e === "style")
-      continue;
-    const f = o[e], c = C[e] || w[e];
-    c ? c(i, f) : t[e] = f;
-  }
-  return t.style = { ...i, ...o.style }, t;
-}
-function d(o) {
-  const t = o.textColor || o.color, i = o.backgroundColor;
-  return u([
-    a(t) && `color-${t}`,
-    a(i) && `color-bg-${i}`
-  ]);
-}
-function W(o) {
-  const { as: t = "div", className: i, children: e, ...f } = o, c = i ? `${i} ${d(f)}` : d(f), h = S(f);
-  return y(
-    typeof t == "string" ? t : "div",
+import { createElement as n } from "react";
+import { computeBoxClassName as s, computeBoxProps as l, computeTwClass as u } from "../common/ui.js";
+function x(t) {
+  const { as: m = "div", className: e, children: c, tw: r, ...o } = t, a = e ? `${e} ${s(o)}` : s(o), p = l({
+    ...o,
+    ...u(r)
+  });
+  return n(
+    m,
     {
-      ...h,
-      className: c
+      ...p,
+      className: a
     },
-    e
+    c
   );
 }
 export {
-  W as Box,
-  d as computeBoxClassName,
-  S as computeBoxProps,
-  r as halfUnit,
-  p as unit
+  x as Box
 };

package/dist/components/Button.js

@@ -2,7 +2,8 @@ import { jsx as i, jsxs as _, Fragment as K } from "react/jsx-runtime";
 import { useState as A, createRef as V, useEffect as $, useRef as z } from "react";
 import { KEY as D, isEscape as E } from "../common/keys.js";
 import { classes as F } from "../common/react.js";
-import { computeBoxClassName as j, computeBoxProps as q, Box as O } from "./Box.js";
+import { computeBoxClassName as j, computeBoxProps as q } from "../common/ui.js";
+import { Box as O } from "./Box.js";
 import { Icon as S } from "./Icon.js";
 import { Tooltip as v } from "./Tooltip.js";
 function x(u) {

package/dist/components/ByondUi.js

@@ -2,7 +2,7 @@ import { jsx as s } from "react/jsx-runtime";
 import { Component as a, createRef as c } from "react";
 import { shallowDiffers as r } from "../common/react.js";
 import { debounce as m } from "../common/timer.js";
-import { computeBoxProps as l } from "./Box.js";
+import { computeBoxProps as l } from "../common/ui.js";
 const o = [];
 function h(t) {
   const n = o.length;

package/dist/components/ColorBox.js

@@ -1,6 +1,6 @@
 import { jsx as t } from "react/jsx-runtime";
 import { classes as c } from "../common/react.js";
-import { computeBoxClassName as s, computeBoxProps as m } from "./Box.js";
+import { computeBoxClassName as s, computeBoxProps as m } from "../common/ui.js";
 function d(r) {
   const { content: l, children: a, className: e, ...o } = r;
   return o.color = l ? null : "default", o.backgroundColor = r.color || "default", /* @__PURE__ */ t(

package/dist/components/Dropdown.js

@@ -1,7 +1,7 @@
 import { jsx as l, jsxs as p, Fragment as W } from "react/jsx-runtime";
 import { useState as F, useRef as L, useEffect as S } from "react";
 import { classes as N } from "../common/react.js";
-import { unit as $ } from "./Box.js";
+import { unit as $ } from "../common/ui.js";
 import { Button as D } from "./Button.js";
 import { Icon as b } from "./Icon.js";
 import { Popper as q } from "./Popper.js";

package/dist/components/Flex.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { classes as r } from "../common/react.js";
-import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "./Box.js";
+import { computeBoxClassName as m, computeBoxProps as a, unit as f } from "../common/ui.js";
 function p(e) {
   return r([
     "Flex",

package/dist/components/Icon.d.ts

@@ -15,7 +15,7 @@ type Props = {
     spin: BooleanLike;
     /** Custom CSS. */
     style: CSSProperties;
-}> & BoxProps;
+}> & Omit<BoxProps, 'children'>;
 export declare function Icon(props: Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Icon {
     var Stack: typeof IconStack;

package/dist/components/Icon.js

@@ -1,9 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
 import { classes as l } from "../common/react.js";
-import { computeBoxProps as p, computeBoxClassName as u } from "./Box.js";
+import { computeBoxProps as p, computeBoxClassName as u } from "../common/ui.js";
 const f = /-o$/;
 function d(c) {
-  const { name: s, size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
+  const { name: s = "", size: o, spin: a, className: N, rotation: r, ...e } = c, n = e.style || {};
   o && (n.fontSize = `${o * 100}%`), r && (n.transform = `rotate(${r}deg)`), e.style = n;
   const x = p(e);
   let t = "";