@dotss/tictoccroc 0.0.19 → 0.0.21

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.
@@ -7,7 +7,7 @@ export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
7
7
  title: ReactNode;
8
8
  banners: Array<BannerProps & {
9
9
  image?: string;
10
- subtitle?: ReactNode;
10
+ subTitle?: ReactNode;
11
11
  }>;
12
12
  onClickBanner?: (url: string, e: SyntheticEvent) => void;
13
13
  bannerWidth?: number;
@@ -1,4 +1,4 @@
1
- import { jsxs as a, jsx as t } from "react/jsx-runtime";
1
+ import { jsxs as a, jsx as r } from "react/jsx-runtime";
2
2
  import b from "@dotss/ui/core/useTheme";
3
3
  import n from "@dotss/ui/Flexbox";
4
4
  import l from "@dotss/ui/Typography";
@@ -10,15 +10,15 @@ function R({
10
10
  id: p,
11
11
  title: d,
12
12
  banners: m,
13
- onClickBanner: r,
13
+ onClickBanner: t,
14
14
  imageProps: s,
15
15
  ...u
16
16
  }) {
17
17
  const { spacing: i } = b(), h = (o) => (e) => {
18
- r && typeof r == "function" && (e.stopPropagation(), e.preventDefault(), r(o, e));
18
+ t && typeof t == "function" && (e.stopPropagation(), e.preventDefault(), t(o, e));
19
19
  };
20
20
  return /* @__PURE__ */ a(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...u, children: [
21
- /* @__PURE__ */ t(
21
+ /* @__PURE__ */ r(
22
22
  l,
23
23
  {
24
24
  id: `banner-account-carousel2-${p}`,
@@ -33,7 +33,7 @@ function R({
33
33
  children: d
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ t(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subtitle: g, url: c, image: f }) => /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(
36
+ /* @__PURE__ */ r(C, { rowCount: 1, step: 1, spacing: 3, children: m.map(({ id: o, title: e, subTitle: g, url: c, image: f }) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ a(
37
37
  n,
38
38
  {
39
39
  tag: "a",
@@ -44,7 +44,7 @@ function R({
44
44
  onClick: h(c),
45
45
  inlineCSS: { width: 240 },
46
46
  children: [
47
- /* @__PURE__ */ t(
47
+ /* @__PURE__ */ r(
48
48
  S,
49
49
  {
50
50
  src: f || "",
@@ -61,8 +61,8 @@ function R({
61
61
  }
62
62
  ),
63
63
  /* @__PURE__ */ a(n, { flexDirection: "column", gap: 1, children: [
64
- /* @__PURE__ */ t(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
65
- /* @__PURE__ */ t(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
64
+ /* @__PURE__ */ r(l, { tag: "p", variant: "h4B", lineClamp: 1, children: e }),
65
+ /* @__PURE__ */ r(l, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: g })
66
66
  ] })
67
67
  ]
68
68
  }
@@ -29,13 +29,16 @@ function s() {
29
29
  /* @__PURE__ */ e(
30
30
  n,
31
31
  {
32
- p: 4,
32
+ pt: 3,
33
+ pl: 4,
34
+ pb: 3,
35
+ pr: 4,
33
36
  gap: 3,
34
37
  alignItems: "center",
35
38
  justifyContent: "space-between",
36
39
  inlineCSS: { width: "100%" },
37
40
  children: [
38
- /* @__PURE__ */ t(i, { width: 100, minWidth: 100, height: 78, borderRadius: 8 }),
41
+ /* @__PURE__ */ t(i, { width: 100, minWidth: 100, height: 70, borderRadius: 8 }),
39
42
  /* @__PURE__ */ t(i, { width: "100%", height: 48 }),
40
43
  /* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
41
44
  ]
@@ -1,47 +1,51 @@
1
- import { jsxs as h, jsx as e } from "react/jsx-runtime";
2
- import b from "@dotss/ui/core/useTheme";
3
- import i from "@dotss/ui/Flexbox";
1
+ import { jsxs as d, jsx as e } from "react/jsx-runtime";
2
+ import S from "@dotss/ui/core/useTheme";
3
+ import r from "@dotss/ui/Flexbox";
4
4
  import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
5
5
  import w from "@dotss/ui/Icon";
6
- import d from "@dotss/ui/Typography";
6
+ import h from "@dotss/ui/Typography";
7
7
  import C from "../../../../shared/components/Image/Image.mjs";
8
8
  import "@dotss/ui";
9
9
  function P({
10
- id: l,
11
- title: m,
12
- banners: s,
13
- onClickBanner: n,
10
+ id: a,
11
+ title: s,
12
+ banners: m,
13
+ onClickBanner: i,
14
14
  imageProps: g,
15
15
  ...f
16
16
  }) {
17
- const { spacing: r, palette: c } = b(), { isHoverPossible: u } = x(), S = (o) => (t) => {
18
- n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(o, t));
17
+ const { spacing: o, palette: c } = S(), { isHoverPossible: u } = x(), b = (l) => (t) => {
18
+ i && typeof i == "function" && (t.stopPropagation(), t.preventDefault(), i(l, t));
19
19
  };
20
- return /* @__PURE__ */ h(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
20
+ return /* @__PURE__ */ d(r, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...f, children: [
21
21
  /* @__PURE__ */ e(
22
- d,
22
+ h,
23
23
  {
24
- id: `banner-account-text-${l}`,
24
+ id: `banner-account-text-${a}`,
25
25
  variant: "h2B",
26
26
  inlineCSS: {
27
27
  whiteSpace: "pre-wrap",
28
28
  wordBreak: "keep-all",
29
- paddingLeft: r.content(4),
30
- paddingRight: r.content(4),
31
- marginBottom: r.content(2)
29
+ paddingLeft: o.content(4),
30
+ paddingRight: o.content(4),
31
+ marginBottom: o.content(2)
32
32
  },
33
- children: m
33
+ children: s
34
34
  }
35
35
  ),
36
- /* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${l}`, children: s.map(({ id: o, title: t, url: a, image: p }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ h(
37
- i,
36
+ /* @__PURE__ */ e(r, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${a}`, children: m.map(({ id: l, title: t, url: p, image: n }) => /* @__PURE__ */ e(r, { tag: "li", alignItems: "center", children: /* @__PURE__ */ d(
37
+ r,
38
38
  {
39
39
  tag: "a",
40
- href: a,
41
- p: 4,
40
+ href: p,
41
+ pt: n ? 3 : 4,
42
+ pl: 4,
43
+ pb: n ? 3 : 4,
44
+ pr: 4,
42
45
  gap: 3,
43
46
  alignItems: "center",
44
- onClick: S(a),
47
+ draggable: !1,
48
+ onClick: b(p),
45
49
  inlineCSS: {
46
50
  width: "100%",
47
51
  "&:focus-within": {
@@ -54,8 +58,8 @@ function P({
54
58
  } : {}
55
59
  },
56
60
  children: [
57
- p && /* @__PURE__ */ e(
58
- i,
61
+ n && /* @__PURE__ */ e(
62
+ r,
59
63
  {
60
64
  inlineCSS: {
61
65
  minWidth: 100,
@@ -66,9 +70,10 @@ function P({
66
70
  C,
67
71
  {
68
72
  width: 100,
69
- height: 78,
70
- src: p,
73
+ height: 70,
74
+ src: n,
71
75
  alt: `${t} 이미지`,
76
+ draggable: !1,
72
77
  enableFallback: !0,
73
78
  enableErrorFallback: !0,
74
79
  ...g
@@ -77,11 +82,11 @@ function P({
77
82
  }
78
83
  ),
79
84
  /* @__PURE__ */ e(
80
- d,
85
+ h,
81
86
  {
82
87
  tag: "p",
83
88
  variant: "b2R",
84
- lineClamp: a ? 2 : 1,
89
+ lineClamp: n ? 2 : 1,
85
90
  inlineCSS: {
86
91
  flexGrow: 1
87
92
  },
@@ -89,7 +94,7 @@ function P({
89
94
  }
90
95
  ),
91
96
  /* @__PURE__ */ e(
92
- i,
97
+ r,
93
98
  {
94
99
  inlineCSS: {
95
100
  whiteSpace: "nowrap"
@@ -99,7 +104,7 @@ function P({
99
104
  )
100
105
  ]
101
106
  }
102
- ) }, `tictoccroc-story-${o}`)) })
107
+ ) }, `tictoccroc-story-${l}`)) })
103
108
  ] });
104
109
  }
105
110
  export {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@dotss/tictoccroc",
3
3
  "type": "module",
4
- "version": "0.0.19",
4
+ "version": "0.0.21",
5
5
  "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
6
6
  "main": "./dist/index.mjs",
7
7
  "module": "./dist/index.mjs",
@@ -102,7 +102,7 @@
102
102
  "vitest": "^1.6.0"
103
103
  },
104
104
  "peerDependencies": {
105
- "@dotss/ui": ">=0.0.1 || ^1.0.0",
105
+ "@dotss/ui": ">=1.0.3",
106
106
  "@emotion/react": "^11.14.0",
107
107
  "@emotion/styled": "^11.14.0",
108
108
  "dayjs": "^1.11.13",