@dreamlake/dockit 0.2.22 → 0.2.24
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/CodeTabs.js +2 -2
- package/dist/styles.css +27 -3
- package/package.json +1 -1
|
@@ -12,12 +12,12 @@ function CodeTabs({ children, "aria-label": label = "Code examples" }) {
|
|
|
12
12
|
const id = useId();
|
|
13
13
|
const buttons = useRef([]);
|
|
14
14
|
if (!examples.length) return null;
|
|
15
|
-
return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, className: "dockit-code-tabs group relative
|
|
15
|
+
return /* @__PURE__ */ jsx("div", { "data-code-tabs": true, className: "dockit-code-tabs group relative", children: /* @__PURE__ */ jsxs(Tabs, { value: String(active), onValueChange: (value) => setSelected(Number(value)), children: [
|
|
16
16
|
/* @__PURE__ */ jsx("div", { className: "dockit-code-tabs-header", children: /* @__PURE__ */ jsx(TabsList, { "aria-label": label, className: "dockit-code-tabs-list border-0 font-doc-template-ui", children: examples.map((example, index) => /* @__PURE__ */ jsx(
|
|
17
17
|
TabsTrigger,
|
|
18
18
|
{
|
|
19
19
|
value: String(index),
|
|
20
|
-
className: "shrink-0
|
|
20
|
+
className: "shrink-0 font-doc-template-mono font-medium data-[active]:font-semibold text-doc-template-muted hover:text-doc-template-ink data-[active]:text-doc-template-ink text-[12px]",
|
|
21
21
|
ref: (element) => {
|
|
22
22
|
buttons.current[index] = element;
|
|
23
23
|
},
|
package/dist/styles.css
CHANGED
|
@@ -387,16 +387,40 @@
|
|
|
387
387
|
overflow: hidden;
|
|
388
388
|
}
|
|
389
389
|
.dockit-code-tabs-header {
|
|
390
|
-
border-bottom: 1px solid var(--color-doc-template-faint);
|
|
391
390
|
background: var(--color-doc-template-bg);
|
|
392
391
|
min-height: 30px;
|
|
393
392
|
padding: 0 156px 0 12px;
|
|
394
393
|
}
|
|
395
|
-
.dockit-code-tabs-list { overflow-x: auto; min-height:
|
|
396
|
-
|
|
394
|
+
.dockit-code-tabs-list { overflow-x: auto; min-height: 30px; gap: 2px; }
|
|
395
|
+
/* Raised file-tab geometry follows Studio's chat TabStrip. UIKit supplies the
|
|
396
|
+
compound primitives; the active code-colored bottom edge opens the baseline. */
|
|
397
|
+
.dockit-code-tabs-list [role='tab'] {
|
|
398
|
+
margin: 0 1px;
|
|
399
|
+
padding: 3px 9px 4px;
|
|
400
|
+
border: 1px solid transparent;
|
|
401
|
+
border-radius: 6px 6px 0 0;
|
|
402
|
+
background: transparent;
|
|
403
|
+
line-height: 18px;
|
|
404
|
+
}
|
|
405
|
+
.dockit-code-tabs-list [role='tab'][aria-selected='false']:hover {
|
|
406
|
+
border-color: var(--color-doc-template-faint);
|
|
407
|
+
color: var(--color-doc-template-ink);
|
|
408
|
+
}
|
|
409
|
+
.dockit-code-tabs-list [role='tab'][aria-selected='true'] {
|
|
410
|
+
z-index: 1;
|
|
411
|
+
border-color: var(--color-doc-template-faint);
|
|
412
|
+
border-bottom-color: var(--color-doc-template-code);
|
|
413
|
+
background: var(--color-doc-template-code);
|
|
414
|
+
}
|
|
397
415
|
.dockit-code-tabs-list [role='tab']:focus-visible,
|
|
398
416
|
.dockit-code-tabs [role='tabpanel']:focus-visible {
|
|
399
417
|
outline: 2px solid var(--color-doc-template-accent);
|
|
400
418
|
outline-offset: -3px;
|
|
401
419
|
}
|
|
420
|
+
.dockit-code-tabs [role='tabpanel'] {
|
|
421
|
+
border: 1px solid var(--color-doc-template-faint);
|
|
422
|
+
margin-top: -1px;
|
|
423
|
+
border-radius: var(--radius-doc-template);
|
|
424
|
+
background: var(--color-doc-template-code);
|
|
425
|
+
}
|
|
402
426
|
.dockit-code-tabs [role='tabpanel'][hidden] { display: none; }
|
package/package.json
CHANGED