@wistia/ui 0.4.12 → 0.4.13-beta.e9d42e46.8e8935e

package/dist/index.d.mts

@@ -2135,4 +2135,76 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type DataCardProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Label text displayed above the value
+     */
+    label: ReactNode;
+    /**
+     * Main value to display in the card
+     */
+    value: ReactNode;
+    /**
+     * Optional content to display in the top-right corner
+     */
+    upperRightSlot?: ReactNode;
+    /**
+     * Sets the color scheme of the card
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Controls the loading state of the card
+     */
+    isLoading?: boolean;
+    /**
+     * Optional trend arrow to display below the value. Use the `DataCardTrend` component to create this.
+     */
+    trend?: JSX.Element;
+};
+/**
+ * A single DataCard for use in the DataCards component
+ */
+declare const DataCard: {
+    ({ label, value, upperRightSlot, colorScheme, isLoading, trend, ...props }: DataCardProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
+    /**
+     * Should be at least one `DataCard` component
+     */
+    children: ReactNode;
+    /**
+     * Max width of the child cards
+     */
+    cardMaxWidth?: number | undefined;
+    /**
+     * Sets the color scheme of the cards, can be overriden at the card level
+     */
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * Displays a series of cards tailor made for displaying analytics data
+ */
+declare const DataCards: {
+    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardTrendProps = {
+    /**
+     * Direction of the trend arrow
+     */
+    direction?: 'down' | 'up';
+    /**
+     * Outlook of the trend arrow
+     */
+    outlook?: 'negative' | 'positive';
+    /**
+     * Content to display next to the trend arrow
+     */
+    children: JSX.Element | string;
+};
+declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -2135,4 +2135,76 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type DataCardProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Label text displayed above the value
+     */
+    label: ReactNode;
+    /**
+     * Main value to display in the card
+     */
+    value: ReactNode;
+    /**
+     * Optional content to display in the top-right corner
+     */
+    upperRightSlot?: ReactNode;
+    /**
+     * Sets the color scheme of the card
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Controls the loading state of the card
+     */
+    isLoading?: boolean;
+    /**
+     * Optional trend arrow to display below the value. Use the `DataCardTrend` component to create this.
+     */
+    trend?: JSX.Element;
+};
+/**
+ * A single DataCard for use in the DataCards component
+ */
+declare const DataCard: {
+    ({ label, value, upperRightSlot, colorScheme, isLoading, trend, ...props }: DataCardProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
+    /**
+     * Should be at least one `DataCard` component
+     */
+    children: ReactNode;
+    /**
+     * Max width of the child cards
+     */
+    cardMaxWidth?: number | undefined;
+    /**
+     * Sets the color scheme of the cards, can be overriden at the card level
+     */
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * Displays a series of cards tailor made for displaying analytics data
+ */
+declare const DataCards: {
+    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardTrendProps = {
+    /**
+     * Direction of the trend arrow
+     */
+    direction?: 'down' | 'up';
+    /**
+     * Outlook of the trend arrow
+     */
+    outlook?: 'negative' | 'positive';
+    /**
+     * Content to display next to the trend arrow
+     */
+    children: JSX.Element | string;
+};
+declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.12
+ * @license @wistia/ui v0.4.13-beta.e9d42e46.8e8935e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -146,6 +146,10 @@ var globalStyleAdjustmentsCss = css2`
     -moz-osx-font-smoothing: grayscale; /* 1 */
     -webkit-font-smoothing: antialiased; /* 2 */
   }
+
+  * {
+    margin: 0;
+  }
 `;
 
 // src/css/designTokens/index.tsx
@@ -9101,6 +9105,176 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
     children
   ] });
 };
+
+// src/components/DataCards/DataCard.tsx
+import styled47, { keyframes as keyframes2 } from "styled-components";
+import { isNotNull } from "@wistia/type-guards";
+import { jsx as jsx210, jsxs as jsxs31 } from "react/jsx-runtime";
+var StyledDataCard = styled47.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 = keyframes2`
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+`;
+var LoadingBackground = styled47.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 = styled47(LoadingBackground)`
+  width: 80px;
+  height: var(--wui-typography-heading-6-line-height);
+`;
+var StyledLoadingValue = styled47(LoadingBackground)`
+  width: 90%;
+  height: var(--wui-typography-heading-3-line-height);
+`;
+var StyledLabel4 = styled47(Heading)`
+  grid-area: label;
+`;
+var StyledValue = styled47(Heading)`
+  grid-area: value;
+`;
+var StyledSlot = styled47.div`
+  display: flex;
+  justify-content: flex-end;
+  grid-area: slot;
+  align-self: center;
+`;
+var StyledDataCardTrendContainer = styled47.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__ */ jsxs31(
+  StyledDataCard,
+  {
+    $colorScheme: colorScheme,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx210(
+        StyledLabel4,
+        {
+          renderAs: "dt",
+          variant: "heading6",
+          children: isLoading ? /* @__PURE__ */ jsx210(StyledLoadingLabel, {}) : label
+        }
+      ),
+      /* @__PURE__ */ jsx210(
+        StyledValue,
+        {
+          renderAs: "dd",
+          variant: "heading3",
+          children: isLoading ? /* @__PURE__ */ jsx210(StyledLoadingValue, {}) : value
+        }
+      ),
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx210(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx210(StyledDataCardTrendContainer, { children: trend })
+    ]
+  }
+);
+DataCard.displayName = "DataCard";
+
+// src/components/DataCards/DataCards.tsx
+import styled48 from "styled-components";
+import { isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { jsx as jsx211 } from "react/jsx-runtime";
+var StyledDataCards = styled48(Box)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  > * {
+    min-width: 120px;
+    max-width: ${({ $cardMaxWidth }) => isNotUndefined9($cardMaxWidth) ? `${$cardMaxWidth}px` : "none"};
+  }
+`;
+var DataCards = ({
+  children,
+  cardMaxWidth,
+  colorScheme = "inherit",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx211(
+    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
+import styled49 from "styled-components";
+import { jsx as jsx212, jsxs as jsxs32 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled49.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__ */ jsxs32(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx212(
+      Icon,
+      {
+        size: "md",
+        type: direction === "up" ? "arrow-up" : "arrow-down",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx212(
+      Text,
+      {
+        prominence: "secondary",
+        variant: "label4",
+        children
+      }
+    )
+  ] });
+};
 export {
   ActionButton,
   Avatar,
@@ -9115,6 +9289,9 @@ export {
   CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
+  DataCard,
+  DataCardTrend,
+  DataCards,
   Divider,
   Ellipsis,
   Form,