@wistia/ui 0.6.0 → 0.6.1

package/dist/index.d.mts

@@ -1418,7 +1418,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
     type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
 };
 /**
- * Component description goes here
+ * For displaying photos and graphics
  */
 declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
     /**
@@ -2450,4 +2450,46 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => 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, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
+type ImageProps = ComponentPropsWithoutRef<'img'> & {
+    /**
+     * Accessible text to apply to the image
+     */
+    alt: string;
+    /**
+     * Border radius to apply to the image
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     *
+     * *Note: this will override height/width attributes*
+     */
+    fill?: boolean | 'horizontal' | 'vertical';
+    /**
+     * Specifies how the image's intrinsic size (ie. its natural size) should
+     * be adjusted to fit within its container
+     */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Indicates how the browser should load the image; `eager`loads the image immediately,
+     * `lazy` defers loading the image until it reaches a calculated distance from the viewport.
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Specifies how the image will align itself in its container
+     */
+    position?: string;
+    /**
+     * URL to image file
+     */
+    src: string;
+};
+declare const Image: {
+    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, ...otherProps }: ImageProps): JSX.Element;
+    displayName: string;
+};
+
+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, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -1418,7 +1418,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
     type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
 };
 /**
- * Component description goes here
+ * For displaying photos and graphics
  */
 declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
     /**
@@ -2450,4 +2450,46 @@ type SelectOptionGroupProps = {
 };
 declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => 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, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };
+type BorderRadius = 'border-radius-01' | 'border-radius-02' | 'border-radius-03' | 'border-radius-04' | 'border-radius-05' | 'border-radius-rounded';
+
+type ImageProps = ComponentPropsWithoutRef<'img'> & {
+    /**
+     * Accessible text to apply to the image
+     */
+    alt: string;
+    /**
+     * Border radius to apply to the image
+     */
+    borderRadius?: BorderRadius;
+    /**
+     * Specifies whether the width and/or height should fill the container
+     *
+     * *Note: this will override height/width attributes*
+     */
+    fill?: boolean | 'horizontal' | 'vertical';
+    /**
+     * Specifies how the image's intrinsic size (ie. its natural size) should
+     * be adjusted to fit within its container
+     */
+    fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+    /**
+     * Indicates how the browser should load the image; `eager`loads the image immediately,
+     * `lazy` defers loading the image until it reaches a calculated distance from the viewport.
+     * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * Specifies how the image will align itself in its container
+     */
+    position?: string;
+    /**
+     * URL to image file
+     */
+    src: string;
+};
+declare const Image: {
+    ({ src, alt, borderRadius, fill: fillContainer, fit: objFit, loading, position: objPosition, ...otherProps }: ImageProps): JSX.Element;
+    displayName: string;
+};
+
+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, Checkbox, CheckboxGroup, CheckboxMenuItem, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.0
+ * @license @wistia/ui v0.6.1
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -10452,6 +10452,55 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
     children
   ] });
 };
+
+// src/components/Image/Image.tsx
+import styled59 from "styled-components";
+import { isNotNil as isNotNil24 } from "@wistia/type-guards";
+import { jsx as jsx225 } from "react/jsx-runtime";
+var getFillStyle2 = (fillContainer) => {
+  if (fillContainer === "horizontal") {
+    return "width: 100%;";
+  }
+  if (fillContainer === "vertical") {
+    return "height: 100%;";
+  }
+  if (fillContainer === true) {
+    return `
+      width: 100%;
+      height: 100%;
+    `;
+  }
+  return void 0;
+};
+var StyledImage = styled59.img`
+  border-radius: ${({ $borderRadius }) => isNotNil24($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+  ${({ $fillContainer }) => getFillStyle2($fillContainer)};
+  object-fit: ${({ $objFit }) => $objFit};
+  object-position: ${({ $objPosition }) => $objPosition};
+`;
+var Image = ({
+  src,
+  alt,
+  borderRadius,
+  fill: fillContainer = false,
+  fit: objFit,
+  loading = "lazy",
+  position: objPosition,
+  ...otherProps
+}) => /* @__PURE__ */ jsx225(
+  StyledImage,
+  {
+    $borderRadius: borderRadius,
+    $fillContainer: fillContainer,
+    $objFit: objFit,
+    $objPosition: objPosition,
+    alt,
+    loading,
+    src,
+    ...otherProps
+  }
+);
+Image.displayName = "Image";
 export {
   ActionButton,
   Avatar,
@@ -10482,6 +10531,7 @@ export {
   Heading,
   Icon,
   IconButton,
+  Image,
   Input,
   Label,
   Link,