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

package/README.md

@@ -4,7 +4,7 @@ React components built with TypeScript and Tailwind CSS.
 
 ## Roadmap
 
-- [ ] add storybook
+- [X] add storybook
 - [ ] add test
 
 ## Installation
@@ -37,6 +37,16 @@ function App() {
 
 ## Development & Build
 
+### Storybook
+
+Run storybook on localhost
+
+```bash
+yarn storybook
+```
+
+### Build
+
 ```bash
 yarn build
 ```

package/lib/button/components/text-button/index.d.mts

@@ -0,0 +1,24 @@
+import { FC, ReactElement } from 'react';
+import { Size, Style } from '../../enum.mjs';
+import { Theme, THEME } from '../../constant.mjs';
+import '../../../types/index.mjs';
+
+type TextButtonProps = {
+    text: string;
+    leftIconComponent?: ReactElement;
+    rightIconComponent?: ReactElement;
+    size?: Size;
+    style?: Style;
+    theme?: Theme;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+};
+declare const TextButton: FC<TextButtonProps> & {
+    Size: typeof Size;
+    Style: typeof Style;
+    THEME: typeof THEME;
+};
+
+export { TextButton as default };

package/lib/button/components/text-button/index.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactElement } from 'react';
+import { Size, Style } from '../../enum.js';
+import { Theme, THEME } from '../../constant.js';
+import '../../../types/index.js';
+
+type TextButtonProps = {
+    text: string;
+    leftIconComponent?: ReactElement;
+    rightIconComponent?: ReactElement;
+    size?: Size;
+    style?: Style;
+    theme?: Theme;
+    active?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+};
+declare const TextButton: FC<TextButtonProps> & {
+    Size: typeof Size;
+    Style: typeof Style;
+    THEME: typeof THEME;
+};
+
+export { TextButton as default };

package/lib/button/components/text-button/index.js

@@ -0,0 +1,202 @@
+'use strict';
+
+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/button/components/text-button/index.tsx
+
+// 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"
+};
+
+// 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,
+  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, 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",
+    {
+      className: clsx2__default.default(
+        "flex items-center",
+        {
+          "cursor-default": disabled,
+          "cursor-pointer": !disabled
+        },
+        themeClass,
+        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;
+
+module.exports = text_button_default;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/lib/button/components/text-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../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"],"names":["jsx","clsx","Size","Style","useMemo","jsxs"],"mappings":"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","file":"index.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 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"]}

package/lib/button/components/text-button/index.mjs

@@ -0,0 +1,8 @@
+export { text_button_default as default } from '../../../chunk-U22UKMAJ.mjs';
+import '../../../chunk-FVKIUNIP.mjs';
+import '../../../chunk-HQG6Q2EY.mjs';
+import '../../../chunk-UM7RNC2Y.mjs';
+import '../../../chunk-JB4TYHDE.mjs';
+import '../../../chunk-URJXIWFX.mjs';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/lib/button/components/text-button/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}

package/lib/button/components/text-button/theme.d.mts

@@ -0,0 +1,11 @@
+import { Theme } from '../../constant.mjs';
+import { ClassArray } from 'clsx';
+import { Style } from '../../enum.mjs';
+import '../../../types/index.mjs';
+
+type ThemeFunc = (theme: Theme, style?: Style) => ClassArray;
+declare const getDisabledContainerTheme: ThemeFunc;
+declare const getActiveContainerTheme: ThemeFunc;
+declare const getContainerTheme: ThemeFunc;
+
+export { getActiveContainerTheme, getContainerTheme, getDisabledContainerTheme };

package/lib/button/components/text-button/theme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../../constant.js';
+import { ClassArray } from 'clsx';
+import { Style } from '../../enum.js';
+import '../../../types/index.js';
+
+type ThemeFunc = (theme: Theme, style?: Style) => ClassArray;
+declare const getDisabledContainerTheme: ThemeFunc;
+declare const getActiveContainerTheme: ThemeFunc;
+declare const getContainerTheme: ThemeFunc;
+
+export { getActiveContainerTheme, getContainerTheme, getDisabledContainerTheme };

package/lib/button/components/text-button/theme.js

@@ -0,0 +1,65 @@
+'use strict';
+
+// src/button/constant.ts
+var THEME = {
+  photography: "photography",
+  transparent: "transparent"};
+
+// 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 */
+    }
+  ];
+};
+
+exports.getActiveContainerTheme = getActiveContainerTheme;
+exports.getContainerTheme = getContainerTheme;
+exports.getDisabledContainerTheme = getDisabledContainerTheme;
+//# sourceMappingURL=theme.js.map
+//# sourceMappingURL=theme.js.map

