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

package/lib/button/stories/text-button.stories.d.mts

@@ -0,0 +1,55 @@
+import { Theme, THEME } from '../constant.mjs';
+import { Size, Style } from '../enum.mjs';
+import * as react from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import '../../types/index.mjs';
+
+declare const meta: {
+    title: string;
+    component: react.FC<{
+        text: string;
+        leftIconComponent?: react.ReactElement;
+        rightIconComponent?: react.ReactElement;
+        size?: Size;
+        style?: Style;
+        theme?: Theme;
+        active?: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+        className?: string;
+    }> & {
+        Size: typeof Size;
+        Style: typeof Style;
+        THEME: typeof THEME;
+    };
+    argTypes: {
+        size: {
+            defaultValue: Size;
+            options: string[];
+            mapping: Record<string, Size>;
+            control: {
+                type: "radio";
+            };
+        };
+        theme: {
+            defaultValue: "normal" | "photography" | "transparent" | "index";
+            options: ("normal" | "photography" | "transparent" | "index")[];
+            control: {
+                type: "radio";
+            };
+        };
+        style: {
+            defaultValue: Style;
+            options: string[];
+            mapping: Record<string, Style>;
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+
+type Story = StoryObj<typeof meta>;
+declare const Basic: Story;
+
+export { Basic, meta as default };

package/lib/button/stories/text-button.stories.d.ts

@@ -0,0 +1,55 @@
+import { Theme, THEME } from '../constant.js';
+import { Size, Style } from '../enum.js';
+import * as react from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import '../../types/index.js';
+
+declare const meta: {
+    title: string;
+    component: react.FC<{
+        text: string;
+        leftIconComponent?: react.ReactElement;
+        rightIconComponent?: react.ReactElement;
+        size?: Size;
+        style?: Style;
+        theme?: Theme;
+        active?: boolean;
+        disabled?: boolean;
+        loading?: boolean;
+        className?: string;
+    }> & {
+        Size: typeof Size;
+        Style: typeof Style;
+        THEME: typeof THEME;
+    };
+    argTypes: {
+        size: {
+            defaultValue: Size;
+            options: string[];
+            mapping: Record<string, Size>;
+            control: {
+                type: "radio";
+            };
+        };
+        theme: {
+            defaultValue: "normal" | "photography" | "transparent" | "index";
+            options: ("normal" | "photography" | "transparent" | "index")[];
+            control: {
+                type: "radio";
+            };
+        };
+        style: {
+            defaultValue: Style;
+            options: string[];
+            mapping: Record<string, Style>;
+            control: {
+                type: "radio";
+            };
+        };
+    };
+};
+
+type Story = StoryObj<typeof meta>;
+declare const Basic: Story;
+
+export { Basic, meta as default };

package/lib/button/stories/text-button.stories.js

@@ -0,0 +1,206 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var clsx2 = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx2__default = /*#__PURE__*/_interopDefault(clsx2);
+
+// src/storybook/utils/get-enum-arg.ts
+function getRadioArgFromObject(object, defaultValue) {
+  return {
+    defaultValue,
+    options: Object.values(object),
+    control: { type: "radio" }
+  };
+}
+function getRadioArgFromEnum(enumObject, defaultValue) {
+  const keys = Object.keys(enumObject).filter(
+    (key) => Number.isNaN(Number(key))
+  );
+  const mapping = {};
+  keys.forEach((key) => {
+    mapping[key] = enumObject[key];
+  });
+  const defaultKey = keys.find((key) => enumObject[key] === defaultValue) || keys[0];
+  return {
+    defaultValue: enumObject[defaultKey],
+    options: keys,
+    mapping,
+    control: { type: "radio" }
+  };
+}
+
+// src/text/enum/index.ts
+var WEIGHT = {
+  extraLight: "extra-light",
+  normal: "normal",
+  bold: "bold"
+};
+var baseClass = "font-default leading-[150%] flex items-center m-0";
+var variantClass = {
+  P1: "text-[16px]",
+  P2: "text-[14px]",
+  P3: "text-[12px]",
+  P4: "text-[10px]"
+};
+var ParagraphVariant = (variant) => {
+  const Component = ({
+    text = "",
+    weight = WEIGHT.normal,
+    className = "",
+    ...props
+  }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: clsx2__default.default(
+        baseClass,
+        variantClass[variant],
+        `font-${weight}`,
+        className
+      ),
+      ...props,
+      children: text
+    }
+  );
+  Component.displayName = variant;
+  Component.Weight = WEIGHT;
+  return Component;
+};
+var P1 = ParagraphVariant("P1");
+var P2 = ParagraphVariant("P2");
+ParagraphVariant("P3");
+ParagraphVariant("P4");
+
+// src/button/enum.ts
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2[Size2["S"] = 0] = "S";
+  Size2[Size2["L"] = 1] = "L";
+  return Size2;
+})(Size || {});
+var Style = /* @__PURE__ */ ((Style2) => {
+  Style2[Style2["BRAND"] = 0] = "BRAND";
+  Style2[Style2["DARK"] = 1] = "DARK";
+  Style2[Style2["LIGHT"] = 2] = "LIGHT";
+  return Style2;
+})(Style || {});
+
+// src/button/constant.ts
+var THEME = {
+  normal: "normal",
+  photography: "photography",
+  transparent: "transparent",
+  index: "index"
+};
+var TextButton = ({
+  text,
+  leftIconComponent,
+  rightIconComponent,
+  size = 0 /* S */,
+  theme = THEME.normal,
+  style = 1 /* DARK */,
+  active = false,
+  disabled = false,
+  loading = false,
+  className = ""
+}) => {
+  const TextJSX = react.useMemo(
+    () => size === 0 /* S */ ? /* @__PURE__ */ jsxRuntime.jsx(P2, { text }) : /* @__PURE__ */ jsxRuntime.jsx(P1, { text }),
+    [size, text]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx2__default.default(
+        "flex items-center",
+        {
+          "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
+        },
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex justify-center items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx2__default.default("flex justify-center items-center", {
+              "opacity-0": loading,
+              "opacity-100": !loading
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center mr-[4px]", children: leftIconComponent }),
+              TextJSX,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center ml-[4px]", children: rightIconComponent })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: clsx2__default.default(
+              "inline-block absolute box-border animation-spin",
+              "border-2 border-solid border-gray-400 border-t-gray-600 rounded-[50%]",
+              {
+                "size-[18px]": size === 0 /* S */,
+                "size-[24px]": size === 1 /* L */
+              },
+              {
+                "opacity-0": !loading,
+                "opacity-100": loading
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+TextButton.Size = Size;
+TextButton.Style = Style;
+TextButton.THEME = THEME;
+var text_button_default = TextButton;
+
+// src/button/stories/text-button.stories.ts
+var meta = {
+  title: "Button/TextButton",
+  component: text_button_default,
+  argTypes: {
+    size: getRadioArgFromEnum(text_button_default.Size, text_button_default.Size.S),
+    theme: getRadioArgFromObject(text_button_default.THEME, text_button_default.THEME.normal),
+    style: getRadioArgFromEnum(text_button_default.Style, text_button_default.Style.DARK)
+  }
+};
+var text_button_stories_default = meta;
+var Basic = {
+  args: {
+    text: "\u6587\u5B57",
+    size: text_button_default.Size.S,
+    theme: text_button_default.THEME.normal,
+    style: text_button_default.Style.DARK,
+    active: false,
+    disabled: false,
+    loading: false
+  },
+  parameters: { controls: { exclude: ["className"] } }
+};
+
+exports.Basic = Basic;
+exports.default = text_button_stories_default;
+//# sourceMappingURL=text-button.stories.js.map
+//# sourceMappingURL=text-button.stories.js.map

package/lib/button/stories/text-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/storybook/utils/get-enum-arg.ts","../../../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/button/stories/text-button.stories.ts"],"names":["jsx","clsx","Size","Style","useMemo","jsxs"],"mappings":"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","file":"text-button.stories.js","sourcesContent":["type RadioArgObject<T> = {\n  defaultValue: T\n  options: T[]\n  control: { type: 'radio' }\n}\n\nexport function getRadioArgFromObject<T extends string | number>(\n  object: Record<string, T>,\n  defaultValue: T\n): RadioArgObject<T> {\n  return {\n    defaultValue,\n    options: Object.values(object),\n    control: { type: 'radio' },\n  }\n}\n\ntype RadioArgEnum<E> = {\n  defaultValue: E\n  options: string[]\n  mapping: Record<string, E>\n  control: { type: 'radio' }\n}\n\nexport function getRadioArgFromEnum<E extends Record<string, string | number>>(\n  enumObject: E,\n  defaultValue: E[keyof E]\n): RadioArgEnum<E[keyof E]> {\n  // Only keep \"real\" keys (filter numeric reverse mapping)\n  const keys = Object.keys(enumObject).filter((key) =>\n    Number.isNaN(Number(key))\n  )\n\n  const mapping: Record<string, E[keyof E]> = {}\n  keys.forEach((key) => {\n    mapping[key] = enumObject[key as keyof E]\n  })\n\n  // Find the key corresponding to the default value\n  const defaultKey =\n    keys.find((key) => enumObject[key as keyof E] === defaultValue) || keys[0]\n\n  return {\n    defaultValue: enumObject[defaultKey as keyof E],\n    options: keys,\n    mapping,\n    control: { type: 'radio' },\n  }\n}\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 type { Meta, StoryObj } from '@storybook/react-vite'\n// utils\nimport {\n  getRadioArgFromObject,\n  getRadioArgFromEnum,\n} from '../../storybook/utils/get-enum-arg'\n// components\nimport TextButton from '../components/text-button'\n\nconst meta = {\n  title: 'Button/TextButton',\n  component: TextButton,\n  argTypes: {\n    size: getRadioArgFromEnum(TextButton.Size, TextButton.Size.S),\n    theme: getRadioArgFromObject(TextButton.THEME, TextButton.THEME.normal),\n    style: getRadioArgFromEnum(TextButton.Style, TextButton.Style.DARK),\n  },\n} satisfies Meta<typeof TextButton>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    text: '文字',\n    size: TextButton.Size.S,\n    theme: TextButton.THEME.normal,\n    style: TextButton.Style.DARK,\n    active: false,\n    disabled: false,\n    loading: false,\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}

package/lib/button/stories/text-button.stories.mjs

@@ -0,0 +1,34 @@
+import { getRadioArgFromEnum, getRadioArgFromObject } from '../../chunk-QOLETTSG.mjs';
+import { text_button_default } from '../../chunk-QE5LVT7A.mjs';
+import '../../chunk-HQG6Q2EY.mjs';
+import '../../chunk-UM7RNC2Y.mjs';
+import '../../chunk-JB4TYHDE.mjs';
+import '../../chunk-URJXIWFX.mjs';
+
+// src/button/stories/text-button.stories.ts
+var meta = {
+  title: "Button/TextButton",
+  component: text_button_default,
+  argTypes: {
+    size: getRadioArgFromEnum(text_button_default.Size, text_button_default.Size.S),
+    theme: getRadioArgFromObject(text_button_default.THEME, text_button_default.THEME.normal),
+    style: getRadioArgFromEnum(text_button_default.Style, text_button_default.Style.DARK)
+  }
+};
+var text_button_stories_default = meta;
+var Basic = {
+  args: {
+    text: "\u6587\u5B57",
+    size: text_button_default.Size.S,
+    theme: text_button_default.THEME.normal,
+    style: text_button_default.Style.DARK,
+    active: false,
+    disabled: false,
+    loading: false
+  },
+  parameters: { controls: { exclude: ["className"] } }
+};
+
+export { Basic, text_button_stories_default as default };
+//# sourceMappingURL=text-button.stories.mjs.map
+//# sourceMappingURL=text-button.stories.mjs.map

package/lib/button/stories/text-button.stories.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/button/stories/text-button.stories.ts"],"names":[],"mappings":";;;;;;;;AASA,IAAM,IAAA,GAAO;AAAA,EACX,KAAA,EAAO,mBAAA;AAAA,EACP,SAAA,EAAW,mBAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,MAAM,mBAAA,CAAoB,mBAAA,CAAW,IAAA,EAAM,mBAAA,CAAW,KAAK,CAAC,CAAA;AAAA,IAC5D,OAAO,qBAAA,CAAsB,mBAAA,CAAW,KAAA,EAAO,mBAAA,CAAW,MAAM,MAAM,CAAA;AAAA,IACtE,OAAO,mBAAA,CAAoB,mBAAA,CAAW,KAAA,EAAO,mBAAA,CAAW,MAAM,IAAI;AAAA;AAEtE,CAAA;AAEA,IAAO,2BAAA,GAAQ;AAGR,IAAM,KAAA,GAAe;AAAA,EAC1B,IAAA,EAAM;AAAA,IACJ,IAAA,EAAM,cAAA;AAAA,IACN,IAAA,EAAM,oBAAW,IAAA,CAAK,CAAA;AAAA,IACtB,KAAA,EAAO,oBAAW,KAAA,CAAM,MAAA;AAAA,IACxB,KAAA,EAAO,oBAAW,KAAA,CAAM,IAAA;AAAA,IACxB,MAAA,EAAQ,KAAA;AAAA,IACR,QAAA,EAAU,KAAA;AAAA,IACV,OAAA,EAAS;AAAA,GACX;AAAA,EACA,UAAA,EAAY,EAAE,QAAA,EAAU,EAAE,SAAS,CAAC,WAAW,GAAE;AACnD","file":"text-button.stories.mjs","sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite'\n// utils\nimport {\n  getRadioArgFromObject,\n  getRadioArgFromEnum,\n} from '../../storybook/utils/get-enum-arg'\n// components\nimport TextButton from '../components/text-button'\n\nconst meta = {\n  title: 'Button/TextButton',\n  component: TextButton,\n  argTypes: {\n    size: getRadioArgFromEnum(TextButton.Size, TextButton.Size.S),\n    theme: getRadioArgFromObject(TextButton.THEME, TextButton.THEME.normal),\n    style: getRadioArgFromEnum(TextButton.Style, TextButton.Style.DARK),\n  },\n} satisfies Meta<typeof TextButton>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nexport const Basic: Story = {\n  args: {\n    text: '文字',\n    size: TextButton.Size.S,\n    theme: TextButton.THEME.normal,\n    style: TextButton.Style.DARK,\n    active: false,\n    disabled: false,\n    loading: false,\n  },\n  parameters: { controls: { exclude: ['className'] } },\n}\n"]}

package/lib/{chunk-3B7LTZRJ.mjs → chunk-6DXA3EX7.mjs}

@@ -10,11 +10,13 @@ var Title2 = ({
   className = ""
 }) => {
   return /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx("flex items-baseline gap-[16px]"), children: [
-      /* @__PURE__ */ jsx(H5, { className: "text-gray-800", text: title }),
-      subtitle ? /* @__PURE__ */ jsx(P2, { className: "text-gray-600", text: subtitle }) : null
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: clsx("flex items-baseline gap-[16px]"), children: [
+        /* @__PURE__ */ jsx(H5, { className: "text-gray-800", text: title }),
+        subtitle ? /* @__PURE__ */ jsx(P2, { className: "text-gray-600", text: subtitle }) : null
+      ] }),
+      renderButton || null
     ] }),
-    renderButton || null,
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -29,5 +31,5 @@ var Title2 = ({
 var title2_default = Title2;
 
 export { title2_default };
-//# sourceMappingURL=chunk-3B7LTZRJ.mjs.map
-//# sourceMappingURL=chunk-3B7LTZRJ.mjs.map
+//# sourceMappingURL=chunk-6DXA3EX7.mjs.map
+//# sourceMappingURL=chunk-6DXA3EX7.mjs.map

package/lib/chunk-6DXA3EX7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/title-bar/components/title2.tsx"],"names":[],"mappings":";;;;;AAaA,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,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,+BAAA,EAAiC,SAAS,CAAA,EAC7D,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,+BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,gCAAgC,CAAA,EACnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,EAAA,EAAA,EAAG,SAAA,EAAU,eAAA,EAAgB,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,QAC1C,2BAAW,GAAA,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,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,qCAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"chunk-6DXA3EX7.mjs","sourcesContent":["import clsx from 'clsx'\nimport type React from 'react'\n// components\nimport { H5 } from '../../text/heading'\nimport { P2 } from '../../text/paragraph'\n\ntype Title2Props = {\n  title: string\n  subtitle?: string\n  renderButton?: React.ReactNode\n  className?: string\n}\n\nconst Title2: React.FC<Title2Props> = ({\n  title,\n  subtitle = '',\n  renderButton = null,\n  className = '',\n}) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className=\"flex flex-row justify-between\">\n        <div className={clsx('flex items-baseline gap-[16px]')}>\n          <H5 className=\"text-gray-800\" text={title} />\n          {subtitle ? <P2 className=\"text-gray-600\" text={subtitle} /> : null}\n        </div>\n        {renderButton || null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title2\n"]}

package/lib/chunk-7DK5MO62.mjs

@@ -0,0 +1,8 @@
+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-7DK5MO62.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/index.ts"],"names":[],"mappings":";;;AAIA,IAAO,cAAA,GAAQ,EAAE,UAAA,EAAA,mBAAA","file":"chunk-7DK5MO62.mjs","sourcesContent":["import TextButton from './components/text-button'\n\nexport { TextButton }\n\nexport default { TextButton }\n"]}

package/lib/chunk-CZVB2Y6O.mjs

@@ -0,0 +1,27 @@
+import { H2 } from './chunk-JHLT5GDV.mjs';
+import { P1 } from './chunk-HQG6Q2EY.mjs';
+import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Title1 = ({ title, subtitle = "", className = "" }) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx("flex justify-between flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx("flex items-baseline gap-[16px]"), children: [
+      /* @__PURE__ */ jsx(H2, { className: "text-gray-800", text: title }),
+      subtitle ? /* @__PURE__ */ jsx(P1, { className: "text-gray-600", text: subtitle }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "w-full h-[1px] bg-gray-800 mt-[8px]",
+          "desktop:mt-[16px]"
+        )
+      }
+    )
+  ] });
+};
+var title1_default = Title1;
+
+export { title1_default };
+//# sourceMappingURL=chunk-CZVB2Y6O.mjs.map
+//# sourceMappingURL=chunk-CZVB2Y6O.mjs.map

