@kkcompany/app-ui 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +40 -7
  2. package/dist/index.d.cts +4 -4
  3. package/dist/index.d.mts +4 -4
  4. package/dist/index.mjs +40 -7
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -197,14 +197,21 @@ const tagBaseStyles = {
197
197
  gap: "0.4em",
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
- fontSize: "0.625rem",
200
+ fontSize: "10px",
201
201
  wordBreak: "keep-all",
202
202
  "> div": {
203
- padding: "0.4em 0.6em",
203
+ padding: "3px 6px",
204
204
  borderRadius: "0.2em",
205
205
  fontWeight: 600,
206
206
  background: "var(--tag-background)",
207
- boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
207
+ boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
208
+ height: "15px",
209
+ lineHeight: "15px",
210
+ "@media (max-width: 600px)": {
211
+ padding: "2px 6px",
212
+ height: "11px",
213
+ lineHeight: "11px"
214
+ }
208
215
  }
209
216
  }
210
217
  };
@@ -213,6 +220,22 @@ const tagBottomStyles = {
213
220
  "--tag-color": "#000",
214
221
  "--tag-background": "#fff"
215
222
  };
223
+ const newTagStyles = {
224
+ width: "26px",
225
+ "@media (max-width: 600px)": { width: "18px" }
226
+ };
227
+ const onSaleTagStyles = {
228
+ width: "40px",
229
+ "@media (max-width: 600px)": { width: "28px" }
230
+ };
231
+ const freeTagStyles = {
232
+ width: "20px",
233
+ "@media (max-width: 600px)": { width: "14px" }
234
+ };
235
+ const megaTagStyles = {
236
+ width: "30px",
237
+ "@media (max-width: 600px)": { width: "21px" }
238
+ };
216
239
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
217
240
  const components = {
218
241
  Link: "a",
@@ -241,9 +264,19 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
241
264
  }),
242
265
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
243
266
  css: tagBaseStyles,
244
- 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", {
245
- css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
246
- children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
267
+ children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
268
+ css: [
269
+ tag === "NEW" && newTagStyles,
270
+ tag === "セール中" && onSaleTagStyles,
271
+ tag === "無料" && freeTagStyles
272
+ ],
273
+ children: tag
274
+ }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
275
+ css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
276
+ children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
277
+ css: [tag === "見放題" && megaTagStyles],
278
+ children: tag
279
+ }, tag))
247
280
  })]
248
281
  })
249
282
  ]
@@ -297,7 +330,7 @@ const infoStyle = {
297
330
  minWidth: "0"
298
331
  }
299
332
  },
300
- "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
333
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
301
334
  };
302
335
  const titleStyle = {
303
336
  display: "-webkit-box",
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
2
2
  import { CSSObject } from "@emotion/react";
3
3
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
4
4
  import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
10
10
  }: {
11
11
  style?: {};
12
12
  src: any;
13
- }) => _emotion_react_jsx_runtime0.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
14
14
  //#endregion
15
15
  //#region src/SeeMore.d.ts
16
16
  declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
26
26
  style?: CSSObject;
27
27
  messages?: typeof defaultMessages;
28
28
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime0.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
30
30
  //#endregion
31
31
  //#region src/VideoItem.d.ts
32
32
  type VideoDetail = {
@@ -88,6 +88,6 @@ declare const VideoThumbnail: ({
88
88
  Image?: ElementType;
89
89
  };
90
90
  onClick?: MouseEventHandler<HTMLAnchorElement>;
91
- }) => _emotion_react_jsx_runtime0.JSX.Element;
91
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
92
92
  //#endregion
93
93
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- import * as _emotion_react_jsx_runtime0 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime1 from "@emotion/react/jsx-runtime";
2
2
  import { ElementType, MouseEventHandler, ReactElement, ReactNode } from "react";
3
3
  import { CSSObject } from "@emotion/react";
4
4
  import Link from "next/link";
@@ -10,7 +10,7 @@ declare const Icon: ({
10
10
  }: {
11
11
  style?: {};
12
12
  src: any;
13
- }) => _emotion_react_jsx_runtime0.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
14
14
  //#endregion
15
15
  //#region src/SeeMore.d.ts
16
16
  declare const defaultMessages: {
@@ -26,7 +26,7 @@ declare const SeeMore: ({
26
26
  style?: CSSObject;
27
27
  messages?: typeof defaultMessages;
28
28
  children?: ReactNode;
29
- }) => _emotion_react_jsx_runtime0.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
30
30
  //#endregion
31
31
  //#region src/VideoItem.d.ts
32
32
  type VideoDetail = {
@@ -88,6 +88,6 @@ declare const VideoThumbnail: ({
88
88
  Image?: ElementType;
89
89
  };
90
90
  onClick?: MouseEventHandler<HTMLAnchorElement>;
91
- }) => _emotion_react_jsx_runtime0.JSX.Element;
91
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
92
92
  //#endregion
93
93
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -197,14 +197,21 @@ const tagBaseStyles = {
197
197
  gap: "0.4em",
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
- fontSize: "0.625rem",
200
+ fontSize: "10px",
201
201
  wordBreak: "keep-all",
202
202
  "> div": {
203
- padding: "0.4em 0.6em",
203
+ padding: "3px 6px",
204
204
  borderRadius: "0.2em",
205
205
  fontWeight: 600,
206
206
  background: "var(--tag-background)",
207
- boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)"
207
+ boxShadow: "0 2px 4px 0 rgba(0,0,0,0.25)",
208
+ height: "15px",
209
+ lineHeight: "15px",
210
+ "@media (max-width: 600px)": {
211
+ padding: "2px 6px",
212
+ height: "11px",
213
+ lineHeight: "11px"
214
+ }
208
215
  }
209
216
  }
210
217
  };
@@ -213,6 +220,22 @@ const tagBottomStyles = {
213
220
  "--tag-color": "#000",
214
221
  "--tag-background": "#fff"
215
222
  };
223
+ const newTagStyles = {
224
+ width: "26px",
225
+ "@media (max-width: 600px)": { width: "18px" }
226
+ };
227
+ const onSaleTagStyles = {
228
+ width: "40px",
229
+ "@media (max-width: 600px)": { width: "28px" }
230
+ };
231
+ const freeTagStyles = {
232
+ width: "20px",
233
+ "@media (max-width: 600px)": { width: "14px" }
234
+ };
235
+ const megaTagStyles = {
236
+ width: "30px",
237
+ "@media (max-width: 600px)": { width: "21px" }
238
+ };
216
239
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
217
240
  const components = {
218
241
  Link: "a",
@@ -241,9 +264,19 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
241
264
  }),
242
265
  /* @__PURE__ */ jsxs("div", {
243
266
  css: tagBaseStyles,
244
- children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
245
- css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
246
- children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
267
+ children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", {
268
+ css: [
269
+ tag === "NEW" && newTagStyles,
270
+ tag === "セール中" && onSaleTagStyles,
271
+ tag === "無料" && freeTagStyles
272
+ ],
273
+ children: tag
274
+ }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
275
+ css: [tagBottomStyles, progress >= 0 && { marginBottom: "8px" }],
276
+ children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", {
277
+ css: [tag === "見放題" && megaTagStyles],
278
+ children: tag
279
+ }, tag))
247
280
  })]
248
281
  })
249
282
  ]
@@ -297,7 +330,7 @@ const infoStyle = {
297
330
  minWidth: "0"
298
331
  }
299
332
  },
300
- "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "0.45rem" } }
333
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { fontSize: "7px" } }
301
334
  };
302
335
  const titleStyle = {
303
336
  display: "-webkit-box",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",