@bundle-stats/ui 4.16.0-beta.1 → 4.16.0-beta.11

package/lib-esm/components/preview-source/preview-source.js.map

@@ -1 +1 @@
-{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAY9C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS;QACpD,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY;QACf,oBAAC,QAAQ,IAAC,aAAa,QAAC,QAAQ,QAAC,IAAI,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,IAC9D,MAAM,CACE,CACP,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"preview-source.js","sourceRoot":"","sources":["../../../src/components/preview-source/preview-source.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAE9C,MAAM,YAAY,GAAG,EAAE,CAAC;AAgBxB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,YAAY,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC;IACxB,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,CAAC;IAEtE,OAAO,CACL,6BAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QACzC,MAAM,IAAI,CACT,oBAAC,YAAY,IAAC,SAAS,EAAE,GAAG,CAAC,OAAO;YAClC,oBAAC,eAAe,IAAC,OAAO,QAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,MAAM,GAAI;YACrD,QAAQ,IAAI,CACX,oBAAC,OAAO,IAAC,KAAK,EAAE,YAAY,QAAQ,EAAE,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe;gBACpE,oBAAC,MAAM,IACL,OAAO,QACP,UAAU,EAAE,aAAa,CAAC,QAAQ,EAClC,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,yBAAyB,kBAAkB,CAAC,MAAM,CAAC,EAAE,EAC3D,QAAQ,EAAE,QAAQ,GAClB,CACM,CACX,CACY,CAChB;QACD,oBAAC,QAAQ,IAAC,QAAQ,QAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,CAAC,OAAO,GAAI,CACpE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/components/preview-source/preview-source.module.css

@@ -7,6 +7,8 @@
   z-index: 2;
   top: var(--space-xsmall);
   right: var(--space-xsmall);
+  background: var(--color-background);
+  border-radius: var(--radius-medium);
 }
 
 /** fix control group with nested components */
@@ -21,8 +23,18 @@
   box-shadow: none;
 }
 
+/** Source content */
 .content {
   position: relative;
   z-index: 1;
   height: 100%;
+  background: var(--color-highlight);
+  color: var(--color-text);
+  font-family: var(--font-family-fixed);
+}
+
+/** Empty / loading state */
+.isEmpty .content {
+  pointer-events: none;
+  background: var(--color-highlight);
 }

package/lib-esm/css/variables.css

@@ -201,6 +201,10 @@
 
   --outline-hover: 0 0 0 var(--space-xxxsmall) var(--color-highlight);
 
+  --skeleton-inline-background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
+  --skeleton-block-background: currentColor;
+  --skeleton-opacity: 0.06;
+
   /** Layout */
   --max-width: 88rem;
   --entry-info-width: 64rem;

package/lib-esm/i18n.js

