@mui/internal-docs-infra 0.1.0 → 0.1.1-alpha.1

package/transformTsToJs/transformTsToJs.d.ts

@@ -0,0 +1,3 @@
+import type { SourceTransformer, TransformSource } from "../CodeHighlighter/index.js";
+export declare const transformTsToJs: TransformSource;
+export declare const TsToJsTransformer: SourceTransformer;

package/transformTsToJs/transformTsToJs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformTsToJs.d.ts","sourceRoot":"","sources":["../../../src/transformTsToJs/transformTsToJs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE7E,eAAO,MAAM,eAAe,EAAE,eAO7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,iBAG/B,CAAC"}

package/transformTsToJs/transformTsToJs.js

@@ -0,0 +1,34 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { removeTypes } from "./removeTypes.js";
+export var transformTsToJs = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(source, fileName) {
+    var transformed, transformedFileName;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return removeTypes(source, fileName);
+        case 2:
+          transformed = _context.sent;
+          transformedFileName = fileName.replace(/\.ts$/, '.js').replace(/\.tsx$/, '.jsx');
+          return _context.abrupt("return", {
+            js: {
+              source: transformed,
+              fileName: transformedFileName
+            }
+          });
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function transformTsToJs(_x, _x2) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export var TsToJsTransformer = {
+  extensions: ['ts', 'tsx'],
+  transformer: transformTsToJs
+};

package/useCode/index.d.ts

@@ -0,0 +1 @@
+export * from "./useCode.js";

package/useCode/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/useCode/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/useCode/index.js

@@ -0,0 +1 @@
+export * from "./useCode.js";

package/{esm/useDemo/index.d.ts → useCode/useCode.d.ts}

@@ -1,44 +1,26 @@
 import * as React from 'react';
-import { Nodes } from 'hast';
 import { UseCopierOpts } from "../useCopier/index.js";
-type Source = Nodes;
-export type Variant = {
-  component: React.ReactNode;
-  fileName: string;
-  source: Source;
-  extraSource?: {
-    [key: string]: Source;
-  };
-};
-export type Demo = {
-  name?: string;
-  slug?: string;
-  description?: string;
-  variants: {
-    [key: string]: Variant;
-  };
-};
-type UseDemoOpts = {
+import { ContentProps } from "../CodeHighlighter/types.js";
+type UseCodeOpts = {
   defaultOpen?: boolean;
   copy?: UseCopierOpts;
   githubUrlPrefix?: string;
   codeSandboxUrlPrefix?: string;
   stackBlitzPrefix?: string;
+  initialVariant?: string;
+  initialTransform?: string;
 };
-export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
+export interface UseCodeResult {
   component: React.ReactNode;
-  name: string | undefined;
-  slug: string | undefined;
-  description: string | undefined;
   ref: React.RefObject<HTMLDivElement | null>;
   variants: string[];
   selectedVariant: string;
   selectVariant: React.Dispatch<React.SetStateAction<string>>;
-  files: {
+  files: Array<{
     name: string;
-    component: JSX.Element;
-  }[];
-  selectedFile: any;
+    component: React.ReactNode;
+  }>;
+  selectedFile: React.ReactNode;
   selectedFileName: string;
   selectFileName: React.Dispatch<React.SetStateAction<string>>;
   expanded: boolean;
@@ -47,5 +29,9 @@ export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
   resetFocus: () => void;
   copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
   copyDisabled: boolean;
-};
+  availableTransforms: string[];
+  selectedTransform: string | null | undefined;
+  selectTransform: (transformName: string | null) => void;
+}
+export declare function useCode(contentProps: ContentProps, opts?: UseCodeOpts): UseCodeResult;
 export {};

package/useCode/useCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCode.d.ts","sourceRoot":"","sources":["../../../src/useCode/useCode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAa,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKxD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;IAC3D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,gBAAgB,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3D,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,YAAY,EAAE,OAAO,CAAC;IACtB,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAC9B,iBAAiB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC7C,eAAe,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzD;AAMD,wBAAgB,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,aAAa,CA0XrF"}

package/useCode/useCode.js

@@ -0,0 +1,393 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import { toText } from 'hast-util-to-text';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { useCopier } from "../useCopier/index.js";
+import { useCodeHighlighterContextOptional } from "../CodeHighlighter/CodeHighlighterContext.js";
+import { applyTransform } from "../CodeHighlighter/applyTransform.js";
+function toComponent(source) {
+  return toJsxRuntime(source, {
+    Fragment: Fragment,
+    jsx: jsx,
+    jsxs: jsxs
+  });
+}
+export function useCode(contentProps, opts) {
+  var _ref = opts || {},
+    copyOpts = _ref.copy,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+    initialVariant = _ref.initialVariant,
+    initialTransform = _ref.initialTransform;
+
+  // Safely try to get context values - will be undefined if not in context
+  var context = useCodeHighlighterContextOptional();
+  var _React$useState = React.useState(defaultOpen),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    expanded = _React$useState2[0],
+    setExpanded = _React$useState2[1];
+  var expand = React.useCallback(function () {
+    return setExpanded(true);
+  }, []);
+  var ref = React.useRef(null);
+  var resetFocus = React.useCallback(function () {
+    var _ref$current;
+    (_ref$current = ref.current) == null || _ref$current.focus();
+  }, []);
+
+  // Get the effective code - context overrides contentProps if available
+  var effectiveCode = React.useMemo(function () {
+    return (context == null ? void 0 : context.code) || contentProps.code || {};
+  }, [context == null ? void 0 : context.code, contentProps.code]);
+
+  // Get variant keys from effective code
+  var variantKeys = React.useMemo(function () {
+    return Object.keys(effectiveCode).filter(function (key) {
+      var variant = effectiveCode[key];
+      return variant && _typeof(variant) === 'object' && 'source' in variant;
+    });
+  }, [effectiveCode]);
+  var _React$useState3 = React.useState(initialVariant || variantKeys[0] || ''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    selectedVariantKey = _React$useState4[0],
+    setSelectedVariantKey = _React$useState4[1];
+  var selectedVariant = React.useMemo(function () {
+    var variant = effectiveCode[selectedVariantKey];
+    if (variant && _typeof(variant) === 'object' && 'source' in variant) {
+      return variant;
+    }
+    return null;
+  }, [effectiveCode, selectedVariantKey]);
+
+  // Safety check: if selectedVariant doesn't exist, fall back to first variant
+  React.useEffect(function () {
+    if (!selectedVariant && variantKeys.length > 0) {
+      setSelectedVariantKey(variantKeys[0]);
+    }
+  }, [selectedVariant, variantKeys]);
+
+  // Transform state - get available transforms from context or from the effective code data
+  var availableTransforms = React.useMemo(function () {
+    // First try to get from context
+    if (context != null && context.availableTransforms && context.availableTransforms.length > 0) {
+      return context.availableTransforms;
+    }
+
+    // Otherwise, get from the effective code data
+    var transforms = new Set();
+    if (effectiveCode && selectedVariantKey) {
+      var variantCode = effectiveCode[selectedVariantKey];
+      if (variantCode && _typeof(variantCode) === 'object' && 'transforms' in variantCode && variantCode.transforms) {
+        Object.keys(variantCode.transforms).forEach(function (transformKey) {
+          transforms.add(transformKey);
+        });
+      }
+    }
+    return Array.from(transforms);
+  }, [context == null ? void 0 : context.availableTransforms, effectiveCode, selectedVariantKey]);
+  var _React$useState5 = React.useState(initialTransform || null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    selectedTransform = _React$useState6[0],
+    setSelectedTransform = _React$useState6[1];
+
+  // Memoize all transformed files based on selectedTransform
+  var transformedFiles = React.useMemo(function () {
+    // Only create transformed files when there's actually a transform selected
+    if (!selectedVariant || !selectedTransform) {
+      return undefined;
+    }
+    var files = [];
+    var filenameMap = {};
+
+    // Helper function to apply transform to a source
+    var applyTransformToSource = function applyTransformToSource(source, fileName, transforms) {
+      if (!(transforms != null && transforms[selectedTransform])) {
+        return {
+          transformedSource: source,
+          transformedName: fileName
+        };
+      }
+      try {
+        // Get transform data
+        var transformData = transforms[selectedTransform];
+        if (!transformData || _typeof(transformData) !== 'object' || !('delta' in transformData)) {
+          return {
+            transformedSource: source,
+            transformedName: fileName
+          };
+        }
+
+        // Apply transform
+        var result = applyTransform(source, transforms, selectedTransform);
+        var transformedName = transformData.fileName || fileName;
+        return {
+          transformedSource: result,
+          transformedName: transformedName
+        };
+      } catch (error) {
+        console.error("Transform failed for ".concat(fileName, ":"), error);
+        return {
+          transformedSource: source,
+          transformedName: fileName
+        };
+      }
+    };
+
+    // Process main file - get transforms from selectedVariant
+    var variantTransforms = 'transforms' in selectedVariant ? selectedVariant.transforms : undefined;
+    var _applyTransformToSour = applyTransformToSource(selectedVariant.source, selectedVariant.fileName, variantTransforms),
+      mainSource = _applyTransformToSour.transformedSource,
+      mainName = _applyTransformToSour.transformedName;
+    filenameMap[selectedVariant.fileName] = mainName;
+    files.push({
+      name: mainName,
+      originalName: selectedVariant.fileName,
+      source: mainSource,
+      component: toComponent(mainSource)
+    });
+
+    // Process extra files
+    if (selectedVariant.extraFiles) {
+      Object.entries(selectedVariant.extraFiles).forEach(function (_ref2) {
+        var _transforms;
+        var _ref3 = _slicedToArray(_ref2, 2),
+          fileName = _ref3[0],
+          fileData = _ref3[1];
+        var source;
+        var transforms;
+
+        // Handle different extraFile structures
+        if (typeof fileData === 'string') {
+          source = fileData;
+          transforms = variantTransforms;
+        } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
+          source = fileData.source;
+          transforms = fileData.transforms || variantTransforms;
+        } else {
+          return; // Skip invalid entries
+        }
+
+        // Apply transforms if available
+        var transformedSource = source;
+        var transformedName = fileName;
+        if ((_transforms = transforms) != null && _transforms[selectedTransform]) {
+          try {
+            var transformData = transforms[selectedTransform];
+            if (transformData && _typeof(transformData) === 'object' && 'delta' in transformData) {
+              transformedSource = applyTransform(source, transforms, selectedTransform);
+              transformedName = transformData.fileName || fileName;
+            }
+          } catch (error) {
+            console.error("Transform failed for ".concat(fileName, ":"), error);
+          }
+        }
+        filenameMap[fileName] = transformedName;
+        files.push({
+          name: transformedName,
+          originalName: fileName,
+          source: transformedSource,
+          component: toComponent(transformedSource)
+        });
+      });
+    }
+    return {
+      files: files,
+      filenameMap: filenameMap
+    };
+  }, [selectedVariant, selectedTransform]);
+
+  // Keep selectedFileName as untransformed filename for internal tracking
+  var _React$useState7 = React.useState((selectedVariant == null ? void 0 : selectedVariant.fileName) || ''),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    selectedFileNameInternal = _React$useState8[0],
+    setSelectedFileNameInternal = _React$useState8[1];
+
+  // Reset selectedFileName when variant changes
+  React.useEffect(function () {
+    if (selectedVariant && selectedFileNameInternal !== selectedVariant.fileName) {
+      // Only reset if current selectedFileName doesn't exist in the new variant
+      var hasFile = selectedVariant.fileName === selectedFileNameInternal || selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal];
+      if (!hasFile) {
+        setSelectedFileNameInternal(selectedVariant.fileName);
+      }
+    }
+  }, [selectedVariant, selectedFileNameInternal]);
+
+  // Compute the displayed filename (transformed if applicable)
+  var selectedFileName = React.useMemo(function () {
+    if (!selectedVariant) {
+      return '';
+    }
+
+    // If we have transformed files, return the transformed name
+    if (transformedFiles) {
+      var file = transformedFiles.files.find(function (f) {
+        return f.originalName === selectedFileNameInternal;
+      });
+      return file ? file.name : selectedFileNameInternal;
+    }
+
+    // Otherwise, return the original filename
+    return selectedFileNameInternal;
+  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
+  var selectedFile = React.useMemo(function () {
+    if (!selectedVariant) {
+      return null;
+    }
+
+    // If we have transformed files, use them
+    if (transformedFiles) {
+      var file = transformedFiles.files.find(function (f) {
+        return f.originalName === selectedFileNameInternal;
+      });
+      return file ? file.source : null;
+    }
+
+    // Otherwise, use the original untransformed files
+    if (selectedFileNameInternal === selectedVariant.fileName) {
+      return selectedVariant.source;
+    }
+
+    // Look in extraFiles
+    if (selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
+      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
+      if (typeof extraFile === 'string') {
+        return extraFile;
+      }
+      if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
+        return extraFile.source;
+      }
+    }
+    return null;
+  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
+  var selectedFileComponent = React.useMemo(function () {
+    if (!selectedVariant) {
+      return null;
+    }
+
+    // If we have transformed files, use them
+    if (transformedFiles) {
+      var file = transformedFiles.files.find(function (f) {
+        return f.originalName === selectedFileNameInternal;
+      });
+      return file ? file.component : null;
+    }
+
+    // Otherwise, create component from original untransformed files
+    if (selectedFileNameInternal === selectedVariant.fileName) {
+      return toComponent(selectedVariant.source);
+    }
+
+    // Look in extraFiles
+    if (selectedVariant.extraFiles && selectedVariant.extraFiles[selectedFileNameInternal]) {
+      var extraFile = selectedVariant.extraFiles[selectedFileNameInternal];
+      var source;
+      if (typeof extraFile === 'string') {
+        source = extraFile;
+      } else if (extraFile && _typeof(extraFile) === 'object' && 'source' in extraFile) {
+        source = extraFile.source;
+      } else {
+        return null;
+      }
+      return toComponent(source);
+    }
+    return null;
+  }, [selectedVariant, selectedFileNameInternal, transformedFiles]);
+
+  // Convert files for the return interface
+  var files = React.useMemo(function () {
+    if (!selectedVariant) {
+      return [];
+    }
+
+    // If we have transformed files, use them
+    if (transformedFiles) {
+      return transformedFiles.files.map(function (f) {
+        return {
+          name: f.name,
+          component: f.component
+        };
+      });
+    }
+
+    // Otherwise, create files from original untransformed data
+    var result = [{
+      name: selectedVariant.fileName,
+      component: toComponent(selectedVariant.source)
+    }];
+    if (selectedVariant.extraFiles) {
+      Object.entries(selectedVariant.extraFiles).forEach(function (_ref4) {
+        var _ref5 = _slicedToArray(_ref4, 2),
+          fileName = _ref5[0],
+          fileData = _ref5[1];
+        var source;
+        if (typeof fileData === 'string') {
+          source = fileData;
+        } else if (fileData && _typeof(fileData) === 'object' && 'source' in fileData) {
+          source = fileData.source;
+        } else {
+          return; // Skip invalid entries
+        }
+        result.push({
+          name: fileName,
+          component: toComponent(source)
+        });
+      });
+    }
+    return result;
+  }, [selectedVariant, transformedFiles]);
+  var sourceFileToText = React.useCallback(function () {
+    if (!selectedFile) {
+      return undefined;
+    }
+    if (typeof selectedFile === 'string') {
+      return selectedFile;
+    }
+    if (selectedFile && _typeof(selectedFile) === 'object' && 'hastJson' in selectedFile) {
+      return selectedFile.hastJson;
+    }
+    return toText(selectedFile, {
+      whitespace: 'pre'
+    });
+  }, [selectedFile]);
+  var _useCopier = useCopier(sourceFileToText, copyOpts),
+    copy = _useCopier.copy,
+    copyDisabled = _useCopier.disabled;
+
+  // Function to switch to a specific transform
+  var selectTransform = React.useCallback(function (transformName) {
+    if (!transformName || availableTransforms.includes(transformName)) {
+      setSelectedTransform(transformName);
+    } else {
+      setSelectedTransform(null);
+    }
+  }, [availableTransforms]);
+
+  // Get the effective components object - context overrides contentProps
+  // Components are kept separate from variant data to maintain clean separation of concerns
+  var effectiveComponents = React.useMemo(function () {
+    return (context == null ? void 0 : context.components) || contentProps.components || {};
+  }, [context == null ? void 0 : context.components, contentProps.components]);
+  return {
+    component: effectiveComponents[selectedVariantKey] || null,
+    ref: ref,
+    variants: variantKeys,
+    selectedVariant: selectedVariantKey,
+    selectVariant: setSelectedVariantKey,
+    files: files,
+    selectedFile: selectedFileComponent,
+    selectedFileName: selectedFileName,
+    selectFileName: setSelectedFileNameInternal,
+    expanded: expanded,
+    expand: expand,
+    setExpanded: setExpanded,
+    resetFocus: resetFocus,
+    copy: copy,
+    copyDisabled: copyDisabled,
+    availableTransforms: availableTransforms,
+    selectedTransform: selectedTransform,
+    selectTransform: selectTransform
+  };
+}

package/useCopier/index.js

@@ -1,17 +1,9 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCopier = useCopier;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var React = _interopRequireWildcard(require("react"));
-var _clipboardCopy = _interopRequireDefault(require("clipboard-copy"));
-function useCopier(contents, opts) {
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import copyToClipboard from 'clipboard-copy';
+export function useCopier(contents, opts) {
   var _ref = opts || {},
     onCopied = _ref.onCopied,
     onError = _ref.onError,
@@ -20,13 +12,13 @@ function useCopier(contents, opts) {
     timeout = _ref$timeout === void 0 ? 2000 : _ref$timeout;
   var copyTimeoutRef = React.useRef(undefined);
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
     disabled = _React$useState2[0],
     setDisabled = _React$useState2[1];
   var copy = React.useCallback(/*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var content;
-      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             clearTimeout(copyTimeoutRef.current);
@@ -38,7 +30,7 @@ function useCopier(contents, opts) {
               break;
             }
             _context.next = 7;
-            return (0, _clipboardCopy["default"])(content);
+            return copyToClipboard(content);
           case 7:
             onCopied == null || onCopied();
             _context.next = 13;

package/useDemo/index.d.ts

@@ -1,44 +1,29 @@
 import * as React from 'react';
-import { Nodes } from 'hast';
 import { UseCopierOpts } from "../useCopier/index.js";
-type Source = Nodes;
-export type Variant = {
-  component: React.ReactNode;
-  fileName: string;
-  source: Source;
-  extraSource?: {
-    [key: string]: Source;
-  };
-};
-export type Demo = {
-  name?: string;
-  slug?: string;
-  description?: string;
-  variants: {
-    [key: string]: Variant;
-  };
-};
+import { ContentProps } from "../CodeHighlighter/types.js";
 type UseDemoOpts = {
   defaultOpen?: boolean;
   copy?: UseCopierOpts;
   githubUrlPrefix?: string;
   codeSandboxUrlPrefix?: string;
   stackBlitzPrefix?: string;
+  initialVariant?: string;
+  initialTransform?: string;
 };
-export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
-  component: React.ReactNode;
+export declare function useDemo(contentProps: ContentProps, opts?: UseDemoOpts): {
   name: string | undefined;
   slug: string | undefined;
   description: string | undefined;
+  component: React.ReactNode;
   ref: React.RefObject<HTMLDivElement | null>;
   variants: string[];
   selectedVariant: string;
   selectVariant: React.Dispatch<React.SetStateAction<string>>;
-  files: {
+  files: Array<{
     name: string;
-    component: JSX.Element;
-  }[];
-  selectedFile: any;
+    component: React.ReactNode;
+  }>;
+  selectedFile: React.ReactNode;
   selectedFileName: string;
   selectFileName: React.Dispatch<React.SetStateAction<string>>;
   expanded: boolean;
@@ -47,5 +32,8 @@ export declare function useDemo(demo: Demo, opts?: UseDemoOpts): {
   resetFocus: () => void;
   copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
   copyDisabled: boolean;
+  availableTransforms: string[];
+  selectedTransform: string | null | undefined;
+  selectTransform: (transformName: string | null) => void;
 };
 export {};

package/useDemo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/useDemo/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAGF,wBAAgB,OAAO,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,EAAE,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;EAgBrE"}