@wistia/ui 0.20.6 → 0.20.8-beta.3bce6a42.ad5dd25

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/
 import { Color } from 'culori/fn';
 import * as Ariakit from '@ariakit/react';
 import * as styled_components from 'styled-components';
+import { Schema } from 'yup';
 import * as _radix_ui_react_dropdown_menu from '@radix-ui/react-dropdown-menu';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
@@ -479,7 +480,7 @@ type ActionButtonProps = {
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
-    hoverColorScheme?: ColorSchemeTypes;
+    hoverColorScheme?: ColorSchemeTypes | undefined;
     /**
      * Changes the secondary icon for different use cases
      */
@@ -512,7 +513,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
-    hoverColorScheme?: ColorSchemeTypes;
+    hoverColorScheme?: ColorSchemeTypes | undefined;
     /**
      * Changes the secondary icon for different use cases
      */
@@ -541,7 +542,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
     /**
      * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
      */
-    hoverColorScheme?: ColorSchemeTypes;
+    hoverColorScheme?: ColorSchemeTypes | undefined;
     /**
      * Changes the secondary icon for different use cases
      */
@@ -1924,12 +1925,16 @@ type DividerProps = ComponentPropsWithoutRef<'div'> & {
      * Orientation of the divider.
      */
     orientation?: ResponsiveObject<'horizontal' | 'vertical'> | 'horizontal' | 'vertical';
+    /**
+     * The amount of space to inset the divider.
+     */
+    inset?: ResponsiveObject<Spacings> | Spacings;
 };
 /**
- * A line used to visually separate content; note that dividers have no margin/spacing on their own.
+ * A line used to visually separate content; note that dividers have no external margin/spacing on their own.
  */
 declare const Divider: {
-    ({ orientation, ...props }: DividerProps): JSX.Element;
+    ({ orientation, inset, ...props }: DividerProps): JSX.Element;
     displayName: string;
 };
 
@@ -2409,6 +2414,8 @@ type FormErrorSummaryProps = {
 };
 declare const FormErrorSummary: ({ description }: FormErrorSummaryProps) => react_jsx_runtime.JSX.Element | null;
 
+declare const validateWithYup: <T>(schema: Schema<T>) => (data: object) => {};
+
 type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * This should be a single child that is a valid form field (or can pretend to be one).
@@ -3839,6 +3846,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;
 };
 /**
@@ -4398,4 +4413,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, 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 };
+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, 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 };

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*
- * @license @wistia/ui v0.20.6
+ * @license @wistia/ui v0.20.8-beta.3bce6a42.ad5dd25
  *
- * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
+ * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
@@ -8780,7 +8780,7 @@ var getGapStyle = (gap) => {
         return `${key}-gap: var(--wui-${value});`;
       }).join("");
     }
-    return `gap: var(--wui-${gap.toString()});`;
+    return `gap: var(--wui-${gap});`;
   }
   return void 0;
 };
@@ -9877,7 +9877,7 @@ var StyledCenter = styled22.div`
   margin-left: auto;
   margin-right: auto;
   max-width: ${({ $maxWidth }) => $maxWidth};
-  ${({ $gutterWidth }) => $gutterWidth && `padding: 0 var(--wui-${$gutterWidth.toString()});`}
+  ${({ $gutterWidth }) => $gutterWidth && `padding: 0 var(--wui-${$gutterWidth});`}
   ${({ $intrinsic }) => $intrinsic && `
     display: flex;
     flex-direction: column;
@@ -10042,12 +10042,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 +10066,8 @@ var StackComponent = forwardRef10(
         $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
+        $paddingX: responsivePaddingX,
+        $paddingY: responsivePaddingY,
         as: renderAs ?? DEFAULT_ELEMENT4,
         ...props
       }
@@ -10610,7 +10623,7 @@ var convertToRgbRaw = useMode(modeRgb);
 var convertToHsvRaw = useMode(modeHsv);
 useMode(modeLrgb);
 var convertToHsv = (color) => {
-  let result;
+  let result = void 0;
   if (typeof color === "string") {
     const rgb = parseHex(color);
     if (rgb == null) {
@@ -10625,7 +10638,7 @@ var convertToHsv = (color) => {
   return result;
 };
 var convertToRgb = (color) => {
-  let result;
+  let result = void 0;
   if (typeof color === "string") {
     const rgb = parseHex(color);
     if (rgb == null) {
@@ -14617,12 +14630,16 @@ var horizontalBorderCss = css33`
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
+  margin-left: var(--wui-divider-inset);
+  margin-right: var(--wui-divider-inset);
 `;
 var verticalBorderCss = css33`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
+  margin-top: var(--wui-divider-inset);
+  margin-bottom: var(--wui-divider-inset);
 `;
 var DividerComponent = styled63.div`
   ${({ $orientation }) => {
@@ -14634,12 +14651,21 @@ var DividerComponent = styled63.div`
       return horizontalBorderCss;
   }
 }}
+  --wui-divider-inset: ${({ $inset }) => `var(--wui-${$inset})`};
+
+  align-self: stretch;
 `;
-var Divider = ({ orientation = "horizontal", ...props }) => {
+var Divider = ({
+  orientation = "horizontal",
+  inset = "space-00",
+  ...props
+}) => {
   const responsiveOrientation = useResponsiveProp(orientation);
+  const responsiveInset = useResponsiveProp(inset);
   return /* @__PURE__ */ jsx296(
     DividerComponent,
     {
+      $inset: responsiveInset,
       $orientation: responsiveOrientation,
       "aria-orientation": responsiveOrientation,
       role: "separator",
@@ -15362,10 +15388,34 @@ var FormErrorSummary = ({ description }) => {
   ] });
 };
 
