@wistia/ui 0.26.1 → 0.26.2-beta.9d6c1958.2a8d7b2

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.1
+ * @license @wistia/ui v0.26.2-beta.9d6c1958.2a8d7b2
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -1956,6 +1956,22 @@ const solidButtonVariant = css`
   --button-color-text: var(--wui-color-text-on-fill);
   --button-color-icon: var(--wui-color-icon-on-fill);
 `;
+const disabledButtonVariant = css`
+  --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
+  --button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
+  --button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
+  --button-color-text: var(--wui-color-text-disabled);
+  --button-color-icon: var(--wui-color-icon-disabled);
+  --button-color-border: var(--wui-color-border-disabled);
+`;
+const pressedButtonVariant = css`
+  --button-color-bg: var(--wui-color-bg-surface-selected);
+  --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
+  --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
+  --button-color-text: var(--wui-color-text-selected);
+  --button-color-icon: var(--wui-color-icon-selected);
+  --button-color-border: var(--wui-color-border-selected);
+`;
 const buttonBaseStyles = css`
   border-radius: var(--wui-border-radius-rounded);
   font-family: var(--button-typography-family);
@@ -2009,25 +2025,11 @@ const buttonBaseStyles = css`
   }
 
   &[aria-disabled='true'] {
-    ${css`
-  --button-color-bg: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
-  --button-color-bg-hover: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
-  --button-color-bg-active: var(--button-color-bg-override, var(--wui-color-bg-surface-disabled));
-  --button-color-text: var(--wui-color-text-disabled);
-  --button-color-icon: var(--wui-color-icon-disabled);
-  --button-color-border: var(--wui-color-border-disabled);
-`};
+    ${disabledButtonVariant};
   }
 
   &[aria-pressed='true'] {
-    ${css`
-  --button-color-bg: var(--wui-color-bg-surface-selected);
-  --button-color-bg-hover: var(--wui-color-bg-surface-selected-hover);
-  --button-color-bg-active: var(--wui-color-bg-surface-selected-active);
-  --button-color-text: var(--wui-color-text-selected);
-  --button-color-icon: var(--wui-color-icon-selected);
-  --button-color-border: var(--wui-color-border-selected);
-`};
+    ${pressedButtonVariant};
   }
 `;
 const buttonVariantsStyles = {
@@ -13423,10 +13425,32 @@ const getControlProps = (isOpen, onOpenChange) => {
 //#endregion
 //#region src/components/Popover/PopoverArrow.tsx
 const StyledArrowSvg = styled.svg`
-  /* Override inline top positioning and rotate the arrow so the circle sits near the trigger and the stalk extends down toward the popup. */
-  top: 0 !important;
-  transform: rotate(180deg);
-  transform-origin: center 0;
+  pointer-events: none;
+
+  /* override inline positioning and rotate the arrow so the circle sits near the trigger and the stalk extends down toward the popup. */
+  &[data-side='top'] {
+    top: 100% !important;
+  }
+
+  &[data-side='bottom'] {
+    top: 0 !important;
+    transform: rotate(180deg);
+    transform-origin: center 0;
+  }
+
+  &[data-side='left'] {
+    right: 0;
+    left: auto;
+    transform: translateX(52px) rotate(-90deg);
+    transform-origin: center center;
+  }
+
+  &[data-side='right'] {
+    left: 0;
+    right: auto;
+    transform: translateX(-52px) rotate(90deg);
+    transform-origin: center center;
+  }
 `;
 const StyledPath = styled.path`
   fill: var(--wui-color-border-secondary);
@@ -14743,6 +14767,213 @@ const SelectOptionGroup = ({ children, label, ...props }) => {
 	});
 };
 //#endregion
