@twreporter/react-typescript-components 0.1.0-beta.7 → 0.1.0-beta.9

package/README.md

@@ -53,6 +53,22 @@ yarn build
 
 The output files will be generated in the `lib/` directory.
 
+### Build tool change: tsup → tsdown
+
+We replaced tsup with tsdown for building this package due to intermittent memory crashes when generating type declarations with tsup (ERR_WORKER_OUT_OF_MEMORY). See: https://github.com/egoist/tsup/issues/920
+
+What changed
+
+- Components are built with tsdown (see `tsdown.config.ts`).
+- Scripts:
+  - `yarn build:components` runs tsdown.
+  - `yarn build` cleans, builds components, then builds Tailwind CSS to `lib/styles.css`.
+
+Impact
+
+- No breaking changes for consumers: we still ship ESM and CJS outputs in `lib/` with bundled `.d.ts` and sourcemaps.
+- For contributors: use `yarn build` or `yarn build:components`; tsup is no longer used.
+
 ## License
 
 MIT

package/lib/button/constants.d.mts

@@ -0,0 +1,3 @@
+import "../index-Ej3agYJF.mjs";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-DWy9qTkZ.mjs";
+export { SIZE, STYLE, Size, Style, TYPE, Type };

package/lib/button/constants.d.ts

@@ -0,0 +1,3 @@
+import "../index-H3peA2d_.js";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-gCmka4Fp.js";
+export { SIZE, STYLE, Size, Style, TYPE, Type };

package/lib/button/constants.js

@@ -0,0 +1,5 @@
+const require_constants = require('../constants-BmxSMOOn.js');
+
+exports.SIZE = require_constants.SIZE;
+exports.STYLE = require_constants.STYLE;
+exports.TYPE = require_constants.TYPE;

package/lib/button/constants.mjs

@@ -0,0 +1,3 @@
+import { SIZE, STYLE, TYPE } from "../constants-oTHAnh6r.mjs";
+
+export { SIZE, STYLE, TYPE };

package/lib/button/index.d.mts

@@ -1,26 +1,133 @@
-import { Theme, THEME } from './constant.mjs';
-import { Size, Style } from './enum.mjs';
-import * as react from 'react';
-export { default as TextButton } from './components/text-button/index.mjs';
-import '../types/index.mjs';
+import "../index-Ej3agYJF.mjs";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-DWy9qTkZ.mjs";
+import { THEME, Theme } from "../theme-BqjiyFsg.mjs";
+import { WEIGHT, Weight } from "../constants-D7_N9Z7C.mjs";
+import * as react0 from "react";
+import React$1, { FC, ReactElement } from "react";
 
