@mintlify/components 0.4.17 → 1.0.0

package/dist/utils/shiki/index.js

@@ -0,0 +1,152 @@
+import { transformerMetaHighlight as D, transformerNotationHighlight as P, transformerNotationFocus as j, transformerNotationDiff as B } from "../../node_modules/.pnpm/@shikijs_transformers@3.21.0/node_modules/@shikijs/transformers/dist/index.js";
+import { MAX_PREVIEW_BYTES as k } from "../../constants/index.js";
+import { codeStylingToThemeOrThemes as G } from "./get-code-styling.js";
+import { getShikiLanguageFromPreset as p } from "./snippet-presets.js";
+import { LANGS as K, SHIKI_COLOR_REPLACEMENTS as z, LINE_HIGHLIGHT_CLASS_NAME as c, LINE_FOCUS_CLASS_NAME as g, LINE_DIFF_ADD_CLASS_NAME as U, LINE_DIFF_REMOVE_CLASS_NAME as V, SHIKI_LANG_MAP as C } from "./constants.js";
+import { getShikiWorker as W } from "./worker-client.js";
+import { createHighlighter as $ } from "../../node_modules/.pnpm/shiki@3.21.0/node_modules/shiki/dist/bundle-full.js";
+import { createJavaScriptRegexEngine as J } from "../../node_modules/.pnpm/@shikijs_engine-javascript@3.21.0/node_modules/@shikijs/engine-javascript/dist/engine-compile.js";
+import { hastToHtml as x } from "../../node_modules/.pnpm/@shikijs_core@3.21.0/node_modules/@shikijs/core/dist/index.js";
+const h = {
+  matchAlgorithm: "v3"
+}, X = [
+  D({
+    className: c
+  }),
+  P({
+    ...h,
+    classActiveLine: c
+  }),
+  j({
+    ...h,
+    classActiveLine: g
+  }),
+  B({
+    ...h,
+    classLineAdd: U,
+    classLineRemove: V
+  })
+], Y = J({
+  forgiving: !0,
+  cache: /* @__PURE__ */ new Map()
+});
+let s, R, F = !1;
+const w = $({
+  themes: [],
+  langs: K,
+  engine: Y
+}).then((e) => {
+  s = e;
+}).catch((e) => {
+  console.error(e), R = e ?? new Error("Unknown error occurred initializing highlighter");
+}).finally(() => {
+  F = !0;
+});
+function q(e) {
+  const t = "text";
+  if (e === void 0)
+    return t;
+  const i = Number(e);
+  if (!Number.isNaN(i) && i > 99 && i < 600)
+    return "json";
+  const r = e.toLowerCase(), a = p(r);
+  return C[a] ?? C[r] ?? t;
+}
+function Q(e, t) {
+  const i = /language-(\w+)/.exec(e ?? "");
+  return i ? i[1] ?? "text" : t ?? "text";
+}
+function O(e) {
+  if (typeof e == "string" || !e)
+    return e === "system" || !e ? ["dark-plus", "github-light-default"] : ["dark-plus"];
+  const { theme: t } = e;
+  return typeof t == "string" ? [t] : typeof t == "object" ? [t.dark, t.light] : ["dark-plus", "github-light-default"];
+}
+function Z(e) {
+  if (!s)
+    return !1;
+  const t = s.getLoadedThemes();
+  return O(e).every((r) => r === "css-variables" || t.includes(r));
+}
+async function ee(e) {
+  if (await w, !s)
+    return;
+  const t = s.getLoadedThemes(), i = O(e).filter(
+    (r) => r !== "css-variables" && !t.includes(r)
+  );
+  i.length > 0 && await s.loadTheme(...i);
+}
+function M(e) {
+  var a, f, m, d, u, L, S;
+  if (!e.codeString || R !== void 0)
+    return;
+  if (s === void 0)
+    return (a = e.opts) != null && a.noAsync || F ? void 0 : w.then(() => M(e)).catch(() => {
+    });
+  if (!Z(e.codeBlockTheme))
+    return (f = e.opts) != null && f.noAsync ? void 0 : ee(e.codeBlockTheme).then(() => M(e)).catch(() => {
+    });
+  let t;
+  if ("language" in e) {
+    if (e.language === "text")
+      return;
+    t = e.language;
+  } else {
+    if (e.className === "lang-text")
+      return;
+    t = Q(e.className, e.fileName);
+  }
+  if (e.codeString.length > k * 5)
+    return;
+  if (e.codeString.length > k) {
+    if (((m = e.opts) == null ? void 0 : m.noAsync) === !0)
+      return;
+    try {
+      const n = W();
+      return n === void 0 ? void 0 : n.highlight(e);
+    } catch {
+      return;
+    }
+  }
+  let i;
+  if (t)
+    try {
+      const n = (u = (d = e.opts) == null ? void 0 : d.highlightedLines) != null && u.length || (S = (L = e.opts) == null ? void 0 : L.focusedLines) != null && S.length ? "codeToHast" : "codeToHtml", v = e.codeString.trim(), o = G(e.codeBlockTheme);
+      i = s[n](v, {
+        lang: q(t),
+        ...o,
+        colorReplacements: { ...z },
+        transformers: X,
+        tabindex: !1,
+        ...e.opts
+      });
+    } catch (n) {
+      console.error("error getting shiki highlighted html", n);
+    }
+  if (typeof i != "object")
+    return i;
+  const r = i.children[0];
+  if (r) {
+    if (r.type === "element" && r.tagName === "pre") {
+      const n = r.children[0];
+      if (!(n != null && n.children))
+        return x(i);
+      n.children.filter(
+        (o) => o.type === "element" && o.tagName === "span"
+      ).forEach((o, b) => {
+        var N, A, E, _, y, T, I, H;
+        const l = b + 1;
+        typeof o.properties.class == "string" ? ((A = (N = e.opts) == null ? void 0 : N.highlightedLines) != null && A.includes(l) && (o.properties.class += ` ${c}`), (_ = (E = e.opts) == null ? void 0 : E.focusedLines) != null && _.includes(l) && (o.properties.class += ` ${g}`)) : Array.isArray(o.properties.class) && ((T = (y = e.opts) == null ? void 0 : y.highlightedLines) != null && T.includes(l) && o.properties.class.push(c), (H = (I = e.opts) == null ? void 0 : I.focusedLines) != null && H.includes(l) && o.properties.class.push(g));
+      });
+    }
+    return x(i);
+  }
+}
+export {
+  X as SHIKI_TRANSFORMERS,
+  Q as getLanguageFromClassName,
+  M as getShikiHighlightedHtml,
+  q as getShikiLanguage,
+  w as highlighterPromise,
+  ee as loadShikiThemes
+};

