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

package/lib/button/index.d.mts

@@ -1,91 +1,14 @@
-import "../index-CUE6zs36.mjs";
-import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-ZGhPn0d6.mjs";
-import { THEME, Theme } from "../theme-DKi2E2si.mjs";
-import { WEIGHT, Weight } from "../constants-C_OX3J7_.mjs";
+import "../index-HhQuz4hd.mjs";
+import { THEME, Theme } from "../theme-ECp4BKXJ.mjs";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-CFstRAZ_.mjs";
+import { IconButton } from "../index-B5cZ2bgU.mjs";
+import { IconWithTextButton } from "../index-BNr6dtKF.mjs";
+import { WEIGHT, Weight } from "../constants-jR2WUCRY.mjs";
+import { MenuButton } from "../index-Cav_aW5H.mjs";
+import { PillButton } from "../index-Dg9CXOZr.mjs";
+import { TextButton } from "../index-C_Y_QOX7.mjs";
 import * as react0 from "react";
-import React$1, { FC, ReactElement } from "react";
 
-//#region src/button/components/text-button/index.d.ts
-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;
-};
-//#endregion
-//#region src/button/components/icon-button/index.d.ts
-type IconButtonProps = {
-  iconComponent: React$1.ReactElement;
-  theme?: Theme;
-  type?: Type;
-  disabled?: boolean;
-  active?: boolean;
-  className?: string;
-  onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
-};
-declare const IconButton: React$1.FC<IconButtonProps> & {
-  Theme: typeof THEME;
-  Type: typeof TYPE;
-};
-//#endregion
-//#region src/button/components/menu-button/index.d.ts
-type MenuButtonProps = {
-  text: string;
-  color: string;
-  fontWeight: Weight;
-  className?: string;
-  p1ClassName?: string;
-};
-declare const MenuButton: React$1.FC<MenuButtonProps> & {
-  FontWeight: typeof WEIGHT;
-};
-//#endregion
-//#region src/button/components/pill-button/index.d.ts
-type PillButtonProps = {
-  text?: string;
-  leftIconComponent?: React.ReactElement;
-  rightIconComponent?: React.ReactElement;
-  size?: Size;
-  theme?: Theme;
-  type?: Type;
-  style?: Style;
-  disabled?: boolean;
-  loading?: boolean;
-  className?: string;
-};
-declare const PillButton: FC<PillButtonProps> & {
-  Theme: typeof THEME;
-  Type: typeof TYPE;
-  Size: typeof SIZE;
-  Style: typeof STYLE;
-};
-//#endregion
-//#region src/button/components/icon-with-text-button/index.d.ts
-type IconWithTextButtonProps = {
-  text?: string;
-  iconComponent: React.ReactNode;
-  theme?: Theme;
-  disabled?: boolean;
-  active?: boolean;
-  hideText?: boolean;
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-};
-declare const IconWithTextButton: FC<IconWithTextButtonProps> & {
-  Theme: typeof THEME;
-};
-//#endregion
 //#region src/button/index.d.ts
 declare const _default: {
   TextButton: react0.FC<{

package/lib/button/index.d.ts

@@ -1,97 +1,20 @@
 import "../index-H3peA2d_.js";
-import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-gCmka4Fp.js";
-import { THEME, Theme } from "../theme-BDGfJ8n-.js";
-import { WEIGHT, Weight } from "../constants-CZ7dxJ-t.js";
-import * as react0 from "react";
-import React$1, { FC, ReactElement } from "react";
+import { THEME, Theme } from "../theme-Ce9CLqLS.js";
+import { SIZE, STYLE, Size, Style, TYPE, Type } from "../constants-YK2KhqPU.js";
+import { IconButton } from "../index-D9_HCa05.js";
+import { IconWithTextButton } from "../index-BLWHIu0E.js";
+import { WEIGHT, Weight } from "../constants-BC_JdEyk.js";
+import { MenuButton } from "../index-XkB8HVPQ.js";
+import { PillButton } from "../index-B1cqLG7H.js";
+import { TextButton } from "../index-B7-bdIVL.js";
+import * as react16 from "react";
 
-//#region src/button/components/text-button/index.d.ts
-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;
-};
-//#endregion
-//#region src/button/components/icon-button/index.d.ts
-type IconButtonProps = {
-  iconComponent: React$1.ReactElement;
-  theme?: Theme;
-  type?: Type;
-  disabled?: boolean;
-  active?: boolean;
-  className?: string;
-  onClick?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
-};
-declare const IconButton: React$1.FC<IconButtonProps> & {
-  Theme: typeof THEME;
-  Type: typeof TYPE;
-};
-//#endregion
-//#region src/button/components/menu-button/index.d.ts
-type MenuButtonProps = {
-  text: string;
-  color: string;
-  fontWeight: Weight;
-  className?: string;
-  p1ClassName?: string;
-};
-declare const MenuButton: React$1.FC<MenuButtonProps> & {
-  FontWeight: typeof WEIGHT;
-};
-//#endregion
-//#region src/button/components/pill-button/index.d.ts
-type PillButtonProps = {
-  text?: string;
-  leftIconComponent?: React.ReactElement;
-  rightIconComponent?: React.ReactElement;
-  size?: Size;
-  theme?: Theme;
-  type?: Type;
-  style?: Style;
-  disabled?: boolean;
-  loading?: boolean;
-  className?: string;
-};
-declare const PillButton: FC<PillButtonProps> & {
-  Theme: typeof THEME;
-  Type: typeof TYPE;
-  Size: typeof SIZE;
-  Style: typeof STYLE;
-};
-//#endregion
-//#region src/button/components/icon-with-text-button/index.d.ts
-type IconWithTextButtonProps = {
-  text?: string;
-  iconComponent: React.ReactNode;
-  theme?: Theme;
-  disabled?: boolean;
-  active?: boolean;
-  hideText?: boolean;
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-};
-declare const IconWithTextButton: FC<IconWithTextButtonProps> & {
-  Theme: typeof THEME;
-};
-//#endregion
 //#region src/button/index.d.ts
 declare const _default: {
-  TextButton: react0.FC<{
+  TextButton: react16.FC<{
     text: string;
-    leftIconComponent?: react0.ReactElement;
-    rightIconComponent?: react0.ReactElement;
+    leftIconComponent?: react16.ReactElement;
+    rightIconComponent?: react16.ReactElement;
     size?: Size;
     style?: Style;
     theme?: Theme;
@@ -104,7 +27,7 @@ declare const _default: {
     Style: typeof STYLE;
     Theme: typeof THEME;
   };
-  IconButton: react0.FC<{
+  IconButton: react16.FC<{
     iconComponent: React.ReactElement;
     theme?: Theme;
     type?: Type;
@@ -116,7 +39,7 @@ declare const _default: {
     Theme: typeof THEME;
     Type: typeof TYPE;
   };
-  MenuButton: react0.FC<{
+  MenuButton: react16.FC<{
     text: string;
     color: string;
     fontWeight: Weight;
@@ -125,7 +48,7 @@ declare const _default: {
   }> & {
     FontWeight: typeof WEIGHT;
   };
-  PillButton: react0.FC<{
+  PillButton: react16.FC<{
     text?: string;
     leftIconComponent?: React.ReactElement;
     rightIconComponent?: React.ReactElement;
@@ -142,7 +65,7 @@ declare const _default: {
     Size: typeof SIZE;
     Style: typeof STYLE;
   };
-  IconWithTextButton: react0.FC<{
+  IconWithTextButton: react16.FC<{
     text?: string;
     iconComponent: React.ReactNode;
     theme?: Theme;

package/lib/button/index.js

@@ -1,13 +1,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 require('../constants-BmxSMOOn.js');
 require('../constants-Cndhv6qr.js');
-require('../paragraph-iuz3jP0Q.js');
+require('../paragraph-Bve022HS.js');
 require('../theme-DDBlIbeS.js');
-const require_button = require('../button-Dk0MxlKd.js');
+require('../theme-ingLagfo.js');
+const require_text_button = require('../text-button-DlMVqsvV.js');
+require('../theme-B5GNXw4M.js');
+const require_icon_button = require('../icon-button-Vqwyow05.js');
+const require_menu_button = require('../menu-button-DP302FyB.js');
+require('../theme-VVqGnnPq.js');
+const require_pill_button = require('../pill-button-CNbShnjT.js');
+require('../theme-B4rsurcB.js');
+const require_icon_with_text_button = require('../icon-with-text-button-DOj_-gz0.js');
+const require_button = require('../button-BLRV4Hwe.js');
 
-exports.IconButton = require_button.icon_button_default;
-exports.IconWithTextButton = require_button.icon_with_text_button_default;
-exports.MenuButton = require_button.menu_button_default;
-exports.PillButton = require_button.pill_button_default;
-exports.TextButton = require_button.text_button_default;
+exports.IconButton = require_icon_button.icon_button_default;
+exports.IconWithTextButton = require_icon_with_text_button.icon_with_text_button_default;
+exports.MenuButton = require_menu_button.menu_button_default;
+exports.PillButton = require_pill_button.pill_button_default;
+exports.TextButton = require_text_button.text_button_default;
 exports.default = require_button.button_default;

package/lib/button/index.mjs

@@ -1,7 +1,16 @@
 import "../constants-oTHAnh6r.mjs";
 import "../constants-CBSEPx91.mjs";
-import "../paragraph-Cf9jr8RF.mjs";
+import "../paragraph-QihuIWot.mjs";
 import "../theme-BG6yZVj-.mjs";
-import { button_default, icon_button_default, icon_with_text_button_default, menu_button_default, pill_button_default, text_button_default } from "../button-D_AWI7r9.mjs";
+import "../theme-gPGrAR2u.mjs";
+import { text_button_default } from "../text-button-DkD8OA65.mjs";
+import "../theme-CJDY-Vlz.mjs";
+import { icon_button_default } from "../icon-button-B-71Zncn.mjs";
+import { menu_button_default } from "../menu-button-BzXGdc8T.mjs";
+import "../theme-YXaUsVJu.mjs";
+import { pill_button_default } from "../pill-button-y0eh5cgT.mjs";
+import "../theme-CKrQVNS4.mjs";
+import { icon_with_text_button_default } from "../icon-with-text-button-CTWmp6He.mjs";
+import { button_default } from "../button-ubJKEMLe.mjs";
 
 export { icon_button_default as IconButton, icon_with_text_button_default as IconWithTextButton, menu_button_default as MenuButton, pill_button_default as PillButton, text_button_default as TextButton, button_default as default };

package/lib/button-BLRV4Hwe.js

@@ -0,0 +1,23 @@
+const require_text_button = require('./text-button-DlMVqsvV.js');
+const require_icon_button = require('./icon-button-Vqwyow05.js');
+const require_menu_button = require('./menu-button-DP302FyB.js');
+const require_pill_button = require('./pill-button-CNbShnjT.js');
+const require_icon_with_text_button = require('./icon-with-text-button-DOj_-gz0.js');
+
+//#region src/button/index.ts
+var button_default = {
+	TextButton: require_text_button.text_button_default,
+	IconButton: require_icon_button.icon_button_default,
+	MenuButton: require_menu_button.menu_button_default,
+	PillButton: require_pill_button.pill_button_default,
+	IconWithTextButton: require_icon_with_text_button.icon_with_text_button_default
+};
+
+//#endregion
+Object.defineProperty(exports, 'button_default', {
+  enumerable: true,
+  get: function () {
+    return button_default;
+  }
+});
+//# sourceMappingURL=button-BLRV4Hwe.js.map

package/lib/button-BLRV4Hwe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-BLRV4Hwe.js","names":[],"sources":["../src/button/index.ts"],"sourcesContent":["import TextButton from './components/text-button'\nimport IconButton from './components/icon-button'\nimport MenuButton from './components/menu-button'\nimport PillButton from './components/pill-button'\nimport IconWithTextButton from './components/icon-with-text-button'\n\nexport { TextButton, IconButton, MenuButton, PillButton, IconWithTextButton }\n\nexport default {\n  TextButton,\n  IconButton,\n  MenuButton,\n  PillButton,\n  IconWithTextButton,\n}\n"],"mappings":";;;;;;;AAQA,qBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/lib/button-ubJKEMLe.mjs

@@ -0,0 +1,18 @@
+import { text_button_default } from "./text-button-DkD8OA65.mjs";
+import { icon_button_default } from "./icon-button-B-71Zncn.mjs";
+import { menu_button_default } from "./menu-button-BzXGdc8T.mjs";
+import { pill_button_default } from "./pill-button-y0eh5cgT.mjs";
+import { icon_with_text_button_default } from "./icon-with-text-button-CTWmp6He.mjs";
+
+//#region src/button/index.ts
+var button_default = {
+	TextButton: text_button_default,
+	IconButton: icon_button_default,
+	MenuButton: menu_button_default,
+	PillButton: pill_button_default,
+	IconWithTextButton: icon_with_text_button_default
+};
+
+//#endregion
+export { button_default };
+//# sourceMappingURL=button-ubJKEMLe.mjs.map

package/lib/button-ubJKEMLe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-ubJKEMLe.mjs","names":[],"sources":["../src/button/index.ts"],"sourcesContent":["import TextButton from './components/text-button'\nimport IconButton from './components/icon-button'\nimport MenuButton from './components/menu-button'\nimport PillButton from './components/pill-button'\nimport IconWithTextButton from './components/icon-with-text-button'\n\nexport { TextButton, IconButton, MenuButton, PillButton, IconWithTextButton }\n\nexport default {\n  TextButton,\n  IconButton,\n  MenuButton,\n  PillButton,\n  IconWithTextButton,\n}\n"],"mappings":";;;;;;;AAQA,qBAAe;CACb;CACA;CACA;CACA;CACA;CACD"}

package/lib/card/list/constants.d.mts

@@ -0,0 +1,3 @@
+import "../../index-HhQuz4hd.mjs";
+import { SIZE, Size } from "../../constants-DP5x2xfg.mjs";
+export { SIZE, Size };

package/lib/card/list/constants.d.ts

@@ -0,0 +1,3 @@
+import "../../index-H3peA2d_.js";
+import { SIZE, Size } from "../../constants-Dk98cPGb.js";
+export { SIZE, Size };

package/lib/card/list/constants.js

@@ -0,0 +1,3 @@
+const require_constants = require('../../constants-CCYwjB2d.js');
+
+exports.SIZE = require_constants.SIZE;

package/lib/card/list/constants.mjs

@@ -0,0 +1,3 @@
+import { SIZE } from "../../constants-BZZgQcEy.mjs";
+
+export { SIZE };

package/lib/card/list/img-placeholder.d.mts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/card/list/img-placeholder.d.ts
+declare const ImgPlaceholder: () => react_jsx_runtime10.JSX.Element;
+//#endregion
+export { ImgPlaceholder as default };
+//# sourceMappingURL=img-placeholder.d.mts.map

package/lib/card/list/img-placeholder.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime10 from "react/jsx-runtime";
+
+//#region src/card/list/img-placeholder.d.ts
+declare const ImgPlaceholder: () => react_jsx_runtime10.JSX.Element;
+export = ImgPlaceholder;
+//# sourceMappingURL=img-placeholder.d.ts.map

package/lib/card/list/img-placeholder.js

@@ -0,0 +1,3 @@
+const require_img_placeholder = require('../../img-placeholder-D-fbn9IG.js');
+
+module.exports = require_img_placeholder.img_placeholder_default;

package/lib/card/list/img-placeholder.mjs

@@ -0,0 +1,3 @@
+import { img_placeholder_default } from "../../img-placeholder-DhOOFcVQ.mjs";
+
+export { img_placeholder_default as default };

package/lib/card/list/index.d.mts

@@ -0,0 +1,30 @@
+import "../../index-HhQuz4hd.mjs";
+import { SIZE, Size } from "../../constants-DP5x2xfg.mjs";
+import { FC } from "react";
+
+//#region src/card/list/index.d.ts
+type CardListBaseProps = {
+  categoryLabel?: string;
+  publishedDate?: string;
+  title: string;
+  description: string;
+  image?: {
+    src: string;
+    alt?: string;
+  };
+  size: Size;
+};
+type CardListLoadingProps = {
+  isLoading: true;
+  size: Size;
+};
+type CardListDetailProps = CardListBaseProps & {
+  isLoading?: false;
+};
+type CardListProps = CardListLoadingProps | CardListDetailProps;
+declare const CardList: FC<CardListProps> & {
+  Size: typeof SIZE;
+};
+//#endregion
+export { CardList as default };
+//# sourceMappingURL=index.d.mts.map

package/lib/card/list/index.d.ts

@@ -0,0 +1,29 @@
+import "../../index-H3peA2d_.js";
+import { SIZE, Size } from "../../constants-Dk98cPGb.js";
+import { FC } from "react";
+
+//#region src/card/list/index.d.ts
+type CardListBaseProps = {
+  categoryLabel?: string;
+  publishedDate?: string;
+  title: string;
+  description: string;
+  image?: {
+    src: string;
+    alt?: string;
+  };
+  size: Size;
+};
+type CardListLoadingProps = {
+  isLoading: true;
+  size: Size;
+};
+type CardListDetailProps = CardListBaseProps & {
+  isLoading?: false;
+};
+type CardListProps = CardListLoadingProps | CardListDetailProps;
+declare const CardList: FC<CardListProps> & {
+  Size: typeof SIZE;
+};
+export = CardList;
+//# sourceMappingURL=index.d.ts.map

package/lib/card/list/index.js

@@ -0,0 +1,109 @@
+const require_chunk = require('../../chunk-BxBTb9qk.js');
+require('../../constants-Cndhv6qr.js');
+const require_paragraph = require('../../paragraph-Bve022HS.js');
+const require_heading = require('../../heading-D5Lv6X0M.js');
+const require_constants$1 = require('../../constants-CCYwjB2d.js');
+const require_img_placeholder = require('../../img-placeholder-D-fbn9IG.js');
+const require_loading = require('../../loading-CFCk4kkD.js');
+let react = require("react");
+react = require_chunk.__toESM(react);
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+
+//#region src/card/list/index.tsx
+const CardList = (props) => {
+	const { size, isLoading = false } = props;
+	const [failedImageKey, setFailedImageKey] = (0, react.useState)(null);
+	const imageSrc = "image" in props ? props.image?.src : void 0;
+	const imageKey = `${size}:${imageSrc ?? ""}`;
+	const isImageFailed = failedImageKey === imageKey;
+	if (size === require_constants$1.SIZE.s) {
+		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_loading.SmallSkeleton, {});
+		const { categoryLabel: categoryLabel$1, publishedDate: publishedDate$1, title: title$1, description: description$1, image: image$1 } = props;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, clsx.default)("flex flex-col w-full gap-[8px]", "hover:opacity-70", "hover:cursor-pointer"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-row gap-[8px]",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col w-full gap-[4px]",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex flex-row gap-[8px]",
+						children: [categoryLabel$1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P3, {
+							className: "text-gray-600",
+							text: categoryLabel$1
+						}) : null, publishedDate$1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P3, {
+							className: "text-gray-600",
+							text: publishedDate$1
+						}) : null]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H4, {
+						className: "text-gray-800 !text-[18px]",
+						text: title$1,
+						type: require_heading.H4.Type.article
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex justify-center items-center",
+					children: image$1?.src && !isImageFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+						src: image$1.src,
+						alt: image$1.alt ?? "",
+						className: "w-[72px] h-[72px] object-cover shrink-0",
+						onError: () => setFailedImageKey(imageKey)
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "w-[72px] h-[72px] shrink-0 flex items-center justify-center bg-gray-100",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_img_placeholder.img_placeholder_default, {})
+					})
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P2, {
+				className: "text-gray-800 line-clamp-3",
+				text: description$1
+			})]
+		});
+	}
+	if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_loading.LargeSkeleton, {});
+	const { categoryLabel, publishedDate, title, description, image } = props;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, clsx.default)("flex flex-row w-full gap-[32px]", "hover:opacity-70", "hover:cursor-pointer"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col w-full gap-[8px]",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-row gap-[8px]",
+					children: [categoryLabel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P3, {
+						className: "text-gray-600",
+						text: categoryLabel
+					}) : null, publishedDate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P3, {
+						className: "text-gray-600",
+						text: publishedDate
+					}) : null]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.H4, {
+					className: "text-gray-800 !text-[22px]",
+					text: title,
+					type: require_heading.H4.Type.article
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paragraph.P1, {
+					className: "text-gray-800 line-clamp-3",
+					text: description
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex justify-center items-center",
+			children: image?.src && !isImageFailed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				src: image.src,
+				alt: image.alt ?? "",
+				className: "w-[216px] h-[144px] object-cover shrink-0",
+				onError: () => setFailedImageKey(imageKey)
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "w-[216px] h-[144px] shrink-0 flex items-center justify-center bg-gray-100",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_img_placeholder.img_placeholder_default, {})
+			})
+		})]
+	});
+};
+CardList.Size = require_constants$1.SIZE;
+var list_default = CardList;
+
+//#endregion
+module.exports = list_default;
+//# sourceMappingURL=index.js.map