package/lib/chunk-CZVB2Y6O.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/title-bar/components/title1.tsx"],"names":[],"mappings":";;;;;AAYA,IAAM,MAAA,GAA0B,CAAC,EAAE,KAAA,EAAO,WAAW,EAAA,EAAI,SAAA,GAAY,IAAG,KAAM;AAC5E,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,+BAAA,EAAiC,SAAS,CAAA,EAC7D,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,gCAAgC,CAAA,EACnD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,EAAA,EAAA,EAAG,SAAA,EAAU,eAAA,EAAgB,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,MAC1C,2BAAW,GAAA,CAAC,EAAA,EAAA,EAAG,WAAU,eAAA,EAAgB,IAAA,EAAM,UAAU,CAAA,GAAK;AAAA,KAAA,EACjE,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,qCAAA;AAAA,UACA;AAAA;AACF;AAAA;AACF,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"chunk-CZVB2Y6O.mjs","sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// components\nimport { H2 } from '../../text/heading'\nimport { P1 } from '../../text/paragraph'\n\ntype Title1Props = {\n  title: string\n  subtitle?: string\n  className?: string\n}\n\nconst Title1: FC<Title1Props> = ({ title, subtitle = '', className = '' }) => {\n  return (\n    <div className={clsx('flex justify-between flex-col', className)}>\n      <div className={clsx('flex items-baseline gap-[16px]')}>\n        <H2 className=\"text-gray-800\" text={title} />\n        {subtitle ? <P1 className=\"text-gray-600\" text={subtitle} /> : null}\n      </div>\n      <div\n        className={clsx(\n          'w-full h-[1px] bg-gray-800 mt-[8px]',\n          'desktop:mt-[16px]'\n        )}\n      />\n    </div>\n  )\n}\n\nexport default Title1\n"]}

package/lib/chunk-GQWO45DN.mjs

@@ -0,0 +1,32 @@
+import { useRef, useEffect } from 'react';
+
+// src/title-bar/components/title-tab/hook.ts
+var useScrollStatus = (setShowNext) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    if (ref.current.scrollWidth > ref.current.clientWidth) {
+      setShowNext(true);
+    }
+  }, [setShowNext]);
+  useEffect(() => {
+    if (!ref.current) return;
+    const refEle = ref.current;
+    const handleScroll = () => {
+      if (refEle.offsetWidth + refEle.scrollLeft >= refEle.scrollWidth) {
+        setShowNext(false);
+      } else {
+        setShowNext(true);
+      }
+    };
+    refEle.addEventListener("scroll", handleScroll);
+    return () => {
+      refEle.removeEventListener("scroll", handleScroll);
+    };
+  }, [setShowNext]);
+  return ref;
+};
+
+export { useScrollStatus };
+//# sourceMappingURL=chunk-GQWO45DN.mjs.map
+//# sourceMappingURL=chunk-GQWO45DN.mjs.map

package/lib/chunk-GQWO45DN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/title-bar/components/title-tab/hook.ts"],"names":[],"mappings":";;;AAEO,IAAM,eAAA,GAAkB,CAAC,WAAA,KAAyC;AACvE,EAAA,MAAM,GAAA,GAAM,OAAuB,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,IAAI,GAAA,CAAI,OAAA,CAAQ,WAAA,GAAc,GAAA,CAAI,QAAQ,WAAA,EAAa;AAErD,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAAA,EACF,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,OAAA,EAAS;AAElB,IAAA,MAAM,SAAS,GAAA,CAAI,OAAA;AACnB,IAAA,MAAM,eAA8B,MAAM;AACxC,MAAA,IAAI,MAAA,CAAO,WAAA,GAAc,MAAA,CAAO,UAAA,IAAc,OAAO,WAAA,EAAa;AAEhE,QAAA,WAAA,CAAY,KAAK,CAAA;AAAA,MACnB,CAAA,MAAO;AACL,QAAA,WAAA,CAAY,IAAI,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAE9C,IAAA,OAAO,MAAM;AACX,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,OAAO,GAAA;AACT","file":"chunk-GQWO45DN.mjs","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"]}

