@twreporter/react-typescript-components 0.1.0-beta.6 → 0.1.0-beta.7

package/lib/title-bar/index.mjs

@@ -1,14 +1,15 @@
-import { title_tab_default } from '../chunk-R4F4LGAY.mjs';
-export { title_tab_default as TitleTab } from '../chunk-R4F4LGAY.mjs';
-import '../chunk-GRCEZABQ.mjs';
-import { title1_default } from '../chunk-CZVB2Y6O.mjs';
-export { title1_default as Title1 } from '../chunk-CZVB2Y6O.mjs';
+import { title_tab_default } from '../chunk-7NJDHQ2X.mjs';
+export { title_tab_default as TitleTab } from '../chunk-7NJDHQ2X.mjs';
+import '../chunk-GQWO45DN.mjs';
+import '../chunk-FF422IYY.mjs';
+import { title1_default } from '../chunk-ZALXWB2J.mjs';
+export { title1_default as Title1 } from '../chunk-ZALXWB2J.mjs';
 import { title2_default } from '../chunk-6DXA3EX7.mjs';
 export { title2_default as Title2 } from '../chunk-6DXA3EX7.mjs';
-import '../chunk-GQWO45DN.mjs';
 import '../chunk-JHLT5GDV.mjs';
-import '../chunk-7DK5MO62.mjs';
-import '../chunk-QE5LVT7A.mjs';
+import '../chunk-ELECTE3D.mjs';
+import '../chunk-U22UKMAJ.mjs';
+import '../chunk-FVKIUNIP.mjs';
 import '../chunk-HQG6Q2EY.mjs';
 import '../chunk-UM7RNC2Y.mjs';
 import '../chunk-JB4TYHDE.mjs';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/title-bar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAMA,IAAO,iBAAA,GAAQ;AAAA,EACb,MAAA,EAAA,cAAA;AAAA,EACA,MAAA,EAAA,cAAA;AAAA,EACA,QAAA,EAAA;AACF","file":"index.mjs","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"]}
+{"version":3,"sources":["../../src/title-bar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAMA,IAAO,iBAAA,GAAQ;AAAA,EACb,MAAA,EAAA,cAAA;AAAA,EACA,MAAA,EAAA,cAAA;AAAA,EACA,QAAA,EAAA;AACF","file":"index.mjs","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"]}

package/lib/title-bar/stories/title-tab.stories.js

@@ -123,6 +123,59 @@ var THEME = {
   transparent: "transparent",
   index: "index"
 };
+
+// src/button/components/text-button/theme.ts
+var getDisabledContainerTheme = (theme) => {
+  return [
+    // default theme
+    "text-gray-400 hover:text-gray-400",
+    // photography & transparent theme
+    {
+      "text-gray-500 hover:text-gray-500": theme === THEME.photography || theme === THEME.transparent
+    }
+  ];
+};
+var getActiveContainerTheme = (theme, style) => {
+  return [
+    // default theme
+    {
+      "text-gray-800 hover:text-gray-800": style === 2 /* LIGHT */,
+      "text-brand-heavy hover:text-brand-heavy": style === 1 /* DARK */,
+      "text-brand-dark hover:text-brand-dark": style === 0 /* BRAND */
+    },
+    // photography theme
+    {
+      "text-gray-400 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
+      "text-supportive-pastel hover:text-supportive-pastel": theme === THEME.photography && style !== 2 /* LIGHT */
+    },
+    // transparent theme
+    {
+      "text-gray-black hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
+      "text-gray-200 hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
+    }
+  ];
+};
+var getContainerTheme = (theme, style) => {
+  return [
+    // default theme
+    {
+      "text-gray-600 hover:text-gray-800": style === 2 /* LIGHT */,
+      "text-gray-800 hover:text-brand-heavy": style === 1 /* DARK */,
+      "text-brand-heavy hover:text-brand-dark": style === 0 /* BRAND */
+    },
+    // photography
+    {
+      "text-gray-300 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
+      "text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === 1 /* DARK */,
+      "text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === 0 /* BRAND */
+    },
+    // transparent theme
+    {
+      "text-gray-800 hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
+      "text-gray-white hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
+    }
+  ];
+};
 var TextButton = ({
   text,
   leftIconComponent,
@@ -136,9 +189,13 @@ var TextButton = ({
   className = ""
 }) => {
   const TextJSX = React.useMemo(
-    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text }),
+    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text, weight: P2.Weight.bold }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text, weight: P1.Weight.bold }),
     [size, text]
   );