package/lib/card/list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CardList: FC<CardListProps> & { Size: typeof SIZE }","SIZE","SmallSkeleton","categoryLabel","P3","publishedDate","H4","title","image","ImgPlaceholder","P2","description","LargeSkeleton","P1"],"sources":["../../../src/card/list/index.tsx"],"sourcesContent":["import { type FC, useState } from 'react'\nimport clsx from 'clsx'\n// text\nimport { P1, P2, P3 } from '../../text/paragraph'\nimport { H4 } from '../../text/heading'\n// constants\nimport { SIZE, type Size } from './constants'\n// skeleton\nimport { LargeSkeleton, SmallSkeleton } from './loading'\n// placeholder\nimport ImgPlaceholder from './img-placeholder'\n\ntype CardListBaseProps = {\n  categoryLabel?: string\n  publishedDate?: string\n  title: string\n  description: string\n  image?: {\n    src: string\n    alt?: string\n  }\n  size: Size\n  // TODO: add isBookmark when bookmark feature is ready\n  // isBookmark?: boolean\n  // onBookmarkClick?: () => void\n}\n\ntype CardListLoadingProps = {\n  isLoading: true\n  size: Size\n}\n\ntype CardListDetailProps = CardListBaseProps & {\n  isLoading?: false\n}\n\ntype CardListProps = CardListLoadingProps | CardListDetailProps\n\nconst CardList: FC<CardListProps> & { Size: typeof SIZE } = (props) => {\n  const { size, isLoading = false } = props\n  const [failedImageKey, setFailedImageKey] = useState<string | null>(null)\n  const imageSrc = 'image' in props ? props.image?.src : undefined\n  const imageKey = `${size}:${imageSrc ?? ''}`\n  const isImageFailed = failedImageKey === imageKey\n\n  if (size === SIZE.s) {\n    if (isLoading) {\n      return <SmallSkeleton />\n    }\n    const { categoryLabel, publishedDate, title, description, image } =\n      props as CardListDetailProps\n    return (\n      <div\n        className={clsx(\n          'flex flex-col w-full gap-[8px]',\n          'hover:opacity-70',\n          'hover:cursor-pointer'\n        )}\n      >\n        <div className=\"flex flex-row gap-[8px]\">\n          <div className=\"flex flex-col w-full gap-[4px]\">\n            <div className=\"flex flex-row gap-[8px]\">\n              {categoryLabel ? (\n                <P3 className=\"text-gray-600\" text={categoryLabel} />\n              ) : null}\n              {publishedDate ? (\n                <P3 className=\"text-gray-600\" text={publishedDate} />\n              ) : null}\n            </div>\n            <H4\n              className=\"text-gray-800 !text-[18px]\"\n              text={title}\n              type={H4.Type.article}\n            />\n          </div>\n          <div className=\"flex justify-center items-center\">\n            {image?.src && !isImageFailed ? (\n              // biome-ignore lint/performance/noImgElement: use next image later\n              <img\n                src={image.src}\n                alt={image.alt ?? ''}\n                className=\"w-[72px] h-[72px] object-cover shrink-0\"\n                onError={() => setFailedImageKey(imageKey)}\n              />\n            ) : (\n              <div className=\"w-[72px] h-[72px] shrink-0 flex items-center justify-center bg-gray-100\">\n                <ImgPlaceholder />\n              </div>\n            )}\n          </div>\n        </div>\n        <P2 className=\"text-gray-800 line-clamp-3\" text={description} />\n      </div>\n    )\n  }\n\n  if (isLoading) {\n    return <LargeSkeleton />\n  }\n\n  const { categoryLabel, publishedDate, title, description, image } =\n    props as CardListDetailProps\n  return (\n    <div\n      className={clsx(\n        'flex flex-row w-full gap-[32px]',\n        'hover:opacity-70',\n        'hover:cursor-pointer'\n      )}\n    >\n      <div className=\"flex flex-col w-full gap-[8px]\">\n        <div className=\"flex flex-row gap-[8px]\">\n          {categoryLabel ? (\n            <P3 className=\"text-gray-600\" text={categoryLabel} />\n          ) : null}\n          {publishedDate ? (\n            <P3 className=\"text-gray-600\" text={publishedDate} />\n          ) : null}\n        </div>\n        <H4\n          className=\"text-gray-800 !text-[22px]\"\n          text={title}\n          type={H4.Type.article}\n        />\n        <P1 className=\"text-gray-800 line-clamp-3\" text={description} />\n      </div>\n      <div className=\"flex justify-center items-center\">\n        {image?.src && !isImageFailed ? (\n          // biome-ignore lint/performance/noImgElement: use next image later\n          <img\n            src={image.src}\n            alt={image.alt ?? ''}\n            className=\"w-[216px] h-[144px] object-cover shrink-0\"\n            onError={() => setFailedImageKey(imageKey)}\n          />\n        ) : (\n          <div className=\"w-[216px] h-[144px] shrink-0 flex items-center justify-center bg-gray-100\">\n            <ImgPlaceholder />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nCardList.Size = SIZE\nexport default CardList\n"],"mappings":";;;;;;;;;;;;;;;AAsCA,MAAMA,YAAuD,UAAU;CACrE,MAAM,EAAE,MAAM,YAAY,UAAU;CACpC,MAAM,CAAC,gBAAgB,yCAA6C,KAAK;CACzE,MAAM,WAAW,WAAW,QAAQ,MAAM,OAAO,MAAM;CACvD,MAAM,WAAW,GAAG,KAAK,GAAG,YAAY;CACxC,MAAM,gBAAgB,mBAAmB;AAEzC,KAAI,SAASC,yBAAK,GAAG;AACnB,MAAI,UACF,QAAO,2CAACC,kCAAgB;EAE1B,MAAM,EAAE,gCAAe,gCAAe,gBAAO,4BAAa,mBACxD;AACF,SACE,4CAAC;GACC,6BACE,kCACA,oBACA,uBACD;cAED,4CAAC;IAAI,WAAU;eACb,4CAAC;KAAI,WAAU;gBACb,4CAAC;MAAI,WAAU;iBACZC,kBACC,2CAACC;OAAG,WAAU;OAAgB,MAAMD;QAAiB,GACnD,MACHE,kBACC,2CAACD;OAAG,WAAU;OAAgB,MAAMC;QAAiB,GACnD;OACA,EACN,2CAACC;MACC,WAAU;MACV,MAAMC;MACN,MAAMD,mBAAG,KAAK;OACd;MACE,EACN,2CAAC;KAAI,WAAU;eACZE,SAAO,OAAO,CAAC,gBAEd,2CAAC;MACC,KAAKA,QAAM;MACX,KAAKA,QAAM,OAAO;MAClB,WAAU;MACV,eAAe,kBAAkB,SAAS;OAC1C,GAEF,2CAAC;MAAI,WAAU;gBACb,2CAACC,oDAAiB;OACd;MAEJ;KACF,EACN,2CAACC;IAAG,WAAU;IAA6B,MAAMC;KAAe;IAC5D;;AAIV,KAAI,UACF,QAAO,2CAACC,kCAAgB;CAG1B,MAAM,EAAE,eAAe,eAAe,OAAO,aAAa,UACxD;AACF,QACE,4CAAC;EACC,6BACE,mCACA,oBACA,uBACD;aAED,4CAAC;GAAI,WAAU;;IACb,4CAAC;KAAI,WAAU;gBACZ,gBACC,2CAACR;MAAG,WAAU;MAAgB,MAAM;OAAiB,GACnD,MACH,gBACC,2CAACA;MAAG,WAAU;MAAgB,MAAM;OAAiB,GACnD;MACA;IACN,2CAACE;KACC,WAAU;KACV,MAAM;KACN,MAAMA,mBAAG,KAAK;MACd;IACF,2CAACO;KAAG,WAAU;KAA6B,MAAM;MAAe;;IAC5D,EACN,2CAAC;GAAI,WAAU;aACZ,OAAO,OAAO,CAAC,gBAEd,2CAAC;IACC,KAAK,MAAM;IACX,KAAK,MAAM,OAAO;IAClB,WAAU;IACV,eAAe,kBAAkB,SAAS;KAC1C,GAEF,2CAAC;IAAI,WAAU;cACb,2CAACJ,oDAAiB;KACd;IAEJ;GACF;;AAIV,SAAS,OAAOR;AAChB,mBAAe"}