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

package/README.md

@@ -0,0 +1,48 @@
+# @twreporter/react-typescript-components
+
+React components built with TypeScript and Tailwind CSS.
+
+## Roadmap
+
+- [ ] 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
+
+```bash
+yarn build
+```
+
+The output files will be generated in the `lib/` directory.
+
+## License
+
+MIT

package/lib/styles.css

@@ -0,0 +1,301 @@
+/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-gray-600: #808080;
+    --color-gray-800: #404040;
+    --spacing: 0.25rem;
+    --font-weight-bold: 700;
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --font-title: 'merriweather', 'source-han-serif-tc', serif;
+    --font-default: 'Roboto Slab', 'Noto Sans TC', sans-serif, 'Tauhu Oo';
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .mt-\[8px\] {
+    margin-top: 8px;
+  }
+  .flex {
+    display: flex;
+  }
+  .h-\[1px\] {
+    height: 1px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .gap-\[16px\] {
+    gap: 16px;
+  }
+  .bg-gray-800 {
+    background-color: var(--color-gray-800);
+  }
+  .font-default {
+    font-family: var(--font-default);
+  }
+  .font-title {
+    font-family: var(--font-title);
+  }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
+  .text-\[16px\] {
+    font-size: 16px;
+  }
+  .text-\[17px\] {
+    font-size: 17px;
+  }
+  .text-\[18px\] {
+    font-size: 18px;
+  }
+  .text-\[22px\] {
+    font-size: 22px;
+  }
+  .text-\[24px\] {
+    font-size: 24px;
+  }
+  .text-\[28px\] {
+    font-size: 28px;
+  }
+  .leading-\[125\%\] {
+    --tw-leading: 125%;
+    line-height: 125%;
+  }
+  .leading-\[150\%\] {
+    --tw-leading: 150%;
+    line-height: 150%;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .tablet\:text-\[16px\] {
+    @media (width >= 768px) {
+      font-size: 16px;
+    }
+  }
+  .tablet\:text-\[18px\] {
+    @media (width >= 768px) {
+      font-size: 18px;
+    }
+  }
+  .tablet\:text-\[22px\] {
+    @media (width >= 768px) {
+      font-size: 22px;
+    }
+  }
+  .tablet\:text-\[28px\] {
+    @media (width >= 768px) {
+      font-size: 28px;
+    }
+  }
+  .tablet\:text-\[32px\] {
+    @media (width >= 768px) {
+      font-size: 32px;
+    }
+  }
+  .tablet\:text-\[36px\] {
+    @media (width >= 768px) {
+      font-size: 36px;
+    }
+  }
+  .desktop\:mt-\[16px\] {
+    @media (width >= 1024px) {
+      margin-top: 16px;
+    }
+  }
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+    }
+  }
+}

package/lib/text/enum/index.js

@@ -0,0 +1,40 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/text/enum/index.ts
+var enum_exports = {};
+__export(enum_exports, {
+  TYPE: () => TYPE,
+  WEIGHT: () => WEIGHT
+});
+module.exports = __toCommonJS(enum_exports);
+var TYPE = {
+  default: "default",
+  article: "article"
+};
+var WEIGHT = {
+  extraLight: "extra-light",
+  normal: "normal",
+  bold: "bold"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TYPE,
+  WEIGHT
+});

package/lib/text/heading.js

@@ -0,0 +1,101 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/text/heading.tsx
+var heading_exports = {};
+__export(heading_exports, {
+  H1: () => H1,
+  H2: () => H2,
+  H3: () => H3,
+  H4: () => H4,
+  H5: () => H5,
+  H6: () => H6
+});
+module.exports = __toCommonJS(heading_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+
+// src/text/enum/index.ts
+var TYPE = {
+  default: "default",
+  article: "article"
+};
+
+// src/text/heading.tsx
+var baseClass = "font-bold";
+var variantClass = {
+  H1: "text-[28px] leading-[125%] tablet:text-[36px]",
+  H2: "text-[24px] leading-[125%] tablet:text-[32px]",
+  H3: "text-[22px] leading-[150%] tablet:text-[28px]",
+  H4: "text-[18px] leading-[150%] tablet:text-[22px]",
+  H5: "text-[17px] leading-[150%] tablet:text-[18px]",
+  H6: "text-[16px] leading-[150%] tablet:text-[16px]"
+};
+var HeadingVariant = (variant) => {
+  const Component = ({
+    text = "",
+    type = TYPE.default,
+    className = "",
+    ...props
+  }) => {
+    const htmlTag = variant.toLowerCase();
+    const fontFamily = type === TYPE.article ? "font-title" : "font-default";
+    return import_react.default.createElement(
+      htmlTag,
+      {
+        className: (0, import_clsx.default)(
+          fontFamily,
+          baseClass,
+          variantClass[variant],
+          className
+        ),
+        ...props
+      },
+      text
+    );
+  };
+  Component.displayName = variant;
+  Component.Type = TYPE;
+  return Component;
+};
+var H1 = HeadingVariant("H1");
+var H2 = HeadingVariant("H2");
+var H3 = HeadingVariant("H3");
+var H4 = HeadingVariant("H4");
+var H5 = HeadingVariant("H5");
+var H6 = HeadingVariant("H6");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6
+});