+  const themeClass = React.useMemo(() => {
+    const themeFunc = disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme;
+    return themeFunc(theme, style);
+  }, [disabled, active, theme, style]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -148,18 +205,7 @@ var TextButton = ({
           "cursor-default": disabled,
           "cursor-pointer": !disabled
         },
-        {
-          "text-gray-500 hover:text-gray-500": disabled && (theme === THEME.photography || theme === THEME.transparent),
-          "text-gray-400 hover:text-gray-400": disabled || theme === THEME.photography && style === 2 /* LIGHT */ && !active && !disabled,
-          "text-gray-200 hover:text-supportive-pastel": theme === THEME.photography && !active && !disabled,
-          "text-gray-300 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */ && active && !disabled,
-          "text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === 1 /* DARK */ && active && !disabled,
-          "text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === 0 /* BRAND */ && active && !disabled,
-          "text-gray-100 hover:text-gray-200": theme === THEME.transparent && !active && !disabled,
-          "text-gray-white hover:text-gray-white": theme === THEME.transparent && active && !disabled,
-          "text-gray-600 hover:text-brand-heavy": theme === THEME.normal && !active && !disabled,
-          "text-brand-heavy hover:text-brand-heavy": theme === THEME.normal && active && !disabled
-        },
+        themeClass,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex justify-center items-center", children: [

package/lib/title-bar/stories/title-tab.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/title-bar/components/title-tab/hook.ts","../../../src/customized-link/external-link.tsx","../../../src/customized-link/internal-link.tsx","../../../src/text/enum/index.ts","../../../src/text/paragraph.tsx","../../../src/button/enum.ts","../../../src/button/constant.ts","../../../src/button/components/text-button/index.tsx","../../../src/title-bar/components/title-tab/tab-item.tsx","../../../src/text/heading.tsx","../../../src/title-bar/components/title-tab/index.tsx","../../../src/title-bar/stories/title-tab.stories.tsx"],"names":["useRef","useEffect","jsx","Link","clsx","Size","Style","useMemo","jsxs","baseClass","variantClass","React","useState","createElement"],"mappings":"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","file":"title-tab.stories.js","sourcesContent":["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 type { FC } from 'react'\nimport type { CustomizedLinkProps } from './type'\n\ntype ExternalLinkProps = CustomizedLinkProps\nconst ExternalLink: FC<ExternalLinkProps> = ({\n  to,\n  target = '_self',\n  className = '',\n  children,\n}) => {\n  return (\n    <a href={to} target={target} className={className}>\n      {children}\n    </a>\n  )\n}\n\nexport default ExternalLink\n","'use client'\n\nimport Link from 'next/link'\nimport type { FC } from 'react'\nimport type { CustomizedLinkProps } from './type'\n\ntype InternalLinkProps = CustomizedLinkProps\nconst InternalLink: FC<InternalLinkProps> = ({\n  to,\n  target = '_self',\n  className = '',\n  children,\n}) => {\n  return (\n    <Link href={to} target={target} className={className}>\n      {children}\n    </Link>\n  )\n}\n\nexport default InternalLink\n","import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\n","export enum Size {\n  S,\n  L,\n}\n\nexport enum Style {\n  BRAND,\n  DARK,\n  LIGHT,\n}\n","import type { ValuesOf } from '../types'\n\nexport const THEME = {\n  normal: 'normal',\n  photography: 'photography',\n  transparent: 'transparent',\n  index: 'index',\n} as const\n\nexport type Theme = ValuesOf<typeof THEME>\n","import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// enums\nimport { Size, Style } from '../../enum'\n// type\nimport type { Theme } from '../../constant'\n// constants\nimport { THEME } from '../../constant'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof Size\n  Style: typeof Style\n  THEME: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = Size.S,\n  theme = THEME.normal,\n  style = Style.DARK,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () => (size === Size.S ? <P2 text={text} /> : <P1 text={text} />),\n    [size, text]\n  )\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        {\n          'text-gray-500 hover:text-gray-500':\n            disabled &&\n            (theme === THEME.photography || theme === THEME.transparent),\n          'text-gray-400 hover:text-gray-400':\n            disabled ||\n            (theme === THEME.photography &&\n              style === Style.LIGHT &&\n              !active &&\n              !disabled),\n          'text-gray-200 hover:text-supportive-pastel':\n            theme === THEME.photography && !active && !disabled,\n          'text-gray-300 hover:text-gray-400':\n            theme === THEME.photography &&\n            style === Style.LIGHT &&\n            active &&\n            !disabled,\n          'text-gray-white hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.DARK &&\n            active &&\n            !disabled,\n          'text-supportive-faded hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.BRAND &&\n            active &&\n            !disabled,\n          'text-gray-100 hover:text-gray-200':\n            theme === THEME.transparent && !active && !disabled,\n          'text-gray-white hover:text-gray-white':\n            theme === THEME.transparent && active && !disabled,\n          'text-gray-600 hover:text-brand-heavy':\n            theme === THEME.normal && !active && !disabled,\n          'text-brand-heavy hover:text-brand-heavy':\n            theme === THEME.normal && active && !disabled,\n        },\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animation-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === Size.S,\n              'size-[24px]': size === Size.L,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = Size\nTextButton.Style = Style\nTextButton.THEME = THEME\n\nexport default TextButton\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 React from 'react'\nimport { TYPE, type Type } from './enum'\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","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 type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport TitleTab from '../components/title-tab'\n\nconst meta = {\n  title: 'Title Bar/Title Tab',\n  component: TitleTab,\n} satisfies Meta<typeof TitleTab>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '主分類',\n    tabs: [\n      { text: '子分類1', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類2', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類3', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類4', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類5', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類6', isExternal: true, link: 'https://www.google.com' },\n    ],\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}
+{"version":3,"sources":["../../../src/title-bar/components/title-tab/hook.ts","../../../src/customized-link/external-link.tsx","../../../src/customized-link/internal-link.tsx","../../../src/text/enum/index.ts","../../../src/text/paragraph.tsx","../../../src/button/enum.ts","../../../src/button/constant.ts","../../../src/button/components/text-button/theme.ts","../../../src/button/components/text-button/index.tsx","../../../src/title-bar/components/title-tab/tab-item.tsx","../../../src/text/heading.tsx","../../../src/title-bar/components/title-tab/index.tsx","../../../src/title-bar/stories/title-tab.stories.tsx"],"names":["useRef","useEffect","jsx","Link","clsx","Size","Style","useMemo","jsxs","baseClass","variantClass","React","useState","createElement"],"mappings":"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","file":"title-tab.stories.js","sourcesContent":["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 type { FC } from 'react'\nimport type { CustomizedLinkProps } from './type'\n\ntype ExternalLinkProps = CustomizedLinkProps\nconst ExternalLink: FC<ExternalLinkProps> = ({\n  to,\n  target = '_self',\n  className = '',\n  children,\n}) => {\n  return (\n    <a href={to} target={target} className={className}>\n      {children}\n    </a>\n  )\n}\n\nexport default ExternalLink\n","'use client'\n\nimport Link from 'next/link'\nimport type { FC } from 'react'\nimport type { CustomizedLinkProps } from './type'\n\ntype InternalLinkProps = CustomizedLinkProps\nconst InternalLink: FC<InternalLinkProps> = ({\n  to,\n  target = '_self',\n  className = '',\n  children,\n}) => {\n  return (\n    <Link href={to} target={target} className={className}>\n      {children}\n    </Link>\n  )\n}\n\nexport default InternalLink\n","import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\n","export enum Size {\n  S,\n  L,\n}\n\nexport enum Style {\n  BRAND,\n  DARK,\n  LIGHT,\n}\n","import type { ValuesOf } from '../types'\n\nexport const THEME = {\n  normal: 'normal',\n  photography: 'photography',\n  transparent: 'transparent',\n  index: 'index',\n} as const\n\nexport type Theme = ValuesOf<typeof THEME>\n","// constants\nimport { THEME } from '../../constant'\n// type\nimport type { Theme } from '../../constant'\nimport type { ClassArray } from 'clsx'\n// enum\nimport { Style } from '../../enum'\n\ntype ThemeFunc = (theme: Theme, style?: Style) => ClassArray\n\nexport const getDisabledContainerTheme: ThemeFunc = (theme) => {\n  return [\n    // default theme\n    'text-gray-400 hover:text-gray-400',\n    // photography & transparent theme\n    {\n      'text-gray-500 hover:text-gray-500': theme === THEME.photography || theme === THEME.transparent,\n    }\n  ]\n}\n\nexport const getActiveContainerTheme: ThemeFunc = (theme, style) => {\n  return [\n    // default theme\n    {\n      'text-gray-800 hover:text-gray-800': style === Style.LIGHT,\n      'text-brand-heavy hover:text-brand-heavy': style === Style.DARK,\n      'text-brand-dark hover:text-brand-dark': style === Style.BRAND,\n    },\n    // photography theme\n    {\n      'text-gray-400 hover:text-gray-400': theme === THEME.photography && style === Style.LIGHT,\n      'text-supportive-pastel hover:text-supportive-pastel': theme === THEME.photography && style !== Style.LIGHT,\n    },\n    // transparent theme\n    {\n      'text-gray-black hover:text-gray-black': theme === THEME.transparent && style === Style.LIGHT,\n      'text-gray-200 hover:text-gray-200': theme === THEME.transparent && style !== Style.LIGHT,\n    },\n  ]\n}\n\nexport const getContainerTheme: ThemeFunc = (theme, style) => {\n  return [\n    // default theme\n    {\n      'text-gray-600 hover:text-gray-800': style === Style.LIGHT,\n      'text-gray-800 hover:text-brand-heavy': style === Style.DARK,\n      'text-brand-heavy hover:text-brand-dark': style === Style.BRAND,\n    },\n    // photography\n    {\n      'text-gray-300 hover:text-gray-400': theme === THEME.photography && style === Style.LIGHT,\n      'text-gray-white hover:text-supportive-pastel': theme === THEME.photography && style === Style.DARK,\n      'text-supportive-faded hover:text-supportive-pastel': theme === THEME.photography && style === Style.BRAND,\n    },\n    // transparent theme\n    {\n      'text-gray-800 hover:text-gray-black': theme === THEME.transparent && style === Style.LIGHT,\n      'text-gray-white hover:text-gray-200': theme === THEME.transparent && style !== Style.LIGHT,\n    },\n  ]\n}","import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// enums\nimport { Size, Style } from '../../enum'\n// type\nimport type { Theme } from '../../constant'\n// constants\nimport { THEME } from '../../constant'\n// utils\nimport { getContainerTheme, getActiveContainerTheme, getDisabledContainerTheme } from './theme'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof Size\n  Style: typeof Style\n  THEME: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = Size.S,\n  theme = THEME.normal,\n  style = Style.DARK,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () => (size === Size.S ? <P2 text={text} weight={P2.Weight.bold} /> : <P1 text={text} weight={P1.Weight.bold} />),\n    [size, text]\n  )\n  const themeClass = useMemo(() => {\n    const themeFunc = disabled ? getDisabledContainerTheme : (active ? getActiveContainerTheme : getContainerTheme)\n    return themeFunc(theme, style)\n  }, [disabled, active, theme, style])\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        themeClass,\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animation-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === Size.S,\n              'size-[24px]': size === Size.L,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = Size\nTextButton.Style = Style\nTextButton.THEME = THEME\n\nexport default TextButton\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 React from 'react'\nimport { TYPE, type Type } from './enum'\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","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 type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport TitleTab from '../components/title-tab'\n\nconst meta = {\n  title: 'Title Bar/Title Tab',\n  component: TitleTab,\n} satisfies Meta<typeof TitleTab>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '主分類',\n    tabs: [\n      { text: '子分類1', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類2', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類3', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類4', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類5', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類6', isExternal: true, link: 'https://www.google.com' },\n    ],\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}

package/lib/title-bar/stories/title-tab.stories.mjs

@@ -1,9 +1,10 @@
-import { title_tab_default } from '../../chunk-R4F4LGAY.mjs';
-import '../../chunk-GRCEZABQ.mjs';
+import { title_tab_default } from '../../chunk-7NJDHQ2X.mjs';
 import '../../chunk-GQWO45DN.mjs';
+import '../../chunk-FF422IYY.mjs';
 import '../../chunk-JHLT5GDV.mjs';
-import '../../chunk-7DK5MO62.mjs';
-import '../../chunk-QE5LVT7A.mjs';
+import '../../chunk-ELECTE3D.mjs';
+import '../../chunk-U22UKMAJ.mjs';
+import '../../chunk-FVKIUNIP.mjs';
 import '../../chunk-HQG6Q2EY.mjs';
 import '../../chunk-UM7RNC2Y.mjs';
 import '../../chunk-JB4TYHDE.mjs';

package/lib/title-bar/stories/title-tab.stories.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/title-bar/stories/title-tab.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAIA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,qBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAEA,IAAO,yBAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM;AAAA,MACJ,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA;AAAyB;AACnE,GACF;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD","file":"title-tab.stories.mjs","sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport TitleTab from '../components/title-tab'\n\nconst meta = {\n  title: 'Title Bar/Title Tab',\n  component: TitleTab,\n} satisfies Meta<typeof TitleTab>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '主分類',\n    tabs: [\n      { text: '子分類1', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類2', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類3', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類4', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類5', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類6', isExternal: true, link: 'https://www.google.com' },\n    ],\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}
+{"version":3,"sources":["../../../src/title-bar/stories/title-tab.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAIA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,qBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAEA,IAAO,yBAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,oBAAA;AAAA,IACP,IAAA,EAAM;AAAA,MACJ,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA,EAAyB;AAAA,MACjE,EAAE,IAAA,EAAM,qBAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,MAAM,wBAAA;AAAyB;AACnE,GACF;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD","file":"title-tab.stories.mjs","sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport TitleTab from '../components/title-tab'\n\nconst meta = {\n  title: 'Title Bar/Title Tab',\n  component: TitleTab,\n} satisfies Meta<typeof TitleTab>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '主分類',\n    tabs: [\n      { text: '子分類1', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類2', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類3', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類4', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類5', isExternal: true, link: 'https://www.google.com' },\n      { text: '子分類6', isExternal: true, link: 'https://www.google.com' },\n    ],\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}

package/lib/title-bar/stories/title1.stories.js

@@ -111,7 +111,7 @@ var Title1 = ({ title, subtitle = "", className = "" }) => {
       "div",
       {
         className: clsx3__default.default(
-          "w-full h-[1px] bg-gray-800 mt-[8px]",
+          "w-full h-[1px] bg-gray-300 mt-[8px]",
           "desktop:mt-[16px]"
         )
       }

package/lib/title-bar/stories/title1.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/text/enum/index.ts","../../../src/text/heading.tsx","../../../src/text/paragraph.tsx","../../../src/title-bar/components/title1.tsx","../../../src/title-bar/stories/title1.stories.ts"],"names":["React","clsx","baseClass","variantClass","jsx","jsxs"],"mappings":"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","file":"title1.stories.js","sourcesContent":["import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './enum'\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","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\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-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n","import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title1 from '../components/title1'\n\nconst meta = {\n  title: 'Title Bar/Title1',\n  component: Title1,\n} satisfies Meta<typeof Title1>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const TagBar: Story = {\n  args: {\n    title: '#報導者',\n  },\n  parameters: { controls: { exclude: ['subtitle', 'className'] } },\n}\n\nexport const BookmarkBar: Story = {\n  args: {\n    title: '我的書籤',\n    subtitle: '全部 55',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}
+{"version":3,"sources":["../../../src/text/enum/index.ts","../../../src/text/heading.tsx","../../../src/text/paragraph.tsx","../../../src/title-bar/components/title1.tsx","../../../src/title-bar/stories/title1.stories.ts"],"names":["React","clsx","baseClass","variantClass","jsx","jsxs"],"mappings":"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","file":"title1.stories.js","sourcesContent":["import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './enum'\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","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\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 type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title1 from '../components/title1'\n\nconst meta = {\n  title: 'Title Bar/Title1',\n  component: Title1,\n} satisfies Meta<typeof Title1>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: '標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const TagBar: Story = {\n  args: {\n    title: '#報導者',\n  },\n  parameters: { controls: { exclude: ['subtitle', 'className'] } },\n}\n\nexport const BookmarkBar: Story = {\n  args: {\n    title: '我的書籤',\n    subtitle: '全部 55',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}

package/lib/title-bar/stories/title1.stories.mjs

@@ -1,4 +1,4 @@
-import { title1_default } from '../../chunk-CZVB2Y6O.mjs';
+import { title1_default } from '../../chunk-ZALXWB2J.mjs';
 import '../../chunk-JHLT5GDV.mjs';
 import '../../chunk-HQG6Q2EY.mjs';
 import '../../chunk-UM7RNC2Y.mjs';

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

@@ -148,6 +148,59 @@ var THEME = {
   transparent: "transparent",
   index: "index"
 };
+
+// src/button/components/text-button/theme.ts
+var getDisabledContainerTheme = (theme) => {
+  return [
+    // default theme
+    "text-gray-400 hover:text-gray-400",
+    // photography & transparent theme
+    {
+      "text-gray-500 hover:text-gray-500": theme === THEME.photography || theme === THEME.transparent
+    }
+  ];
+};
+var getActiveContainerTheme = (theme, style) => {
+  return [
+    // default theme
+    {
+      "text-gray-800 hover:text-gray-800": style === 2 /* LIGHT */,
+      "text-brand-heavy hover:text-brand-heavy": style === 1 /* DARK */,
+      "text-brand-dark hover:text-brand-dark": style === 0 /* BRAND */
+    },
+    // photography theme
+    {
+      "text-gray-400 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
+      "text-supportive-pastel hover:text-supportive-pastel": theme === THEME.photography && style !== 2 /* LIGHT */
+    },
+    // transparent theme
+    {
+      "text-gray-black hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
+      "text-gray-200 hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
+    }
+  ];
+};
+var getContainerTheme = (theme, style) => {
+  return [
+    // default theme
+    {
+      "text-gray-600 hover:text-gray-800": style === 2 /* LIGHT */,
+      "text-gray-800 hover:text-brand-heavy": style === 1 /* DARK */,
+      "text-brand-heavy hover:text-brand-dark": style === 0 /* BRAND */
+    },
+    // photography
+    {
+      "text-gray-300 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */,
+      "text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === 1 /* DARK */,
+      "text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === 0 /* BRAND */
+    },
+    // transparent theme
+    {
+      "text-gray-800 hover:text-gray-black": theme === THEME.transparent && style === 2 /* LIGHT */,
+      "text-gray-white hover:text-gray-200": theme === THEME.transparent && style !== 2 /* LIGHT */
+    }
+  ];
+};
 var TextButton = ({
   text,
   leftIconComponent,
@@ -161,9 +214,13 @@ var TextButton = ({
   className = ""
 }) => {
   const TextJSX = React.useMemo(
-    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text }),
+    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text, weight: P2.Weight.bold }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text, weight: P1.Weight.bold }),
     [size, text]
   );
+  const themeClass = React.useMemo(() => {
+    const themeFunc = disabled ? getDisabledContainerTheme : active ? getActiveContainerTheme : getContainerTheme;
+    return themeFunc(theme, style);
+  }, [disabled, active, theme, style]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -173,18 +230,7 @@ var TextButton = ({
           "cursor-default": disabled,
           "cursor-pointer": !disabled
         },
-        {
-          "text-gray-500 hover:text-gray-500": disabled && (theme === THEME.photography || theme === THEME.transparent),
-          "text-gray-400 hover:text-gray-400": disabled || theme === THEME.photography && style === 2 /* LIGHT */ && !active && !disabled,
-          "text-gray-200 hover:text-supportive-pastel": theme === THEME.photography && !active && !disabled,
-          "text-gray-300 hover:text-gray-400": theme === THEME.photography && style === 2 /* LIGHT */ && active && !disabled,
-          "text-gray-white hover:text-supportive-pastel": theme === THEME.photography && style === 1 /* DARK */ && active && !disabled,
-          "text-supportive-faded hover:text-supportive-pastel": theme === THEME.photography && style === 0 /* BRAND */ && active && !disabled,
-          "text-gray-100 hover:text-gray-200": theme === THEME.transparent && !active && !disabled,
-          "text-gray-white hover:text-gray-white": theme === THEME.transparent && active && !disabled,
-          "text-gray-600 hover:text-brand-heavy": theme === THEME.normal && !active && !disabled,
-          "text-brand-heavy hover:text-brand-heavy": theme === THEME.normal && active && !disabled
-        },
+        themeClass,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex justify-center items-center", children: [

package/lib/title-bar/stories/title2.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/text/enum/index.ts","../../../src/text/heading.tsx","../../../src/text/paragraph.tsx","../../../src/title-bar/components/title2.tsx","../../../src/button/enum.ts","../../../src/button/constant.ts","../../../src/button/components/text-button/index.tsx","../../../src/title-bar/stories/title2.stories.tsx"],"names":["React","clsx","baseClass","variantClass","jsx","jsxs","Size","Style","useMemo"],"mappings":"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","file":"title2.stories.js","sourcesContent":["import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './enum'\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","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\n","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","export enum Size {\n  S,\n  L,\n}\n\nexport enum Style {\n  BRAND,\n  DARK,\n  LIGHT,\n}\n","import type { ValuesOf } from '../types'\n\nexport const THEME = {\n  normal: 'normal',\n  photography: 'photography',\n  transparent: 'transparent',\n  index: 'index',\n} as const\n\nexport type Theme = ValuesOf<typeof THEME>\n","import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// enums\nimport { Size, Style } from '../../enum'\n// type\nimport type { Theme } from '../../constant'\n// constants\nimport { THEME } from '../../constant'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof Size\n  Style: typeof Style\n  THEME: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = Size.S,\n  theme = THEME.normal,\n  style = Style.DARK,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () => (size === Size.S ? <P2 text={text} /> : <P1 text={text} />),\n    [size, text]\n  )\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        {\n          'text-gray-500 hover:text-gray-500':\n            disabled &&\n            (theme === THEME.photography || theme === THEME.transparent),\n          'text-gray-400 hover:text-gray-400':\n            disabled ||\n            (theme === THEME.photography &&\n              style === Style.LIGHT &&\n              !active &&\n              !disabled),\n          'text-gray-200 hover:text-supportive-pastel':\n            theme === THEME.photography && !active && !disabled,\n          'text-gray-300 hover:text-gray-400':\n            theme === THEME.photography &&\n            style === Style.LIGHT &&\n            active &&\n            !disabled,\n          'text-gray-white hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.DARK &&\n            active &&\n            !disabled,\n          'text-supportive-faded hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.BRAND &&\n            active &&\n            !disabled,\n          'text-gray-100 hover:text-gray-200':\n            theme === THEME.transparent && !active && !disabled,\n          'text-gray-white hover:text-gray-white':\n            theme === THEME.transparent && active && !disabled,\n          'text-gray-600 hover:text-brand-heavy':\n            theme === THEME.normal && !active && !disabled,\n          'text-brand-heavy hover:text-brand-heavy':\n            theme === THEME.normal && active && !disabled,\n        },\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animation-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === Size.S,\n              'size-[24px]': size === Size.L,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = Size\nTextButton.Style = Style\nTextButton.THEME = THEME\n\nexport default TextButton\n","import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title2 from '../components/title2'\nimport { TextButton } from '../../button'\n\nconst meta = {\n  title: 'Title Bar/Title2',\n  component: Title2,\n} satisfies Meta<typeof Title2>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const WithButton: Story = {\n  render: (args) => {\n    const buttonJSX = <TextButton text=\"NOT RWD 按鈕\" />\n    return <Title2 {...args} renderButton={buttonJSX} />\n  },\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className', 'renderButton'] } },\n}\n"]}
+{"version":3,"sources":["../../../src/text/enum/index.ts","../../../src/text/heading.tsx","../../../src/text/paragraph.tsx","../../../src/title-bar/components/title2.tsx","../../../src/button/enum.ts","../../../src/button/constant.ts","../../../src/button/components/text-button/theme.ts","../../../src/button/components/text-button/index.tsx","../../../src/title-bar/stories/title2.stories.tsx"],"names":["React","clsx","baseClass","variantClass","jsx","jsxs","Size","Style","useMemo"],"mappings":";;;;;;;;;;;;;;;;AAEO,IAAM,IAAA,GAAO;AAAA,EAClB,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAIO,IAAM,MAAA,GAAS;AAAA,EACpB,UAAA,EAAY,aAAA;AAAA,EACZ,MAAA,EAAQ,QAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;;;ACHA,IAAM,SAAA,GAAY,WAAA;AAElB,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,+CAAA;AAAA,EACJ,EAAA,EAAI,+CAAA;AAAA,EACJ,EAAA,EAAI,+CAAA;AAAA,EACJ,EAAA,EAAI,+CAAA;AAAA,EACJ,EAAA,EAAI,+CAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,cAAA,GAAiB,CAAC,OAAA,KAAuC;AAC7D,EAAA,MAAM,YAA4D,CAAC;AAAA,IACjE,IAAA,GAAO,EAAA;AAAA,IACP,OAAO,IAAA,CAAK,OAAA;AAAA,IACZ,SAAA,GAAY,EAAA;AAAA,IACZ,GAAG;AAAA,GACL,KAAM;AACJ,IAAA,MAAM,OAAA,GAAU,QAAQ,WAAA,EAAY;AACpC,IAAA,MAAM,UAAA,GAAa,IAAA,KAAS,IAAA,CAAK,OAAA,GAAU,YAAA,GAAe,cAAA;AAC1D,IAAA,OAAOA,sBAAA,CAAM,aAAA;AAAA,MACX,OAAA;AAAA,MACA;AAAA,QACE,SAAA,EAAWC,sBAAA;AAAA,UACT,UAAA;AAAA,UACA,SAAA;AAAA,UACA,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA;AACA,EAAA,SAAA,CAAU,WAAA,GAAc,OAAA;AACxB,EAAA,SAAA,CAAU,IAAA,GAAO,IAAA;AACjB,EAAA,OAAO,SAAA;AACT,CAAA;AAEW,eAAe,IAAI;AACnB,eAAe,IAAI;AACnB,eAAe,IAAI;AACnB,eAAe,IAAI;AAC9B,IAAM,EAAA,GAAK,eAAe,IAAI,CAAA;AACnB,eAAe,IAAI;AC5C9B,IAAMC,UAAAA,GAAY,mDAAA;AAElB,IAAMC,aAAAA,GAAe;AAAA,EACnB,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,gBAAA,GAAmB,CAAC,OAAA,KAAuC;AAC/D,EAAA,MAAM,YAAkE,CAAC;AAAA,IACvE,IAAA,GAAO,EAAA;AAAA,IACP,SAAS,MAAA,CAAO,MAAA;AAAA,IAChB,SAAA,GAAY,EAAA;AAAA,IACZ,GAAG;AAAA,GACL,qBACEC,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWH,sBAAAA;AAAA,QACTC,UAAAA;AAAA,QACAC,cAAa,OAAO,CAAA;AAAA,QACpB,QAAQ,MAAM,CAAA,CAAA;AAAA,QACd;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEF,EAAA,SAAA,CAAU,WAAA,GAAc,OAAA;AACxB,EAAA,SAAA,CAAU,MAAA,GAAS,MAAA;AACnB,EAAA,OAAO,SAAA;AACT,CAAA;AAEA,IAAM,EAAA,GAAK,iBAAiB,IAAI,CAAA;AAChC,IAAM,EAAA,GAAK,iBAAiB,IAAI,CAAA;AACrB,iBAAiB,IAAI;AACrB,iBAAiB,IAAI;ACjChC,IAAM,SAAgC,CAAC;AAAA,EACrC,KAAA;AAAA,EACA,QAAA,GAAW,EAAA;AAAA,EACX,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,uCACG,KAAA,EAAA,EAAI,SAAA,EAAWF,sBAAAA,CAAK,+BAAA,EAAiC,SAAS,CAAA,EAC7D,QAAA,EAAA;AAAA,oBAAAI,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+BAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWJ,sBAAAA,CAAK,gCAAgC,CAAA,EACnD,QAAA,EAAA;AAAA,wBAAAG,cAAAA,CAAC,EAAA,EAAA,EAAG,SAAA,EAAU,eAAA,EAAgB,MAAM,KAAA,EAAO,CAAA;AAAA,QAC1C,QAAA,mBAAWA,cAAAA,CAAC,EAAA,EAAA,EAAG,WAAU,eAAA,EAAgB,IAAA,EAAM,UAAU,CAAA,GAAK;AAAA,OAAA,EACjE,CAAA;AAAA,MACC,YAAA,IAAgB;AAAA,KAAA,EACnB,CAAA;AAAA,oBACAA,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWH,sBAAAA;AAAA,UACT,qCAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ,MAAA;;;ACtCR,IAAK,IAAA,qBAAAK,KAAAA,KAAL;AACL,EAAAA,KAAAA,CAAAA,KAAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA;AACA,EAAAA,KAAAA,CAAAA,KAAAA,CAAA,GAAA,CAAA,GAAA,CAAA,CAAA,GAAA,GAAA;AAFU,EAAA,OAAAA,KAAAA;AAAA,CAAA,EAAA,IAAA,IAAA,EAAA,CAAA;AAKL,IAAK,KAAA,qBAAAC,MAAAA,KAAL;AACL,EAAAA,MAAAA,CAAAA,MAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,MAAAA,CAAAA,MAAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,MAAAA,CAAAA,MAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AAHU,EAAA,OAAAA,MAAAA;AAAA,CAAA,EAAA,KAAA,IAAA,EAAA,CAAA;;;ACHL,IAAM,KAAA,GAAQ;AAAA,EACnB,MAAA,EAAQ,QAAA;AAAA,EACR,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,aAAA;AAAA,EACb,KAAA,EAAO;AACT,CAAA;;;ACGO,IAAM,yBAAA,GAAuC,CAAC,KAAA,KAAU;AAC7D,EAAA,OAAO;AAAA;AAAA,IAEL,mCAAA;AAAA;AAAA,IAEA;AAAA,MACE,mCAAA,EAAqC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,UAAU,KAAA,CAAM;AAAA;AACtF,GACF;AACF,CAAA;AAEO,IAAM,uBAAA,GAAqC,CAAC,KAAA,EAAO,KAAA,KAAU;AAClE,EAAA,OAAO;AAAA;AAAA,IAEL;AAAA,MACE,mCAAA,EAAqC,KAAA,KAAA,CAAA;AAAA,MACrC,yCAAA,EAA2C,KAAA,KAAA,CAAA;AAAA,MAC3C,uCAAA,EAAyC,KAAA,KAAA,CAAA;AAAA,KAC3C;AAAA;AAAA,IAEA;AAAA,MACE,mCAAA,EAAqC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,MACpE,qDAAA,EAAuD,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,KACxF;AAAA;AAAA,IAEA;AAAA,MACE,uCAAA,EAAyC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,MACxE,mCAAA,EAAqC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA;AACtE,GACF;AACF,CAAA;AAEO,IAAM,iBAAA,GAA+B,CAAC,KAAA,EAAO,KAAA,KAAU;AAC5D,EAAA,OAAO;AAAA;AAAA,IAEL;AAAA,MACE,mCAAA,EAAqC,KAAA,KAAA,CAAA;AAAA,MACrC,sCAAA,EAAwC,KAAA,KAAA,CAAA;AAAA,MACxC,wCAAA,EAA0C,KAAA,KAAA,CAAA;AAAA,KAC5C;AAAA;AAAA,IAEA;AAAA,MACE,mCAAA,EAAqC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,MACpE,8CAAA,EAAgD,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,MAC/E,oDAAA,EAAsD,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,KACvF;AAAA;AAAA,IAEA;AAAA,MACE,qCAAA,EAAuC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA,MACtE,qCAAA,EAAuC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,KAAA,KAAA,CAAA;AAAA;AACxE,GACF;AACF,CAAA;ACrCA,IAAM,aAIF,CAAC;AAAA,EACH,IAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,IAAA,GAAA,CAAA;AAAA,EACA,QAAQ,KAAA,CAAM,MAAA;AAAA,EACd,KAAA,GAAA,CAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUC,aAAA;AAAA,IACd,MAAO,IAAA,KAAA,CAAA,2BAAkBJ,eAAC,EAAA,EAAA,EAAG,IAAA,EAAY,QAAQ,EAAA,CAAG,MAAA,CAAO,IAAA,EAAM,CAAA,mBAAKA,cAAAA,CAAC,EAAA,EAAA,EAAG,MAAY,MAAA,EAAQ,EAAA,CAAG,OAAO,IAAA,EAAM,CAAA;AAAA,IAC9G,CAAC,MAAM,IAAI;AAAA,GACb;AACA,EAAA,MAAM,UAAA,GAAaI,cAAQ,MAAM;AAC/B,IAAA,MAAM,SAAA,GAAY,QAAA,GAAW,yBAAA,GAA6B,MAAA,GAAS,uBAAA,GAA0B,iBAAA;AAC7F,IAAA,OAAO,SAAA,CAAU,OAAO,KAAK,CAAA;AAAA,EAC/B,GAAG,CAAC,QAAA,EAAU,MAAA,EAAQ,KAAA,EAAO,KAAK,CAAC,CAAA;AAEnC,EAAA,uBACEJ,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWH,sBAAAA;AAAA,QACT,mBAAA;AAAA,QACA;AAAA,UACE,gBAAA,EAAkB,QAAA;AAAA,UAClB,kBAAkB,CAAC;AAAA,SACrB;AAAA,QACA,UAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAI,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWJ,uBAAK,kCAAA,EAAoC;AAAA,cAClD,WAAA,EAAa,OAAA;AAAA,cACb,eAAe,CAAC;AAAA,aACjB,CAAA;AAAA,YAED,QAAA,EAAA;AAAA,8BAAAG,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EAA8B,QAAA,EAAA,iBAAA,EAAkB,CAAA;AAAA,cAC9D,OAAA;AAAA,8BACDA,cAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAA8B,QAAA,EAAA,kBAAA,EAAmB;AAAA;AAAA;AAAA,SAClE;AAAA,wBACAA,cAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWH,sBAAAA;AAAA,cACT,iDAAA;AAAA,cACA,uEAAA;AAAA,cACA;AAAA,gBACE,aAAA,EAAe,IAAA,KAAA,CAAA;AAAA,gBACf,aAAA,EAAe,IAAA,KAAA,CAAA;AAAA,eACjB;AAAA,cACA;AAAA,gBACE,aAAa,CAAC,OAAA;AAAA,gBACd,aAAA,EAAe;AAAA;AACjB;AACF;AAAA;AACF,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AACA,UAAA,CAAW,IAAA,GAAO,IAAA;AAClB,UAAA,CAAW,KAAA,GAAQ,KAAA;AACnB,UAAA,CAAW,KAAA,GAAQ,KAAA;AAEnB,IAAO,mBAAA,GAAQ,UAAA;AC1Ff,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,kBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAEA,IAAO,sBAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD;AAEO,IAAM,UAAA,GAAoB;AAAA,EAC/B,MAAA,EAAQ,CAAC,IAAA,KAAS;AAChB,IAAA,MAAM,SAAA,mBAAYG,cAAAA,CAAC,mBAAA,EAAA,EAAW,MAAK,sBAAA,EAAa,CAAA;AAChD,IAAA,uBAAOA,cAAAA,CAAC,cAAA,EAAA,EAAQ,GAAG,IAAA,EAAM,cAAc,SAAA,EAAW,CAAA;AAAA,EACpD,CAAA;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAA,EAAa,cAAc,CAAA,EAAE;AACnE","file":"title2.stories.js","sourcesContent":["import type { ValuesOf } from '../../types'\n\nexport const TYPE = {\n  default: 'default',\n  article: 'article',\n} as const\n\nexport type Type = ValuesOf<typeof TYPE>\n\nexport const WEIGHT = {\n  extraLight: 'extra-light',\n  normal: 'normal',\n  bold: 'bold',\n} as const\n\nexport type Weight = ValuesOf<typeof WEIGHT>\n","import clsx from 'clsx'\nimport React from 'react'\nimport { TYPE, type Type } from './enum'\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","import clsx from 'clsx'\nimport type React from 'react'\nimport { WEIGHT, type Weight } from './enum'\n\ntype ParagraphProps = React.HTMLAttributes<HTMLParagraphElement> & {\n  text?: string\n  weight?: Weight\n  className?: string\n}\n\nconst baseClass = 'font-default leading-[150%] flex items-center m-0'\n\nconst variantClass = {\n  P1: 'text-[16px]',\n  P2: 'text-[14px]',\n  P3: 'text-[12px]',\n  P4: 'text-[10px]',\n}\n\nconst ParagraphVariant = (variant: keyof typeof variantClass) => {\n  const Component: React.FC<ParagraphProps> & { Weight: typeof WEIGHT } = ({\n    text = '',\n    weight = WEIGHT.normal,\n    className = '',\n    ...props\n  }) => (\n    <p\n      className={clsx(\n        baseClass,\n        variantClass[variant],\n        `font-${weight}`,\n        className\n      )}\n      {...props}\n    >\n      {text}\n    </p>\n  )\n  Component.displayName = variant\n  Component.Weight = WEIGHT\n  return Component\n}\n\nconst P1 = ParagraphVariant('P1')\nconst P2 = ParagraphVariant('P2')\nconst P3 = ParagraphVariant('P3')\nconst P4 = ParagraphVariant('P4')\n\nexport { P1, P2, P3, P4 }\n","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","export enum Size {\n  S,\n  L,\n}\n\nexport enum Style {\n  BRAND,\n  DARK,\n  LIGHT,\n}\n","import type { ValuesOf } from '../types'\n\nexport const THEME = {\n  normal: 'normal',\n  photography: 'photography',\n  transparent: 'transparent',\n  index: 'index',\n} as const\n\nexport type Theme = ValuesOf<typeof THEME>\n","// constants\nimport { THEME } from '../../constant'\n// type\nimport type { Theme } from '../../constant'\nimport type { ClassArray } from 'clsx'\n// enum\nimport { Style } from '../../enum'\n\ntype ThemeFunc = (theme: Theme, style?: Style) => ClassArray\n\nexport const getDisabledContainerTheme: ThemeFunc = (theme) => {\n  return [\n    // default theme\n    'text-gray-400 hover:text-gray-400',\n    // photography & transparent theme\n    {\n      'text-gray-500 hover:text-gray-500': theme === THEME.photography || theme === THEME.transparent,\n    }\n  ]\n}\n\nexport const getActiveContainerTheme: ThemeFunc = (theme, style) => {\n  return [\n    // default theme\n    {\n      'text-gray-800 hover:text-gray-800': style === Style.LIGHT,\n      'text-brand-heavy hover:text-brand-heavy': style === Style.DARK,\n      'text-brand-dark hover:text-brand-dark': style === Style.BRAND,\n    },\n    // photography theme\n    {\n      'text-gray-400 hover:text-gray-400': theme === THEME.photography && style === Style.LIGHT,\n      'text-supportive-pastel hover:text-supportive-pastel': theme === THEME.photography && style !== Style.LIGHT,\n    },\n    // transparent theme\n    {\n      'text-gray-black hover:text-gray-black': theme === THEME.transparent && style === Style.LIGHT,\n      'text-gray-200 hover:text-gray-200': theme === THEME.transparent && style !== Style.LIGHT,\n    },\n  ]\n}\n\nexport const getContainerTheme: ThemeFunc = (theme, style) => {\n  return [\n    // default theme\n    {\n      'text-gray-600 hover:text-gray-800': style === Style.LIGHT,\n      'text-gray-800 hover:text-brand-heavy': style === Style.DARK,\n      'text-brand-heavy hover:text-brand-dark': style === Style.BRAND,\n    },\n    // photography\n    {\n      'text-gray-300 hover:text-gray-400': theme === THEME.photography && style === Style.LIGHT,\n      'text-gray-white hover:text-supportive-pastel': theme === THEME.photography && style === Style.DARK,\n      'text-supportive-faded hover:text-supportive-pastel': theme === THEME.photography && style === Style.BRAND,\n    },\n    // transparent theme\n    {\n      'text-gray-800 hover:text-gray-black': theme === THEME.transparent && style === Style.LIGHT,\n      'text-gray-white hover:text-gray-200': theme === THEME.transparent && style !== Style.LIGHT,\n    },\n  ]\n}","import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// enums\nimport { Size, Style } from '../../enum'\n// type\nimport type { Theme } from '../../constant'\n// constants\nimport { THEME } from '../../constant'\n// utils\nimport { getContainerTheme, getActiveContainerTheme, getDisabledContainerTheme } from './theme'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof Size\n  Style: typeof Style\n  THEME: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = Size.S,\n  theme = THEME.normal,\n  style = Style.DARK,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () => (size === Size.S ? <P2 text={text} weight={P2.Weight.bold} /> : <P1 text={text} weight={P1.Weight.bold} />),\n    [size, text]\n  )\n  const themeClass = useMemo(() => {\n    const themeFunc = disabled ? getDisabledContainerTheme : (active ? getActiveContainerTheme : getContainerTheme)\n    return themeFunc(theme, style)\n  }, [disabled, active, theme, style])\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        themeClass,\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animation-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === Size.S,\n              'size-[24px]': size === Size.L,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = Size\nTextButton.Style = Style\nTextButton.THEME = THEME\n\nexport default TextButton\n","import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title2 from '../components/title2'\nimport { TextButton } from '../../button'\n\nconst meta = {\n  title: 'Title Bar/Title2',\n  component: Title2,\n} satisfies Meta<typeof Title2>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const WithButton: Story = {\n  render: (args) => {\n    const buttonJSX = <TextButton text=\"NOT RWD 按鈕\" />\n    return <Title2 {...args} renderButton={buttonJSX} />\n  },\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className', 'renderButton'] } },\n}\n"]}

package/lib/title-bar/stories/title2.stories.mjs

@@ -1,7 +1,8 @@
 import { title2_default } from '../../chunk-6DXA3EX7.mjs';
 import '../../chunk-JHLT5GDV.mjs';
-import '../../chunk-7DK5MO62.mjs';
-import { text_button_default } from '../../chunk-QE5LVT7A.mjs';
+import '../../chunk-ELECTE3D.mjs';
+import { text_button_default } from '../../chunk-U22UKMAJ.mjs';
+import '../../chunk-FVKIUNIP.mjs';
 import '../../chunk-HQG6Q2EY.mjs';
 import '../../chunk-UM7RNC2Y.mjs';
 import '../../chunk-JB4TYHDE.mjs';

package/lib/title-bar/stories/title2.stories.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/title-bar/stories/title2.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAKA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,kBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAEA,IAAO,sBAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD;AAEO,IAAM,UAAA,GAAoB;AAAA,EAC/B,MAAA,EAAQ,CAAC,IAAA,KAAS;AAChB,IAAA,MAAM,SAAA,mBAAY,GAAA,CAAC,mBAAA,EAAA,EAAW,IAAA,EAAK,sBAAA,EAAa,CAAA;AAChD,IAAA,uBAAO,GAAA,CAAC,cAAA,EAAA,EAAQ,GAAG,IAAA,EAAM,cAAc,SAAA,EAAW,CAAA;AAAA,EACpD,CAAA;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAA,EAAa,cAAc,CAAA,EAAE;AACnE","file":"title2.stories.mjs","sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title2 from '../components/title2'\nimport { TextButton } from '../../button'\n\nconst meta = {\n  title: 'Title Bar/Title2',\n  component: Title2,\n} satisfies Meta<typeof Title2>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const WithButton: Story = {\n  render: (args) => {\n    const buttonJSX = <TextButton text=\"NOT RWD 按鈕\" />\n    return <Title2 {...args} renderButton={buttonJSX} />\n  },\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className', 'renderButton'] } },\n}\n"]}
+{"version":3,"sources":["../../../src/title-bar/stories/title2.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAKA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,kBAAA;AAAA,EACP,SAAA,EAAW;AACb,CAAA;AAEA,IAAO,sBAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD;AAEO,IAAM,UAAA,GAAoB;AAAA,EAC/B,MAAA,EAAQ,CAAC,IAAA,KAAS;AAChB,IAAA,MAAM,SAAA,mBAAY,GAAA,CAAC,mBAAA,EAAA,EAAW,IAAA,EAAK,sBAAA,EAAa,CAAA;AAChD,IAAA,uBAAO,GAAA,CAAC,cAAA,EAAA,EAAQ,GAAG,IAAA,EAAM,cAAc,SAAA,EAAW,CAAA;AAAA,EACpD,CAAA;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,KAAA,EAAO,kBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAA,EAAa,cAAc,CAAA,EAAE;AACnE","file":"title2.stories.mjs","sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite'\n// components\nimport Title2 from '../components/title2'\nimport { TextButton } from '../../button'\n\nconst meta = {\n  title: 'Title Bar/Title2',\n  component: Title2,\n} satisfies Meta<typeof Title2>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n\nexport const WithButton: Story = {\n  render: (args) => {\n    const buttonJSX = <TextButton text=\"NOT RWD 按鈕\" />\n    return <Title2 {...args} renderButton={buttonJSX} />\n  },\n  args: {\n    title: 'RWD 標題',\n    subtitle: '副標',\n  },\n  parameters: { controls: { exclude: ['className', 'renderButton'] } },\n}\n"]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "React components using TypeScript and Tailwind CSS",
   "author": "twreporter <developer@twreporter.org>",
   "license": "MIT",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "type": "commonjs",
   "scripts": {
     "clean": "rm -rf lib",
@@ -44,5 +44,5 @@
     "url": "git+https://github.com/twreporter/www-public-monorepo.git",
     "directory": "packages/react-typescript-components"
   },
-  "gitHead": "e6324b04c86a7c94d16137e9198358f0c26e2888"
+  "gitHead": "80c85301804c9dae5cdb00017c32c8f895e672da"
 }

package/lib/chunk-7DK5MO62.mjs

@@ -1,8 +0,0 @@
-import { text_button_default } from './chunk-QE5LVT7A.mjs';
-
-// src/button/index.ts
-var button_default = { TextButton: text_button_default };
-
-export { button_default };
-//# sourceMappingURL=chunk-7DK5MO62.mjs.map
-//# sourceMappingURL=chunk-7DK5MO62.mjs.map

package/lib/chunk-QE5LVT7A.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/button/components/text-button/index.tsx"],"names":[],"mappings":";;;;;;;AAuBA,IAAM,aAIF,CAAC;AAAA,EACH,IAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,IAAA,GAAA,CAAA;AAAA,EACA,QAAQ,KAAA,CAAM,MAAA;AAAA,EACd,KAAA,GAAA,CAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACd,MAAO,qCAAkB,GAAA,CAAC,EAAA,EAAA,EAAG,MAAY,CAAA,mBAAK,GAAA,CAAC,MAAG,IAAA,EAAY,CAAA;AAAA,IAC9D,CAAC,MAAM,IAAI;AAAA,GACb;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,mBAAA;AAAA,QACA;AAAA,UACE,gBAAA,EAAkB,QAAA;AAAA,UAClB,kBAAkB,CAAC;AAAA,SACrB;AAAA,QACA;AAAA,UACE,qCACE,QAAA,KACC,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,UAAU,KAAA,CAAM,WAAA,CAAA;AAAA,UAClD,mCAAA,EACE,YACC,KAAA,KAAU,KAAA,CAAM,eACf,KAAA,KAAA,CAAA,gBACA,CAAC,UACD,CAAC,QAAA;AAAA,UACL,8CACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,CAAC,UAAU,CAAC,QAAA;AAAA,UAC7C,qCACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAChB,KAAA,KAAA,CAAA,gBACA,UACA,CAAC,QAAA;AAAA,UACH,gDACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAChB,KAAA,KAAA,CAAA,eACA,UACA,CAAC,QAAA;AAAA,UACH,sDACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAChB,KAAA,KAAA,CAAA,gBACA,UACA,CAAC,QAAA;AAAA,UACH,qCACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,CAAC,UAAU,CAAC,QAAA;AAAA,UAC7C,uCAAA,EACE,KAAA,KAAU,KAAA,CAAM,WAAA,IAAe,UAAU,CAAC,QAAA;AAAA,UAC5C,wCACE,KAAA,KAAU,KAAA,CAAM,MAAA,IAAU,CAAC,UAAU,CAAC,QAAA;AAAA,UACxC,yCAAA,EACE,KAAA,KAAU,KAAA,CAAM,MAAA,IAAU,UAAU,CAAC;AAAA,SACzC;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,KAAK,kCAAA,EAAoC;AAAA,cAClD,WAAA,EAAa,OAAA;AAAA,cACb,eAAe,CAAC;AAAA,aACjB,CAAA;AAAA,YAED,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EAA8B,QAAA,EAAA,iBAAA,EAAkB,CAAA;AAAA,cAC9D,OAAA;AAAA,8BACD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EAA8B,QAAA,EAAA,kBAAA,EAAmB;AAAA;AAAA;AAAA,SAClE;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,iDAAA;AAAA,cACA,uEAAA;AAAA,cACA;AAAA,gBACE,aAAA,EAAe,IAAA,KAAA,CAAA;AAAA,gBACf,aAAA,EAAe,IAAA,KAAA,CAAA;AAAA,eACjB;AAAA,cACA;AAAA,gBACE,aAAa,CAAC,OAAA;AAAA,gBACd,aAAA,EAAe;AAAA;AACjB;AACF;AAAA;AACF,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AACA,UAAA,CAAW,IAAA,GAAO,IAAA;AAClB,UAAA,CAAW,KAAA,GAAQ,KAAA;AACnB,UAAA,CAAW,KAAA,GAAQ,KAAA;AAEnB,IAAO,mBAAA,GAAQ","file":"chunk-QE5LVT7A.mjs","sourcesContent":["import { type FC, type ReactElement, useMemo } from 'react'\nimport clsx from 'clsx'\n// components\nimport { P1, P2 } from '../../../text/paragraph'\n// enums\nimport { Size, Style } from '../../enum'\n// type\nimport type { Theme } from '../../constant'\n// constants\nimport { THEME } from '../../constant'\n\ntype TextButtonProps = {\n  text: string\n  leftIconComponent?: ReactElement\n  rightIconComponent?: ReactElement\n  size?: Size\n  style?: Style\n  theme?: Theme\n  active?: boolean\n  disabled?: boolean\n  loading?: boolean\n  className?: string\n}\nconst TextButton: FC<TextButtonProps> & {\n  Size: typeof Size\n  Style: typeof Style\n  THEME: typeof THEME\n} = ({\n  text,\n  leftIconComponent,\n  rightIconComponent,\n  size = Size.S,\n  theme = THEME.normal,\n  style = Style.DARK,\n  active = false,\n  disabled = false,\n  loading = false,\n  className = '',\n}) => {\n  const TextJSX = useMemo(\n    () => (size === Size.S ? <P2 text={text} /> : <P1 text={text} />),\n    [size, text]\n  )\n\n  return (\n    <div\n      className={clsx(\n        'flex items-center',\n        {\n          'cursor-default': disabled,\n          'cursor-pointer': !disabled,\n        },\n        {\n          'text-gray-500 hover:text-gray-500':\n            disabled &&\n            (theme === THEME.photography || theme === THEME.transparent),\n          'text-gray-400 hover:text-gray-400':\n            disabled ||\n            (theme === THEME.photography &&\n              style === Style.LIGHT &&\n              !active &&\n              !disabled),\n          'text-gray-200 hover:text-supportive-pastel':\n            theme === THEME.photography && !active && !disabled,\n          'text-gray-300 hover:text-gray-400':\n            theme === THEME.photography &&\n            style === Style.LIGHT &&\n            active &&\n            !disabled,\n          'text-gray-white hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.DARK &&\n            active &&\n            !disabled,\n          'text-supportive-faded hover:text-supportive-pastel':\n            theme === THEME.photography &&\n            style === Style.BRAND &&\n            active &&\n            !disabled,\n          'text-gray-100 hover:text-gray-200':\n            theme === THEME.transparent && !active && !disabled,\n          'text-gray-white hover:text-gray-white':\n            theme === THEME.transparent && active && !disabled,\n          'text-gray-600 hover:text-brand-heavy':\n            theme === THEME.normal && !active && !disabled,\n          'text-brand-heavy hover:text-brand-heavy':\n            theme === THEME.normal && active && !disabled,\n        },\n        className\n      )}\n    >\n      <div className=\"relative flex justify-center items-center\">\n        <div\n          className={clsx('flex justify-center items-center', {\n            'opacity-0': loading,\n            'opacity-100': !loading,\n          })}\n        >\n          <div className=\"flex items-center mr-[4px]\">{leftIconComponent}</div>\n          {TextJSX}\n          <div className=\"flex items-center ml-[4px]\">{rightIconComponent}</div>\n        </div>\n        <span\n          className={clsx(\n            'inline-block absolute box-border animation-spin',\n            'border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]',\n            {\n              'size-[18px]': size === Size.S,\n              'size-[24px]': size === Size.L,\n            },\n            {\n              'opacity-0': !loading,\n              'opacity-100': loading,\n            }\n          )}\n        />\n      </div>\n    </div>\n  )\n}\nTextButton.Size = Size\nTextButton.Style = Style\nTextButton.THEME = THEME\n\nexport default TextButton\n"]}