package/lib/chunk-GRCEZABQ.mjs

@@ -0,0 +1,38 @@
+import { text_button_default } from './chunk-QE5LVT7A.mjs';
+import { external_link_default } from './chunk-X2UWIBNH.mjs';
+import { internal_link_default } from './chunk-XO7SDD7W.mjs';
+import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+
+var TabItem = ({
+  text,
+  link,
+  isExternal = false,
+  isActive = false,
+  onClick,
+  className = ""
+}) => {
+  const CustomizedLink = isExternal ? external_link_default : internal_link_default;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: clsx("flex shrink-0 mr-[24px] last:mr-0", className),
+      onClick,
+      type: "button",
+      children: /* @__PURE__ */ jsx(CustomizedLink, { to: link, children: /* @__PURE__ */ jsx(
+        text_button_default,
+        {
+          text,
+          active: isActive,
+          size: text_button_default.Size.L,
+          className: "py-[16px]"
+        }
+      ) })
+    }
+  );
+};
+var tab_item_default = TabItem;
+
+export { tab_item_default };
+//# sourceMappingURL=chunk-GRCEZABQ.mjs.map
+//# sourceMappingURL=chunk-GRCEZABQ.mjs.map

package/lib/chunk-GRCEZABQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/title-bar/components/title-tab/tab-item.tsx"],"names":[],"mappings":";;;;;;AAYA,IAAM,UAA4B,CAAC;AAAA,EACjC,IAAA;AAAA,EACA,IAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA,SAAA,GAAY;AACd,CAAA,KAAM;AACJ,EAAA,MAAM,cAAA,GAAiB,aAAa,qBAAA,GAAe,qBAAA;AACnD,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,mCAAA,EAAqC,SAAS,CAAA;AAAA,MAC9D,OAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MAEL,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,IAAA,EAClB,QAAA,kBAAA,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,MAAA,EAAQ,QAAA;AAAA,UACR,IAAA,EAAM,oBAAW,IAAA,CAAK,CAAA;AAAA,UACtB,SAAA,EAAU;AAAA;AAAA,OACZ,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,gBAAA,GAAQ","file":"chunk-GRCEZABQ.mjs","sourcesContent":["import clsx from 'clsx'\nimport type { FC } from 'react'\n// type\nimport type { Tab } from './type'\n// component\nimport { ExternalLink, InternalLink } from '../../../customized-link'\nimport { TextButton } from '../../../button'\n\ntype TabItemProps = Tab & {\n  onClick: () => void\n  className?: string\n}\nconst TabItem: FC<TabItemProps> = ({\n  text,\n  link,\n  isExternal = false,\n  isActive = false,\n  onClick,\n  className = '',\n}) => {\n  const CustomizedLink = isExternal ? ExternalLink : InternalLink\n  return (\n    <button\n      className={clsx('flex shrink-0 mr-[24px] last:mr-0', className)}\n      onClick={onClick}\n      type=\"button\"\n    >\n      <CustomizedLink to={link}>\n        <TextButton\n          text={text}\n          active={isActive}\n          size={TextButton.Size.L}\n          className=\"py-[16px]\"\n        />\n      </CustomizedLink>\n    </button>\n  )\n}\n\nexport default TabItem\n"]}

