@particle-academy/react-fancy 4.15.1 → 4.17.0
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 +217 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +123 -2
- package/dist/index.d.ts +123 -2
- package/dist/index.js +216 -1
- package/dist/index.js.map +1 -1
- package/dist/styles.css +56 -0
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1495,6 +1495,118 @@ declare const Modal: typeof ModalRoot & {
|
|
|
1495
1495
|
|
|
1496
1496
|
declare function useModal(): ModalContextValue;
|
|
1497
1497
|
|
|
1498
|
+
/** Which edge the drawer is anchored to, and therefore slides in from. */
|
|
1499
|
+
type DrawerSide = "left" | "right" | "top" | "bottom";
|
|
1500
|
+
/**
|
|
1501
|
+
* How large the drawer is along its own axis.
|
|
1502
|
+
*
|
|
1503
|
+
* `size` controls WIDTH for `left`/`right` and HEIGHT for `top`/`bottom` — the
|
|
1504
|
+
* cross-axis always fills its anchor. One scale, two meanings, so `size="md"`
|
|
1505
|
+
* reads the same whichever edge you attach to.
|
|
1506
|
+
*/
|
|
1507
|
+
type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
1508
|
+
/**
|
|
1509
|
+
* Where the drawer is anchored.
|
|
1510
|
+
*
|
|
1511
|
+
* - `viewport` (default) — portalled, `fixed`, covers the screen, locks body
|
|
1512
|
+
* scroll and traps focus. The classic app-level drawer.
|
|
1513
|
+
* - `container` — `absolute` inside the nearest positioned ancestor, no portal,
|
|
1514
|
+
* no scroll lock, no focus trap. Attach it to a Card, a layout region, or the
|
|
1515
|
+
* shell around a prompt input and it stays inside that box.
|
|
1516
|
+
*/
|
|
1517
|
+
type DrawerAttach = "viewport" | "container";
|
|
1518
|
+
interface DrawerContextValue {
|
|
1519
|
+
open: boolean;
|
|
1520
|
+
close: () => void;
|
|
1521
|
+
side: DrawerSide;
|
|
1522
|
+
}
|
|
1523
|
+
interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1524
|
+
children: ReactNode;
|
|
1525
|
+
open: boolean;
|
|
1526
|
+
onClose: () => void;
|
|
1527
|
+
/** Edge to anchor to. Default `right`. */
|
|
1528
|
+
side?: DrawerSide;
|
|
1529
|
+
/** Extent along the drawer's own axis. Default `md`. */
|
|
1530
|
+
size?: DrawerSize;
|
|
1531
|
+
/** Viewport-level or scoped to a container. Default `viewport`. */
|
|
1532
|
+
attach?: DrawerAttach;
|
|
1533
|
+
/** Render the scrim behind the panel. Default `true`. */
|
|
1534
|
+
backdrop?: boolean;
|
|
1535
|
+
/** Clicking the scrim closes. Default `true`. */
|
|
1536
|
+
dismissOnBackdrop?: boolean;
|
|
1537
|
+
/** Escape closes. Default `true`. */
|
|
1538
|
+
dismissOnEscape?: boolean;
|
|
1539
|
+
className?: string;
|
|
1540
|
+
}
|
|
1541
|
+
interface DrawerHeaderProps {
|
|
1542
|
+
children: ReactNode;
|
|
1543
|
+
/** Show the close button. Default `true`. */
|
|
1544
|
+
closable?: boolean;
|
|
1545
|
+
className?: string;
|
|
1546
|
+
}
|
|
1547
|
+
interface DrawerBodyProps {
|
|
1548
|
+
children: ReactNode;
|
|
1549
|
+
className?: string;
|
|
1550
|
+
}
|
|
1551
|
+
interface DrawerFooterProps {
|
|
1552
|
+
children: ReactNode;
|
|
1553
|
+
className?: string;
|
|
1554
|
+
}
|
|
1555
|
+
interface DrawerContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
1556
|
+
children: ReactNode;
|
|
1557
|
+
className?: string;
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
declare function DrawerHeader({ children, closable, className }: DrawerHeaderProps): react.JSX.Element;
|
|
1561
|
+
declare namespace DrawerHeader {
|
|
1562
|
+
var displayName: string;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
declare function DrawerBody({ children, className }: DrawerBodyProps): react.JSX.Element;
|
|
1566
|
+
declare namespace DrawerBody {
|
|
1567
|
+
var displayName: string;
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
declare function DrawerFooter({ children, className }: DrawerFooterProps): react.JSX.Element;
|
|
1571
|
+
declare namespace DrawerFooter {
|
|
1572
|
+
var displayName: string;
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
/**
|
|
1576
|
+
* The anchor for `<Drawer attach="container">`.
|
|
1577
|
+
*
|
|
1578
|
+
* A container-attached drawer positions itself `absolute`, which resolves
|
|
1579
|
+
* against the nearest *positioned* ancestor — so without `relative` somewhere
|
|
1580
|
+
* above it, the drawer silently escapes to the viewport and looks like it
|
|
1581
|
+
* ignored `attach` entirely. This wrapper supplies `relative` + `overflow-hidden`
|
|
1582
|
+
* so the panel slides within the box rather than out of it.
|
|
1583
|
+
*
|
|
1584
|
+
* <Drawer.Container className="h-80 rounded-xl border">
|
|
1585
|
+
* <YourContent />
|
|
1586
|
+
* <Drawer attach="container" side="bottom" open={open} onClose={close}>
|
|
1587
|
+
* <Drawer.Body>Filters</Drawer.Body>
|
|
1588
|
+
* </Drawer>
|
|
1589
|
+
* </Drawer.Container>
|
|
1590
|
+
*
|
|
1591
|
+
* Any element works as long as it is positioned — this is the shortcut, not a
|
|
1592
|
+
* requirement. Wrapping a Card, a layout pane, or a prompt-input shell in
|
|
1593
|
+
* `relative overflow-hidden` does the same job.
|
|
1594
|
+
*/
|
|
1595
|
+
declare function DrawerContainer({ children, className, ...rest }: DrawerContainerProps): react.JSX.Element;
|
|
1596
|
+
declare namespace DrawerContainer {
|
|
1597
|
+
var displayName: string;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
declare function DrawerRoot({ children, open, onClose, side, size, attach, backdrop, dismissOnBackdrop, dismissOnEscape, className, ...rest }: DrawerProps): react.JSX.Element | null;
|
|
1601
|
+
declare const Drawer: typeof DrawerRoot & {
|
|
1602
|
+
Header: typeof DrawerHeader;
|
|
1603
|
+
Body: typeof DrawerBody;
|
|
1604
|
+
Footer: typeof DrawerFooter;
|
|
1605
|
+
Container: typeof DrawerContainer;
|
|
1606
|
+
};
|
|
1607
|
+
|
|
1608
|
+
declare function useDrawer(): DrawerContextValue;
|
|
1609
|
+
|
|
1498
1610
|
type ToastVariant = "default" | "success" | "error" | "warning" | "info";
|
|
1499
1611
|
type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1500
1612
|
interface ToastData {
|
|
@@ -1719,10 +1831,19 @@ interface BreadcrumbsItemProps {
|
|
|
1719
1831
|
children: ReactNode;
|
|
1720
1832
|
href?: string;
|
|
1721
1833
|
active?: boolean;
|
|
1834
|
+
/**
|
|
1835
|
+
* Navigate by callback instead of by URL, for a crumb with no href.
|
|
1836
|
+
*
|
|
1837
|
+
* Controlled components own their own navigation — a repository browser
|
|
1838
|
+
* walking directories, a wizard stepping back — and have no address to link
|
|
1839
|
+
* to. Renders the crumb as a `<button>`. Ignored when `active`, since the
|
|
1840
|
+
* current crumb is not a destination, and `href` wins if both are given.
|
|
1841
|
+
*/
|
|
1842
|
+
onClick?: () => void;
|
|
1722
1843
|
className?: string;
|
|
1723
1844
|
}
|
|
1724
1845
|
|
|
1725
|
-
declare function BreadcrumbsItem({ children, href, active, className, }: BreadcrumbsItemProps): react.JSX.Element;
|
|
1846
|
+
declare function BreadcrumbsItem({ children, href, active, onClick, className, }: BreadcrumbsItemProps): react.JSX.Element;
|
|
1726
1847
|
declare namespace BreadcrumbsItem {
|
|
1727
1848
|
var displayName: string;
|
|
1728
1849
|
}
|
|
@@ -3750,4 +3871,4 @@ declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & re
|
|
|
3750
3871
|
*/
|
|
3751
3872
|
declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3752
3873
|
|
|
3753
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CodeView, type CodeViewProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
3874
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CodeView, type CodeViewProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, Drawer, type DrawerAttach, type DrawerBodyProps, type DrawerContainerProps, type DrawerContextValue, type DrawerFooterProps, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDrawer, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
package/dist/index.d.ts
CHANGED
|
@@ -1495,6 +1495,118 @@ declare const Modal: typeof ModalRoot & {
|
|
|
1495
1495
|
|
|
1496
1496
|
declare function useModal(): ModalContextValue;
|
|
1497
1497
|
|
|
1498
|
+
/** Which edge the drawer is anchored to, and therefore slides in from. */
|
|
1499
|
+
type DrawerSide = "left" | "right" | "top" | "bottom";
|
|
1500
|
+
/**
|
|
1501
|
+
* How large the drawer is along its own axis.
|
|
1502
|
+
*
|
|
1503
|
+
* `size` controls WIDTH for `left`/`right` and HEIGHT for `top`/`bottom` — the
|
|
1504
|
+
* cross-axis always fills its anchor. One scale, two meanings, so `size="md"`
|
|
1505
|
+
* reads the same whichever edge you attach to.
|
|
1506
|
+
*/
|
|
1507
|
+
type DrawerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
1508
|
+
/**
|
|
1509
|
+
* Where the drawer is anchored.
|
|
1510
|
+
*
|
|
1511
|
+
* - `viewport` (default) — portalled, `fixed`, covers the screen, locks body
|
|
1512
|
+
* scroll and traps focus. The classic app-level drawer.
|
|
1513
|
+
* - `container` — `absolute` inside the nearest positioned ancestor, no portal,
|
|
1514
|
+
* no scroll lock, no focus trap. Attach it to a Card, a layout region, or the
|
|
1515
|
+
* shell around a prompt input and it stays inside that box.
|
|
1516
|
+
*/
|
|
1517
|
+
type DrawerAttach = "viewport" | "container";
|
|
1518
|
+
interface DrawerContextValue {
|
|
1519
|
+
open: boolean;
|
|
1520
|
+
close: () => void;
|
|
1521
|
+
side: DrawerSide;
|
|
1522
|
+
}
|
|
1523
|
+
interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
|
|
1524
|
+
children: ReactNode;
|
|
1525
|
+
open: boolean;
|
|
1526
|
+
onClose: () => void;
|
|
1527
|
+
/** Edge to anchor to. Default `right`. */
|
|
1528
|
+
side?: DrawerSide;
|
|
1529
|
+
/** Extent along the drawer's own axis. Default `md`. */
|
|
1530
|
+
size?: DrawerSize;
|
|
1531
|
+
/** Viewport-level or scoped to a container. Default `viewport`. */
|
|
1532
|
+
attach?: DrawerAttach;
|
|
1533
|
+
/** Render the scrim behind the panel. Default `true`. */
|
|
1534
|
+
backdrop?: boolean;
|
|
1535
|
+
/** Clicking the scrim closes. Default `true`. */
|
|
1536
|
+
dismissOnBackdrop?: boolean;
|
|
1537
|
+
/** Escape closes. Default `true`. */
|
|
1538
|
+
dismissOnEscape?: boolean;
|
|
1539
|
+
className?: string;
|
|
1540
|
+
}
|
|
1541
|
+
interface DrawerHeaderProps {
|
|
1542
|
+
children: ReactNode;
|
|
1543
|
+
/** Show the close button. Default `true`. */
|
|
1544
|
+
closable?: boolean;
|
|
1545
|
+
className?: string;
|
|
1546
|
+
}
|
|
1547
|
+
interface DrawerBodyProps {
|
|
1548
|
+
children: ReactNode;
|
|
1549
|
+
className?: string;
|
|
1550
|
+
}
|
|
1551
|
+
interface DrawerFooterProps {
|
|
1552
|
+
children: ReactNode;
|
|
1553
|
+
className?: string;
|
|
1554
|
+
}
|
|
1555
|
+
interface DrawerContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
1556
|
+
children: ReactNode;
|
|
1557
|
+
className?: string;
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
declare function DrawerHeader({ children, closable, className }: DrawerHeaderProps): react.JSX.Element;
|
|
1561
|
+
declare namespace DrawerHeader {
|
|
1562
|
+
var displayName: string;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
declare function DrawerBody({ children, className }: DrawerBodyProps): react.JSX.Element;
|
|
1566
|
+
declare namespace DrawerBody {
|
|
1567
|
+
var displayName: string;
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
declare function DrawerFooter({ children, className }: DrawerFooterProps): react.JSX.Element;
|
|
1571
|
+
declare namespace DrawerFooter {
|
|
1572
|
+
var displayName: string;
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
/**
|
|
1576
|
+
* The anchor for `<Drawer attach="container">`.
|
|
1577
|
+
*
|
|
1578
|
+
* A container-attached drawer positions itself `absolute`, which resolves
|
|
1579
|
+
* against the nearest *positioned* ancestor — so without `relative` somewhere
|
|
1580
|
+
* above it, the drawer silently escapes to the viewport and looks like it
|
|
1581
|
+
* ignored `attach` entirely. This wrapper supplies `relative` + `overflow-hidden`
|
|
1582
|
+
* so the panel slides within the box rather than out of it.
|
|
1583
|
+
*
|
|
1584
|
+
* <Drawer.Container className="h-80 rounded-xl border">
|
|
1585
|
+
* <YourContent />
|
|
1586
|
+
* <Drawer attach="container" side="bottom" open={open} onClose={close}>
|
|
1587
|
+
* <Drawer.Body>Filters</Drawer.Body>
|
|
1588
|
+
* </Drawer>
|
|
1589
|
+
* </Drawer.Container>
|
|
1590
|
+
*
|
|
1591
|
+
* Any element works as long as it is positioned — this is the shortcut, not a
|
|
1592
|
+
* requirement. Wrapping a Card, a layout pane, or a prompt-input shell in
|
|
1593
|
+
* `relative overflow-hidden` does the same job.
|
|
1594
|
+
*/
|
|
1595
|
+
declare function DrawerContainer({ children, className, ...rest }: DrawerContainerProps): react.JSX.Element;
|
|
1596
|
+
declare namespace DrawerContainer {
|
|
1597
|
+
var displayName: string;
|
|
1598
|
+
}
|
|
1599
|
+
|
|
1600
|
+
declare function DrawerRoot({ children, open, onClose, side, size, attach, backdrop, dismissOnBackdrop, dismissOnEscape, className, ...rest }: DrawerProps): react.JSX.Element | null;
|
|
1601
|
+
declare const Drawer: typeof DrawerRoot & {
|
|
1602
|
+
Header: typeof DrawerHeader;
|
|
1603
|
+
Body: typeof DrawerBody;
|
|
1604
|
+
Footer: typeof DrawerFooter;
|
|
1605
|
+
Container: typeof DrawerContainer;
|
|
1606
|
+
};
|
|
1607
|
+
|
|
1608
|
+
declare function useDrawer(): DrawerContextValue;
|
|
1609
|
+
|
|
1498
1610
|
type ToastVariant = "default" | "success" | "error" | "warning" | "info";
|
|
1499
1611
|
type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1500
1612
|
interface ToastData {
|
|
@@ -1719,10 +1831,19 @@ interface BreadcrumbsItemProps {
|
|
|
1719
1831
|
children: ReactNode;
|
|
1720
1832
|
href?: string;
|
|
1721
1833
|
active?: boolean;
|
|
1834
|
+
/**
|
|
1835
|
+
* Navigate by callback instead of by URL, for a crumb with no href.
|
|
1836
|
+
*
|
|
1837
|
+
* Controlled components own their own navigation — a repository browser
|
|
1838
|
+
* walking directories, a wizard stepping back — and have no address to link
|
|
1839
|
+
* to. Renders the crumb as a `<button>`. Ignored when `active`, since the
|
|
1840
|
+
* current crumb is not a destination, and `href` wins if both are given.
|
|
1841
|
+
*/
|
|
1842
|
+
onClick?: () => void;
|
|
1722
1843
|
className?: string;
|
|
1723
1844
|
}
|
|
1724
1845
|
|
|
1725
|
-
declare function BreadcrumbsItem({ children, href, active, className, }: BreadcrumbsItemProps): react.JSX.Element;
|
|
1846
|
+
declare function BreadcrumbsItem({ children, href, active, onClick, className, }: BreadcrumbsItemProps): react.JSX.Element;
|
|
1726
1847
|
declare namespace BreadcrumbsItem {
|
|
1727
1848
|
var displayName: string;
|
|
1728
1849
|
}
|
|
@@ -3750,4 +3871,4 @@ declare const AudioViewer: react.ForwardRefExoticComponent<AudioViewerProps & re
|
|
|
3750
3871
|
*/
|
|
3751
3872
|
declare const PdfViewer: react.ForwardRefExoticComponent<PdfViewerProps & react.RefAttributes<HTMLDivElement>>;
|
|
3752
3873
|
|
|
3753
|
-
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CodeView, type CodeViewProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
3874
|
+
export { Accordion, type AccordionContentProps, type AccordionContextValue, type AccordionItemProps, type AccordionOrientation, AccordionPanel, AccordionPanelContent, type AccordionPanelContentProps, type AccordionPanelProps, AccordionPanelSection, type AccordionPanelSectionProps, AccordionPanelTrigger, type AccordionPanelTriggerProps, type AccordionProps, type AccordionTriggerProps, Action, type ActionColor, type ActionProps, type AffixPosition, AudioViewer, type AudioViewerProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, type AvatarProps, Badge, type BadgeProps, Brand, type BrandProps, Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, Button, type ButtonColor, type ButtonProps, Calendar, type CalendarMode, type CalendarProps, Callout, type CalloutProps, Card, type CardBodyProps, type CardFooterProps, type CardHeaderProps, type CardProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, type CarouselVariant, Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps, ChatDrawer, type ChatDrawerProps, type ChatDrawerTab, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CodeView, type CodeViewProps, type Color, ColorPicker, type ColorPickerProps, Command, type CommandContextValue, type CommandEmptyProps, type CommandGroupProps, type CommandInputProps, type CommandItemProps, type CommandListProps, type CommandProps, Composer, type ComposerProps, ContentRenderer, type ContentRendererProps, ContextMenu, type ContextMenuContentProps, type ContextMenuContextValue, type ContextMenuItemProps, type ContextMenuProps, type ContextMenuSeparatorProps, type ContextMenuTriggerProps, type ControlledAdapterHandle, DatePicker, type DatePickerProps, type DateRange, DisplayValue, type DisplayValueProps, Drawer, type DrawerAttach, type DrawerBodyProps, type DrawerContainerProps, type DrawerContextValue, type DrawerFooterProps, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, type DropPosition, Dropdown, type DropdownContextValue, type DropdownItemProps, type DropdownItemsProps, type DropdownProps, type DropdownSeparatorProps, type DropdownTriggerProps, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, type EditorAction, type EditorContentProps, type EditorContextValue, type EditorProps, type EditorSourceToggleProps, type EditorToolbarProps, Emoji, type EmojiCategory, type EmojiCategoryKey, type EmojiEntry, type EmojiFlatEntry, type EmojiProps, EmojiSelect, type EmojiSelectProps, FauxClient, type FauxClientProps, Field, type FieldMode, FieldModeContext, type FieldModeContextValue, type FieldProps, FileBrowser, type FileBrowserContextValue, type FileBrowserNodeProps, type FileBrowserPathBarProps, type FileBrowserProps, type FileBrowserProvider, type FileBrowserRow, type FileBrowserToolbarProps, type FileBrowserTreeProps, type FileEntry, type FileKind, type FileLoadStatus, type FileSelectMode, type FileSnapshotNode, type FileSort, type FileSortDirection, type FileSortField, FileUpload, type FileUploadContextValue, type FileUploadDropzoneProps, type FileUploadListProps, type FileUploadProps, Form, type FormProps, FormProvider, type FormProviderProps, Heading, type HeadingProps, Icon, type IconProps, type IconSet, ImageViewer, type ImageViewerProps, type ImageViewerViewport, Input, type InputAffixProps, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, InputTag, type InputTagAdapter, type InputTagAdapterState, type InputTagProps, type InputTagTrigger, type InputTagTriggers, Kanban, type KanbanCardMoveHandler, type KanbanCardProps, type KanbanColumnHandleProps, type KanbanColumnMoveHandler, type KanbanColumnProps, type KanbanContextValue, type KanbanProps, MagicWand, type MagicWandAction, type MagicWandAppearance, type MagicWandProps, type MagicWandSelection, Marquee, type MarqueeDirection, type MarqueeProps, type MediaKind, MediaViewer, type MediaViewerProps, Menu, type MenuContextValue, type MenuGroupProps, type MenuItemProps, type MenuOrientation, type MenuProps, type MenuSubmenuProps, MobileMenu, type MobileMenuBottomBarProps, type MobileMenuContextValue, type MobileMenuFlyoutProps, type MobileMenuItemProps, type MobileMenuSide, type MobileMenuVariant, Modal, type ModalBodyProps, type ModalContextValue, type ModalFooterProps, type ModalHeaderProps, type ModalProps, MoodMeter, type MoodMeterProps, MultiSwitch, type MultiSwitchProps, Navbar, type NavbarBrandProps, type NavbarContextValue, type NavbarItemProps, type NavbarItemsProps, type NavbarProps, type NavbarToggleProps, type NodeRect, OtpInput, type OtpInputProps, Pagination, type PaginationProps, PdfViewer, type PdfViewerProps, Pillbox, type PillboxProps, type Placement, Popover, type PopoverContentProps, type PopoverContextValue, type PopoverProps, type PopoverTriggerProps, Portal, type PortalProps, Profile, type ProfileProps, Progress, type ProgressProps, type PromptAttachment, type PromptCmd, PromptInput, type PromptInputProps, type PromptMention, RadioGroup, type RadioGroupProps, ReasonTag, type ReasonTagProps, type ReasonTagSource, type ReasonTagTheme, type RenderExtension, type RenderExtensionProps, type ResolveMediaTypeInput, SKIN_TONES, type SectionRenderState, type SectionRenderable, Select, type SelectProps, Separator, type SeparatorProps, Sidebar, type SidebarCollapseMode, type SidebarContextValue, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSubmenuProps, type SidebarToggleProps, type Size, Skeleton, type SkeletonProps, type SkinTone, Slider, type SliderProps, StickyNote, type StickyNoteColor, type StickyNoteProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableRowTrayProps, type TableSearchProps, type TableTrayProps, Tabs, type TabsContextValue, type TabsListProps, type TabsPanelProps, type TabsPanelsProps, type TabsProps, type TabsTabProps, type TabsVariant, Text, type TextProps, Textarea, type TextareaProps, TimeGrid, type TimeGridProps, type TimeGridTone, TimePicker, type TimePickerProps, Timeline, type TimelineBlockProps, type TimelineEvent, type TimelineItemProps, type TimelineOrientation, type TimelineProps, type TimelineVariant, Toast, type ToastContextValue, type ToastData, type ToastPosition, type ToastProviderProps, type ToastVariant, Tooltip, type TooltipProps, TreeNav, type TreeNavContextValue, type TreeNavProps, type TreeNodeData, type TreeNodeProps, type Variant, VideoViewer, type VideoViewerProps, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDrawer, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
package/dist/index.js
CHANGED
|
@@ -8605,6 +8605,208 @@ var Modal = Object.assign(ModalRoot, {
|
|
|
8605
8605
|
Body: ModalBody,
|
|
8606
8606
|
Footer: ModalFooter
|
|
8607
8607
|
});
|
|
8608
|
+
var DrawerContext = createContext(null);
|
|
8609
|
+
function useDrawer() {
|
|
8610
|
+
const ctx = useContext(DrawerContext);
|
|
8611
|
+
if (!ctx) {
|
|
8612
|
+
throw new Error("Drawer compound components must be used within <Drawer>");
|
|
8613
|
+
}
|
|
8614
|
+
return ctx;
|
|
8615
|
+
}
|
|
8616
|
+
function DrawerHeader({ children, closable = true, className }) {
|
|
8617
|
+
const { close } = useDrawer();
|
|
8618
|
+
return /* @__PURE__ */ jsxs(
|
|
8619
|
+
"div",
|
|
8620
|
+
{
|
|
8621
|
+
"data-react-fancy-drawer-header": "",
|
|
8622
|
+
className: cn(
|
|
8623
|
+
"flex shrink-0 items-center justify-between border-b border-zinc-200 px-4 py-3 dark:border-zinc-700",
|
|
8624
|
+
className
|
|
8625
|
+
),
|
|
8626
|
+
children: [
|
|
8627
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children }),
|
|
8628
|
+
closable ? /* @__PURE__ */ jsx(
|
|
8629
|
+
"button",
|
|
8630
|
+
{
|
|
8631
|
+
type: "button",
|
|
8632
|
+
onClick: close,
|
|
8633
|
+
className: "rounded-lg p-1 text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300",
|
|
8634
|
+
"aria-label": "Close",
|
|
8635
|
+
children: /* @__PURE__ */ jsx(X, { size: 18 })
|
|
8636
|
+
}
|
|
8637
|
+
) : null
|
|
8638
|
+
]
|
|
8639
|
+
}
|
|
8640
|
+
);
|
|
8641
|
+
}
|
|
8642
|
+
DrawerHeader.displayName = "DrawerHeader";
|
|
8643
|
+
function DrawerBody({ children, className }) {
|
|
8644
|
+
return /* @__PURE__ */ jsx(
|
|
8645
|
+
"div",
|
|
8646
|
+
{
|
|
8647
|
+
"data-react-fancy-drawer-body": "",
|
|
8648
|
+
className: cn("min-h-0 flex-1 overflow-auto px-4 py-3 text-zinc-700 dark:text-zinc-300", className),
|
|
8649
|
+
children
|
|
8650
|
+
}
|
|
8651
|
+
);
|
|
8652
|
+
}
|
|
8653
|
+
DrawerBody.displayName = "DrawerBody";
|
|
8654
|
+
function DrawerFooter({ children, className }) {
|
|
8655
|
+
return /* @__PURE__ */ jsx(
|
|
8656
|
+
"div",
|
|
8657
|
+
{
|
|
8658
|
+
"data-react-fancy-drawer-footer": "",
|
|
8659
|
+
className: cn(
|
|
8660
|
+
"flex shrink-0 items-center justify-end gap-2 border-t border-zinc-200 px-4 py-3 dark:border-zinc-700",
|
|
8661
|
+
className
|
|
8662
|
+
),
|
|
8663
|
+
children
|
|
8664
|
+
}
|
|
8665
|
+
);
|
|
8666
|
+
}
|
|
8667
|
+
DrawerFooter.displayName = "DrawerFooter";
|
|
8668
|
+
function DrawerContainer({ children, className, ...rest }) {
|
|
8669
|
+
return /* @__PURE__ */ jsx(
|
|
8670
|
+
"div",
|
|
8671
|
+
{
|
|
8672
|
+
"data-react-fancy-drawer-container": "",
|
|
8673
|
+
...rest,
|
|
8674
|
+
className: cn("relative overflow-hidden", className),
|
|
8675
|
+
children
|
|
8676
|
+
}
|
|
8677
|
+
);
|
|
8678
|
+
}
|
|
8679
|
+
DrawerContainer.displayName = "DrawerContainer";
|
|
8680
|
+
var WIDTH = {
|
|
8681
|
+
sm: "w-64",
|
|
8682
|
+
md: "w-80",
|
|
8683
|
+
lg: "w-96",
|
|
8684
|
+
xl: "w-[32rem]",
|
|
8685
|
+
full: "w-full"
|
|
8686
|
+
};
|
|
8687
|
+
var HEIGHT = {
|
|
8688
|
+
sm: "h-32",
|
|
8689
|
+
md: "h-64",
|
|
8690
|
+
lg: "h-96",
|
|
8691
|
+
xl: "h-[32rem]",
|
|
8692
|
+
full: "h-full"
|
|
8693
|
+
};
|
|
8694
|
+
var ANCHOR = {
|
|
8695
|
+
left: "inset-y-0 left-0",
|
|
8696
|
+
right: "inset-y-0 right-0",
|
|
8697
|
+
top: "inset-x-0 top-0",
|
|
8698
|
+
bottom: "inset-x-0 bottom-0"
|
|
8699
|
+
};
|
|
8700
|
+
var ENTER = {
|
|
8701
|
+
left: "fancy-slide-in-left",
|
|
8702
|
+
right: "fancy-slide-in-right",
|
|
8703
|
+
top: "fancy-slide-in-top",
|
|
8704
|
+
bottom: "fancy-slide-in-bottom"
|
|
8705
|
+
};
|
|
8706
|
+
var EXIT = {
|
|
8707
|
+
left: "fancy-slide-out-left",
|
|
8708
|
+
right: "fancy-slide-out-right",
|
|
8709
|
+
top: "fancy-slide-out-top",
|
|
8710
|
+
bottom: "fancy-slide-out-bottom"
|
|
8711
|
+
};
|
|
8712
|
+
var EDGE = {
|
|
8713
|
+
left: "border-r",
|
|
8714
|
+
right: "border-l",
|
|
8715
|
+
top: "border-b",
|
|
8716
|
+
bottom: "border-t"
|
|
8717
|
+
};
|
|
8718
|
+
function DrawerRoot({
|
|
8719
|
+
children,
|
|
8720
|
+
open,
|
|
8721
|
+
onClose,
|
|
8722
|
+
side = "right",
|
|
8723
|
+
size = "md",
|
|
8724
|
+
attach = "viewport",
|
|
8725
|
+
backdrop = true,
|
|
8726
|
+
dismissOnBackdrop = true,
|
|
8727
|
+
dismissOnEscape = true,
|
|
8728
|
+
className,
|
|
8729
|
+
...rest
|
|
8730
|
+
}) {
|
|
8731
|
+
const panelRef = useRef(null);
|
|
8732
|
+
const horizontal = side === "left" || side === "right";
|
|
8733
|
+
const isViewport = attach === "viewport";
|
|
8734
|
+
const close = useCallback(() => onClose(), [onClose]);
|
|
8735
|
+
useEscapeKey(close, open && dismissOnEscape);
|
|
8736
|
+
useFocusTrap(panelRef, open && isViewport);
|
|
8737
|
+
useEffect(() => {
|
|
8738
|
+
if (!open || !isViewport) return;
|
|
8739
|
+
const original = document.body.style.overflow;
|
|
8740
|
+
document.body.style.overflow = "hidden";
|
|
8741
|
+
return () => {
|
|
8742
|
+
document.body.style.overflow = original;
|
|
8743
|
+
};
|
|
8744
|
+
}, [open, isViewport]);
|
|
8745
|
+
const { mounted, className: animClass, ref: animRef } = useAnimation({
|
|
8746
|
+
open,
|
|
8747
|
+
enterClass: ENTER[side],
|
|
8748
|
+
exitClass: EXIT[side]
|
|
8749
|
+
});
|
|
8750
|
+
const ctx = useMemo(() => ({ open, close, side }), [open, close, side]);
|
|
8751
|
+
if (!mounted) return null;
|
|
8752
|
+
const frame = /* @__PURE__ */ jsxs(
|
|
8753
|
+
"div",
|
|
8754
|
+
{
|
|
8755
|
+
"data-react-fancy-drawer-frame": "",
|
|
8756
|
+
className: cn(isViewport ? "fixed inset-0 z-50" : "absolute inset-0 z-20", !backdrop && "pointer-events-none"),
|
|
8757
|
+
children: [
|
|
8758
|
+
backdrop ? /* @__PURE__ */ jsx(
|
|
8759
|
+
"div",
|
|
8760
|
+
{
|
|
8761
|
+
"data-react-fancy-drawer-backdrop": "",
|
|
8762
|
+
className: cn(
|
|
8763
|
+
"absolute inset-0 bg-black/40 transition-opacity",
|
|
8764
|
+
isViewport && "backdrop-blur-sm",
|
|
8765
|
+
open ? "opacity-100" : "opacity-0"
|
|
8766
|
+
),
|
|
8767
|
+
onClick: dismissOnBackdrop ? close : void 0,
|
|
8768
|
+
"aria-hidden": "true"
|
|
8769
|
+
}
|
|
8770
|
+
) : null,
|
|
8771
|
+
/* @__PURE__ */ jsx(
|
|
8772
|
+
"div",
|
|
8773
|
+
{
|
|
8774
|
+
ref: (node) => {
|
|
8775
|
+
panelRef.current = node;
|
|
8776
|
+
animRef.current = node;
|
|
8777
|
+
},
|
|
8778
|
+
"data-react-fancy-drawer": "",
|
|
8779
|
+
"data-side": side,
|
|
8780
|
+
role: "dialog",
|
|
8781
|
+
"aria-modal": isViewport || void 0,
|
|
8782
|
+
...rest,
|
|
8783
|
+
className: cn(
|
|
8784
|
+
"pointer-events-auto absolute flex flex-col border-zinc-200 bg-white shadow-xl dark:border-zinc-700 dark:bg-zinc-900",
|
|
8785
|
+
ANCHOR[side],
|
|
8786
|
+
EDGE[side],
|
|
8787
|
+
horizontal ? WIDTH[size] : HEIGHT[size],
|
|
8788
|
+
// Cross-axis fills the anchor; the main axis is capped so a viewport
|
|
8789
|
+
// drawer can never grow past the screen on a small device.
|
|
8790
|
+
horizontal ? "h-full" : "w-full",
|
|
8791
|
+
isViewport && (horizontal ? "max-w-[90vw]" : "max-h-[90vh]"),
|
|
8792
|
+
!isViewport && (horizontal ? "max-w-full" : "max-h-full"),
|
|
8793
|
+
animClass,
|
|
8794
|
+
className
|
|
8795
|
+
),
|
|
8796
|
+
children
|
|
8797
|
+
}
|
|
8798
|
+
)
|
|
8799
|
+
]
|
|
8800
|
+
}
|
|
8801
|
+
);
|
|
8802
|
+
return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctx, children: isViewport ? /* @__PURE__ */ jsx(Portal, { children: frame }) : frame });
|
|
8803
|
+
}
|
|
8804
|
+
var Drawer = Object.assign(DrawerRoot, {
|
|
8805
|
+
Header: DrawerHeader,
|
|
8806
|
+
Body: DrawerBody,
|
|
8807
|
+
Footer: DrawerFooter,
|
|
8808
|
+
Container: DrawerContainer
|
|
8809
|
+
});
|
|
8608
8810
|
var ToastContext = createContext(null);
|
|
8609
8811
|
function useToast() {
|
|
8610
8812
|
const ctx = useContext(ToastContext);
|
|
@@ -9147,6 +9349,7 @@ function BreadcrumbsItem({
|
|
|
9147
9349
|
children,
|
|
9148
9350
|
href,
|
|
9149
9351
|
active = false,
|
|
9352
|
+
onClick,
|
|
9150
9353
|
className
|
|
9151
9354
|
}) {
|
|
9152
9355
|
const baseClass = cn(
|
|
@@ -9157,6 +9360,18 @@ function BreadcrumbsItem({
|
|
|
9157
9360
|
if (href && !active) {
|
|
9158
9361
|
return /* @__PURE__ */ jsx("a", { "data-react-fancy-breadcrumbs-item": "", href, className: baseClass, children });
|
|
9159
9362
|
}
|
|
9363
|
+
if (onClick && !active) {
|
|
9364
|
+
return /* @__PURE__ */ jsx(
|
|
9365
|
+
"button",
|
|
9366
|
+
{
|
|
9367
|
+
type: "button",
|
|
9368
|
+
"data-react-fancy-breadcrumbs-item": "",
|
|
9369
|
+
onClick,
|
|
9370
|
+
className: cn(baseClass, "cursor-pointer border-0 bg-transparent p-0"),
|
|
9371
|
+
children
|
|
9372
|
+
}
|
|
9373
|
+
);
|
|
9374
|
+
}
|
|
9160
9375
|
return /* @__PURE__ */ jsx("span", { "data-react-fancy-breadcrumbs-item": "", className: baseClass, "aria-current": active ? "page" : void 0, children });
|
|
9161
9376
|
}
|
|
9162
9377
|
BreadcrumbsItem.displayName = "BreadcrumbsItem";
|
|
@@ -16062,6 +16277,6 @@ var MediaViewer = forwardRef(
|
|
|
16062
16277
|
);
|
|
16063
16278
|
MediaViewer.displayName = "MediaViewer";
|
|
16064
16279
|
|
|
16065
|
-
export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, AudioViewer, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, CodeView, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, DisplayValue, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FieldModeContext, FileBrowser, FileUpload, Form, FormProvider, Heading, Icon, ImageViewer, Input, InputTag, Kanban, MagicWand, Marquee, MediaViewer, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, PdfViewer, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, VideoViewer, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
16280
|
+
export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, AudioViewer, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Button, Calendar, Callout, Card, Carousel, Chart, ChatDrawer, Checkbox, CheckboxGroup, CodeView, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, DisplayValue, Drawer, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, FauxClient, Field, FieldModeContext, FileBrowser, FileUpload, Form, FormProvider, Heading, Icon, ImageViewer, Input, InputTag, Kanban, MagicWand, Marquee, MediaViewer, Menu2 as Menu, MobileMenu, Modal, MoodMeter, MultiSwitch, Navbar, OtpInput, Pagination, PdfViewer, Pillbox, Popover, Portal, Profile, Progress, PromptInput, RadioGroup, ReasonTag, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, StickyNote, Switch, Table, Tabs, Text, Textarea, TimeGrid, TimePicker, Timeline, Toast, Tooltip, TreeNav, VideoViewer, applyTone, cn, configureIcons, contentEditableAdapter, controlledAdapter, find, hasSkinTones, inputAdapter, registerExtension, registerExtensions, registerIconAddendum, registerIconSet, registerIcons, resolve, resolveMediaType, sanitizeHref, sanitizeHtml, search, skinTones, textareaAdapter, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDrawer, useDropdown, useEditor, useEscapeKey, useFieldMode, useFileBrowser, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
|
|
16066
16281
|
//# sourceMappingURL=index.js.map
|
|
16067
16282
|
//# sourceMappingURL=index.js.map
|