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

package/src/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);
@@ -187,8 +192,8 @@ body {
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
+  --transition-duration-in: 120ms;
+  --transition-duration-out: 80ms;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 
@@ -197,9 +202,15 @@ body {
   --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/src/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/src/layout/flex-stack/flex-stack.stories.tsx

@@ -28,7 +28,7 @@ export const Default: Story = {
   },
 };
 
-export const withCustomWrapper: Story = {
+export const WithCustomWrapper: Story = {
   args: {
     as: 'main',
     className: 'wrapper',
@@ -41,9 +41,9 @@ export const withCustomWrapper: Story = {
   },
 };
 
-export const withLargeSpace: Story = {
+export const WithLargeGap: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
@@ -54,14 +54,14 @@ export const withLargeSpace: Story = {
   },
 };
 
-export const withNestedStack: Story = {
+export const WithNestedStack: Story = {
   args: {
-    space: 'large',
+    gap: 'large',
     children: (
       <>
         <Box outline>Lorem ipsum 1</Box>
         <Box outline>Lorem ipsum 2</Box>
-        <FlexStack space="small">
+        <FlexStack gap="small">
           <Box outline>Lorem ipsum 3.1</Box>
           <Box outline>Lorem ipsum 3.2</Box>
         </FlexStack>
@@ -70,16 +70,61 @@ export const withNestedStack: Story = {
   },
 };
 
-export const singleItem: Story = {
+export const SingleItem: Story = {
   args: {
     children: <Box outline>Lorem ipsum</Box>,
   },
 };
 
-export const withAlignItems: Story = {
+export const WithDirectionColumn: Story = {
+  args: {
+    direction: 'column',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithDirectionRowReverse: Story = {
+  args: {
+    direction: 'row-reverse',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};
+
+export const WithWrap: Story = {
+  args: {
+    wrap: 'wrap',
+    gap: 'medium',
+    style: { maxWidth: '320px' },
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+        <Box outline>Lorem ipsum 4</Box>
+        <Box outline>Lorem ipsum 5</Box>
+      </>
+    ),
+  },
+};
+
+export const WithAlignItems: Story = {
   args: {
     alignItems: 'center',
-    space: 'medium',
+    gap: 'medium',
     children: (
       <>
         <h1>Title</h1>
@@ -88,3 +133,17 @@ export const withAlignItems: Story = {
     ),
   },
 };
+
+export const WithJustifyContent: Story = {
+  args: {
+    justifyContent: 'space-between',
+    gap: 'medium',
+    children: (
+      <>
+        <Box outline>Lorem ipsum 1</Box>
+        <Box outline>Lorem ipsum 2</Box>
+        <Box outline>Lorem ipsum 3</Box>
+      </>
+    ),
+  },
+};

package/src/layout/flex-stack/flex-stack.tsx

@@ -6,12 +6,25 @@ import css from './flex-stack.module.css';
 
 type SpaceValue = (typeof SPACES)[number];
 
-interface FlexStackProps<T extends React.ElementType> {
+export type FlexStackProps<T extends React.ElementType> = {
   as?: T;
+  gap?: SpaceValue;
+  /**
+   * @deprecated Use `gap` instead.
+   */
   space?: SpaceValue;
   inline?: boolean;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   alignItems?: 'top' | 'center' | 'bottom';
-}
+  justifyContent?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
+};
 
 export const FlexStack = <T extends React.ElementType = 'div'>(
   props: FlexStackProps<T> & Omit<React.ComponentProps<T>, keyof FlexStackProps<T>>,
@@ -19,16 +32,23 @@ export const FlexStack = <T extends React.ElementType = 'div'>(
   const {
     as: Component = 'div',
     className = '',
-    space = NO_SPACE,
+    gap,
+    space,
     inline = false,
+    direction = '',
+    wrap = '',
     alignItems = '',
+    justifyContent = '',
     ...restProps
   } = props;
 
   const rootClassName = cx(
     css.root,
-    css[`space--${space}`],
+    css[`gap--${gap ?? space ?? NO_SPACE}`],
+    css[`direction--${direction}`],
+    css[`wrap--${wrap}`],
     css[`align-items--${alignItems}`],
+    css[`justify-content--${justifyContent}`],
     inline && css.inline,
     className,
   );

package/src/query-state.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import isEqual from 'lodash/isEqual';
 import { QueryParamProvider, useQueryParams } from 'use-query-params';
 import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
@@ -19,18 +19,23 @@ export const useComponentQueryState = (componentName: string) => {
 
   const componentState = queryState[componentName];
 
+  // Read the latest state from a ref to keep `setState` stable across state changes
+  const componentStateRef = useRef(componentState);
+  componentStateRef.current = componentState;
+
   const setState = useCallback(
     (updates: Record<string, unknown>) => {
-      const newState = { ...componentState, ...updates };
+      const currentState = componentStateRef.current;
+      const newState = { ...currentState, ...updates };
 
       // Deep check to prevent unnecessary state changes
-      if (isEqual(componentState, newState)) {
+      if (isEqual(currentState, newState)) {
         return;
       }
 
       setQueryState({ [componentName]: newState });
     },
-    [componentState, setQueryState],
+    [componentName, setQueryState],
   );
 
   return [componentState, setState];

package/src/ui/button/button.module.css

@@ -3,28 +3,32 @@
   --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: var(--transition-out);
 }
 
 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);
@@ -32,6 +36,8 @@ a.root {
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -43,13 +49,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 +112,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 +186,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 +302,10 @@ a.root {
 /**
  * Radius variation
  */
+.radius--xsmall {
+  border-radius: var(--radius-xsmall);
+}
+
 .radius--small {
   border-radius: var(--radius-small);
 }
@@ -361,5 +367,10 @@ a.root {
  * Disabled state
  */
 .root[disabled] {
-  filter: grayscale(1);
+  opacity: 0.9;
+}
+
+.root[disabled] .icon,
+.root[disabled] .content {
+  opacity: 0.8;
 }

package/src/ui/button/button.stories.tsx

@@ -19,7 +19,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const Items = (props: React.ComponentProps<typeof FlexStack>) => (
-  <FlexStack alignItems="top" style={{ flexWrap: 'wrap', gap: '12px' }} {...props} />
+  <FlexStack alignItems="top" wrap="wrap" gap="xsmall" {...props} />
 );
 
 export const Default: Story = {};

package/src/ui/button/button.tsx

@@ -6,6 +6,7 @@ import { Icon as BaseIcon } from '../icon';
 import css from './button.module.css';
 
 export const BUTTON_SIZE = {
+  XSMALL: 'xsmall',
   SMALL: 'small',
   MEDIUM: 'medium',
   LARGE: 'large',
@@ -41,6 +42,7 @@ interface ButtonProps<T extends React.ElementType> {
 
 const ButtonComponent = <T extends React.ElementType = 'button'>(
   props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+  ref: React.Ref<HTMLButtonElement>,
 ) => {
   const {
     className = '',
@@ -86,7 +88,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   );
 
   return (
-    <Component {...restProps} className={rootClassName}>
+    <Component {...restProps} ref={ref} className={rootClassName}>
       {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
       {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}

package/src/ui/control-group/control-group.tsx

@@ -9,7 +9,7 @@ export const ControlGroup = (props: React.ComponentProps<typeof FlexStack>) => {
   return (
     <FlexStack
       className={cx(css.root, className)}
-      space="no-space"
+      gap="no-space"
       alignItems="center"
       {...restProps}
     />

package/src/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,10 @@
 
 /** done state */
 .root svg {
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
 }

package/src/ui/dialog/dialog.module.css

@@ -1,3 +1,8 @@
+/** place overlays triggered from inside the dialog on top of the dialog */
+.portal {
+  --layer-overlay: calc(var(--layer-xxhigh) + 1);
+}
+
 .backdrop {
   display: flex;
   align-items: center;

package/src/ui/dialog/dialog.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Dropdown, DropdownItem } from '../dropdown';
 import { Button } from '../button';
+import { HoverCard } from '../hover-card';
+import { Tooltip } from '../tooltip';
 import { Dialog, useDialogState } from '.';
 
 const meta: Meta<typeof Dialog> = {
@@ -40,6 +42,12 @@ const DialogComponent = (storyArgs: Story['args']) => {
           </Dropdown>
           <br />
           <br />
+          <Tooltip title="Tooltip content">Tooltip anchor</Tooltip>
+          <br />
+          <br />
+          <HoverCard label="HoverCard anchor">HoverCard content</HoverCard>
+          <br />
+          <br />
           {[1, 2, 3].map((item) => (
             <Fragment key={item}>
               <p>