@wistia/ui 1.4.0-beta.b9e4b6ed.276500a → 1.4.0-beta.eeb233b3.35b023f

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v1.4.0-beta.b9e4b6ed.276500a
+ * @license @wistia/ui v1.4.0-beta.eeb233b3.35b023f
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -1426,7 +1426,7 @@ const useFocusTrap = (active = true, options = {}) => {
 			setTimeout(() => {
 				if (node.ownerDocument) processNode(node);
 				if (!node.ownerDocument) console.warn("[useFocusTrap]: The focus trap is not part of the DOM yet, so it is unable to correctly set focus. Make sure to render the ref node.", node);
-			});
+			}, 0);
 			ref.current = node;
 		} else ref.current = null;
 	}, [
@@ -5347,6 +5347,9 @@ const IconComponent = ({ useInlineStyles = true, invertColor, colorScheme = "inh
 	});
 };
 IconComponent.displayName = "Icon_UI";
+/**
+* An `Icon` displays a visual symbol to represent an action, concept, or entity, rendering the SVG registered for its `type` at a fixed or responsive `size`.
+*/
 const Icon = IconComponent;
 //#endregion
 //#region src/components/Link/Link.tsx
@@ -5928,6 +5931,9 @@ const StyledImage = styled.img`
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
 `;
+/**
+* An `Image` displays a photo or graphic inline, with controls for border radius, object fit, and how it fills its container. It lazy-loads by default via the native `loading` attribute.
+*/
 const Image = ({ src, alt, borderRadius, fill: fillContainer = false, fit: objFit, loading = "lazy", position: objPosition, onLoad, onError, ...props }) => /* @__PURE__ */ jsx(StyledImage, {
 	$borderRadius: borderRadius,
 	$fillContainer: fillContainer,
@@ -7285,6 +7291,9 @@ const StyledHiddenCheckboxInput = styled.input`
   ${visuallyHiddenStyle}
   position: relative;
 `;
+/**
+* A `Checkbox` lets users select one or more options from a set, or toggle a single option on or off. It supports both standalone controlled usage and grouped usage via `CheckboxGroup`.
+*/
 const Checkbox = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-checkbox-${generatedId}`;
@@ -8550,6 +8559,9 @@ const StyledSwitchThumb = styled.div`
 const StyledHiddenSwitchInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Switch` allows users to toggle between two mutually exclusive states, such as on and off.
+*/
 const Switch = ({ align = "left", checked, disabled = false, id, label, description, name, onChange, size = "md", value, required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-switch-${generatedId}`;
@@ -9766,6 +9778,9 @@ const defaultDisplayValues = (values, onRemove) => {
 		onClickRemoveLabel: `Remove ${selectedValue}`
 	}, selectedValue));
 };
+/**
+* A `Combobox` is a searchable single- or multi-select input. Users can filter options by typing, and selected values in multi-select mode are displayed as removable `Tag` components.
+*/
 const Combobox = ({ placeholder, value, onChange, searchValue, onSearchValueChange, displayValues = defaultDisplayValues, children, flipPopover = true, fullWidth = true }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isPending, startTransition] = useTransition();
