@borisj74/bv-ds 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1589,6 +1589,28 @@ interface MetricItemProps extends HTMLAttributes<HTMLDivElement> {
1589
1589
  */
1590
1590
  declare function MetricItem({ label, value, change, changeText, icon, chart, action, onMenuClick, className, ...rest }: MetricItemProps): react.JSX.Element;
1591
1591
 
1592
+ type ModalSize = "sm" | "md" | "lg" | "xl";
1593
+ interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
1594
+ /** Controls visibility — renders nothing when false. */
1595
+ open: boolean;
1596
+ /** Fired on backdrop click-outside, Escape, or the header's x-close. */
1597
+ onClose: () => void;
1598
+ /** Panel max-width: sm=400 / md=560 / lg=720 / xl=960 px. Full width on mobile. */
1599
+ size?: ModalSize;
1600
+ /** Modal contents — compose `ModalHeader`, a body, and `ModalActions` here. */
1601
+ children: ReactNode;
1602
+ }
1603
+ /**
1604
+ * Modal shell — fixed backdrop + centred panel. Layout/overlay only: it does NOT
1605
+ * render a header or footer, those are composed as children (`ModalHeader` /
1606
+ * `ModalActions`). Backdrop click-outside and Escape both call `onClose`; clicks
1607
+ * inside the panel are stopped from bubbling. On open, focus moves into the panel
1608
+ * and is restored to the previously-focused element on close. If a direct
1609
+ * `ModalHeader` child is present its title is wired to `aria-labelledby`.
1610
+ * Renders `null` while `open` is false.
1611
+ */
1612
+ declare function Modal({ open, onClose, size, children, className, ...rest }: ModalProps): react.JSX.Element | null;
1613
+
1592
1614
  type ModalActionsType = "horizontal-fill" | "vertical-fill" | "right-aligned";
1593
1615
  interface ModalActionsProps extends HTMLAttributes<HTMLDivElement> {
1594
1616
  /**
@@ -1628,13 +1650,15 @@ interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title">
1628
1650
  divider?: boolean;
1629
1651
  /** Renders an x-close button top-right when provided. */
1630
1652
  onClose?: () => void;
1653
+ /** id placed on the title element so a parent `Modal` can wire `aria-labelledby`. */
1654
+ titleId?: string;
1631
1655
  }
1632
1656
  /**
1633
1657
  * Modal header — featured-icon badge + title + supporting text, with an optional
1634
1658
  * x-close button and bottom divider. `type` controls alignment (left / centred /
1635
1659
  * icon-beside-text). The `icon` is a slot; consumer supplies the glyph.
1636
1660
  */
1637
- declare function ModalHeader({ title, description, icon, type, divider, onClose, className, ...rest }: ModalHeaderProps): react.JSX.Element;
1661
+ declare function ModalHeader({ title, description, icon, type, divider, onClose, titleId, className, ...rest }: ModalHeaderProps): react.JSX.Element;
1638
1662
 
