@borisj74/bv-ds 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -3843,7 +3843,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement11, throwOnDirectAccess) {
+    module.exports = function(isValidElement12, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -3971,7 +3971,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement11(propValue)) {
+          if (!isValidElement12(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -4159,7 +4159,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement11(propValue)) {
+            if (propValue === null || isValidElement12(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -31418,33 +31418,6 @@ function MetricItem({
     }
   );
 }
-function ModalActions({
-  type = "horizontal-fill",
-  divider = true,
-  leading,
-  children,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
-    divider && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: clsx_default(
-          "flex px-3xl pb-3xl pt-3xl",
-          type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
-          type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
-          type === "right-aligned" && "items-center gap-lg"
-        ),
-        children: type === "right-aligned" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-lg", children })
-        ] }) : children
-      }
-    )
-  ] });
-}
 var FeaturedIcon = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
 var XClose2 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function ModalHeader({
@@ -31454,6 +31427,7 @@ function ModalHeader({
   type = "left",
   divider = true,
   onClose,
+  titleId,
   className,
   ...rest
 }) {
@@ -31488,7 +31462,7 @@ function ModalHeader({
                     isCenter && "items-center text-center"
                   ),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-full text-md font-semibold text-text-primary", children: title }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { id: titleId, className: "w-full text-md font-semibold text-text-primary", children: title }),
                     description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "w-full text-sm text-text-tertiary", children: description })
                   ]
                 }
@@ -31511,6 +31485,99 @@ function ModalHeader({
     }
   );
 }
+var sizeMaxWidth = {
+  sm: "max-w-[400px]",
+  md: "max-w-[560px]",
+  lg: "max-w-[720px]",
+  xl: "max-w-[960px]"
+};
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  children,
+  className,
+  ...rest
+}) {
+  const panelRef = React28.useRef(null);
+  const previousFocusRef = React28.useRef(null);
+  const titleId = React28.useId();
+  React28.useEffect(() => {
+    if (!open) return;
+    previousFocusRef.current = document.activeElement;
+    panelRef.current?.focus();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  const handlePanelClick = (e) => e.stopPropagation();
+  let hasLabelledHeader = false;
+  const labelledChildren = React28.Children.map(children, (child) => {
+    if (React28.isValidElement(child) && child.type === ModalHeader) {
+      hasLabelledHeader = true;
+      return React28.cloneElement(child, { titleId });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: onClose,
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay/70 backdrop-blur-sm",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": hasLabelledHeader ? titleId : void 0,
+          tabIndex: -1,
+          onClick: handlePanelClick,
+          className: clsx_default(
+            "mx-4 flex w-full flex-col overflow-hidden rounded-2xl bg-bg-primary shadow-xl outline-none sm:mx-0",
+            sizeMaxWidth[size],
+            className
+          ),
+          ...rest,
+          children: labelledChildren
+        }
+      )
+    }
+  );
+}
+function ModalActions({
+  type = "horizontal-fill",
+  divider = true,
+  leading,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
+    divider && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: clsx_default(
+          "flex px-3xl pb-3xl pt-3xl",
+          type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
+          type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
+          type === "right-aligned" && "items-center gap-lg"
+        ),
+        children: type === "right-aligned" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-lg", children })
+        ] }) : children
+      }
+    )
+  ] });
+}
 function CheckboxBox({ selected, big }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -32924,6 +32991,59 @@ function SlideOutMenuHeader({
     }
   );
 }
