@wistia/ui 0.10.3 → 0.10.4-beta.36362cd1.2b96fcb

package/dist/index.d.mts

@@ -550,6 +550,7 @@ declare const Avatar: {
     displayName: string;
 };
 
+type BadgeVariants = 'default' | 'outline';
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
@@ -563,6 +564,10 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
      * The text to display in the `Badge`
      */
     label: ReactNode;
+    /**
+     * The variant of the `Badge`
+     */
+    variant?: BadgeVariants;
 };
 /**
  * A `Badge` is a compact label, with optional icon, to convey status or context.
@@ -580,6 +585,10 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * The text to display in the `Badge`
      */
     label: ReactNode;
+    /**
+     * The variant of the `Badge`
+     */
+    variant?: BadgeVariants;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type UnknownRecord = Record<string, unknown>;
@@ -3303,6 +3312,11 @@ declare const List: {
     displayName: string;
 };
 
+type ComboboxOptionProps = {
+    value: string;
+    children: ReactNode;
+};
+declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
 type ComboboxProps = {
     /**
      * If true, the combox will fill the width of its parent
@@ -3325,7 +3339,7 @@ type ComboboxProps = {
      */
     searchValue: string;
     /**
-     * vent that fires when a value is selected
+     * Callback that fires when a value is selected
      */
     onChange: (value: string[]) => void;
     /**
@@ -3335,4 +3349,4 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -550,6 +550,7 @@ declare const Avatar: {
     displayName: string;
 };
 
+type BadgeVariants = 'default' | 'outline';
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
@@ -563,6 +564,10 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
      * The text to display in the `Badge`
      */
     label: ReactNode;
+    /**
+     * The variant of the `Badge`
+     */
+    variant?: BadgeVariants;
 };
 /**
  * A `Badge` is a compact label, with optional icon, to convey status or context.
@@ -580,6 +585,10 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * The text to display in the `Badge`
      */
     label: ReactNode;
+    /**
+     * The variant of the `Badge`
+     */
+    variant?: BadgeVariants;
 } & react.RefAttributes<HTMLDivElement>>;
 
 type UnknownRecord = Record<string, unknown>;
@@ -3303,6 +3312,11 @@ declare const List: {
     displayName: string;
 };
 
+type ComboboxOptionProps = {
+    value: string;
+    children: ReactNode;
+};
+declare const ComboboxOption: ({ value, children }: ComboboxOptionProps) => react_jsx_runtime.JSX.Element;
 type ComboboxProps = {
     /**
      * If true, the combox will fill the width of its parent
@@ -3325,7 +3339,7 @@ type ComboboxProps = {
      */
     searchValue: string;
     /**
-     * vent that fires when a value is selected
+     * Callback that fires when a value is selected
      */
     onChange: (value: string[]) => void;
     /**
@@ -3335,4 +3349,4 @@ type ComboboxProps = {
 };
 declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchValueChange, children, fullWidth, }: ComboboxProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, 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, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.3
+ * @license @wistia/ui v0.10.4-beta.36362cd1.2b96fcb
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7691,6 +7691,7 @@ var StyledBadge = styled10.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
+  box-shadow: ${({ $variant }) => $variant === "outline" ? "inset 0 0 0 1px var(--wui-color-border)" : "none"};
   border-radius: var(--wui-border-radius-rounded);
   color: var(--wui-color-text);
   display: inline-flex;
@@ -7698,17 +7699,21 @@ var StyledBadge = styled10.div`
   font-weight: var(--wui-typography-label-4-weight);
   gap: var(--wui-space-01);
   justify-content: center;
+  line-height: var(--wui-typography-label-3-line-height);
   padding: var(--wui-space-01) var(--wui-space-02);
   width: fit-content;
 
-  /* Icon component size */
-  svg {
-    height: 12px;
-    width: 12px;
+  /* Icon component size and color */
+  && {
+    svg {
+      color: var(--wui-color-icon);
+      height: 12px;
+      width: 12px;
+    }
   }
 `;
 var Badge = forwardRef4(
-  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
+  ({ colorScheme = "inherit", label, icon, variant = "default", ...props }, ref) => {
     const hasIcon = isNotNil9(icon);
     return /* @__PURE__ */ jsxs11(
       StyledBadge,
@@ -7717,6 +7722,7 @@ var Badge = forwardRef4(
         ...props,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
+        $variant: variant,
         children: [
           hasIcon ? icon : null,
           /* @__PURE__ */ jsx200("span", { children: label })
@@ -9773,7 +9779,6 @@ var StyledForm = styled34.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
 var FormContext = createContext4({
   values: {},
@@ -9854,6 +9859,7 @@ var FormComponent = ({
         ...props,
         ref,
         $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
         as: StyledForm,
         gap: "space-05",
         id,
@@ -13730,6 +13736,17 @@ var NoResults = styled78.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
+var ComboboxOption = ({ value, children }) => {
+  return /* @__PURE__ */ jsx277(
+    ComboboxItem2,
+    {
+      className: "combobox-item",
+      focusOnHover: true,
+      value,
+      children
+    }
+  );
+};
 var extractOptions = (children) => {
   const options = {};
   Children6.forEach(children, (child) => {
@@ -13864,6 +13881,7 @@ export {
   CollapsibleTrigger,
   ColorSchemeWrapper,
   Combobox2 as Combobox,
+  ComboboxOption,
   DataCard,
   DataCardTrend,
   DataCards,