@wistia/ui 0.6.11 → 0.6.12

package/dist/index.d.mts

@@ -2484,6 +2484,10 @@ type BaseTabsProps = {
      * When true, the tabs will span the full width of the container.
      */
     fullWidth?: boolean;
+    /**
+     * When true, the tab headers will remain fixed at the top while the content scrolls.
+     */
+    stickyHeaders?: boolean;
 };
 type ControlledTabsProps = BaseTabsProps & {
     /**

package/dist/index.d.ts

@@ -2484,6 +2484,10 @@ type BaseTabsProps = {
      * When true, the tabs will span the full width of the container.
      */
     fullWidth?: boolean;
+    /**
+     * When true, the tab headers will remain fixed at the top while the content scrolls.
+     */
+    stickyHeaders?: boolean;
 };
 type ControlledTabsProps = BaseTabsProps & {
     /**

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.11
+ * @license @wistia/ui v0.6.12
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10734,6 +10734,7 @@ var TableRow = ({ children, ...props }) => {
 import { forwardRef as forwardRef24, useState as useState10 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil22, isNil as isNil14 } from "@wistia/type-guards";
+import styled64 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
 import styled60 from "styled-components";
@@ -10763,6 +10764,8 @@ var StyledTabList = styled61(RadixTabList)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  align-self: ${({ $fullWidth }) => $fullWidth ? "auto" : "flex-start"};
 `;
 var TabList = ({
   children,
@@ -10917,6 +10920,22 @@ var SelectedItemIndicator2 = () => {
 
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx255, jsxs as jsxs37 } from "react/jsx-runtime";
+var TabsContainer = styled64.div`
+  display: flex;
+  flex-direction: column;
+  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
+  overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
+`;
+var StickyTabContent = styled64.div`
+  flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
+  overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
+  overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
+`;
+var StyledTabsRoot = styled64(TabsRoot)`
+  display: flex;
+  flex-direction: column;
+  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
+`;
 var Tabs = forwardRef24(
   ({
     children,
@@ -10925,6 +10944,7 @@ var Tabs = forwardRef24(
     defaultSelectedValue,
     selectedValue,
     onSelectedValueChange,
+    stickyHeaders = true,
     ...otherProps
   }, ref) => {
     const tabItems = extractTabItems(children);
@@ -10933,86 +10953,82 @@ var Tabs = forwardRef24(
       defaultValue: defaultSelectedValue,
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    return /* @__PURE__ */ jsx255(
-      TabsRoot,
+    const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
+    return /* @__PURE__ */ jsx255(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx255(
+      StyledTabsRoot,
       {
         ref,
+        $stickyHeaders: stickyHeaders,
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ jsx255(
-          TabsValueProvider,
-          {
-            value: defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue,
-            children: /* @__PURE__ */ jsxs37(SelectedItemMeasurementsProvider, { children: [
-              /* @__PURE__ */ jsxs37(
-                TabList,
-                {
-                  ariaLabel,
-                  fullWidth,
-                  children: [
-                    /* @__PURE__ */ jsx255(SelectedItemIndicator2, {}),
-                    tabItems.map((tab) => {
-                      const {
-                        value,
-                        disabled = false,
+        children: /* @__PURE__ */ jsx255(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs37(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsxs37(
+            TabList,
+            {
+              ariaLabel,
+              fullWidth,
+              children: [
+                /* @__PURE__ */ jsx255(SelectedItemIndicator2, {}),
+                tabItems.map((tab) => {
+                  const {
+                    value,
+                    disabled = false,
+                    icon,
+                    label,
+                    "aria-label": ariaLabelForTab
+                  } = tab.props;
+                  if (isNil14(icon)) {
+                    return /* @__PURE__ */ jsx255(
+                      TabItem,
+                      {
+                        disabled,
+                        label,
+                        value
+                      },
+                      value
+                    );
+                  }
+                  if (isNotNil22(label)) {
+                    return /* @__PURE__ */ jsx255(
+                      TabItem,
+                      {
+                        disabled,
                         icon,
                         label,
-                        "aria-label": ariaLabelForTab
-                      } = tab.props;
-                      if (isNil14(icon)) {
-                        return /* @__PURE__ */ jsx255(
-                          TabItem,
-                          {
-                            disabled,
-                            label,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      if (isNotNil22(label)) {
-                        return /* @__PURE__ */ jsx255(
-                          TabItem,
-                          {
-                            disabled,
-                            icon,
-                            label,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      if (isNotNil22(ariaLabelForTab)) {
-                        return /* @__PURE__ */ jsx255(
-                          TabItem,
-                          {
-                            "aria-label": ariaLabelForTab,
-                            disabled,
-                            icon,
-                            value
-                          },
-                          value
-                        );
-                      }
-                      throw new Error("A `Tab` with an icon must have either label or aria-label");
-                    })
-                  ]
-                }
-              ),
-              tabItems.map((tab) => /* @__PURE__ */ jsx255(
-                TabPanel,
-                {
-                  value: tab.props.value,
-                  children: tab.props.children
-                },
-                tab.props.value
-              ))
-            ] })
-          }
-        )
+                        value
+                      },
+                      value
+                    );
+                  }
+                  if (isNotNil22(ariaLabelForTab)) {
+                    return /* @__PURE__ */ jsx255(
+                      TabItem,
+                      {
+                        "aria-label": ariaLabelForTab,
+                        disabled,
+                        icon,
+                        value
+                      },
+                      value
+                    );
+                  }
+                  throw new Error("A `Tab` with an icon must have either label or aria-label");
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx255(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx255(
+            TabPanel,
+            {
+              value: tab.props.value,
+              children: tab.props.children
+            },
+            tab.props.value
+          )) })
+        ] }) })
       }
-    );
+    ) });
   }
 );
 Tabs.displayName = "Tabs";
@@ -11027,10 +11043,10 @@ Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef26 } from "react";
-import styled64 from "styled-components";
+import styled65 from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil23, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment8, jsx as jsx257, jsxs as jsxs38 } from "react/jsx-runtime";
-var TagLabel = styled64.a`
+var TagLabel = styled65.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -11058,14 +11074,14 @@ var TagLabel = styled64.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled64.div`
+var TagDivider = styled65.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled64.button`
+var StyledRemoveButton = styled65.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11093,7 +11109,7 @@ var StyledRemoveButton = styled64.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled64.div`
+var StyledTag = styled65.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11170,7 +11186,7 @@ var Tag = forwardRef26(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled65, { css as css30 } from "styled-components";
+import styled66, { css as css30 } from "styled-components";
 import { isNotNil as isNotNil24 } from "@wistia/type-guards";
 import { jsx as jsx258, jsxs as jsxs39 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11212,7 +11228,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled65.svg`
+var WistiaLogoComponent = styled66.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */