@twreporter/react-typescript-components 0.1.0-beta.22 → 0.1.0-beta.24

package/lib/title-bar/index.js

@@ -1,153 +1,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const require_chunk = require('../chunk-BxBTb9qk.js');
 require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
-const require_paragraph = require('../paragraph-iuz3jP0Q.js');
+require('../paragraph-Bve022HS.js');
 require('../theme-DDBlIbeS.js');
-const require_button = require('../button-Dk0MxlKd.js');
-const require_external_link = require('../external-link-Ce1_loKh.js');
-const require_internal_link = require('../internal-link-DyK4bABh.js');
-require('../customized-link-BuleQPlC.js');
-const require_heading = require('../heading-D7slLGoI.js');
-let react = require("react");
-react = require_chunk.__toESM(react);
-let clsx = require("clsx");
-clsx = require_chunk.__toESM(clsx);
-let react_jsx_runtime = require("react/jsx-runtime");
-react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+require('../theme-ingLagfo.js');
+require('../text-button-DlMVqsvV.js');
+require('../theme-B5GNXw4M.js');
+require('../icon-button-Vqwyow05.js');
+require('../menu-button-DP302FyB.js');
+require('../theme-VVqGnnPq.js');
+require('../pill-button-CNbShnjT.js');
+require('../theme-B4rsurcB.js');
+require('../icon-with-text-button-DOj_-gz0.js');
+require('../button-BLRV4Hwe.js');
+require('../external-link-N6pHzsZ9.js');
+require('../internal-link-CQYfLFmN.js');
+require('../customized-link-BQWDtLYD.js');
+require('../heading-D5Lv6X0M.js');
+const require_title2 = require('../title2-MnbXvYzY.js');
+const require_title1 = require('../title1-CB1C3lVX.js');
+require('../hook-DUH3wp9d.js');
+require('../tab-item-DVJ6vhql.js');
+const require_title_tab = require('../title-tab-Bzo2mEUS.js');
 
-//#region src/title-bar/components/title2.tsx
-const Title2 = ({ title, subtitle = "", renderButton = null, className = "" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("flex justify-between flex-col", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex flex-row justify-between",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, clsx.default)("flex items-baseline gap-[16px]"),
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H5, {
-					className: "text-gray-800",
-					text: title
-				}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
-					className: "text-gray-600",
-					text: subtitle
-				}) : null]
-			}), renderButton || null]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-800 mt-[8px]", "desktop:mt-[16px]") })]
-	});
-};
-var title2_default = Title2;
-
-//#endregion
-//#region src/title-bar/components/title1.tsx
-const Title1 = ({ title, subtitle = "", className = "" }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("flex justify-between flex-col", className),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, clsx.default)("flex items-baseline gap-[16px]"),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H2, {
-				className: "text-gray-800",
-				text: title
-			}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
-				className: "text-gray-600",
-				text: subtitle
-			}) : null]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
-	});
-};
-var title1_default = Title1;
-
-//#endregion
-//#region src/title-bar/components/title-tab/hook.ts
-const useScrollStatus = (setShowNext) => {
-	const ref = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (!ref.current) return;
-		if (ref.current.scrollWidth > ref.current.clientWidth) setShowNext(true);
-	}, [setShowNext]);
-	(0, react.useEffect)(() => {
-		if (!ref.current) return;
-		const refEle = ref.current;
-		const handleScroll = () => {
-			if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) setShowNext(false);
-			else setShowNext(true);
-		};
-		refEle.addEventListener("scroll", handleScroll);
-		return () => {
-			refEle.removeEventListener("scroll", handleScroll);
-		};
-	}, [setShowNext]);
-	return ref;
-};
-
-//#endregion
-//#region src/title-bar/components/title-tab/tab-item.tsx
-const TabItem = ({ text, link, isExternal = false, isActive = false, onClick, className = "" }) => {
-	const CustomizedLink = isExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-		className: (0, clsx.default)("flex shrink-0 mr-[24px] last:mr-0", className),
-		onClick,
-		type: "button",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CustomizedLink, {
-			to: link,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.text_button_default, {
-				text,
-				active: isActive,
-				size: require_button.text_button_default.Size.l,
-				className: "py-[16px]"
-			})
-		})
-	});
-};
-var tab_item_default = TabItem;
-
-//#endregion
-//#region src/title-bar/components/title-tab/index.tsx
-const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
-	const [activeIndex, setActiveIndex] = (0, react.useState)(activeTabIndex);
-	const [showGradientMask, setShowGradientMask] = (0, react.useState)(false);
-	const ref = useScrollStatus(setShowGradientMask);
-	(0, react.useEffect)(() => {
-		setActiveIndex(activeTabIndex);
-	}, [activeTabIndex]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex flex-col w-full text-gray-800",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H1, { text: title }),
-			tabs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				ref,
-				className: (0, clsx.default)("flex items-center", "overflow-x-scroll scrollbar:!w-0", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
-				children: tabs.map((tab, index) => {
-					const tabProps = {
-						...tab,
-						isActive: index === activeIndex
-					};
-					const handleClick = () => {
-						setActiveIndex(index);
-					};
-					return /* @__PURE__ */ (0, react.createElement)(tab_item_default, {
-						...tabProps,
-						key: `tab-${tab.text}-${index}`,
-						onClick: handleClick
-					});
-				})
-			}) : null,
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
-		]
-	});
-};
-var title_tab_default = TitleTab;
-
-//#endregion
 //#region src/title-bar/index.ts
 var title_bar_default = {
-	Title2: title2_default,
-	Title1: title1_default,
-	TitleTab: title_tab_default
+	Title2: require_title2.title2_default,
+	Title1: require_title1.title1_default,
+	TitleTab: require_title_tab.title_tab_default
 };
 
 //#endregion