package/lib/chunk-JB4TYHDE.mjs

@@ -0,0 +1,11 @@
+// src/button/constant.ts
+var THEME = {
+  normal: "normal",
+  photography: "photography",
+  transparent: "transparent",
+  index: "index"
+};
+
+export { THEME };
+//# sourceMappingURL=chunk-JB4TYHDE.mjs.map
+//# sourceMappingURL=chunk-JB4TYHDE.mjs.map

package/lib/chunk-JB4TYHDE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/constant.ts"],"names":[],"mappings":";AAEO,IAAM,KAAA,GAAQ;AAAA,EACnB,MAAA,EAAQ,QAAA;AAAA,EACR,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,aAAA;AAAA,EACb,KAAA,EAAO;AACT","file":"chunk-JB4TYHDE.mjs","sourcesContent":["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"]}

package/lib/chunk-JFT6JILC.mjs

@@ -0,0 +1,12 @@
+import { external_link_default } from './chunk-X2UWIBNH.mjs';
+import { internal_link_default } from './chunk-XO7SDD7W.mjs';
+
+// src/customized-link/index.ts
+var customized_link_default = {
+  ExternalLink: external_link_default,
+  InternalLink: internal_link_default
+};
+
+export { customized_link_default };
+//# sourceMappingURL=chunk-JFT6JILC.mjs.map
+//# sourceMappingURL=chunk-JFT6JILC.mjs.map

package/lib/chunk-JFT6JILC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/customized-link/index.ts"],"names":[],"mappings":";;;;AAKA,IAAO,uBAAA,GAAQ;AAAA,EACb,YAAA,EAAA,qBAAA;AAAA,EACA,YAAA,EAAA;AACF","file":"chunk-JFT6JILC.mjs","sourcesContent":["import ExternalLink from './external-link'\nimport InternalLink from './internal-link'\n\nexport { ExternalLink, InternalLink }\n\nexport default {\n  ExternalLink,\n  InternalLink,\n}\n"]}