@mintlify/components 1.0.7 → 1.0.9

package/dist/components/code-group/code-group-select.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { CodeBlockTheme, CodeStyling } from '../../utils/shiki/code-styling';
+import { CopyToClipboardButtonProps } from '../code-block/copy-button';
+type ExampleCodeSnippet = {
+    filename: string;
+    code: string;
+    language: string;
+    audioUrl?: string;
+};
+interface CodeGroupSelectProps {
+    snippets: Record<string, Record<string, ExampleCodeSnippet>>;
+    className?: string;
+    syncedLabel?: string;
+    setSyncedLabel?: (label: string) => void;
+    setSelectedExampleIndex?: (index: number) => void;
+    askAiButton?: ReactNode;
+    codeBlockTheme?: CodeBlockTheme;
+    codeBlockThemeObject?: CodeStyling;
+    codeSnippetAriaLabel?: string;
+    copyButtonProps?: CopyToClipboardButtonProps;
+}
+declare const CodeGroupSelect: ({ snippets, syncedLabel, setSyncedLabel, setSelectedExampleIndex, askAiButton, codeBlockTheme, codeBlockThemeObject, codeSnippetAriaLabel, copyButtonProps, className, }: CodeGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
+export { type ExampleCodeSnippet, type CodeGroupSelectProps, CodeGroupSelect };
+//# sourceMappingURL=code-group-select.d.ts.map

package/dist/components/code-group/code-group-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-group-select.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/code-group-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9E,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,2BAA2B,CAAC;AAKnC,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,oBAAoB,CAAC,EAAE,WAAW,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,0BAA0B,CAAC;CAC9C;AAED,QAAA,MAAM,eAAe,GAAI,0KAWtB,oBAAoB,4CA0HtB,CAAC;AAEF,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/code-group/code-group-select.js

@@ -0,0 +1,109 @@
+import { jsxs as v, jsx as u } from "react/jsx-runtime";
+import { useState as e, useMemo as U, useEffect as B } from "react";
+import { cn as F } from "../../utils/cn.js";
+import { BaseCodeBlock as M } from "../code-block/base-code-block.js";
+import { CopyToClipboardButton as R } from "../code-block/copy-button.js";
+import { CodeSelectDropdown as j } from "./code-select-dropdown.js";
+const q = "Code snippet", W = ({
+  snippets: s,
+  syncedLabel: f,
+  setSyncedLabel: l,
+  setSelectedExampleIndex: c,
+  askAiButton: N,
+  codeBlockTheme: O = "system",
+  codeBlockThemeObject: k,
+  codeSnippetAriaLabel: G = q,
+  copyButtonProps: T,
+  className: _
+}) => {
+  const a = Object.keys(s), [h, A] = e(a[0]), w = h && a.includes(h) ? h : a[0], t = w !== void 0 ? s[w] : void 0, o = U(
+    () => t ? Object.keys(t) : void 0,
+    [t]
+  ), [g, m] = e(o == null ? void 0 : o[0]), d = g && (o != null && o.includes(g)) ? g : o == null ? void 0 : o[0], r = t !== void 0 && d !== void 0 ? t[d] : void 0, D = (i) => {
+    A(i);
+    const n = (s[i] ? Object.keys(s[i]) : [])[0];
+    n !== void 0 && (m(n), c == null || c(0), n !== f && (l == null || l(n)));
+  }, P = (i) => {
+    m(i);
+    const C = (o == null ? void 0 : o.indexOf(i)) ?? -1;
+    c == null || c(C === -1 ? 0 : C), i !== f && (l == null || l(i));
+  };
+  return B(() => {
+    if (f && f !== d && (o != null && o.includes(f))) {
+      m(f);
+      const i = (o == null ? void 0 : o.indexOf(f)) ?? -1;
+      c == null || c(i === -1 ? 0 : i);
+    }
+  }, [f, o, d, c]), /* @__PURE__ */ v(
+    "div",
+    {
+      className: F(
+        "not-prose relative flex min-w-full max-w-full flex-col overflow-hidden rounded-2xl p-0.5 text-xs leading-6",
+        "border border-gray-950/10 bg-gray-50 dark:border-white/10 dark:bg-white/5",
+        _
+      ),
+      "data-testid": "code-group-select",
+      children: [
+        /* @__PURE__ */ v("div", { className: "flex w-full justify-between rounded-t-2xl text-xs leading-6", children: [
+          /* @__PURE__ */ u(
+            j,
+            {
+              options: a,
+              selectedOption: w,
+              setSelectedOption: D
+            }
+          ),
+          /* @__PURE__ */ v("div", { className: "flex overflow-hidden", children: [
+            o && /* @__PURE__ */ u(
+              j,
+              {
+                options: o,
+                selectedOption: d,
+                setSelectedOption: P
+              }
+            ),
+            /* @__PURE__ */ v(
+              "div",
+              {
+                className: "flex items-center gap-1.5 pr-2.5",
+                "data-testid": "code-group-select-copy-button",
+                children: [
+                  /* @__PURE__ */ u(
+                    R,
+                    {
+                      codeBlockTheme: O,
+                      textToCopy: (r == null ? void 0 : r.code) ?? "",
+                      ...T
+                    }
+                  ),
+                  N && N
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ u(
+          "section",
+          {
+            "aria-label": G,
+            className: "flex flex-1 overflow-hidden",
+            children: /* @__PURE__ */ u("div", { className: "relative h-full max-h-full w-full min-w-full max-w-full", children: r != null && r.audioUrl ? /* @__PURE__ */ u("div", { className: "p-4", children: /* @__PURE__ */ u("audio", { className: "w-full", controls: !0, src: r.audioUrl, children: /* @__PURE__ */ u("track", { kind: "captions" }) }) }) : /* @__PURE__ */ u(
+              M,
+              {
+                codeBlockTheme: O,
+                codeBlockThemeObject: k ?? O,
+                isParentCodeGroup: !0,
+                isSmallText: !0,
+                language: r == null ? void 0 : r.language,
+                children: r == null ? void 0 : r.code
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as CodeGroupSelect
+};

package/dist/components/code-group/code-select-dropdown.d.ts

@@ -1,10 +1,8 @@
-import { CodeBlockTheme } from '../../utils/shiki/code-styling';
 type CodeSelectDropdownProps = {
     selectedOption?: string;
     setSelectedOption: (option: string) => void;
     options: string[];
-    codeBlockTheme?: CodeBlockTheme;
 };
-declare const CodeSelectDropdown: ({ selectedOption, setSelectedOption, options, codeBlockTheme, }: CodeSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const CodeSelectDropdown: ({ selectedOption, setSelectedOption, options, }: CodeSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export { CodeSelectDropdown };
 //# sourceMappingURL=code-select-dropdown.d.ts.map

package/dist/components/code-group/code-select-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-select-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/code-select-dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AASjE,KAAK,uBAAuB,GAAG;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,kBAAkB,GAAI,iEAKzB,uBAAuB,4CAwDzB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"code-select-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/code-select-dropdown.tsx"],"names":[],"mappings":"AAWA,KAAK,uBAAuB,GAAG;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,kBAAkB,GAAI,iDAIzB,uBAAuB,4CAiCzB,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/code-group/code-select-dropdown.js

@@ -0,0 +1,41 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+import { DropdownMenu as p, DropdownMenuTrigger as s, DropdownMenuContent as l, DropdownMenuItem as h } from "./dropdown.js";
+import g from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const b = ({
+  selectedOption: t,
+  setSelectedOption: m,
+  options: a
+}) => {
+  const n = a.length > 1;
+  return /* @__PURE__ */ o(p, { children: [
+    /* @__PURE__ */ e(
+      s,
+      {
+        className: "min-w-16 select-none bg-transparent px-2 py-[5px] font-medium text-primary text-xs dark:bg-transparent dark:text-primary-light",
+        disabled: !n,
+        children: /* @__PURE__ */ o("div", { className: "flex min-w-16 items-center gap-1.5 rounded-lg px-2 py-1 group-hover:bg-primary/10 dark:group-hover:bg-primary-light/10", children: [
+          /* @__PURE__ */ e("p", { className: "truncate", children: t }),
+          n && /* @__PURE__ */ e(g, { className: "min-w-3", size: 12 })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e(l, { className: "overflow-y-auto border border-stone-200/70 bg-stone-50 dark:border-stone-800/50 dark:bg-[#0F1117]", children: a.map((r, d) => /* @__PURE__ */ e(
+      h,
+      {
+        className: i(
+          "rounded-xl py-1.5 text-xs",
+          "hover:bg-primary/10 hover:text-primary dark:hover:bg-primary-light/10 dark:hover:text-primary-light",
+          r === t && "font-medium text-primary dark:text-primary-light",
+          r !== t && "text-stone-500 dark:text-white/50"
+        ),
+        onSelect: () => m(r),
+        children: r
+      },
+      `Option${d}${r}`
+    )) })
+  ] });
+};
+export {
+  b as CodeSelectDropdown
+};

package/dist/components/code-group/code-snippet.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { memo as p } from "react";
+import { useGetShikiHighlightedHtml as m } from "../../hooks/use-get-shiki-highlighted-html.js";
+import { SHIKI_CLASSNAME as s } from "../../utils/shiki/constants.js";
+const a = p(
+  ({ language: r, children: t, codeBlockThemeObject: i }) => {
+    const n = typeof t == "string" ? t : "";
+    r = r ?? "text";
+    const o = m({
+      codeString: n,
+      codeBlockTheme: i,
+      language: r,
+      opts: { structure: "inline" }
+    });
+    return typeof t == "string" && r && o ? /* @__PURE__ */ e("pre", { className: s, suppressHydrationWarning: !0, children: /* @__PURE__ */ e(
+      "code",
+      {
+        dangerouslySetInnerHTML: { __html: o },
+        suppressHydrationWarning: !0
+      }
+    ) }) : /* @__PURE__ */ e("pre", { className: s, suppressHydrationWarning: !0, children: /* @__PURE__ */ e("code", { suppressHydrationWarning: !0, children: t }) });
+  }
+);
+export {
+  a as CodeSnippet
+};

package/dist/components/code-group/dropdown.d.ts

@@ -30,5 +30,5 @@ declare const DropdownMenuItem: {
     ({ className, isSelected, children, onSelect, onClick, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, };
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, type DropdownMenuProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuTriggerProps, };
 //# sourceMappingURL=dropdown.d.ts.map

package/dist/components/code-group/dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,YAAY;uCAAsC,iBAAiB;;CAIxE,CAAC;AAGF,KAAK,wBAAwB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;AAE9E,QAAA,MAAM,mBAAmB;wCAItB,wBAAwB;;CAW1B,CAAC;AAGF,KAAK,wBAAwB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,mBAAmB;iDAKtB,wBAAwB;;CAmB1B,CAAC;AAGF,KAAK,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,gBAAgB;uEAOnB,qBAAqB;;CAwBvB,CAAC;AAGF,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjE,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,QAAA,MAAM,YAAY;uCAAsC,iBAAiB;;CAIxE,CAAC;AAGF,KAAK,wBAAwB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC;AAE9E,QAAA,MAAM,mBAAmB;wCAItB,wBAAwB;;CAW1B,CAAC;AAGF,KAAK,wBAAwB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,mBAAmB;iDAKtB,wBAAwB;;CAmB1B,CAAC;AAGF,KAAK,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG;IACxE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,gBAAgB;uEAOnB,qBAAqB;;CAwBvB,CAAC;AAGF,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,EACnB,KAAK,iBAAiB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,GAC9B,CAAC"}

package/dist/components/code-group/dropdown.js

@@ -2,11 +2,11 @@ import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import { cn as a } from "../../utils/cn.js";
 import p from "../../node_modules/.pnpm/lucide-react@0.453.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/check.js";
 import { MenuRoot as u } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/root/MenuRoot.js";
-import { MenuTrigger as l } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/trigger/MenuTrigger.js";
-import { MenuPortal as h } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/portal/MenuPortal.js";
-import { MenuPositioner as g } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/positioner/MenuPositioner.js";
-import { MenuPopup as x } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/popup/MenuPopup.js";
-import { MenuItem as w } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/item/MenuItem.js";
+import { MenuPortal as l } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/portal/MenuPortal.js";
+import { MenuPositioner as h } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/positioner/MenuPositioner.js";
+import { MenuPopup as g } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/popup/MenuPopup.js";
+import { MenuItem as x } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/item/MenuItem.js";
+import { MenuTrigger as w } from "../../node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/trigger/MenuTrigger.js";
 const f = ({ children: t, open: e, onOpenChange: o }) => /* @__PURE__ */ r(u, { onOpenChange: o, open: e, children: t });
 f.displayName = "DropdownMenu";
 const c = ({
@@ -14,7 +14,7 @@ const c = ({
   children: e,
   ...o
 }) => /* @__PURE__ */ r(
-  l,
+  w,
   {
     className: a(
       "group group overflow-hidden rounded-lg disabled:pointer-events-none [&>span]:line-clamp-1",
@@ -31,15 +31,15 @@ const y = ({
   sideOffset: e = 4,
   align: o = "start",
   ...n
-}) => /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r(
-  g,
+}) => /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+  h,
   {
     align: o,
     className: "z-50",
     collisionPadding: 16,
     sideOffset: e,
     children: /* @__PURE__ */ r(
-      x,
+      g,
       {
         className: a(
           "relative max-h-96 min-w-(--anchor-width) overflow-y-auto rounded-2xl border-standard bg-white p-1 text-stone-950/70 shadow-stone-500/5 shadow-xl dark:bg-stone-950 dark:text-white/70 dark:shadow-none dark:shadow-stone-500/5",
@@ -61,7 +61,7 @@ const M = ({
   onClick: d,
   ...s
 }) => /* @__PURE__ */ m(
-  w,
+  x,
   {
     className: a(
       "group relative flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-2 py-1 text-sm outline-0 hover:bg-stone-950/3 focus:bg-stone-950/5 data-disabled:pointer-events-none data-disabled:cursor-default data-disabled:opacity-50 dark:focus:bg-white/5 dark:hover:bg-white/3",

package/dist/components/code-group/index.d.ts

@@ -1,3 +1,9 @@
 export type { CodeGroupProps } from './code-group';
 export { CodeGroup } from './code-group';
+export type { CodeGroupSelectProps, ExampleCodeSnippet, } from './code-group-select';
+export { CodeGroupSelect } from './code-group-select';
+export type { CodeSnippetProps } from './code-snippet';
+export { CodeSnippet } from './code-snippet';
+export type { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuProps, DropdownMenuTriggerProps, } from './dropdown';
+export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from './dropdown';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/code-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/code-group/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EACV,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EACV,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -1,72 +1,81 @@
 import { cn as e } from "./utils/cn.js";
 import { getInitialOpenState as p, updateAndCopyUrl as m } from "./components/accordion/accordion-url-utils.js";
 import { Accordion as x } from "./components/accordion/index.js";
-import { Badge as n } from "./components/badge/badge.js";
-import { Callout as l, Check as c, Danger as i, Info as C, Note as S, Tip as T, Warning as s } from "./components/callout/callout.js";
-import { Card as P } from "./components/card/card.js";
-import { BaseCodeBlock as B } from "./components/code-block/base-code-block.js";
-import { CodeBlock as g } from "./components/code-block/code-block.js";
-import { CodeGroup as k } from "./components/code-group/code-group.js";
-import { Color as b } from "./components/color/color.js";
-import { Columns as A } from "./components/columns/columns.js";
-import { Expandable as _ } from "./components/expandable/expandable.js";
-import { Frame as w } from "./components/frame/frame.js";
-import { Icon as F } from "./components/icon/icon.js";
-import { Mermaid as H } from "./components/mermaid/mermaid.js";
-import { usePanZoom as M } from "./components/mermaid/use-pan-zoom.js";
-import { ZoomControls as O } from "./components/mermaid/zoom-controls.js";
-import { Panel as W } from "./components/panel/panel.js";
-import { ParamHead as q } from "./components/property/param-head.js";
-import { Property as J } from "./components/property/property.js";
-import { SearchButton as Q } from "./components/search/button.js";
-import { SearchProvider as X, useSearch as Y } from "./components/search/provider.js";
-import { Search as oo } from "./components/search/search.js";
-import { STEP_TITLE_SIZES as eo } from "./components/steps/constants.js";
-import { Steps as po } from "./components/steps/steps.js";
-import { Tabs as fo } from "./components/tabs/tabs.js";
-import { Tile as ao } from "./components/tile/tile.js";
-import { Tooltip as lo } from "./components/tooltip/tooltip.js";
-import { Tree as io } from "./components/tree/index.js";
-import { Update as So } from "./components/update/update.js";
-import { View as so } from "./components/view/view.js";
+import { Badge as a } from "./components/badge/badge.js";
+import { Callout as l, Check as C, Danger as c, Info as i, Note as u, Tip as S, Warning as T } from "./components/callout/callout.js";
+import { Card as g } from "./components/card/card.js";
+import { BaseCodeBlock as P } from "./components/code-block/base-code-block.js";
+import { CodeBlock as w } from "./components/code-block/code-block.js";
+import { CodeGroup as D } from "./components/code-group/code-group.js";
+import { CodeGroupSelect as E } from "./components/code-group/code-group-select.js";
+import { CodeSnippet as Z } from "./components/code-group/code-snippet.js";
+import { DropdownMenu as y, DropdownMenuContent as A, DropdownMenuItem as G, DropdownMenuTrigger as U } from "./components/code-group/dropdown.js";
+import { Color as v } from "./components/color/color.js";
+import { Columns as H } from "./components/columns/columns.js";
+import { Expandable as N } from "./components/expandable/expandable.js";
+import { Frame as V } from "./components/frame/frame.js";
+import { Icon as j } from "./components/icon/icon.js";
+import { Mermaid as z } from "./components/mermaid/mermaid.js";
+import { usePanZoom as K } from "./components/mermaid/use-pan-zoom.js";
+import { ZoomControls as R } from "./components/mermaid/zoom-controls.js";
+import { Panel as Y } from "./components/panel/panel.js";
+import { ParamHead as oo } from "./components/property/param-head.js";
+import { Property as eo } from "./components/property/property.js";
+import { SearchButton as po } from "./components/search/button.js";
+import { SearchProvider as fo, useSearch as xo } from "./components/search/provider.js";
+import { Search as ao } from "./components/search/search.js";
+import { STEP_TITLE_SIZES as Co } from "./components/steps/constants.js";
+import { Steps as io } from "./components/steps/steps.js";
+import { Tabs as So } from "./components/tabs/tabs.js";
+import { Tile as so } from "./components/tile/tile.js";
+import { Tooltip as Io } from "./components/tooltip/tooltip.js";
+import { Tree as ho } from "./components/tree/index.js";
+import { Update as Bo } from "./components/update/update.js";
+import { View as Mo } from "./components/view/view.js";
 export {
   x as Accordion,
-  n as Badge,
-  B as BaseCodeBlock,
+  a as Badge,
+  P as BaseCodeBlock,
   l as Callout,
-  P as Card,
-  c as Check,
-  g as CodeBlock,
-  k as CodeGroup,
-  b as Color,
-  A as Columns,
-  i as Danger,
-  _ as Expandable,
-  w as Frame,
-  F as Icon,
-  C as Info,
-  H as Mermaid,
-  S as Note,
-  W as Panel,
-  q as ParamHead,
-  J as Property,
-  eo as STEP_TITLE_SIZES,
-  oo as Search,
-  Q as SearchButton,
-  X as SearchProvider,
-  po as Steps,
-  fo as Tabs,
-  ao as Tile,
-  T as Tip,
-  lo as Tooltip,
-  io as Tree,
-  So as Update,
-  so as View,
-  s as Warning,
-  O as ZoomControls,
+  g as Card,
+  C as Check,
+  w as CodeBlock,
+  D as CodeGroup,
+  E as CodeGroupSelect,
+  Z as CodeSnippet,
+  v as Color,
+  H as Columns,
+  c as Danger,
+  y as DropdownMenu,
+  A as DropdownMenuContent,
+  G as DropdownMenuItem,
+  U as DropdownMenuTrigger,
+  N as Expandable,
+  V as Frame,
+  j as Icon,
+  i as Info,
+  z as Mermaid,
+  u as Note,
+  Y as Panel,
+  oo as ParamHead,
+  eo as Property,
+  Co as STEP_TITLE_SIZES,
+  ao as Search,
+  po as SearchButton,
+  fo as SearchProvider,
+  io as Steps,
+  So as Tabs,
+  so as Tile,
+  S as Tip,
+  Io as Tooltip,
+  ho as Tree,
+  Bo as Update,
+  Mo as View,
+  T as Warning,
+  R as ZoomControls,
   e as cn,
   p as getInitialOpenState,
   m as updateAndCopyUrl,
-  M as usePanZoom,
-  Y as useSearch
+  K as usePanZoom,
+  xo as useSearch
 };

package/dist/node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/floating-ui-react/components/FloatingPortal.js

@@ -10,8 +10,8 @@ import { createAttribute as k } from "../utils/createAttribute.js";
 import { useRenderElement as q } from "../../utils/useRenderElement.js";
 import { ownerVisuallyHidden as A } from "../../utils/constants.js";
 import { jsxs as L, jsx as b } from "react/jsx-runtime";
-import { EMPTY_OBJECT as B } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js";
-import { enableFocusInside as D, isOutsideEvent as C, getPreviousTabbable as H, getNextTabbable as J, disableFocusInside as Y } from "../utils/tabbable.js";
+import { enableFocusInside as D, isOutsideEvent as C, getPreviousTabbable as B, getNextTabbable as H, disableFocusInside as J } from "../utils/tabbable.js";
+import { EMPTY_OBJECT as Y } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/empty.js";
 import { focusOut as z } from "../../utils/reason-parts.js";
 const O = /* @__PURE__ */ o.createContext(null);
 process.env.NODE_ENV !== "production" && (O.displayName = "PortalContext");
@@ -20,7 +20,7 @@ function U(y = {}) {
   const {
     ref: d,
     container: l,
-    componentProps: N = B,
+    componentProps: N = Y,
     elementProps: F,
     elementState: g
   } = y, m = T(), a = K(), p = a == null ? void 0 : a.portalNode, [e, f] = o.useState(null), [E, i] = o.useState(null), R = j((n) => {
@@ -74,7 +74,7 @@ const W = /* @__PURE__ */ o.forwardRef(function(d, l) {
     if (!e || n)
       return;
     function s(u) {
-      e && u.relatedTarget && C(u) && (u.type === "focusin" ? D : Y)(e);
+      e && u.relatedTarget && C(u) && (u.type === "focusin" ? D : J)(e);
     }
     return e.addEventListener("focusin", s, !0), e.addEventListener("focusout", s, !0), () => {
       e.removeEventListener("focusin", s, !0), e.removeEventListener("focusout", s, !0);
@@ -101,7 +101,7 @@ const W = /* @__PURE__ */ o.forwardRef(function(d, l) {
           if (C(s, e))
             (u = R.current) == null || u.focus();
           else {
-            const P = t ? t.domReference : null, c = H(P);
+            const P = t ? t.domReference : null, c = B(P);
             c == null || c.focus();
           }
         }
@@ -116,7 +116,7 @@ const W = /* @__PURE__ */ o.forwardRef(function(d, l) {
           if (C(s, e))
             (u = r.current) == null || u.focus();
           else {
-            const P = t ? t.domReference : null, c = J(P);
+            const P = t ? t.domReference : null, c = H(P);
             c == null || c.focus(), t != null && t.closeOnFocusOut && (t == null || t.onOpenChange(!1, S(z, s.nativeEvent)));
           }
         }

package/dist/node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/floating-ui-react/utils/element.js

@@ -1,6 +1,6 @@
 import { isShadowRoot as i, isHTMLElement as s } from "../../../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js";
 import { isJSDOM as c } from "../../../../../../../@base-ui_utils@0.2.4_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/utils/esm/detectBrowser.js";
-import { TYPEABLE_SELECTOR as a, FOCUSABLE_ATTRIBUTE as u } from "./constants.js";
+import { FOCUSABLE_ATTRIBUTE as u, TYPEABLE_SELECTOR as a } from "./constants.js";
 function h(t) {
   var e;
   let r = t.activeElement;

package/dist/node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/root/MenuRoot.js

@@ -25,7 +25,7 @@ import { useRole as nt } from "../../floating-ui-react/hooks/useRole.js";
 import { useListNavigation as rt } from "../../floating-ui-react/hooks/useListNavigation.js";
 import { useTypeahead as st } from "../../floating-ui-react/hooks/useTypeahead.js";
 import { useInteractions as it } from "../../floating-ui-react/hooks/useInteractions.js";
-import { triggerFocus as te, triggerPress as ut, itemPress as at, triggerHover as k, focusOut as ct, listNavigation as lt, siblingOpen as pt, escapeKey as dt, imperativeAction as mt } from "../../utils/reason-parts.js";
+import { imperativeAction as ut, triggerFocus as te, triggerPress as at, itemPress as ct, triggerHover as k, focusOut as lt, listNavigation as pt, siblingOpen as dt, escapeKey as mt } from "../../utils/reason-parts.js";
 import { mergeProps as oe } from "../../merge-props/mergeProps.js";
 function Yt(ne) {
   const {
@@ -130,7 +130,7 @@ function Yt(ne) {
     t && s === te ? (I.current = !1, _.start(300, () => {
       I.current = !0;
     })) : (I.current = !0, _.clear());
-    const G = (s === ut || s === at) && a.detail === 0 && (a == null ? void 0 : a.isTrusted), Fe = !t && (s === dt || s == null);
+    const G = (s === at || s === ct) && a.detail === 0 && (a == null ? void 0 : a.isTrusted), Fe = !t && (s === mt || s == null);
     function J() {
       var W;
       const p = {
@@ -141,14 +141,14 @@ function Yt(ne) {
       const Q = ((W = o.trigger) == null ? void 0 : W.id) ?? null;
       (Q || t) && (p.activeTriggerId = Q, p.activeTriggerElement = o.trigger ?? null), e.update(p);
     }
-    s === k ? Ae.flushSync(J) : J(), n.type === "menubar" && (s === te || s === ct || s === k || s === lt || s === pt) ? e.set("instantType", "group") : G || Fe ? e.set("instantType", G ? "click" : "dismiss") : e.set("instantType", void 0);
+    s === k ? Ae.flushSync(J) : J(), n.type === "menubar" && (s === te || s === lt || s === k || s === pt || s === dt) ? e.set("instantType", "group") : G || Fe ? e.set("instantType", G ? "click" : "dismiss") : e.set("instantType", void 0);
   }), V = r.useCallback((t) => {
     const o = $e(t);
     return o.preventUnmountOnClose = () => {
       e.set("preventUnmountingOnClose", !0);
     }, o;
   }, [e]), Y = r.useCallback(() => {
-    e.setOpen(!1, V(mt));
+    e.setOpen(!1, V(ut));
   }, [e, V]);
   r.useImperativeHandle(le, () => ({
     unmount: L,

package/dist/node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@18.3.27_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@base-ui/react/esm/menu/trigger/MenuTrigger.js

@@ -31,8 +31,8 @@ import { useClick as Ue } from "../../floating-ui-react/hooks/useClick.js";
 import { useFocus as _e } from "../../floating-ui-react/hooks/useFocus.js";
 import { useInteractions as Le } from "../../floating-ui-react/hooks/useInteractions.js";
 import { getTabbableBeforeElement as Ge, isOutsideEvent as Ye, getTabbableAfterElement as je, getNextTabbable as Ke } from "../../floating-ui-react/utils/tabbable.js";
+import { triggerHover as Ve, cancelOpen as Xe, focusOut as j } from "../../utils/reason-parts.js";
 import { contains as C } from "../../floating-ui-react/utils/element.js";
-import { cancelOpen as Ve, triggerHover as Xe, focusOut as j } from "../../utils/reason-parts.js";
 const R = 2, $e = /* @__PURE__ */ r.forwardRef(function(f, i) {
   const {
     render: b,
@@ -80,11 +80,11 @@ const R = 2, $e = /* @__PURE__ */ r.forwardRef(function(f, i) {
     const p = ye(g.current);
     t.clientX >= p.left - R && t.clientX <= p.right + R && t.clientY >= p.top - R && t.clientY <= p.bottom + R || O.events.emit("close", {
       domEvent: t,
-      reason: Ve
+      reason: Xe
     });
   });
   r.useEffect(() => {
-    n && e.select("lastOpenChangeReason") === Xe && _(g.current).addEventListener("mouseup", v, {
+    n && e.select("lastOpenChangeReason") === Ve && _(g.current).addEventListener("mouseup", v, {
       once: !0
     });
   }, [n, v, e]);

package/dist/node_modules/.pnpm/@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js

@@ -1,4 +1,4 @@
-import { evaluate as R, getSide as E, getSideAxis as C, getOppositePlacement as Q, getExpandedPlacements as U, getOppositeAxisPlacements as Z, getAlignmentSides as ee, getAlignment as $, min as z, max as L, getPaddingObject as te, rectToClientRect as X, clamp as _, sides as ne, getOppositeAxis as J, getAlignmentAxis as ie, getAxisLength as se } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
+import { evaluate as R, getSide as E, getSideAxis as C, getOppositePlacement as Q, getExpandedPlacements as U, getOppositeAxisPlacements as Z, getAlignmentSides as ee, getAlignment as $, min as z, max as L, getPaddingObject as te, rectToClientRect as X, sides as ne, clamp as _, getOppositeAxis as J, getAlignmentAxis as ie, getAxisLength as se } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
 function I(t, e, d) {
   let {
     reference: s,

package/dist/node_modules/.pnpm/@floating-ui_dom@1.7.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.js

@@ -1,4 +1,4 @@
-import { flip as st, offset as rt, size as ct, hide as lt, shift as ft, detectOverflow as ut, computePosition as ht, limitShift as at } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
+import { flip as st, offset as rt, size as ct, hide as lt, shift as ft, computePosition as ut, detectOverflow as ht, limitShift as at } from "../../../../../@floating-ui_core@1.7.3/node_modules/@floating-ui/core/dist/floating-ui.core.js";
 import { createCoords as y, rectToClientRect as J, floor as A, max as E, round as D, min as N } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.js";
 import { getOverflowAncestors as $, isElement as x, getDocumentElement as R, getWindow as L, getFrameElement as U, getComputedStyle as b, isHTMLElement as O, isWebKit as Q, isTopLayer as V, getParentNode as S, isLastTraversableNode as z, isTableElement as dt, isContainingBlock as Y, getContainingBlock as gt, getNodeName as _, isOverflowElement as q, getNodeScroll as H } from "../../../../../@floating-ui_utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.js";
 function Z(t) {
@@ -374,7 +374,7 @@ function zt(t, e, o, i) {
     }), h == null || h(), (g = a) == null || g.disconnect(), a = null, f && cancelAnimationFrame(m);
   };
 }
-const Ht = ut, It = rt, Mt = ft, Nt = st, $t = ct, Vt = lt, _t = at, qt = (t, e, o) => {
+const Ht = ht, It = rt, Mt = ft, Nt = st, $t = ct, Vt = lt, _t = at, qt = (t, e, o) => {
   const i = /* @__PURE__ */ new Map(), n = {
     platform: St,
     ...o
@@ -382,7 +382,7 @@ const Ht = ut, It = rt, Mt = ft, Nt = st, $t = ct, Vt = lt, _t = at, qt = (t, e,
     ...n.platform,
     _c: i
   };
-  return ht(t, e, {
+  return ut(t, e, {
     ...n,
     platform: r
   });