@wistia/ui 0.4.12 → 0.4.13-beta.06998a7c.b5fc7fb

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.12
+ * @license @wistia/ui v0.4.13-beta.06998a7c.b5fc7fb
  *
  * 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,
@@ -1789,7 +1792,7 @@ Ellipsis.displayName = "Ellipsis";
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components12 = require("styled-components");
 var colorSchemeSchema = [
-  { token: "bg-surface", step: "surface" },
+  { token: "bg-surface", step: "2" },
   { token: "bg-surface-hover", step: "3" },
   { token: "bg-surface-active", step: "4" },
   { token: "bg-surface-secondary", step: "3" },
@@ -1815,7 +1818,7 @@ var colorSchemeSchema = [
   { token: "focus-ring", step: "9" }
 ];
 var defaultScheme = import_styled_components12.css`
-  --wui-color-bg-surface: var(--wui-gray-surface);
+  --wui-color-bg-surface: var(--wui-gray-1);
   --wui-color-bg-surface-hover: var(--wui-gray-3);
   --wui-color-bg-surface-active: var(--wui-gray-4);
   --wui-color-bg-surface-secondary: var(--wui-gray-3);
@@ -9163,6 +9166,176 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
     children
   ] });
 };
+
+// src/components/DataCards/DataCard.tsx
+var import_styled_components60 = __toESM(require("styled-components"));
+var import_type_guards34 = require("@wistia/type-guards");
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components60.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_components60.keyframes`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+var LoadingBackground = import_styled_components60.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_components60.default)(LoadingBackground)`
+  width: 80px;
+  height: var(--wui-typography-heading-6-line-height);
+`;
+var StyledLoadingValue = (0, import_styled_components60.default)(LoadingBackground)`
+  width: 90%;
+  height: var(--wui-typography-heading-3-line-height);
+`;
+var StyledLabel4 = (0, import_styled_components60.default)(Heading)`
+  grid-area: label;
+`;
+var StyledValue = (0, import_styled_components60.default)(Heading)`
+  grid-area: value;
+`;
+var StyledSlot = import_styled_components60.default.div`
+  display: flex;
+  justify-content: flex-end;
+  grid-area: slot;
+  align-self: center;
+`;
+var StyledDataCardTrendContainer = import_styled_components60.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_components61 = __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_components61.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_components62 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components62.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,
@@ -9178,6 +9351,9 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
   CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
+  DataCard,
+  DataCardTrend,
+  DataCards,
   Divider,
   Ellipsis,
   Form,