1639
1663
  interface MultiSelectOption {
1640
1664
  value: string;
@@ -1665,12 +1689,20 @@ interface MultiSelectProps {
1665
1689
  declare function MultiSelect({ options, value, onChange, open, onToggle, label, hint, placeholder, searchable, disabled, invalid, className, }: MultiSelectProps): react.JSX.Element;
1666
1690
 
1667
1691
  type NavAccountCardVariant = "simple" | "card";
1692
+ type NavAccountCardBreakpoint = "desktop" | "mobile";
1668
1693
  interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
1669
1694
  /** `simple` = inline row + sign-out button · `card` = boxed trigger that opens a menu. */
1670
1695
  variant?: NavAccountCardVariant;
1671
1696
  /** card only — whether the dropdown menu is shown. */
1672
1697
  open?: boolean;
1698
+ /** Width: `desktop` = 280px · `mobile` = 256px. */
1699
+ breakpoint?: NavAccountCardBreakpoint;
1700
+ /** Custom avatar node — takes precedence over the built-in `src` treatment. */
1673
1701
  avatar?: ReactNode;
1702
+ /** Image URL for the built-in layered avatar (used when `avatar` is not supplied). */
1703
+ src?: string;
1704
+ /** Status dot on the built-in avatar — `true` online (green) · `false` offline (gray) · omit for none. */
1705
+ online?: boolean;
1674
1706
  name?: ReactNode;
1675
1707
  email?: ReactNode;
1676
1708
  /** card only — toggles the dropdown (fires on trigger click). */
@@ -1694,7 +1726,7 @@ interface NavAccountCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "titl
1694
1726
  * simplification (see figma-map). Width defaults to 280px; override via
1695
1727
  * `className` for mobile (256px).
1696
1728
  */
1697
- declare function NavAccountCard({ variant, open, avatar, name, email, onToggle, onSignOut, menu, className, ...rest }: NavAccountCardProps): react.JSX.Element;
1729
+ declare function NavAccountCard({ variant, open, breakpoint, avatar, src, online, name, email, onToggle, onSignOut, menu, className, ...rest }: NavAccountCardProps): react.JSX.Element;
1698
1730
 
1699
1731
  type NavAccountCardMenuItemType = "menu-item" | "account";
1700
1732
  interface NavAccountCardMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "name" | "type"> {
@@ -2297,6 +2329,29 @@ interface SlideOutMenuHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "
2297
2329
  */
2298
2330
  declare function SlideOutMenuHeader({ icon, title, supportingText, tabs, onClose, className, ...rest }: SlideOutMenuHeaderProps): react.JSX.Element;
2299
2331
 
2332
+ type SlideoutMenuSide = "right" | "left";
2333
+ type SlideoutMenuSize = "sm" | "md" | "lg";
2334
+ interface SlideoutMenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
2335
+ /** Controls visibility. The panel stays mounted to animate the slide in/out. */
2336
+ open: boolean;
2337
+ /** Fired on backdrop click-outside, Escape, or the header's x-close. */
2338
+ onClose: () => void;
2339
+ /** Edge the panel docks to and slides in from. */
2340
+ side?: SlideoutMenuSide;
2341
+ /** Panel width: sm=360 / md=480 / lg=600 px. Full width on mobile. */
2342
+ size?: SlideoutMenuSize;
2343
+ /** Drawer contents — compose `SlideOutMenuHeader`, a body, and a footer here. */
2344
+ children: ReactNode;
2345
+ }
2346
+ /**
2347
+ * Slide-out / drawer shell — fixed backdrop + edge-docked panel that slides in
2348
+ * from `side` via a `translate-x` transition. Layout/overlay only: the header is
2349
+ * composed as a child (`SlideOutMenuHeader`), not reimplemented. Backdrop
2350
+ * click-outside and Escape both call `onClose`. The panel stays mounted (toggled
2351
+ * via transform + the backdrop's pointer-events) so both enter and exit animate.
2352
+ */
2353
+ declare function SlideoutMenu({ open, onClose, side, size, children, className, ...rest }: SlideoutMenuProps): react.JSX.Element;
2354
+
2300
2355
  type SliderLabel = "none" | "bottom" | "topFloating";
2301
2356
  interface SliderProps {
2302
2357
  min?: number;
@@ -2712,4 +2767,4 @@ declare namespace index {
2712
2767
  export { index_BoxIllustration as BoxIllustration, index_CloudIllustration as CloudIllustration, index_CreditCardIllustration as CreditCardIllustration, index_DocumentsIllustration as DocumentsIllustration };
2713
2768
  }
2714
2769
 
2715
- 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 };
2770
+ 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, type NavAccountCardBreakpoint, 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 CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React28 from 'react';
2
- import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
2
+ import React28__default, { forwardRef, isValidElement, cloneElement, Children, useContext, useMemo, createContext, Fragment, useState, PureComponent, createElement, Component, useRef, useEffect, useCallback, useId, useImperativeHandle } from 'react';
3
3
  import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
4
4
 
5
5
  var __create = Object.create;
@@ -3822,7 +3822,7 @@ var require_factoryWithTypeCheckers = __commonJS({
3822
3822
  function emptyFunctionThatReturnsNull() {
3823
3823
  return null;
3824
3824
  }
3825
- module.exports = function(isValidElement11, throwOnDirectAccess) {
3825
+ module.exports = function(isValidElement12, throwOnDirectAccess) {
3826
3826
  var ITERATOR_SYMBOL = typeof Symbol === "function" && Symbol.iterator;
3827
3827
  var FAUX_ITERATOR_SYMBOL = "@@iterator";
3828
3828
  function getIteratorFn(maybeIterable) {
@@ -3950,7 +3950,7 @@ var require_factoryWithTypeCheckers = __commonJS({
3950
3950
  function createElementTypeChecker() {
3951
3951
  function validate(props, propName, componentName, location, propFullName) {
3952
3952
  var propValue = props[propName];
3953
- if (!isValidElement11(propValue)) {
3953
+ if (!isValidElement12(propValue)) {
3954
3954
  var propType = getPropType(propValue);
3955
3955
  return new PropTypeError("Invalid " + location + " `" + propFullName + "` of type " + ("`" + propType + "` supplied to `" + componentName + "`, expected a single ReactElement."));
3956
3956
  }
@@ -4138,7 +4138,7 @@ var require_factoryWithTypeCheckers = __commonJS({
4138
4138
  if (Array.isArray(propValue)) {
4139
4139
  return propValue.every(isNode);
4140
4140
  }
4141
- if (propValue === null || isValidElement11(propValue)) {
4141
+ if (propValue === null || isValidElement12(propValue)) {
4142
4142
  return true;
4143
4143
  }
4144
4144
  var iteratorFn = getIteratorFn(propValue);
@@ -5072,18 +5072,18 @@ function AdvancedFilterBar({
5072
5072
  ] });
5073
5073
  }
5074
5074
  var hierarchyClasses = {
5075
- Primary: "bg-brand-solid text-white border-2 border-white/[0.12] hover:bg-bg-brand-solid-hover",
5076
- Secondary: "bg-bg-primary text-text-secondary border border-border-primary",
5077
- Tertiary: "bg-transparent text-text-tertiary border-0",
5078
- "Link color": "bg-transparent text-text-brand-secondary border-0 p-0",
5079
- "Link gray": "bg-transparent text-text-tertiary border-0 p-0"
5075
+ Primary: "bg-bg-brand-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-brand-solid-hover",
5076
+ Secondary: "bg-bg-primary text-text-secondary border border-border-border-primary shadow-skeuomorphic hover:bg-bg-primary-hover",
5077
+ Tertiary: "bg-transparent text-text-tertiary border-0 hover:bg-bg-secondary",
5078
+ "Link color": "bg-transparent text-text-brand-secondary border-0 p-0 hover:text-text-brand-secondary-hover",
5079
+ "Link gray": "bg-transparent text-text-tertiary border-0 p-0 hover:text-text-tertiary-hover"
5080
5080
  };
5081
5081
  var sizeClasses = {
5082
- xs: "px-[10px] py-sm text-xs",
5083
- sm: "px-lg py-md text-xs",
5084
- md: "px-[14px] py-[10px] text-sm",
5085
- lg: "px-xl py-[10px] text-md",
5086
- xl: "px-[18px] py-lg text-md"
5082
+ xs: "px-[10px] py-sm gap-xs text-xs font-semibold",
5083
+ sm: "px-lg py-md gap-xs text-xs font-semibold",
5084
+ md: "px-[14px] py-[10px] gap-xs text-sm font-semibold",
5085
+ lg: "px-xl py-[10px] gap-sm text-md font-semibold",
5086
+ xl: "px-[18px] py-lg gap-sm text-md font-semibold"
5087
5087
  };
5088
5088
  function Button({
5089
5089
  hierarchy = "Primary",
@@ -5098,8 +5098,10 @@ function Button({
5098
5098
  "button",
5099
5099
  {
5100
5100
  className: clsx_default(
5101
- "font-body font-semibold rounded-md cursor-pointer transition-colors",
5102
- "disabled:opacity-50 disabled:cursor-not-allowed",
5101
+ "inline-flex items-center justify-center font-body rounded-md",
5102
+ "cursor-pointer transition-colors",
5103
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-brand focus-visible:ring-offset-2",
5104
+ "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
5103
5105
  hierarchyClasses[hierarchy],
5104
5106
  sizeClasses[size],
5105
5107
  className
@@ -5107,7 +5109,7 @@ function Button({
5107
5109
  disabled: disabled || loading,
5108
5110
  "aria-disabled": disabled || loading,
5109
5111
  ...rest,
5110
- children: loading ? "Loading\u2026" : children
5112
+ children: loading ? /* @__PURE__ */ jsx("span", { className: "opacity-70", children: "Loading\u2026" }) : children
5111
5113
  }
5112
5114
  );
5113
5115
  }
@@ -5958,8 +5960,8 @@ function ButtonCloseX({
5958
5960
  );
5959
5961
  }
5960
5962
  var hierarchyClasses2 = {
5961
- Primary: "bg-error-solid text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-error-solid-hover",
5962
- Secondary: "bg-bg-primary text-text-error-primary border border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
5963
+ Primary: "bg-bg-error-solid text-text-white border-2 border-white/[0.12] shadow-skeuomorphic hover:bg-bg-error-solid-hover",
5964
+ Secondary: "bg-bg-primary text-text-error-primary border border-border-border-error-subtle shadow-skeuomorphic hover:bg-bg-error-primary",
5963
5965
  Tertiary: "bg-transparent text-text-error-primary border-0 hover:bg-bg-error-primary",
5964
5966
  Link: "bg-transparent text-text-error-primary border-0 p-0 hover:text-text-error-primary"
5965
5967
  };
@@ -5984,7 +5986,7 @@ function ButtonDestructive({
5984
5986
  {
5985
5987
  className: clsx_default(
5986
5988
  "font-body font-semibold rounded-md cursor-pointer transition-colors",
5987
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
5989
+ "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-border-error focus-visible:ring-offset-2 focus-visible:ring-offset-bg-bg-primary",
5988
5990
  "disabled:opacity-50 disabled:cursor-not-allowed",
5989
5991
  hierarchyClasses2[hierarchy],
5990
5992
  hierarchy === "Link" ? "" : sizeClasses4[size],
@@ -31397,33 +31399,6 @@ function MetricItem({
31397
31399
  }
31398
31400
  );
31399
31401
  }
31400
- function ModalActions({
31401
- type = "horizontal-fill",
31402
- divider = true,
31403
- leading,
31404
- children,
31405
- className,
31406
- ...rest
31407
- }) {
31408
- return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
31409
- divider && /* @__PURE__ */ jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
31410
- /* @__PURE__ */ jsx(
31411
- "div",
31412
- {
31413
- className: clsx_default(
31414
- "flex px-3xl pb-3xl pt-3xl",
31415
- type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
31416
- type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
31417
- type === "right-aligned" && "items-center gap-lg"
31418
- ),
31419
- children: type === "right-aligned" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
31420
- /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
31421
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-lg", children })
31422
- ] }) : children
31423
- }
31424
- )
31425
- ] });
31426
- }
31427
31402
  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 });
31428
31403
  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" }) });
31429
31404
  function ModalHeader({
@@ -31433,6 +31408,7 @@ function ModalHeader({
31433
31408
  type = "left",
31434
31409
  divider = true,
31435
31410
  onClose,
31411
+ titleId,
31436
31412
  className,
31437
31413
  ...rest
31438
31414
  }) {
@@ -31467,7 +31443,7 @@ function ModalHeader({
31467
31443
  isCenter && "items-center text-center"
31468
31444
  ),
31469
31445
  children: [
31470
- /* @__PURE__ */ jsx("p", { className: "w-full text-md font-semibold text-text-primary", children: title }),
31446
+ /* @__PURE__ */ jsx("p", { id: titleId, className: "w-full text-md font-semibold text-text-primary", children: title }),
31471
31447
  description && /* @__PURE__ */ jsx("p", { className: "w-full text-sm text-text-tertiary", children: description })
31472
31448
  ]
31473
31449
  }
@@ -31490,6 +31466,99 @@ function ModalHeader({
31490
31466
  }
31491
31467
  );
31492
31468
  }
31469
+ var sizeMaxWidth = {
31470
+ sm: "max-w-[400px]",
31471
+ md: "max-w-[560px]",
31472
+ lg: "max-w-[720px]",
31473
+ xl: "max-w-[960px]"
31474
+ };
31475
+ function Modal({
31476
+ open,
31477
+ onClose,
31478
+ size = "md",
31479
+ children,
31480
+ className,
31481
+ ...rest
31482
+ }) {
31483
+ const panelRef = useRef(null);
31484
+ const previousFocusRef = useRef(null);
31485
+ const titleId = useId();
31486
+ useEffect(() => {
31487
+ if (!open) return;
31488
+ previousFocusRef.current = document.activeElement;
31489
+ panelRef.current?.focus();
31490
+ const handleKeyDown = (e) => {
31491
+ if (e.key === "Escape") onClose();
31492
+ };
31493
+ document.addEventListener("keydown", handleKeyDown);
31494
+ return () => {
31495
+ document.removeEventListener("keydown", handleKeyDown);
31496
+ previousFocusRef.current?.focus();
31497
+ };
31498
+ }, [open, onClose]);
31499
+ if (!open) return null;
31500
+ const handlePanelClick = (e) => e.stopPropagation();
31501
+ let hasLabelledHeader = false;
31502
+ const labelledChildren = Children.map(children, (child) => {
31503
+ if (isValidElement(child) && child.type === ModalHeader) {
31504
+ hasLabelledHeader = true;
31505
+ return cloneElement(child, { titleId });
31506
+ }
31507
+ return child;
31508
+ });
31509
+ return /* @__PURE__ */ jsx(
31510
+ "div",
31511
+ {
31512
+ onClick: onClose,
31513
+ className: "fixed inset-0 z-50 flex items-center justify-center bg-bg-overlay/70 backdrop-blur-sm",
31514
+ children: /* @__PURE__ */ jsx(
31515
+ "div",
31516
+ {
31517
+ ref: panelRef,
31518
+ role: "dialog",
31519
+ "aria-modal": "true",
31520
+ "aria-labelledby": hasLabelledHeader ? titleId : void 0,
31521
+ tabIndex: -1,
31522
+ onClick: handlePanelClick,
31523
+ className: clsx_default(
31524
+ "mx-4 flex w-full flex-col overflow-hidden rounded-2xl bg-bg-primary shadow-xl outline-none sm:mx-0",
31525
+ sizeMaxWidth[size],
31526
+ className
31527
+ ),
31528
+ ...rest,
31529
+ children: labelledChildren
31530
+ }
31531
+ )
31532
+ }
31533
+ );
31534
+ }
31535
+ function ModalActions({
31536
+ type = "horizontal-fill",
31537
+ divider = true,
31538
+ leading,
31539
+ children,
31540
+ className,
31541
+ ...rest
31542
+ }) {
31543
+ return /* @__PURE__ */ jsxs("div", { className: clsx_default("flex w-full flex-col", className), ...rest, children: [
31544
+ divider && /* @__PURE__ */ jsx("div", { className: "mt-4xl border-t border-border-secondary" }),
31545
+ /* @__PURE__ */ jsx(
31546
+ "div",
31547
+ {
31548
+ className: clsx_default(
31549
+ "flex px-3xl pb-3xl pt-3xl",
31550
+ type === "horizontal-fill" && "gap-lg [&>*]:flex-1",
31551
+ type === "vertical-fill" && "flex-col gap-lg [&>*]:w-full",
31552
+ type === "right-aligned" && "items-center gap-lg"
31553
+ ),
31554
+ children: type === "right-aligned" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
31555
+ /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-lg", children: leading }),
31556
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-lg", children })
31557
+ ] }) : children
31558
+ }
31559
+ )
31560
+ ] });
31561
+ }
31493
31562
  function CheckboxBox({ selected, big }) {
31494
31563
  return /* @__PURE__ */ jsx(
31495
31564
  "span",
@@ -31681,6 +31750,18 @@ var LogOut = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "non
31681
31750
  strokeLinejoin: "round"
31682
31751
  }
31683
31752
  ) });
31753
+ var LayeredAvatar = ({ src, online }) => /* @__PURE__ */ jsxs("span", { className: "relative inline-flex size-10 shrink-0 rounded-full border-[0.75px] border-border-secondary-alt bg-bg-primary p-[1px] shadow-xs", children: [
31754
+ /* @__PURE__ */ jsx("span", { className: "flex size-full overflow-hidden rounded-full border-[0.5px] border-[rgba(0,0,0,0.16)]", children: /* @__PURE__ */ jsx("img", { src, alt: "", className: "size-full rounded-full object-cover" }) }),
31755
+ online !== void 0 && /* @__PURE__ */ jsx(
31756
+ "span",
31757
+ {
31758
+ className: clsx_default(
31759
+ "absolute bottom-[-2px] right-[-2px] size-[14px] rounded-full border-[1.5px] border-bg-primary",
31760
+ online ? "bg-fg-success-secondary" : "bg-utility-neutral-300"
31761
+ )
31762
+ }
31763
+ )
31764
+ ] });
31684
31765
  var AvatarLabel = ({ avatar, name, email }) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-md", children: [
31685
31766
  avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: avatar }),
31686
31767
  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col text-left", children: [
@@ -31691,7 +31772,10 @@ var AvatarLabel = ({ avatar, name, email }) => /* @__PURE__ */ jsxs("div", { cla
31691
31772
  function NavAccountCard({
31692
31773
  variant = "card",
31693
31774
  open = false,
31775
+ breakpoint = "desktop",
31694
31776
  avatar,
31777
+ src,
31778
+ online,
31695
31779
  name,
31696
31780
  email,
31697
31781
  onToggle,
@@ -31700,17 +31784,20 @@ function NavAccountCard({
31700
31784
  className,
31701
31785
  ...rest
31702
31786
  }) {
31787
+ const widthClass = breakpoint === "mobile" ? "w-[256px]" : "w-[280px]";
31788
+ const avatarNode = avatar ?? (src !== void 0 ? /* @__PURE__ */ jsx(LayeredAvatar, { src, online }) : void 0);
31703
31789
  if (variant === "simple") {
31704
31790
  return /* @__PURE__ */ jsxs(
31705
31791
  "div",
31706
31792
  {
31707
31793
  className: clsx_default(
31708
- "relative flex w-[280px] items-start gap-xl border-t border-border-secondary px-md pt-2xl",
31794
+ "relative flex items-start gap-xl border-t border-border-secondary px-md pt-2xl",
31795
+ widthClass,
31709
31796
  className
31710
31797
  ),
31711
31798
  ...rest,
31712
31799
  children: [
31713
- /* @__PURE__ */ jsx(AvatarLabel, { avatar, name, email }),
31800
+ /* @__PURE__ */ jsx(AvatarLabel, { avatar: avatarNode, name, email }),
31714
31801
  /* @__PURE__ */ jsx(
31715
31802
  "button",
31716
31803
  {
@@ -31725,7 +31812,7 @@ function NavAccountCard({
31725
31812
  }
31726
31813
  );
31727
31814
  }
31728
- return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative w-[280px]", className), ...rest, children: [
31815
+ return /* @__PURE__ */ jsxs("div", { className: clsx_default("relative", widthClass, className), ...rest, children: [
31729
31816
  /* @__PURE__ */ jsxs(
31730
31817
  "button",
31731
31818
  {
@@ -31733,7 +31820,7 @@ function NavAccountCard({
31733
31820
  onClick: onToggle,
31734
31821
  className: "relative flex w-full items-start gap-xl rounded-xl border border-border-secondary bg-bg-primary-alt p-lg text-left shadow-xs",
31735
31822
  children: [
31736
- /* @__PURE__ */ jsx(AvatarLabel, { avatar, name, email }),
31823
+ /* @__PURE__ */ jsx(AvatarLabel, { avatar: avatarNode, name, email }),
31737
31824
  /* @__PURE__ */ jsx(
31738
31825
  "span",
31739
31826
  {
@@ -32849,7 +32936,7 @@ function SidebarNavigation({
32849
32936
  }
32850
32937
  );
32851
32938
  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
32852
- /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:block", children: rail }),
32939
+ /* @__PURE__ */ jsx("aside", { className: "hidden h-full md:flex", children: rail }),
32853
32940
  /* @__PURE__ */ jsxs("div", { className: "md:hidden", children: [
32854
32941
  /* @__PURE__ */ jsx(NavMenuButton, { opened: isOpen, onClick: () => setOpen(!isOpen) }),
32855
32942
  isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex", children: [
@@ -32903,6 +32990,59 @@ function SlideOutMenuHeader({
32903
32990
  }
32904
32991
  );
32905
32992
  }
32993
+ var sizeWidth = {
32994
+ sm: "sm:w-[360px]",
32995
+ md: "sm:w-[480px]",
32996
+ lg: "sm:w-[600px]"
32997
+ };
32998
+ function SlideoutMenu({
32999
+ open,
33000
+ onClose,
33001
+ side = "right",
33002
+ size = "md",
33003
+ children,
33004
+ className,
33005
+ ...rest
33006
+ }) {
33007
+ useEffect(() => {
33008
+ if (!open) return;
33009
+ const handleKeyDown = (e) => {
33010
+ if (e.key === "Escape") onClose();
33011
+ };
33012
+ document.addEventListener("keydown", handleKeyDown);
33013
+ return () => document.removeEventListener("keydown", handleKeyDown);
33014
+ }, [open, onClose]);
33015
+ const handlePanelClick = (e) => e.stopPropagation();
33016
+ const closedTransform = side === "right" ? "translate-x-full" : "-translate-x-full";
33017
+ return /* @__PURE__ */ jsx(
33018
+ "div",
33019
+ {
33020
+ onClick: onClose,
33021
+ "aria-hidden": !open,
33022
+ className: clsx_default(
33023
+ "fixed inset-0 z-50 bg-bg-overlay/70 backdrop-blur-sm transition-opacity duration-300",
33024
+ open ? "opacity-100" : "pointer-events-none opacity-0"
33025
+ ),
33026
+ children: /* @__PURE__ */ jsx(
33027
+ "div",
33028
+ {
33029
+ role: "dialog",
33030
+ "aria-modal": "true",
33031
+ onClick: handlePanelClick,
33032
+ className: clsx_default(
33033
+ "fixed bottom-0 top-0 flex w-full flex-col bg-bg-primary shadow-xl transition-transform duration-300 ease-in-out",
33034
+ side === "right" ? "right-0" : "left-0",
33035
+ sizeWidth[size],
33036
+ open ? "translate-x-0" : closedTransform,
33037
+ className
33038
+ ),
33039
+ ...rest,
33040
+ children
33041
+ }
33042
+ )
33043
+ }
33044
+ );
33045
+ }
32906
33046
  var clampStep = (v, min3, max3, step) => {
32907
33047
  const snapped = Math.round((v - min3) / step) * step + min3;
32908
33048
  return Math.min(max3, Math.max(min3, snapped));
@@ -33712,6 +33852,6 @@ object-assign/index.js:
33712
33852
  *)
33713
33853
  */
33714
33854
 
33715
- 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 };
33855
+ 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 };
33716
33856
  //# sourceMappingURL=index.js.map
33717
33857
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@borisj74/bv-ds",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "description": "bv-ds — React component library synced from Figma (Untitled UI v8.0), built on Tailwind CSS",
5
5
  "license": "MIT",
6
6
  "type": "module",