@wistia/ui 0.8.2 → 0.8.3-beta.e5caab02.ee46837

package/dist/index.d.mts

@@ -1160,9 +1160,9 @@ type EditableHeadingProps = {
     ariaLabel?: string;
     /**
      * Force editing state for testing purposes
-     *
+     * @ignore
      */
-    forceEditing?: boolean;
+    __forceEditing?: boolean;
     /**
      * When true, prevents the heading from entering edit mode
      * @default false
@@ -1175,7 +1175,7 @@ type EditableHeadingProps = {
  * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
@@ -2348,12 +2348,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
+    colorScheme?: ColorSchemeTypes;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, colorScheme, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1160,9 +1160,9 @@ type EditableHeadingProps = {
     ariaLabel?: string;
     /**
      * Force editing state for testing purposes
-     *
+     * @ignore
      */
-    forceEditing?: boolean;
+    __forceEditing?: boolean;
     /**
      * When true, prevents the heading from entering edit mode
      * @default false
@@ -1175,7 +1175,7 @@ type EditableHeadingProps = {
  * an accessible button that enables editing mode. The component handles empty values, keyboard
  * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
  */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, __forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
 
 type EllipsisProps = ComponentPropsWithoutRef<'span'> & {
     /**
@@ -2348,12 +2348,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * If true, the popover will use the unstyled Content component instead of StyledContent
      */
     unstyled?: boolean;
+    colorScheme?: ColorSchemeTypes;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, colorScheme, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.2
+ * @license @wistia/ui v0.8.3-beta.e5caab02.ee46837
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -9022,6 +9022,7 @@ import { isNil as isNil13, isNotNil as isNotNil16, isRecord as isRecord4 } from
 // src/css/sharedStyles/inputCssVariables.ts
 import { css as css24 } from "styled-components";
 var inputCssVariables = css24`
+  /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border-secondary);
@@ -9029,13 +9030,20 @@ var inputCssVariables = css24`
   --wui-input-color-border-error: var(--wui-color-invalid-indicator);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
   --wui-input-color-text: var(--wui-color-text);
+
+  /* Border */
   --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
+
+  /* Padding */
   --wui-input-vertical-padding: var(--wui-space-02);
   --wui-input-horizontal-padding: var(--wui-space-03);
+
+  /* Typography */
   --wui-input-placeholder: var(--wui-gray-10);
   --wui-input-font-size: var(--wui-typography-body-3-size);
   --wui-input-line-height: 16px;
+  --wui-input-font-weight: var(--wui-typography-weight-body);
 `;
 
 // src/components/Input/Input.tsx
@@ -9052,7 +9060,7 @@ var inputStyles = css25`
     border-radius: var(--wui-input-border-radius);
     font-size: var(--wui-input-font-size);
     line-height: var(--wui-input-line-height);
-    font-weight: var(--wui-typography-weight-body);
+    font-weight: var(--wui-input-font-weight);
     color: var(--wui-input-color-text);
 
     &::placeholder {
@@ -9222,15 +9230,12 @@ var StyledInput = styled31(Input)`
     min-height: unset;
   }
 
-  resize: vertical;
-  font-size: var(--wui-typography-heading-1-size);
-  font-weight: var(--wui-typography-heading-1-weight);
-  line-height: var(--wui-typography-heading-1-line-height);
-  font-family: var(--wui-typography-heading-1-family);
-  outline: 2px solid var(--wui-color-focus-ring);
-  outline-offset: -2px;
-
   && {
+    --wui-input-font-size: var(--wui-typography-heading-1-size);
+    --wui-input-font-weight: var(--wui-typography-heading-1-weight);
+    --wui-input-line-height: var(--wui-typography-heading-1-line-height);
+
+    font-family: var(--wui-typography-heading-1-family);
     width: 100%;
     padding: var(--wui-space-02);
     border: none;
@@ -9261,7 +9266,7 @@ var EditableHeading = ({
   onEditingChange,
   tooltipText = "Click to edit title",
   ariaLabel = "Edit title",
-  forceEditing = false,
+  __forceEditing = false,
   editingDisabled = false
 }) => {
   const [isEditing, setIsEditing] = useState6(false);
@@ -9314,7 +9319,7 @@ var EditableHeading = ({
   if (editingDisabled) {
     return HeadingComponent2;
   }
-  if (isEditing || forceEditing) {
+  if (isEditing || __forceEditing) {
     return /* @__PURE__ */ jsx220(
       StyledInput,
       {
@@ -10722,6 +10727,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css29`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
@@ -10748,6 +10754,7 @@ var Popover = ({
   maxHeight = "auto",
   onOpenChange,
   unstyled = false,
+  colorScheme = "inherit",
   ...props
 }) => {
   const style = {
@@ -10759,6 +10766,7 @@ var Popover = ({
     /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs32(
       StyledContent2,
       {
+        $colorScheme: colorScheme,
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
@@ -11034,37 +11042,42 @@ 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/useSelectedItemMeasurements.tsx
+// src/components/SegmentedControl/useSelectedItemStyle.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 SelectedItemMeasurementsContext = createContext6(
-  null
-);
-var SelectedItemMeasurementsProvider = ({
+var SelectedItemStyleContext = createContext6(null);
+var SelectedItemStyleProvider = ({
   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,
-      selectedItemMeasurements
+      selectedItemIndicatorStyle
     }),
-    [selectedItemMeasurements]
+    [selectedItemIndicatorStyle]
   );
-  return /* @__PURE__ */ jsx247(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx247(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
-var useSelectedItemMeasurements = () => {
-  const context = useContext5(SelectedItemMeasurementsContext);
+var useSelectedItemStyle = () => {
+  const context = useContext5(SelectedItemStyleContext);
   if (context === null) {
-    throw new Error(
-      "useSelectedItemMeasurements must be used within a SelectedItemMeasurementsProvider"
-    );
+    throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
   return context;
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { useMemo as useMemo9 } from "react";
 import styled51 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -11086,7 +11099,7 @@ var SelectedItemIndicatorDiv = styled51.div`
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
   position: absolute;
-  top: 0;
+  top: 50%;
   box-shadow: var(--wui-elevation-01);
   transition:
     transform var(--wui-motion-duration-02) var(--wui-motion-ease-out),
@@ -11095,28 +11108,11 @@ var SelectedItemIndicatorDiv = styled51.div`
 `;
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
-  const { selectedItemMeasurements } = useSelectedItemMeasurements();
-  const selectedItemIndicatorStyle = useMemo9(
-    () => selectedItemMeasurements != null ? {
-      height: `${selectedItemMeasurements.offsetHeight}px`,
-      transform: `translateX(${selectedItemMeasurements.offsetLeft}px)`,
-      width: `${selectedItemMeasurements.offsetWidth}px`
-    } : {},
-    [selectedItemMeasurements]
-  );
+  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx248(
-    SelectedItemIndicatorDiv,
-    {
-      style: {
-        width: selectedItemIndicatorStyle.width,
-        transform: selectedItemIndicatorStyle.transform,
-        height: selectedItemIndicatorStyle.height
-      }
-    }
-  );
+  return /* @__PURE__ */ jsx248(SelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
@@ -11125,9 +11121,10 @@ 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"};
 `;
@@ -11158,7 +11155,7 @@ var SegmentedControl = forwardRef20(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemMeasurementsProvider, { children: [
+        children: /* @__PURE__ */ jsx249(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs35(SelectedItemStyleProvider, { children: [
           /* @__PURE__ */ jsx249(SelectedItemIndicator, {}),
           children
         ] }) })
@@ -11240,7 +11237,7 @@ var StyledSegmentedControlItem = styled53(ToggleGroupItem)`
 var SegmentedControlItem = forwardRef21(
   ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
-    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
+    const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef10(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     const handleClick = (event) => {
@@ -11848,7 +11845,7 @@ var StyledTabItem = styled66(RadixTab)`
 var TabItem = forwardRef25(
   ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
     const selectedValue = useTabsValue();
-    const { setSelectedItemMeasurements } = useSelectedItemMeasurements();
+    const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef11(null);
     const combinedRef = mergeRefs([buttonRef, forwardedRef]);
     useEffect9(() => {
@@ -11917,7 +11914,6 @@ 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)`
@@ -11926,29 +11922,12 @@ var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
   }
 `;
 var SelectedItemIndicator2 = () => {
-  const { selectedItemMeasurements } = useSelectedItemMeasurements();
+  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   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: {
-        width: selectedItemIndicatorStyle.width,
-        transform: selectedItemIndicatorStyle.transform,
-        height: selectedItemIndicatorStyle.height
-      }
-    }
-  );
+  return /* @__PURE__ */ jsx262(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
 };
 
 // src/components/Tabs/Tabs.tsx
@@ -11995,7 +11974,7 @@ var Tabs = forwardRef26(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemMeasurementsProvider, { children: [
+        children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs42(SelectedItemStyleProvider, { children: [
           /* @__PURE__ */ jsxs42(
             TabList,
             {