@kkcompany/app-ui 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -197,14 +197,21 @@ const tagBaseStyles = {
 		gap: "0.4em",
 		color: "var(--tag-color)",
 		justifyContent: "var(--tag-justify-content, flex-start)",
-		fontSize: "0.625rem",
+		fontSize: "10px",
 		wordBreak: "keep-all",
 		"> div": {
-			padding: "0.4em 0.6em",
+			padding: "3px 6px",
 			borderRadius: "0.2em",
 			fontWeight: 600,
 			background: "var(--tag-background)",
-			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
+			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
+			height: "15px",
+			lineHeight: "15px",
+			"@media (max-width: 600px)": {
+				padding: "2px 6px",
+				height: "11px",
+				lineHeight: "11px"
+			}
 		}
 	}
 };
@@ -213,6 +220,22 @@ const tagBottomStyles = {
 	"--tag-color": "#000",
 	"--tag-background": "#fff"
 };
+const newTagStyles = {
+	width: "26px",
+	"@media (max-width: 600px)": { width: "18px" }
+};
+const onSaleTagStyles = {
+	width: "40px",
+	"@media (max-width: 600px)": { width: "28px" }
+};
+const freeTagStyles = {
+	width: "20px",
+	"@media (max-width: 600px)": { width: "14px" }
+};
+const megaTagStyles = {
+	width: "30px",
+	"@media (max-width: 600px)": { width: "21px" }
+};
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
 		Link: "a",
@@ -225,6 +248,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 			css: videoThumbnailStyles,
 			href,
 			onClick,
+			onContextMenu: (event) => event.preventDefault(),
 			children: [
 				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(components.Image, {
 					css: thumbnailImageStyles,
@@ -240,9 +264,19 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 				}),
 				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 					css: tagBaseStyles,
-					children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
-						css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
-						children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
+					children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+						css: [
+							tag === "NEW" && newTagStyles,
+							tag === "セール中" && onSaleTagStyles,
+							tag === "無料" && freeTagStyles
+						],
+						children: tag
+					}, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+						css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
+						children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+							css: [tag === "見放題" && megaTagStyles],
+							children: tag
+						}, tag))
 					})]
 				})
 			]
@@ -279,7 +313,9 @@ const infoStyle = {
 		justifyContent: "center",
 		marginLeft: "1rem",
 		height: "auto",
-		flex: "1"
+		flex: "1",
+		"-webkit-touch-callout": "none",
+		"-webkit-user-select": "none"
 	},
 	"@media (min-width: 601px)": {
 		"--description-line-clamp": 3,
@@ -294,7 +330,7 @@ const infoStyle = {
 			minWidth: "0"
 		}
 	},
-	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
+	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
 };
 const titleStyle = {
 	display: "-webkit-box",
@@ -304,7 +340,7 @@ const titleStyle = {
 	textOverflow: "ellipsis"
 };
 const descriptionStyle = {
-	marginTop: "0.5rem",
+	paddingTop: "0.5rem",
 	display: "var(--description-display, -webkit-box)",
 	overflow: "hidden",
 	WebkitBoxOrient: "vertical",
@@ -321,9 +357,17 @@ const descriptionStyle = {
 };
 const desktopDescriptionStyle = {
 	display: "var(--desktop-description-display, -webkit-box)",
-	margin: "0.75rem 0",
+	padding: "0.75rem 0",
 	WebkitLineClamp: 3
 };
+const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(slots.Link, {
+	href,
+	...rest,
+	children
+}) : /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("a", {
+	...rest,
+	children
+});
 const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
 	css: [videoItemStyle, style],
 	children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
@@ -337,7 +381,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 			slots,
 			onClick: onClickThumbnail,
 			children: thumbnailChildren
-		}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
+		}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(OptionalLink, {
+			slots,
 			href,
 			children: [
 				/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
@@ -351,7 +396,9 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 				secondaryText ? /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: secondaryText }) : null
 			]
 		})]
-	}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
+	}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)(OptionalLink, {
+		slots,
+		href,
 		css: descriptionStyle,
 		children: data.synopsis
 	})]

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
 import { CSSObject } from "@emotion/react";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
   style?: CSSObject;
   messages?: typeof defaultMessages;
   children?: ReactNode;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/VideoItem.d.ts
 type VideoDetail = {
@@ -88,6 +88,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
+import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
 import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
 import { CSSObject } from "@emotion/react";
 import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
 }: {
   style?: {};
   src: any;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/SeeMore.d.ts
 declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
   style?: CSSObject;
   messages?: typeof defaultMessages;
   children?: ReactNode;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/VideoItem.d.ts
 type VideoDetail = {
@@ -88,6 +88,6 @@ declare const VideoThumbnail: ({
     Image?: ElementType;
   };
   onClick?: MouseEventHandler<HTMLAnchorElement>;
-}) => _emotion_react_jsx_runtime0.JSX.Element;
+}) => _emotion_react_jsx_runtime1.JSX.Element;
 //#endregion
 export { Icon, SeeMore, VideoItem, VideoThumbnail };