+//#region src/button/components/text-button/index.d.ts
+type TextButtonProps = {
+  text: string;
+  leftIconComponent?: ReactElement;
+  rightIconComponent?: ReactElement;
+  size?: Size;
+  style?: Style;
+  theme?: Theme;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+};
+declare const TextButton: FC<TextButtonProps> & {
+  Size: typeof SIZE;
+  Style: typeof STYLE;
+  Theme: typeof THEME;
+};
+//#endregion
+//#region src/button/components/icon-button/index.d.ts
+type IconButtonProps = {
+  iconComponent: React$1.ReactElement;
+  theme?: Theme;
+  type?: Type;
+  disabled?: boolean;
+  active?: boolean;
+  className?: string;
+  onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const IconButton: React$1.FC<IconButtonProps> & {
+  Theme: typeof THEME;
+  Type: typeof TYPE;
+};
+//#endregion
+//#region src/button/components/menu-button/index.d.ts
+type MenuButtonProps = {
+  text: string;
+  color: string;
+  fontWeight: Weight;
+  className?: string;
+  p1ClassName?: string;
+};
+declare const MenuButton: React$1.FC<MenuButtonProps> & {
+  FontWeight: typeof WEIGHT;
+};
+//#endregion
+//#region src/button/components/pill-button/index.d.ts
+type PillButtonProps = {
+  text?: string;
+  leftIconComponent?: React.ReactElement;
+  rightIconComponent?: React.ReactElement;
+  size?: Size;
+  theme?: Theme;
+  type?: Type;
+  style?: Style;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+};
+declare const PillButton: FC<PillButtonProps> & {
+  Theme: typeof THEME;
+  Type: typeof TYPE;
+  Size: typeof SIZE;
+  Style: typeof STYLE;
+};
+//#endregion
+//#region src/button/index.d.ts
 declare const _default: {
-    TextButton: react.FC<{
-        text: string;
-        leftIconComponent?: react.ReactElement;
-        rightIconComponent?: react.ReactElement;
-        size?: Size;
-        style?: Style;
-        theme?: Theme;
-        active?: boolean;
-        disabled?: boolean;
-        loading?: boolean;
-        className?: string;
-    }> & {
-        Size: typeof Size;
-        Style: typeof Style;
-        THEME: typeof THEME;
-    };
+  TextButton: react0.FC<{
+    text: string;
+    leftIconComponent?: react0.ReactElement;
+    rightIconComponent?: react0.ReactElement;
+    size?: Size;
+    style?: Style;
+    theme?: Theme;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+  }> & {
+    Size: typeof SIZE;
+    Style: typeof STYLE;
+    Theme: typeof THEME;
+  };
+  IconButton: react0.FC<{
+    iconComponent: React.ReactElement;
+    theme?: Theme;
+    type?: Type;
+    disabled?: boolean;
+    active?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  }> & {
+    Theme: typeof THEME;
+    Type: typeof TYPE;
+  };
+  MenuButton: react0.FC<{
+    text: string;
+    color: string;
+    fontWeight: Weight;
+    className?: string;
+    p1ClassName?: string;
+  }> & {
+    FontWeight: typeof WEIGHT;
+  };
+  PillButton: react0.FC<{
+    text?: string;
+    leftIconComponent?: React.ReactElement;
+    rightIconComponent?: React.ReactElement;
+    size?: Size;
+    theme?: Theme;
+    type?: Type;
+    style?: Style;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+  }> & {
+    Theme: typeof THEME;
+    Type: typeof TYPE;
+    Size: typeof SIZE;
+    Style: typeof STYLE;
+  };
 };
-
-export { _default as default };
+//#endregion
+export { IconButton, MenuButton, PillButton, TextButton, _default as default };
+//# sourceMappingURL=index.d.mts.map

package/lib/button/index.d.ts

@@ -1,26 +1,133 @@
-import { Theme, THEME } from './constant.js';
-import { Size, Style } from './enum.js';
-import * as react from 'react';
-export { default as TextButton } from './components/text-button/index.js';
-import '../types/index.js';
+import "../index-H3peA2d_.js";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-gCmka4Fp.js";
+import { THEME, Theme } from "../theme-BDGfJ8n-.js";
+import { WEIGHT, Weight } from "../constants-BS3rPbaX.js";
+import * as react0 from "react";
+import React$1, { FC, ReactElement } from "react";
 
+//#region src/button/components/text-button/index.d.ts
+type TextButtonProps = {
+  text: string;
+  leftIconComponent?: ReactElement;
+  rightIconComponent?: ReactElement;
+  size?: Size;
+  style?: Style;
+  theme?: Theme;
+  active?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+};
+declare const TextButton: FC<TextButtonProps> & {
+  Size: typeof SIZE;
+  Style: typeof STYLE;
+  Theme: typeof THEME;
+};
+//#endregion
+//#region src/button/components/icon-button/index.d.ts
+type IconButtonProps = {
+  iconComponent: React$1.ReactElement;
+  theme?: Theme;
+  type?: Type;
+  disabled?: boolean;
+  active?: boolean;
+  className?: string;
+  onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const IconButton: React$1.FC<IconButtonProps> & {
+  Theme: typeof THEME;
+  Type: typeof TYPE;
+};
+//#endregion
+//#region src/button/components/menu-button/index.d.ts
+type MenuButtonProps = {
+  text: string;
+  color: string;
+  fontWeight: Weight;
+  className?: string;
+  p1ClassName?: string;
+};
+declare const MenuButton: React$1.FC<MenuButtonProps> & {
+  FontWeight: typeof WEIGHT;
+};
+//#endregion
+//#region src/button/components/pill-button/index.d.ts
+type PillButtonProps = {
+  text?: string;
+  leftIconComponent?: React.ReactElement;
+  rightIconComponent?: React.ReactElement;
+  size?: Size;
+  theme?: Theme;
+  type?: Type;
+  style?: Style;
+  disabled?: boolean;
+  loading?: boolean;
+  className?: string;
+};
+declare const PillButton: FC<PillButtonProps> & {
+  Theme: typeof THEME;
+  Type: typeof TYPE;
+  Size: typeof SIZE;
+  Style: typeof STYLE;
+};
+//#endregion
+//#region src/button/index.d.ts
 declare const _default: {
-    TextButton: react.FC<{
-        text: string;
-        leftIconComponent?: react.ReactElement;
-        rightIconComponent?: react.ReactElement;
-        size?: Size;
-        style?: Style;
-        theme?: Theme;
-        active?: boolean;
-        disabled?: boolean;
-        loading?: boolean;
-        className?: string;
-    }> & {
-        Size: typeof Size;
-        Style: typeof Style;
-        THEME: typeof THEME;
-    };
+  TextButton: react0.FC<{
+    text: string;
+    leftIconComponent?: react0.ReactElement;
+    rightIconComponent?: react0.ReactElement;
+    size?: Size;
+    style?: Style;
+    theme?: Theme;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+  }> & {
+    Size: typeof SIZE;
+    Style: typeof STYLE;
+    Theme: typeof THEME;
+  };
+  IconButton: react0.FC<{
+    iconComponent: React.ReactElement;
+    theme?: Theme;
+    type?: Type;
+    disabled?: boolean;
+    active?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  }> & {
+    Theme: typeof THEME;
+    Type: typeof TYPE;
+  };
+  MenuButton: react0.FC<{
+    text: string;
+    color: string;
+    fontWeight: Weight;
+    className?: string;
+    p1ClassName?: string;
+  }> & {
+    FontWeight: typeof WEIGHT;
+  };
+  PillButton: react0.FC<{
+    text?: string;
+    leftIconComponent?: React.ReactElement;
+    rightIconComponent?: React.ReactElement;
+    size?: Size;
+    theme?: Theme;
+    type?: Type;
+    style?: Style;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+  }> & {
+    Theme: typeof THEME;
+    Type: typeof TYPE;
+    Size: typeof SIZE;
+    Style: typeof STYLE;
+  };
 };
-
-export { _default as default };
+//#endregion
+export { IconButton, MenuButton, PillButton, TextButton, _default as default };
+//# sourceMappingURL=index.d.ts.map

package/lib/button/index.js

@@ -1,208 +1,12 @@
-'use strict';
-
 Object.defineProperty(exports, '__esModule', { value: true });
-
-var react = require('react');
-var clsx2 = require('clsx');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
-
-// src/button/components/text-button/index.tsx
-
-// src/text/enum/index.ts
-var WEIGHT = {
-  extraLight: "extra-light",
-  normal: "normal",
-  bold: "bold"
-};
-var baseClass = "font-default leading-[150%] flex items-center m-0";
-var variantClass = {
-  P1: "text-[16px]",
-  P2: "text-[14px]",
-  P3: "text-[12px]",
-  P4: "text-[10px]"
-};
-var ParagraphVariant = (variant) => {
-  const Component = ({
-    text = "",
-    weight = WEIGHT.normal,
-    className = "",
-    ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(
-    "p",
-    {
-      className: clsx2__default.default(
-        baseClass,
-        variantClass[variant],
-        `font-${weight}`,
-        className
-      ),
-      ...props,
-      children: text
-    }
-  );
-  Component.displayName = variant;
-  Component.Weight = WEIGHT;
-  return Component;
-};
-var P1 = ParagraphVariant("P1");
-var P2 = ParagraphVariant("P2");
-ParagraphVariant("P3");
-ParagraphVariant("P4");
-
-// src/button/enum.ts
-var Size = /* @__PURE__ */ ((Size2) => {
-  Size2[Size2["S"] = 0] = "S";
-  Size2[Size2["L"] = 1] = "L";
-  return Size2;
-})(Size || {});
-var Style = /* @__PURE__ */ ((Style2) => {
-  Style2[Style2["BRAND"] = 0] = "BRAND";
-  Style2[Style2["DARK"] = 1] = "DARK";
-  Style2[Style2["LIGHT"] = 2] = "LIGHT";
-  return Style2;
-})(Style || {});
-
-// src/button/constant.ts
-var THEME = {
-  normal: "normal",
-  photography: "photography",
-  transparent: "transparent",
-  index: "index"
-};
-
-// src/button/components/text-button/theme.ts
-var getDisabledContainerTheme = (theme) => {
-  return [
-    // default theme
-    "text-gray-400 hover:text-gray-400",
-    // photography & transparent theme
-    {
-      "text-gray-500 hover:text-gray-500": theme === THEME.photography || theme === THEME.transparent
-    }
-  ];
-};
-var getActiveContainerTheme = (theme, style) => {
-  return [
-    // default theme
-    {
-      "text-gray-800 hover:text-gray-800": style === 2 /* LIGHT */,
-      "text-brand-heavy hover:text-brand-heavy": style === 1 /* DARK */,
-      "text-brand-dark hover:text-brand-dark": style === 0 /* BRAND */
-    },
-    // photography theme
-    {
-      "text-gray-400 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
-      "text-supportive-pastel hover:text-supportive-pastel": theme === THEME.photography && style !== 2 /* LIGHT */
-    },
-    // transparent theme
-    {
-      "text-gray-black hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
-      "text-gray-200 hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
-    }
-  ];
-};
-var getContainerTheme = (theme, style) => {
-  return [
-    // default theme
-    {
-      "text-gray-600 hover:text-gray-800": style === 2 /* LIGHT */,
-      "text-gray-800 hover:text-brand-heavy": style === 1 /* DARK */,
-      "text-brand-heavy hover:text-brand-dark": style === 0 /* BRAND */
-    },
-    // photography
-    {
-      "text-gray-300 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
-      "text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === 1 /* DARK */,
-      "text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === 0 /* BRAND */
-    },
-    // transparent theme
-    {
-      "text-gray-800 hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
-      "text-gray-white hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
-    }
-  ];
-};
-var TextButton = ({
-  text,
-  leftIconComponent,
-  rightIconComponent,
-  size = 0 /* S */,
-  theme = THEME.normal,
-  style = 1 /* DARK */,
-  active = false,
-  disabled = false,
-  loading = false,
-  className = ""
-}) => {
-  const TextJSX = react.useMemo(
-    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text, weight: P2.Weight.bold }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text, weight: P1.Weight.bold }),
-    [size, text]
-  );
-  const themeClass = react.useMemo(() => {
-    const themeFunc = disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme;
-    return themeFunc(theme, style);
-  }, [disabled, active, theme, style]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: clsx2__default.default(
-        "flex items-center",
-        {
-          "cursor-default": disabled,
-          "cursor-pointer": !disabled
-        },
-        themeClass,
-        className
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex justify-center items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: clsx2__default.default("flex justify-center items-center", {
-              "opacity-0": loading,
-              "opacity-100": !loading
-            }),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center mr-[4px]", children: leftIconComponent }),
-              TextJSX,
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-[4px]", children: rightIconComponent })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: clsx2__default.default(
-              "inline-block absolute box-border animation-spin",
-              "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]",
-              {
-                "size-[18px]": size === 0 /* S */,
-                "size-[24px]": size === 1 /* L */
-              },
-              {
-                "opacity-0": !loading,
-                "opacity-100": loading
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-};
-TextButton.Size = Size;
-TextButton.Style = Style;
-TextButton.THEME = THEME;
-var text_button_default = TextButton;
-
-// src/button/index.ts
-var button_default = { TextButton: text_button_default };
-
-exports.TextButton = text_button_default;
-exports.default = button_default;
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+require('../constants-BmxSMOOn.js');
+require('../constants-K2ObjToq.js');
+require('../paragraph-CJvb0_cM.js');
+require('../theme-DDBlIbeS.js');
+const require_button = require('../button-CO0UXA6C.js');
+
+exports.IconButton = require_button.icon_button_default;
+exports.MenuButton = require_button.menu_button_default;
+exports.PillButton = require_button.pill_button_default;
+exports.TextButton = require_button.text_button_default;
+exports.default = require_button.button_default;

package/lib/button/index.mjs

@@ -1,9 +1,7 @@
-export { button_default as default } from '../chunk-ELECTE3D.mjs';
-export { text_button_default as TextButton } from '../chunk-U22UKMAJ.mjs';
-import '../chunk-FVKIUNIP.mjs';
-import '../chunk-HQG6Q2EY.mjs';
-import '../chunk-UM7RNC2Y.mjs';
-import '../chunk-JB4TYHDE.mjs';
-import '../chunk-URJXIWFX.mjs';
-//# sourceMappingURL=index.mjs.map
-//# sourceMappingURL=index.mjs.map
+import "../constants-oTHAnh6r.mjs";
+import "../constants-BWFuBApI.mjs";
+import "../paragraph-BWXQNQtX.mjs";
+import "../theme-BG6yZVj-.mjs";
+import { button_default, icon_button_default, menu_button_default, pill_button_default, text_button_default } from "../button-DL6w1ghn.mjs";
+
+export { icon_button_default as IconButton, menu_button_default as MenuButton, pill_button_default as PillButton, text_button_default as TextButton, button_default as default };