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

package/lib/styles.css

@@ -44,6 +44,7 @@
     --font-title: "merriweather", "source-han-serif-tc", serif;
     --font-default: "Roboto Slab", "Noto Sans TC", sans-serif, "Tauhu Oo";
     --font-weight-extra-light: 100;
+    --animate-shimmer: shimmer 2.5s infinite;
   }
 }
 @layer base {
@@ -246,9 +247,6 @@
   .z-999 {
     z-index: 999;
   }
-  .m-0 {
-    margin: calc(var(--spacing) * 0);
-  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -294,6 +292,12 @@
   .box-border {
     box-sizing: border-box;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .flex {
     display: flex;
   }
@@ -329,6 +333,12 @@
   .h-\[32px\] {
     height: 32px;
   }
+  .h-\[72px\] {
+    height: 72px;
+  }
+  .h-\[144px\] {
+    height: 144px;
+  }
   .h-\[3000px\] {
     height: 3000px;
   }
@@ -356,6 +366,12 @@
   .w-\[24px\] {
     width: 24px;
   }
+  .w-\[72px\] {
+    width: 72px;
+  }
+  .w-\[216px\] {
+    width: 216px;
+  }
   .w-\[232px\] {
     width: 232px;
   }
@@ -461,6 +477,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-\[4px\] {
+    gap: 4px;
+  }
   .gap-\[8px\] {
     gap: 8px;
   }
@@ -485,6 +504,9 @@
   .overscroll-contain {
     overscroll-behavior: contain;
   }
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .rounded-\[40px\] {
     border-radius: 40px;
   }
@@ -599,6 +621,9 @@
   .mask-cover {
     mask-size: cover;
   }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-\[4px\] {
     padding: 4px;
   }
@@ -683,6 +708,12 @@
   .font-title {
     font-family: var(--font-title);
   }
+  .\!text-\[18px\] {
+    font-size: 18px !important;
+  }
+  .\!text-\[22px\] {
+    font-size: 22px !important;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -857,11 +888,85 @@
   .\[-webkit-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);
   }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:inset-0 {
+    &::after {
+      content: var(--tw-content);
+      inset: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:-translate-x-full {
+    &::after {
+      content: var(--tw-content);
+      --tw-translate-x: -100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .after\:animate-shimmer {
+    &::after {
+      content: var(--tw-content);
+      animation: var(--animate-shimmer);
+    }
+  }
+  .after\:bg-linear-to-r {
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-position: to right;
+      @supports (background-image: linear-gradient(in lab, red, red)) {
+        --tw-gradient-position: to right in oklab;
+      }
+      background-image: linear-gradient(var(--tw-gradient-stops));
+    }
+  }
+  .after\:from-gray-white {
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-from: var(--color-gray-white);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
+  .after\:via-opacity-white-05 {
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-via: var(--color-opacity-white-05);
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+  }
+  .after\:to-gray-white {
+    &::after {
+      content: var(--tw-content);
+      --tw-gradient-to: var(--color-gray-white);
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
+  .after\:content-\[\"\"\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: "";
+      content: var(--tw-content);
+    }
+  }
   .last\:mr-0 {
     &:last-child {
       margin-right: calc(var(--spacing) * 0);
     }
   }
+  .hover\:cursor-pointer {
+    &:hover {
+      @media (hover: hover) {
+        cursor: pointer;
+      }
+    }
+  }
   .hover\:border-brand-dark {
     &:hover {
       @media (hover: hover) {
@@ -1044,6 +1149,13 @@
       }
     }
   }
+  .hover\:opacity-70 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 70%;
+      }
+    }
+  }
   .focus\:bg-gray-100 {
     &:focus {
       background-color: var(--color-gray-100);
@@ -1345,6 +1457,11 @@
       padding-inline: calc(var(--spacing) * 0);
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden {
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:w-\[4px\] {
     &::-webkit-scrollbar {
       width: 4px;
@@ -1819,6 +1936,53 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
@@ -1829,6 +1993,11 @@
     transform: rotate(360deg);
   }
 }
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -1854,6 +2023,16 @@
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-outline-style: solid;
     }
   }

package/lib/tab-bar/constants.d.mts

@@ -1,6 +1,6 @@
-import "../index-CUE6zs36.mjs";
-import { ReleaseBranch } from "../release-branch-uF0B5lcE.mjs";
-import { LinkTarget } from "../type-Bsf9A8YX.mjs";
+import "../index-HhQuz4hd.mjs";
+import { ReleaseBranch } from "../release-branch-IPa6pTGS.mjs";
+import { LinkTarget } from "../type-CUK24s0m.mjs";
 import { ReactElement } from "react";
 
 //#region src/tab-bar/constants.d.ts

package/lib/tab-bar/constants.d.ts

@@ -1,6 +1,6 @@
 import "../index-H3peA2d_.js";
-import { ReleaseBranch } from "../release-branch-CsBbhuYE.js";
-import { LinkTarget } from "../type-CcygKers.js";
+import { ReleaseBranch } from "../release-branch-CnwfO6yj.js";
+import { LinkTarget } from "../type-BnDFCU6X.js";
 import { ReactElement } from "react";
 
 //#region src/tab-bar/constants.d.ts

package/lib/tab-bar/constants.js

@@ -1,7 +1,7 @@
-require('../internal-links-DxtMobuI.js');
-require('../release-branch-CRZV4Ivz.js');
-require('../constants-D8wNUvoZ.js');
-require('../icons-qP5oNB0W.js');
-const require_constants$1 = require('../constants-B_1Vpdib.js');
+require('../internal-links-D7poW27s.js');
+require('../release-branch-BX28p3l9.js');
+require('../constants-D3LxY6rh.js');
+require('../icons-UUg8_T_o.js');
+const require_constants$1 = require('../constants-CyHvY9kx.js');
 
 exports.TabBarItems = require_constants$1.TabBarItems;

package/lib/tab-bar/constants.mjs

@@ -1,7 +1,7 @@
-import "../internal-links-CP3dqmrz.mjs";
-import "../release-branch-DNCD1uH_.mjs";
-import "../constants-5phfWHvb.mjs";
-import "../icons-I7T-auOQ.mjs";
-import { TabBarItems } from "../constants-Br6I254P.mjs";
+import "../internal-links-DOdRudQQ.mjs";
+import "../release-branch-DDaNiKrr.mjs";
+import "../constants-CeaoKGr8.mjs";
+import "../icons-CQv9VD7t.mjs";
+import { TabBarItems } from "../constants-cPryXhfO.mjs";
 
 export { TabBarItems };

package/lib/tab-bar/index.js

@@ -1,18 +1,28 @@
 require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
-require('../paragraph-iuz3jP0Q.js');
+require('../paragraph-Bve022HS.js');
 require('../theme-DDBlIbeS.js');
-require('../button-Dk0MxlKd.js');
-require('../internal-links-DxtMobuI.js');
-require('../release-branch-CRZV4Ivz.js');
-require('../external-link-Ce1_loKh.js');
-require('../internal-link-DyK4bABh.js');
-require('../customized-link-BuleQPlC.js');
-require('../context-I1lTR5SO.js');
-require('../constants-D8wNUvoZ.js');
-require('../icons-qP5oNB0W.js');
-const require_tab_bar = require('../tab-bar-BiduNX4N.js');
-require('../theme-CmvdSSbX.js');
-require('../constants-B_1Vpdib.js');
+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('../internal-links-D7poW27s.js');
+require('../release-branch-BX28p3l9.js');
+require('../external-link-N6pHzsZ9.js');
+require('../internal-link-CQYfLFmN.js');
+require('../customized-link-BQWDtLYD.js');
+require('../context-CDuykLw5.js');
+require('../constants-D3LxY6rh.js');
+require('../icons-UUg8_T_o.js');
+require('../z-index-BdObyvJF.js');
+require('../theme-Cynd7pF9.js');
+require('../constants-CyHvY9kx.js');
+const require_tab_bar = require('../tab-bar-DCIXtwup.js');
 
 module.exports = require_tab_bar.tab_bar_default;

package/lib/tab-bar/index.mjs

@@ -1,18 +1,28 @@
 import "../internal-link-JeC0sVNF.mjs";
 import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
-import "../paragraph-Cf9jr8RF.mjs";
+import "../paragraph-QihuIWot.mjs";
 import "../theme-BG6yZVj-.mjs";
-import "../button-D_AWI7r9.mjs";
-import "../internal-links-CP3dqmrz.mjs";
-import "../release-branch-DNCD1uH_.mjs";
-import "../external-link-BMIFL3DE.mjs";
-import "../customized-link-M65Amhsm.mjs";
-import "../context-BgdqM3zA.mjs";
-import "../constants-5phfWHvb.mjs";
-import "../icons-I7T-auOQ.mjs";
-import { tab_bar_default } from "../tab-bar-Cl1QLEj1.mjs";
-import "../theme-CE2RkJwt.mjs";
-import "../constants-Br6I254P.mjs";
+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 "../internal-links-DOdRudQQ.mjs";
+import "../release-branch-DDaNiKrr.mjs";
+import "../external-link-B7TYHbGX.mjs";
+import "../customized-link-B4xfnPSR.mjs";
+import "../context-rWQ3FoMt.mjs";
+import "../constants-CeaoKGr8.mjs";
+import "../icons-CQv9VD7t.mjs";
+import "../z-index-CPbhhoLg.mjs";
+import "../theme-C942t67I.mjs";
+import "../constants-cPryXhfO.mjs";
+import { tab_bar_default } from "../tab-bar-DJus-K09.mjs";
 
 export { tab_bar_default as default };

package/lib/tab-bar/theme.d.mts

@@ -1,5 +1,5 @@
-import "../index-CUE6zs36.mjs";
-import { Theme } from "../theme-DKi2E2si.mjs";
+import "../index-HhQuz4hd.mjs";
+import { Theme } from "../theme-ECp4BKXJ.mjs";
 
 //#region src/tab-bar/theme.d.ts
 declare const selectTabBarTheme: (theme: Theme) => {

package/lib/tab-bar/theme.d.ts

@@ -1,5 +1,5 @@
 import "../index-H3peA2d_.js";
-import { Theme } from "../theme-BDGfJ8n-.js";
+import { Theme } from "../theme-Ce9CLqLS.js";
 
 //#region src/tab-bar/theme.d.ts
 declare const selectTabBarTheme: (theme: Theme) => {

package/lib/tab-bar/theme.js

@@ -1,4 +1,4 @@
 require('../theme-DDBlIbeS.js');
-const require_theme$1 = require('../theme-CmvdSSbX.js');
+const require_theme$1 = require('../theme-Cynd7pF9.js');
 
 exports.selectTabBarTheme = require_theme$1.selectTabBarTheme;

package/lib/tab-bar/theme.mjs

@@ -1,4 +1,4 @@
 import "../theme-BG6yZVj-.mjs";
-import { selectTabBarTheme } from "../theme-CE2RkJwt.mjs";
+import { selectTabBarTheme } from "../theme-C942t67I.mjs";
 
 export { selectTabBarTheme };

package/lib/{tab-bar-BiduNX4N.js → tab-bar-DCIXtwup.js}

@@ -1,12 +1,13 @@
 const require_chunk = require('./chunk-BxBTb9qk.js');
 const require_theme = 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');
-const require_context = require('./context-I1lTR5SO.js');
-const require_icons = require('./icons-qP5oNB0W.js');
-const require_theme$1 = require('./theme-CmvdSSbX.js');
-const require_constants = require('./constants-B_1Vpdib.js');
+const require_icon_with_text_button = require('./icon-with-text-button-DOj_-gz0.js');
+const require_external_link = require('./external-link-N6pHzsZ9.js');
+const require_internal_link = require('./internal-link-CQYfLFmN.js');
+const require_context = require('./context-CDuykLw5.js');
+const require_icons = require('./icons-UUg8_T_o.js');
+const require_z_index = require('./z-index-BdObyvJF.js');
+const require_theme$1 = require('./theme-Cynd7pF9.js');
+const require_constants = require('./constants-CyHvY9kx.js');
 let react = require("react");
 react = require_chunk.__toESM(react);
 let clsx = require("clsx");
@@ -16,17 +17,6 @@ react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
 let lodash_map = require("lodash/map");
 lodash_map = require_chunk.__toESM(lodash_map);
 
-//#region src/header/constants/z-index.ts
-const ZIndex = {
-	tabBarMobile: "z-10",
-	tabBarTablet: "tablet:z-3",
-	hamburger: "z-4",
-	header: "z-3",
-	topRow: "z-2",
-	channel: "z-1"
-};
-
-//#endregion
 //#region src/tab-bar/index.tsx
 const _ = { map: lodash_map.default };
 const TabBar = ({ className = "" }) => {
@@ -36,21 +26,21 @@ const TabBar = ({ className = "" }) => {
 	const iconTheme = theme === require_theme.THEME.photography ? theme : require_theme.THEME.normal;
 	const LinkComponent = isLinkExternal ? require_external_link.external_link_default : require_internal_link.internal_link_default;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, clsx.default)("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, ZIndex.tabBarMobile, ZIndex.tabBarTablet, className),
+		className: (0, clsx.default)("w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]", "desktop:hidden", bgColor, require_z_index.ZIndex.tabBarMobile, require_z_index.ZIndex.tabBarTablet, className),
 		children: [_.map(require_constants.TabBarItems(releaseBranch), (item) => {
 			const isActive = !isHamburgerMenuOpen && pathname === item.link;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkComponent, {
 				to: item.link,
 				target: item.target,
 				className: "flex justify-center flex-1",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_with_text_button_default, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_with_text_button.icon_with_text_button_default, {
 					text: item.text,
 					iconComponent: item.icon,
 					theme: iconTheme,
 					active: isActive
 				})
 			}, item.text);
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.icon_with_text_button_default, {
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icon_with_text_button.icon_with_text_button_default, {
 			text: "選單",
 			iconComponent: require_icons.Hamburger(releaseBranch),
 			className: "flex justify-center flex-1",
@@ -63,16 +53,10 @@ const TabBar = ({ className = "" }) => {
 var tab_bar_default = TabBar;
 
 //#endregion
-Object.defineProperty(exports, 'ZIndex', {
-  enumerable: true,
-  get: function () {
-    return ZIndex;
-  }
-});
 Object.defineProperty(exports, 'tab_bar_default', {
   enumerable: true,
   get: function () {
     return tab_bar_default;
   }
 });
-//# sourceMappingURL=tab-bar-BiduNX4N.js.map
+//# sourceMappingURL=tab-bar-DCIXtwup.js.map

package/lib/tab-bar-DCIXtwup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-DCIXtwup.js","names":["TabBar: FC<TabBarProps>","HeaderContext","HamburgerContext","selectTabBarTheme","THEME","ExternalLink","InternalLink","ZIndex","TabBarItems","IconWithTextButton","Hamburger"],"sources":["../src/tab-bar/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HamburgerContext, HeaderContext } from '../header/context'\n// z-index\nimport { ZIndex } from '../header/constants/z-index'\n// button\nimport { IconWithTextButton } from '../button'\n// icons\nimport { Hamburger } from '../icons'\n// theme\nimport { THEME } from '../constants/theme'\nimport { selectTabBarTheme } from './theme'\n// constants\nimport { TabBarItems } from './constants'\n// links\nimport { InternalLink, ExternalLink } from '../customized-link'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\n\ntype TabBarProps = {\n  className?: string\n}\nconst TabBar: FC<TabBarProps> = ({ className = '' }) => {\n  const { theme, releaseBranch, isLinkExternal, pathname } =\n    useContext(HeaderContext)\n  const { toggleHamburger, isHamburgerMenuOpen } = useContext(HamburgerContext)\n  const { bgColor } = selectTabBarTheme(theme)\n  const iconTheme = theme === THEME.photography ? theme : THEME.normal\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        'w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]',\n        'desktop:hidden',\n        bgColor,\n        ZIndex.tabBarMobile,\n        ZIndex.tabBarTablet,\n        className\n      )}\n    >\n      {_.map(TabBarItems(releaseBranch), (item) => {\n        const isActive = !isHamburgerMenuOpen && pathname === item.link\n        return (\n          <LinkComponent\n            key={item.text}\n            to={item.link}\n            target={item.target}\n            className=\"flex justify-center flex-1\"\n          >\n            <IconWithTextButton\n              text={item.text}\n              iconComponent={item.icon}\n              theme={iconTheme}\n              active={isActive}\n            />\n          </LinkComponent>\n        )\n      })}\n      <IconWithTextButton\n        text=\"選單\"\n        iconComponent={Hamburger(releaseBranch)}\n        className=\"flex justify-center flex-1\"\n        onClick={toggleHamburger}\n        active={isHamburgerMenuOpen}\n        theme={iconTheme}\n      />\n    </div>\n  )\n}\nexport default TabBar\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,IAAI,EACR,yBACD;AAKD,MAAMA,UAA2B,EAAE,YAAY,SAAS;CACtD,MAAM,EAAE,OAAO,eAAe,gBAAgB,mCACjCC,8BAAc;CAC3B,MAAM,EAAE,iBAAiB,8CAAmCC,iCAAiB;CAC7E,MAAM,EAAE,YAAYC,kCAAkB,MAAM;CAC5C,MAAM,YAAY,UAAUC,oBAAM,cAAc,QAAQA,oBAAM;CAC9D,MAAM,gBAAgB,iBAAiBC,8CAAeC;AACtD,QACE,4CAAC;EACC,6BACE,yJACA,kBACA,SACAC,uBAAO,cACPA,uBAAO,cACP,UACD;aAEA,EAAE,IAAIC,8BAAY,cAAc,GAAG,SAAS;GAC3C,MAAM,WAAW,CAAC,uBAAuB,aAAa,KAAK;AAC3D,UACE,2CAAC;IAEC,IAAI,KAAK;IACT,QAAQ,KAAK;IACb,WAAU;cAEV,2CAACC;KACC,MAAM,KAAK;KACX,eAAe,KAAK;KACpB,OAAO;KACP,QAAQ;MACR;MAVG,KAAK,KAWI;IAElB,EACF,2CAACA;GACC,MAAK;GACL,eAAeC,wBAAU,cAAc;GACvC,WAAU;GACV,SAAS;GACT,QAAQ;GACR,OAAO;IACP;GACE;;AAGV,sBAAe"}

package/lib/{tab-bar-Cl1QLEj1.mjs → tab-bar-DJus-K09.mjs}

@@ -1,27 +1,17 @@
 import { internal_link_default } from "./internal-link-JeC0sVNF.mjs";
 import { THEME } from "./theme-BG6yZVj-.mjs";
-import { icon_with_text_button_default } from "./button-D_AWI7r9.mjs";
-import { external_link_default } from "./external-link-BMIFL3DE.mjs";
-import { HamburgerContext, HeaderContext } from "./context-BgdqM3zA.mjs";
-import { Hamburger } from "./icons-I7T-auOQ.mjs";
-import { selectTabBarTheme } from "./theme-CE2RkJwt.mjs";
-import { TabBarItems } from "./constants-Br6I254P.mjs";
+import { icon_with_text_button_default } from "./icon-with-text-button-CTWmp6He.mjs";
+import { external_link_default } from "./external-link-B7TYHbGX.mjs";
+import { HamburgerContext, HeaderContext } from "./context-rWQ3FoMt.mjs";
+import { Hamburger } from "./icons-CQv9VD7t.mjs";
+import { ZIndex } from "./z-index-CPbhhoLg.mjs";
+import { selectTabBarTheme } from "./theme-C942t67I.mjs";
+import { TabBarItems } from "./constants-cPryXhfO.mjs";
 import { useContext } from "react";
 import clsx from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import map from "lodash/map";
 
-//#region src/header/constants/z-index.ts
-const ZIndex = {
-	tabBarMobile: "z-10",
-	tabBarTablet: "tablet:z-3",
-	hamburger: "z-4",
-	header: "z-3",
-	topRow: "z-2",
-	channel: "z-1"
-};
-
-//#endregion
 //#region src/tab-bar/index.tsx
 const _ = { map };
 const TabBar = ({ className = "" }) => {
@@ -58,5 +48,5 @@ const TabBar = ({ className = "" }) => {
 var tab_bar_default = TabBar;
 
 //#endregion
-export { ZIndex, tab_bar_default };
-//# sourceMappingURL=tab-bar-Cl1QLEj1.mjs.map
+export { tab_bar_default };
+//# sourceMappingURL=tab-bar-DJus-K09.mjs.map

package/lib/tab-bar-DJus-K09.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-bar-DJus-K09.mjs","names":["TabBar: FC<TabBarProps>","ExternalLink","InternalLink","IconWithTextButton"],"sources":["../src/tab-bar/index.tsx"],"sourcesContent":["import { useContext, type FC } from 'react'\nimport clsx from 'clsx'\n// context\nimport { HamburgerContext, HeaderContext } from '../header/context'\n// z-index\nimport { ZIndex } from '../header/constants/z-index'\n// button\nimport { IconWithTextButton } from '../button'\n// icons\nimport { Hamburger } from '../icons'\n// theme\nimport { THEME } from '../constants/theme'\nimport { selectTabBarTheme } from './theme'\n// constants\nimport { TabBarItems } from './constants'\n// links\nimport { InternalLink, ExternalLink } from '../customized-link'\n// lodash\nimport map from 'lodash/map'\nconst _ = {\n  map,\n}\n\ntype TabBarProps = {\n  className?: string\n}\nconst TabBar: FC<TabBarProps> = ({ className = '' }) => {\n  const { theme, releaseBranch, isLinkExternal, pathname } =\n    useContext(HeaderContext)\n  const { toggleHamburger, isHamburgerMenuOpen } = useContext(HamburgerContext)\n  const { bgColor } = selectTabBarTheme(theme)\n  const iconTheme = theme === THEME.photography ? theme : THEME.normal\n  const LinkComponent = isLinkExternal ? ExternalLink : InternalLink\n  return (\n    <div\n      className={clsx(\n        'w-screen fixed left-0 bottom-0 flex justify-between px-[16px] pt-[8px] pb-[calc(8px+env(safe-area-inset-bottom,0))] shadow-[0_0_2px_rgba(0,0,0,0.15)]',\n        'desktop:hidden',\n        bgColor,\n        ZIndex.tabBarMobile,\n        ZIndex.tabBarTablet,\n        className\n      )}\n    >\n      {_.map(TabBarItems(releaseBranch), (item) => {\n        const isActive = !isHamburgerMenuOpen && pathname === item.link\n        return (\n          <LinkComponent\n            key={item.text}\n            to={item.link}\n            target={item.target}\n            className=\"flex justify-center flex-1\"\n          >\n            <IconWithTextButton\n              text={item.text}\n              iconComponent={item.icon}\n              theme={iconTheme}\n              active={isActive}\n            />\n          </LinkComponent>\n        )\n      })}\n      <IconWithTextButton\n        text=\"選單\"\n        iconComponent={Hamburger(releaseBranch)}\n        className=\"flex justify-center flex-1\"\n        onClick={toggleHamburger}\n        active={isHamburgerMenuOpen}\n        theme={iconTheme}\n      />\n    </div>\n  )\n}\nexport default TabBar\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,MAAM,IAAI,EACR,KACD;AAKD,MAAMA,UAA2B,EAAE,YAAY,SAAS;CACtD,MAAM,EAAE,OAAO,eAAe,gBAAgB,aAC5C,WAAW,cAAc;CAC3B,MAAM,EAAE,iBAAiB,wBAAwB,WAAW,iBAAiB;CAC7E,MAAM,EAAE,YAAY,kBAAkB,MAAM;CAC5C,MAAM,YAAY,UAAU,MAAM,cAAc,QAAQ,MAAM;CAC9D,MAAM,gBAAgB,iBAAiBC,wBAAeC;AACtD,QACE,qBAAC;EACC,WAAW,KACT,yJACA,kBACA,SACA,OAAO,cACP,OAAO,cACP,UACD;aAEA,EAAE,IAAI,YAAY,cAAc,GAAG,SAAS;GAC3C,MAAM,WAAW,CAAC,uBAAuB,aAAa,KAAK;AAC3D,UACE,oBAAC;IAEC,IAAI,KAAK;IACT,QAAQ,KAAK;IACb,WAAU;cAEV,oBAACC;KACC,MAAM,KAAK;KACX,eAAe,KAAK;KACpB,OAAO;KACP,QAAQ;MACR;MAVG,KAAK,KAWI;IAElB,EACF,oBAACA;GACC,MAAK;GACL,eAAe,UAAU,cAAc;GACvC,WAAU;GACV,SAAS;GACT,QAAQ;GACR,OAAO;IACP;GACE;;AAGV,sBAAe"}

package/lib/tab-item-DVJ6vhql.js

@@ -0,0 +1,37 @@
+const require_chunk = require('./chunk-BxBTb9qk.js');
+const require_text_button = require('./text-button-DlMVqsvV.js');
+const require_external_link = require('./external-link-N6pHzsZ9.js');
+const require_internal_link = require('./internal-link-CQYfLFmN.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/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_text_button.text_button_default, {
+				text,
+				active: isActive,
+				size: require_text_button.text_button_default.Size.l,
+				className: "py-[16px]"
+			})
+		})
+	});
+};
+var tab_item_default = TabItem;
+
+//#endregion
+Object.defineProperty(exports, 'tab_item_default', {
+  enumerable: true,
+  get: function () {
+    return tab_item_default;
+  }
+});
+//# sourceMappingURL=tab-item-DVJ6vhql.js.map

package/lib/tab-item-DVJ6vhql.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-item-DVJ6vhql.js","names":["TabItem: FC<TabItemProps>","ExternalLink","InternalLink","TextButton"],"sources":["../src/title-bar/components/title-tab/tab-item.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;AAYA,MAAMA,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,wCAAW,KAAK;IACtB,WAAU;KACV;IACa;GACV;;AAIb,uBAAe"}