+var sizeWidth = {
+  sm: "sm:w-[360px]",
+  md: "sm:w-[480px]",
+  lg: "sm:w-[600px]"
+};
+function SlideoutMenu({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  children,
+  className,
+  ...rest
+}) {
+  React28.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  const handlePanelClick = (e) => e.stopPropagation();
+  const closedTransform = side === "right" ? "translate-x-full" : "-translate-x-full";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      onClick: onClose,
+      "aria-hidden": !open,
+      className: clsx_default(
+        "fixed inset-0 z-50 bg-bg-overlay/70 backdrop-blur-sm transition-opacity duration-300",
+        open ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: handlePanelClick,
+          className: clsx_default(
+            "fixed bottom-0 top-0 flex w-full flex-col bg-bg-primary shadow-xl transition-transform duration-300 ease-in-out",
+            side === "right" ? "right-0" : "left-0",
+            sizeWidth[size],
+            open ? "translate-x-0" : closedTransform,
+            className
+          ),
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
 var clampStep = (v, min3, max3, step) => {
   const snapped = Math.round((v - min3) / step) * step + min3;
   return Math.min(max3, Math.max(min3, snapped));
@@ -33821,6 +33941,7 @@ exports.MessageActionPanel = MessageActionPanel;
 exports.MessageReaction = MessageReaction;
 exports.MessageStatusIcon = MessageStatusIcon;
 exports.MetricItem = MetricItem;
+exports.Modal = Modal;
 exports.ModalActions = ModalActions;
 exports.ModalHeader = ModalHeader;
 exports.ModernBadge = ModernBadge;
@@ -33856,6 +33977,7 @@ exports.Select = Select;
 exports.SelectMenuItem = SelectMenuItem;
 exports.SidebarNavigation = SidebarNavigation;
 exports.SlideOutMenuHeader = SlideOutMenuHeader;
+exports.SlideoutMenu = SlideoutMenu;
 exports.Slider = Slider;
 exports.SocialButton = SocialButton;
 exports.StatusIcon = StatusIcon;

package/dist/index.d.cts

@@ -1589,6 +1589,28 @@ interface MetricItemProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function MetricItem({ label, value, change, changeText, icon, chart, action, onMenuClick, className, ...rest }: MetricItemProps): react.JSX.Element;
 
+type ModalSize = "sm" | "md" | "lg" | "xl";
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Controls visibility — renders nothing when false. */
+    open: boolean;
+    /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+    onClose: () => void;
+    /** Panel max-width: sm=400 / md=560 / lg=720 / xl=960 px. Full width on mobile. */
+    size?: ModalSize;
+    /** Modal contents — compose `ModalHeader`, a body, and `ModalActions` here. */
+    children: ReactNode;
+}
+/**
+ * Modal shell — fixed backdrop + centred panel. Layout/overlay only: it does NOT
+ * render a header or footer, those are composed as children (`ModalHeader` /
+ * `ModalActions`). Backdrop click-outside and Escape both call `onClose`; clicks
+ * inside the panel are stopped from bubbling. On open, focus moves into the panel
+ * and is restored to the previously-focused element on close. If a direct
+ * `ModalHeader` child is present its title is wired to `aria-labelledby`.
+ * Renders `null` while `open` is false.
+ */
+declare function Modal({ open, onClose, size, children, className, ...rest }: ModalProps): react.JSX.Element | null;
+
 type ModalActionsType = "horizontal-fill" | "vertical-fill" | "right-aligned";
 interface ModalActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -1628,13 +1650,15 @@ interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     divider?: boolean;
     /** Renders an x-close button top-right when provided. */
     onClose?: () => void;
+    /** id placed on the title element so a parent `Modal` can wire `aria-labelledby`. */
+    titleId?: string;
 }
 /**
  * Modal header — featured-icon badge + title + supporting text, with an optional
  * x-close button and bottom divider. `type` controls alignment (left / centred /
  * icon-beside-text). The `icon` is a slot; consumer supplies the glyph.
  */
-declare function ModalHeader({ title, description, icon, type, divider, onClose, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+declare function ModalHeader({ title, description, icon, type, divider, onClose, titleId, className, ...rest }: ModalHeaderProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -2297,6 +2321,29 @@ interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  */
 declare function SlideOutMenuHeader({ icon, title, supportingText, tabs, onClose, className, ...rest }: SlideOutMenuHeaderProps): react.JSX.Element;
 
+type SlideoutMenuSide = "right" | "left";
+type SlideoutMenuSize = "sm" | "md" | "lg";
+interface SlideoutMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Controls visibility. The panel stays mounted to animate the slide in/out. */
+    open: boolean;
+    /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+    onClose: () => void;
+    /** Edge the panel docks to and slides in from. */
+    side?: SlideoutMenuSide;
+    /** Panel width: sm=360 / md=480 / lg=600 px. Full width on mobile. */
+    size?: SlideoutMenuSize;
+    /** Drawer contents — compose `SlideOutMenuHeader`, a body, and a footer here. */
+    children: ReactNode;
+}
+/**
+ * Slide-out / drawer shell — fixed backdrop + edge-docked panel that slides in
+ * from `side` via a `translate-x` transition. Layout/overlay only: the header is
+ * composed as a child (`SlideOutMenuHeader`), not reimplemented. Backdrop
+ * click-outside and Escape both call `onClose`. The panel stays mounted (toggled
+ * via transform + the backdrop's pointer-events) so both enter and exit animate.
+ */
+declare function SlideoutMenu({ open, onClose, side, size, children, className, ...rest }: SlideoutMenuProps): react.JSX.Element;
+
 type SliderLabel = "none" | "bottom" | "topFloating";
 interface SliderProps {
     min?: number;
@@ -2712,4 +2759,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };

package/dist/index.d.ts

@@ -1589,6 +1589,28 @@ interface MetricItemProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function MetricItem({ label, value, change, changeText, icon, chart, action, onMenuClick, className, ...rest }: MetricItemProps): react.JSX.Element;
 
+type ModalSize = "sm" | "md" | "lg" | "xl";
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Controls visibility — renders nothing when false. */
+    open: boolean;
+    /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+    onClose: () => void;
+    /** Panel max-width: sm=400 / md=560 / lg=720 / xl=960 px. Full width on mobile. */
+    size?: ModalSize;
+    /** Modal contents — compose `ModalHeader`, a body, and `ModalActions` here. */
+    children: ReactNode;
+}
+/**
+ * Modal shell — fixed backdrop + centred panel. Layout/overlay only: it does NOT
+ * render a header or footer, those are composed as children (`ModalHeader` /
+ * `ModalActions`). Backdrop click-outside and Escape both call `onClose`; clicks
+ * inside the panel are stopped from bubbling. On open, focus moves into the panel
+ * and is restored to the previously-focused element on close. If a direct
+ * `ModalHeader` child is present its title is wired to `aria-labelledby`.
+ * Renders `null` while `open` is false.
+ */
+declare function Modal({ open, onClose, size, children, className, ...rest }: ModalProps): react.JSX.Element | null;
+
 type ModalActionsType = "horizontal-fill" | "vertical-fill" | "right-aligned";
 interface ModalActionsProps extends HTMLAttributes<HTMLDivElement> {
     /**
@@ -1628,13 +1650,15 @@ interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
     divider?: boolean;
     /** Renders an x-close button top-right when provided. */
     onClose?: () => void;
+    /** id placed on the title element so a parent `Modal` can wire `aria-labelledby`. */
+    titleId?: string;
 }
 /**
  * Modal header — featured-icon badge + title + supporting text, with an optional
  * x-close button and bottom divider. `type` controls alignment (left / centred /
  * icon-beside-text). The `icon` is a slot; consumer supplies the glyph.
  */
-declare function ModalHeader({ title, description, icon, type, divider, onClose, className, ...rest }: ModalHeaderProps): react.JSX.Element;
+declare function ModalHeader({ title, description, icon, type, divider, onClose, titleId, className, ...rest }: ModalHeaderProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -2297,6 +2321,29 @@ interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  */
 declare function SlideOutMenuHeader({ icon, title, supportingText, tabs, onClose, className, ...rest }: SlideOutMenuHeaderProps): react.JSX.Element;
 
+type SlideoutMenuSide = "right" | "left";
+type SlideoutMenuSize = "sm" | "md" | "lg";
+interface SlideoutMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Controls visibility. The panel stays mounted to animate the slide in/out. */
+    open: boolean;
+    /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+    onClose: () => void;
+    /** Edge the panel docks to and slides in from. */
+    side?: SlideoutMenuSide;
+    /** Panel width: sm=360 / md=480 / lg=600 px. Full width on mobile. */
+    size?: SlideoutMenuSize;
+    /** Drawer contents — compose `SlideOutMenuHeader`, a body, and a footer here. */
+    children: ReactNode;
+}
+/**
+ * Slide-out / drawer shell — fixed backdrop + edge-docked panel that slides in
+ * from `side` via a `translate-x` transition. Layout/overlay only: the header is
+ * composed as a child (`SlideOutMenuHeader`), not reimplemented. Backdrop
+ * click-outside and Escape both call `onClose`. The panel stays mounted (toggled
+ * via transform + the backdrop's pointer-events) so both enter and exit animate.
+ */
+declare function SlideoutMenu({ open, onClose, side, size, children, className, ...rest }: SlideoutMenuProps): react.JSX.Element;
+
 type SliderLabel = "none" | "bottom" | "topFloating";
 interface SliderProps {
     min?: number;
@@ -2712,4 +2759,4 @@ declare namespace index {
   export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
 }
 
-export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };
+export { ActivityFeed, type ActivityFeedDivider, type ActivityFeedProps, ActivityGauge, type ActivityGaugeLegend, type ActivityGaugeProps, type ActivityGaugeSeries, type ActivityGaugeSize, AdvancedFilterBar, type AdvancedFilterBarProps, Alert, type AlertAction, type AlertColor, type AlertProps, type AlertSize, Avatar, AvatarAddButton, type AvatarAddButtonProps, type AvatarAddButtonSize, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarGroupSize, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarLabelGroupSize, AvatarProfilePhoto, type AvatarProfilePhotoProps, type AvatarProfilePhotoSize, type AvatarProps, type AvatarSize, BadgeCloseX, type BadgeCloseXProps, type BadgeCloseXShape, type BadgeColor, type BadgeCommonProps, BadgeGroup, type BadgeGroupBadgePosition, type BadgeGroupProps, type BadgeGroupSize, type BadgeGroupType, type BadgeSize, BreadcrumbButtonBase, type BreadcrumbButtonBaseProps, type BreadcrumbButtonType, Breadcrumbs, type BreadcrumbsDivider, type BreadcrumbsProps, Button, ButtonCloseX, type ButtonCloseXProps, type ButtonCloseXSize, ButtonDestructive, type ButtonDestructiveHierarchy, type ButtonDestructiveProps, type ButtonDestructiveSize, ButtonGroup, type ButtonGroupProps, ButtonGroupSegment, type ButtonGroupSegmentProps, type ButtonGroupSegmentSize, type ButtonProps, ButtonUtility, type ButtonUtilityProps, type ButtonUtilitySize, type ButtonUtilityVariant, CalendarCell, CalendarCellDayWeekView, type CalendarCellDayWeekViewProps, type CalendarCellProps, CalendarColumnHeader, type CalendarColumnHeaderOrientation, type CalendarColumnHeaderProps, CalendarDateIcon, type CalendarDateIconProps, CalendarEvent, type CalendarEventColor, CalendarEventDayWeekView, type CalendarEventDayWeekViewProps, type CalendarEventProps, CalendarHeader, type CalendarHeaderProps, CalendarRowLabel, type CalendarRowLabelProps, CalendarTimemarker, type CalendarTimemarkerAlign, type CalendarTimemarkerProps, type CalendarView, CalendarViewDropdown, type CalendarViewDropdownProps, type CalendarViewOption, CardHeader, type CardHeaderProps, CarouselArrow, type CarouselArrowDirection, type CarouselArrowProps, type CarouselArrowSize, CarouselImage, type CarouselImageProps, Change, type ChangeProps, type ChangeTrend, type ChangeType, ChartLegend, type ChartLegendItem, type ChartLegendPosition, type ChartLegendProps, ChartMarker, type ChartMarkerLine, type ChartMarkerProps, ChartMini, type ChartMiniDatum, type ChartMiniProps, type ChartMiniTrend, type ChartSeries, type ChartStyle, ChartTooltip, type ChartTooltipPayloadItem, type ChartTooltipProps, type CheckControlSize, Checkbox, type CheckboxProps, CodeSnippet, type CodeSnippetProps, CodeSnippetTabs, type CodeSnippetTabsProps, ColorBadge, type ColorBadgeProps, CommandBar, CommandBarFooter, type CommandBarFooterHint, type CommandBarFooterProps, CommandBarMenuSection, type CommandBarMenuSectionProps, CommandBarNavigationIcon, type CommandBarNavigationIconProps, type CommandBarProps, CommandDropdownMenuItem, type CommandDropdownMenuItemProps, CommandInput, type CommandInputProps, CommandShortcut, type CommandShortcutProps, ContentDivider, type ContentDividerProps, type ContentDividerStyle, type ContentDividerType, ContentFeatureText, type ContentFeatureTextProps, type ContentFeatureTextSize, ContentHeading, type ContentHeadingProps, type ContentHeadingSize, ContentParagraph, type ContentParagraphProps, type ContentParagraphSize, ContentQuote, type ContentQuoteAlign, type ContentQuoteProps, type ContentQuoteSize, ContentRule, type ContentRuleProps, type ContentRuleSize, ContextMenu, type ContextMenuProps, type ContextMenuState, DatePickerCell, type DatePickerCellProps, type DatePickerCellType, DatePickerListItem, type DatePickerListItemProps, DatePickerMenu, type DatePickerMenuProps, DropdownAccountListItem, type DropdownAccountListItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, type DropdownMenuFooterType, DropdownMenuHeader, type DropdownMenuHeaderProps, type DropdownMenuHeaderType, DropdownMenuItemInsetIcon, type DropdownMenuItemInsetIconProps, type DropdownMenuItemInsetIconType, DropdownMenuListItem, type DropdownMenuListItemProps, EmptyState, type EmptyStateProps, type EmptyStateSize, FeedItemBase, type FeedItemBaseProps, type FeedItemSize, FileUpload, FileUploadBase, type FileUploadBaseProps, FileUploadItemBase, type FileUploadItemBaseProps, type FileUploadItemIconType, type FileUploadItemStatus, type FileUploadItemType, type FileUploadProps, FilterBar, type FilterBarProps, FilterTabs, type FilterTabsProps, FiltersDropdownMenu, type FiltersDropdownMenuProps, FiltersSlideoutMenu, type FiltersSlideoutMenuProps, type HeaderNavItem, HeaderNavigation, type HeaderNavigationProps, type HeaderNavigationType, HelpIcon, type HelpIconProps, InputField, type InputFieldProps, type InputFieldSize, type InputFieldType, LeadingInputField, type LeadingInputFieldProps, LineAndBarChart, type LineAndBarChartProps, LinkMessage, type LinkMessageProps, type LinkMessageType, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorSize, type LoadingIndicatorStyle, MediaMessage, type MediaMessageProps, type MediaMessageType, MegaInputFieldBase, type MegaInputFieldBaseProps, type MegaInputFieldBaseSize, Message, MessageAction, MessageActionButton, type MessageActionButtonProps, MessageActionPanel, type MessageActionPanelProps, type MessageActionProps, type MessageActionType, type MessageBubbleTone, type MessageProps, MessageReaction, type MessageReactionProps, type MessageStatus, MessageStatusIcon, type MessageStatusIconProps, type MessageType, MetricItem, type MetricItemProps, Modal, ModalActions, type ModalActionsProps, type ModalActionsType, ModalHeader, type ModalHeaderProps, type ModalHeaderType, type ModalProps, type ModalSize, ModernBadge, type ModernBadgeProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavAccountCard, NavAccountCardMenuItem, type NavAccountCardMenuItemProps, type NavAccountCardMenuItemType, type NavAccountCardProps, type NavAccountCardVariant, NavButton, type NavButtonProps, NavFeaturedCard, type NavFeaturedCardProps, NavItemBase, type NavItemBaseProps, NavItemDropdownBase, type NavItemDropdownBaseProps, NavMenuButton, type NavMenuButtonProps, Notification, type NotificationProps, type NotificationVariant, NumberInput, type NumberInputLayout, type NumberInputProps, PageHeader, type PageHeaderProps, type PageHeaderStyle, Pagination, PaginationButtonGroupBase, type PaginationButtonGroupBaseProps, type PaginationButtonGroupType, PaginationCards, type PaginationCardsProps, type PaginationCardsVariant, PaginationDotGroup, type PaginationDotGroupProps, PaginationDotIndicator, type PaginationDotIndicatorProps, type PaginationDotSize, type PaginationDotVariant, PaginationNumberBase, type PaginationNumberBaseProps, type PaginationNumberShape, type PaginationProps, type PaginationType, PieChart, type PieChartProps, type PieChartSize, type PieSlice, PillBadge, type PillBadgeProps, ProgressBar, type ProgressBarLabel, type ProgressBarProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, RadarChart, type RadarChartProps, type RadarLegendPosition, Radio, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupItemSize, type RadioGroupItemType, type RadioGroupProps, type RadioProps, SectionFooter, type SectionFooterProps, type SectionFooterType, SectionHeader, type SectionHeaderProps, SectionLabel, type SectionLabelProps, type SectionLabelSize, Select, SelectMenuItem, type SelectMenuItemProps, type SelectMenuItemSize, type SelectProps, type SelectSize, type SelectType, SidebarNavigation, type SidebarNavigationProps, type SidebarNavigationType, SlideOutMenuHeader, type SlideOutMenuHeaderProps, SlideoutMenu, type SlideoutMenuProps, type SlideoutMenuSide, type SlideoutMenuSize, Slider, type SliderLabel, type SliderProps, type SocialBrand, SocialButton, type SocialButtonProps, type SocialButtonSize, type SocialButtonTheme, StatusIcon, type StatusIconProps, type StatusIconType, StepBase, type StepBaseProps, StepIconBase, type StepIconBaseProps, type StepIconSize, type StepIconType, type StepOrientation, type StepStatus, TabButtonBase, type TabButtonBaseProps, type TabButtonSize, type TabButtonType, type TabItem, TableCell, type TableCellProps, type TableCellSize, TableHeaderCell, type TableHeaderCellProps, type TableHeaderCellSize, TableHeaderLabel, type TableHeaderLabelArrow, type TableHeaderLabelProps, Tabs, type TabsOrientation, type TabsProps, Tag, type TagProps, type TagSize, TagsInputField, type TagsInputFieldProps, type TagsInputVariant, TextEditorToolbar, TextEditorToolbarDivider, type TextEditorToolbarProps, TextEditorTooltip, type TextEditorTooltipProps, TextareaInputField, type TextareaInputFieldProps, Toggle, type ToggleProps, type ToggleSize, type ToggleType, Tooltip, type TooltipArrow, type TooltipProps, TrailingInputField, type TrailingInputFieldProps, type TreeNode, TreeView, TreeViewConnector, type TreeViewConnectorProps, type TreeViewConnectorSize, type TreeViewConnectorType, TreeViewItem, type TreeViewItemProps, type TreeViewItemSize, type TreeViewProps, type UseContextMenuReturn, type VerificationCodeDigits, VerificationCodeInput, type VerificationCodeInputProps, type VerificationCodeSize, index as illustrations, useContextMenu };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React28 from 'react';
-import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
+import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
 var __create = Object.create;
@@ -3822,7 +3822,7 @@ var require_factoryWithTypeCheckers = __commonJS({
     function emptyFunctionThatReturnsNull() {
       return null;
     }
-    module.exports = function(isValidElement11, throwOnDirectAccess) {
+    module.exports = function(isValidElement12, throwOnDirectAccess) {
       var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
       var FAUX_ITERATOR_SYMBOL = "@@iterator";
       function getIteratorFn(maybeIterable) {
@@ -3950,7 +3950,7 @@ var require_factoryWithTypeCheckers = __commonJS({
       function createElementTypeChecker() {
         function validate(props, propName, componentName, location, propFullName) {
           var propValue = props[propName];
-          if (!isValidElement11(propValue)) {
+          if (!isValidElement12(propValue)) {
             var propType = getPropType(propValue);
             return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
           }
@@ -4138,7 +4138,7 @@ var require_factoryWithTypeCheckers = __commonJS({
             if (Array.isArray(propValue)) {
               return propValue.every(isNode);
             }
-            if (propValue === null || isValidElement11(propValue)) {
+            if (propValue === null || isValidElement12(propValue)) {
               return true;
             }
             var iteratorFn = getIteratorFn(propValue);
@@ -31397,33 +31397,6 @@ function MetricItem({
     }
   );
 }
-function ModalActions({
-  type = "horizontal-fill",
-  divider = true,
-  leading,
-  children,
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
-    divider && /* @__PURE__ */ jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx_default(
-          "flex px-3xl pb-3xl pt-3xl",
-          type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
-          type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
-          type === "right-aligned" && "items-center gap-lg"
-        ),
-        children: type === "right-aligned" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-lg", children })
-        ] }) : children
-      }
-    )
-  ] });
-}
 var FeaturedIcon = ({ children }) => /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border-primary text-fg-secondary shadow-xs", children });
 var XClose2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "size-5", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5 5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "1.67", strokeLinecap: "round", strokeLinejoin: "round" }) });
 function ModalHeader({
@@ -31433,6 +31406,7 @@ function ModalHeader({
   type = "left",
   divider = true,
   onClose,
+  titleId,
   className,
   ...rest
 }) {
@@ -31467,7 +31441,7 @@ function ModalHeader({
                     isCenter && "items-center text-center"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx("p", { className: "w-full text-md font-semibold text-text-primary", children: title }),
+                    /* @__PURE__ */ jsx("p", { id: titleId, className: "w-full text-md font-semibold text-text-primary", children: title }),
                     description && /* @__PURE__ */ jsx("p", { className: "w-full text-sm text-text-tertiary", children: description })
                   ]
                 }
@@ -31490,6 +31464,99 @@ function ModalHeader({
     }
   );
 }
+var sizeMaxWidth = {
+  sm: "max-w-[400px]",
+  md: "max-w-[560px]",
+  lg: "max-w-[720px]",
+  xl: "max-w-[960px]"
+};
+function Modal({
+  open,
+  onClose,
+  size = "md",
+  children,
+  className,
+  ...rest
+}) {
+  const panelRef = useRef(null);
+  const previousFocusRef = useRef(null);
+  const titleId = useId();
+  useEffect(() => {
+    if (!open) return;
+    previousFocusRef.current = document.activeElement;
+    panelRef.current?.focus();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  const handlePanelClick = (e) => e.stopPropagation();
+  let hasLabelledHeader = false;
+  const labelledChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && child.type === ModalHeader) {
+      hasLabelledHeader = true;
+      return cloneElement(child, { titleId });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: onClose,
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay/70 backdrop-blur-sm",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": hasLabelledHeader ? titleId : void 0,
+          tabIndex: -1,
+          onClick: handlePanelClick,
+          className: clsx_default(
+            "mx-4 flex w-full flex-col overflow-hidden rounded-2xl bg-bg-primary shadow-xl outline-none sm:mx-0",
+            sizeMaxWidth[size],
+            className
+          ),
+          ...rest,
+          children: labelledChildren
+        }
+      )
+    }
+  );
+}
+function ModalActions({
+  type = "horizontal-fill",
+  divider = true,
+  leading,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
+    divider && /* @__PURE__ */ jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx_default(
+          "flex px-3xl pb-3xl pt-3xl",
+          type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
+          type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
+          type === "right-aligned" && "items-center gap-lg"
+        ),
+        children: type === "right-aligned" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-lg", children })
+        ] }) : children
+      }
+    )
+  ] });
+}
 function CheckboxBox({ selected, big }) {
   return /* @__PURE__ */ jsx(
     "span",
@@ -32903,6 +32970,59 @@ function SlideOutMenuHeader({
     }
   );
 }
+var sizeWidth = {
+  sm: "sm:w-[360px]",
+  md: "sm:w-[480px]",
+  lg: "sm:w-[600px]"
+};
+function SlideoutMenu({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  children,
+  className,
+  ...rest
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+  const handlePanelClick = (e) => e.stopPropagation();
+  const closedTransform = side === "right" ? "translate-x-full" : "-translate-x-full";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: onClose,
+      "aria-hidden": !open,
+      className: clsx_default(
+        "fixed inset-0 z-50 bg-bg-overlay/70 backdrop-blur-sm transition-opacity duration-300",
+        open ? "opacity-100" : "pointer-events-none opacity-0"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: handlePanelClick,
+          className: clsx_default(
+            "fixed bottom-0 top-0 flex w-full flex-col bg-bg-primary shadow-xl transition-transform duration-300 ease-in-out",
+            side === "right" ? "right-0" : "left-0",
+            sizeWidth[size],
+            open ? "translate-x-0" : closedTransform,
+            className
+          ),
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+}
 var clampStep = (v, min3, max3, step) => {
   const snapped = Math.round((v - min3) / step) * step + min3;
   return Math.min(max3, Math.max(min3, snapped));
@@ -33712,6 +33832,6 @@ object-assign/index.js:
   *)
 */
 
-export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
+export { ActivityFeed, ActivityGauge, AdvancedFilterBar, Alert, Avatar, AvatarAddButton, AvatarGroup, AvatarLabelGroup, AvatarProfilePhoto, BadgeCloseX, BadgeGroup, BreadcrumbButtonBase, Breadcrumbs, Button, ButtonCloseX, ButtonDestructive, ButtonGroup, ButtonGroupSegment, ButtonUtility, CalendarCell, CalendarCellDayWeekView, CalendarColumnHeader, CalendarDateIcon, CalendarEvent, CalendarEventDayWeekView, CalendarHeader, CalendarRowLabel, CalendarTimemarker, CalendarViewDropdown, CardHeader, CarouselArrow, CarouselImage, Change, ChartLegend, ChartMarker, ChartMini, ChartTooltip, Checkbox, CodeSnippet, CodeSnippetTabs, ColorBadge, CommandBar, CommandBarFooter, CommandBarMenuSection, CommandBarNavigationIcon, CommandDropdownMenuItem, CommandInput, CommandShortcut, ContentDivider, ContentFeatureText, ContentHeading, ContentParagraph, ContentQuote, ContentRule, ContextMenu, DatePickerCell, DatePickerListItem, DatePickerMenu, DropdownAccountListItem, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuItemInsetIcon, DropdownMenuListItem, EmptyState, FeedItemBase, FileUpload, FileUploadBase, FileUploadItemBase, FilterBar, FilterTabs, FiltersDropdownMenu, FiltersSlideoutMenu, HeaderNavigation, HelpIcon2 as HelpIcon, InputField, LeadingInputField, LineAndBarChart, LinkMessage, LoadingIndicator, MediaMessage, MegaInputFieldBase, Message, MessageAction, MessageActionButton, MessageActionPanel, MessageReaction, MessageStatusIcon, MetricItem, Modal, ModalActions, ModalHeader, ModernBadge, MultiSelect, NavAccountCard, NavAccountCardMenuItem, NavButton2 as NavButton, NavFeaturedCard, NavItemBase, NavItemDropdownBase, NavMenuButton, Notification, NumberInput, PageHeader, Pagination, PaginationButtonGroupBase, PaginationCards, PaginationDotGroup, PaginationDotIndicator, PaginationNumberBase, PieChart2 as PieChart, PillBadge, ProgressBar, ProgressCircle, RadarChart2 as RadarChart, Radio, RadioGroup, RadioGroupItem, SectionFooter, SectionHeader, SectionLabel, Select, SelectMenuItem, SidebarNavigation, SlideOutMenuHeader, SlideoutMenu, Slider, SocialButton, StatusIcon, StepBase, StepIconBase, TabButtonBase, TableCell, TableHeaderCell, TableHeaderLabel, Tabs, Tag, TagsInputField, TextEditorToolbar, TextEditorToolbarDivider, TextEditorTooltip, TextareaInputField, Toggle, Tooltip2 as Tooltip, TrailingInputField, TreeView, TreeViewConnector, TreeViewItem, VerificationCodeInput, illustrations_exports as illustrations, useContextMenu };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@borisj74/bv-ds",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
   "license": "MIT",
   "type": "module",

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,111 @@
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useId,
+  useRef,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { ModalHeader } from "../ModalHeader";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl";
+
+export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Controls visibility — renders nothing when false. */
+  open: boolean;
+  /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+  onClose: () => void;
+  /** Panel max-width: sm=400 / md=560 / lg=720 / xl=960 px. Full width on mobile. */
+  size?: ModalSize;
+  /** Modal contents — compose `ModalHeader`, a body, and `ModalActions` here. */
+  children: ReactNode;
+}
+
+const sizeMaxWidth: Record<ModalSize, string> = {
+  sm: "max-w-[400px]",
+  md: "max-w-[560px]",
+  lg: "max-w-[720px]",
+  xl: "max-w-[960px]",
+};
+
+/**
+ * Modal shell — fixed backdrop + centred panel. Layout/overlay only: it does NOT
+ * render a header or footer, those are composed as children (`ModalHeader` /
+ * `ModalActions`). Backdrop click-outside and Escape both call `onClose`; clicks
+ * inside the panel are stopped from bubbling. On open, focus moves into the panel
+ * and is restored to the previously-focused element on close. If a direct
+ * `ModalHeader` child is present its title is wired to `aria-labelledby`.
+ * Renders `null` while `open` is false.
+ */
+export function Modal({
+  open,
+  onClose,
+  size = "md",
+  children,
+  className,
+  ...rest
+}: ModalProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+  const titleId = useId();
+
+  // Escape-to-close + focus management. Hooks run before the early return below.
+  useEffect(() => {
+    if (!open) return;
+
+    previousFocusRef.current = document.activeElement as HTMLElement | null;
+    panelRef.current?.focus();
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      previousFocusRef.current?.focus();
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  const handlePanelClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  // Wire aria-labelledby to a ModalHeader title if one is a direct child.
+  let hasLabelledHeader = false;
+  const labelledChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && child.type === ModalHeader) {
+      hasLabelledHeader = true;
+      return cloneElement(child as React.ReactElement<{ titleId?: string }>, { titleId });
+    }
+    return child;
+  });
+
+  return (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay/70 backdrop-blur-sm"
+    >
+      <div
+        ref={panelRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={hasLabelledHeader ? titleId : undefined}
+        tabIndex={-1}
+        onClick={handlePanelClick}
+        className={clsx(
+          "mx-4 flex w-full flex-col overflow-hidden rounded-2xl bg-bg-primary shadow-xl outline-none sm:mx-0",
+          sizeMaxWidth[size],
+          className,
+        )}
+        {...rest}
+      >
+        {labelledChildren}
+      </div>
+    </div>
+  );
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ModalProps, ModalSize } from "./Modal";

package/src/components/ModalHeader/ModalHeader.tsx

@@ -19,6 +19,8 @@ export interface ModalHeaderProps
   divider?: boolean;
   /** Renders an x-close button top-right when provided. */
   onClose?: () => void;
+  /** id placed on the title element so a parent `Modal` can wire `aria-labelledby`. */
+  titleId?: string;
 }
 
 const FeaturedIcon = ({ children }: { children: ReactNode }) => (
@@ -45,6 +47,7 @@ export function ModalHeader({
   type = "left",
   divider = true,
   onClose,
+  titleId,
   className,
   ...rest
 }: ModalHeaderProps) {
@@ -75,7 +78,7 @@ export function ModalHeader({
             isCenter && "items-center text-center",
           )}
         >
-          <p className="w-full text-md font-semibold text-text-primary">{title}</p>
+          <p id={titleId} className="w-full text-md font-semibold text-text-primary">{title}</p>
           {description && (
             <p className="w-full text-sm text-text-tertiary">{description}</p>
           )}

package/src/components/SlideoutMenu/SlideoutMenu.tsx

@@ -0,0 +1,86 @@
+import {
+  useEffect,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+
+export type SlideoutMenuSide = "right" | "left";
+export type SlideoutMenuSize = "sm" | "md" | "lg";
+
+export interface SlideoutMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Controls visibility. The panel stays mounted to animate the slide in/out. */
+  open: boolean;
+  /** Fired on backdrop click-outside, Escape, or the header's x-close. */
+  onClose: () => void;
+  /** Edge the panel docks to and slides in from. */
+  side?: SlideoutMenuSide;
+  /** Panel width: sm=360 / md=480 / lg=600 px. Full width on mobile. */
+  size?: SlideoutMenuSize;
+  /** Drawer contents — compose `SlideOutMenuHeader`, a body, and a footer here. */
+  children: ReactNode;
+}
+
+const sizeWidth: Record<SlideoutMenuSize, string> = {
+  sm: "sm:w-[360px]",
+  md: "sm:w-[480px]",
+  lg: "sm:w-[600px]",
+};
+
+/**
+ * Slide-out / drawer shell — fixed backdrop + edge-docked panel that slides in
+ * from `side` via a `translate-x` transition. Layout/overlay only: the header is
+ * composed as a child (`SlideOutMenuHeader`), not reimplemented. Backdrop
+ * click-outside and Escape both call `onClose`. The panel stays mounted (toggled
+ * via transform + the backdrop's pointer-events) so both enter and exit animate.
+ */
+export function SlideoutMenu({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  children,
+  className,
+  ...rest
+}: SlideoutMenuProps) {
+  useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onClose]);
+
+  const handlePanelClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  const closedTransform = side === "right" ? "translate-x-full" : "-translate-x-full";
+
+  return (
+    <div
+      onClick={onClose}
+      aria-hidden={!open}
+      className={clsx(
+        "fixed inset-0 z-50 bg-bg-overlay/70 backdrop-blur-sm transition-opacity duration-300",
+        open ? "opacity-100" : "pointer-events-none opacity-0",
+      )}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        onClick={handlePanelClick}
+        className={clsx(
+          "fixed bottom-0 top-0 flex w-full flex-col bg-bg-primary shadow-xl transition-transform duration-300 ease-in-out",
+          side === "right" ? "right-0" : "left-0",
+          sizeWidth[size],
+          open ? "translate-x-0" : closedTransform,
+          className,
+        )}
+        {...rest}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/SlideoutMenu/index.ts

@@ -0,0 +1,2 @@
+export { SlideoutMenu } from "./SlideoutMenu";
+export type { SlideoutMenuProps, SlideoutMenuSide, SlideoutMenuSize } from "./SlideoutMenu";

package/src/index.ts

@@ -86,6 +86,7 @@ export * from "./components/MessageActionPanel";
 export * from "./components/MessageReaction";
 export * from "./components/MessageStatusIcon";
 export * from "./components/MetricItem";
+export * from "./components/Modal";
 export * from "./components/ModalActions";
 export * from "./components/ModalHeader";
 export * from "./components/MultiSelect";
@@ -121,6 +122,7 @@ export * from "./components/Select";
 export * from "./components/SelectMenuItem";
 export * from "./components/SidebarNavigation";
 export * from "./components/SlideOutMenuHeader";
+export * from "./components/SlideoutMenu";
 export * from "./components/Slider";
 export * from "./components/SocialButton";
 export * from "./components/StatusIcon";