@@ -15,6 +15,8 @@ export default {
     RESET_FILTERS: 'Reset filters',
     VIEW_ALL: 'View all entries',
     EXPORT: 'Export',
+    EXPORT_CSV: 'Export CSV',
+    EXPORT_JSON: 'Export JSON',
     COPY_TO_CLIPBOARD: 'Copy to clipboard',
     COPY_TO_CLIPBOARD_DONE: 'Copied to clipboard',
     GITHUB_LINK_TITLE: 'View BundleStats project on GitHub',

package/lib-esm/i18n.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.js"],"names":[],"mappings":"AAAA,eAAe;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,oBAAoB;IAClC,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IAEpB,OAAO,EAAE,oBAAoB;IAE7B,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IAEpB,SAAS,EAAE,WAAW;IAEtB,WAAW,EAAE,2DAA2D;IACxE,iBAAiB,EAAE,mEAAmE;IACtF,YAAY,EACV,uFAAuF;IACzF,aAAa,EACX,qGAAqG;IAEvG,aAAa,EAAE,eAAe;IAC9B,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,QAAQ;IAEhB,iBAAiB,EAAE,mBAAmB;IACtC,sBAAsB,EAAE,qBAAqB;IAE7C,iBAAiB,EAAE,oCAAoC;IACvD,YAAY,EAAE,cAAc;IAC5B,uBAAuB,EAAE,sBAAsB;IAC/C,cAAc,EAAE,kEAAkE;CACnF,CAAC"}
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../src/i18n.js"],"names":[],"mappings":"AAAA,eAAe;IACb,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,oBAAoB;IAClC,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IAEpB,OAAO,EAAE,oBAAoB;IAE7B,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IAEpB,SAAS,EAAE,WAAW;IAEtB,WAAW,EAAE,2DAA2D;IACxE,iBAAiB,EAAE,mEAAmE;IACtF,YAAY,EACV,uFAAuF;IACzF,aAAa,EACX,qGAAqG;IAEvG,aAAa,EAAE,eAAe;IAC9B,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,YAAY;IACxB,WAAW,EAAE,aAAa;IAE1B,iBAAiB,EAAE,mBAAmB;IACtC,sBAAsB,EAAE,qBAAqB;IAE7C,iBAAiB,EAAE,oCAAoC;IACvD,YAAY,EAAE,cAAc;IAC5B,uBAAuB,EAAE,sBAAsB;IAC/C,cAAc,EAAE,kEAAkE;CACnF,CAAC"}

package/lib-esm/ui/dialog/dialog.module.css

@@ -61,11 +61,11 @@
 
 /** Width variation */
 .width--narrow {
-  max-width: 480px;
+  max-width: 360px;
 }
 
 .width--medium {
-  max-width: 748px;
+  max-width: 640px;
 }
 
 .width--wide {
@@ -73,7 +73,7 @@
 }
 
 .width--extra-wide {
-  max-width: var(--max-width);
+  max-width: calc(var(--max-width) + 2 * var(--space-medium));
 }
 
 /** Center variation */

package/lib-esm/ui/index.js

@@ -13,6 +13,7 @@ export { Icon } from './icon';
 export { Input } from './input';
 export { InputSearch } from './input-search';
 export { Loader } from './loader';
+export { Markdown } from './markdown';
 export { Skeleton } from './skeleton';
 export { Table } from './table';
 export { Tabs } from './tabs';

package/lib-esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/lib-esm/ui/markdown/index.js

@@ -0,0 +1,2 @@
+export * from './markdown';
+//# sourceMappingURL=index.js.map

package/lib-esm/ui/markdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/markdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/lib-esm/ui/markdown/markdown.js

@@ -0,0 +1,10 @@
+import React, { useMemo } from 'react';
+import cx from 'classnames';
+import snarkdown from 'snarkdown';
+import css from './markdown.module.css';
+export const Markdown = (props) => {
+    const { className = '', content = '', as: Component = 'div', ...restProps } = props;
+    const html = useMemo(() => snarkdown(content), [content]);
+    return (React.createElement(Component, { className: cx(css.root, className), ...restProps, dangerouslySetInnerHTML: { __html: html } }));
+};
+//# sourceMappingURL=markdown.js.map

package/lib-esm/ui/markdown/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/ui/markdown/markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA+B,OAAO,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,SAAS,MAAM,WAAW,CAAC;AAElC,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAOxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAE,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEpF,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAE1D,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAC9B,SAAS,EACb,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GACzC,CACH,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/markdown/markdown.module.css

@@ -0,0 +1,7 @@
+.root code {
+  padding: 2px var(--space-xxxsmall);
+  background: var(--color-highlight);
+  outline: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}

package/lib-esm/ui/skeleton/skeleton.module.css

@@ -1,6 +1,6 @@
 .root {
-  background: linear-gradient(transparent 10%, currentColor 10.1%, currentColor 89.9%, transparent 90%);
-  opacity: 0.05;
+  background: var(--skeleton-inline-background);
+  opacity: var(--skeleton-opacity);
   pointer-events: none;
   min-width: 6em;
   border-radius: var(--radius-medium);
@@ -14,5 +14,5 @@
 }
 
 .block {
-  background: currentColor;
+  background: var(--skeleton-block-background);
 }

package/lib-esm/ui/tabs/index.js

@@ -1,2 +1,2 @@
-export { Tabs } from './tabs';
+export * from './tabs';
 //# sourceMappingURL=index.js.map

package/lib-esm/ui/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tabs/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/lib-esm/ui/tabs/tabs.js

@@ -1,25 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import css from './tabs.module.css';
-const Item = ({ isTabActive, as: Component = 'span', className = '', ...restProps }) => (React.createElement(Component, { className: cx(css.item, className, isTabActive && css.itemActive), ...restProps }));
-Item.defaultProps = {
-    isTabActive: false,
-    className: '',
-    as: 'span',
+export const TabItem = (props) => {
+    const { className = '', as: Component = 'button', isTabActive = false, ...restProps } = props;
+    return (React.createElement(Component, { role: "tab", className: cx(css.item, className, isTabActive && css.itemActive), ...restProps }));
 };
-Item.propTypes = {
-    isTabActive: PropTypes.bool,
-    className: PropTypes.string,
-    as: PropTypes.elementType,
+export const Tabs = (props) => {
+    const { className = '', ...restProps } = props;
+    return React.createElement("div", { role: "tablist", className: cx(css.root, className), ...restProps });
 };
-export const Tabs = ({ className = '', ...restProps }) => (React.createElement("nav", { className: cx(css.root, className), ...restProps }));
-Tabs.defaultProps = {
-    className: '',
-};
-Tabs.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node.isRequired,
-};
-Tabs.Item = Item;
+Tabs.Item = TabItem;
 //# sourceMappingURL=tabs.js.map

package/lib-esm/ui/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/tabs.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,IAAI,GAAG,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,GAAG,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACtF,oBAAC,SAAS,IAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,IAAI,GAAG,CAAC,UAAU,CAAC,KAAM,SAAS,GAAI,CAChG,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,WAAW,EAAE,KAAK;IAClB,SAAS,EAAE,EAAE;IACb,EAAE,EAAE,MAAM;CACX,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IACf,WAAW,EAAE,SAAS,CAAC,IAAI;IAC3B,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,EAAE,EAAE,SAAS,CAAC,WAAW;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,EAAE,EAAE,CAAC,CACxD,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAC3D,CAAC;AAEF,IAAI,CAAC,YAAY,GAAG;IAClB,SAAS,EAAE,EAAE;CACd,CAAC;AAEF,IAAI,CAAC,SAAS,GAAG;IAEf,SAAS,EAAE,SAAS,CAAC,MAAM;IAG3B,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC"}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/ui/tabs/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAOpC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAmC,KAAsB,EAAE,EAAE;IAClF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,WAAW,GAAG,KAAK,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9F,OAAO,CACL,oBAAC,SAAS,IACR,IAAI,EAAC,KAAK,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,WAAW,IAAI,GAAG,CAAC,UAAU,CAAC,KAC7D,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IACvC,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,6BAAK,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,KAAM,SAAS,GAAI,CAAC;AACnF,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC"}

package/lib-esm/ui/tabs/tabs.module.css

@@ -4,12 +4,16 @@
 }
 
 .item {
+  appearance: none;
+  background: none;
+  border: 0;
   position: relative;
   display: inline-block;
   padding: var(--space-xsmall) var(--space-small);
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
+  transition: var(--ui-transition-out);
 }
 
 .item::after {
@@ -26,8 +30,9 @@
 .item:hover,
 .item:active,
 .item:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-primary);
   outline: none;
