@kkcompany/app-ui 0.1.1 → 0.1.2

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 +18 -5
  2. package/dist/index.d.cts +3 -1
  3. package/dist/index.d.mts +7 -5
  4. package/dist/index.mjs +18 -5
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -37,6 +37,7 @@ const containerStyle = {
37
37
  "+ button": {
38
38
  marginTop: "0.75em",
39
39
  padding: "0",
40
+ color: "inherit",
40
41
  fontSize: "inherit",
41
42
  fontWeight: "bold",
42
43
  background: "none",
@@ -220,7 +221,10 @@ var VideoThumbnail_default = VideoThumbnail;
220
221
  const videoItemStyle = {
221
222
  padding: "0.75em 4%",
222
223
  display: "block",
223
- a: { textDecoration: "none" },
224
+ a: {
225
+ color: "#f5f5f5",
226
+ textDecoration: "none"
227
+ },
224
228
  "@media (max-width: 600px)": { "--desktop-description-display": "none" },
225
229
  "@media (min-width: 601px)": { "--description-display": "none" }
226
230
  };
@@ -232,8 +236,16 @@ const infoStyle = {
232
236
  "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
233
237
  "> a": { flex: "0 0 calc( 100% * 4 / 7 - 0.5em)" },
234
238
  "@media (min-width: 601px)": {
235
- "> div:first-of-type": { flex: "0 0 16.25em" },
236
- "> a": { flex: "0 0 calc(100% - 19em)" }
239
+ "> div:first-of-type": {
240
+ flex: "0 auto",
241
+ minWidth: "0",
242
+ maxWidth: "16.25em"
243
+ },
244
+ "> a": {
245
+ marginLeft: "2.75em",
246
+ flex: "1",
247
+ minWidth: "0"
248
+ }
237
249
  }
238
250
  };
239
251
  const descriptionStyle = {
@@ -250,7 +262,7 @@ const desktopDescriptionStyle = {
250
262
  margin: "0.5em 0",
251
263
  WebkitLineClamp: 3
252
264
  };
253
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
265
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
254
266
  css: [videoItemStyle, style],
255
267
  children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
256
268
  css: infoStyle,
@@ -260,7 +272,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
260
272
  topTags,
261
273
  bottomTags,
262
274
  slots,
263
- onClick: onClickThumbnail
275
+ onClick: onClickThumbnail,
276
+ children: thumbnailChildren
264
277
  }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)(slots.Link, {
265
278
  href,
266
279
  children: [data.title || data.display_text, /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
package/dist/index.d.cts CHANGED
@@ -43,7 +43,8 @@ declare const VideoItem: ({
43
43
  topTags,
44
44
  bottomTags,
45
45
  slots,
46
- onClickThumbnail
46
+ onClickThumbnail,
47
+ thumbnailChildren
47
48
  }: {
48
49
  style?: CSSObject;
49
50
  href?: string;
@@ -56,6 +57,7 @@ declare const VideoItem: ({
56
57
  Link?: ElementType | typeof Link;
57
58
  };
58
59
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
60
+ thumbnailChildren?: ReactNode;
59
61
  }) => ReactElement;
60
62
  //#endregion
61
63
  //#region src/VideoThumbnail.d.ts
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 = {
@@ -43,7 +43,8 @@ declare const VideoItem: ({
43
43
  topTags,
44
44
  bottomTags,
45
45
  slots,
46
- onClickThumbnail
46
+ onClickThumbnail,
47
+ thumbnailChildren
47
48
  }: {
48
49
  style?: CSSObject;
49
50
  href?: string;
@@ -56,6 +57,7 @@ declare const VideoItem: ({
56
57
  Link?: ElementType | typeof Link;
57
58
  };
58
59
  onClickThumbnail?: MouseEventHandler<HTMLAnchorElement>;
60
+ thumbnailChildren?: ReactNode;
59
61
  }) => ReactElement;
60
62
  //#endregion
61
63
  //#region src/VideoThumbnail.d.ts
@@ -82,6 +84,6 @@ declare const VideoThumbnail: ({
82
84
  Image?: ElementType;
83
85
  };
84
86
  onClick?: MouseEventHandler<HTMLAnchorElement>;
85
- }) => _emotion_react_jsx_runtime0.JSX.Element;
87
+ }) => _emotion_react_jsx_runtime1.JSX.Element;
86
88
  //#endregion
87
89
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -37,6 +37,7 @@ const containerStyle = {
37
37
  "+ button": {
38
38
  marginTop: "0.75em",
39
39
  padding: "0",
40
+ color: "inherit",
40
41
  fontSize: "inherit",
41
42
  fontWeight: "bold",
42
43
  background: "none",
@@ -220,7 +221,10 @@ var VideoThumbnail_default = VideoThumbnail;
220
221
  const videoItemStyle = {
221
222
  padding: "0.75em 4%",
222
223
  display: "block",
223
- a: { textDecoration: "none" },
224
+ a: {
225
+ color: "#f5f5f5",
226
+ textDecoration: "none"
227
+ },
224
228
  "@media (max-width: 600px)": { "--desktop-description-display": "none" },
225
229
  "@media (min-width: 601px)": { "--description-display": "none" }
226
230
  };
@@ -232,8 +236,16 @@ const infoStyle = {
232
236
  "> div:first-of-type": { flex: "0 0 calc( 100% * 3 / 7 - 0.5em)" },
233
237
  "> a": { flex: "0 0 calc( 100% * 4 / 7 - 0.5em)" },
234
238
  "@media (min-width: 601px)": {
235
- "> div:first-of-type": { flex: "0 0 16.25em" },
236
- "> a": { flex: "0 0 calc(100% - 19em)" }
239
+ "> div:first-of-type": {
240
+ flex: "0 auto",
241
+ minWidth: "0",
242
+ maxWidth: "16.25em"
243
+ },
244
+ "> a": {
245
+ marginLeft: "2.75em",
246
+ flex: "1",
247
+ minWidth: "0"
248
+ }
237
249
  }
238
250
  };
239
251
  const descriptionStyle = {
@@ -250,7 +262,7 @@ const desktopDescriptionStyle = {
250
262
  margin: "0.5em 0",
251
263
  WebkitLineClamp: 3
252
264
  };
253
- const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail }) => /* @__PURE__ */ jsxs("div", {
265
+ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data = {}, topTags = [], bottomTags = [], slots = { Link: "a" }, onClickThumbnail, thumbnailChildren }) => /* @__PURE__ */ jsxs("div", {
254
266
  css: [videoItemStyle, style],
255
267
  children: [/* @__PURE__ */ jsxs("div", {
256
268
  css: infoStyle,
@@ -260,7 +272,8 @@ const VideoItem = ({ style, href = "", thumbnailHref = href, imageUrl = "", data
260
272
  topTags,
261
273
  bottomTags,
262
274
  slots,
263
- onClick: onClickThumbnail
275
+ onClick: onClickThumbnail,
276
+ children: thumbnailChildren
264
277
  }), /* @__PURE__ */ jsxs(slots.Link, {
265
278
  href,
266
279
  children: [data.title || data.display_text, /* @__PURE__ */ jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",