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

package/lib/components/summary/summary.js

@@ -10,6 +10,7 @@ const get_1 = __importDefault(require("lodash/get"));
 const utils_1 = require("@bundle-stats/utils");
 const constants_1 = require("../../constants");
 const box_1 = require("../../layout/box");
+const flex_stack_1 = require("../../layout/flex-stack");
 const component_link_1 = require("../component-link");
 const metric_run_info_1 = require("../metric-run-info");
 const summary_module_css_1 = __importDefault(require("./summary.module.css"));
@@ -22,12 +23,12 @@ const SummaryItem = (props) => {
         react_1.default.createElement(metric_run_info_1.MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
 const Summary = ({ className = '', data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = component_link_1.ComponentLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
-    react_1.default.createElement("div", { className: summary_module_css_1.default.row },
+    react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "small", className: summary_module_css_1.default.row },
         react_1.default.createElement(box_1.Box, { outline: true, padding: "small", className: summary_module_css_1.default.rowGroup },
-            react_1.default.createElement("div", { className: summary_module_css_1.default.items }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "xlarge", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))),
-    react_1.default.createElement("div", { className: summary_module_css_1.default.row }, [constants_1.METRICS_GROUP_ASSETS, constants_1.METRICS_GROUP_MODULES, constants_1.METRICS_GROUP_PACKAGES].map((metricGroup) => (react_1.default.createElement(layout_1.Stack, { className: summary_module_css_1.default.rowGroup, key: metricGroup.title },
+            react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "medium" }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "xlarge", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))),
+    react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "small", className: summary_module_css_1.default.row }, [constants_1.METRICS_GROUP_ASSETS, constants_1.METRICS_GROUP_MODULES, constants_1.METRICS_GROUP_PACKAGES].map((metricGroup) => (react_1.default.createElement(layout_1.Stack, { className: summary_module_css_1.default.rowGroup, key: metricGroup.title },
         react_1.default.createElement("h3", { className: summary_module_css_1.default.rowGroupTitle }, metricGroup.title),
         react_1.default.createElement(box_1.Box, { outline: true, padding: "small" },
-            react_1.default.createElement("div", { className: summary_module_css_1.default.items }, metricGroup.metrics.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))))))));
+            react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "medium" }, metricGroup.metrics.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))))))));
 exports.Summary = Summary;
 //# sourceMappingURL=summary.js.map

package/lib/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"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"}

package/lib/components/summary/summary.module.css

@@ -5,10 +5,6 @@
 
 .row {
   width: 100%;
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-small);
 }
 
 .rowGroup {
@@ -26,13 +22,6 @@
   margin-top: var(--summary-gap);
 }
 
-.items {
-  display: flex;
-  align-items: stretch;
-  flex-wrap: wrap;
-  gap: var(--space-medium);
-}
-
 .item {
   flex: 1 1 10%; /* force equal sizes */
   min-width: 8em;
@@ -42,7 +31,7 @@
 }
 
 .item::before {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-highlight);
   display: block;
@@ -53,16 +42,20 @@
   bottom: calc(0px - var(--space-xsmall));
   left: calc(0px - var(--space-xsmall));
   opacity: 0;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
+.item:focus::before,
+.item:active::before,
 .item:hover::before {
   opacity: 1;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .item + .item::after {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-outline);
   display: block;
@@ -72,10 +65,17 @@
   top: var(--space-xxsmall);
   bottom: var(--space-xxsmall);
   opacity: 1;
-  transition: var(--transition-out);
+  transition-property: opacity;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
-.item:hover::after,  .item:hover + .item::after {
+.item:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
   opacity: 0;
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }

package/lib/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,16 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition-property: color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition-duration: var(--transition-duration-in);
 }

package/lib/css/variables.css

@@ -35,18 +35,18 @@
    * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
 
-   --color-gray-25: #f9f9f9;
-   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
-   --color-gray-50: #ececed;
-   --color-gray-100: #c9c9cc;
-   --color-gray-200: #a7a7aa;
-   --color-gray-300: #848489;
-   --color-gray-400: #626268;
-   --color-gray-500: #3f3f47;
-   --color-gray-600: #36363c;
-   --color-gray-700: #2c2c32;
-   --color-gray-800: #232327;
-   --color-gray-900: #19191c;
+  --color-gray-25: #f9f9f9;
+  /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+  --color-gray-50: #ececed;
+  --color-gray-100: #c9c9cc;
+  --color-gray-200: #a7a7aa;
+  --color-gray-300: #848489;
+  --color-gray-400: #626268;
+  --color-gray-500: #3f3f47;
+  --color-gray-600: #36363c;
+  --color-gray-700: #2c2c32;
+  --color-gray-800: #232327;
+  --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -98,7 +98,7 @@
   --color-green-200: #b1dfaf;
   --color-green-300: #92d28f;
   --color-green-400: #74c670;