+  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
@@ -43,7 +48,3 @@
 .itemActive::after {
   background: currentColor;
 }
-
-.item + .item {
-  _margin-left: var(--space-medium);
-}

package/lib-esm/ui/textarea/textarea.js

@@ -2,8 +2,8 @@ import React from 'react';
 import cx from 'classnames';
 import css from './textarea.module.css';
 export const Textarea = (props) => {
-    const { className = '', previewSource = false, size = '', ...restProps } = props;
-    const rootClassName = cx(css.root, previewSource && css.previewSource, size && css[size], className);
+    const { className = '', size = '', ...restProps } = props;
+    const rootClassName = cx(css.root, size && css[size], className);
     return React.createElement("textarea", { className: rootClassName, ...restProps });
 };
 //# sourceMappingURL=textarea.js.map

package/lib-esm/ui/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/ui/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAOxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,aAAa,GAAG,KAAK,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,aAAa,GAAG,EAAE,CACtB,GAAG,CAAC,IAAI,EACR,aAAa,IAAI,GAAG,CAAC,aAAa,EAClC,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EACjB,SAAS,CACV,CAAC;IAEF,OAAO,kCAAU,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAC/D,CAAC,CAAC"}
+{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/ui/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAMxC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,aAAa,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,kCAAU,SAAS,EAAE,aAAa,KAAM,SAAS,GAAI,CAAC;AAC/D,CAAC,CAAC"}

package/lib-esm/ui/textarea/textarea.module.css

@@ -36,13 +36,6 @@
   color: var(--color-text-light);
 }
 