package/dist/index.mjs

@@ -197,14 +197,21 @@ const tagBaseStyles = {
 		gap: "0.4em",
 		color: "var(--tag-color)",
 		justifyContent: "var(--tag-justify-content, flex-start)",
-		fontSize: "0.625rem",
+		fontSize: "10px",
 		wordBreak: "keep-all",
 		"> div": {
-			padding: "0.4em 0.6em",
+			padding: "3px 6px",
 			borderRadius: "0.2em",
 			fontWeight: 600,
 			background: "var(--tag-background)",
-			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
+			boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
+			height: "15px",
+			lineHeight: "15px",
+			"@media (max-width: 600px)": {
+				padding: "2px 6px",
+				height: "11px",
+				lineHeight: "11px"
+			}
 		}
 	}
 };
@@ -213,6 +220,22 @@ const tagBottomStyles = {
 	"--tag-color": "#000",
 	"--tag-background": "#fff"
 };
+const newTagStyles = {
+	width: "26px",
+	"@media (max-width: 600px)": { width: "18px" }
+};
+const onSaleTagStyles = {
+	width: "40px",
+	"@media (max-width: 600px)": { width: "28px" }
+};
+const freeTagStyles = {
+	width: "20px",
+	"@media (max-width: 600px)": { width: "14px" }
+};
+const megaTagStyles = {
+	width: "30px",
+	"@media (max-width: 600px)": { width: "21px" }
+};
 const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
 	const components = {
 		Link: "a",
@@ -225,6 +248,7 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 			css: videoThumbnailStyles,
 			href,
 			onClick,
+			onContextMenu: (event) => event.preventDefault(),
 			children: [
 				/* @__PURE__ */ jsx(components.Image, {
 					css: thumbnailImageStyles,
@@ -240,9 +264,19 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					css: tagBaseStyles,
-					children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
-						css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
-						children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
+					children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", {
+						css: [
+							tag === "NEW" && newTagStyles,
+							tag === "セール中" && onSaleTagStyles,
+							tag === "無料" && freeTagStyles
+						],
+						children: tag
+					}, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
+						css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
+						children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", {
+							css: [tag === "見放題" && megaTagStyles],
+							children: tag
+						}, tag))
 					})]
 				})
 			]
@@ -279,7 +313,9 @@ const infoStyle = {
 		justifyContent: "center",
 		marginLeft: "1rem",
 		height: "auto",
-		flex: "1"
+		flex: "1",
+		"-webkit-touch-callout": "none",
+		"-webkit-user-select": "none"
 	},
 	"@media (min-width: 601px)": {
 		"--description-line-clamp": 3,
@@ -294,7 +330,7 @@ const infoStyle = {
 			minWidth: "0"
 		}
 	},
-	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
+	"@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
 };
 const titleStyle = {
 	display: "-webkit-box",
@@ -304,7 +340,7 @@ const titleStyle = {
 	textOverflow: "ellipsis"
 };
 const descriptionStyle = {
-	marginTop: "0.5rem",
+	paddingTop: "0.5rem",
 	display: "var(--description-display, -webkit-box)",
 	overflow: "hidden",
 	WebkitBoxOrient: "vertical",
@@ -321,9 +357,17 @@ const descriptionStyle = {
 };
 const desktopDescriptionStyle = {
 	display: "var(--desktop-description-display, -webkit-box)",
-	margin: "0.75rem 0",
+	padding: "0.75rem 0",
 	WebkitLineClamp: 3
 };
+const OptionalLink = ({ slots, href, children, ...rest }) => href ? /* @__PURE__ */ jsx(slots.Link, {
+	href,
+	...rest,
+	children
+}) : /* @__PURE__ */ jsx("a", {
+	...rest,
+	children
+});
 const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, secondaryText, progress, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
 	css: [videoItemStyle, style],
 	children: [/* @__PURE__ */ jsxs("div", {
@@ -337,7 +381,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 			slots,
 			onClick: onClickThumbnail,
 			children: thumbnailChildren
-		}), /* @__PURE__ */ jsxs(slots.Link, {
+		}), /* @__PURE__ */ jsxs(OptionalLink, {
+			slots,
 			href,
 			children: [
 				/* @__PURE__ */ jsx("div", {
@@ -351,7 +396,9 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
 				secondaryText ? /* @__PURE__ */ jsx("div", { children: secondaryText }) : null
 			]
 		})]
-	}), /* @__PURE__ */ jsx("div", {
+	}), /* @__PURE__ */ jsx(OptionalLink, {
+		slots,
+		href,
 		css: descriptionStyle,
 		children: data.synopsis
 	})]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kkcompany/app-ui",
-	"version": "0.1.11",
+	"version": "0.1.13",
 	"module": "dist/index.mjs",
 	"main": "dist/index.js",
 	"types": "dist/index.d.mts",