+// src/components/Form/validateWithYup.tsx
+import { ValidationError } from "yup";
+import { isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
+var validateWithYup = (schema) => {
+  return (data) => {
+    const parsed = schema.cast(data, { assert: false });
+    try {
+      schema.validateSync(parsed, { abortEarly: false });
+      return {};
+    } catch (err) {
+      if (err instanceof ValidationError) {
+        return err.inner.reduce((acc, error) => {
+          if (isNotUndefined12(error.path)) {
+            acc[error.path] = error.message;
+            return acc;
+          }
+          return acc;
+        }, {});
+      }
+      throw err;
+    }
+  };
+};
+
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
 import { styled as styled68, css as css36 } from "styled-components";
-import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined13, isUndefined as isUndefined4 } from "@wistia/type-guards";
 import { jsx as jsx304, jsxs as jsxs47 } from "react/jsx-runtime";
 var inlineErrorStyles = css36`
   grid-template-rows: 1fr auto;
@@ -15500,7 +15550,7 @@ var FormField = ({
     style: { gridArea: "input" },
     ...props
   };
-  if (isUndefined4(value) && isNotUndefined12(defaultValue)) {
+  if (isUndefined4(value) && isNotUndefined13(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
@@ -15509,10 +15559,10 @@ var FormField = ({
   if (isNotNil28(checkboxGroup)) {
     const computedName = isNotNil28(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if (isNotUndefined12(props.onChange)) {
+      if (isNotUndefined13(props.onChange)) {
         props.onChange(event);
       }
-      if (isNotUndefined12(checkboxGroup.onChange)) {
+      if (isNotUndefined13(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -16694,7 +16744,7 @@ var ProgressBar = ({
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
-import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
 import { styled as styled84, css as css42 } from "styled-components";
 import { jsx as jsx321, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -16805,7 +16855,7 @@ var Radio = forwardRef27(
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = isNotUndefined13(value) && isNotUndefined13(contextValue) ? contextValue === value : checked;
+    const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ jsxs56(
       StyledRadioWrapper,
       {
@@ -16852,7 +16902,7 @@ import { forwardRef as forwardRef29 } from "react";
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
 import { styled as styled85, css as css43 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
 import { jsx as jsx322, jsxs as jsxs57 } from "react/jsx-runtime";
 var checkedStyles = css43`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -16981,7 +17031,7 @@ var RadioCardRoot = forwardRef28(
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = isNotUndefined14(value) && isNotUndefined14(contextValue) ? contextValue === value : checked;
+    const isChecked = isNotUndefined15(value) && isNotUndefined15(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ jsxs57(
       StyledCard2,
       {
@@ -19224,6 +19274,7 @@ export {
   useOnClickOutside,
   usePreviousValue,
   useToast,
-  useWindowSize
+  useWindowSize,
+  validateWithYup
 };
 //# sourceMappingURL=index.js.map