package/lib/button/components/text-button/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/button/constant.ts","../../../../src/button/components/text-button/theme.ts"],"names":[],"mappings":";;;AAEO,IAAM,KAAA,GAAQ;AAAA,EAEnB,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,aAEf,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;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;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","file":"theme.js","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","// 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}"]}

package/lib/button/components/text-button/theme.mjs

@@ -0,0 +1,5 @@
+export { getActiveContainerTheme, getContainerTheme, getDisabledContainerTheme } from '../../../chunk-FVKIUNIP.mjs';
+import '../../../chunk-JB4TYHDE.mjs';
+import '../../../chunk-URJXIWFX.mjs';
+//# sourceMappingURL=theme.mjs.map
+//# sourceMappingURL=theme.mjs.map

package/lib/button/components/text-button/theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"theme.mjs"}

package/lib/button/constant.d.mts

@@ -0,0 +1,11 @@
+import { ValuesOf } from '../types/index.mjs';
+
+declare const THEME: {
+    readonly normal: "normal";
+    readonly photography: "photography";
+    readonly transparent: "transparent";
+    readonly index: "index";
+};
+type Theme = ValuesOf<typeof THEME>;
+
+export { THEME, type Theme };

package/lib/button/constant.d.ts

@@ -0,0 +1,11 @@
+import { ValuesOf } from '../types/index.js';
+
+declare const THEME: {
+    readonly normal: "normal";
+    readonly photography: "photography";
+    readonly transparent: "transparent";
+    readonly index: "index";
+};
+type Theme = ValuesOf<typeof THEME>;
+
+export { THEME, type Theme };

package/lib/button/constant.js

@@ -0,0 +1,13 @@
+'use strict';
+
+// src/button/constant.ts
+var THEME = {
+  normal: "normal",
+  photography: "photography",
+  transparent: "transparent",
+  index: "index"
+};
+
+exports.THEME = THEME;
+//# sourceMappingURL=constant.js.map
+//# sourceMappingURL=constant.js.map

package/lib/button/constant.js.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":"constant.js","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/button/constant.mjs

@@ -0,0 +1,3 @@
+export { THEME } from '../chunk-JB4TYHDE.mjs';
+//# sourceMappingURL=constant.mjs.map
+//# sourceMappingURL=constant.mjs.map

package/lib/button/constant.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"constant.mjs"}

package/lib/button/enum.d.mts

@@ -0,0 +1,11 @@
+declare enum Size {
+    S = 0,
+    L = 1
+}
+declare enum Style {
+    BRAND = 0,
+    DARK = 1,
+    LIGHT = 2
+}
+
+export { Size, Style };

package/lib/button/enum.d.ts

@@ -0,0 +1,11 @@
+declare enum Size {
+    S = 0,
+    L = 1
+}
+declare enum Style {
+    BRAND = 0,
+    DARK = 1,
+    LIGHT = 2
+}
+
+export { Size, Style };

package/lib/button/enum.js

@@ -0,0 +1,19 @@
+'use strict';
+
+// 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 || {});
+
+exports.Size = Size;
+exports.Style = Style;
+//# sourceMappingURL=enum.js.map
+//# sourceMappingURL=enum.js.map

package/lib/button/enum.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/button/enum.ts"],"names":["Size","Style"],"mappings":";;;AAAO,IAAK,IAAA,qBAAAA,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;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","file":"enum.js","sourcesContent":["export enum Size {\n  S,\n  L,\n}\n\nexport enum Style {\n  BRAND,\n  DARK,\n  LIGHT,\n}\n"]}

package/lib/button/enum.mjs

@@ -0,0 +1,3 @@
+export { Size, Style } from '../chunk-URJXIWFX.mjs';
+//# sourceMappingURL=enum.mjs.map
+//# sourceMappingURL=enum.mjs.map

package/lib/button/enum.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"enum.mjs"}

package/lib/button/index.d.mts

@@ -0,0 +1,26 @@
+import { Theme, THEME } from './constant.mjs';
+import { Size, Style } from './enum.mjs';
+import * as react from 'react';
+export { default as TextButton } from './components/text-button/index.mjs';
+import '../types/index.mjs';
+
+declare const _default: {
+    TextButton: 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;
+    };
+};
+
+export { _default as default };

package/lib/button/index.d.ts

@@ -0,0 +1,26 @@
+import { Theme, THEME } from './constant.js';
+import { Size, Style } from './enum.js';
+import * as react from 'react';
+export { default as TextButton } from './components/text-button/index.js';
+import '../types/index.js';
+
+declare const _default: {
+    TextButton: 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;
+    };
+};
+
+export { _default as default };