@wistia/ui 0.4.10 → 0.4.11-beta.189cb9cf.b62584a

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.10
+ * @license @wistia/ui v0.4.11-beta.189cb9cf.b62584a
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -52,6 +52,9 @@ __export(index_exports, {
   CheckboxGroup: () => CheckboxGroup,
   CheckboxMenuItem: () => CheckboxMenuItem,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
+  DataCard: () => DataCard,
+  DataCardTrend: () => DataCardTrend,
+  DataCards: () => DataCards,
   Divider: () => Divider,
   Ellipsis: () => Ellipsis,
   Form: () => Form,
@@ -6074,6 +6077,13 @@ Badge.displayName = "Badge";
 var import_react16 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 var import_type_guards15 = require("@wistia/type-guards");
+
+// src/private/helpers/makePolymorphic/makePolymorphic.tsx
+var makePolymorphic = (component) => {
+  return component;
+};
+
+// src/components/Box/Box.tsx
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
@@ -6117,7 +6127,7 @@ var getFillViewportStyle = (fillViewport) => {
   }
   return void 0;
 };
-var BoxComponent = import_styled_components23.default.div`
+var StyledBoxComponent = import_styled_components23.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
@@ -6151,50 +6161,56 @@ var wrapChildren = (children) => {
   }
   return null;
 };
-var Box = ({
-  alignContent = "stretch",
-  alignItems = "flex-start",
-  alignSelf,
-  basis,
-  children,
-  direction = "row",
-  fill = false,
-  fillViewport = false,
-  gap,
-  grow,
-  hasBoxParent = false,
-  // eslint-disable-line @typescript-eslint/no-unused-vars
-  inline = false,
-  justifyContent = "flex-start",
-  order,
-  shrink,
-  wrapItems = false,
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
-    BoxComponent,
-    {
-      $alignContent: alignContent,
-      $alignItems: alignItems,
-      $alignSelf: alignSelf,
-      $basis: basis,
-      $fillBox: fill,
-      $fillViewport: fillViewport,
-      $flexDirection: direction,
-      $gap: gap,
-      $grow: grow,
-      $inline: inline,
-      $justifyContent: justifyContent,
-      $order: order,
-      $shrink: shrink,
-      $wrapItems: wrapItems,
-      as: "div",
-      ...otherProps,
-      children: wrapChildren(children)
-    }
-  );
-};
-Box.displayName = "Box";
+var DEFAULT_ELEMENT = "div";
+var BoxComponent = (0, import_react16.forwardRef)(
+  ({
+    alignContent = "stretch",
+    alignItems = "flex-start",
+    alignSelf,
+    basis,
+    children,
+    direction = "row",
+    fill = false,
+    fillViewport = false,
+    gap,
+    grow,
+    hasBoxParent = false,
+    // eslint-disable-line @typescript-eslint/no-unused-vars
+    inline = false,
+    justifyContent = "flex-start",
+    order,
+    renderAs,
+    shrink,
+    wrapItems = false,
+    ...otherProps
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+      StyledBoxComponent,
+      {
+        ref,
+        $alignContent: alignContent,
+        $alignItems: alignItems,
+        $alignSelf: alignSelf,
+        $basis: basis,
+        $fillBox: fill,
+        $fillViewport: fillViewport,
+        $flexDirection: direction,
+        $gap: gap,
+        $grow: grow,
+        $inline: inline,
+        $justifyContent: justifyContent,
+        $order: order,
+        $shrink: shrink,
+        $wrapItems: wrapItems,
+        as: renderAs ?? DEFAULT_ELEMENT,
+        ...otherProps,
+        children: wrapChildren(children)
+      }
+    );
+  }
+);
+BoxComponent.displayName = "Box";
+var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
@@ -6364,13 +6380,6 @@ var import_styled_components28 = __toESM(require("styled-components"));
 // src/components/Heading/Heading.tsx
 var import_react17 = require("react");
 var import_styled_components27 = __toESM(require("styled-components"));
-
-// src/private/helpers/makePolymorphic/makePolymorphic.tsx
-var makePolymorphic = (component) => {
-  return component;
-};
-
-// src/components/Heading/Heading.tsx
 var import_jsx_runtime172 = require("react/jsx-runtime");
 var heroStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-hero-family);
@@ -6423,7 +6432,7 @@ var variantStyleMap = {
   heading5: heading5TextStyle,
   heading6: heading6TextStyle
 };
-var DEFAULT_ELEMENT = "h1";
+var DEFAULT_ELEMENT2 = "h1";
 var StyledHeading = import_styled_components27.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
@@ -6448,8 +6457,8 @@ var StyledHeading = import_styled_components27.default.div`
   margin: 0;
 `;
 var variantElementMap = {
-  hero: DEFAULT_ELEMENT,
-  heading1: DEFAULT_ELEMENT,
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
   heading2: "h2",
   heading3: "h3",
   heading4: "h4",
@@ -6751,7 +6760,7 @@ var import_type_guards19 = require("@wistia/type-guards");
 var import_react19 = require("react");
 var import_styled_components32 = __toESM(require("styled-components"));
 var import_jsx_runtime177 = require("react/jsx-runtime");
-var DEFAULT_ELEMENT2 = "div";
+var DEFAULT_ELEMENT3 = "div";
 var StyledStack = import_styled_components32.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
@@ -6767,7 +6776,7 @@ var StackComponent = (0, import_react19.forwardRef)(
         ref,
         $direction: responsiveDirection,
         $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT2,
+        as: renderAs ?? DEFAULT_ELEMENT3,
         ...props
       }
     );
@@ -7088,7 +7097,7 @@ var StyledText = import_styled_components34.default.div`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT3 = "div";
+var DEFAULT_ELEMENT4 = "div";
 var TextComponent = (0, import_react23.forwardRef)(
   ({
     align = "left",
@@ -7114,7 +7123,7 @@ var TextComponent = (0, import_react23.forwardRef)(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? DEFAULT_ELEMENT4,
         ...otherProps
       }
     );
@@ -8201,6 +8210,7 @@ var ModalContent = (0, import_react36.forwardRef)(
         ref,
         $fullHeight: fullHeight,
         $width: width,
+        "aria-describedby": void 0,
         ...otherProps,
         children
       }
@@ -8296,7 +8306,6 @@ var Modal = (0, import_react38.forwardRef)(
             ModalContent,
             {
               ref,
-              "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
                 if ((0, import_type_guards28.isNotNil)(initialFocusRef) && initialFocusRef.current) {
@@ -9123,6 +9132,176 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
     children
   ] });
 };
+
+// src/components/DataCards/DataCard.tsx
+var import_styled_components59 = __toESM(require("styled-components"));
+var import_type_guards34 = require("@wistia/type-guards");
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components59.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)}
+  display: grid;
+  grid-template-areas: 'label slot' 'value value';
+  grid-template-rows: auto auto;
+  grid-template-columns: auto auto;
+  gap: var(--wui-space-01);
+  padding: var(--wui-space-03);
+  background: var(--wui-color-bg-surface-secondary);
+  flex: 1;
+  border-radius: var(--wui-border-radius-02);
+  position: relative;
+`;
+var shimmer = import_styled_components59.keyframes`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+var LoadingBackground = import_styled_components59.default.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 = (0, import_styled_components59.default)(LoadingBackground)`
+  width: 80px;
+  height: var(--wui-typography-heading-6-line-height);
+`;
+var StyledLoadingValue = (0, import_styled_components59.default)(LoadingBackground)`
+  width: 90%;
+  height: var(--wui-typography-heading-3-line-height);
+`;
+var StyledLabel4 = (0, import_styled_components59.default)(Heading)`
+  grid-area: label;
+`;
+var StyledValue = (0, import_styled_components59.default)(Heading)`
+  grid-area: value;
+`;
+var StyledSlot = import_styled_components59.default.div`
+  display: flex;
+  justify-content: flex-end;
+  grid-area: slot;
+  align-self: center;
+`;
+var StyledDataCardTrendContainer = import_styled_components59.default.div`
+  position: absolute;
+  bottom: var(--wui-space-01);
+  right: var(--wui-space-01);
+`;
+var DataCard = ({
+  label,
+  value,
+  upperRightSlot,
+  colorScheme = "inherit",
+  isLoading = false,
+  trend,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
+  StyledDataCard,
+  {
+    $colorScheme: colorScheme,
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+        StyledLabel4,
+        {
+          renderAs: "dt",
+          variant: "heading6",
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledLoadingLabel, {}) : label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+        StyledValue,
+        {
+          renderAs: "dd",
+          variant: "heading3",
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledLoadingValue, {}) : value
+        }
+      ),
+      (0, import_type_guards34.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards34.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(StyledDataCardTrendContainer, { children: trend })
+    ]
+  }
+);
+DataCard.displayName = "DataCard";
+
+// src/components/DataCards/DataCards.tsx
+var import_styled_components60 = __toESM(require("styled-components"));
+var import_type_guards35 = require("@wistia/type-guards");
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components60.default)(Box)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  > * {
+    min-width: 120px;
+    max-width: ${({ $cardMaxWidth }) => (0, import_type_guards35.isNotUndefined)($cardMaxWidth) ? `${$cardMaxWidth}px` : "none"};
+  }
+`;
+var DataCards = ({
+  children,
+  cardMaxWidth,
+  colorScheme = "inherit",
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+    StyledDataCards,
+    {
+      ...props,
+      $cardMaxWidth: cardMaxWidth,
+      $colorScheme: colorScheme,
+      direction: "row",
+      fill: "horizontal",
+      gap: "space-02",
+      renderAs: "dl",
+      wrapItems: true,
+      children
+    }
+  );
+};
+DataCards.displayName = "DataCards";
+
+// src/components/DataCards/DataCardTrend.tsx
+var import_styled_components61 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components61.default.div`
+  ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
+  background: var(--wui-color-bg-app);
+  border-radius: var(--wui-border-radius-rounded);
+  padding: var(--wui-space-01);
+  display: flex;
+  align-items: center;
+  gap: 2px;
+`;
+var DataCardTrend = ({
+  direction = "up",
+  outlook = "positive",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      Icon,
+      {
+        size: "md",
+        type: direction === "up" ? "arrow-up" : "arrow-down",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "label4",
+        children
+      }
+    )
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -9138,6 +9317,9 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
+  DataCard,
+  DataCardTrend,
+  DataCards,
   Divider,
   Ellipsis,
   Form,