-exports.Title1 = title1_default;
-exports.Title2 = title2_default;
-exports.TitleTab = title_tab_default;
+exports.Title1 = require_title1.title1_default;
+exports.Title2 = require_title2.title2_default;
+exports.TitleTab = require_title_tab.title_tab_default;
 exports.default = title_bar_default;
 //# sourceMappingURL=index.js.map

package/lib/title-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Title2: React.FC<Title2Props>","H5","P2","Title1: FC<Title1Props>","H2","P1","handleScroll: EventListener","TabItem: FC<TabItemProps>","ExternalLink","InternalLink","TextButton","TitleTab: FC<TitleTabProps>","H1","TabItem"],"sources":["../../src/title-bar/components/title2.tsx","../../src/title-bar/components/title1.tsx","../../src/title-bar/components/title-tab/hook.ts","../../src/title-bar/components/title-tab/tab-item.tsx","../../src/title-bar/components/title-tab/index.tsx","../../src/title-bar/index.ts"],"sourcesContent":["import clsx from 'clsx'\nimport type React from 'react'\n// components\nimport { H5 } from '../../text/heading'\nimport { P2 } from '../../text/paragraph'\n\ntype Title2Props = {\n  title: string\n  subtitle?: string\n  renderButton?: React.ReactNode\n  className?: string\n}\n\nconst Title2: React.FC<Title2Props> = ({\n  title,\n  subtitle = '',\n  renderButton = null,\n  className = '',\n}) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className=\"flex flex-row justify-between\">\n        <div className={clsx('flex items-baseline gap-[16px]')}>\n          <H5 className=\"text-gray-800\" text={title} />\n          {subtitle ? <P2 className=\"text-gray-600\" text={subtitle} /> : null}\n        </div>\n        {renderButton || null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title2\n","import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n","import { useRef, useEffect } from 'react'\n\nexport const useScrollStatus = (setShowNext: (show: boolean) => void) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    if (ref.current.scrollWidth > ref.current.clientWidth) {\n      // scrollbar occur\n      setShowNext(true)\n    }\n  }, [setShowNext])\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    const refEle = ref.current\n    const handleScroll: EventListener = () => {\n      if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) {\n        // scroll to end\n        setShowNext(false)\n      } else {\n        setShowNext(true)\n      }\n    }\n\n    refEle.addEventListener('scroll', handleScroll)\n\n    return () => {\n      refEle.removeEventListener('scroll', handleScroll)\n    }\n  }, [setShowNext])\n\n  return ref\n}\n","import clsx from 'clsx'\nimport type { FC } from 'react'\n// type\nimport type { Tab } from './type'\n// component\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport { TextButton } from '../../../button'\n\ntype TabItemProps = Tab & {\n  onClick: () => void\n  className?: string\n}\nconst TabItem: FC<TabItemProps> = ({\n  text,\n  link,\n  isExternal = false,\n  isActive = false,\n  onClick,\n  className = '',\n}) => {\n  const CustomizedLink = isExternal ? ExternalLink : InternalLink\n  return (\n    <button\n      className={clsx('flex shrink-0 mr-[24px] last:mr-0', className)}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <CustomizedLink to={link}>\n        <TextButton\n          text={text}\n          active={isActive}\n          size={TextButton.Size.l}\n          className=\"py-[16px]\"\n        />\n      </CustomizedLink>\n    </button>\n  )\n}\n\nexport default TabItem\n","import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll scrollbar:!w-0',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem {...tabProps} key={`tab-${tab.text}-${index}`} onClick={handleClick} />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n","import Title2 from './components/title2'\nimport Title1 from './components/title1'\nimport TitleTab from './components/title-tab'\n\nexport { Title2, Title1, TitleTab }\n\nexport default {\n  Title2,\n  Title1,\n  TitleTab,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAaA,MAAMA,UAAiC,EACrC,OACA,WAAW,IACX,eAAe,MACf,YAAY,SACR;AACJ,QACE,4CAAC;EAAI,6BAAgB,iCAAiC,UAAU;aAC9D,4CAAC;GAAI,WAAU;cACb,4CAAC;IAAI,6BAAgB,iCAAiC;eACpD,2CAACC;KAAG,WAAU;KAAgB,MAAM;MAAS,EAC5C,WAAW,2CAACC;KAAG,WAAU;KAAgB,MAAM;MAAY,GAAG;KAC3D,EACL,gBAAgB;IACb,EACN,2CAAC,SACC,6BACE,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe;;;;AC1Bf,MAAMC,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,4CAAC;EAAI,6BAAgB,iCAAiC,UAAU;aAC9D,4CAAC;GAAI,6BAAgB,iCAAiC;cACpD,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,2CAAC,SACC,6BACE,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe;;;;AC3Bf,MAAa,mBAAmB,gBAAyC;CACvE,MAAM,wBAA6B,KAAK;AAExC,4BAAgB;AACd,MAAI,CAAC,IAAI,QAAS;AAElB,MAAI,IAAI,QAAQ,cAAc,IAAI,QAAQ,YAExC,aAAY,KAAK;IAElB,CAAC,YAAY,CAAC;AAEjB,4BAAgB;AACd,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,SAAS,IAAI;EACnB,MAAMC,qBAAoC;AACxC,OAAI,OAAO,cAAc,OAAO,cAAc,OAAO,YAEnD,aAAY,MAAM;OAElB,aAAY,KAAK;;AAIrB,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,CAAC,YAAY,CAAC;AAEjB,QAAO;;;;;ACtBT,MAAMC,WAA6B,EACjC,MACA,MACA,aAAa,OACb,WAAW,OACX,SACA,YAAY,SACR;CACJ,MAAM,iBAAiB,aAAaC,8CAAeC;AACnD,QACE,2CAAC;EACC,6BAAgB,qCAAqC,UAAU;EACtD;EACT,MAAK;YAEL,2CAAC;GAAe,IAAI;aAClB,2CAACC;IACO;IACN,QAAQ;IACR,MAAMA,mCAAW,KAAK;IACtB,WAAU;KACV;IACa;GACV;;AAIb,uBAAe;;;;ACxBf,MAAMC,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,sCAA2B,eAAe;CAC9D,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;CAE/D,MAAM,MAAM,gBAAgB,oBAAoB;AAEhD,4BAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,4CAAC;EAAI,WAAU;;GACb,2CAACC,sBAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,2CAAC;IACM;IACL,6BACE,qBACA,oCACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,yCAACC;MAAQ,GAAI;MAAU,KAAK,OAAO,IAAI,KAAK,GAAG;MAAS,SAAS;OAAe;MAElF;KACE,GACJ;GACJ,2CAAC,SACC,6BACE,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe;;;;AC3Df,wBAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/title-bar/index.ts"],"sourcesContent":["import Title2 from './components/title2'\nimport Title1 from './components/title1'\nimport TitleTab from './components/title-tab'\n\nexport { Title2, Title1, TitleTab }\n\nexport default {\n  Title2,\n  Title1,\n  TitleTab,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAAe;CACb;CACA;CACA;CACD"}

package/lib/title-bar/index.mjs

@@ -1,138 +1,27 @@
-import { internal_link_default } from "../internal-link-JeC0sVNF.mjs";
+import "../internal-link-JeC0sVNF.mjs";
 import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
-import { P1, P2 } from "../paragraph-Cf9jr8RF.mjs";
+import "../paragraph-QihuIWot.mjs";
 import "../theme-BG6yZVj-.mjs";
-import { text_button_default } from "../button-D_AWI7r9.mjs";
-import { external_link_default } from "../external-link-BMIFL3DE.mjs";
-import "../customized-link-M65Amhsm.mjs";
-import { H1, H2, H5 } from "../heading-CCsID-nv.mjs";
-import { createElement, useEffect, useRef, useState } from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import "../theme-gPGrAR2u.mjs";
+import "../text-button-DkD8OA65.mjs";
+import "../theme-CJDY-Vlz.mjs";
+import "../icon-button-B-71Zncn.mjs";
+import "../menu-button-BzXGdc8T.mjs";
+import "../theme-YXaUsVJu.mjs";
+import "../pill-button-y0eh5cgT.mjs";
+import "../theme-CKrQVNS4.mjs";
+import "../icon-with-text-button-CTWmp6He.mjs";
+import "../button-ubJKEMLe.mjs";
+import "../external-link-B7TYHbGX.mjs";
+import "../customized-link-B4xfnPSR.mjs";
+import "../heading-BVKLYfXi.mjs";
+import { title2_default } from "../title2-Dmq-RO59.mjs";
+import { title1_default } from "../title1-FLSEnRkW.mjs";
+import "../hook-DGSr4R5I.mjs";
+import "../tab-item-DefWiW0b.mjs";
+import { title_tab_default } from "../title-tab-DyTYe4dn.mjs";
 