package/lib/text/paragraph.js

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/text/paragraph.tsx
+var paragraph_exports = {};
+__export(paragraph_exports, {
+  P1: () => P1,
+  P2: () => P2,
+  P3: () => P3,
+  P4: () => P4
+});
+module.exports = __toCommonJS(paragraph_exports);
+var import_clsx = __toESM(require("clsx"));
+
+// src/text/enum/index.ts
+var WEIGHT = {
+  extraLight: "extra-light",
+  normal: "normal",
+  bold: "bold"
+};
+
+// src/text/paragraph.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+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__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: (0, import_clsx.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");
+var P3 = ParagraphVariant("P3");
+var P4 = ParagraphVariant("P4");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  P1,
+  P2,
+  P3,
+  P4
+});

package/lib/title-bar/components/title2.js

@@ -0,0 +1,160 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/title-bar/components/title2.tsx
+var title2_exports = {};
+__export(title2_exports, {
+  default: () => title2_default
+});
+module.exports = __toCommonJS(title2_exports);
+var import_clsx3 = __toESM(require("clsx"));
+
+// src/text/heading.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+
+// src/text/enum/index.ts
+var TYPE = {
+  default: "default",
+  article: "article"
+};
+var WEIGHT = {
+  extraLight: "extra-light",
+  normal: "normal",
+  bold: "bold"
+};
+
+// src/text/heading.tsx
+var baseClass = "font-bold";
+var variantClass = {
+  H1: "text-[28px] leading-[125%] tablet:text-[36px]",
+  H2: "text-[24px] leading-[125%] tablet:text-[32px]",
+  H3: "text-[22px] leading-[150%] tablet:text-[28px]",
+  H4: "text-[18px] leading-[150%] tablet:text-[22px]",
+  H5: "text-[17px] leading-[150%] tablet:text-[18px]",
+  H6: "text-[16px] leading-[150%] tablet:text-[16px]"
+};
+var HeadingVariant = (variant) => {
+  const Component = ({
+    text = "",
+    type = TYPE.default,
+    className = "",
+    ...props
+  }) => {
+    const htmlTag = variant.toLowerCase();
+    const fontFamily = type === TYPE.article ? "font-title" : "font-default";
+    return import_react.default.createElement(
+      htmlTag,
+      {
+        className: (0, import_clsx.default)(
+          fontFamily,
+          baseClass,
+          variantClass[variant],
+          className
+        ),
+        ...props
+      },
+      text
+    );
+  };
+  Component.displayName = variant;
+  Component.Type = TYPE;
+  return Component;
+};
+var H1 = HeadingVariant("H1");
+var H2 = HeadingVariant("H2");
+var H3 = HeadingVariant("H3");
+var H4 = HeadingVariant("H4");
+var H5 = HeadingVariant("H5");
+var H6 = HeadingVariant("H6");
+
+// src/text/paragraph.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var baseClass2 = "font-default leading-[150%] flex items-center m-0";
+var variantClass2 = {
+  P1: "text-[16px]",
+  P2: "text-[14px]",
+  P3: "text-[12px]",
+  P4: "text-[10px]"
+};
+var ParagraphVariant = (variant) => {
+  const Component = ({
+    text = "",
+    weight = WEIGHT.normal,
+    className = "",
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: (0, import_clsx2.default)(
+        baseClass2,
+        variantClass2[variant],
+        `font-${weight}`,
+        className
+      ),
+      ...props,
+      children: text
+    }
+  );
+  Component.displayName = variant;
+  Component.Weight = WEIGHT;
+  return Component;
+};
+var P1 = ParagraphVariant("P1");
+var P2 = ParagraphVariant("P2");
+var P3 = ParagraphVariant("P3");
+var P4 = ParagraphVariant("P4");
+
+// src/title-bar/components/title2.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Title2 = ({
+  title,
+  subtitle = "",
+  renderButton = null,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx3.default)("flex justify-between flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx3.default)("flex items-baseline gap-[16px]"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(H5, { className: "text-gray-800", text: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(P2, { className: "text-gray-600", text: subtitle }) : null
+    ] }),
+    renderButton || null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_clsx3.default)(
+          "w-full h-[1px] bg-gray-800 mt-[8px]",
+          "desktop:mt-[16px]"
+        )
+      }
+    )
+  ] });
+};
+var title2_default = Title2;

package/lib/title-bar/index.js

