@wistia/ui 0.20.10 → 0.20.12-beta.194021cb.7ecdb1f

package/dist/index.d.ts

@@ -21,6 +21,15 @@ type UIProviderProps = {
 };
 declare const UIProvider: ({ children }: UIProviderProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Converts a boolean string value `value` into a boolean. If passed
+ * something other than 'true' or 'false' will coerce value to boolean.
+ *
+ * @param {*} value - a value of any type
+ * @returns {boolean} - that value as a boolean
+ */
+declare const coerceToBoolean: (value: unknown) => boolean;
+
 /**
  * Copies a string to user's clipboard for easy pasting in another location
  *
@@ -228,6 +237,10 @@ type BaseProps$2 = {
      * Disables the link
      */
     disabled?: boolean;
+    /**
+     * When true, the link will inherit its color from the parent element instead of using the default link color
+     */
+    inheritColor?: boolean;
     /**
      * Icon to display on the left side of the link. Must be an instance of [Icon](?path=/docs/components-icon--docs)
      */
@@ -372,6 +385,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -403,6 +417,7 @@ declare const Button: react.ForwardRefExoticComponent<(Omit<BaseButtonProps & re
     children: ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: ReactNode | undefined;
     rightIcon?: ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2924,6 +2939,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -2965,6 +2981,7 @@ declare const MenuItem: react.ForwardRefExoticComponent<(Omit<DropdownMenuItemPr
     children: react.ReactNode;
     colorScheme?: ColorSchemeTypes;
     disabled?: boolean;
+    inheritColor?: boolean;
     leftIcon?: react.ReactNode | undefined;
     rightIcon?: react.ReactNode | undefined;
     type?: LinkTypes | undefined;
@@ -3637,6 +3654,10 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
      * `SegmentedControlItem`s that will be rendered in grouping
      */
     children?: ReactNode;
+    /**
+     * Determines the color scheme for the SegmentedControl and its children.
+     */
+    colorScheme?: ColorSchemeTypes;
     /**
      * Set the entire `SegmentedControl` to be disabled
      */
@@ -3868,6 +3889,14 @@ type StackProps = {
      * @type 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch' | ResponsiveObject<'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
     alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
+    /**
+     * Padding to apply to the stack container. Use `x` for horizontal (left/right) padding and `y` for vertical (top/bottom) padding.
+     * Each value can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     */
+    padding?: {
+        x?: ResponsiveObject<Spacings> | Spacings;
+        y?: ResponsiveObject<Spacings> | Spacings;
+    };
     renderAs?: ElementType;
 };
 /**
@@ -4427,4 +4456,4 @@ declare const CustomizableThemeWrapper: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Markdown, type MarkdownProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, type BannerProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Markdown, type MarkdownProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.20.10
+ * @license @wistia/ui v0.20.12-beta.194021cb.7ecdb1f
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -2001,6 +2001,14 @@ var UIProvider = ({ children }) => {
   ] }) }) });
 };
 
+// src/helpers/coerceToBoolean/coerceToBoolean.ts
+var coerceToBoolean = (value) => {
+  if (value === "true" || value === "false") {
+    return value === "true";
+  }
+  return Boolean(value);
+};
+
 // src/helpers/copyToClipboard/copyToClipboard.ts
 import { isNil } from "@wistia/type-guards";
 var copyToClipboard = async (textToCopy) => {
@@ -8034,18 +8042,21 @@ var StyledLink = styled5.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: inherit;
-  color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
+  color: ${({ $disabled, $inheritColor }) => {
+  if ($disabled) return "var(--wui-color-text-disabled)";
+  if ($inheritColor) return "inherit";
+  return "var(--wui-color-text-link)";
+}};
   text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
-  display: inline-flex;
-  align-items: baseline;
-  gap: var(--wui-space-01);
+  display: ${({ $hasIcons }) => $hasIcons ? "inline-flex" : "inline"};
+  align-items: ${({ $hasIcons }) => $hasIcons ? "baseline" : "initial"};
+  gap: ${({ $hasIcons }) => $hasIcons ? "var(--wui-space-01)" : "0"};
 
   &:hover {
     text-decoration: ${({ $underline }) => $underline === "hover" || $underline === "always" ? "underline" : "none"};
   }
 
   button& {
-    display: inline;
     line-height: inherit;
     vertical-align: baseline;
   }
@@ -8066,6 +8077,7 @@ var Link = forwardRef(
     disabled = false,
     colorScheme = "inherit",
     underline = "none",
+    inheritColor = false,
     leftIcon,
     rightIcon,
     "aria-disabled": ariaDisabled,
@@ -8075,6 +8087,7 @@ var Link = forwardRef(
     const inRouterContext = useInRouterContext();
     const to = generateHref(props.href, type, disabled);
     const shouldUseReactRouterLink = inRouterContext && type !== "external" && !to?.startsWith("http");
+    const hasIcons = isNotNil5(leftIcon) || isNotNil5(rightIcon);
     const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
@@ -8103,6 +8116,8 @@ var Link = forwardRef(
       $colorScheme: colorScheme,
       $disabled: disabled,
       $underline: underline,
+      $inheritColor: inheritColor,
+      $hasIcons: hasIcons,
       onClick: handleClick,
       "aria-disabled": ariaDisabled ?? (disabled ? "true" : void 0)
     };
@@ -10042,12 +10057,23 @@ var StyledStack = styled26.div`
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
   align-items: ${({ $alignItems }) => $alignItems};
+  ${({ $paddingX }) => $paddingX && `padding-left: var(--wui-${$paddingX}); padding-right: var(--wui-${$paddingX});`}
+  ${({ $paddingY }) => $paddingY && `padding-top: var(--wui-${$paddingY}); padding-bottom: var(--wui-${$paddingY});`}
 `;
 var StackComponent = forwardRef10(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+  ({
+    renderAs,
+    direction = "vertical",
+    gap = "space-02",
+    alignItems = "stretch",
+    padding,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
     const responsiveAlignItems = useResponsiveProp(alignItems);
+    const responsivePaddingX = useResponsiveProp(padding?.x);
+    const responsivePaddingY = useResponsiveProp(padding?.y);
     return /* @__PURE__ */ jsx240(
       StyledStack,
       {
@@ -10055,6 +10081,8 @@ var StackComponent = forwardRef10(
         $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
+        $paddingX: responsivePaddingX,
+        $paddingY: responsivePaddingY,
         as: renderAs ?? DEFAULT_ELEMENT4,
         ...props
       }
@@ -17553,6 +17581,9 @@ var SelectedItemIndicator = () => {
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx330, jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlStyles = css46`
+  ${({ $colorScheme }) => $colorScheme && getColorScheme($colorScheme)};
+  --wui-color-text-selected: var(--wui-color-text-link);
+
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -17569,6 +17600,7 @@ var StyledSegmentedControl = styled92(ToggleGroupRoot2)`
 var SegmentedControl = forwardRef32(
   ({
     children,
+    colorScheme = "inherit",
     disabled = false,
     fullWidth = false,
     selectedValue,
@@ -17582,6 +17614,7 @@ var SegmentedControl = forwardRef32(
       StyledSegmentedControl,
       {
         ref,
+        $colorScheme: colorScheme,
         $fullWidth: fullWidth,
         disabled,
         loop: true,
@@ -19388,6 +19421,7 @@ export {
   ValueSwatch,
   WistiaLogo,
   calculateContrast,
+  coerceToBoolean,
   colorSchemeOptions,
   copyToClipboard,
   dateTime,