-//#region src/title-bar/components/title2.tsx
-const Title2 = ({ title, subtitle = "", renderButton = null, className = "" }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex justify-between flex-col", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-row justify-between",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: clsx("flex items-baseline gap-[16px]"),
-				children: [/* @__PURE__ */ jsx(H5, {
-					className: "text-gray-800",
-					text: title
-				}), subtitle ? /* @__PURE__ */ jsx(P2, {
-					className: "text-gray-600",
-					text: subtitle
-				}) : null]
-			}), renderButton || null]
-		}), /* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-800 mt-[8px]", "desktop:mt-[16px]") })]
-	});
-};
-var title2_default = Title2;
-
-//#endregion
-//#region src/title-bar/components/title1.tsx
-const Title1 = ({ title, subtitle = "", className = "" }) => {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex justify-between flex-col", className),
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx("flex items-baseline gap-[16px]"),
-			children: [/* @__PURE__ */ jsx(H2, {
-				className: "text-gray-800",
-				text: title
-			}), subtitle ? /* @__PURE__ */ jsx(P1, {
-				className: "text-gray-600",
-				text: subtitle
-			}) : null]
-		}), /* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
-	});
-};
-var title1_default = Title1;
-
-//#endregion
-//#region src/title-bar/components/title-tab/hook.ts
-const useScrollStatus = (setShowNext) => {
-	const ref = useRef(null);
-	useEffect(() => {
-		if (!ref.current) return;
-		if (ref.current.scrollWidth > ref.current.clientWidth) setShowNext(true);
-	}, [setShowNext]);
-	useEffect(() => {
-		if (!ref.current) return;
-		const refEle = ref.current;
-		const handleScroll = () => {
-			if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) setShowNext(false);
-			else setShowNext(true);
-		};
-		refEle.addEventListener("scroll", handleScroll);
-		return () => {
-			refEle.removeEventListener("scroll", handleScroll);
-		};
-	}, [setShowNext]);
-	return ref;
-};
-
-//#endregion
-//#region src/title-bar/components/title-tab/tab-item.tsx
-const TabItem = ({ text, link, isExternal = false, isActive = false, onClick, className = "" }) => {
-	const CustomizedLink = isExternal ? external_link_default : internal_link_default;
-	return /* @__PURE__ */ jsx("button", {
-		className: clsx("flex shrink-0 mr-[24px] last:mr-0", className),
-		onClick,
-		type: "button",
-		children: /* @__PURE__ */ jsx(CustomizedLink, {
-			to: link,
-			children: /* @__PURE__ */ jsx(text_button_default, {
-				text,
-				active: isActive,
-				size: text_button_default.Size.l,
-				className: "py-[16px]"
-			})
-		})
-	});
-};
-var tab_item_default = TabItem;
-
-//#endregion
-//#region src/title-bar/components/title-tab/index.tsx
-const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
-	const [activeIndex, setActiveIndex] = useState(activeTabIndex);
-	const [showGradientMask, setShowGradientMask] = useState(false);
-	const ref = useScrollStatus(setShowGradientMask);
-	useEffect(() => {
-		setActiveIndex(activeTabIndex);
-	}, [activeTabIndex]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col w-full text-gray-800",
-		children: [
-			/* @__PURE__ */ jsx(H1, { text: title }),
-			tabs.length > 0 ? /* @__PURE__ */ jsx("div", {
-				ref,
-				className: clsx("flex items-center", "overflow-x-scroll scrollbar:!w-0", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
-				children: tabs.map((tab, index) => {
-					const tabProps = {
-						...tab,
-						isActive: index === activeIndex
-					};
-					const handleClick = () => {
-						setActiveIndex(index);
-					};
-					return /* @__PURE__ */ createElement(tab_item_default, {
-						...tabProps,
-						key: `tab-${tab.text}-${index}`,
-						onClick: handleClick
-					});
-				})
-			}) : null,
-			/* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
-		]
-	});
-};
-var title_tab_default = TitleTab;
-
-//#endregion
 //#region src/title-bar/index.ts
 var title_bar_default = {
 	Title2: title2_default,

package/lib/title-bar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Title2: React.FC<Title2Props>","Title1: FC<Title1Props>","handleScroll: EventListener","TabItem: FC<TabItemProps>","ExternalLink","InternalLink","TextButton","TitleTab: FC<TitleTabProps>","TabItem"],"sources":["../../src/title-bar/components/title2.tsx","../../src/title-bar/components/title1.tsx","../../src/title-bar/components/title-tab/hook.ts","../../src/title-bar/components/title-tab/tab-item.tsx","../../src/title-bar/components/title-tab/index.tsx","../../src/title-bar/index.ts"],"sourcesContent":["import clsx from 'clsx'\nimport type React from 'react'\n// components\nimport { H5 } from '../../text/heading'\nimport { P2 } from '../../text/paragraph'\n\ntype Title2Props = {\n  title: string\n  subtitle?: string\n  renderButton?: React.ReactNode\n  className?: string\n}\n\nconst Title2: React.FC<Title2Props> = ({\n  title,\n  subtitle = '',\n  renderButton = null,\n  className = '',\n}) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className=\"flex flex-row justify-between\">\n        <div className={clsx('flex items-baseline gap-[16px]')}>\n          <H5 className=\"text-gray-800\" text={title} />\n          {subtitle ? <P2 className=\"text-gray-600\" text={subtitle} /> : null}\n        </div>\n        {renderButton || null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title2\n","import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n","import { useRef, useEffect } from 'react'\n\nexport const useScrollStatus = (setShowNext: (show: boolean) => void) => {\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    if (ref.current.scrollWidth > ref.current.clientWidth) {\n      // scrollbar occur\n      setShowNext(true)\n    }\n  }, [setShowNext])\n\n  useEffect(() => {\n    if (!ref.current) return\n\n    const refEle = ref.current\n    const handleScroll: EventListener = () => {\n      if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) {\n        // scroll to end\n        setShowNext(false)\n      } else {\n        setShowNext(true)\n      }\n    }\n\n    refEle.addEventListener('scroll', handleScroll)\n\n    return () => {\n      refEle.removeEventListener('scroll', handleScroll)\n    }\n  }, [setShowNext])\n\n  return ref\n}\n","import clsx from 'clsx'\nimport type { FC } from 'react'\n// type\nimport type { Tab } from './type'\n// component\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport { TextButton } from '../../../button'\n\ntype TabItemProps = Tab & {\n  onClick: () => void\n  className?: string\n}\nconst TabItem: FC<TabItemProps> = ({\n  text,\n  link,\n  isExternal = false,\n  isActive = false,\n  onClick,\n  className = '',\n}) => {\n  const CustomizedLink = isExternal ? ExternalLink : InternalLink\n  return (\n    <button\n      className={clsx('flex shrink-0 mr-[24px] last:mr-0', className)}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <CustomizedLink to={link}>\n        <TextButton\n          text={text}\n          active={isActive}\n          size={TextButton.Size.l}\n          className=\"py-[16px]\"\n        />\n      </CustomizedLink>\n    </button>\n  )\n}\n\nexport default TabItem\n","import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll scrollbar:!w-0',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem {...tabProps} key={`tab-${tab.text}-${index}`} onClick={handleClick} />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n","import Title2 from './components/title2'\nimport Title1 from './components/title1'\nimport TitleTab from './components/title-tab'\n\nexport { Title2, Title1, TitleTab }\n\nexport default {\n  Title2,\n  Title1,\n  TitleTab,\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAMA,UAAiC,EACrC,OACA,WAAW,IACX,eAAe,MACf,YAAY,SACR;AACJ,QACE,qBAAC;EAAI,WAAW,KAAK,iCAAiC,UAAU;aAC9D,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAW,KAAK,iCAAiC;eACpD,oBAAC;KAAG,WAAU;KAAgB,MAAM;MAAS,EAC5C,WAAW,oBAAC;KAAG,WAAU;KAAgB,MAAM;MAAY,GAAG;KAC3D,EACL,gBAAgB;IACb,EACN,oBAAC,SACC,WAAW,KACT,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe;;;;AC1Bf,MAAMC,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,qBAAC;EAAI,WAAW,KAAK,iCAAiC,UAAU;aAC9D,qBAAC;GAAI,WAAW,KAAK,iCAAiC;cACpD,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,oBAAC,SACC,WAAW,KACT,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe;;;;AC3Bf,MAAa,mBAAmB,gBAAyC;CACvE,MAAM,MAAM,OAAuB,KAAK;AAExC,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;AAElB,MAAI,IAAI,QAAQ,cAAc,IAAI,QAAQ,YAExC,aAAY,KAAK;IAElB,CAAC,YAAY,CAAC;AAEjB,iBAAgB;AACd,MAAI,CAAC,IAAI,QAAS;EAElB,MAAM,SAAS,IAAI;EACnB,MAAMC,qBAAoC;AACxC,OAAI,OAAO,cAAc,OAAO,cAAc,OAAO,YAEnD,aAAY,MAAM;OAElB,aAAY,KAAK;;AAIrB,SAAO,iBAAiB,UAAU,aAAa;AAE/C,eAAa;AACX,UAAO,oBAAoB,UAAU,aAAa;;IAEnD,CAAC,YAAY,CAAC;AAEjB,QAAO;;;;;ACtBT,MAAMC,WAA6B,EACjC,MACA,MACA,aAAa,OACb,WAAW,OACX,SACA,YAAY,SACR;CACJ,MAAM,iBAAiB,aAAaC,wBAAeC;AACnD,QACE,oBAAC;EACC,WAAW,KAAK,qCAAqC,UAAU;EACtD;EACT,MAAK;YAEL,oBAAC;GAAe,IAAI;aAClB,oBAACC;IACO;IACN,QAAQ;IACR,MAAMA,oBAAW,KAAK;IACtB,WAAU;KACV;IACa;GACV;;AAIb,uBAAe;;;;ACxBf,MAAMC,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,eAAe;CAC9D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,MAAM,gBAAgB,oBAAoB;AAEhD,iBAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC,MAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,oBAAC;IACM;IACL,WAAW,KACT,qBACA,oCACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,8BAACC;MAAQ,GAAI;MAAU,KAAK,OAAO,IAAI,KAAK,GAAG;MAAS,SAAS;OAAe;MAElF;KACE,GACJ;GACJ,oBAAC,SACC,WAAW,KACT,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe;;;;AC3Df,wBAAe;CACb;CACA;CACA;CACD"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/title-bar/index.ts"],"sourcesContent":["import Title2 from './components/title2'\nimport Title1 from './components/title1'\nimport TitleTab from './components/title-tab'\n\nexport { Title2, Title1, TitleTab }\n\nexport default {\n  Title2,\n  Title1,\n  TitleTab,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAAe;CACb;CACA;CACA;CACD"}

package/lib/title-tab-Bzo2mEUS.js

@@ -0,0 +1,55 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_heading = require('./heading-D5Lv6X0M.js');
+const require_hook = require('./hook-DUH3wp9d.js');
+const require_tab_item = require('./tab-item-DVJ6vhql.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title-tab/index.tsx
+const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
+	const [activeIndex, setActiveIndex] = (0, react.useState)(activeTabIndex);
+	const [showGradientMask, setShowGradientMask] = (0, react.useState)(false);
+	const ref = require_hook.useScrollStatus(setShowGradientMask);
+	(0, react.useEffect)(() => {
+		setActiveIndex(activeTabIndex);
+	}, [activeTabIndex]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col w-full text-gray-800",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H1, { text: title }),
+			tabs.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref,
+				className: (0, clsx.default)("flex items-center", "overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
+				children: tabs.map((tab, index) => {
+					const tabProps = {
+						...tab,
+						isActive: index === activeIndex
+					};
+					const handleClick = () => {
+						setActiveIndex(index);
+					};
+					return /* @__PURE__ */ (0, react.createElement)(require_tab_item.tab_item_default, {
+						...tabProps,
+						key: `tab-${tab.text}-${index}`,
+						onClick: handleClick
+					});
+				})
+			}) : null,
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
+		]
+	});
+};
+var title_tab_default = TitleTab;
+
+//#endregion
+Object.defineProperty(exports, 'title_tab_default', {
+  enumerable: true,
+  get: function () {
+    return title_tab_default;
+  }
+});
+//# sourceMappingURL=title-tab-Bzo2mEUS.js.map