-/**
- * Source variation
- */
-.previewSource {
-  font-family: var(--font-family-fixed);
-}
-
 /** Size modifier */
 /* default - medium */
 .root {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.16.0-beta.1",
+  "version": "4.16.0-beta.11",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -39,10 +39,10 @@
     "@babel/preset-env": "7.25.7",
     "@babel/preset-react": "7.25.7",
     "@babel/preset-typescript": "7.25.7",
-    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-essentials": "8.3.5",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-    "@storybook/react": "8.3.4",
-    "@storybook/react-webpack5": "8.3.4",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-webpack5": "8.3.5",
     "@types/d3": "7.4.3",
     "@types/react": "18.3.11",
     "@types/react-router-dom": "5.3.3",
@@ -61,8 +61,8 @@
     "react-dom": "18.3.1",
     "react-router-dom": "5.3.4",
     "rimraf": "6.0.1",
-    "storybook": "8.3.4",
-    "typescript": "5.6.2",
+    "storybook": "8.3.5",
+    "typescript": "5.6.3",
     "typescript-plugin-css-modules": "5.1.0"
   },
   "peerDependencies": {
@@ -74,12 +74,13 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.16.0-beta.1",
+    "@bundle-stats/utils": "^4.16.0-beta.11",
     "ariakit": "2.0.0-next.44",
-    "d3": "^7.8.5",
+    "d3": "7.9.0",
     "modern-css-reset": "1.4.0",
-    "react-use": "^17.5.0",
+    "react-use": "17.5.1",
+    "snarkdown": "2.0.0",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "db71907f2916c3bc5f4367041f4368a8f0a47c17"
+  "gitHead": "aa941593c1a41262e8b90fb53d74b9ade61e9b7d"
 }

