@liner-fe/prism 2.8.27 → 2.8.29

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 (4) hide show
  1. package/lib/index.css +51 -50
  2. package/lib/index.d.ts +3 -3
  3. package/lib/index.js +66 -31
  4. package/package.json +1 -1
package/lib/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
 
3
3
  /* esbuild-sass-plugin:css-chunk:src/components/Button/style.module.scss */
4
- ._button_60r7l_1 {
4
+ ._button_1k6qi_1 {
5
5
  position: relative;
6
6
  display: flex;
7
7
  align-items: center;
@@ -16,192 +16,193 @@
16
16
  overflow: hidden;
17
17
  cursor: pointer;
18
18
  }
19
- ._button_60r7l_1:disabled {
19
+ ._button_1k6qi_1:disabled {
20
20
  background: var(--neutral-fill-overlay-mid);
21
21
  color: var(--neutral-label-tertiary);
22
22
  cursor: not-allowed;
23
23
  }
24
- ._button_60r7l_1:disabled span svg path:not([fill=white]) {
24
+ ._button_1k6qi_1:disabled span svg path:not([fill=white]) {
25
25
  fill: var(--neutral-label-tertiary) !important;
26
26
  }
27
- ._button_60r7l_1:disabled span svg path[fill=white] {
27
+ ._button_1k6qi_1:disabled span svg path[fill=white] {
28
28
  fill: var(--inverse-label-primary) !important;
29
29
  }
30
- ._default_60r7l_28 {
30
+ ._default_1k6qi_28 {
31
31
  color: var(--inverse-label-primary);
32
32
  background: var(--lp-pri-achromatic-white);
33
33
  }
34
- ._default_60r7l_28 svg path {
34
+ ._default_1k6qi_28 svg path {
35
35
  fill: var(--inverse-label-primary);
36
36
  }
37
- ._primary_60r7l_36 {
37
+ ._primary_1k6qi_36 {
38
38
  color: var(--inverse-label-static-primary);
39
39
  background: var(--brand-container-mid);
40
40
  }
41
- ._primary_60r7l_36:not(:disabled):hover {
41
+ ._primary_1k6qi_36:not(:disabled):hover {
42
42
  background: var(--brand-container-mid-hover);
43
43
  }
44
- ._secondary_60r7l_44 {
44
+ ._secondary_1k6qi_44 {
45
45
  color: var(--inverse-label-static-primary);
46
46
  background: var(--brand-container-mid);
47
47
  }
48
- ._secondary_60r7l_44:not(:disabled):hover {
48
+ ._secondary_1k6qi_44:not(:disabled):hover {
49
49
  background: var(--brand-container-mid-hover);
50
50
  }
51
- ._tertiary_60r7l_52 {
51
+ ._tertiary_1k6qi_52 {
52
52
  color: var(--neutral-label-primary);
53
53
  background: var(--neutral-fill-overlay-mid);
54
54
  }
55
- ._tertiary_60r7l_52:not(:disabled):hover {
55
+ ._tertiary_1k6qi_52:not(:disabled):hover {
56
56
  background: var(--neutral-fill-overlay-mid-hover);
57
57
  }
58
- ._quaternary_60r7l_60 {
58
+ ._quaternary_1k6qi_60 {
59
59
  color: var(--neutral-label-primary);
60
60
  border: 1px solid var(--neutral-border-overlay-normal);
61
61
  background: var(--neutral-fill-overlay-lowest);
62
62
  }
63
- ._quaternary_60r7l_60:not(:disabled):hover {
63
+ ._quaternary_1k6qi_60:not(:disabled):hover {
64
64
  background: var(--neutral-fill-overlay-lowest-hover);
65
65
  }
66
- ._quaternary_60r7l_60:disabled {
66
+ ._quaternary_1k6qi_60:disabled {
67
67
  background: var(--neutral-fill-overlay-lowest);
68
68
  color: var(--neutral-label-tertiary);
69
69
  opacity: 0.4;
70
70
  }
71
- ._quaternary_60r7l_60:disabled svg path {
71
+ ._quaternary_1k6qi_60:disabled svg path {
72
72
  fill: var(--neutral-label-tertiary) !important;
73
73
  }
74
- ._quinary_60r7l_77 {
74
+ ._quinary_1k6qi_77 {
75
75
  color: var(--neutral-label-primary);
76
76
  background: var(--neutral-container-lowest);
77
77
  }
78
- ._quinary_60r7l_77:not(:disabled):hover {
78
+ ._quinary_1k6qi_77:not(:disabled):hover {
79
79
  background: var(--neutral-fill-overlay-lowest-hover);
80
80
  }
81
- ._quinary_60r7l_77:disabled {
81
+ ._quinary_1k6qi_77:disabled {
82
82
  background: var(--neutral-fill-overlay-mid);
83
83
  color: var(--neutral-label-tertiary);
84
84
  }
85
- ._quinary_60r7l_77:disabled svg path {
85
+ ._quinary_1k6qi_77:disabled svg path {
86
86
  fill: var(--neutral-label-tertiary) !important;
87
87
  }
88
- ._negative_60r7l_92 {
88
+ ._negative_1k6qi_92 {
89
89
  color: var(--inverse-label-static-primary);
90
90
  background: var(--function-fill-negative-mid);
91
91
  }
92
- ._negative_60r7l_92:not(:disabled):hover {
92
+ ._negative_1k6qi_92:not(:disabled):hover {
93
93
  background: var(--function-fill-negative-mid-hover);
94
94
  }
95
- ._static_60r7l_100 {
95
+ ._static_1k6qi_100 {
96
96
  background: var(--neutral-container-static-lowest);
97
97
  color: var(--neutral-label-static-primary);
98
98
  }
99
- ._static_60r7l_100:not(:disabled):hover {
99
+ ._static_1k6qi_100:not(:disabled):hover {
100
100
  background: var(--neutral-container-static-lowest-hover);
101
101
  }
102
- ._inverse-static_60r7l_108 {
102
+ ._inverse-static_1k6qi_108 {
103
103
  background: var(--inverse-container-static-high);
104
104
  color: var(--inverse-label-static-primary);
105
105
  }
106
- ._inverse-static_60r7l_108:not(:disabled):hover {
106
+ ._inverse-static_1k6qi_108:not(:disabled):hover {
107
107
  background: var(--inverse-container-static-high-hover);
108
108
  }
109
- ._ghost_60r7l_116._primary_60r7l_36 {
109
+ ._ghost_1k6qi_116._primary_1k6qi_36 {
110
110
  background: var(--inverse-fill-lowest);
111
111
  color: var(--neutral-label-primary);
112
112
  }
113
- ._ghost_60r7l_116._primary_60r7l_36:not(:disabled):hover {
113
+ ._ghost_1k6qi_116._primary_1k6qi_36:not(:disabled):hover {
114
114
  background: var(--neutral-fill-overlay-lowest-hover);
115
115
  }
116
- ._ghost_60r7l_116._primary_60r7l_36:disabled {
116
+ ._ghost_1k6qi_116._primary_1k6qi_36:disabled {
117
117
  background: var(--neutral-fill-overlay-lowest);
118
118
  color: var(--neutral-label-tertiary);
119
119
  }
120
- ._ghost_60r7l_116._primary_60r7l_36:disabled span svg path:not([fill=white]) {
120
+ ._ghost_1k6qi_116._primary_1k6qi_36:disabled span svg path:not([fill=white]) {
121
121
  fill: var(--neutral-label-tertiary);
122
122
  }
123
- ._ghost_60r7l_116._primary_60r7l_36:disabled span svg path[fill=white] {
123
+ ._ghost_1k6qi_116._primary_1k6qi_36:disabled span svg path[fill=white] {
124
124
  fill: var(--inverse-label-primary);
125
125
  }
126
- ._ghost_60r7l_116._secondary_60r7l_44 {
126
+ ._ghost_1k6qi_116._secondary_1k6qi_44 {
127
127
  background: var(--inverse-fill-lowest);
128
128
  color: var(--neutral-label-primary);
129
129
  }
130
- ._ghost_60r7l_116._secondary_60r7l_44:not(:disabled):hover {
130
+ ._ghost_1k6qi_116._secondary_1k6qi_44:not(:disabled):hover {
131
131
  background: var(--neutral-fill-overlay-lowest-hover);
132
132
  }
133
- ._ghost_60r7l_116._secondary_60r7l_44:disabled {
133
+ ._ghost_1k6qi_116._secondary_1k6qi_44:disabled {
134
134
  background: var(--neutral-fill-overlay-lowest);
135
135
  color: var(--neutral-label-tertiary);
136
136
  }
137
- ._ghost_60r7l_116._secondary_60r7l_44:disabled span svg path:not([fill=white]) {
137
+ ._ghost_1k6qi_116._secondary_1k6qi_44:disabled span svg path:not([fill=white]) {
138
138
  fill: var(--neutral-label-tertiary);
139
139
  }
140
- ._ghost_60r7l_116._secondary_60r7l_44:disabled span svg path[fill=white] {
140
+ ._ghost_1k6qi_116._secondary_1k6qi_44:disabled span svg path[fill=white] {
141
141
  fill: var(--inverse-label-primary);
142
142
  }
143
- ._cta_60r7l_151 {
143
+ ._cta_1k6qi_151 {
144
144
  border-radius: var(--lp-sys-radius-m);
145
145
  width: fit-content;
146
146
  height: 52px;
147
147
  gap: 8px;
148
148
  min-width: 52px;
149
149
  }
150
- ._l_60r7l_159 {
150
+ ._l_1k6qi_159 {
151
151
  border-radius: var(--lp-sys-radius-s);
152
152
  width: fit-content;
153
153
  height: 44px;
154
154
  min-width: 44px;
155
155
  }
156
- ._m_60r7l_166 {
156
+ ._m_1k6qi_166 {
157
157
  border-radius: var(--lp-sys-radius-s);
158
158
  width: fit-content;
159
159
  height: 36px;
160
160
  min-width: 36px;
161
161
  }
162
- ._s_60r7l_44 {
162
+ ._s_1k6qi_44 {
163
163
  border-radius: var(--lp-sys-radius-s);
164
164
  width: fit-content;
165
165
  height: 28px;
166
166
  min-width: 28px;
167
167
  }
168
- ._align-center_60r7l_180 > span {
168
+ ._align-center_1k6qi_180 > span {
169
169
  width: 100%;
170
170
  justify-content: center;
171
171
  }
172
- ._align-space-between_60r7l_185 > span {
172
+ ._align-space-between_1k6qi_185 > span {
173
173
  width: 100%;
174
174
  justify-content: space-between;
175
175
  }
176
- ._content_60r7l_190 {
176
+ ._content_1k6qi_190 {
177
177
  flex-shrink: 0;
178
178
  line-height: 0;
179
179
  padding: 0px var(--lp-sys-padding-component-100);
180
180
  }
181
- ._full_60r7l_196 {
181
+ ._full_1k6qi_196 {
182
182
  width: 100%;
183
183
  }
184
- ._fit-content_60r7l_200 {
184
+ ._fit-content_1k6qi_200 {
185
185
  width: fit-content;
186
186
  }
187
- ._children_60r7l_204 {
187
+ ._children_1k6qi_204 {
188
+ position: relative;
188
189
  display: flex;
189
190
  align-items: center;
190
191
  justify-content: center;
191
192
  }
192
- ._cta-children_60r7l_210 {
193
+ ._cta-children_1k6qi_211 {
193
194
  padding: 0 var(--lp-sys-gap-positive-300);
194
195
  gap: var(--lp-sys-gap-positive-100);
195
196
  }
196
- ._l-children_60r7l_215 {
197
+ ._l-children_1k6qi_216 {
197
198
  padding: 0 var(--lp-sys-gap-positive-200);
198
199
  gap: var(--lp-sys-gap-positive-50);
199
200
  }
200
- ._m-children_60r7l_220 {
201
+ ._m-children_1k6qi_221 {
201
202
  padding: 0 var(--lp-sys-gap-positive-150);
202
203
  gap: var(--lp-sys-gap-positive-50);
203
204
  }
204
- ._s-children_60r7l_225 {
205
+ ._s-children_1k6qi_226 {
205
206
  padding: 0 var(--lp-sys-gap-positive-150);
206
207
  gap: var(--lp-sys-gap-positive-50);
207
208
  }
package/lib/index.d.ts CHANGED
@@ -14,7 +14,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
14
14
  import { PopoverProps, PopoverPortalProps } from '@radix-ui/react-popover';
15
15
  import { IllustProps } from '@liner-fe/illust';
16
16
 
17
- declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [string, unknown][];
17
+ declare const objectToArray: <T extends Record<string, unknown>>(obj: T) => [keyof T, T[keyof T]][];
18
18
  declare const arrayToStyleObject: <T extends SystemKeys>(colorKeys: T[], style: {
19
19
  readonly [key: string]: string;
20
20
  }, prefix?: string) => Partial<Record<SystemKeys, string>>;
@@ -470,7 +470,7 @@ declare const useSnackbar: () => {
470
470
 
471
471
  declare const defaultLabelVariants: (props?: ({
472
472
  level?: "primary" | "secondary" | undefined;
473
- position?: "right" | "top" | undefined;
473
+ position?: "top" | "right" | undefined;
474
474
  size?: "l" | "m" | "s" | undefined;
475
475
  offset?: "medium" | "high" | "low" | undefined;
476
476
  disabled?: boolean | undefined;
@@ -523,7 +523,7 @@ declare const TextButton: react.ForwardRefExoticComponent<TextButtonProps & reac
523
523
 
524
524
  type LoadingSizeType = 'xl' | 'l' | 'm' | 's' | 'xs';
525
525
  type LoadingLevelType = 'brand-label-primary' | 'neutral-label-primary' | 'neutral-label-static-primary' | 'inverse-label-primary' | 'inverse-label-static-primary';
526
- interface LoadingProps {
526
+ interface LoadingProps extends HTMLAttributes<HTMLSpanElement> {
527
527
  size?: LoadingSizeType;
528
528
  level?: LoadingLevelType;
529
529
  type?: 'dots' | 'spinner';
package/lib/index.js CHANGED
@@ -1,9 +1,14 @@
1
1
  var __defProp = Object.defineProperty;
2
2
  var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
3
3
 
4
+ // src/utils/typedObjectEntries.ts
5
+ var typedObjectEntries = /* @__PURE__ */ __name((obj) => {
6
+ return Object.entries(obj);
7
+ }, "typedObjectEntries");
8
+
4
9
  // src/utils/object.ts
5
10
  var objectToArray = /* @__PURE__ */ __name((obj) => {
6
- return Object.entries(obj);
11
+ return typedObjectEntries(obj);
7
12
  }, "objectToArray");
8
13
  var arrayToStyleObject = /* @__PURE__ */ __name((colorKeys, style, prefix) => colorKeys.reduce(
9
14
  (acc, value) => ({ ...acc, [value]: prefix ? style[`${prefix}-${value}`] : style[value] }),
@@ -20,31 +25,31 @@ import {
20
25
 
21
26
  // src/components/Button/style.module.scss
22
27
  var style_module_default = {
23
- "button": "_button_60r7l_1",
24
- "default": "_default_60r7l_28",
25
- "primary": "_primary_60r7l_36",
26
- "secondary": "_secondary_60r7l_44",
27
- "tertiary": "_tertiary_60r7l_52",
28
- "quaternary": "_quaternary_60r7l_60",
29
- "quinary": "_quinary_60r7l_77",
30
- "negative": "_negative_60r7l_92",
31
- "static": "_static_60r7l_100",
32
- "inverse-static": "_inverse-static_60r7l_108",
33
- "ghost": "_ghost_60r7l_116",
34
- "cta": "_cta_60r7l_151",
35
- "l": "_l_60r7l_159",
36
- "m": "_m_60r7l_166",
37
- "s": "_s_60r7l_44",
38
- "align-center": "_align-center_60r7l_180",
39
- "align-space-between": "_align-space-between_60r7l_185",
40
- "content": "_content_60r7l_190",
41
- "full": "_full_60r7l_196",
42
- "fit-content": "_fit-content_60r7l_200",
43
- "children": "_children_60r7l_204",
44
- "cta-children": "_cta-children_60r7l_210",
45
- "l-children": "_l-children_60r7l_215",
46
- "m-children": "_m-children_60r7l_220",
47
- "s-children": "_s-children_60r7l_225"
28
+ "button": "_button_1k6qi_1",
29
+ "default": "_default_1k6qi_28",
30
+ "primary": "_primary_1k6qi_36",
31
+ "secondary": "_secondary_1k6qi_44",
32
+ "tertiary": "_tertiary_1k6qi_52",
33
+ "quaternary": "_quaternary_1k6qi_60",
34
+ "quinary": "_quinary_1k6qi_77",
35
+ "negative": "_negative_1k6qi_92",
36
+ "static": "_static_1k6qi_100",
37
+ "inverse-static": "_inverse-static_1k6qi_108",
38
+ "ghost": "_ghost_1k6qi_116",
39
+ "cta": "_cta_1k6qi_151",
40
+ "l": "_l_1k6qi_159",
41
+ "m": "_m_1k6qi_166",
42
+ "s": "_s_1k6qi_44",
43
+ "align-center": "_align-center_1k6qi_180",
44
+ "align-space-between": "_align-space-between_1k6qi_185",
45
+ "content": "_content_1k6qi_190",
46
+ "full": "_full_1k6qi_196",
47
+ "fit-content": "_fit-content_1k6qi_200",
48
+ "children": "_children_1k6qi_204",
49
+ "cta-children": "_cta-children_1k6qi_211",
50
+ "l-children": "_l-children_1k6qi_216",
51
+ "m-children": "_m-children_1k6qi_221",
52
+ "s-children": "_s-children_1k6qi_226"
48
53
  };
49
54
 
50
55
  // src/components/Button/index.tsx
@@ -96,8 +101,12 @@ var dotsLoaderVariants = cva({
96
101
  }
97
102
  }
98
103
  });
99
- var DotsLoader = /* @__PURE__ */ __name(({ size: size4 = "m", level = "inverse-label-static-primary" }) => {
100
- return /* @__PURE__ */ jsxs("div", { className: style_module_default2["dots-loader-container"], children: [
104
+ var DotsLoader = /* @__PURE__ */ __name(({
105
+ size: size4 = "m",
106
+ level = "inverse-label-static-primary",
107
+ ...props
108
+ }) => {
109
+ return /* @__PURE__ */ jsxs("div", { className: style_module_default2["dots-loader-container"], ...props, children: [
101
110
  /* @__PURE__ */ jsx("div", { className: dotsLoaderVariants({ size: size4, level }) }),
102
111
  /* @__PURE__ */ jsx("div", { className: dotsLoaderVariants({ size: size4, level }) }),
103
112
  /* @__PURE__ */ jsx("div", { className: dotsLoaderVariants({ size: size4, level }) })
@@ -124,9 +133,10 @@ var spinnerLoaderVariants = cva({
124
133
  });
125
134
  var SpinnerLoader = /* @__PURE__ */ __name(({
126
135
  size: size4 = "m",
127
- level = "inverse-label-static-primary"
136
+ level = "inverse-label-static-primary",
137
+ ...props
128
138
  }) => {
129
- return /* @__PURE__ */ jsx("span", { className: spinnerLoaderVariants({ size: size4, level }) });
139
+ return /* @__PURE__ */ jsx("span", { className: spinnerLoaderVariants({ size: size4, level }), ...props });
130
140
  }, "SpinnerLoader");
131
141
 
132
142
  // src/components/Button/index.tsx
@@ -274,7 +284,32 @@ var DefaultButton = forwardRef(
274
284
  isLoading ? !!leftIcon || !!rightIcon ? /* @__PURE__ */ jsxs2(Fragment, { children: [
275
285
  /* @__PURE__ */ jsx2(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }),
276
286
  /* @__PURE__ */ jsx2("p", { className: style_module_default.content, children: children2 })
277
- ] }) : /* @__PURE__ */ jsx2(Loading, { size: buttonLoadingSizeMap[size4], level: buttonLoadingLevelMap[level] }) : /* @__PURE__ */ jsx2("p", { className: style_module_default.content, children: children2 }),
287
+ ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
288
+ /* @__PURE__ */ jsx2(
289
+ Loading,
290
+ {
291
+ size: buttonLoadingSizeMap[size4],
292
+ level: buttonLoadingLevelMap[level],
293
+ style: {
294
+ position: "absolute",
295
+ left: "50%",
296
+ top: "50%",
297
+ transform: "translate(-50%, -50%)",
298
+ margin: "auto"
299
+ }
300
+ }
301
+ ),
302
+ /* @__PURE__ */ jsx2(
303
+ "p",
304
+ {
305
+ className: style_module_default.content,
306
+ style: {
307
+ opacity: 0
308
+ },
309
+ children: children2
310
+ }
311
+ )
312
+ ] }) : /* @__PURE__ */ jsx2("p", { className: style_module_default.content, children: children2 }),
278
313
  !!rightIcon && !isLoading && /* @__PURE__ */ jsx2(rightIcon.icon, { ...iconProps, ...rightIcon })
279
314
  ] }), "renderContent");
280
315
  if (asChild) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@liner-fe/prism",
3
- "version": "2.8.27",
3
+ "version": "2.8.29",
4
4
  "type": "module",
5
5
  "sideEffects": false,
6
6
  "scripts": {