@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.cjs +194 -52
- package/dist/index.d.cts +58 -3
- package/dist/index.d.ts +58 -3
- package/dist/index.js +194 -54
- package/package.json +1 -1
- package/src/components/Button/Button.tsx +42 -22
- package/src/components/ButtonDestructive/ButtonDestructive.tsx +3 -3
- package/src/components/Modal/Modal.tsx +111 -0
- package/src/components/Modal/index.ts +2 -0
- package/src/components/ModalHeader/ModalHeader.tsx +4 -1
- package/src/components/NavAccountCard/NavAccountCard.tsx +41 -4
- package/src/components/NavAccountCard/index.ts +5 -1
- package/src/components/SidebarNavigation/SidebarNavigation.tsx +1 -1
- package/src/components/SlideoutMenu/SlideoutMenu.tsx +86 -0
- package/src/components/SlideoutMenu/index.ts +2 -0
- package/src/index.ts +2 -0
- package/tailwind-preset.js +223 -210
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(
|
|
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 (!
|
|
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 ||
|
|
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
|
-
"
|
|
5102
|
-
"
|
|
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
|
|
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
|
|
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:
|
|
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
|