@@ -9991,13 +10006,13 @@ const ContextMenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
   outline: none;
 `;
+const NOOP$4 = () => null;
 /**
 * The ContextMenu is an extended implementation of the [Menu](/components/Menu) component that allows for right-click context menus.
 * It can be used in two ways:
 * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
 * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
 */
-const NOOP$4 = () => null;
 const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = NOOP$4, compact = false }) => {
 	const [isRightClicked, setIsRightClicked] = useState(false);
 	const [menuPosition, setMenuPosition] = useState(position ?? {
@@ -12506,6 +12521,9 @@ const GridComponent = ({ ref, children, columns = "auto", minChildWidth = "auto"
 		children
 	});
 };
+/**
+* A `Grid` arranges its children in a CSS grid layout with configurable `columns`, `gap`, and responsive breakpoint support.
+*/
 const Grid = makePolymorphic(GridComponent);
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.tsx
@@ -13514,6 +13532,9 @@ const keyToString = (key) => {
 		default: return key.toUpperCase();
 	}
 };
+/**
+* A `KeyboardShortcut` displays one or more keyboard keys with an optional label, rendering each key in a styled `kbd` element. Platform-specific keys like `Cmd`/`Meta` are rendered with the appropriate symbol for the detected operating system.
+*/
 const KeyboardShortcut = ({ label, keyboardKeys, fullWidth = false, ...otherProps }) => /* @__PURE__ */ jsxs(StyledKeyboardShortcut, {
 	$fullWidth: fullWidth,
 	...otherProps,
@@ -13634,6 +13655,9 @@ const renderListFromArray = (listItems, variant, otherProps) => {
 		return /* @__PURE__ */ jsx(ListItem, { children: item }, key);
 	}), variant, otherProps);
 };
+/**
+* A `List` groups related items in bulleted, ordered, or separator-based layouts, composed with `ListItem` children or a flat/nested `items` array.
+*/
 const List = ({ children, items, variant, ...otherProps }) => {
 	const listVariant = variant ?? "bullets";
 	if (isNotNil(children)) {
@@ -14668,150 +14692,6 @@ const ProgressBar = ({ progress, max = 100, children, labelLeft, labelRight, col
 };
 ProgressBar.displayName = "ProgressBar_UI";
 //#endregion
-//#region src/components/Prompt/Prompt.tsx
-const PromptContainer = styled.div`
-  ${inputCss};
-
-  background-color: var(--wui-input-color-bg);
-  border-radius: var(--wui-input-multiline-border-radius);
-  display: flex;
-  flex-direction: column;
-  gap: var(--wui-space-01);
-  outline: 1px solid var(--wui-input-color-border);
-  outline-offset: -1px;
-  padding: var(--wui-space-02);
-
-  &:has(textarea:focus) {
-    outline-width: 2px;
-    outline-color: var(--wui-input-color-border-focus);
-    outline-offset: -2px;
-  }
-
-  &:has(textarea:disabled) {
-    background-color: var(--wui-input-color-bg-disabled);
-    outline-color: var(--wui-input-color-border-disabled);
-  }
-`;
-const PromptTextarea = styled.textarea`
-  background: transparent;
-  border: none;
-  color: var(--wui-input-color-text);
-  font-family: inherit;
-  font-size: var(--wui-input-font-size);
-  font-weight: var(--wui-input-font-weight);
-  line-height: var(--wui-typography-body-3-line-height);
-  outline: none;
-  padding: var(--wui-space-01);
-  resize: none;
-
-  &::placeholder {
-    color: var(--wui-input-placeholder);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-`;
-const PromptToolbar = styled.div`
-  align-items: center;
-  display: flex;
-  gap: var(--wui-space-01);
-`;
-const PromptToolbarEnd = styled.div`
-  align-items: center;
-  display: flex;
-  gap: var(--wui-space-01);
-  margin-left: auto;
-`;
-/**
-* A multi-line prompt box for conversational AI features: a textarea with a
-* toolbar for adding context, picking a model, voice input, and submitting.
-*/
-const Prompt = ({ addContextLabel = "Add context", defaultModel, defaultValue = "", disabled = false, label = "Prompt", model, modelMenuLabel = "Model", models, onAddContext, onChange, onModelChange, onSubmit, onVoice, placeholder = "Ask anything…", ref, rows = 3, sendLabel = "Send", submitOnCmdEnter = true, toolbarExtras, value, voiceLabel = "Voice input", ...otherProps }) => {
-	const [internalValue, setInternalValue] = useState(defaultValue);
-	const [internalModel, setInternalModel] = useState(defaultModel ?? models?.[0]);
-	const isValueControlled = isNotUndefined(value);
-	const currentValue = isValueControlled ? value : internalValue;
-	const isModelControlled = isNotUndefined(model);
-	const currentModel = isModelControlled ? model : internalModel ?? models?.[0];
-	const canSubmit = !disabled && currentValue.trim().length > 0;
-	const handleChange = (event) => {
-		if (!isValueControlled) setInternalValue(event.target.value);
-		onChange?.(event.target.value);
-	};
-	const handleModelChange = (nextModel) => {
-		if (!isModelControlled) setInternalModel(nextModel);
-		onModelChange?.(nextModel);
-	};
-	const handleSubmit = () => {
-		if (!canSubmit) return;
-		onSubmit?.(currentValue, { model: currentModel });
-	};
-	const handleKeyDown = (event) => {
-		if (event.repeat) return;
-		if (submitOnCmdEnter && event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
-			event.preventDefault();
-			handleSubmit();
-		}
-	};
-	return /* @__PURE__ */ jsxs(PromptContainer, {
-		ref,
-		"data-wistia-ui-prompt": true,
-		...otherProps,
-		children: [/* @__PURE__ */ jsx(PromptTextarea, {
-			"aria-label": label,
-			disabled,
-			onChange: handleChange,
-			onKeyDown: handleKeyDown,
-			placeholder,
-			rows,
-			value: currentValue
-		}), /* @__PURE__ */ jsxs(PromptToolbar, { children: [
-			isNotUndefined(onAddContext) && /* @__PURE__ */ jsx(IconButton, {
-				disabled,
-				label: addContextLabel,
-				onClick: onAddContext,
-				variant: "ghost",
-				children: /* @__PURE__ */ jsx(Icon, { type: "plus" })
-			}),
-			isNotUndefined(models) && models.length > 0 && isNotUndefined(currentModel) && /* @__PURE__ */ jsx(Menu, {
-				disabled,
-				label: currentModel,
-				triggerProps: {
-					"aria-label": `${modelMenuLabel}: ${currentModel}`,
-					size: "sm",
-					variant: "ghost"
-				},
-				children: /* @__PURE__ */ jsx(MenuRadioGroup, {
-					onValueChange: handleModelChange,
-					value: currentModel,
-					children: models.map((modelOption) => /* @__PURE__ */ jsx(RadioMenuItem, {
-						value: modelOption,
-						children: modelOption
-					}, modelOption))
-				})
-			}),
-			/* @__PURE__ */ jsxs(PromptToolbarEnd, { children: [
-				toolbarExtras,
-				isNotUndefined(onVoice) && /* @__PURE__ */ jsx(IconButton, {
-					disabled,
-					label: voiceLabel,
-					onClick: onVoice,
-					variant: "ghost",
-					children: /* @__PURE__ */ jsx(Icon, { type: "mic" })
-				}),
-				/* @__PURE__ */ jsx(IconButton, {
-					disabled: !canSubmit,
-					label: sendLabel,
-					onClick: handleSubmit,
-					variant: "solid",
-					children: /* @__PURE__ */ jsx(Icon, { type: "send" })
-				})
-			] })
-		] })]
-	});
-};
-//#endregion
 //#region src/components/Radio/Radio.tsx
 const sizeSmall = css`
   --wui-radio-size: 14px;
@@ -14893,6 +14773,9 @@ const StyledRadioInput = styled.div`
 const StyledHiddenRadioInput = styled.input`
   ${visuallyHiddenStyle}
 `;
+/**
+* A `Radio` lets users select exactly one option from a visible set of choices.
+*/
 const Radio = ({ checked, disabled = false, id, label, description, name, onChange, size = "md", value = "false", required = false, hideLabel = false, ref, ...props }) => {
 	const generatedId = useId();
 	const computedId = isNonEmptyString(id) ? id : `wistia-ui-radio-${generatedId}`;
@@ -15176,6 +15059,9 @@ const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 //#endregion
 //#region src/components/RadioCard/RadioCard.tsx
+/**
+* A `RadioCard` lets users select exactly one option from a set of visually rich, card-based choices.
+*/
 const RadioCard = ({ icon, label, description, showIndicator, isGated, children, ref, ...rootProps }) => {
 	return /* @__PURE__ */ jsx(RadioCardRoot, {
 		ref,
@@ -15796,6 +15682,9 @@ const StyledSidebar = styled.nav`
   overflow: hidden;
   border-right: 1px solid var(--wui-color-border);
 `;
+/**
+* The `Sidebar` provides vertical navigation with a composable header, scrollable content area, and footer.
+*/
 const Sidebar = ({ children, ref, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledSidebar, {
 		ref,
@@ -16039,6 +15928,9 @@ const StyledSliderThumb = styled(Slider$1.Thumb)`
   }
 `;
 const DEFAULT_INITIAL_VALUE = [0];
+/**
+* A `Slider` lets users select a value or range from a continuous scale via a draggable thumb.
+*/
 const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = DEFAULT_INITIAL_VALUE, max = 100, min = 0, onChange, onValueCommitted, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
 	if (!(isNonEmptyString(ariaLabel) || isNonEmptyString(ariaLabelledby))) throw new Error("UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop.");
 	const values = value ?? initialValue;
@@ -16266,6 +16158,9 @@ const useTabsValue = () => {
 };
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
+/**
+* The `Tabs` component lets users switch between panels of content. It is composed from the `TabsList`, `TabsTrigger`, and `TabsContent` subcomponents.
+*/
 const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }) => {
 	const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue);
 	const isControlled = isNotNil(valueProp);
@@ -16829,6 +16724,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Prompt, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, ContrastEnforcerSwitch, ContrastIndicator, ContrastPreview, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Dimmer, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map