@wistia/ui 0.9.3-beta.2248d8ec.76736a6 → 0.9.3-beta.8f8ffa2d.2cb2d41

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.3-beta.2248d8ec.76736a6
+ * @license @wistia/ui v0.9.3-beta.8f8ffa2d.2cb2d41
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -103,16 +103,16 @@ __export(index_exports, {
   Stack: () => Stack,
   SubMenu: () => SubMenu,
   Switch: () => Switch,
+  TabTrigger: () => TabTrigger,
   Table: () => Table,
   TableBody: () => TableBody,
   TableCell: () => TableCell,
   TableFoot: () => TableFoot,
   TableHead: () => TableHead,
   TableRow: () => TableRow,
-  Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
-  TabsTrigger: () => TabsTrigger,
+  TabsRoot: () => TabsRoot,
   Tag: () => Tag,
   Text: () => Text,
   Thumbnail: () => Thumbnail,
@@ -11844,7 +11844,7 @@ var segmentedControlItemStyles = import_styled_components73.css`
     outline: 2px solid var(--wui-color-focus-ring);
   }
 
-  &:hover:not([data-state='on'], [data-state='active'], [aria-selected='true']) {
+  &:hover:not([data-state='on'], [data-state='active']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
@@ -12401,7 +12401,7 @@ var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(StyledTableRow, { ...props, children });
 };
 
-// src/components/Tabs/Tabs.tsx
+// src/components/Tabs/TabsRoot.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react67 = require("react");
 var import_type_guards50 = require("@wistia/type-guards");
@@ -12418,9 +12418,9 @@ var useTabsValue = () => {
   return context;
 };
 
-// src/components/Tabs/Tabs.tsx
+// src/components/Tabs/TabsRoot.tsx
 var import_jsx_runtime264 = require("react/jsx-runtime");
-var Tabs = ({
+var TabsRoot = ({
   children,
   value: valueProp,
   onValueChange: onValueChangeProp,
@@ -12449,7 +12449,7 @@ var Tabs = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime264.jsx)(SelectedItemStyleProvider, { children }) }) });
 };
-Tabs.displayName = "Tabs";
+TabsRoot.displayName = "TabsRoot";
 
 // src/components/Tabs/TabsContent.tsx
 var import_react_tabs2 = require("@radix-ui/react-tabs");
@@ -12460,19 +12460,30 @@ var TabsContent = ({ children, value }) => {
 TabsContent.displayName = "TabsContent";
 
 // src/components/Tabs/TabsList.tsx
-var import_react_tabs3 = require("@radix-ui/react-tabs");
+var import_react_tabs4 = require("@radix-ui/react-tabs");
+var import_styled_components86 = __toESM(require("styled-components"));
+
+// src/components/Tabs/SelectedTabIndicator.tsx
 var import_styled_components85 = __toESM(require("styled-components"));
 
-// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
+// src/components/Tabs/StyledRadixTabTrigger.tsx
 var import_styled_components84 = __toESM(require("styled-components"));
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components84.default)(SelectedItemIndicatorDiv)`
-  &:has(~ button[role='tab']:focus-visible) {
-    outline: 2px solid var(--wui-color-focus-ring);
+var import_react_tabs3 = require("@radix-ui/react-tabs");
+var StyledRadixTabTrigger = (0, import_styled_components84.default)(import_react_tabs3.Trigger)`
+  ${segmentedControlItemStyles}
+
+  &:focus-visible {
+    outline: none;
   }
 `;
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components85.default)(SelectedItemIndicatorDiv)`
+  &:has(~ ${StyledRadixTabTrigger}:focus-visible) {
+    outline: 2px solid var(--wui-color-focus-ring);
+  }
+`;
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
@@ -12484,7 +12495,7 @@ var SelectedTabIndicator = () => {
 
 // src/components/Tabs/TabsList.tsx
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var StyledRadixTabsList = (0, import_styled_components85.default)(import_react_tabs3.List)`
+var StyledRadixTabsList = (0, import_styled_components86.default)(import_react_tabs4.List)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -12502,25 +12513,12 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
 };
 TabsList.displayName = "TabsList";
 
-// src/components/Tabs/TabsTrigger.tsx
+// src/components/Tabs/TabTrigger.tsx
 var import_react68 = require("react");
 var import_type_guards51 = require("@wistia/type-guards");
-
-// src/components/Tabs/StyledRadixTabsTrigger.tsx
-var import_styled_components86 = __toESM(require("styled-components"));
-var import_react_tabs4 = require("@radix-ui/react-tabs");
-var StyledRadixTabsTrigger = (0, import_styled_components86.default)(import_react_tabs4.Trigger)`
-  ${segmentedControlItemStyles}
-
-  &:focus-visible {
-    outline: none;
-  }
-`;
-
-// src/components/Tabs/TabsTrigger.tsx
 var import_jsx_runtime268 = require("react/jsx-runtime");
-var TabsTrigger = (0, import_react68.forwardRef)(
-  ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
+var TabTrigger = (0, import_react68.forwardRef)(
+  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = (0, import_react68.useRef)(null);
@@ -12551,9 +12549,8 @@ var TabsTrigger = (0, import_react68.forwardRef)(
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
     return /* @__PURE__ */ (0, import_jsx_runtime268.jsxs)(
-      StyledRadixTabsTrigger,
+      StyledRadixTabTrigger,
       {
-        ...otherProps,
         ref: combinedRef,
         $hasLabel: (0, import_type_guards51.isNotNil)(label),
         "aria-label": (0, import_type_guards51.isNotNil)(label) ? void 0 : ariaLabel,
@@ -12567,7 +12564,7 @@ var TabsTrigger = (0, import_react68.forwardRef)(
     );
   }
 );
-TabsTrigger.displayName = "TabsTrigger";
+TabTrigger.displayName = "TabTrigger";
 
 // src/components/Tag/Tag.tsx
 var import_react69 = require("react");
@@ -13659,16 +13656,16 @@ List.displayName = "List";
   Stack,
   SubMenu,
   Switch,
+  TabTrigger,
   Table,
   TableBody,
   TableCell,
   TableFoot,
   TableHead,
   TableRow,
-  Tabs,
   TabsContent,
   TabsList,
-  TabsTrigger,
+  TabsRoot,
   Tag,
   Text,
   Thumbnail,