-  --color-green-500: #55B950;
+  --color-green-500: #55b950;
   --color-green-600: #3ea839;
   --color-green-700: #2b9426;
   --color-green-800: #1b7b16;
@@ -111,30 +111,31 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
-  --color-yellow-50:  #faf3cf;
+  /* https://hihayk.github.io/scale/#4/5/20/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50: #faf3cf;
   --color-yellow-100: #f6e9a9;
   --color-yellow-200: #f2df83;
   --color-yellow-300: #edd55d;
   --color-yellow-400: #e9cb36;
   --color-yellow-500: #e5c110;
-  --color-yellow-600: #ceae0e;
-  --color-yellow-700: #b79a0d;
-  --color-yellow-800: #a0870b;
-  --color-yellow-900: #89740a;
+  --color-yellow-600: #dab70f;
+  --color-yellow-700: #ceae0e;
+  --color-yellow-800: #c3a40e;
+  --color-yellow-900: #b79a0d;
 
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
-  --color-yellow-ultra-dark: var(--color-yellow-700);
-  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark: var(--color-yellow-700);
+  --color-yellow-ultra-dark: var(--color-yellow-900);
 
   --color-dark: #111;
   --color-light: #fff;
 
-  --color-branding-light: #2b76d4;
+  /* https://hihayk.github.io/scale/#4/4/40/40/0/-0/0/0/1a477f/26/71/127/white */
+  --color-branding-light: #31598c;
   --color-branding: #1a477f;
-  --color-branding-dark: #09182a;
+  --color-branding-dark: #102b4c;
 }
 
 body {
@@ -146,6 +147,10 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -185,21 +190,30 @@ body {
   --color-outline-danger: var(--color-red-100);
 
   --color-backdrop: rgba(0, 0, 0, 0.05);
-  --color-shadow: rgba(0, 0, 0, 0.25);
+  --color-shadow: rgba(0, 0, 0, 0.1);
 
-  --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
-  --transition-in: all var(--transition-duration-in) ease-in;
-  --transition-out: all var(--transition-duration-out) ease-out;
+  /**
+   * Transitions: set `transition-property` explicitly on the base rule, use the `out` duration
+   * on the base rule and switch only `transition-duration` to `in` on the active/hover rule
+   */
+  --transition-duration-in: 120ms;
+  --transition-duration-out: 80ms;
+  --transition-timing-function: ease-out;
 
   --layer-xlow: 1;
   --layer-low: 10;
   --layer: 100;
   /** for components with overlays (tooltips, hovercards) */
   --layer-high: 1000;
+  /** for the sticky header, tabs and side panels */
   --layer-xhigh: 10000;
   /** for dialogs/modals */
   --layer-xxhigh: 100000;
+  /**
+   * z-index used by overlays (tooltips, hovercards, dropdowns)
+   * overridden by the dialog portal to place nested overlays above the dialog
+   */
+  --layer-overlay: var(--layer-high);
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);

package/lib/layout/box/box.module.css

@@ -18,14 +18,16 @@
 }
 
 .outlineHover {
-  transition: var(--transition-out);
+  transition-property: border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 .outlineHover:focus,
 .outlineHover:active,
 .outlineHover:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .padding-xxxsmall {

package/lib/layout/flex-stack/flex-stack.js

@@ -9,8 +9,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const tokens_1 = require("../../tokens");
 const flex_stack_module_css_1 = __importDefault(require("./flex-stack.module.css"));
 const FlexStack = (props) => {
-    const { as: Component = 'div', className = '', space = tokens_1.NO_SPACE, inline = false, alignItems = '', ...restProps } = props;
-    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`space--${space}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], inline && flex_stack_module_css_1.default.inline, className);
+    const { as: Component = 'div', className = '', gap, space, inline = false, direction = '', wrap = '', alignItems = '', justifyContent = '', ...restProps } = props;
+    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`gap--${gap ?? space ?? tokens_1.NO_SPACE}`], flex_stack_module_css_1.default[`direction--${direction}`], flex_stack_module_css_1.default[`wrap--${wrap}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], flex_stack_module_css_1.default[`justify-content--${justifyContent}`], inline && flex_stack_module_css_1.default.inline, className);
     return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
 };
 exports.FlexStack = FlexStack;

package/lib/layout/flex-stack/flex-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAWnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,iBAAQ,EAChB,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EACtB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AArBW,QAAA,SAAS,aAqBpB"}
+{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAwBnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,EACH,KAAK,EACL,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,QAAQ,GAAG,IAAI,KAAK,IAAI,iBAAQ,EAAE,CAAC,EACvC,+BAAG,CAAC,cAAc,SAAS,EAAE,CAAC,EAC9B,+BAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EACpB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,+BAAG,CAAC,oBAAoB,cAAc,EAAE,CAAC,EACzC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA5BW,QAAA,SAAS,aA4BpB"}

package/lib/layout/flex-stack/flex-stack.module.css

@@ -4,43 +4,73 @@
   gap: 0;
 }
 