@@ -0,0 +1,172 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/title-bar/index.ts
+var title_bar_exports = {};
+__export(title_bar_exports, {
+  Title2: () => title2_default,
+  default: () => title_bar_default
+});
+module.exports = __toCommonJS(title_bar_exports);
+
+// src/title-bar/components/title2.tsx
+var import_clsx3 = __toESM(require("clsx"));
+
+// src/text/heading.tsx
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+
+// src/text/enum/index.ts
+var TYPE = {
+  default: "default",
+  article: "article"
+};
+var WEIGHT = {
+  extraLight: "extra-light",
+  normal: "normal",
+  bold: "bold"
+};
+
+// src/text/heading.tsx
+var baseClass = "font-bold";
+var variantClass = {
+  H1: "text-[28px] leading-[125%] tablet:text-[36px]",
+  H2: "text-[24px] leading-[125%] tablet:text-[32px]",
+  H3: "text-[22px] leading-[150%] tablet:text-[28px]",
+  H4: "text-[18px] leading-[150%] tablet:text-[22px]",
+  H5: "text-[17px] leading-[150%] tablet:text-[18px]",
+  H6: "text-[16px] leading-[150%] tablet:text-[16px]"
+};
+var HeadingVariant = (variant) => {
+  const Component = ({
+    text = "",
+    type = TYPE.default,
+    className = "",
+    ...props
+  }) => {
+    const htmlTag = variant.toLowerCase();
+    const fontFamily = type === TYPE.article ? "font-title" : "font-default";
+    return import_react.default.createElement(
+      htmlTag,
+      {
+        className: (0, import_clsx.default)(
+          fontFamily,
+          baseClass,
+          variantClass[variant],
+          className
+        ),
+        ...props
+      },
+      text
+    );
+  };
+  Component.displayName = variant;
+  Component.Type = TYPE;
+  return Component;
+};
+var H1 = HeadingVariant("H1");
+var H2 = HeadingVariant("H2");
+var H3 = HeadingVariant("H3");
+var H4 = HeadingVariant("H4");
+var H5 = HeadingVariant("H5");
+var H6 = HeadingVariant("H6");
+
+// src/text/paragraph.tsx
+var import_clsx2 = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var baseClass2 = "font-default leading-[150%] flex items-center m-0";
+var variantClass2 = {
+  P1: "text-[16px]",
+  P2: "text-[14px]",
+  P3: "text-[12px]",
+  P4: "text-[10px]"
+};
+var ParagraphVariant = (variant) => {
+  const Component = ({
+    text = "",
+    weight = WEIGHT.normal,
+    className = "",
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "p",
+    {
+      className: (0, import_clsx2.default)(
+        baseClass2,
+        variantClass2[variant],
+        `font-${weight}`,
+        className
+      ),
+      ...props,
+      children: text
+    }
+  );
+  Component.displayName = variant;
+  Component.Weight = WEIGHT;
+  return Component;
+};
+var P1 = ParagraphVariant("P1");
+var P2 = ParagraphVariant("P2");
+var P3 = ParagraphVariant("P3");
+var P4 = ParagraphVariant("P4");
+
+// src/title-bar/components/title2.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Title2 = ({
+  title,
+  subtitle = "",
+  renderButton = null,
+  className = ""
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx3.default)("flex justify-between flex-col", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx3.default)("flex items-baseline gap-[16px]"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(H5, { className: "text-gray-800", text: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(P2, { className: "text-gray-600", text: subtitle }) : null
+    ] }),
+    renderButton || null,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        className: (0, import_clsx3.default)(
+          "w-full h-[1px] bg-gray-800 mt-[8px]",
+          "desktop:mt-[16px]"
+        )
+      }
+    )
+  ] });
+};
+var title2_default = Title2;
+
+// src/title-bar/index.ts
+var title_bar_default = {
+  Title2: title2_default
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Title2
+});

package/lib/types/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/types/index.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@twreporter/react-typescript-components",
+  "description": "React components using TypeScript and Tailwind CSS",
+  "author": "twreporter <developer@twreporter.org>",
+  "license": "MIT",
+  "version": "0.1.0-beta.3",
+  "type": "commonjs",
+  "main": "lib/index.js",
+  "module": "lib/index.mjs",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build:styles": "tailwindcss -i ./src/styles.css -o ./lib/styles.css",
+    "build:components": "tsup src/* --outDir lib",
+    "build": "yarn clean && yarn build:components && yarn build:styles",
+    "prepublishOnly": "yarn build"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.11"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.11",
+    "@tailwindcss/postcss": "^4.1.11",
+    "@twreporter/tailwind-config": "^0.1.0-beta.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.21",
+    "tsup": "^8.5.0",
+    "typescript": "^5"
+  },
+  "files": [
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/twreporter/www-public-monorepo.git",
+    "directory": "packages/react-typescript-components"
+  }
+}