@kkcompany/app-ui 0.1.12 → 0.1.14

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",
-			borderRadius: "0.2em",
+			padding: "3px 6px",
+			borderRadius: "2px",
 			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 4px",
+				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",
@@ -241,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))
 					})]
 				})
 			]
@@ -297,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",

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.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",
-			borderRadius: "0.2em",
+			padding: "3px 6px",
+			borderRadius: "2px",
 			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 4px",
+				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",
@@ -241,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))
 					})]
 				})
 			]
@@ -297,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",

package/package.json

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