-/** Space variation */
-.space--xxxsmall {
+/** Gap variation */
+.gap--xxxsmall {
   gap: var(--space-xxxsmall);
 }
 
-.space--xxsmall {
+.gap--xxsmall {
   gap: var(--space-xxsmall);
 }
 
-.space--xsmall {
+.gap--xsmall {
   gap: var(--space-xsmall);
 }
 
-.space--small {
+.gap--small {
   gap: var(--space-small);
 }
 
-.space--medium {
+.gap--medium {
   gap: var(--space-medium);
 }
 
-.space--large {
+.gap--large {
   gap: var(--space-large);
 }
 
-.space--xlarge {
+.gap--xlarge {
   gap: var(--space-xlarge);
 }
 
-.space--xxlarge {
+.gap--xxlarge {
   gap: var(--space-xxlarge);
 }
 
-.space--xxxlarge {
+.gap--xxxlarge {
   gap: var(--space-xxxlarge);
 }
 
+/** Direction variation */
+.direction--row {
+  flex-direction: row;
+}
+
+.direction--row-reverse {
+  flex-direction: row-reverse;
+}
+
+.direction--column {
+  flex-direction: column;
+}
+
+.direction--column-reverse {
+  flex-direction: column-reverse;
+}
+
+/** Wrap variation */
+.wrap--nowrap {
+  flex-wrap: nowrap;
+}
+
+.wrap--wrap {
+  flex-wrap: wrap;
+}
+
+.wrap--wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
 /** Align items variation */
 .root {
   align-items: stretch;
@@ -62,6 +92,31 @@
   align-items: baseline;
 }
 
+/** Justify content variation */
+.justify-content--flex-start {
+  justify-content: flex-start;
+}
+
+.justify-content--flex-end {
+  justify-content: flex-end;
+}
+
+.justify-content--center {
+  justify-content: center;
+}
+
+.justify-content--space-between {
+  justify-content: space-between;
+}
+
+.justify-content--space-around {
+  justify-content: space-around;
+}
+
+.justify-content--space-evenly {
+  justify-content: space-evenly;
+}
+
 /** Inline variation */
 .inline {
   display: inline-flex;

package/lib/query-state.js

@@ -49,13 +49,16 @@ const useComponentQueryState = (componentName) => {
         [componentName]: utils_1.COMPONENT_STATE_META[componentName],
     });
     const componentState = queryState[componentName];
+    const componentStateRef = (0, react_1.useRef)(componentState);
+    componentStateRef.current = componentState;
     const setState = (0, react_1.useCallback)((updates) => {
-        const newState = { ...componentState, ...updates };
-        if ((0, isEqual_1.default)(componentState, newState)) {
+        const currentState = componentStateRef.current;
+        const newState = { ...currentState, ...updates };
+        if ((0, isEqual_1.default)(currentState, newState)) {
             return;
         }
         setQueryState({ [componentName]: newState });
-    }, [componentState, setQueryState]);
+    }, [componentName, setQueryState]);
     return [componentState, setState];
 };
 exports.useComponentQueryState = useComponentQueryState;

package/lib/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAAqC;AACrC,uDAAsE;AACtE,6EAA+E;AAC/E,+CAA2D;AAMpD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,8BAAC,qCAAkB,IAAC,OAAO,EAAE,oCAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,iCAAc,EAAC;QACjD,CAAC,aAAa,CAAC,EAAE,4BAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,IAAA,iBAAO,EAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AAtBW,QAAA,sBAAsB,0BAsBjC"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,6DAAqC;AACrC,uDAAsE;AACtE,6EAA+E;AAC/E,+CAA2D;AAMpD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,8BAAC,qCAAkB,IAAC,OAAO,EAAE,oCAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,iCAAc,EAAC;QACjD,CAAC,aAAa,CAAC,EAAE,4BAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAGjD,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IACjD,iBAAiB,CAAC,OAAO,GAAG,cAAc,CAAC;IAE3C,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC;QAC/C,MAAM,QAAQ,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,OAAO,EAAE,CAAC;QAGjD,IAAI,IAAA,iBAAO,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,aAAa,EAAE,aAAa,CAAC,CAC/B,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AA3BW,QAAA,sBAAsB,0BA2BjC"}

package/lib/ui/button/button.js

@@ -10,6 +10,7 @@ const button_1 = require("ariakit/button");
 const icon_1 = require("../icon");
 const button_module_css_1 = __importDefault(require("./button.module.css"));
 exports.BUTTON_SIZE = {
+    XSMALL: 'xsmall',
     SMALL: 'small',
     MEDIUM: 'medium',
     LARGE: 'large',
@@ -23,13 +24,13 @@ exports.BUTTON_KIND = {
     SUCCES: 'success',
 };
 exports.BUTTON_GLYPHS = icon_1.Icon.ICONS;
-const ButtonComponent = (props) => {
+const ButtonComponent = (props, ref) => {
     const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children = null, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
     const resolvedPadding = padding || ((outline || solid) && size);
     const resolvedRadius = radius || ((outline || solid) && size);
     const resolvedSize = Object.values(exports.BUTTON_SIZE).includes(size) ? size : exports.BUTTON_SIZE.MEDIUM;
     const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, kind && button_module_css_1.default[kind], button_module_css_1.default[resolvedSize], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default.padding, resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], className);
-    return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
+    return (react_1.default.createElement(Component, { ...restProps, ref: ref, className: rootClassName },
         glyph && react_1.default.createElement(Icon, { glyph: glyph, className: button_module_css_1.default.glyph }),
         children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
         rightGlyph && react_1.default.createElement(Icon, { glyph: rightGlyph, className: button_module_css_1.default.glyph })));

package/lib/ui/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,GAAiC,EACjC,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,aAAa;QACzD,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAKW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAIxB,CAAC"}

package/lib/ui/button/button.module.css

@@ -3,35 +3,43 @@
   --button-space: 0px;
   /* button border width */
   --border-width: 0px;
+  /* line height in pixels to prevent layout shift when rendering a glyph */
+  --line-height: var(--space-small);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  gap: calc(var(--button-space) * 0.66);
   appearance: none;
   padding: 0;
   border: var(--border-width) solid transparent;
   background: none;
-  transition: var(--transition-out);
   color: var(--color-text-ultra-light);
+  font-size: var(--size-medium);
   font-family: var(--font-family);
+  line-height: var(--line-height);
   white-space: nowrap;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--transition-duration-out);
+  transition-timing-function: var(--transition-timing-function);
 }
 
 a.root {
   text-decoration: none;
 }
 
+.root:focus,
 .root:hover,
-.root:active,
-.root:focus {
+.root:active {
   outline: none;
   color: var(--color-text-light);
-  transition: var(--transition-in);
+  transition-duration: var(--transition-duration-in);
 }
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,13 +51,13 @@ a.root {
  * Kind variation
  */
 .primary {
-  color: var(--color-primary);
+  color: var(--color-accent);
 }
 
 .primary:hover,
 .primary:active,
 .primary:focus {
-  color: var(--color-primary-dark);
+  color: var(--color-accent-dark);
 }
 
 .secondary {
@@ -106,25 +114,25 @@ a.root {
  * Solid Kind variation
  */
 .solid {
-  background: var(--color-text-ultra-light);
+  background: var(--color-text-light);
   color: var(--color-background);
 }
 
 .solid:hover,
 .solid:active,
 .solid:focus {
-  background: var(--color-text-light);
+  background: var(--color-text);
   color: var(--color-background);
 }
 
 .solid--primary {
-  background: var(--color-primary);
+  background: var(--color-accent);
 }
 
 .solid--primary:hover,
 .solid--primary:active,
 .solid--primary:focus {
-  background: var(--color-primary-dark);
+  background: var(--color-accent-dark);
 }
 
 .solid--secondary {
@@ -180,40 +188,36 @@ a.root {
 /**
  * Size variation
  */
+.xsmall {
+  --button-space: var(--space-xxxsmall);
+  --line-height: var(--space-xsmall);
+
+  font-size: var(--size-xsmall);
+}
+
 .small {
   --button-space: var(--space-xxsmall);
+  --line-height: var(--space-small);
 
   font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.small .glyph {
-  width: var(--space-small);
-  height: var(--space-small);
 }
 
 .medium {
   --button-space: var(--space-xsmall);
-
-  font-size: var(--size-medium);
-  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+  --line-height: var(--space-small);
 }
 
 .medium .glyph {
-  width: calc(var(--space-small) + var(--space-xxxsmall));
+  margin: calc(0px - var(--space-xxxsmall) / 2);
   height: calc(var(--space-small) + var(--space-xxxsmall));
+  width: calc(var(--space-small) + var(--space-xxxsmall));
 }
 
 .large {
   --button-space: var(--space-small);
+  --line-height: var(--space-medium);
 
   font-size: var(--size-large);
-  line-height: var(--space-medium);
-}
-
-.large .glyph {
-  width: var(--space-medium);
-  height: var(--space-medium);
 }
 
 /**
@@ -300,6 +304,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }
@@ -361,5 +369,10 @@ a.root {
  * Disabled state
  */
 .root[disabled] {
-  filter: grayscale(1);
+  opacity: 0.9;
+}
+
+.root[disabled] .icon,
+.root[disabled] .content {
+  opacity: 0.8;
 }