@entro314labs/react-arc-tabs 1.0.17 → 1.0.20
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/ArcTabs.css +47 -13
- package/package.json +2 -2
package/dist/ArcTabs.css
CHANGED
|
@@ -124,15 +124,15 @@
|
|
|
124
124
|
transform: translateY(calc(100% + var(--arc-seam-gap)));
|
|
125
125
|
background:
|
|
126
126
|
radial-gradient(
|
|
127
|
-
circle
|
|
128
|
-
|
|
129
|
-
|
|
127
|
+
circle at 100% 0,
|
|
128
|
+
transparent var(--arc-notch),
|
|
129
|
+
var(--arc-panel-bg) calc(var(--arc-notch) + 0.5px)
|
|
130
130
|
)
|
|
131
131
|
left top / var(--arc-notch) var(--arc-notch) no-repeat,
|
|
132
132
|
radial-gradient(
|
|
133
|
-
circle
|
|
134
|
-
|
|
135
|
-
|
|
133
|
+
circle at 0% 0,
|
|
134
|
+
transparent var(--arc-notch),
|
|
135
|
+
var(--arc-panel-bg) calc(var(--arc-notch) + 0.5px)
|
|
136
136
|
)
|
|
137
137
|
right top / var(--arc-notch) var(--arc-notch) no-repeat;
|
|
138
138
|
}
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
justify-content: center;
|
|
163
163
|
gap: 0.5rem;
|
|
164
164
|
border: var(--arc-border-width) solid var(--arc-panel-border);
|
|
165
|
-
border-radius: var(--arc-radius);
|
|
165
|
+
border-radius: var(--arc-radius) var(--arc-radius) 0 0;
|
|
166
166
|
background: var(--arc-tab-bg);
|
|
167
167
|
color: inherit;
|
|
168
168
|
font: inherit;
|
|
@@ -246,15 +246,15 @@
|
|
|
246
246
|
transform: translateY(calc(100% + var(--arc-seam-gap)));
|
|
247
247
|
background:
|
|
248
248
|
radial-gradient(
|
|
249
|
-
circle
|
|
250
|
-
|
|
251
|
-
|
|
249
|
+
circle at 100% 0,
|
|
250
|
+
transparent var(--arc-notch),
|
|
251
|
+
var(--arc-panel-bg) calc(var(--arc-notch) + 0.5px)
|
|
252
252
|
)
|
|
253
253
|
left top / var(--arc-notch) var(--arc-notch) no-repeat,
|
|
254
254
|
radial-gradient(
|
|
255
|
-
circle
|
|
256
|
-
|
|
257
|
-
|
|
255
|
+
circle at 0% 0,
|
|
256
|
+
transparent var(--arc-notch),
|
|
257
|
+
var(--arc-panel-bg) calc(var(--arc-notch) + 0.5px)
|
|
258
258
|
)
|
|
259
259
|
right top / var(--arc-notch) var(--arc-notch) no-repeat;
|
|
260
260
|
}
|
|
@@ -343,3 +343,37 @@
|
|
|
343
343
|
transition: none;
|
|
344
344
|
}
|
|
345
345
|
}
|
|
346
|
+
|
|
347
|
+
/* Progressive enhancement: clip-path shape() for Bézier-smooth curves */
|
|
348
|
+
@supports (clip-path: shape(from 0 0, line to 0 0)) {
|
|
349
|
+
.arc-tabs__tab[aria-selected='true'] {
|
|
350
|
+
clip-path: shape(
|
|
351
|
+
from calc(0% - var(--arc-notch)) 100%,
|
|
352
|
+
curve to 0% calc(100% - var(--arc-notch))
|
|
353
|
+
with 0% 100%,
|
|
354
|
+
vline to var(--arc-radius),
|
|
355
|
+
curve to var(--arc-radius) 0%
|
|
356
|
+
with 0% 0%,
|
|
357
|
+
hline to calc(100% - var(--arc-radius)),
|
|
358
|
+
curve to 100% var(--arc-radius)
|
|
359
|
+
with 100% 0%,
|
|
360
|
+
vline to calc(100% - var(--arc-notch)),
|
|
361
|
+
curve to calc(100% + var(--arc-notch)) 100%
|
|
362
|
+
with 100% 100%
|
|
363
|
+
);
|
|
364
|
+
border-radius: 0;
|
|
365
|
+
border: none;
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
/* Notch pseudo-elements are redundant when shape() is active */
|
|
369
|
+
.arc-tabs__tab[aria-selected='true']::before,
|
|
370
|
+
.arc-tabs__tab[aria-selected='true']::after {
|
|
371
|
+
display: none;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
/* Restore visual border + shadow via filter since box-shadow is clipped */
|
|
375
|
+
.arc-tabs__item--selected {
|
|
376
|
+
filter: drop-shadow(0 1px 3px rgba(15, 23, 42, 0.10))
|
|
377
|
+
drop-shadow(0 6px 16px rgba(15, 23, 42, 0.08));
|
|
378
|
+
}
|
|
379
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entro314labs/react-arc-tabs",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.20",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Reusable arc-style tabs component for React and Next.js projects",
|
|
6
6
|
"keywords": [
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"react-dom": "^19.0.0 || ^19.2.4"
|
|
54
54
|
},
|
|
55
55
|
"engines": {
|
|
56
|
-
"node": ">=
|
|
56
|
+
"node": ">=22"
|
|
57
57
|
},
|
|
58
58
|
"scripts": {
|
|
59
59
|
"clean": "rm -rf dist",
|