@dreamlake/dockit 0.2.22 → 0.2.23
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 +23 -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,36 @@
|
|
|
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);
|
|
391
|
+
box-shadow: inset 0 -1px var(--color-doc-template-faint);
|
|
392
392
|
min-height: 30px;
|
|
393
393
|
padding: 0 156px 0 12px;
|
|
394
394
|
}
|
|
395
|
-
.dockit-code-tabs-list { overflow-x: auto; min-height:
|
|
396
|
-
|
|
395
|
+
.dockit-code-tabs-list { overflow-x: auto; min-height: 30px; gap: 2px; }
|
|
396
|
+
/* Raised file-tab geometry follows Studio's chat TabStrip. UIKit supplies the
|
|
397
|
+
compound primitives; the active page-colored bottom edge opens the baseline. */
|
|
398
|
+
.dockit-code-tabs-list [role='tab'] {
|
|
399
|
+
margin: 0 1px;
|
|
400
|
+
padding: 3px 9px 4px;
|
|
401
|
+
border: 1px solid transparent;
|
|
402
|
+
border-radius: 6px 6px 0 0;
|
|
403
|
+
background: transparent;
|
|
404
|
+
line-height: 18px;
|
|
405
|
+
}
|
|
406
|
+
.dockit-code-tabs-list [role='tab'][aria-selected='true'] {
|
|
407
|
+
border-color: var(--color-doc-template-faint);
|
|
408
|
+
border-bottom-color: var(--color-doc-template-bg);
|
|
409
|
+
background: var(--color-doc-template-bg);
|
|
410
|
+
}
|
|
397
411
|
.dockit-code-tabs-list [role='tab']:focus-visible,
|
|
398
412
|
.dockit-code-tabs [role='tabpanel']:focus-visible {
|
|
399
413
|
outline: 2px solid var(--color-doc-template-accent);
|
|
400
414
|
outline-offset: -3px;
|
|
401
415
|
}
|
|
416
|
+
.dockit-code-tabs [role='tabpanel'] {
|
|
417
|
+
border: 1px solid var(--color-doc-template-faint);
|
|
418
|
+
border-top: 0;
|
|
419
|
+
border-radius: 0 0 var(--radius-doc-template) var(--radius-doc-template);
|
|
420
|
+
background: var(--color-doc-template-code);
|
|
421
|
+
}
|
|
402
422
|
.dockit-code-tabs [role='tabpanel'][hidden] { display: none; }
|
package/package.json
CHANGED