@kkcompany/app-ui 0.1.8 → 0.1.9

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 +10 -3
  2. package/dist/index.d.cts +4 -4
  3. package/dist/index.d.mts +4 -4
  4. package/dist/index.mjs +10 -3
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -198,6 +198,7 @@ const tagBaseStyles = {
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
200
  fontSize: "0.75rem",
201
+ wordBreak: "keep-all",
201
202
  "> div": {
202
203
  padding: "4px 6px",
203
204
  borderRadius: "0.2em",
@@ -209,10 +210,12 @@ const tagBaseStyles = {
209
210
  }
210
211
  }
211
212
  };
213
+ const tagTopStyles = { transformOrigin: "left top" };
212
214
  const tagBottomStyles = {
213
215
  "--tag-justify-content": "flex-end",
214
216
  "--tag-color": "#000",
215
- "--tag-background": "#fff"
217
+ "--tag-background": "#fff",
218
+ transformOrigin: "right bottom"
216
219
  };
217
220
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
218
221
  const components = {
@@ -241,7 +244,10 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
241
244
  }),
242
245
  /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("div", {
243
246
  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", {
247
+ children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
248
+ css: tagTopStyles,
249
+ children: topTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
250
+ }), bottomTags.length > 0 && /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", {
245
251
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
246
252
  children: bottomTags?.map((tag) => /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("div", { children: tag }, tag))
247
253
  })]
@@ -294,7 +300,8 @@ const infoStyle = {
294
300
  flex: "1",
295
301
  minWidth: "0"
296
302
  }
297
- }
303
+ },
304
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
298
305
  };
299
306
  const titleStyle = {
300
307
  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_runtime1 from "@emotion/react/jsx-runtime";
1
+ import * as _emotion_react_jsx_runtime0 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_runtime1.JSX.Element;
13
+ }) => _emotion_react_jsx_runtime0.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_runtime1.JSX.Element;
29
+ }) => _emotion_react_jsx_runtime0.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_runtime1.JSX.Element;
91
+ }) => _emotion_react_jsx_runtime0.JSX.Element;
92
92
  //#endregion
93
93
  export { Icon, SeeMore, VideoItem, VideoThumbnail };
package/dist/index.mjs CHANGED
@@ -198,6 +198,7 @@ const tagBaseStyles = {
198
198
  color: "var(--tag-color)",
199
199
  justifyContent: "var(--tag-justify-content, flex-start)",
200
200
  fontSize: "0.75rem",
201
+ wordBreak: "keep-all",
201
202
  "> div": {
202
203
  padding: "4px 6px",
203
204
  borderRadius: "0.2em",
@@ -209,10 +210,12 @@ const tagBaseStyles = {
209
210
  }
210
211
  }
211
212
  };
213
+ const tagTopStyles = { transformOrigin: "left top" };
212
214
  const tagBottomStyles = {
213
215
  "--tag-justify-content": "flex-end",
214
216
  "--tag-color": "#000",
215
- "--tag-background": "#fff"
217
+ "--tag-background": "#fff",
218
+ transformOrigin: "right bottom"
216
219
  };
217
220
  const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomTags = [], children, slots = {}, onClick }) => {
218
221
  const components = {
@@ -241,7 +244,10 @@ const VideoThumbnail = ({ href, imageUrl, title, progress, topTags = [], bottomT
241
244
  }),
242
245
  /* @__PURE__ */ jsxs("div", {
243
246
  css: tagBaseStyles,
244
- children: [/* @__PURE__ */ jsx("div", { children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag)) }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
247
+ children: [/* @__PURE__ */ jsx("div", {
248
+ css: tagTopStyles,
249
+ children: topTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
250
+ }), bottomTags.length > 0 && /* @__PURE__ */ jsx("div", {
245
251
  css: [tagBottomStyles, progress >= 0 && { marginBottom: "4px" }],
246
252
  children: bottomTags?.map((tag) => /* @__PURE__ */ jsx("div", { children: tag }, tag))
247
253
  })]
@@ -294,7 +300,8 @@ const infoStyle = {
294
300
  flex: "1",
295
301
  minWidth: "0"
296
302
  }
297
- }
303
+ },
304
+ "@media (max-width: 600px)": { "> div:first-of-type > a > div:last-of-type > div": { scale: .6 } }
298
305
  };
299
306
  const titleStyle = {
300
307
  display: "-webkit-box",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kkcompany/app-ui",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "module": "dist/index.mjs",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.mts",