package/lib/title-tab-Bzo2mEUS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-tab-Bzo2mEUS.js","names":["TitleTab: FC<TitleTabProps>","useScrollStatus","H1","TabItem"],"sources":["../src/title-bar/components/title-tab/index.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem\n                {...tabProps}\n                key={`tab-${tab.text}-${index}`}\n                onClick={handleClick}\n              />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n"],"mappings":";;;;;;;;;;;;AAeA,MAAMA,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,sCAA2B,eAAe;CAC9D,MAAM,CAAC,kBAAkB,2CAAgC,MAAM;CAE/D,MAAM,MAAMC,6BAAgB,oBAAoB;AAEhD,4BAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,4CAAC;EAAI,WAAU;;GACb,2CAACC,sBAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,2CAAC;IACM;IACL,6BACE,qBACA,0EACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,yCAACC;MACC,GAAI;MACJ,KAAK,OAAO,IAAI,KAAK,GAAG;MACxB,SAAS;OACT;MAEJ;KACE,GACJ;GACJ,2CAAC,SACC,6BACE,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe"}

package/lib/title-tab-DyTYe4dn.mjs

@@ -0,0 +1,46 @@
+import { H1 } from "./heading-BVKLYfXi.mjs";
+import { useScrollStatus } from "./hook-DGSr4R5I.mjs";
+import { tab_item_default } from "./tab-item-DefWiW0b.mjs";
+import { createElement, useEffect, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title-tab/index.tsx
+const TitleTab = ({ title, tabs = [], activeTabIndex = 0 }) => {
+	const [activeIndex, setActiveIndex] = useState(activeTabIndex);
+	const [showGradientMask, setShowGradientMask] = useState(false);
+	const ref = useScrollStatus(setShowGradientMask);
+	useEffect(() => {
+		setActiveIndex(activeTabIndex);
+	}, [activeTabIndex]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col w-full text-gray-800",
+		children: [
+			/* @__PURE__ */ jsx(H1, { text: title }),
+			tabs.length > 0 ? /* @__PURE__ */ jsx("div", {
+				ref,
+				className: clsx("flex items-center", "overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", { "[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]": showGradientMask }),
+				children: tabs.map((tab, index) => {
+					const tabProps = {
+						...tab,
+						isActive: index === activeIndex
+					};
+					const handleClick = () => {
+						setActiveIndex(index);
+					};
+					return /* @__PURE__ */ createElement(tab_item_default, {
+						...tabProps,
+						key: `tab-${tab.text}-${index}`,
+						onClick: handleClick
+					});
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[0px]", "desktop:mt-[0px]") })
+		]
+	});
+};
+var title_tab_default = TitleTab;
+
+//#endregion
+export { title_tab_default };
+//# sourceMappingURL=title-tab-DyTYe4dn.mjs.map

package/lib/title-tab-DyTYe4dn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title-tab-DyTYe4dn.mjs","names":["TitleTab: FC<TitleTabProps>","TabItem"],"sources":["../src/title-bar/components/title-tab/index.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { type FC, useState, useEffect } from 'react'\n// hook\nimport { useScrollStatus } from './hook'\n// components\nimport TabItem from './tab-item'\nimport { H1 } from '../../../text/heading'\n// type\nimport type { Tab } from './type'\n\ntype TitleTabProps = {\n  title: string\n  tabs: Tab[]\n  activeTabIndex?: number\n}\nconst TitleTab: FC<TitleTabProps> = ({\n  title,\n  tabs = [],\n  activeTabIndex = 0,\n}) => {\n  const [activeIndex, setActiveIndex] = useState(activeTabIndex)\n  const [showGradientMask, setShowGradientMask] = useState(false)\n\n  const ref = useScrollStatus(setShowGradientMask)\n\n  useEffect(() => {\n    setActiveIndex(activeTabIndex)\n  }, [activeTabIndex])\n\n  return (\n    <div className=\"flex flex-col w-full text-gray-800\">\n      <H1 text={title} />\n      {tabs.length > 0 ? (\n        <div\n          ref={ref}\n          className={clsx(\n            'flex items-center',\n            'overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',\n            {\n              '[mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)] [-webkit-mask-image:linear-gradient(to_left,rgba(241,241,241,0),#f1f1f1_48px)]':\n                showGradientMask,\n            }\n          )}\n        >\n          {tabs.map((tab, index) => {\n            const tabProps = { ...tab, isActive: index === activeIndex }\n            const handleClick = () => {\n              setActiveIndex(index)\n            }\n            return (\n              <TabItem\n                {...tabProps}\n                key={`tab-${tab.text}-${index}`}\n                onClick={handleClick}\n              />\n            )\n          })}\n        </div>\n      ) : null}\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[0px]',\n          'desktop:mt-[0px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default TitleTab\n"],"mappings":";;;;;;;;AAeA,MAAMA,YAA+B,EACnC,OACA,OAAO,EAAE,EACT,iBAAiB,QACb;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,eAAe;CAC9D,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,MAAM;CAE/D,MAAM,MAAM,gBAAgB,oBAAoB;AAEhD,iBAAgB;AACd,iBAAe,eAAe;IAC7B,CAAC,eAAe,CAAC;AAEpB,QACE,qBAAC;EAAI,WAAU;;GACb,oBAAC,MAAG,MAAM,QAAS;GAClB,KAAK,SAAS,IACb,oBAAC;IACM;IACL,WAAW,KACT,qBACA,0EACA,EACE,yJACE,kBACH,CACF;cAEA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,WAAW;MAAE,GAAG;MAAK,UAAU,UAAU;MAAa;KAC5D,MAAM,oBAAoB;AACxB,qBAAe,MAAM;;AAEvB,YACE,8BAACC;MACC,GAAI;MACJ,KAAK,OAAO,IAAI,KAAK,GAAG;MACxB,SAAS;OACT;MAEJ;KACE,GACJ;GACJ,oBAAC,SACC,WAAW,KACT,uCACA,mBACD,GACD;;GACE;;AAIV,wBAAe"}

package/lib/title1-CB1C3lVX.js

@@ -0,0 +1,34 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_paragraph = require('./paragraph-Bve022HS.js');
+const require_heading = require('./heading-D5Lv6X0M.js');
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/title-bar/components/title1.tsx
+const Title1 = ({ title, subtitle = "", className = "" }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("flex items-baseline gap-[16px]"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H2, {
+				className: "text-gray-800",
+				text: title
+			}), subtitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+				className: "text-gray-600",
+				text: subtitle
+			}) : null]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, clsx.default)("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title1_default = Title1;
+
+//#endregion
+Object.defineProperty(exports, 'title1_default', {
+  enumerable: true,
+  get: function () {
+    return title1_default;
+  }
+});
+//# sourceMappingURL=title1-CB1C3lVX.js.map

package/lib/title1-CB1C3lVX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title1-CB1C3lVX.js","names":["Title1: FC<Title1Props>","H2","P1"],"sources":["../src/title-bar/components/title1.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n"],"mappings":";;;;;;;;;AAYA,MAAMA,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,4CAAC;EAAI,6BAAgB,iCAAiC,UAAU;aAC9D,4CAAC;GAAI,6BAAgB,iCAAiC;cACpD,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,2CAACC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,2CAAC,SACC,6BACE,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/title1-CkuzBJgg.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+//#region src/title-bar/components/title1.d.ts
+type Title1Props = {
+  title: string;
+  subtitle?: string;
+  className?: string;
+};
+declare const Title1: FC<Title1Props>;
+//#endregion
+export { Title1 };
+//# sourceMappingURL=title1-CkuzBJgg.d.ts.map

package/lib/title1-DMIzZ_Ce.d.mts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+
+//#region src/title-bar/components/title1.d.ts
+type Title1Props = {
+  title: string;
+  subtitle?: string;
+  className?: string;
+};
+declare const Title1: FC<Title1Props>;
+//#endregion
+export { Title1 };
+//# sourceMappingURL=title1-DMIzZ_Ce.d.mts.map

package/lib/title1-FLSEnRkW.mjs

@@ -0,0 +1,26 @@
+import { P1 } from "./paragraph-QihuIWot.mjs";
+import { H2 } from "./heading-BVKLYfXi.mjs";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/title-bar/components/title1.tsx
+const Title1 = ({ title, subtitle = "", className = "" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex justify-between flex-col", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx("flex items-baseline gap-[16px]"),
+			children: [/* @__PURE__ */ jsx(H2, {
+				className: "text-gray-800",
+				text: title
+			}), subtitle ? /* @__PURE__ */ jsx(P1, {
+				className: "text-gray-600",
+				text: subtitle
+			}) : null]
+		}), /* @__PURE__ */ jsx("div", { className: clsx("w-full h-[1px] bg-gray-300 mt-[8px]", "desktop:mt-[16px]") })]
+	});
+};
+var title1_default = Title1;
+
+//#endregion
+export { title1_default };
+//# sourceMappingURL=title1-FLSEnRkW.mjs.map

package/lib/title1-FLSEnRkW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title1-FLSEnRkW.mjs","names":["Title1: FC<Title1Props>"],"sources":["../src/title-bar/components/title1.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-300 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n"],"mappings":";;;;;;AAYA,MAAMA,UAA2B,EAAE,OAAO,WAAW,IAAI,YAAY,SAAS;AAC5E,QACE,qBAAC;EAAI,WAAW,KAAK,iCAAiC,UAAU;aAC9D,qBAAC;GAAI,WAAW,KAAK,iCAAiC;cACpD,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAS,EAC5C,WAAW,oBAAC;IAAG,WAAU;IAAgB,MAAM;KAAY,GAAG;IAC3D,EACN,oBAAC,SACC,WAAW,KACT,uCACA,oBACD,GACD;GACE;;AAIV,qBAAe"}

package/lib/title2-C2R8IF0W.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+
+//#region src/title-bar/components/title2.d.ts
+type Title2Props = {
+  title: string;
+  subtitle?: string;
+  renderButton?: React.ReactNode;
+  className?: string;
+};
+declare const Title2: React.FC<Title2Props>;
+//#endregion
+export { Title2 };
+//# sourceMappingURL=title2-C2R8IF0W.d.ts.map