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

package/lib/header/index.mjs

@@ -0,0 +1,459 @@
+import { internal_link_default } from "../internal-link-NQb751uB.mjs";
+import "../constants-oTHAnh6r.mjs";
+import "../constants-BWFuBApI.mjs";
+import "../paragraph-BWXQNQtX.mjs";
+import { THEME } from "../theme-BG6yZVj-.mjs";
+import { icon_button_default, pill_button_default, text_button_default } from "../button-DyUYGG90.mjs";
+import { EXTERNAL_LINKS } from "../external-links-2b4M_rcA.mjs";
+import { INTERNAL_LINKS } from "../internal-links-BF-974mA.mjs";
+import { RELEASE_BRANCH } from "../release-branch-DNCD1uH_.mjs";
+import { external_link_default } from "../external-link-Cx9S31Ye.mjs";
+import "../customized-link-BkuKVCKQ.mjs";
+import "../constants-t0lkfgqP.mjs";
+import { divider_default } from "../divider-Bb3tebJO.mjs";
+import { HamburgerContext, HeaderContext } from "../context-BCesW3fW.mjs";
+import "../constants-CQscYQcW.mjs";
+import { Hamburger, KidStar, Member, Search } from "../icons-DguoV48M.mjs";
+import { LOGO_TYPE } from "../constants-BqeEbkVD.mjs";
+import "../dropdown-menu-Cil4RtSK.mjs";
+import { ZIndex, tab_bar_default } from "../tab-bar-CBL2tDXk.mjs";
+import { HEADER_ACTION_LINKS, hamburger_menu_default } from "../hamburger-menu-BZ1hA7l5.mjs";
+import { logo_header_default } from "../logo-CC5oU9Qb.mjs";
+import "../theme-BErS2Qs6.mjs";
+import "../constants-QF71lY6v.mjs";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CSSTransition } from "react-transition-group";
+import map from "lodash/map";
+
+//#region src/header/constants/animation.ts
+const ANIMATION = {
+	step1Duration: "duration-[200ms]",
+	step2Delay: "delay-[150ms]",
+	step2Duration: "duration-[50ms]",
+	step3Delay: "delay-[150ms]",
+	step3Duration: "duration-[200ms]"
+};
+
+//#endregion
+//#region src/header/components/top-row/icons.tsx
+const Icons = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {
+	const { isLinkExternal } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ml-[24px] flex flex-row gap-[16px]",
+		children: [
+			/* @__PURE__ */ jsx(icon_button_default, {
+				iconComponent: Search(releaseBranch),
+				theme
+			}),
+			/* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.myReading.index,
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: KidStar(releaseBranch),
+					theme
+				})
+			}),
+			/* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ jsx(icon_button_default, {
+					iconComponent: Member(releaseBranch),
+					theme
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/header/utils/theme.ts
+const selectLogoType = (theme) => {
+	switch (theme) {
+		case THEME.photography:
+		case THEME.transparent: return LOGO_TYPE.white;
+		default: return LOGO_TYPE.default;
+	}
+};
+const selectHeaderTheme = (theme) => {
+	switch (theme) {
+		case THEME.photography: return {
+			bgColor: "bg-photo-dark",
+			topRowBgColor: "bg-photo-dark"
+		};
+		case THEME.transparent: return {
+			bgColor: "bg-opacity-black-02",
+			topRowBgColor: "bg-transparent"
+		};
+		case THEME.index: return {
+			bgColor: "bg-gray-white",
+			topRowBgColor: "bg-gray-white"
+		};
+		default: return {
+			bgColor: "bg-gray-100",
+			topRowBgColor: "bg-gray-100"
+		};
+	}
+};
+const selectSloganTheme = (theme) => {
+	switch (theme) {
+		case THEME.photography:
+		case THEME.transparent: return "text-gray-white";
+		default: return "text-gray-800";
+	}
+};
+
+//#endregion
+//#region src/header/components/top-row/index.tsx
+const TopRow = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow, releaseBranch, theme, isLinkExternal } = useContext(HeaderContext);
+	const { toggleHamburger } = useContext(HamburgerContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`, toUseNarrow ? "py-[16px]" : "py-[24px]"),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(toUseNarrow ? "opacity-100" : "opacity-0", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? "delay-350" : "delay-0"),
+					children: /* @__PURE__ */ jsx(icon_button_default, {
+						iconComponent: Hamburger(releaseBranch),
+						theme,
+						onClick: toggleHamburger
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(`flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`, toUseNarrow ? "ml-[24px]" : "ml-0", toUseNarrow ? "translate-x-0" : "-translate-x-[24px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
+					children: /* @__PURE__ */ jsx(LinkComponent, {
+						to: INTERNAL_LINKS.home,
+						className: clsx(`transition-height ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0"),
+						children: /* @__PURE__ */ jsx(logo_header_default, {
+							type: logoType,
+							releaseBranch,
+							className: clsx(toUseNarrow ? "h-[24px]" : "h-[32px]")
+						})
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(`transition-opacity ${ANIMATION.step3Duration}`, "flex items-center font-serif font-normal text-[14px]", toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100", selectSloganTheme(theme)),
+					children: "深度 × 開放 × 非營利"
+				})
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: clsx("flex items-center gap-[16px]", `transition-opacity ${ANIMATION.step3Duration}`, toUseNarrow ? `${ANIMATION.step3Delay}` : "delay-0", toUseNarrow ? "pointer-events-none" : "pointer-events-auto", toUseNarrow ? "opacity-0" : "opacity-100"),
+				children: HEADER_ACTION_LINKS.map((link) => /* @__PURE__ */ jsx(LinkComponent, {
+					to: link.to,
+					target: link.target,
+					children: /* @__PURE__ */ jsx(pill_button_default, {
+						text: link.label,
+						theme,
+						type: link.type
+					})
+				}, link.label))
+			}), /* @__PURE__ */ jsx(Icons, {
+				releaseBranch,
+				theme
+			})]
+		})]
+	});
+};
+var top_row_default = TopRow;
+
+//#endregion
+//#region src/header/components/channels/constants/index.ts
+const CHANNELS = [
+	{
+		label: "最新",
+		to: INTERNAL_LINKS.latest,
+		target: "_self"
+	},
+	{
+		label: "深度專題",
+		to: INTERNAL_LINKS.topics,
+		target: "_self"
+	},
+	{
+		label: "國際兩岸",
+		to: INTERNAL_LINKS.categories.world,
+		target: "_self"
+	},
+	{
+		label: "人權司法",
+		to: INTERNAL_LINKS.categories.humanRights,
+		target: "_self"
+	},
+	{
+		label: "政治社會",
+		to: INTERNAL_LINKS.categories.politicsAndSociety,
+		target: "_self"
+	},
+	{
+		label: "醫療健康",
+		to: INTERNAL_LINKS.categories.health,
+		target: "_self"
+	},
+	{
+		label: "環境永續",
+		to: INTERNAL_LINKS.categories.environment,
+		target: "_self"
+	},
+	{
+		label: "經濟產業",
+		to: INTERNAL_LINKS.categories.econ,
+		target: "_self"
+	},
+	{
+		label: "文化生活",
+		to: INTERNAL_LINKS.categories.culture,
+		target: "_self"
+	},
+	{
+		label: "教育校園",
+		to: INTERNAL_LINKS.categories.education,
+		target: "_self"
+	}
+];
+
+//#endregion
+//#region src/header/components/channels/index.tsx
+const _ = { map };
+const ChannelItem = ({ link = {
+	href: "",
+	target: "_self"
+}, label = "" }) => {
+	const { theme, isLinkExternal } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("flex items-center", "[&>a]:no-underline"),
+		children: /* @__PURE__ */ jsx(LinkComponent, {
+			to: link.href,
+			target: link.target,
+			children: /* @__PURE__ */ jsx(text_button_default, {
+				text: label,
+				size: text_button_default.Size.l,
+				theme,
+				style: text_button_default.Style.dark
+			})
+		})
+	});
+};
+const Channel = () => {
+	const { releaseBranch, theme } = useContext(HeaderContext);
+	const { toggleHamburger } = useContext(HamburgerContext);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between w-full px-[16px] py-[8px]",
+			children: [/* @__PURE__ */ jsx(icon_button_default, {
+				iconComponent: Hamburger(releaseBranch),
+				theme,
+				onClick: toggleHamburger
+			}), _.map(CHANNELS, (channel) => {
+				return /* @__PURE__ */ jsx(ChannelItem, {
+					label: channel.label,
+					link: {
+						href: channel.to,
+						target: channel.target
+					}
+				}, `channel-${channel.label}`);
+			})]
+		}), /* @__PURE__ */ jsx(divider_default, {})]
+	});
+};
+var channels_default = Channel;
+
+//#endregion
+//#region src/header/components/desktop-and-above.tsx
+const DesktopAndAbove = ({ topRowBgColor, logoType }) => {
+	const { toUseNarrow } = useContext(HeaderContext);
+	const channelRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "hidden desktop:flex desktop:flex-col",
+		children: [
+			/* @__PURE__ */ jsx(top_row_default, {
+				topRowBgColor,
+				logoType
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: clsx(`transition-opacity ${ANIMATION.step2Duration}`, toUseNarrow ? "opacity-0" : "opacity-100", toUseNarrow ? "delay-0" : `${ANIMATION.step2Delay}`),
+				children: /* @__PURE__ */ jsx(divider_default, { direction: divider_default.Direction.horizontal })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${ZIndex.channel}`,
+				children: /* @__PURE__ */ jsx(CSSTransition, {
+					in: !toUseNarrow,
+					nodeRef: channelRef,
+					classNames: {
+						enter: `opacity-0 -translate-y-full`,
+						enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,
+						exit: `opacity-100 translate-y-0`,
+						exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`
+					},
+					timeout: {
+						appear: 0,
+						enter: 350,
+						exit: 200
+					},
+					unmountOnExit: true,
+					children: /* @__PURE__ */ jsx("div", {
+						ref: channelRef,
+						children: /* @__PURE__ */ jsx(channels_default, {})
+					})
+				})
+			})
+		]
+	});
+};
+var desktop_and_above_default = DesktopAndAbove;
+
+//#endregion
+//#region src/header/components/tablet-and-below.tsx
+const TabletAndBelow = ({ topRowBgColor, logoType }) => {
+	const { isLinkExternal } = useContext(HeaderContext);
+	const LinkComponent = isLinkExternal ? external_link_default : internal_link_default;
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(`flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`, "desktop:hidden"),
+		children: [/* @__PURE__ */ jsx(LinkComponent, {
+			to: INTERNAL_LINKS.home,
+			className: "flex items-center",
+			children: /* @__PURE__ */ jsx(logo_header_default, {
+				type: logoType,
+				className: "h-[21px]"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-row items-center gap-[16px]",
+			children: [/* @__PURE__ */ jsx(LinkComponent, {
+				to: EXTERNAL_LINKS.monthlyDonation,
+				children: /* @__PURE__ */ jsx(pill_button_default, {
+					text: "贊助",
+					theme: pill_button_default.Theme.normal,
+					type: pill_button_default.Type.primary,
+					style: pill_button_default.Style.brand
+				})
+			}), /* @__PURE__ */ jsx(LinkComponent, {
+				to: INTERNAL_LINKS.account.index,
+				children: /* @__PURE__ */ jsx(text_button_default, {
+					text: "登入",
+					theme: text_button_default.Theme.normal,
+					style: text_button_default.Style.dark,
+					size: text_button_default.Size.s
+				})
+			})]
+		})]
+	});
+};
+var tablet_and_below_default = TabletAndBelow;
+
+//#endregion
+//#region src/header/index.tsx
+const HIDE_HEADER_THRESHOLD = 8;
+const TRANSFORM_HEADER_THRESHOLD = 40;
+const TRANSFORM_TIMEOUT = 800;
+const Header = ({ releaseBranch, isLinkExternal, theme, pathname, referrerPath, hamburgerContext }) => {
+	const isAuthed = false;
+	const { bgColor, topRowBgColor } = selectHeaderTheme(theme);
+	const logoType = selectLogoType(theme);
+	const { isHamburgerMenuOpen } = hamburgerContext;
+	const [toUseNarrow, setToUseNarrow] = useState(false);
+	const [hideHeader, setHideHeader] = useState(false);
+	const lastKnownPageYOffset = useRef(0);
+	const ticking = useRef(false);
+	const currentY = useRef(0);
+	const readyY = useRef(0);
+	const isTransforming = useRef(false);
+	const transformTimer = useRef(null);
+	const getScrollState = useCallback((scrollTop, scrollDirection) => {
+		const isCurrentNarrow = toUseNarrow;
+		const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
+		const scrollState = {
+			toUseNarrow,
+			hideHeader
+		};
+		if (isTransforming.current) return scrollState;
+		if (scrollDirection === "up") {
+			readyY.current = scrollTop;
+			scrollState.hideHeader = false;
+		}
+		if (scrollDirection === "down") {
+			if (isCurrentNarrow && scrollTop - readyY.current > HIDE_HEADER_THRESHOLD) scrollState.hideHeader = true;
+		}
+		if (isCurrentNarrow) scrollState.toUseNarrow = scrollDirection === "down" ? true : nextToUseNarrow;
+		else scrollState.toUseNarrow = scrollDirection === "up" ? false : nextToUseNarrow;
+		if (isCurrentNarrow !== scrollState.toUseNarrow) {
+			if (!transformTimer.current) {
+				isTransforming.current = true;
+				transformTimer.current = setTimeout(() => {
+					isTransforming.current = false;
+					readyY.current = currentY.current;
+					transformTimer.current = null;
+				}, TRANSFORM_TIMEOUT);
+			}
+		}
+		return scrollState;
+	}, [toUseNarrow, hideHeader]);
+	const updateScrollState = useCallback((currentScrollTop) => {
+		const scrollDirection = currentScrollTop > currentY.current ? "down" : "up";
+		currentY.current = currentScrollTop;
+		const updateState = getScrollState(currentScrollTop, scrollDirection);
+		setToUseNarrow(() => updateState.toUseNarrow);
+		setHideHeader(() => updateState.hideHeader);
+	}, [getScrollState]);
+	const handleScroll = useCallback(() => {
+		lastKnownPageYOffset.current = window.pageYOffset;
+		if (!ticking.current) {
+			window.requestAnimationFrame(() => {
+				updateScrollState(lastKnownPageYOffset.current);
+				ticking.current = false;
+			});
+			ticking.current = true;
+		}
+	}, [updateScrollState]);
+	useEffect(() => {
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+		};
+	}, [handleScroll]);
+	return /* @__PURE__ */ jsx(HeaderContext, {
+		value: {
+			releaseBranch,
+			isLinkExternal,
+			isAuthed,
+			theme,
+			pathname,
+			referrerPath,
+			toUseNarrow,
+			hideHeader
+		},
+		children: /* @__PURE__ */ jsxs(HamburgerContext, {
+			value: hamburgerContext,
+			children: [
+				/* @__PURE__ */ jsx("header", {
+					className: clsx(`w-full top-0 transition-transform duration-300 ${bgColor}`, theme === THEME.transparent ? "fixed" : "sticky", hideHeader ? "ease-in" : "ease-out", hideHeader ? "-translate-y-full" : "translate-y-0"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: clsx(`flex flex-col mx-auto px-[24px] ${ZIndex.header}`, "tablet:px-[32px]", "desktop:px-[48px]", "hd:w-[1280px] hd:px-0"),
+						children: [/* @__PURE__ */ jsx(desktop_and_above_default, {
+							topRowBgColor,
+							logoType
+						}), /* @__PURE__ */ jsx(tablet_and_below_default, {
+							topRowBgColor,
+							logoType
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: clsx(`fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`, isHamburgerMenuOpen ? "translate-x-0 opacity-100" : "-translate-x-full opacity-100", "tablet:-left-[320px]", isHamburgerMenuOpen ? "tablet:translate-x-[320px] tablet:opacity-100" : "tablet:-translate-x-[320px] tablet:opacity-100", "desktop:-left-[280px]", isHamburgerMenuOpen ? "desktop:translate-x-[280px] desktop:opacity-100" : "desktop:-translate-x-[280px] desktop:opacity-100"),
+					children: /* @__PURE__ */ jsx(hamburger_menu_default, {})
+				}),
+				/* @__PURE__ */ jsx(tab_bar_default, {})
+			]
+		})
+	});
+};
+var header_default = Header;
+
+//#endregion
+export { header_default as default };
+//# sourceMappingURL=index.mjs.map

package/lib/header/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}>","ExternalLink","InternalLink","IconButton","TopRow: FC<TopRowProps>","ExternalLink","InternalLink","IconButton","LogoHeader","PillButton","CHANNELS: ChannelType[]","ChannelItem: FC<ChannelItemProps>","ExternalLink","InternalLink","TextButton","IconButton","Divider","DesktopAndAbove: FC<DesktopAndAboveProps>","TopRow","Divider","Channel","TabletAndBelow: FC<TabletAndBelowProps>","ExternalLink","InternalLink","LogoHeader","PillButton","TextButton","Header: FC<HeaderProps>","DesktopAndAbove","TabletAndBelow","HamburgerMenu","TabBar"],"sources":["../../src/header/constants/animation.ts","../../src/header/components/top-row/icons.tsx","../../src/header/utils/theme.ts","../../src/header/components/top-row/index.tsx","../../src/header/components/channels/constants/index.ts","../../src/header/components/channels/index.tsx","../../src/header/components/desktop-and-above.tsx","../../src/header/components/tablet-and-below.tsx","../../src/header/index.tsx"],"sourcesContent":["export const ANIMATION = {\n  step1Duration: 'duration-[200ms]',\n  step2Delay: 'delay-[150ms]',\n  step2Duration: 'duration-[50ms]',\n  step3Delay: 'delay-[150ms]',\n  step3Duration: 'duration-[200ms]',\n} as const\n","import { useContext, type FC } from 'react'\n// context\nimport { HeaderContext } from '../../context'\n// constants\nimport { THEME, type Theme } from '../../../constants/theme'\nimport {\n  RELEASE_BRANCH,\n  type ReleaseBranch,\n} from '../../../constants/release-branch'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// icons\nimport { Search, KidStar, Member } from '../../../icons'\n// button\nimport { IconButton } from '../../../button'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\nexport const Icons: FC<{\n  releaseBranch?: ReleaseBranch\n  theme?: Theme\n}> = ({ releaseBranch = RELEASE_BRANCH.master, theme = THEME.normal }) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className=\"ml-[24px] flex flex-row gap-[16px]\">\n      <IconButton iconComponent={Search(releaseBranch)} theme={theme} />\n      <LinkComponent to={INTERNAL_LINKS.myReading.index}>\n        <IconButton iconComponent={KidStar(releaseBranch)} theme={theme} />\n      </LinkComponent>\n      <LinkComponent to={INTERNAL_LINKS.account.index}>\n        <IconButton iconComponent={Member(releaseBranch)} theme={theme} />\n      </LinkComponent>\n    </div>\n  )\n}\n","import { THEME, type Theme } from '../../constants/theme'\nimport { LOGO_TYPE } from '../../logo/constants'\n\nexport const selectLogoType = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return LOGO_TYPE.white\n    default:\n      return LOGO_TYPE.default\n  }\n}\n\nexport const selectHeaderTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n      return {\n        bgColor: 'bg-photo-dark',\n        topRowBgColor: 'bg-photo-dark',\n      }\n    case THEME.transparent:\n      return {\n        bgColor: 'bg-opacity-black-02',\n        topRowBgColor: 'bg-transparent',\n      }\n    case THEME.index:\n      return {\n        bgColor: 'bg-gray-white',\n        topRowBgColor: 'bg-gray-white',\n      }\n    default:\n      return {\n        bgColor: 'bg-gray-100',\n        topRowBgColor: 'bg-gray-100',\n      }\n  }\n}\n\nexport const selectSloganTheme = (theme: Theme) => {\n  switch (theme) {\n    case THEME.photography:\n    case THEME.transparent:\n      return 'text-gray-white'\n    default:\n      return 'text-gray-800'\n  }\n}\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// constants\nimport { ZIndex } from '../../constants/z-index'\nimport { ANIMATION } from '../../constants/animation'\nimport { HEADER_ACTION_LINKS } from '../../constants/action-links'\nimport { INTERNAL_LINKS } from '../../../constants/internal-links'\n// logo\nimport { LogoHeader } from '../../../logo'\nimport type { LogoType } from '../../../logo/constants'\n// buton\nimport { IconButton, PillButton } from '../../../button'\n// components\nimport { Icons } from './icons'\nimport { Hamburger } from '../../../icons'\n// utils\nimport { selectSloganTheme } from '../../utils/theme'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\n\ntype TopRowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TopRow: FC<TopRowProps> = ({ topRowBgColor, logoType }) => {\n  const { toUseNarrow, releaseBranch, theme, isLinkExternal } =\n    useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} px-[16px] ${topRowBgColor}`,\n        toUseNarrow ? 'py-[16px]' : 'py-[24px]'\n      )}\n    >\n      {/* left group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            toUseNarrow ? 'opacity-100' : 'opacity-0',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'delay-350' : 'delay-0'\n          )}\n        >\n          <IconButton\n            iconComponent={Hamburger(releaseBranch)}\n            theme={theme}\n            onClick={toggleHamburger}\n          />\n        </div>\n        {/* Logo */}\n        <div\n          className={clsx(\n            `flex items-center mr-[16px] transition-all ${ANIMATION.step3Duration}`,\n            toUseNarrow ? 'ml-[24px]' : 'ml-0',\n            toUseNarrow ? 'translate-x-0' : '-translate-x-[24px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n          )}\n        >\n          <LinkComponent\n            to={INTERNAL_LINKS.home}\n            className={clsx(\n              `transition-height ${ANIMATION.step3Duration}`,\n              toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0'\n            )}\n          >\n            <LogoHeader\n              type={logoType}\n              releaseBranch={releaseBranch}\n              className={clsx(toUseNarrow ? 'h-[24px]' : 'h-[32px]')}\n            />\n          </LinkComponent>\n        </div>\n        <div\n          className={clsx(\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            'flex items-center font-serif font-normal text-[14px]',\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100',\n            selectSloganTheme(theme)\n          )}\n        >\n          深度 × 開放 × 非營利\n        </div>\n      </div>\n      {/* right group */}\n      <div className=\"flex items-center\">\n        <div\n          className={clsx(\n            'flex items-center gap-[16px]',\n            `transition-opacity ${ANIMATION.step3Duration}`,\n            toUseNarrow ? `${ANIMATION.step3Delay}` : 'delay-0',\n            toUseNarrow ? 'pointer-events-none' : 'pointer-events-auto',\n            toUseNarrow ? 'opacity-0' : 'opacity-100'\n          )}\n        >\n          {HEADER_ACTION_LINKS.map((link) => (\n            <LinkComponent to={link.to} target={link.target} key={link.label}>\n              <PillButton text={link.label} theme={theme} type={link.type} />\n            </LinkComponent>\n          ))}\n        </div>\n        {/* icons */}\n        <Icons releaseBranch={releaseBranch} theme={theme} />\n      </div>\n    </div>\n  )\n}\n\nexport default TopRow\n","import { INTERNAL_LINKS } from '../../../../constants/internal-links'\nimport type { LinkTarget } from '../../../../customized-link/type'\n\ntype ChannelType = {\n  label: string\n  to: string\n  target: LinkTarget\n}\nexport const CHANNELS: ChannelType[] = [\n  {\n    label: '最新',\n    to: INTERNAL_LINKS.latest,\n    target: '_self',\n  },\n  {\n    label: '深度專題',\n    to: INTERNAL_LINKS.topics,\n    target: '_self',\n  },\n  {\n    label: '國際兩岸',\n    to: INTERNAL_LINKS.categories.world,\n    target: '_self',\n  },\n  {\n    label: '人權司法',\n    to: INTERNAL_LINKS.categories.humanRights,\n    target: '_self',\n  },\n  {\n    label: '政治社會',\n    to: INTERNAL_LINKS.categories.politicsAndSociety,\n    target: '_self',\n  },\n  {\n    label: '醫療健康',\n    to: INTERNAL_LINKS.categories.health,\n    target: '_self',\n  },\n  {\n    label: '環境永續',\n    to: INTERNAL_LINKS.categories.environment,\n    target: '_self',\n  },\n  {\n    label: '經濟產業',\n    to: INTERNAL_LINKS.categories.econ,\n    target: '_self',\n  },\n  {\n    label: '文化生活',\n    to: INTERNAL_LINKS.categories.culture,\n    target: '_self',\n  },\n  {\n    label: '教育校園',\n    to: INTERNAL_LINKS.categories.education,\n    target: '_self',\n  },\n]\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext, HamburgerContext } from '../../context'\n// components\nimport { IconButton, TextButton } from '../../../button'\nimport { Hamburger } from '../../../icons'\nimport Divider from '../../../divider'\n// constants\nimport { CHANNELS } from './constants'\n// link\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport type { LinkTarget } from '../../../customized-link/type'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\ntype ChannelItemProps = {\n  link: {\n    href: string\n    target: LinkTarget\n  }\n  label: string\n}\nconst ChannelItem: FC<ChannelItemProps> = ({\n  link = { href: '', target: '_self' },\n  label = '',\n}) => {\n  const { theme, isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div className={clsx('flex items-center', '[&>a]:no-underline')}>\n      <LinkComponent to={link.href} target={link.target}>\n        <TextButton\n          text={label}\n          size={TextButton.Size.l}\n          theme={theme}\n          style={TextButton.Style.dark}\n        />\n      </LinkComponent>\n    </div>\n  )\n}\n\nconst Channel = () => {\n  const { releaseBranch, theme } = useContext(HeaderContext)\n  const { toggleHamburger } = useContext(HamburgerContext)\n  return (\n    <div className=\"flex flex-col items-center\">\n      <div className=\"flex items-center justify-between w-full px-[16px] py-[8px]\">\n        <IconButton\n          iconComponent={Hamburger(releaseBranch)}\n          theme={theme}\n          onClick={toggleHamburger}\n        />\n        {_.map(CHANNELS, (channel) => {\n          return (\n            <ChannelItem\n              key={`channel-${channel.label}`}\n              label={channel.label}\n              link={{\n                href: channel.to,\n                target: channel.target,\n              }}\n            />\n          )\n        })}\n      </div>\n      <Divider />\n    </div>\n  )\n}\n\nexport default Channel\n","import { useContext, useRef, type FC } from 'react'\nimport clsx from 'clsx'\nimport { CSSTransition } from 'react-transition-group'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { ANIMATION } from '../constants/animation'\n// compontents\nimport TopRow from './top-row'\nimport Channel from './channels'\nimport Divider from '../../divider'\n// type\nimport type { LogoType } from '../../logo/constants'\ntype DesktopAndAboveProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst DesktopAndAbove: FC<DesktopAndAboveProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { toUseNarrow } = useContext(HeaderContext)\n  const channelRef = useRef<HTMLDivElement>(null)\n  return (\n    <div className=\"hidden desktop:flex desktop:flex-col\">\n      <TopRow topRowBgColor={topRowBgColor} logoType={logoType} />\n      {/* divider */}\n      <div\n        className={clsx(\n          `transition-opacity ${ANIMATION.step2Duration}`,\n          toUseNarrow ? 'opacity-0' : 'opacity-100',\n          toUseNarrow ? 'delay-0' : `${ANIMATION.step2Delay}`\n        )}\n      >\n        <Divider direction={Divider.Direction.horizontal} />\n      </div>\n      {/* channels */}\n      <div className={`${ZIndex.channel}`}>\n        <CSSTransition\n          in={!toUseNarrow}\n          nodeRef={channelRef}\n          classNames={{\n            enter: `opacity-0 -translate-y-full`,\n            enterActive: `transition-all ease-linear ${ANIMATION.step1Duration} ${ANIMATION.step2Delay} opacity-100 translate-y-0`,\n            exit: `opacity-100 translate-y-0`,\n            exitActive: `transition-all ease-linear ${ANIMATION.step1Duration} -translate-y-full`,\n          }}\n          timeout={{ appear: 0, enter: 350, exit: 200 }}\n          unmountOnExit\n        >\n          <div ref={channelRef}>\n            <Channel />\n          </div>\n        </CSSTransition>\n      </div>\n    </div>\n  )\n}\n\nexport default DesktopAndAbove\n","import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HeaderContext } from '../context'\n// constants\nimport { ZIndex } from '../constants/z-index'\nimport { INTERNAL_LINKS } from '../../constants/internal-links'\nimport { EXTERNAL_LINKS } from '../../constants/external-links'\n// logo\nimport { LogoHeader } from '../../logo'\nimport type { LogoType } from '../../logo/constants'\n// link\nimport { ExternalLink, InternalLink } from '../../customized-link'\n// button\nimport { PillButton, TextButton } from '../../button'\n\ntype TabletAndBelowProps = {\n  topRowBgColor: string\n  logoType: LogoType\n}\nconst TabletAndBelow: FC<TabletAndBelowProps> = ({\n  topRowBgColor,\n  logoType,\n}) => {\n  const { isLinkExternal } = useContext(HeaderContext)\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        `flex items-center justify-between ${ZIndex.topRow} py-[16px] ${topRowBgColor}`,\n        'desktop:hidden'\n      )}\n    >\n      {/* logo */}\n      <LinkComponent to={INTERNAL_LINKS.home} className=\"flex items-center\">\n        <LogoHeader type={logoType} className=\"h-[21px]\" />\n      </LinkComponent>\n      {/* actions */}\n      <div className=\"flex flex-row items-center gap-[16px]\">\n        <LinkComponent to={EXTERNAL_LINKS.monthlyDonation}>\n          <PillButton\n            text=\"贊助\"\n            theme={PillButton.Theme.normal}\n            type={PillButton.Type.primary}\n            style={PillButton.Style.brand}\n          />\n        </LinkComponent>\n        <LinkComponent to={INTERNAL_LINKS.account.index}>\n          <TextButton\n            text=\"登入\"\n            theme={TextButton.Theme.normal}\n            style={TextButton.Style.dark}\n            size={TextButton.Size.s}\n          />\n        </LinkComponent>\n      </div>\n    </div>\n  )\n}\n\nexport default TabletAndBelow\n","import { useRef, useState, useCallback, useEffect, type FC } from 'react'\nimport clsx from 'clsx'\n\n// constants\nimport { THEME, type Theme } from '../constants/theme'\nimport type { ReleaseBranch } from '../constants/release-branch'\nimport { ZIndex } from './constants/z-index'\n// components\nimport DesktopAndAbove from './components/desktop-and-above'\nimport TabletAndBelow from './components/tablet-and-below'\n// context\nimport {\n  HeaderContext,\n  HamburgerContext,\n  type HamburgerContextType,\n} from './context'\n// utils\nimport { selectHeaderTheme, selectLogoType } from './utils/theme'\n// hamburger menu\nimport HamburgerMenu from '../hamburger-menu'\n// tab bar\nimport TabBar from '../tab-bar'\n\nconst HIDE_HEADER_THRESHOLD = 8\nconst TRANSFORM_HEADER_THRESHOLD = 40\nconst TRANSFORM_TIMEOUT = 800\n\ntype HeaderProps = {\n  releaseBranch: ReleaseBranch\n  isLinkExternal: boolean\n  theme: Theme\n  pathname: string\n  referrerPath: string\n  hamburgerContext: HamburgerContextType\n}\nconst Header: FC<HeaderProps> = ({\n  releaseBranch,\n  isLinkExternal,\n  theme,\n  pathname,\n  referrerPath,\n  hamburgerContext,\n}) => {\n  const isAuthed = false\n\n  const { bgColor, topRowBgColor } = selectHeaderTheme(theme)\n  const logoType = selectLogoType(theme)\n\n  const { isHamburgerMenuOpen } = hamburgerContext\n\n  const [toUseNarrow, setToUseNarrow] = useState(false)\n  const [hideHeader, setHideHeader] = useState(false)\n\n  // TODO: get isAuthed from redux\n  // const isAuthed = useSelector(state => _.get(state, 'auth.isAuthed', false))\n\n  const lastKnownPageYOffset = useRef(0)\n  const ticking = useRef(false)\n  const currentY = useRef(0)\n  const readyY = useRef(0)\n  const isTransforming = useRef(false)\n  const transformTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const getScrollState = useCallback(\n    (scrollTop: number, scrollDirection: 'up' | 'down') => {\n      const isCurrentNarrow = toUseNarrow\n      const nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD\n      const scrollState = { toUseNarrow, hideHeader }\n\n      if (isTransforming.current) {\n        return scrollState\n      }\n\n      if (scrollDirection === 'up') {\n        readyY.current = scrollTop\n        scrollState.hideHeader = false\n      }\n\n      if (scrollDirection === 'down') {\n        if (\n          isCurrentNarrow &&\n          scrollTop - readyY.current > HIDE_HEADER_THRESHOLD\n        ) {\n          scrollState.hideHeader = true\n        }\n      }\n\n      if (isCurrentNarrow) {\n        scrollState.toUseNarrow =\n          scrollDirection === 'down' ? true : nextToUseNarrow\n      } else {\n        scrollState.toUseNarrow =\n          scrollDirection === 'up' ? false : nextToUseNarrow\n      }\n\n      if (isCurrentNarrow !== scrollState.toUseNarrow) {\n        if (!transformTimer.current) {\n          isTransforming.current = true\n          transformTimer.current = setTimeout(() => {\n            isTransforming.current = false\n            readyY.current = currentY.current\n            transformTimer.current = null\n          }, TRANSFORM_TIMEOUT)\n        }\n      }\n\n      return scrollState\n    },\n    [toUseNarrow, hideHeader]\n  )\n\n  const updateScrollState = useCallback(\n    (currentScrollTop: number) => {\n      const scrollDirection =\n        currentScrollTop > currentY.current ? 'down' : 'up'\n      currentY.current = currentScrollTop\n      const updateState = getScrollState(currentScrollTop, scrollDirection)\n      setToUseNarrow(() => updateState.toUseNarrow)\n      setHideHeader(() => updateState.hideHeader)\n    },\n    [getScrollState]\n  )\n\n  const handleScroll = useCallback(() => {\n    lastKnownPageYOffset.current = window.pageYOffset\n    if (!ticking.current) {\n      window.requestAnimationFrame(() => {\n        updateScrollState(lastKnownPageYOffset.current)\n        ticking.current = false\n      })\n      ticking.current = true\n    }\n  }, [updateScrollState])\n\n  useEffect(() => {\n    window.addEventListener('scroll', handleScroll, { passive: true })\n    return () => {\n      window.removeEventListener('scroll', handleScroll)\n    }\n  }, [handleScroll])\n\n  return (\n    <HeaderContext\n      value={{\n        releaseBranch,\n        isLinkExternal,\n        isAuthed,\n        theme,\n        pathname,\n        referrerPath,\n        toUseNarrow,\n        hideHeader,\n      }}\n    >\n      <HamburgerContext value={hamburgerContext}>\n        <header\n          className={clsx(\n            `w-full top-0 transition-transform duration-300 ${bgColor}`,\n            theme === THEME.transparent ? 'fixed' : 'sticky',\n            hideHeader ? 'ease-in' : 'ease-out',\n            hideHeader ? '-translate-y-full' : 'translate-y-0'\n          )}\n        >\n          <div\n            className={clsx(\n              `flex flex-col mx-auto px-[24px] ${ZIndex.header}`,\n              'tablet:px-[32px]',\n              'desktop:px-[48px]',\n              'hd:w-[1280px] hd:px-0'\n            )}\n          >\n            <DesktopAndAbove\n              topRowBgColor={topRowBgColor}\n              logoType={logoType}\n            />\n            <TabletAndBelow topRowBgColor={topRowBgColor} logoType={logoType} />\n          </div>\n        </header>\n        <div\n          className={clsx(\n            `fixed top-0 left-0 ${ZIndex.hamburger} transition-transform duration-300 ease-in-out`,\n            isHamburgerMenuOpen\n              ? 'translate-x-0 opacity-100'\n              : '-translate-x-full opacity-100',\n            'tablet:-left-[320px]',\n            isHamburgerMenuOpen\n              ? 'tablet:translate-x-[320px] tablet:opacity-100'\n              : 'tablet:-translate-x-[320px] tablet:opacity-100',\n            'desktop:-left-[280px]',\n            isHamburgerMenuOpen\n              ? 'desktop:translate-x-[280px] desktop:opacity-100'\n              : 'desktop:-translate-x-[280px] desktop:opacity-100'\n          )}\n        >\n          <HamburgerMenu />\n        </div>\n        <TabBar />\n      </HamburgerContext>\n    </HeaderContext>\n  )\n}\n\nexport default Header\n"],"mappings":"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"}

package/lib/heading-CFSkTbdH.mjs

@@ -0,0 +1,37 @@
+import { TYPE } from "./constants-BWFuBApI.mjs";
+import React from "react";
+import clsx from "clsx";
+
+//#region src/text/heading.tsx
+const baseClass = "font-bold";
+const 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]"
+};
+const HeadingVariant = (variant) => {
+	const Component = ({ text = "", type = TYPE.default, className = "",...props }) => {
+		const htmlTag = variant.toLowerCase();
+		const fontFamily = type === TYPE.article ? "font-title" : "font-default";
+		return React.createElement(htmlTag, {
+			className: clsx(fontFamily, baseClass, variantClass[variant], className),
+			...props
+		}, text);
+	};
+	Component.displayName = variant;
+	Component.Type = TYPE;
+	return Component;
+};
+const H1 = HeadingVariant("H1");
+const H2 = HeadingVariant("H2");
+const H3 = HeadingVariant("H3");
+const H4 = HeadingVariant("H4");
+const H5 = HeadingVariant("H5");
+const H6 = HeadingVariant("H6");
+
+//#endregion
+export { H1, H2, H3, H4, H5, H6 };
+//# sourceMappingURL=heading-CFSkTbdH.mjs.map

package/lib/heading-CFSkTbdH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-CFSkTbdH.mjs","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n  text?: string\n  type?: Type\n  className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n  H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n  H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n  H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n  H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n  H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n  H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n    text = '',\n    type = TYPE.default,\n    className = '',\n    ...props\n  }) => {\n    const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n    const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n    return React.createElement(\n      htmlTag,\n      {\n        className: clsx(\n          fontFamily,\n          baseClass,\n          variantClass[variant],\n          className\n        ),\n        ...props,\n      },\n      text\n    )\n  }\n  Component.displayName = variant\n  Component.Type = TYPE\n  return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAO,KAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAAS,KAAK,UAAU,eAAe;AAC1D,SAAO,MAAM,cACX,SACA;GACE,WAAW,KACT,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAO;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}

package/lib/heading-DFzj2z0V.js

@@ -0,0 +1,75 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_constants = require('./constants-K2ObjToq.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+
+//#region src/text/heading.tsx
+const baseClass = "font-bold";
+const 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]"
+};
+const HeadingVariant = (variant) => {
+	const Component = ({ text = "", type = require_constants.TYPE.default, className = "",...props }) => {
+		const htmlTag = variant.toLowerCase();
+		const fontFamily = type === require_constants.TYPE.article ? "font-title" : "font-default";
+		return react.default.createElement(htmlTag, {
+			className: (0, clsx.default)(fontFamily, baseClass, variantClass[variant], className),
+			...props
+		}, text);
+	};
+	Component.displayName = variant;
+	Component.Type = require_constants.TYPE;
+	return Component;
+};
+const H1 = HeadingVariant("H1");
+const H2 = HeadingVariant("H2");
+const H3 = HeadingVariant("H3");
+const H4 = HeadingVariant("H4");
+const H5 = HeadingVariant("H5");
+const H6 = HeadingVariant("H6");
+
+//#endregion
+Object.defineProperty(exports, 'H1', {
+  enumerable: true,
+  get: function () {
+    return H1;
+  }
+});
+Object.defineProperty(exports, 'H2', {
+  enumerable: true,
+  get: function () {
+    return H2;
+  }
+});
+Object.defineProperty(exports, 'H3', {
+  enumerable: true,
+  get: function () {
+    return H3;
+  }
+});
+Object.defineProperty(exports, 'H4', {
+  enumerable: true,
+  get: function () {
+    return H4;
+  }
+});
+Object.defineProperty(exports, 'H5', {
+  enumerable: true,
+  get: function () {
+    return H5;
+  }
+});
+Object.defineProperty(exports, 'H6', {
+  enumerable: true,
+  get: function () {
+    return H6;
+  }
+});
+//# sourceMappingURL=heading-DFzj2z0V.js.map

package/lib/heading-DFzj2z0V.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-DFzj2z0V.js","names":["Component: React.FC<HeadingProps> & { Type: typeof TYPE }","TYPE","React"],"sources":["../src/text/heading.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './constants'\n\ntype HeadingProps = React.HTMLAttributes<HTMLHeadingElement> & {\n  text?: string\n  type?: Type\n  className?: string\n}\n\nconst baseClass = 'font-bold'\n\nconst variantClass = {\n  H1: 'text-[28px] leading-[125%] tablet:text-[36px]',\n  H2: 'text-[24px] leading-[125%] tablet:text-[32px]',\n  H3: 'text-[22px] leading-[150%] tablet:text-[28px]',\n  H4: 'text-[18px] leading-[150%] tablet:text-[22px]',\n  H5: 'text-[17px] leading-[150%] tablet:text-[18px]',\n  H6: 'text-[16px] leading-[150%] tablet:text-[16px]',\n}\n\nconst HeadingVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<HeadingProps> & { Type: typeof TYPE } = ({\n    text = '',\n    type = TYPE.default,\n    className = '',\n    ...props\n  }) => {\n    const htmlTag = variant.toLowerCase() // 產生 'h1', 'h2', ...\n    const fontFamily = type === TYPE.article ? 'font-title' : 'font-default'\n    return React.createElement(\n      htmlTag,\n      {\n        className: clsx(\n          fontFamily,\n          baseClass,\n          variantClass[variant],\n          className\n        ),\n        ...props,\n      },\n      text\n    )\n  }\n  Component.displayName = variant\n  Component.Type = TYPE\n  return Component\n}\n\nconst H1 = HeadingVariant('H1')\nconst H2 = HeadingVariant('H2')\nconst H3 = HeadingVariant('H3')\nconst H4 = HeadingVariant('H4')\nconst H5 = HeadingVariant('H5')\nconst H6 = HeadingVariant('H6')\n\nexport { H1, H2, H3, H4, H5, H6 }\n"],"mappings":";;;;;;;;AAUA,MAAM,YAAY;AAElB,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,kBAAkB,YAAuC;CAC7D,MAAMA,aAA6D,EACjE,OAAO,IACP,OAAOC,uBAAK,SACZ,YAAY,GACZ,GAAG,YACC;EACJ,MAAM,UAAU,QAAQ,aAAa;EACrC,MAAM,aAAa,SAASA,uBAAK,UAAU,eAAe;AAC1D,SAAOC,cAAM,cACX,SACA;GACE,6BACE,YACA,WACA,aAAa,UACb,UACD;GACD,GAAG;GACJ,EACD,KACD;;AAEH,WAAU,cAAc;AACxB,WAAU,OAAOD;AACjB,QAAO;;AAGT,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK;AAC/B,MAAM,KAAK,eAAe,KAAK"}

package/lib/icons/constants.d.mts

@@ -0,0 +1,3 @@
+import "../index-BmIgLA0K.mjs";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-BswaTS-y.mjs";
+export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };

package/lib/icons/constants.d.ts

@@ -0,0 +1,3 @@
+import "../index-H3peA2d_.js";
+import { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType } from "../constants-DQxcqnYL.js";
+export { ARROW_DIRECTION, ArrowDirection, ICON_TYPE, IconType, MEDIA_TYPE, MediaType };