@wistia/ui 0.18.17 → 0.18.18-beta.5671ee8e.fdf9f16

package/dist/index.d.mts

@@ -1723,20 +1723,28 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
      * Should be at least one `DataCard` component
      */
     children: ReactNode;
+    /**
+     * String to pass to the `min-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#syntax)
+     */
+    cardMinWidth?: ResponsiveObject<string> | string;
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMinWidth, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1723,20 +1723,28 @@ type DataCardsProps = ComponentPropsWithoutRef<'div'> & {
      * Should be at least one `DataCard` component
      */
     children: ReactNode;
+    /**
+     * String to pass to the `min-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#syntax)
+     */
+    cardMinWidth?: ResponsiveObject<string> | string;
     /**
      * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
      */
-    cardMaxWidth?: string;
+    cardMaxWidth?: ResponsiveObject<string> | string;
     /**
      * Sets the color scheme of the cards, can be overriden at the card level
      */
     colorScheme?: ColorSchemeTypes;
+    /**
+     * Desired number of columns to display.
+     */
+    columns?: ResponsiveObject<number | 'auto'> | number | 'auto';
 };
 /**
  * Displays a series of cards tailor made for displaying analytics data
  */
 declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    ({ children, cardMinWidth, cardMaxWidth, colorScheme, columns, ...props }: DataCardsProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.18.17
+ * @license @wistia/ui v0.18.18-beta.5671ee8e.fdf9f16
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -13958,12 +13958,22 @@ import { useRef as useRef15 } from "react";
 import { styled as styled58, keyframes as keyframes4 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx278, jsxs as jsxs41 } from "react/jsx-runtime";
+var pulse = keyframes4`
+  0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+`;
 var StyledDataCard = styled58.div`
   --wui-data-card-text: var(--wui-color-text-button);
   --wui-color-text: var(--wui-data-card-text);
   --wui-data-card-background: var(--wui-color-bg-surface-secondary);
   --wui-data-card-background-hover: var(--wui-color-bg-surface-secondary-hover);
   --wui-data-card-background-active: var(--wui-color-bg-surface-secondary-active);
+  --wui-data-card-skeleton-color: var(--wui-color-bg-surface-tertiary);
 
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -13991,6 +14001,16 @@ var StyledDataCard = styled58.div`
     grid-template-rows: auto auto auto;
   }
 
+  [data-wui-data-card-skeleton='true'] {
+    pointer-events: none;
+    background-color: var(--wui-data-card-skeleton-color);
+    animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
+    color: transparent;
+    user-select: none;
+    border-radius: var(--wui-border-radius-01);
+    width: fit-content;
+  }
+
   &[data-click-region] {
     &:not([disabled]) {
       cursor: pointer;
@@ -14022,6 +14042,7 @@ var StyledDataCard = styled58.div`
         --wui-data-card-background-hover: var(--wui-color-bg-surface-selected-hover);
         --wui-data-card-background-active: var(--wui-color-bg-surface-selected-active);
         --wui-data-card-focus-ring: var(--wui-color-border-selected);
+        --wui-data-card-skeleton-color: var(--wui-color-bg-surface-selected-active);
       }
     }
 
@@ -14032,38 +14053,19 @@ var StyledDataCard = styled58.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = keyframes4`
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-`;
-var LoadingBackground = styled58.div`
-  background: linear-gradient(
-    90deg,
-    var(--wui-color-bg-surface-tertiary) 25%,
-    var(--wui-color-bg-surface-secondary) 37%,
-    var(--wui-color-bg-surface-tertiary) 63%
-  );
-  background-size: 200% 100%;
-  animation: ${shimmer} 1.5s infinite;
-  border-radius: var(--wui-border-radius-01);
-`;
-var StyledLoadingLabel = styled58(LoadingBackground)`
-  width: 80px;
-  height: var(--wui-typography-heading-6-line-height);
-`;
-var StyledLoadingValue = styled58(LoadingBackground)`
-  width: 90%;
-  height: var(--wui-typography-heading-3-line-height);
-`;
 var StyledLabel3 = styled58(Heading)`
   grid-area: label;
+
+  &[data-wui-data-card-skeleton='true'] {
+    width: 80px;
+  }
 `;
 var StyledValue = styled58(Heading)`
   grid-area: value;
+
+  &[data-wui-data-card-skeleton='true'] {
+    width: min(90%, 156px);
+  }
 `;
 var StyledSlot = styled58.div`
   display: flex;
@@ -14097,17 +14099,19 @@ var DataCardInner = ({
       /* @__PURE__ */ jsx278(
         StyledLabel3,
         {
-          renderAs: "dt",
+          "data-wui-data-card-skeleton": isLoading,
+          renderAs: "span",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx278(StyledLoadingLabel, {}) : label
+          children: label
         }
       ),
       /* @__PURE__ */ jsx278(
         StyledValue,
         {
-          renderAs: "dd",
+          "data-wui-data-card-skeleton": isLoading,
+          renderAs: "span",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx278(StyledLoadingValue, {}) : value
+          children: value
         }
       ),
       isNotNil25(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx278(StyledSlot, { children: upperRightSlot }),
@@ -14158,29 +14162,42 @@ import { styled as styled59 } from "styled-components";
 import { jsx as jsx279 } from "react/jsx-runtime";
 var StyledDataCards = styled59(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  --wui-data-cards-column-count: ${({ $columns }) => $columns === "auto" ? void 0 : $columns};
+  --wui-data-cards-total-column-gap-width: calc(var(--wui-data-cards-column-count) - 1) *
+    var(--wui-space-02);
+  --wui-data-cards-column-width: calc(
+    (100% - var(--wui-data-cards-total-column-gap-width)) / var(--wui-data-cards-column-count)
+  );
 
   > * {
-    min-width: 120px;
+    min-width: ${({ $cardMinWidth }) => $cardMinWidth};
+    flex-basis: var(--wui-data-cards-column-width, 0);
     max-width: ${({ $cardMaxWidth }) => $cardMaxWidth};
   }
 `;
 var DataCards = ({
   children,
+  cardMinWidth = "120px",
   cardMaxWidth = "none",
   colorScheme = "inherit",
+  columns = "auto",
   ...props
 }) => {
+  const responsiveCardMinWidth = useResponsiveProp(cardMinWidth);
+  const responsiveCardMaxWidth = useResponsiveProp(cardMaxWidth);
+  const responsiveColumns = useResponsiveProp(columns);
   return /* @__PURE__ */ jsx279(
     StyledDataCards,
     {
       ...props,
-      $cardMaxWidth: cardMaxWidth,
+      $cardMaxWidth: responsiveCardMaxWidth,
+      $cardMinWidth: responsiveCardMinWidth,
       $colorScheme: colorScheme,
+      $columns: responsiveColumns,
       alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
-      renderAs: "dl",
       wrapItems: true,
       children
     }