@twreporter/react-typescript-components 0.1.0-beta.10

package/README.md

@@ -0,0 +1,74 @@
+# @twreporter/react-typescript-components
+
+React components built with TypeScript and Tailwind CSS.
+
+## Roadmap
+
+- [X] add storybook
+- [ ] add test
+
+## Installation
+
+```bash
+yarn add @twreporter/react-typescript-components
+# or
+npm install @twreporter/react-typescript-components
+```
+
+## Peer Dependencies
+
+Make sure your project has the following peer dependencies installed:
+
+- react ^19.0.0
+- react-dom ^19.0.0
+- tailwindcss ^4.1.11
+
+## Usage
+
+```tsx
+import { Title2 } from '@twreporter/react-typescript-components/lib/title-bar'
+
+function App() {
+  return (
+    <Title2 title="Title" subtitle="Subtitle" />
+  )
+}
+```
+
+## Development & Build
+
+### Storybook
+
+Run storybook on localhost
+
+```bash
+yarn storybook
+```
+
+### Build
+
+```bash
+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-BmIgLA0K.mjs";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-jYAxSTFp.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

@@ -0,0 +1,160 @@
+import "../index-BmIgLA0K.mjs";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-jYAxSTFp.mjs";
+import { THEME, Theme } from "../theme-ClamfAy8.mjs";
+import { WEIGHT, Weight } from "../constants-OhAETTiQ.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/components/icon-with-text-button/index.d.ts
+type IconWithTextButtonProps = {
+  text?: string;
+  iconComponent: React.ReactNode;
+  theme?: Theme;
+  disabled?: boolean;
+  active?: boolean;
+  hideText?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const IconWithTextButton: FC<IconWithTextButtonProps> & {
+  Theme: typeof THEME;
+};
+//#endregion
+//#region src/button/index.d.ts
+declare const _default: {
+  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;
+  };
+  IconWithTextButton: react0.FC<{
+    text?: string;
+    iconComponent: React.ReactNode;
+    theme?: Theme;
+    disabled?: boolean;
+    active?: boolean;
+    hideText?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  }> & {
+    Theme: typeof THEME;
+  };
+};
+//#endregion
+export { IconButton, IconWithTextButton, MenuButton, PillButton, TextButton, _default as default };
+//# sourceMappingURL=index.d.mts.map

package/lib/button/index.d.ts

@@ -0,0 +1,160 @@
+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/components/icon-with-text-button/index.d.ts
+type IconWithTextButtonProps = {
+  text?: string;
+  iconComponent: React.ReactNode;
+  theme?: Theme;
+  disabled?: boolean;
+  active?: boolean;
+  hideText?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+declare const IconWithTextButton: FC<IconWithTextButtonProps> & {
+  Theme: typeof THEME;
+};
+//#endregion
+//#region src/button/index.d.ts
+declare const _default: {
+  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;
+  };
+  IconWithTextButton: react0.FC<{
+    text?: string;
+    iconComponent: React.ReactNode;
+    theme?: Theme;
+    disabled?: boolean;
+    active?: boolean;
+    hideText?: boolean;
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+  }> & {
+    Theme: typeof THEME;
+  };
+};
+//#endregion
+export { IconButton, IconWithTextButton, MenuButton, PillButton, TextButton, _default as default };
+//# sourceMappingURL=index.d.ts.map

package/lib/button/index.js

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+require('../constants-BmxSMOOn.js');
+require('../constants-K2ObjToq.js');
+require('../paragraph-CJvb0_cM.js');
+require('../theme-DDBlIbeS.js');
+const require_button = require('../button-DFLYlJJW.js');
+
+exports.IconButton = require_button.icon_button_default;
+exports.IconWithTextButton = require_button.icon_with_text_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

@@ -0,0 +1,7 @@
+import "../constants-oTHAnh6r.mjs";
+import "../constants-BWFuBApI.mjs";
+import "../paragraph-BWXQNQtX.mjs";
+import "../theme-BG6yZVj-.mjs";
+import { button_default, icon_button_default, icon_with_text_button_default, menu_button_default, pill_button_default, text_button_default } from "../button-DyUYGG90.mjs";
+
+export { icon_button_default as IconButton, icon_with_text_button_default as IconWithTextButton, menu_button_default as MenuButton, pill_button_default as PillButton, text_button_default as TextButton, button_default as default };