+//#region src/components/Sidebar/Sidebar.tsx
+const StyledSidebar = styled.nav`
+  --wui-sidebar-padding-block: var(--wui-space-05);
+  --wui-sidebar-padding-inline: var(--wui-space-03);
+  --wui-sidebar-item-gap: var(--wui-space-02);
+  --wui-sidebar-item-inset: var(--wui-space-03);
+  --wui-sidebar-group-gap: var(--wui-space-05);
+  --wui-sidebar-content-top-padding: var(--wui-space-06);
+  --wui-sidebar-content-bottom-padding: var(--wui-space-06);
+
+  &:has([data-wui-sidebar-header]) {
+    --wui-sidebar-content-top-padding: calc(
+      var(--wui-sidebar-group-gap) - var(--wui-sidebar-padding-block)
+    );
+  }
+
+  &:has([data-wui-sidebar-footer]) {
+    --wui-sidebar-content-bottom-padding: calc(
+      var(--wui-sidebar-group-gap) - var(--wui-sidebar-padding-block)
+    );
+  }
+
+  display: flex;
+  flex-direction: column;
+  width: 260px;
+  background: var(--wui-color-bg-surface);
+  overflow: hidden;
+  border-right: 1px solid var(--wui-color-border);
+`;
+const Sidebar = forwardRef(({ children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(StyledSidebar, {
+		ref,
+		...props,
+		children
+	});
+});
+Sidebar.displayName = "Sidebar_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarHeader.tsx
+const StyledSidebarHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-block: var(--wui-sidebar-padding-block);
+  padding-inline: var(--wui-sidebar-padding-inline);
+`;
+const SidebarHeader = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledSidebarHeader, {
+		"data-wui-sidebar-header": true,
+		children
+	});
+};
+SidebarHeader.displayName = "SidebarHeader_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarFooter.tsx
+const StyledSidebarFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-block: var(--wui-sidebar-padding-block);
+  padding-inline: var(--wui-sidebar-padding-inline);
+`;
+const SidebarFooter = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledSidebarFooter, {
+		"data-wui-sidebar-footer": true,
+		children
+	});
+};
+SidebarFooter.displayName = "SidebarFooter_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarTitle.tsx
+const StyledSidebarTitle = styled(Heading)`
+  padding-left: var(--wui-sidebar-item-inset);
+`;
+const SidebarTitle = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledSidebarTitle, {
+		variant: "heading3",
+		children
+	});
+};
+SidebarTitle.displayName = "SidebarTitle_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarContent.tsx
+const StyledSidebarContent = styled(ScrollArea)`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  gap: var(--wui-sidebar-group-gap);
+  padding-top: var(--wui-sidebar-content-top-padding);
+  padding-bottom: var(--wui-sidebar-content-bottom-padding);
+  padding-inline: var(--wui-sidebar-padding-inline);
+`;
+const SidebarContent = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledSidebarContent, {
+		"data-wui-sidebar-content": true,
+		children
+	});
+};
+SidebarContent.displayName = "SidebarContent_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarGroupLabel.tsx
+const StyledSidebarGroupLabel = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  padding-inline: var(--wui-sidebar-item-inset);
+  width: 100%;
+  justify-content: space-between;
+  gap: var(--wui-space-02);
+`;
+const SidebarGroupLabel = ({ children, rightSlot, leftSlot }) => {
+	return /* @__PURE__ */ jsxs(StyledSidebarGroupLabel, {
+		"data-wui-sidebar-group-label": true,
+		children: [
+			leftSlot,
+			/* @__PURE__ */ jsx(Text, {
+				variant: "label3",
+				prominence: "secondary",
+				style: {
+					flex: 1,
+					fontWeight: "var(--wui-typography-weight-label-bold)"
+				},
+				children
+			}),
+			rightSlot
+		]
+	});
+};
+SidebarGroupLabel.displayName = "SidebarGroupLabel_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarGroup.tsx
+const StyledSidebarGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-sidebar-item-gap);
+`;
+const StyledSidebarGroupList = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-sidebar-item-gap);
+`;
+const isLabelChild = (child) => isValidElement(child) && child.type === SidebarGroupLabel;
+const SidebarGroup = ({ children }) => {
+	const childArray = Children.toArray(children);
+	const labels = childArray.filter(isLabelChild);
+	const items = childArray.filter((child) => isValidElement(child) && !isLabelChild(child));
+	return /* @__PURE__ */ jsxs(StyledSidebarGroup, {
+		"data-wui-sidebar-group": true,
+		children: [labels, items.length > 0 && /* @__PURE__ */ jsx(StyledSidebarGroupList, { children: items.map((child, index) => {
+			const key = isValidElement(child) && child.key !== null ? child.key : index;
+			return /* @__PURE__ */ jsx("li", { children: child }, key);
+		}) })]
+	});
+};
+SidebarGroup.displayName = "SidebarGroup_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarButton.tsx
+const StyledSidebarButton = styled(Button)`
+  --button-label-gap: var(--wui-space-02);
+  --button-typography-size: var(--wui-typography-label-2-size);
+  --button-typography-line-height: var(--wui-typography-label-2-line-height);
+  --button-typography-weight: var(--wui-typography-body-2-weight);
+  --button-label-padding-horizontal: var(--wui-space-00);
+
+  padding-inline: var(--wui-sidebar-item-inset);
+  text-align: left;
+  width: 100%;
+
+  &[aria-current] {
+    ${pressedButtonVariant};
+  }
+`;
+const SidebarButton = forwardRef(({ selected = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(StyledSidebarButton, {
+		ref,
+		"aria-current": selected ? "page" : void 0,
+		variant: "ghost",
+		"data-wui-sidebar-button": true,
+		...props
+	});
+});
+SidebarButton.displayName = "SidebarButton_UI";
+//#endregion
+//#region src/components/Sidebar/SidebarSearchInput.tsx
+const StyledSidebarSearchInputContainer = styled.div`
+  padding-inline: var(--wui-space-01);
+`;
+const SidebarSearchInput = forwardRef(({ id, label = "Search navigation", ...props }, ref) => {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	return /* @__PURE__ */ jsxs(StyledSidebarSearchInputContainer, { children: [/* @__PURE__ */ jsx(Label, {
+		htmlFor: inputId,
+		screenReaderOnly: true,
+		children: label
+	}), /* @__PURE__ */ jsx(Input, {
+		ref,
+		id: inputId,
+		type: "search",
+		...props
+	})] });
+});
+SidebarSearchInput.displayName = "SidebarSearchInput_UI";
+//#endregion
 //#region src/components/Slider/Slider.tsx
 const SliderContainer = styled.div`
   width: 100%;
@@ -15734,6 +15965,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, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, 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, 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, iconSizeMap, isKeyboardKey, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, 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, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, 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, iconSizeMap, isKeyboardKey, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, 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