@wistia/ui 0.10.17 → 0.10.18

package/dist/index.d.mts

@@ -1907,7 +1907,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
     /**
      * The type of the input
      */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+    type?: 'email' | 'multiline' | 'number' | 'password' | 'phone' | 'search' | 'text' | 'url';
 };
 /**
  * Capture user input with a text field. Should be used within a [Form]() and [FormField]().
@@ -1944,7 +1944,7 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     /**
      * The type of the input
      */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+    type?: "email" | "multiline" | "number" | "password" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
 type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
@@ -3036,6 +3036,10 @@ declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponen
 
 type SwitchSizeType = 'lg' | 'md' | 'sm';
 type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'size'> & {
+    /**
+     * The alignment of the switch relative to the label
+     */
+    align?: 'left' | 'right';
     /**
      * Indicates the state of the switch
      */
@@ -3082,6 +3086,10 @@ type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
     hideLabel?: boolean;
 };
 declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "size" | "hideLabel"> & {
+    /**
+     * The alignment of the switch relative to the label
+     */
+    align?: "left" | "right";
     /**
      * Indicates the state of the switch
      */
@@ -3491,4 +3499,28 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, FilterMenu, FilterMenuItem, 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, Slider, type SliderProps, 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, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type InputPasswordProps = Omit<InputProps, 'leftIcon' | 'monospace' | 'rightIcon' | 'type'> & {
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the visibility state changes
+     */
+    onVisibilityToggle?: (isVisible: boolean) => void;
+};
+/**
+ * A password input component with a toggle button to show or hide the password text.
+ */
+declare const InputPassword: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "monospace" | "leftIcon" | "rightIcon"> & {
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the visibility state changes
+     */
+    onVisibilityToggle?: (isVisible: boolean) => void;
+} & react.RefAttributes<HTMLInputElement>>;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, FilterMenu, FilterMenuItem, 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, InputPassword, type InputPasswordProps, 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, Slider, type SliderProps, 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, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1907,7 +1907,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
     /**
      * The type of the input
      */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+    type?: 'email' | 'multiline' | 'number' | 'password' | 'phone' | 'search' | 'text' | 'url';
 };
 /**
  * Capture user input with a text field. Should be used within a [Form]() and [FormField]().
@@ -1944,7 +1944,7 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     /**
      * The type of the input
      */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+    type?: "email" | "multiline" | "number" | "password" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
 type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
@@ -3036,6 +3036,10 @@ declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponen
 
 type SwitchSizeType = 'lg' | 'md' | 'sm';
 type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label' | 'size'> & {
+    /**
+     * The alignment of the switch relative to the label
+     */
+    align?: 'left' | 'right';
     /**
      * Indicates the state of the switch
      */
@@ -3082,6 +3086,10 @@ type SwitchProps = Omit<ComponentPropsWithoutRef<'input'>, 'hideLabel' | 'label'
     hideLabel?: boolean;
 };
 declare const Switch: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "label" | "size" | "hideLabel"> & {
+    /**
+     * The alignment of the switch relative to the label
+     */
+    align?: "left" | "right";
     /**
      * Indicates the state of the switch
      */
@@ -3491,4 +3499,28 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, FilterMenu, FilterMenuItem, 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, Slider, type SliderProps, 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, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type InputPasswordProps = Omit<InputProps, 'leftIcon' | 'monospace' | 'rightIcon' | 'type'> & {
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the visibility state changes
+     */
+    onVisibilityToggle?: (isVisible: boolean) => void;
+};
+/**
+ * A password input component with a toggle button to show or hide the password text.
+ */
+declare const InputPassword: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "monospace" | "leftIcon" | "rightIcon"> & {
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the visibility state changes
+     */
+    onVisibilityToggle?: (isVisible: boolean) => void;
+} & react.RefAttributes<HTMLInputElement>>;
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, 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, 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, FilterMenu, FilterMenuItem, 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, InputPassword, type InputPasswordProps, 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, Slider, type SliderProps, 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, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.17
+ * @license @wistia/ui v0.10.18
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8834,10 +8834,12 @@ var StyledFormControlLabel = styled23.label`
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
   line-height: var(--wui-typography-label-3-line-height);
+  justify-content: ${({ $align }) => $align === "left" ? "flex-start" : "space-between"};
 
   ${({ $disabled }) => $disabled && disabledStyle2}
 `;
 var FormControlLabel = ({
+  align = "left",
   label,
   description,
   disabled = false,
@@ -8853,15 +8855,17 @@ var FormControlLabel = ({
     label,
     /* @__PURE__ */ jsx213(FormControlLabelDescription, { children: description })
   ] });
+  const slot = isNotNil15(controlSlot) ? controlSlot : null;
   return /* @__PURE__ */ jsxs15(
     StyledFormControlLabel,
     {
+      $align: align,
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        isNotNil15(controlSlot) ? controlSlot : null,
-        labelContent
+        align === "left" ? slot : labelContent,
+        align === "left" ? labelContent : slot
       ]
     }
   );
@@ -13337,6 +13341,7 @@ var StyledHiddenSwitchInput = styled67.input`
 `;
 var Switch = forwardRef28(
   ({
+    align = "left",
     checked,
     disabled = false,
     id,
@@ -13371,6 +13376,7 @@ var Switch = forwardRef28(
       /* @__PURE__ */ jsx266(
         FormControlLabel,
         {
+          align,
           controlSlot: /* @__PURE__ */ jsx266(
             StyledSwitchInput,
             {
@@ -14389,6 +14395,53 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx281("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/InputPassword/InputPassword.tsx
+import styled82 from "styled-components";
+import { forwardRef as forwardRef31, useState as useState20 } from "react";
+import { isFunction as isFunction4 } from "@wistia/type-guards";
+import { jsx as jsx282 } from "react/jsx-runtime";
+var StyledIconButton = styled82(IconButton)`
+  /* override size for icon button since prop gets changed by Input */
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
+
+  /* override input padding variable since it is used for Input Icon positioning */
+  --wui-input-horizontal-padding: 4px;
+`;
+var InputPassword = forwardRef31(
+  ({ onVisibilityToggle, disabled = false, ...props }, ref) => {
+    const [isVisible, setIsVisible] = useState20(false);
+    const handleClick = () => {
+      const newVisibility = !isVisible;
+      setIsVisible(newVisibility);
+      if (isFunction4(onVisibilityToggle)) {
+        onVisibilityToggle(newVisibility);
+      }
+    };
+    return /* @__PURE__ */ jsx282(
+      Input,
+      {
+        ...props,
+        ref,
+        disabled,
+        rightIcon: /* @__PURE__ */ jsx282(
+          StyledIconButton,
+          {
+            disabled,
+            label: isVisible ? "Hide password" : "Show password",
+            onClick: handleClick,
+            tabIndex: disabled ? -1 : 0,
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx282(Icon, { type: isVisible ? "preview" : "hide" })
+          }
+        ),
+        type: isVisible ? "text" : "password"
+      }
+    );
+  }
+);
+InputPassword.displayName = "InputPassword";
 export {
   ActionButton,
   Avatar,
@@ -14434,6 +14487,7 @@ export {
   ImageDimensionsValidator,
   Input,
   InputClickToCopy,
+  InputPassword,
   KeyboardShortcut,
   Label,
   Link,