@wistia/ui 0.8.4-beta.ce2e7158.f79e970 → 0.8.4

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.4-beta.ce2e7158.f79e970
+ * @license @wistia/ui v0.8.4
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -11042,42 +11042,37 @@ import styled52, { css as css31 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
-// src/components/SegmentedControl/useSelectedItemStyle.tsx
+// src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState10 } from "react";
 import { jsx as jsx247 } from "react/jsx-runtime";
-var SelectedItemStyleContext = createContext6(null);
-var SelectedItemStyleProvider = ({
+var SelectedItemMeasurementsContext = createContext6(
+  null
+);
+var SelectedItemMeasurementsProvider = ({
   children
 }) => {
   const [selectedItemMeasurements, setSelectedItemMeasurements] = useState10(null);
-  const selectedItemIndicatorStyle = useMemo8(
-    () => selectedItemMeasurements != null ? {
-      height: `${selectedItemMeasurements.offsetHeight}px`,
-      transform: `translateX(${selectedItemMeasurements.offsetLeft}px) translateY(-50%)`,
-      width: `${selectedItemMeasurements.offsetWidth}px`
-    } : {
-      transform: "translateY(-50%)"
-    },
-    [selectedItemMeasurements]
-  );
   const contextValue = useMemo8(
     () => ({
       setSelectedItemMeasurements,
-      selectedItemIndicatorStyle
+      selectedItemMeasurements
     }),
-    [selectedItemIndicatorStyle]
+    [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ jsx247(SelectedItemStyleContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx247(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
-var useSelectedItemStyle = () => {
-  const context = useContext5(SelectedItemStyleContext);
+var useSelectedItemMeasurements = () => {
+  const context = useContext5(SelectedItemMeasurementsContext);
   if (context === null) {
-    throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
+    throw new Error(
+      "useSelectedItemMeasurements must be used within a SelectedItemMeasurementsProvider"
+    );
   }
   return context;
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
+import { useMemo as useMemo9 } from "react";
 import styled51 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -11099,7 +11094,7 @@ var SelectedItemIndicatorDiv = styled51.div`
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
   position: absolute;
-  top: 50%;
+  top: 0;
   box-shadow: var(--wui-elevation-01);
   transition:
     transform var(--wui-motion-duration-02) var(--wui-motion-ease-out),
@@ -11108,11 +11103,28 @@ var SelectedItemIndicatorDiv = styled51.div`
 `;
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
-  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
+  const { selectedItemMeasurements } = useSelectedItemMeasurements();
+  const selectedItemIndicatorStyle = useMemo9(
+    () => selectedItemMeasurements != null ? {
+      height: `${selectedItemMeasurements.offsetHeight}px`,
+      transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
+      width: `${selectedItemMeasurements.offsetWidth}px`
+    } : {},
+    [selectedItemMeasurements]
+  );
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx248(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+  return /* @__PURE__ */ jsx248(
+    SelectedItemIndicatorDiv,
+    {
+      style: {
+        width: selectedItemIndicatorStyle.width,
+        transform: selectedItemIndicatorStyle.transform,
+        height: selectedItemIndicatorStyle.height
+      }
+    }
+  );
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
@@ -11121,10 +11133,9 @@ var segmentedControlStyles = css31`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
+  border: 2px solid var(--wui-color-bg-surface-secondary);
   gap: var(--wui-space-01);
   isolation: isolate;
-  overflow: hidden;
-  padding: 2px;
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
@@ -11155,7 +11166,7 @@ var SegmentedControl = forwardRef20(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ jsx249(SelectedItemIndicator, {}),
           children
         ] }) })
@@ -11237,7 +11248,7 @@ var StyledSegmentedControlItem = styled53(ToggleGroupItem)`
 var SegmentedControlItem = forwardRef21(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
-    const { setSelectedItemMeasurements } = useSelectedItemStyle();
+    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
     const buttonRef = useRef10(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
@@ -11845,7 +11856,7 @@ var StyledTabItem = styled66(RadixTab)`
 var TabItem = forwardRef25(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
-    const { setSelectedItemMeasurements } = useSelectedItemStyle();
+    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
     const buttonRef = useRef11(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     useEffect9(() => {
@@ -11914,6 +11925,7 @@ var extractTabItems = (children) => {
 };
 
 // src/components/Tabs/SelectedItemIndicator.tsx
+import { useMemo as useMemo10 } from "react";
 import styled67 from "styled-components";
 import { jsx as jsx262 } from "react/jsx-runtime";
 var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
@@ -11922,12 +11934,29 @@ var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
   }
 `;
 var SelectedItemIndicator2 = () => {
-  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
+  const { selectedItemMeasurements } = useSelectedItemMeasurements();
   const selectedValue = useTabsValue();
+  const selectedItemIndicatorStyle = useMemo10(
+    () => selectedItemMeasurements != null ? {
+      height: `${selectedItemMeasurements.offsetHeight}px`,
+      transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
+      width: `${selectedItemMeasurements.offsetWidth}px`
+    } : {},
+    [selectedItemMeasurements]
+  );
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx262(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+  return /* @__PURE__ */ jsx262(
+    TabsSelectedItemIndicatorDiv,
+    {
+      style: {
+        width: selectedItemIndicatorStyle.width,
+        transform: selectedItemIndicatorStyle.transform,
+        height: selectedItemIndicatorStyle.height
+      }
+    }
+  );
 };
 
 // src/components/Tabs/Tabs.tsx
@@ -11974,7 +12003,7 @@ var Tabs = forwardRef26(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ jsxs42(
             TabList,
             {