package/dist/utils/shiki/lib.js

@@ -0,0 +1,36 @@
+import { useMemo as i } from "react";
+import { getNodeText as s } from "../get-node-text.js";
+import { SHIKI_CLASSNAME as n } from "./constants.js";
+function r(t) {
+  if (!t || typeof t != "object")
+    return !1;
+  if (Array.isArray(t)) {
+    for (const o of t)
+      if (r(o))
+        return !0;
+  }
+  if ("props" in t && t.props && typeof t.props == "object") {
+    if ("className" in t.props && typeof t.props.className == "string" && t.props.className.includes(n))
+      return !0;
+    if ("children" in t.props)
+      return r(t.props.children);
+  }
+  return !1;
+}
+function C(t, o, e = !1) {
+  return ((o == null ? void 0 : o.includes(n)) || r(t)) && !e ? "" : s(t);
+}
+function p(t) {
+  if (!t || typeof t != "string")
+    return 0;
+  const o = t.match(/<span class="line/g);
+  return o ? o.length : 0;
+}
+function g(t, o) {
+  return i(() => o !== void 0 ? o : t ? p(t) : void 0, [t, o]);
+}
+export {
+  p as calculateCodeLinesFromHtml,
+  C as getCodeString,
+  g as useCalculateCodeLines
+};

package/dist/utils/shiki/shiki-themes.js

@@ -0,0 +1,67 @@
+const a = [
+  "andromeeda",
+  "aurora-x",
+  "ayu-dark",
+  "catppuccin-frappe",
+  "catppuccin-latte",
+  "catppuccin-macchiato",
+  "catppuccin-mocha",
+  "dark-plus",
+  "dracula",
+  "dracula-soft",
+  "everforest-dark",
+  "everforest-light",
+  "github-dark",
+  "github-dark-default",
+  "github-dark-dimmed",
+  "github-dark-high-contrast",
+  "github-light",
+  "github-light-default",
+  "github-light-high-contrast",
+  "gruvbox-dark-hard",
+  "gruvbox-dark-medium",
+  "gruvbox-dark-soft",
+  "gruvbox-light-hard",
+  "gruvbox-light-medium",
+  "gruvbox-light-soft",
+  "houston",
+  "kanagawa-dragon",
+  "kanagawa-lotus",
+  "kanagawa-wave",
+  "laserwave",
+  "light-plus",
+  "material-theme",
+  "material-theme-darker",
+  "material-theme-lighter",
+  "material-theme-ocean",
+  "material-theme-palenight",
+  "min-dark",
+  "min-light",
+  "monokai",
+  "night-owl",
+  "nord",
+  "one-dark-pro",
+  "one-light",
+  "plastic",
+  "poimandres",
+  "red",
+  "rose-pine",
+  "rose-pine-dawn",
+  "rose-pine-moon",
+  "slack-dark",
+  "slack-ochin",
+  "snazzy-light",
+  "solarized-dark",
+  "solarized-light",
+  "synthwave-84",
+  "tokyo-night",
+  "vesper",
+  "vitesse-black",
+  "vitesse-dark",
+  "vitesse-light",
+  "css-variables"
+  // for users who want to use custom CSS to style their code blocks
+];
+export {
+  a as SHIKI_THEMES
+};

package/dist/utils/shiki/snippet-presets.js

@@ -0,0 +1,149 @@
+const i = [
+  {
+    key: "bash",
+    aliases: ["curl", "sh", "shell"],
+    displayName: "cURL",
+    shikiLanguage: "bash",
+    httpSnippet: { target: "shell" }
+  },
+  {
+    key: "python",
+    aliases: ["py"],
+    displayName: "Python",
+    shikiLanguage: "python",
+    httpSnippet: { target: "python", client: "requests" }
+  },
+  {
+    key: "javascript",
+    aliases: ["js"],
+    displayName: "JavaScript",
+    shikiLanguage: "javascript",
+    httpSnippet: { target: "javascript", client: "fetch" }
+  },
+  {
+    key: "node",
+    aliases: ["nodejs", "node.js"],
+    displayName: "Node.js",
+    iconKey: "node",
+    shikiLanguage: "javascript",
+    httpSnippet: { target: "node", client: "fetch" }
+  },
+  {
+    key: "php",
+    displayName: "PHP",
+    shikiLanguage: "php",
+    httpSnippet: { target: "php", client: "curl" }
+  },
+  {
+    key: "go",
+    aliases: ["golang"],
+    displayName: "Go",
+    shikiLanguage: "go",
+    httpSnippet: { target: "go" }
+  },
+  {
+    key: "java",
+    displayName: "Java",
+    shikiLanguage: "java",
+    httpSnippet: { target: "java" }
+  },
+  {
+    key: "ruby",
+    aliases: ["rb"],
+    displayName: "Ruby",
+    shikiLanguage: "ruby",
+    httpSnippet: { target: "ruby" }
+  },
+  {
+    key: "powershell",
+    displayName: "PowerShell",
+    shikiLanguage: "bash",
+    // shiki doesn't have powershell in our LANGS
+    httpSnippet: { target: "powershell" }
+  },
+  {
+    key: "swift",
+    displayName: "Swift",
+    shikiLanguage: "swift",
+    httpSnippet: { target: "swift" }
+  },
+  {
+    key: "csharp",
+    aliases: ["c#"],
+    displayName: "C#",
+    shikiLanguage: "csharp",
+    httpSnippet: { target: "csharp", client: "restsharp" }
+  },
+  {
+    key: "dotnet",
+    aliases: [".net", ".NET", "dotnet", "dot-net"],
+    displayName: ".NET",
+    iconKey: "dot-net",
+    shikiLanguage: "csharp",
+    httpSnippet: { target: "csharp", client: "restsharp" }
+  },
+  {
+    key: "typescript",
+    aliases: ["ts"],
+    displayName: "TypeScript",
+    shikiLanguage: "typescript",
+    httpSnippet: { target: "javascript", client: "fetch" }
+  },
+  {
+    key: "c",
+    displayName: "C",
+    shikiLanguage: "c",
+    httpSnippet: { target: "c" }
+  },
+  {
+    key: "c++",
+    aliases: ["cpp"],
+    displayName: "C++",
+    shikiLanguage: "c++",
+    iconKey: "cplusplus",
+    httpSnippet: { target: "c" }
+  },
+  {
+    key: "kotlin",
+    aliases: ["kt"],
+    displayName: "Kotlin",
+    shikiLanguage: "kotlin",
+    httpSnippet: { target: "kotlin" }
+  },
+  {
+    key: "rust",
+    aliases: ["rs"],
+    displayName: "Rust",
+    shikiLanguage: "rust",
+    httpSnippet: { target: "rust" }
+  },
+  {
+    key: "dart",
+    aliases: ["flutter"],
+    displayName: "Dart",
+    shikiLanguage: "dart",
+    httpSnippet: { target: "dart" }
+  }
+], a = /* @__PURE__ */ new Map();
+for (const e of i) {
+  a.set(e.key.toLowerCase(), e);
+  for (const t of e.aliases ?? [])
+    a.set(t.toLowerCase(), e);
+}
+const s = (e) => a.get(e.toLowerCase()), p = (e) => {
+  var t;
+  return ((t = s(e)) == null ? void 0 : t.displayName) ?? e;
+}, n = (e) => {
+  const t = s(e);
+  return t ? t.iconKey ?? t.key : void 0;
+}, r = (e) => {
+  var t;
+  return ((t = s(e)) == null ? void 0 : t.shikiLanguage) ?? e;
+};
+export {
+  i as SNIPPET_PRESETS,
+  p as getDisplayName,
+  n as getIconKey,
+  s as getPreset,
+  r as getShikiLanguageFromPreset
+};

package/dist/utils/shiki/worker-client.js

@@ -0,0 +1,19 @@
+import { wrap as t } from "../../node_modules/.pnpm/comlink@4.4.2/node_modules/comlink/dist/esm/comlink.js";
+let r;
+function n() {
+  if (typeof Worker > "u")
+    return;
+  if (r)
+    return r;
+  const e = new Worker(new URL(
+    /* @vite-ignore */
+    "/assets/worker-DAn5D1Z1.js",
+    import.meta.url
+  ), {
+    type: "module"
+  });
+  return r = t(e), r;
+}
+export {
+  n as getShikiWorker
+};

package/dist/utils/slugify.js

@@ -0,0 +1,4 @@
+const r = (e) => e.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
+export {
+  r as slugify
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mintlify/components",
-  "version": "0.4.17",
-  "description": "Mintlify Headless UI components",
+  "version": "1.0.0",
+  "description": "Mintlify open-source UI components",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -15,9 +15,7 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./styles.nolayered.css": "./dist/styles.nolayered.css",
-    "./*.css": "./dist/components/*/*.css"
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",
@@ -27,7 +25,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/mintlify/components.git",
-    "directory": "components/packages/react"
+    "directory": "packages/react"
   },
   "bugs": {
     "url": "https://github.com/mintlify/components/issues"
@@ -39,58 +37,69 @@
     "react",
     "components",
     "ui",
-    "headless",
     "mintlify",
-    "design-system",
     "tailwindcss"
   ],
   "engines": {
     "node": ">=20.0.0"
   },
   "scripts": {
-    "dev": "pnpm generate:theme && vite build --watch",
-    "build": "pnpm generate:theme && tsc && vite build && pnpm generate:nolayered-css",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:css": "stylelint '**/*.css'",
-    "lint:all": "pnpm lint && pnpm lint:css",
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "lint:check": "biome check .",
+    "lint:fix": "biome check --write .",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "generate:theme": "tsx scripts/generate-theme-css.ts",
-    "generate:nolayered-css": "tsx scripts/generate-nolayered-css.ts"
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.6",
-    "clsx": "^2.1.1",
-    "color": "^5.0.3"
+    "@base-ui/react": "1.1.0",
+    "@shikijs/transformers": "3.21.0",
+    "@sindresorhus/slugify": "2.2.1",
+    "clsx": "2.1.1",
+    "color": "4.2.3",
+    "comlink": "4.4.2",
+    "hast": "1.0.0",
+    "lodash": "4.17.23",
+    "lucide-react": "0.453.0",
+    "mermaid": "11.12.2",
+    "react-use-rect": "2.0.6",
+    "shiki": "3.21.0",
+    "tailwind-merge": "2.6.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.0.8",
-    "@storybook/react-vite": "^10.0.8",
-    "@tailwindcss/postcss": "^4.1.17",
-    "@types/color": "^3.0.6",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.15.0",
-    "@typescript-eslint/parser": "^8.15.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "autoprefixer": "^10.4.22",
-    "eslint": "^9.15.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^10.0.8",
-    "next-themes": "^0.4.6",
-    "postcss": "^8.5.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "storybook": "^10.0.8",
-    "tailwindcss": "^4.1.17",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.1",
-    "vite-plugin-dts": "^4.3.0"
+    "@shikijs/types": "3.21.0",
+    "@storybook/addon-docs": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
+    "@tailwindcss/postcss": "4.1.18",
+    "@tailwindcss/typography": "0.5.19",
+    "@tailwindcss/vite": "4.1.18",
+    "@types/color": "4.2.0",
+    "@types/hast": "3.0.4",
+    "@types/lodash": "4.17.23",
+    "@types/node": "22.19.1",
+    "@types/react": "18.3.27",
+    "@types/react-dom": "18.3.7",
+    "@typescript-eslint/eslint-plugin": "8.47.0",
+    "@typescript-eslint/parser": "8.47.0",
+    "@vitejs/plugin-react": "4.7.0",
+    "globals": "15.15.0",
+    "mini-svg-data-uri": "1.4.4",
+    "next-themes": "0.4.6",
+    "postcss": "8.5.6",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "rimraf": "6.0.1",
+    "storybook": "10.1.11",
+    "tailwindcss": "4.1.18",
+    "typescript": "5.9.3",
+    "ultracite": "7.0.12",
+    "vite": "6.4.1",
+    "vite-plugin-dts": "4.5.4"
   }
 }

package/dist/components/frame/frame.css

@@ -1 +0,0 @@
-@layer mt-components{.mt-frame-container{display:block}.mt-frame-hint{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.mt-frame-hint-icon{flex-shrink:0;width:1rem;height:1rem;fill:var(--mt-frame-hint-icon-fill, rgb(156 163 175))}.mt-frame-hint-text{font-size:.875rem;font-weight:500;line-height:1.25rem;color:var(--mt-frame-hint-text-color, rgb(55 65 81))}.mt-frame{position:relative;padding:.5rem;border-radius:1rem;overflow:hidden;background-color:var(--mt-frame-bg, rgb(249 250 251 / 50%))}.mt-frame-background{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:var( --mt-frame-background-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(229 229 229 / 0.2)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e") );background-position:10px 10px;mask-image:var( --mt-frame-background-mask, linear-gradient(0deg, #fff, rgb(255 255 255 / 60%)) );-webkit-mask-image:var( --mt-frame-background-mask, linear-gradient(0deg, #fff, rgb(255 255 255 / 60%)) )}.mt-frame-content{position:relative;display:flex;justify-content:center;border-radius:.75rem;overflow:hidden;background-color:var(--mt-frame-content-bg, rgb(255 255 255))}.mt-frame-caption{position:relative;display:flex;justify-content:center;margin-top:.75rem;padding:0 2rem .5rem;font-size:.875rem;line-height:1.25rem;color:var(--mt-frame-caption-color, rgb(55 65 81))}.mt-frame-border{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:1px solid var(--mt-frame-border-color, rgb(0 0 0 / 5%));border-radius:1rem}:is(.dark,.dark-theme) .mt-frame{background-color:var(--mt-frame-bg, rgb(31 41 55 / 25%))}:is(.dark,.dark-theme) .mt-frame-hint-icon{fill:var(--mt-frame-hint-icon-fill, rgb(209 213 219))}:is(.dark,.dark-theme) .mt-frame-hint-text{color:var(--mt-frame-hint-text-color, rgb(229 231 235))}:is(.dark,.dark-theme) .mt-frame-background{background-image:var( --mt-frame-background-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e") );mask-image:var( --mt-frame-background-mask, linear-gradient(0deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 50%)) );-webkit-mask-image:var( --mt-frame-background-mask, linear-gradient(0deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 50%)) )}:is(.dark,.dark-theme) .mt-frame-content{background-color:var(--mt-frame-content-bg, rgb(17 24 39))}:is(.dark,.dark-theme) .mt-frame-caption{color:var(--mt-frame-caption-color, rgb(156 163 175))}:is(.dark,.dark-theme) .mt-frame-border{border-color:var(--mt-frame-border-color, rgb(255 255 255 / 5%))}}

package/dist/constants/env.js

@@ -1,4 +0,0 @@
-const e = process.env.NODE_ENV === "development";
-export {
-  e as IS_DEV
-};