@wistia/ui 0.10.3 → 0.10.4-beta.1ec201d3.a525932

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.3
+ * @license @wistia/ui v0.10.4-beta.1ec201d3.a525932
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -42,6 +42,7 @@ __export(index_exports, {
   ActionButton: () => ActionButton,
   Avatar: () => Avatar,
   Badge: () => Badge,
+  Banner: () => Banner,
   Box: () => Box,
   Breadcrumb: () => Breadcrumb,
   Breadcrumbs: () => Breadcrumbs,
@@ -58,6 +59,7 @@ __export(index_exports, {
   CollapsibleTrigger: () => CollapsibleTrigger,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
   Combobox: () => Combobox2,
+  ComboboxOption: () => ComboboxOption,
   DataCard: () => DataCard,
   DataCardTrend: () => DataCardTrend,
   DataCards: () => DataCards,
@@ -13701,13 +13703,192 @@ var List = ({
 };
 List.displayName = "List";
 
-// src/components/Combobox/Combobox.tsx
-var Ariakit = __toESM(require("@ariakit/react"));
+// src/components/Banner/Banner.tsx
 var import_react73 = require("react");
-var import_match_sorter = require("match-sorter");
 var import_styled_components96 = __toESM(require("styled-components"));
+var import_type_guards61 = require("@wistia/type-guards");
 var import_jsx_runtime279 = require("react/jsx-runtime");
-var ComboboxWapper = import_styled_components96.default.div`
+var BREAKPOINT_WIDTH = 600;
+var VERTICAL_BREAKPOINT_WIDTH = 360;
+var MIN_IMAGE_WIDTH = 400;
+var StyledBanner = import_styled_components96.default.div`
+  --wui-banner-padding: var(--wui-space-04);
+  --wui-banner-content-height: ${({ $contentHeight }) => $contentHeight}px;
+
+  display: flex;
+  flex-direction: row;
+  background: var(--wui-color-bg-surface-secondary);
+  border-radius: var(--wui-border-radius-03);
+  position: relative;
+  overflow: hidden;
+  align-items: center;
+
+  &[data-wui-banner-content-prominence='secondary'] {
+    --wui-banner-padding: var(--wui-space-05);
+
+    box-shadow: inset 0 0 0 2px var(--wui-color-border);
+  }
+
+  &:has([data-wui-banner-image]) {
+    --wui-banner-padding: var(--wui-space-05);
+  }
+
+  &[data-wui-banner-content-prominence='small'] {
+    --wui-banner-padding: var(--wui-space-04);
+  }
+
+  &[data-wui-banner-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+`;
+var IconWrapper = (0, import_styled_components96.default)(Box)`
+  --wui-banner-icon-size: var(--font-size, 24px);
+
+  ${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components96.css`
+      display: inline-block;
+      vertical-align: text-bottom;
+      margin-right: calc(var(--wui-banner-icon-size) / 3);
+    `}
+
+  svg {
+    color: var(--wui-color-icon);
+    width: var(--wui-banner-icon-size);
+    height: var(--wui-banner-icon-size);
+  }
+`;
+var Banner = ({
+  bodyText,
+  colorScheme = "inherit",
+  headingText,
+  icon,
+  image,
+  onClose,
+  orientation = "horizontal",
+  primaryAction,
+  prominence = "default",
+  secondaryAction,
+  ...props
+}) => {
+  const [containerRef, { width }] = useElementObserver();
+  const [contentRef, { height: contentHeight }] = useElementObserver();
+  const [isSmallContainer, setIsSmallContainer] = (0, import_react73.useState)(false);
+  const [isVerticalLayout, setIsVerticalLayout] = (0, import_react73.useState)(orientation === "vertical");
+  (0, import_react73.useEffect)(() => {
+    const breakpoint = orientation === "vertical" ? VERTICAL_BREAKPOINT_WIDTH : BREAKPOINT_WIDTH;
+    setIsSmallContainer(width <= breakpoint);
+    if (orientation === "auto") {
+      setIsVerticalLayout(width <= BREAKPOINT_WIDTH);
+    }
+  }, [width, orientation]);
+  const hasImage = (0, import_type_guards61.isNotNil)(image);
+  const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
+  const iconPosition = (0, import_react73.useMemo)(() => {
+    if ((0, import_type_guards61.isNil)(icon)) return "none";
+    if (isSmallContainer) return shouldShowImage ? "inline" : "above";
+    return prominence === "secondary" ? "inline" : "above";
+  }, [icon, isSmallContainer, shouldShowImage, prominence]);
+  const contentDirection = (0, import_react73.useMemo)(
+    () => !shouldShowImage && prominence === "default" && !isSmallContainer && !isVerticalLayout ? "row" : "column",
+    [shouldShowImage, prominence, isSmallContainer, isVerticalLayout]
+  );
+  const headingVariant = isSmallContainer || prominence === "default" ? "heading5" : "heading3";
+  const textVariant = prominence === "default" || isSmallContainer ? "body3" : "body2";
+  const buttonSize = isSmallContainer ? "sm" : "md";
+  const hasActions = (0, import_type_guards61.isNotNil)(primaryAction) || (0, import_type_guards61.isNotNil)(secondaryAction);
+  return /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+    StyledBanner,
+    {
+      ...props,
+      ref: containerRef,
+      $colorScheme: colorScheme,
+      $contentHeight: contentHeight,
+      $width: !isSmallContainer && !isVerticalLayout ? width : void 0,
+      "data-wui-banner-content-prominence": isSmallContainer ? "small" : prominence,
+      "data-wui-banner-orientation": isVerticalLayout ? "vertical" : "horizontal",
+      children: [
+        shouldShowImage ? image : null,
+        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+          Box,
+          {
+            ref: contentRef,
+            alignItems: "stretch",
+            direction: contentDirection,
+            flexMode: "grow",
+            gap: "space-04",
+            style: { padding: "var(--wui-banner-padding)" },
+            children: [
+              iconPosition === "above" && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+                IconWrapper,
+                {
+                  $iconPosition: "above",
+                  alignSelf: "stretch",
+                  direction: "column",
+                  justifyContent: "center",
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+                Box,
+                {
+                  direction: "column",
+                  flexMode: contentDirection === "row" ? "grow" : "initial",
+                  gap: iconPosition === "inline" ? "space-01" : "space-00",
+                  justifyContent: "center",
+                  children: [
+                    (0, import_type_guards61.isNotNil)(headingText) ? /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(Heading, { variant: headingVariant, children: [
+                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(IconWrapper, { $iconPosition: "inline", children: icon }),
+                      headingText
+                    ] }) : null,
+                    /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(Text, { variant: textVariant, children: bodyText })
+                  ]
+                }
+              ),
+              hasActions ? /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+                ButtonGroup,
+                {
+                  buttonSize,
+                  collapseOnSmallScreens: false,
+                  style: { paddingRight: "var(--wui-space-02)" },
+                  children: [
+                    (0, import_type_guards61.isNotNil)(primaryAction) && primaryAction,
+                    (0, import_type_guards61.isNotNil)(secondaryAction) && secondaryAction
+                  ]
+                }
+              ) : null
+            ]
+          }
+        ),
+        (0, import_type_guards61.isNotNil)(onClose) && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+          IconButton,
+          {
+            label: "Close",
+            onClick: onClose,
+            size: "sm",
+            style: {
+              position: "absolute",
+              top: "var(--wui-space-01)",
+              right: "var(--wui-space-01)"
+            },
+            variant: "soft",
+            children: /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(Icon, { type: "close" })
+          }
+        )
+      ]
+    }
+  );
+};
+Banner.displayName = "Banner";
+
+// src/components/Combobox/Combobox.tsx
+var Ariakit = __toESM(require("@ariakit/react"));
+var import_react74 = require("react");
+var import_match_sorter = require("match-sorter");
+var import_styled_components97 = __toESM(require("styled-components"));
+var import_jsx_runtime280 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components97.default.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13756,7 +13937,7 @@ var ComboboxWapper = import_styled_components96.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components96.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components97.default)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -13771,7 +13952,7 @@ var ComboboxInput = (0, import_styled_components96.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = (0, import_styled_components96.default)(Ariakit.Popover)`
+var ComboboxPopover = (0, import_styled_components97.default)(Ariakit.Popover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -13796,7 +13977,7 @@ var ComboboxPopover = (0, import_styled_components96.default)(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components96.default)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components97.default)(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -13821,14 +14002,25 @@ var ComboboxItem2 = (0, import_styled_components96.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components96.default.div`
+var NoResults = import_styled_components97.default.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
+var ComboboxOption = ({ value, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
+    ComboboxItem2,
+    {
+      className: "combobox-item",
+      focusOnHover: true,
+      value,
+      children
+    }
+  );
+};
 var extractOptions = (children) => {
   const options = {};
-  import_react73.Children.forEach(children, (child) => {
-    if ((0, import_react73.isValidElement)(child) && "value" in child.props && "children" in child.props) {
+  import_react74.Children.forEach(children, (child) => {
+    if ((0, import_react74.isValidElement)(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -13843,11 +14035,11 @@ var Combobox2 = ({
   children,
   fullWidth = true
 }) => {
-  const [isPending, startTransition] = (0, import_react73.useTransition)();
-  const [wrapperWidth, setWrapperWidth] = (0, import_react73.useState)("auto");
-  const comboboxWrapperRef = (0, import_react73.useRef)(null);
-  const options = (0, import_react73.useMemo)(() => extractOptions(children), [children]);
-  (0, import_react73.useEffect)(() => {
+  const [isPending, startTransition] = (0, import_react74.useTransition)();
+  const [wrapperWidth, setWrapperWidth] = (0, import_react74.useState)("auto");
+  const comboboxWrapperRef = (0, import_react74.useRef)(null);
+  const options = (0, import_react74.useMemo)(() => extractOptions(children), [children]);
+  (0, import_react74.useEffect)(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -13865,10 +14057,10 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = (0, import_react73.useMemo)(() => {
+  const matches = (0, import_react74.useMemo)(() => {
     return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -13879,13 +14071,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
                 Tag,
                 {
                   href: "https://example.com",
@@ -13895,11 +14087,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(ComboboxInput, { placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -13909,14 +14101,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime279.jsxs)(
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime280.jsxs)(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
                       Icon,
                       {
                         size: "sm",
@@ -13931,7 +14123,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime279.jsx)(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -13944,6 +14136,7 @@ var Combobox2 = ({
   ActionButton,
   Avatar,
   Badge,
+  Banner,
   Box,
   Breadcrumb,
   Breadcrumbs,
@@ -13960,6 +14153,7 @@ var Combobox2 = ({
   CollapsibleTrigger,
   ColorSchemeWrapper,
   Combobox,
+  ComboboxOption,
   DataCard,
   DataCardTrend,
   DataCards,