package/src/components/bundle-assets/bundle-assets.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import get from 'lodash/get';
@@ -52,10 +52,10 @@ const DISPLAY_TYPE_GROUPS = {
 
 const getFileTypeFilters = (filters) =>
   Object.entries(FILE_TYPE_LABELS).map(([key, label]) => ({
-    key,
-    label,
-    defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
-  }));
+  key,
+  label,
+  defaultValue: get(filters, `${ASSET_FILE_TYPE}.${key}`, true),
+}));
 
 const getFilters = ({ compareMode, filters }) => ({
   [ASSET_FILTERS.CHANGED]: {
@@ -64,7 +64,7 @@ const getFilters = ({ compareMode, filters }) => ({
     disabled: !compareMode,
   },
   [ASSET_ENTRY_TYPE]: {
-    label: 'Entry type',
+    label: 'Type',
     children: [
       {
         key: ASSET_FILTERS.ENTRY,
@@ -316,8 +316,10 @@ export const BundleAssets = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -396,7 +398,13 @@ export const BundleAssets = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--assets"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--assets"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/bundle-assets-totals/bundle-assets-totals.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import {
@@ -73,8 +73,10 @@ export const BundleAssetsTotals = ({
   );
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -120,7 +122,13 @@ export const BundleAssetsTotals = ({
       </Stack>
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--totals" />}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--totals"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/bundle-modules/bundle-modules.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { SECTIONS, COMPONENT, type Job, ReportMetricRow } from '@bundle-stats/utils';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -255,8 +255,10 @@ export const BundleModules = (props: BundleModulesProps) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState<string | undefined>(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType: string) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -374,7 +376,13 @@ export const BundleModules = (props: BundleModulesProps) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--modules"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--modules"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/bundle-packages/bundle-packages.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import escapeRegExp from 'lodash/escapeRegExp';
@@ -264,8 +264,10 @@ export const BundlePackages = (props) => {
   }, [allItems, entryId]);
 
   const exportDialog = useDialogState();
+  const [exportSourceType, setExportSourceType] = useState(undefined);
 
-  const handleExportClick = useCallback(() => {
+  const handleExportClick = useCallback((sourceType) => {
+    setExportSourceType(sourceType);
     exportDialog.toggle();
   }, []);
 
@@ -338,7 +340,13 @@ export const BundlePackages = (props) => {
       )}
 
       <Dialog title={I18N.EXPORT} width="wide" state={exportDialog}>
-        {exportDialog.open && <MetricsTableExport items={items} download="bundle-stats--packages"/>}
+        {exportDialog.open && (
+          <MetricsTableExport
+            items={items}
+            initialSourceType={exportSourceType}
+            download="bundle-stats--packages"
+          />
+        )}
       </Dialog>
     </>
   );

package/src/components/insights/insights.module.css

@@ -4,6 +4,7 @@
 
 .entry {
   color: inherit;
+  line-height: var(--line-height-heading);
   text-decoration: none;
 }
 

package/src/components/metrics-table-export/metrics-table-export.tsx

@@ -3,9 +3,8 @@ import React, { useState } from 'react';
 import type { ReportMetricRow } from '@bundle-stats/utils';
 
 import { Stack } from '../../layout/stack';
-import { Tabs } from '../../ui/tabs';
+import { Tabs, TabItem } from '../../ui/tabs';
 import { PreviewSource } from '../preview-source';
-import css from './metrics-table-export.module.css';
 
 const generateSourceJSON = (items: Array<ReportMetricRow>): string => {
   const output = items.map((item) => ({
@@ -50,49 +49,58 @@ const generateSourceCSV = (items: Array<ReportMetricRow>): string => {
   return output.join('\r');
 };
 
-const SOURCES = [
-  {
+const SOURCES = {
+  csv: {
     label: 'CSV',
     transformFn: generateSourceCSV,
     extension: '.csv',
   },
-  {
+  json: {
     label: 'JSON',
     transformFn: generateSourceJSON,
     extension: '.json',
   },
-];
+};
+
+const SOURCE_ENTRIES = Object.entries(SOURCES);
+const SOURCE_KEYS = Object.keys(SOURCES);
 
 type MetricsTableExportProps = {
   items: Array<ReportMetricRow>;
+  initialSourceType?: string;
   download: string;
 } & ComponentProps<typeof Stack>;
 
 export const MetricsTableExport = (props: MetricsTableExportProps) => {
-  const { items, download, ...restProps } = props;
-  const [selectedId, setSelectedId] = useState(SOURCES[0].label);
+  const { initialSourceType = SOURCE_KEYS[0], items, download, ...restProps } = props;
+  const [selectedSourceType, setSelectedSourceType] = useState(initialSourceType);
 
   return (
     <Stack space="small" {...restProps}>
       <Tabs>
-        {SOURCES.map((source) => (
-          <Tabs.Item
-            onClick={() => setSelectedId(source.label)}
-            isTabActive={selectedId === source.label}
-            key={source.label}
+        {SOURCE_ENTRIES.map(([sourceId, source]) => (
+          <TabItem
+            onClick={() => setSelectedSourceType(sourceId)}
+            isTabActive={selectedSourceType === sourceId}
+            id={`metrics-table-export-tab-${sourceId}`}
+            aria-controls={`metrics-table-export-panel-${sourceId}`}
+            key={sourceId}
           >
             {source.label}
-          </Tabs.Item>
+          </TabItem>
         ))}
       </Tabs>
-      <div className={css.panels}>
-        {SOURCES.map(
-          (source) =>
-            selectedId === source.label && (
+      <div>
+        {SOURCE_ENTRIES.map(
+          ([sourceId, source]) =>
+            selectedSourceType === sourceId && (
               <PreviewSource
                 source={source.transformFn(items)}
-                download={`${download}.${source.extension}`}
-                className={css.panel}
+                rows={20}
+                download={`${download}${source.extension}`}
+                role="tabpanel"
+                id={`metrics-table-export-panel-${sourceId}`}
+                aria-labelledby={`metrics-table-export-tab-${sourceId}`}
                 key={source.label}
               />
           ),

package/src/components/metrics-table-options/metrics-table-options.module.css

@@ -0,0 +1,5 @@
+:not(.group:empty) ~ .group {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  border-top: 1px solid var(--color-outline);
+}

package/src/components/metrics-table-options/metrics-table-options.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 
 import I18N from '../../i18n';
 import { Dropdown, DropdownItem } from '../../ui/dropdown';
-import { Separator } from '../../layout/separator';
+import css from './metrics-table-options.module.css';
 
 type MetricsTableOptionsProps = {
   onViewAllClick?: () => void;
   onResetClick?: () => void;
-  onExportClick?: () => void;
+  onExportClick?: (sourceType: string) => void;
 } & ComponentProps<typeof Dropdown>;
 
 export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
@@ -16,10 +16,18 @@ export const MetricsTableOptions = (props: MetricsTableOptionsProps) => {
 
   return (
     <Dropdown glyph="more-vertical" {...restProps}>
-      {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
-      {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
-      {((onResetClick || onViewAllClick) && onExportClick) && <Separator />}
-      {onExportClick && <DropdownItem onClick={onExportClick}>{I18N.EXPORT}</DropdownItem>}
+      <div className={css.group}>
+        {onResetClick && <DropdownItem onClick={onResetClick}>{I18N.RESET_FILTERS}</DropdownItem>}
+        {onViewAllClick && <DropdownItem onClick={onViewAllClick}>{I18N.VIEW_ALL}</DropdownItem>}
+      </div>
+      <div className={css.group}>
+        {onExportClick && (
+          <>
+            <DropdownItem onClick={() => onExportClick('csv')}>{I18N.EXPORT_CSV}</DropdownItem>
+            <DropdownItem onClick={() => onExportClick('json')}>{I18N.EXPORT_JSON}</DropdownItem>
+          </>
+        )}
+      </div>
     </Dropdown>
   );
 };