@bridger-kr/react 0.1.3 → 0.1.5
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.
- package/dist/components/product/ActionList.cjs +27 -0
- package/dist/components/product/ActionList.cjs.map +1 -0
- package/dist/components/product/ActionList.d.cts +19 -0
- package/dist/components/product/ActionList.d.ts +19 -0
- package/dist/components/product/ActionList.mjs +22 -0
- package/dist/components/product/ActionList.mjs.map +1 -0
- package/dist/index.cjs +16 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +13 -1
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +63 -13
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -6,6 +6,56 @@
|
|
|
6
6
|
transform: scale(var(--dt-press-scale));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
.dt-action-list {
|
|
10
|
+
display: grid;
|
|
11
|
+
gap: 0;
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
border: 1px solid var(--dt-border);
|
|
14
|
+
border-radius: var(--dt-radius-md);
|
|
15
|
+
background: var(--dt-surface);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.dt-action-list-item {
|
|
19
|
+
display: flex;
|
|
20
|
+
min-width: 0;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: 12px;
|
|
23
|
+
border-bottom: 1px solid var(--dt-border);
|
|
24
|
+
padding: 14px;
|
|
25
|
+
color: inherit;
|
|
26
|
+
text-decoration: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dt-action-list-item:last-child {
|
|
30
|
+
border-bottom: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.dt-action-list-item-interactive {
|
|
34
|
+
transition:
|
|
35
|
+
background-color var(--dt-motion-fast),
|
|
36
|
+
color var(--dt-motion-fast);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dt-action-list-item-interactive:hover,
|
|
40
|
+
.dt-action-list-item-interactive:focus-visible {
|
|
41
|
+
background: var(--dt-surface-raised);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dt-action-list-index {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
width: 22px;
|
|
47
|
+
height: 22px;
|
|
48
|
+
flex: 0 0 auto;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
border: 1px solid var(--dt-border);
|
|
52
|
+
border-radius: var(--dt-radius-sm);
|
|
53
|
+
background: var(--dt-surface-sunken);
|
|
54
|
+
color: var(--dt-muted-strong);
|
|
55
|
+
font-size: 11px;
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
}
|
|
58
|
+
|
|
9
59
|
.dt-alert-motion-subtle {
|
|
10
60
|
animation: dt-alert-enter var(--dt-motion-slow) both;
|
|
11
61
|
}
|
|
@@ -88,7 +138,7 @@
|
|
|
88
138
|
--dt-product-accent-strong: #ec5e1f;
|
|
89
139
|
--dt-product-ink: #15110c;
|
|
90
140
|
--dt-product-muted: #786f63;
|
|
91
|
-
--dt-product-line:
|
|
141
|
+
--dt-product-line: transparent;
|
|
92
142
|
min-height: 100vh;
|
|
93
143
|
color: var(--dt-product-accent);
|
|
94
144
|
font-family: var(--dt-font-sans);
|
|
@@ -114,17 +164,16 @@
|
|
|
114
164
|
.dt-product-cinematic-wash {
|
|
115
165
|
position: absolute;
|
|
116
166
|
inset: 0;
|
|
117
|
-
background:
|
|
118
|
-
radial-gradient(circle at 74% 28%, color-mix(in srgb, var(--dt-product-card-strong) 56%, transparent), transparent 38%),
|
|
119
|
-
linear-gradient(180deg, color-mix(in srgb, #ffffff 16%, transparent), transparent 58%);
|
|
167
|
+
background: linear-gradient(180deg, color-mix(in srgb, #ffffff 10%, transparent), transparent 58%);
|
|
120
168
|
}
|
|
121
169
|
|
|
122
170
|
.dt-product-cinematic-lines {
|
|
123
171
|
position: absolute;
|
|
124
172
|
inset: auto 0 16px;
|
|
173
|
+
display: none;
|
|
125
174
|
width: 100%;
|
|
126
175
|
height: min(62vw, 620px);
|
|
127
|
-
opacity: 0
|
|
176
|
+
opacity: 0;
|
|
128
177
|
}
|
|
129
178
|
|
|
130
179
|
.dt-product-cinematic-track,
|
|
@@ -134,8 +183,8 @@
|
|
|
134
183
|
}
|
|
135
184
|
|
|
136
185
|
.dt-product-cinematic-track {
|
|
137
|
-
stroke:
|
|
138
|
-
stroke-width:
|
|
186
|
+
stroke: transparent;
|
|
187
|
+
stroke-width: 0;
|
|
139
188
|
}
|
|
140
189
|
|
|
141
190
|
.dt-product-cinematic-flow {
|
|
@@ -164,7 +213,7 @@
|
|
|
164
213
|
border: none;
|
|
165
214
|
border-radius: 18px;
|
|
166
215
|
color: var(--dt-product-accent);
|
|
167
|
-
font-weight:
|
|
216
|
+
font-weight: 500;
|
|
168
217
|
text-decoration: none;
|
|
169
218
|
transition:
|
|
170
219
|
transform var(--dt-motion),
|
|
@@ -182,8 +231,8 @@
|
|
|
182
231
|
}
|
|
183
232
|
|
|
184
233
|
.dt-product-action-pill-compact {
|
|
185
|
-
min-height:
|
|
186
|
-
padding-inline:
|
|
234
|
+
min-height: 40px;
|
|
235
|
+
padding-inline: 20px;
|
|
187
236
|
border-radius: 18px;
|
|
188
237
|
font-size: 12px;
|
|
189
238
|
}
|
|
@@ -233,7 +282,7 @@
|
|
|
233
282
|
.dt-product-side-rail a {
|
|
234
283
|
color: var(--dt-product-accent);
|
|
235
284
|
font-size: 10px;
|
|
236
|
-
font-weight:
|
|
285
|
+
font-weight: 500;
|
|
237
286
|
line-height: 1.2;
|
|
238
287
|
text-decoration: none;
|
|
239
288
|
}
|
|
@@ -292,7 +341,8 @@
|
|
|
292
341
|
position: absolute;
|
|
293
342
|
width: 68%;
|
|
294
343
|
height: 1px;
|
|
295
|
-
background:
|
|
344
|
+
background: var(--dt-product-accent);
|
|
345
|
+
opacity: 0.46;
|
|
296
346
|
}
|
|
297
347
|
|
|
298
348
|
.dt-product-motion-copy {
|
|
@@ -305,7 +355,7 @@
|
|
|
305
355
|
background: var(--dt-product-accent);
|
|
306
356
|
color: #ffffff;
|
|
307
357
|
font-size: 13px;
|
|
308
|
-
font-weight:
|
|
358
|
+
font-weight: 500;
|
|
309
359
|
letter-spacing: 0;
|
|
310
360
|
}
|
|
311
361
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bridger-kr/react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"react-dom": ">=18"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@bridger-kr/tokens": "0.1.
|
|
32
|
+
"@bridger-kr/tokens": "0.1.2"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"react": "^18.3.1",
|