@mintlify/components 1.0.6 → 1.0.8

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/index.d.ts

@@ -1,3 +1,5 @@
 export type { CodeGroupProps } from './code-group';
 export { CodeGroup } from './code-group';
+export type { CodeSnippetProps } from './code-snippet';
+export { CodeSnippet } from './code-snippet';
 //# 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,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/expandable/expandable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable.d.ts","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAWf,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,6KAejB,eAAe,4CA8HjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"expandable.d.ts","sourceRoot":"","sources":["../../../src/components/expandable/expandable.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAWf,KAAK,eAAe,GAAG;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sBAAsB,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,6KAejB,eAAe,4CAgIjB,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/expandable/expandable.js

@@ -1,72 +1,72 @@
 import { jsxs as p, jsx as x } from "react/jsx-runtime";
-import { useState as u, useLayoutEffect as j, useEffect as B, useId as z } from "react";
+import { useState as u, useLayoutEffect as j, useEffect as z, useId as B } from "react";
 import { Classes as H } from "../../constants/selectors.js";
 import { useExpandableMemory as I } from "../../hooks/use-expandable-memory.js";
-import { cn as r } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import { Icon as G } from "../icon/icon.js";
-const N = "expandable-content", J = "Hide", K = "Show", Q = "child attributes", P = ({
-  title: n = Q,
-  defaultOpen: o = !1,
+const v = "expandable-content", J = "Hide", K = "Show", Q = "child attributes", P = ({
+  title: o = Q,
+  defaultOpen: n = !1,
   onChange: b,
-  lazy: T,
-  className: L,
-  children: v,
-  uniqueParamId: s,
+  lazy: N,
+  className: T,
+  children: L,
+  uniqueParamId: r,
   onMount: a,
   onOpen: d,
-  onClose: c,
-  openedText: _ = J,
-  closedText: k = K,
-  hasScrolledToAnchorRef: i,
+  onClose: i,
+  openedText: S = J,
+  closedText: _ = K,
+  hasScrolledToAnchorRef: c,
   anchor: l
 }) => {
-  const f = !!s, {
-    ref: D,
-    isExpanded: S,
+  const f = !!r, {
+    ref: k,
+    isExpanded: D,
     onManualToggle: w,
     isInSessionStorage: A
-  } = I(s || "", o), [y, F] = u(o), U = !!(s && (l != null && l.includes(s))) && !(i != null && i.current), e = f ? (
+  } = I(r || "", n), [y, C] = u(n), F = !!(r && (l != null && l.includes(r))) && !(c != null && c.current), e = f ? (
     // biome-ignore lint/style/noNestedTernary: TODO
-    U ? !0 : (
+    F ? !0 : (
       // biome-ignore lint/style/noNestedTernary: TODO
-      A ? S : o
+      A ? D : n
     )
   ) : y, [m, E] = u(
-    e || !T
+    e || !N
   );
   j(() => {
     e && !m && E(!0);
-  }, [e, m]), B(() => {
+  }, [e, m]), z(() => {
     a == null || a();
   }, []);
-  const C = (t) => {
-    E(!0), b && b(t), t ? d == null || d() : c == null || c();
+  const U = (t) => {
+    E(!0), b && b(t), t ? d == null || d() : i == null || i();
   }, X = (t) => {
-    f ? w(t) : F(t), C(t);
-  }, $ = z(), g = `${n}-${$}-content`.replace(/\s+/g, "-");
+    f ? w(t) : C(t), U(t);
+  }, $ = B(), g = `${o}-${$}-content`.replace(/\s+/g, "-");
   return /* @__PURE__ */ p(
     "details",
     {
-      className: r(
+      className: s(
         H.Expandable,
         "mt-4 rounded-xl border-standard",
-        L
+        T
       ),
       "data-component-part": "expandable",
-      "data-testid": s ? `${s}-children` : void 0,
+      "data-testid": r ? `${r}-children` : void 0,
       onToggle: (t) => {
         const h = t.currentTarget.open;
         h !== e && X(h);
       },
       open: e,
-      ref: D,
+      ref: k,
       children: [
         /* @__PURE__ */ p(
           "summary",
           {
             "aria-controls": g,
             "aria-expanded": e,
-            className: r(
+            className: s(
               "not-prose flex w-full cursor-pointer flex-row content-center items-center text-sm",
               "rounded-t-xl px-3.5 py-3 text-stone-600 hover:bg-stone-50/50 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-white/5 dark:hover:text-stone-200",
               "list-none [&::-webkit-details-marker]:hidden",
@@ -77,18 +77,20 @@ const N = "expandable-content", J = "Hide", K = "Show", Q = "child attributes",
               /* @__PURE__ */ x(
                 G,
                 {
-                  className: r(
+                  className: s(
                     "size-2.5 bg-stone-400 transition-transform",
                     e && "rotate-90"
                   ),
                   "data-component-part": "expandable-icon",
-                  icon: "angle-right"
+                  icon: "angle-right",
+                  overrideColor: !0,
+                  overrideSize: !0
                 }
               ),
               /* @__PURE__ */ x("div", { className: "ml-3 text-left leading-tight", children: /* @__PURE__ */ p("p", { className: "m-0", contentEditable: !1, children: [
-                e ? _ : k,
+                e ? S : _,
                 " ",
-                n
+                o
               ] }) })
             ]
           }
@@ -96,18 +98,18 @@ const N = "expandable-content", J = "Hide", K = "Show", Q = "child attributes",
         /* @__PURE__ */ x(
           "div",
           {
-            className: r(
-              N,
+            className: s(
+              v,
               "mx-3 border-stone-100 border-t px-2 dark:border-white/10"
             ),
-            "data-component-part": N,
+            "data-component-part": v,
             id: g,
-            children: m && v
+            children: m && L
           }
         )
       ]
     },
-    n
+    o
   );
 };
 export {

package/dist/index.js

@@ -7,28 +7,29 @@ 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 { CodeSnippet as b } from "./components/code-group/code-snippet.js";
+import { Color as A } from "./components/color/color.js";
+import { Columns as _ } from "./components/columns/columns.js";
+import { Expandable as w } from "./components/expandable/expandable.js";
+import { Frame as F } from "./components/frame/frame.js";
+import { Icon as H } from "./components/icon/icon.js";
+import { Mermaid as M } from "./components/mermaid/mermaid.js";
+import { usePanZoom as O } from "./components/mermaid/use-pan-zoom.js";
+import { ZoomControls as W } from "./components/mermaid/zoom-controls.js";
+import { Panel as q } from "./components/panel/panel.js";
+import { ParamHead as J } from "./components/property/param-head.js";
+import { Property as Q } from "./components/property/property.js";
+import { SearchButton as X } from "./components/search/button.js";
+import { SearchProvider as $, useSearch as oo } from "./components/search/provider.js";
+import { Search as eo } from "./components/search/search.js";
+import { STEP_TITLE_SIZES as po } from "./components/steps/constants.js";
+import { Steps as fo } from "./components/steps/steps.js";
+import { Tabs as ao } from "./components/tabs/tabs.js";
+import { Tile as lo } from "./components/tile/tile.js";
+import { Tooltip as io } from "./components/tooltip/tooltip.js";
+import { Tree as So } from "./components/tree/index.js";
+import { Update as so } from "./components/update/update.js";
+import { View as Po } from "./components/view/view.js";
 export {
   x as Accordion,
   n as Badge,
@@ -38,35 +39,36 @@ export {
   c as Check,
   g as CodeBlock,
   k as CodeGroup,
-  b as Color,
-  A as Columns,
+  b as CodeSnippet,
+  A as Color,
+  _ as Columns,
   i as Danger,
-  _ as Expandable,
-  w as Frame,
-  F as Icon,
+  w as Expandable,
+  F as Frame,
+  H as Icon,
   C as Info,
-  H as Mermaid,
+  M 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,
+  q as Panel,
+  J as ParamHead,
+  Q as Property,
+  po as STEP_TITLE_SIZES,
+  eo as Search,
+  X as SearchButton,
+  $ as SearchProvider,
+  fo as Steps,
+  ao as Tabs,
+  lo as Tile,
   T as Tip,
-  lo as Tooltip,
-  io as Tree,
-  So as Update,
-  so as View,
+  io as Tooltip,
+  So as Tree,
+  so as Update,
+  Po as View,
   s as Warning,
-  O as ZoomControls,
+  W as ZoomControls,
   e as cn,
   p as getInitialOpenState,
   m as updateAndCopyUrl,
-  M as usePanZoom,
-  Y as useSearch
+  O as usePanZoom,
+  oo as useSearch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mintlify/components",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Mintlify open-source UI components",
   "type": "module",
   "main": "./dist/index.cjs",