@lobehub/ui 4.9.3 → 4.10.1
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/es/Accordion/Accordion.d.mts +2 -2
- package/es/Accordion/AccordionItem.d.mts +2 -2
- package/es/ActionIcon/ActionIcon.d.mts +2 -2
- package/es/Alert/Alert.d.mts +2 -2
- package/es/AutoComplete/Select.d.mts +2 -2
- package/es/Avatar/AvatarGroup/index.d.mts +2 -2
- package/es/Burger/Burger.d.mts +2 -2
- package/es/CodeEditor/CodeEditor.d.mts +2 -2
- package/es/Collapse/Collapse.d.mts +2 -2
- package/es/ContextMenu/ContextMenuHost.d.mts +2 -2
- package/es/CopyButton/CopyButton.d.mts +2 -2
- package/es/DatePicker/DatePicker.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelBody.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelContainer.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelFooter.d.mts +2 -2
- package/es/DraggablePanel/components/DraggablePanelHeader.d.mts +2 -2
- package/es/DraggablePanel/style.mjs +1 -1
- package/es/DraggablePanel/style.mjs.map +1 -1
- package/es/DraggableSideNav/DraggableSideNav.d.mts +2 -2
- package/es/Drawer/Drawer.d.mts +2 -2
- package/es/Dropdown/Dropdown.d.mts +9 -2
- package/es/Dropdown/Dropdown.mjs +6 -0
- package/es/Dropdown/Dropdown.mjs.map +1 -1
- package/es/DropdownMenu/DropdownMenu.d.mts +2 -2
- package/es/DropdownMenu/DropdownMenu.mjs +20 -36
- package/es/DropdownMenu/DropdownMenu.mjs.map +1 -1
- package/es/DropdownMenu/type.d.mts +2 -1
- package/es/EditableText/EditableText.d.mts +2 -2
- package/es/EmojiPicker/EmojiPicker.d.mts +2 -2
- package/es/Flex/FlexBasic.d.mts +2 -2
- package/es/Footer/Footer.d.mts +2 -2
- package/es/Form/components/FormGroup.d.mts +2 -2
- package/es/Form/components/FormItem.d.mts +2 -2
- package/es/Form/components/FormSubmitFooter.d.mts +2 -2
- package/es/FormModal/FormModal.d.mts +2 -2
- package/es/GuideCard/GuideCard.d.mts +2 -2
- package/es/Header/Header.d.mts +2 -2
- package/es/Highlighter/Highlighter.d.mts +2 -2
- package/es/Highlighter/SyntaxHighlighter/index.d.mts +2 -2
- package/es/Hotkey/Hotkey.d.mts +2 -2
- package/es/HotkeyInput/HotkeyInput.d.mts +2 -2
- package/es/Icon/Icon.d.mts +2 -2
- package/es/Icon/components/IconProvider.d.mts +3 -3
- package/es/Image/PreviewGroup.d.mts +2 -2
- package/es/ImageSelect/ImageSelect.d.mts +2 -2
- package/es/Input/Input.d.mts +2 -2
- package/es/Input/InputNumber.d.mts +2 -2
- package/es/Input/InputOPT.d.mts +2 -2
- package/es/Input/InputPassword.d.mts +2 -2
- package/es/Input/TextArea.d.mts +2 -2
- package/es/Layout/components/LayoutFooter.d.mts +2 -2
- package/es/Layout/components/LayoutHeader.d.mts +2 -2
- package/es/Layout/components/LayoutMain.d.mts +2 -2
- package/es/Layout/components/LayoutSidebar.d.mts +2 -2
- package/es/Layout/components/LayoutSidebarInner.d.mts +2 -2
- package/es/Layout/components/LayoutToc.d.mts +2 -2
- package/es/List/ListItem/index.d.mts +2 -2
- package/es/Markdown/Markdown.d.mts +2 -2
- package/es/Markdown/Typography.d.mts +2 -2
- package/es/MaskShadow/MaskShadow.d.mts +2 -2
- package/es/Menu/Menu.d.mts +2 -2
- package/es/Menu/sharedStyle.mjs +56 -10
- package/es/Menu/sharedStyle.mjs.map +1 -1
- package/es/Mermaid/Mermaid.d.mts +2 -2
- package/es/Mermaid/SyntaxMermaid/index.d.mts +2 -2
- package/es/Modal/Modal.d.mts +2 -2
- package/es/Modal/ModalProvider.d.mts +2 -2
- package/es/Popover/ArrowIcon.mjs +22 -0
- package/es/Popover/ArrowIcon.mjs.map +1 -0
- package/es/Popover/Popover.d.mts +9 -0
- package/es/Popover/Popover.mjs +20 -0
- package/es/Popover/Popover.mjs.map +1 -0
- package/es/Popover/PopoverGroup.d.mts +11 -0
- package/es/Popover/PopoverGroup.mjs +96 -0
- package/es/Popover/PopoverGroup.mjs.map +1 -0
- package/es/Popover/PopoverInGroup.mjs +60 -0
- package/es/Popover/PopoverInGroup.mjs.map +1 -0
- package/es/Popover/PopoverPortal.mjs +45 -0
- package/es/Popover/PopoverPortal.mjs.map +1 -0
- package/es/Popover/PopoverStandalone.mjs +172 -0
- package/es/Popover/PopoverStandalone.mjs.map +1 -0
- package/es/Popover/groupContext.d.mts +14 -0
- package/es/Popover/groupContext.mjs +11 -0
- package/es/Popover/groupContext.mjs.map +1 -0
- package/es/Popover/index.d.mts +5 -0
- package/es/Popover/index.d.ts +1 -0
- package/es/Popover/index.js +1 -0
- package/es/Popover/index.mjs +5 -0
- package/es/Popover/parseTrigger.d.mts +14 -0
- package/es/Popover/parseTrigger.mjs +18 -0
- package/es/Popover/parseTrigger.mjs.map +1 -0
- package/es/Popover/style.mjs +218 -0
- package/es/Popover/style.mjs.map +1 -0
- package/es/Popover/type.d.mts +113 -0
- package/es/Popover/useMergedPopoverProps.mjs +88 -0
- package/es/Popover/useMergedPopoverProps.mjs.map +1 -0
- package/es/SearchBar/SearchBar.d.mts +2 -2
- package/es/Segmented/Segmented.d.mts +2 -2
- package/es/Select/Select.d.mts +2 -2
- package/es/SideNav/SideNav.d.mts +2 -2
- package/es/SliderWithInput/SliderWithInput.d.mts +2 -2
- package/es/SortableList/components/DragHandle.d.mts +2 -2
- package/es/SortableList/components/SortableItem.d.mts +2 -2
- package/es/ThemeProvider/ThemeProvider.d.mts +2 -2
- package/es/Toc/Toc.d.mts +2 -2
- package/es/Tooltip/TooltipGroup.mjs +2 -2
- package/es/Tooltip/TooltipGroup.mjs.map +1 -1
- package/es/Tooltip/type.d.mts +2 -2
- package/es/Tooltip/useTooltipFloating.mjs +2 -2
- package/es/Tooltip/useTooltipFloating.mjs.map +1 -1
- package/es/awesome/AuroraBackground/AuroraBackground.d.mts +2 -2
- package/es/awesome/BottomGradientButton/BottomGradientButton.d.mts +2 -2
- package/es/awesome/Features/Features.d.mts +2 -2
- package/es/awesome/Giscus/Giscus.d.mts +2 -2
- package/es/awesome/GradientButton/GradientButton.d.mts +2 -2
- package/es/awesome/GridBackground/GridBackground.d.mts +2 -2
- package/es/awesome/GridBackground/GridShowcase.d.mts +2 -2
- package/es/awesome/Hero/Hero.d.mts +2 -2
- package/es/awesome/Spline/Spine.d.mts +2 -2
- package/es/awesome/Spotlight/Spotlight.d.mts +2 -2
- package/es/awesome/SpotlightCard/SpotlightCard.d.mts +2 -2
- package/es/awesome/TypewriterEffect/TypewriterEffect.d.mts +2 -2
- package/es/brand/LobeChat/index.d.mts +2 -2
- package/es/brand/LobeHub/index.d.mts +2 -2
- package/es/brand/LogoThree/LogoSpline.d.mts +2 -2
- package/es/brand/LogoThree/index.d.mts +2 -2
- package/es/chat/BackBottom/BackBottom.d.mts +2 -2
- package/es/chat/ChatInputArea/components/ChatInputAreaInner.d.mts +2 -2
- package/es/chat/ChatItem/ChatItem.d.mts +2 -2
- package/es/chat/ChatList/ChatList.d.mts +2 -2
- package/es/chat/EditableMessage/EditableMessage.d.mts +2 -2
- package/es/chat/EditableMessageList/EditableMessageList.d.mts +2 -2
- package/es/chat/MessageInput/MessageInput.d.mts +2 -2
- package/es/chat/MessageModal/MessageModal.d.mts +2 -2
- package/es/color/ColorScales/index.d.mts +2 -2
- package/es/color/CssVar/index.d.mts +2 -2
- package/es/i18n/context.d.mts +2 -2
- package/es/icons/lucideExtra/BotPromptIcon.d.mts +2 -2
- package/es/icons/lucideExtra/CreateBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/DiscordIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GlobeOffIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotIcon.d.mts +2 -2
- package/es/icons/lucideExtra/GroupBotSquareIcon.d.mts +2 -2
- package/es/icons/lucideExtra/LeftClickIcon.d.mts +2 -2
- package/es/icons/lucideExtra/LeftDoubleClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/McpIcon.d.mts +3 -3
- package/es/icons/lucideExtra/ProviderIcon.d.mts +3 -3
- package/es/icons/lucideExtra/RightClickIcon.d.mts +2 -2
- package/es/icons/lucideExtra/RightDoubleClickIcon.d.mts +3 -3
- package/es/icons/lucideExtra/ShapesUploadIcon.d.mts +3 -3
- package/es/icons/lucideExtra/TreeDownRightIcon.d.mts +3 -3
- package/es/icons/lucideExtra/TreeUpDownRightIcon.d.mts +3 -3
- package/es/index.d.mts +6 -1
- package/es/index.mjs +4 -1
- package/es/mdx/Mdx/index.d.mts +2 -2
- package/es/mobile/ChatHeader/ChatHeaderTitle.d.mts +2 -2
- package/es/mobile/ChatInputArea/components/ChatSendButton.d.mts +2 -2
- package/es/mobile/TabBar/TabBar.d.mts +2 -2
- package/es/storybook/StoryBook/index.d.mts +2 -2
- package/es/utils/placement.d.mts +31 -0
- package/es/utils/placement.mjs +100 -0
- package/es/utils/placement.mjs.map +1 -0
- package/package.json +1 -1
- package/es/Tooltip/antdPlacementToFloating.mjs +0 -27
- package/es/Tooltip/antdPlacementToFloating.mjs.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AccordionProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react32 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/Accordion.d.ts
|
|
5
|
-
declare const Accordion:
|
|
5
|
+
declare const Accordion: react32.NamedExoticComponent<AccordionProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Accordion };
|
|
8
8
|
//# sourceMappingURL=Accordion.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AccordionItemProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react33 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/AccordionItem.d.ts
|
|
5
|
-
declare const AccordionItem:
|
|
5
|
+
declare const AccordionItem: react33.NamedExoticComponent<AccordionItemProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AccordionItem };
|
|
8
8
|
//# sourceMappingURL=AccordionItem.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { ActionIconProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react73 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/ActionIcon/ActionIcon.d.ts
|
|
5
|
-
declare const ActionIcon:
|
|
5
|
+
declare const ActionIcon: react73.NamedExoticComponent<ActionIconProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ActionIcon };
|
|
8
8
|
//# sourceMappingURL=ActionIcon.d.mts.map
|
package/es/Alert/Alert.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AlertProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react42 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Alert/Alert.d.ts
|
|
5
|
-
declare const Alert:
|
|
5
|
+
declare const Alert: react42.NamedExoticComponent<AlertProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Alert };
|
|
8
8
|
//# sourceMappingURL=Alert.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AutoCompleteProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react43 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/AutoComplete/Select.d.ts
|
|
5
|
-
declare const AutoComplete:
|
|
5
|
+
declare const AutoComplete: react43.NamedExoticComponent<AutoCompleteProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AutoComplete };
|
|
8
8
|
//# sourceMappingURL=Select.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { AvatarGroupProps } from "../type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react74 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Avatar/AvatarGroup/index.d.ts
|
|
5
|
-
declare const AvatarGroup:
|
|
5
|
+
declare const AvatarGroup: react74.NamedExoticComponent<AvatarGroupProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AvatarGroup };
|
|
8
8
|
//# sourceMappingURL=index.d.mts.map
|
package/es/Burger/Burger.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { BurgerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react41 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Burger/Burger.d.ts
|
|
5
|
-
declare const Burger:
|
|
5
|
+
declare const Burger: react41.NamedExoticComponent<BurgerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Burger };
|
|
8
8
|
//# sourceMappingURL=Burger.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CodeEditorProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react40 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CodeEditor/CodeEditor.d.ts
|
|
5
|
-
declare const CodeEditor:
|
|
5
|
+
declare const CodeEditor: react40.NamedExoticComponent<CodeEditorProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { CodeEditor };
|
|
8
8
|
//# sourceMappingURL=CodeEditor.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CollapseProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react0 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Collapse/Collapse.d.ts
|
|
5
|
-
declare const Collapse:
|
|
5
|
+
declare const Collapse: react0.NamedExoticComponent<CollapseProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Collapse };
|
|
8
8
|
//# sourceMappingURL=Collapse.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react117 from "react";
|
|
2
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
//#region src/ContextMenu/ContextMenuHost.d.ts
|
|
5
|
-
declare const ContextMenuHost:
|
|
5
|
+
declare const ContextMenuHost: react117.MemoExoticComponent<() => react_jsx_runtime0.JSX.Element | null>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { ContextMenuHost };
|
|
8
8
|
//# sourceMappingURL=ContextMenuHost.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { CopyButtonProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react7 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CopyButton/CopyButton.d.ts
|
|
5
|
-
declare const CopyButton:
|
|
5
|
+
declare const CopyButton: react7.NamedExoticComponent<CopyButtonProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { CopyButton };
|
|
8
8
|
//# sourceMappingURL=CopyButton.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DatePickerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react36 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DatePicker/DatePicker.d.ts
|
|
5
|
-
declare const DatePicker:
|
|
5
|
+
declare const DatePicker: react36.NamedExoticComponent<DatePickerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DatePicker };
|
|
8
8
|
//# sourceMappingURL=DatePicker.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react28 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelBody.d.ts
|
|
5
5
|
type DraggablePanelBodyProps = DivProps;
|
|
6
|
-
declare const DraggablePanelBody:
|
|
6
|
+
declare const DraggablePanelBody: react28.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelBody, DraggablePanelBodyProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelBody.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react29 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
|
|
5
5
|
type DraggablePanelContainerProps = DivProps;
|
|
6
|
-
declare const DraggablePanelContainer:
|
|
6
|
+
declare const DraggablePanelContainer: react29.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelContainer, DraggablePanelContainerProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelContainer.d.mts.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react30 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
|
|
5
5
|
type DraggablePanelFooterProps = DivProps;
|
|
6
|
-
declare const DraggablePanelFooter:
|
|
6
|
+
declare const DraggablePanelFooter: react30.NamedExoticComponent<DivProps>;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { DraggablePanelFooter, DraggablePanelFooterProps };
|
|
9
9
|
//# sourceMappingURL=DraggablePanelFooter.d.mts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { DivProps } from "../../types/index.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react31 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
|
|
5
5
|
interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
|
|
@@ -9,7 +9,7 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
|
|
|
9
9
|
setPin?: (pin: boolean) => void;
|
|
10
10
|
title?: string;
|
|
11
11
|
}
|
|
12
|
-
declare const DraggablePanelHeader:
|
|
12
|
+
declare const DraggablePanelHeader: react31.NamedExoticComponent<DraggablePanelHeaderProps>;
|
|
13
13
|
//#endregion
|
|
14
14
|
export { DraggablePanelHeader, DraggablePanelHeaderProps };
|
|
15
15
|
//# sourceMappingURL=DraggablePanelHeader.d.mts.map
|
|
@@ -73,7 +73,7 @@ const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
|
|
|
73
73
|
const handleHighlightStyle = css$1`
|
|
74
74
|
&:hover {
|
|
75
75
|
&::before {
|
|
76
|
-
background: ${cssVar$1.
|
|
76
|
+
background: ${cssVar$1.colorPrimaryBorder};
|
|
77
77
|
box-shadow: 0 0 8px color-mix(in srgb, ${cssVar$1.colorPrimary} 25%, transparent);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\n// Layout constants\nconst LAYOUT = {\n offset: 16,\n toggleLength: 54,\n toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nconst prefix = `${prefixCls}-draggable-panel`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n // Base styles - border styles split by showBorder\n const borderStyles = {\n borderBottom: css`\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderBottomNone: css`\n border-block-end-width: 0;\n `,\n borderLeft: css`\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderLeftNone: css`\n border-inline-start-width: 0;\n `,\n borderRight: css`\n border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderRightNone: css`\n border-inline-end-width: 0;\n `,\n borderTop: css`\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderTopNone: css`\n border-block-start-width: 0;\n `,\n };\n\n // Position styles\n const float = css`\n position: absolute;\n z-index: 200;\n `;\n\n const floatPositions = {\n bottomFloat: cx(\n float,\n css`\n inset-block-end: 0;\n inset-inline: 0 0;\n width: 100%;\n `,\n ),\n leftFloat: cx(\n float,\n css`\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline-start: 0;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n `,\n ),\n rightFloat: cx(\n float,\n css`\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline-end: 0;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n `,\n ),\n topFloat: cx(\n float,\n css`\n inset-block-start: var(--draggable-panel-header-height, 0);\n inset-inline: 0 0;\n width: 100%;\n `,\n ),\n };\n\n // Handle styles\n const handleBaseStyle = css`\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n transition: all 0.2s ${cssVar.motionEaseOut};\n }\n `;\n\n const handleHighlightStyle = css`\n &:hover {\n &::before {\n background: ${cssVar.colorPrimary};\n box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n }\n }\n\n &:active {\n &::before {\n background: ${cssVar.colorPrimary} !important;\n }\n }\n `;\n\n const handleStyles = {\n handleBottom: cx(\n `${prefix}-bottom-handle`,\n css`\n &::before {\n inset-block-end: 50%;\n width: 100%;\n height: 2px;\n }\n `,\n ),\n handleLeft: cx(\n `${prefix}-left-handle`,\n css`\n &::before {\n inset-inline-start: 50%;\n width: 2px;\n height: 100%;\n }\n `,\n ),\n handleRight: cx(\n `${prefix}-right-handle`,\n css`\n &::before {\n inset-inline-end: 50%;\n width: 2px;\n height: 100%;\n }\n `,\n ),\n handleRoot: handleBaseStyle,\n handleTop: cx(\n `${prefix}-top-handle`,\n css`\n &::before {\n inset-block-start: 50%;\n width: 100%;\n height: 2px;\n }\n `,\n ),\n };\n\n // Toggle styles - base class with variant for showHandleWideArea\n const toggleRoot = cx(\n `${prefix}-toggle`,\n css`\n position: absolute;\n z-index: 50;\n opacity: 0;\n transition: all 0.2s ${cssVar.motionEaseOut};\n\n &:hover,\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n pointer-events: all;\n cursor: pointer;\n\n position: absolute;\n\n border: 1px solid ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextTertiary};\n\n background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n backdrop-filter: blur(8px);\n\n transition: all 0.2s ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorTextSecondary};\n }\n\n &:active {\n color: ${cssVar.colorText};\n }\n }\n `,\n );\n\n const toggleRootWithWideArea = css`\n pointer-events: all;\n `;\n\n const toggleRootWithoutWideArea = css`\n pointer-events: none;\n `;\n\n const toggleStyles = {\n toggleBottom: cx(\n `${prefix}-toggle-bottom`,\n css`\n inset-block-end: -${LAYOUT.offset}px;\n width: 100%;\n height: ${LAYOUT.toggleShort}px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ${LAYOUT.toggleLength}px;\n height: ${LAYOUT.toggleShort}px;\n margin-inline-start: -27px;\n border-block-start-width: 0;\n border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\n }\n `,\n ),\n toggleLeft: cx(\n `${prefix}-toggle-left`,\n css`\n inset-inline-start: -${LAYOUT.offset}px;\n width: ${LAYOUT.toggleShort}px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ${LAYOUT.toggleShort}px;\n height: ${LAYOUT.toggleLength}px;\n margin-block-start: -27px;\n border-inline-end-width: 0;\n border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\n }\n `,\n ),\n toggleRight: cx(\n `${prefix}-toggle-right`,\n css`\n inset-inline-end: -${LAYOUT.offset}px;\n width: ${LAYOUT.toggleShort}px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ${LAYOUT.toggleShort}px;\n height: ${LAYOUT.toggleLength}px;\n margin-block-start: -27px;\n border-inline-start-width: 0;\n border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n }\n `,\n ),\n toggleRoot,\n toggleRootWithWideArea,\n toggleRootWithoutWideArea,\n toggleTop: cx(\n `${prefix}-toggle-top`,\n css`\n inset-block-start: -${LAYOUT.offset}px;\n width: 100%;\n height: ${LAYOUT.toggleShort}px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ${LAYOUT.toggleLength}px;\n height: ${LAYOUT.toggleShort}px;\n margin-inline-start: -27px;\n border-block-end-width: 0;\n border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;\n }\n `,\n ),\n };\n\n // Additional component styles\n const componentStyles = {\n fixed: css`\n position: relative;\n `,\n fullscreen: css`\n position: absolute;\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline: 0;\n\n width: 100%;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n\n background: ${cssVar.colorBgContainer};\n `,\n handlerIcon: css`\n transition: all 0.2s ${cssVar.motionEaseOut};\n `,\n panel: cx(\n `${prefix}-fixed`,\n css`\n overflow: hidden;\n background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n transition: all 0.2s ${cssVar.motionEaseOut};\n `,\n ),\n root: cx(\n prefix,\n css`\n flex-shrink: 0;\n\n &:hover {\n > .${prefix}-toggle {\n opacity: 1;\n }\n }\n `,\n ),\n };\n\n return {\n ...borderStyles,\n ...floatPositions,\n ...handleStyles,\n handleHighlight: handleHighlightStyle,\n ...toggleStyles,\n ...componentStyles,\n };\n});\n\nexport const handleVariants = cva(styles.handleRoot, {\n variants: {\n placement: {\n bottom: styles.handleBottom,\n left: styles.handleLeft,\n right: styles.handleRight,\n top: styles.handleTop,\n },\n },\n});\n\nexport const panelVariants = cva(styles.root, {\n compoundVariants: [\n {\n class: styles.bottomFloat,\n mode: 'float',\n placement: 'bottom',\n },\n {\n class: styles.topFloat,\n mode: 'float',\n placement: 'top',\n },\n {\n class: styles.leftFloat,\n mode: 'float',\n placement: 'left',\n },\n {\n class: styles.rightFloat,\n mode: 'float',\n placement: 'right',\n },\n // Border styles based on placement, isExpand, and showBorder\n // Note: border is on the opposite side of placement\n // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\n {\n class: styles.borderBottom,\n isExpand: true,\n placement: 'top',\n showBorder: true,\n },\n {\n class: styles.borderBottomNone,\n isExpand: true,\n placement: 'top',\n showBorder: false,\n },\n {\n class: styles.borderLeft,\n isExpand: true,\n placement: 'right',\n showBorder: true,\n },\n {\n class: styles.borderLeftNone,\n isExpand: true,\n placement: 'right',\n showBorder: false,\n },\n {\n class: styles.borderTop,\n isExpand: true,\n placement: 'bottom',\n showBorder: true,\n },\n {\n class: styles.borderTopNone,\n isExpand: true,\n placement: 'bottom',\n showBorder: false,\n },\n {\n class: styles.borderRight,\n isExpand: true,\n placement: 'left',\n showBorder: true,\n },\n {\n class: styles.borderRightNone,\n isExpand: true,\n placement: 'left',\n showBorder: false,\n },\n ],\n defaultVariants: {\n isExpand: false,\n mode: 'fixed',\n placement: 'right',\n showBorder: true,\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n isExpand: {\n false: null,\n true: null,\n },\n mode: {\n fixed: styles.fixed,\n float: null,\n },\n placement: {\n bottom: null,\n left: null,\n right: null,\n top: null,\n },\n showBorder: {\n false: null,\n true: null,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n compoundVariants: [\n {\n class: styles.toggleRootWithWideArea,\n showHandleWideArea: true,\n },\n {\n class: styles.toggleRootWithoutWideArea,\n showHandleWideArea: false,\n },\n ],\n defaultVariants: {\n showHandleWideArea: false,\n },\n variants: {\n placement: {\n bottom: styles.toggleTop,\n left: styles.toggleRight,\n right: styles.toggleLeft,\n top: styles.toggleBottom,\n },\n showHandleWideArea: {\n false: null,\n true: null,\n },\n },\n});\n"],"mappings":"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W;GACZ;EACD;GACE,OAAO,OAAO;GACd,MAAM;GACN,WAAW;GACZ;EAID;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACF;CACD,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;EACb;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;GACR;EACD,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACF;CAEF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,EACD;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,CACF;CACD,iBAAiB,EACf,oBAAoB,OACrB;CACD,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;GACb;EACD,oBAAoB;GAClB,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\n// Layout constants\nconst LAYOUT = {\n offset: 16,\n toggleLength: 54,\n toggleShort: 16,\n};\n\nconst prefixCls = 'ant';\n\nconst prefix = `${prefixCls}-draggable-panel`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n // Base styles - border styles split by showBorder\n const borderStyles = {\n borderBottom: css`\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderBottomNone: css`\n border-block-end-width: 0;\n `,\n borderLeft: css`\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderLeftNone: css`\n border-inline-start-width: 0;\n `,\n borderRight: css`\n border-inline-end: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderRightNone: css`\n border-inline-end-width: 0;\n `,\n borderTop: css`\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n borderTopNone: css`\n border-block-start-width: 0;\n `,\n };\n\n // Position styles\n const float = css`\n position: absolute;\n z-index: 200;\n `;\n\n const floatPositions = {\n bottomFloat: cx(\n float,\n css`\n inset-block-end: 0;\n inset-inline: 0 0;\n width: 100%;\n `,\n ),\n leftFloat: cx(\n float,\n css`\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline-start: 0;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n `,\n ),\n rightFloat: cx(\n float,\n css`\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline-end: 0;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n `,\n ),\n topFloat: cx(\n float,\n css`\n inset-block-start: var(--draggable-panel-header-height, 0);\n inset-inline: 0 0;\n width: 100%;\n `,\n ),\n };\n\n // Handle styles\n const handleBaseStyle = css`\n position: relative;\n\n &::before {\n content: '';\n position: absolute;\n transition: all 0.2s ${cssVar.motionEaseOut};\n }\n `;\n\n const handleHighlightStyle = css`\n &:hover {\n &::before {\n background: ${cssVar.colorPrimaryBorder};\n box-shadow: 0 0 8px color-mix(in srgb, ${cssVar.colorPrimary} 25%, transparent);\n }\n }\n\n &:active {\n &::before {\n background: ${cssVar.colorPrimary} !important;\n }\n }\n `;\n\n const handleStyles = {\n handleBottom: cx(\n `${prefix}-bottom-handle`,\n css`\n &::before {\n inset-block-end: 50%;\n width: 100%;\n height: 2px;\n }\n `,\n ),\n handleLeft: cx(\n `${prefix}-left-handle`,\n css`\n &::before {\n inset-inline-start: 50%;\n width: 2px;\n height: 100%;\n }\n `,\n ),\n handleRight: cx(\n `${prefix}-right-handle`,\n css`\n &::before {\n inset-inline-end: 50%;\n width: 2px;\n height: 100%;\n }\n `,\n ),\n handleRoot: handleBaseStyle,\n handleTop: cx(\n `${prefix}-top-handle`,\n css`\n &::before {\n inset-block-start: 50%;\n width: 100%;\n height: 2px;\n }\n `,\n ),\n };\n\n // Toggle styles - base class with variant for showHandleWideArea\n const toggleRoot = cx(\n `${prefix}-toggle`,\n css`\n position: absolute;\n z-index: 50;\n opacity: 0;\n transition: all 0.2s ${cssVar.motionEaseOut};\n\n &:hover,\n &:active {\n opacity: 1 !important;\n }\n\n > div {\n pointer-events: all;\n cursor: pointer;\n\n position: absolute;\n\n border: 1px solid ${cssVar.colorBorder};\n\n color: ${cssVar.colorTextTertiary};\n\n background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n backdrop-filter: blur(8px);\n\n transition: all 0.2s ${cssVar.motionEaseOut};\n\n &:hover {\n color: ${cssVar.colorTextSecondary};\n }\n\n &:active {\n color: ${cssVar.colorText};\n }\n }\n `,\n );\n\n const toggleRootWithWideArea = css`\n pointer-events: all;\n `;\n\n const toggleRootWithoutWideArea = css`\n pointer-events: none;\n `;\n\n const toggleStyles = {\n toggleBottom: cx(\n `${prefix}-toggle-bottom`,\n css`\n inset-block-end: -${LAYOUT.offset}px;\n width: 100%;\n height: ${LAYOUT.toggleShort}px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ${LAYOUT.toggleLength}px;\n height: ${LAYOUT.toggleShort}px;\n margin-inline-start: -27px;\n border-block-start-width: 0;\n border-radius: 0 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG};\n }\n `,\n ),\n toggleLeft: cx(\n `${prefix}-toggle-left`,\n css`\n inset-inline-start: -${LAYOUT.offset}px;\n width: ${LAYOUT.toggleShort}px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ${LAYOUT.toggleShort}px;\n height: ${LAYOUT.toggleLength}px;\n margin-block-start: -27px;\n border-inline-end-width: 0;\n border-radius: ${cssVar.borderRadiusLG} 0 0 ${cssVar.borderRadiusLG};\n }\n `,\n ),\n toggleRight: cx(\n `${prefix}-toggle-right`,\n css`\n inset-inline-end: -${LAYOUT.offset}px;\n width: ${LAYOUT.toggleShort}px;\n height: 100%;\n\n > div {\n inset-block-start: 50%;\n\n width: ${LAYOUT.toggleShort}px;\n height: ${LAYOUT.toggleLength}px;\n margin-block-start: -27px;\n border-inline-start-width: 0;\n border-radius: 0 ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0;\n }\n `,\n ),\n toggleRoot,\n toggleRootWithWideArea,\n toggleRootWithoutWideArea,\n toggleTop: cx(\n `${prefix}-toggle-top`,\n css`\n inset-block-start: -${LAYOUT.offset}px;\n width: 100%;\n height: ${LAYOUT.toggleShort}px;\n\n > div {\n inset-inline-start: 50%;\n\n width: ${LAYOUT.toggleLength}px;\n height: ${LAYOUT.toggleShort}px;\n margin-inline-start: -27px;\n border-block-end-width: 0;\n border-radius: ${cssVar.borderRadiusLG} ${cssVar.borderRadiusLG} 0 0;\n }\n `,\n ),\n };\n\n // Additional component styles\n const componentStyles = {\n fixed: css`\n position: relative;\n `,\n fullscreen: css`\n position: absolute;\n inset-block: var(--draggable-panel-header-height, 0) 0;\n inset-inline: 0;\n\n width: 100%;\n height: calc(100% - var(--draggable-panel-header-height, 0px));\n\n background: ${cssVar.colorBgContainer};\n `,\n handlerIcon: css`\n transition: all 0.2s ${cssVar.motionEaseOut};\n `,\n panel: cx(\n `${prefix}-fixed`,\n css`\n overflow: hidden;\n background: var(--draggable-panel-bg, ${cssVar.colorBgLayout});\n transition: all 0.2s ${cssVar.motionEaseOut};\n `,\n ),\n root: cx(\n prefix,\n css`\n flex-shrink: 0;\n\n &:hover {\n > .${prefix}-toggle {\n opacity: 1;\n }\n }\n `,\n ),\n };\n\n return {\n ...borderStyles,\n ...floatPositions,\n ...handleStyles,\n handleHighlight: handleHighlightStyle,\n ...toggleStyles,\n ...componentStyles,\n };\n});\n\nexport const handleVariants = cva(styles.handleRoot, {\n variants: {\n placement: {\n bottom: styles.handleBottom,\n left: styles.handleLeft,\n right: styles.handleRight,\n top: styles.handleTop,\n },\n },\n});\n\nexport const panelVariants = cva(styles.root, {\n compoundVariants: [\n {\n class: styles.bottomFloat,\n mode: 'float',\n placement: 'bottom',\n },\n {\n class: styles.topFloat,\n mode: 'float',\n placement: 'top',\n },\n {\n class: styles.leftFloat,\n mode: 'float',\n placement: 'left',\n },\n {\n class: styles.rightFloat,\n mode: 'float',\n placement: 'right',\n },\n // Border styles based on placement, isExpand, and showBorder\n // Note: border is on the opposite side of placement\n // placement 'top' -> borderBottom, placement 'right' -> borderLeft, etc.\n {\n class: styles.borderBottom,\n isExpand: true,\n placement: 'top',\n showBorder: true,\n },\n {\n class: styles.borderBottomNone,\n isExpand: true,\n placement: 'top',\n showBorder: false,\n },\n {\n class: styles.borderLeft,\n isExpand: true,\n placement: 'right',\n showBorder: true,\n },\n {\n class: styles.borderLeftNone,\n isExpand: true,\n placement: 'right',\n showBorder: false,\n },\n {\n class: styles.borderTop,\n isExpand: true,\n placement: 'bottom',\n showBorder: true,\n },\n {\n class: styles.borderTopNone,\n isExpand: true,\n placement: 'bottom',\n showBorder: false,\n },\n {\n class: styles.borderRight,\n isExpand: true,\n placement: 'left',\n showBorder: true,\n },\n {\n class: styles.borderRightNone,\n isExpand: true,\n placement: 'left',\n showBorder: false,\n },\n ],\n defaultVariants: {\n isExpand: false,\n mode: 'fixed',\n placement: 'right',\n showBorder: true,\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n isExpand: {\n false: null,\n true: null,\n },\n mode: {\n fixed: styles.fixed,\n float: null,\n },\n placement: {\n bottom: null,\n left: null,\n right: null,\n top: null,\n },\n showBorder: {\n false: null,\n true: null,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n compoundVariants: [\n {\n class: styles.toggleRootWithWideArea,\n showHandleWideArea: true,\n },\n {\n class: styles.toggleRootWithoutWideArea,\n showHandleWideArea: false,\n },\n ],\n defaultVariants: {\n showHandleWideArea: false,\n },\n variants: {\n placement: {\n bottom: styles.toggleTop,\n left: styles.toggleRight,\n right: styles.toggleLeft,\n top: styles.toggleBottom,\n },\n showHandleWideArea: {\n false: null,\n true: null,\n },\n },\n});\n"],"mappings":"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AAW;GACZ;EACD;GACE,OAAO,OAAO;GACd,MAAM;GACN,WAAW;GACZ;EAID;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACD;GACE,OAAO,OAAO;GACd,UAAU;GACV,WAAW;GACX,YAAY;GACb;EACF;CACD,iBAAiB;EACf,UAAU;EACV,MAAM;EACN,WAAW;EACX,YAAY;EACb;CAED,UAAU;EACR,UAAU;GACR,OAAO;GACP,MAAM;GACP;EACD,MAAM;GACJ,OAAO,OAAO;GACd,OAAO;GACR;EACD,WAAW;GACT,QAAQ;GACR,MAAM;GACN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GACV,OAAO;GACP,MAAM;GACP;EACF;CAEF,CAAC;AAEF,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,EACD;EACE,OAAO,OAAO;EACd,oBAAoB;EACrB,CACF;CACD,iBAAiB,EACf,oBAAoB,OACrB;CACD,UAAU;EACR,WAAW;GACT,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,OAAO,OAAO;GACd,KAAK,OAAO;GACb;EACD,oBAAoB;GAClB,OAAO;GACP,MAAM;GACP;EACF;CACF,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DraggableSideNavProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react35 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggableSideNav/DraggableSideNav.d.ts
|
|
5
|
-
declare const DraggableSideNav:
|
|
5
|
+
declare const DraggableSideNav: react35.NamedExoticComponent<DraggableSideNavProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DraggableSideNav };
|
|
8
8
|
//# sourceMappingURL=DraggableSideNav.d.mts.map
|
package/es/Drawer/Drawer.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DrawerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react27 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Drawer/Drawer.d.ts
|
|
5
|
-
declare const Drawer:
|
|
5
|
+
declare const Drawer: react27.NamedExoticComponent<DrawerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Drawer };
|
|
8
8
|
//# sourceMappingURL=Drawer.d.mts.map
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { DropdownProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react26 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Dropdown/Dropdown.d.ts
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* @deprecated
|
|
8
|
+
* Use `DropdownMenu` or `ContextMenu` instead
|
|
9
|
+
* @see https://ui.lobehub.com/components/context-menu
|
|
10
|
+
* @see https://ui.lobehub.com/components/dropdown-menu
|
|
11
|
+
*/
|
|
12
|
+
declare const Dropdown: react26.NamedExoticComponent<DropdownProps>;
|
|
6
13
|
//#endregion
|
|
7
14
|
export { Dropdown };
|
|
8
15
|
//# sourceMappingURL=Dropdown.d.mts.map
|
package/es/Dropdown/Dropdown.mjs
CHANGED
|
@@ -7,6 +7,12 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
import { Dropdown } from "antd";
|
|
8
8
|
|
|
9
9
|
//#region src/Dropdown/Dropdown.tsx
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated
|
|
12
|
+
* Use `DropdownMenu` or `ContextMenu` instead
|
|
13
|
+
* @see https://ui.lobehub.com/components/context-menu
|
|
14
|
+
* @see https://ui.lobehub.com/components/dropdown-menu
|
|
15
|
+
*/
|
|
10
16
|
const Dropdown$1 = memo(({ children, iconProps, menu, ...rest }) => {
|
|
11
17
|
const { items, ...menuProps } = menu;
|
|
12
18
|
const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.mjs","names":["Dropdown","AntdDropdown"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { Dropdown as AntdDropdown } from 'antd';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu';\n\nimport type { DropdownProps } from './type';\n\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\n const { items, ...menuProps } = menu;\n\n const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n return (\n <IconProvider\n config={{\n size: 'small',\n ...iconProps,\n }}\n >\n <AntdDropdown\n menu={{\n ...menuProps,\n items: antdItems,\n }}\n {...rest}\n >\n {children}\n </AntdDropdown>\n </IconProvider>\n );\n});\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.mjs","names":["Dropdown","AntdDropdown"],"sources":["../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport { Dropdown as AntdDropdown } from 'antd';\nimport { memo, useMemo } from 'react';\n\nimport { IconProvider } from '@/Icon';\nimport { mapItems } from '@/Menu';\n\nimport type { DropdownProps } from './type';\n\n/**\n * @deprecated\n * Use `DropdownMenu` or `ContextMenu` instead\n * @see https://ui.lobehub.com/components/context-menu\n * @see https://ui.lobehub.com/components/dropdown-menu\n */\nconst Dropdown = memo<DropdownProps>(({ children, iconProps, menu, ...rest }) => {\n const { items, ...menuProps } = menu;\n\n const antdItems = useMemo(() => items.map((item) => mapItems(item)), [items]);\n\n return (\n <IconProvider\n config={{\n size: 'small',\n ...iconProps,\n }}\n >\n <AntdDropdown\n menu={{\n ...menuProps,\n items: antdItems,\n }}\n {...rest}\n >\n {children}\n </AntdDropdown>\n </IconProvider>\n );\n});\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAMA,aAAW,MAAqB,EAAE,UAAU,WAAW,MAAM,GAAG,WAAW;CAC/E,MAAM,EAAE,OAAO,GAAG,cAAc;CAEhC,MAAM,YAAY,cAAc,MAAM,KAAK,SAAS,SAAS,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC;AAE7E,QACE,oBAAC;EACC,QAAQ;GACN,MAAM;GACN,GAAG;GACJ;YAED,oBAACC;GACC,MAAM;IACJ,GAAG;IACH,OAAO;IACR;GACD,GAAI;GAEH;IACY;GACF;EAEjB;AAEF,WAAS,cAAc;AAEvB,uBAAeD"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { DropdownMenuProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react70 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DropdownMenu/DropdownMenu.d.ts
|
|
5
|
-
declare const DropdownMenu:
|
|
5
|
+
declare const DropdownMenu: react70.NamedExoticComponent<DropdownMenuProps<unknown>>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { DropdownMenu };
|
|
8
8
|
//# sourceMappingURL=DropdownMenu.d.mts.map
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
import { LOBE_THEME_APP_ID } from "../ThemeProvider/constants.mjs";
|
|
4
4
|
import { CLASSNAMES } from "../styles/classNames.mjs";
|
|
5
5
|
import { TOOLTIP_CONTAINER_ATTR } from "../Tooltip/TooltipPortal.mjs";
|
|
6
|
+
import { placementMap } from "../utils/placement.mjs";
|
|
6
7
|
import { styles } from "../Menu/sharedStyle.mjs";
|
|
7
8
|
import { useIsClient } from "../hooks/useIsClient.mjs";
|
|
8
9
|
import { renderDropdownMenuItems } from "./renderItems.mjs";
|
|
9
|
-
import { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
10
|
+
import { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
10
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
12
|
import { cx } from "antd-style";
|
|
12
13
|
import { Menu } from "@base-ui/react/menu";
|
|
@@ -14,37 +15,7 @@ import { mergeProps } from "@base-ui/react/merge-props";
|
|
|
14
15
|
import clsx from "clsx";
|
|
15
16
|
|
|
16
17
|
//#region src/DropdownMenu/DropdownMenu.tsx
|
|
17
|
-
const
|
|
18
|
-
align: "center",
|
|
19
|
-
side: "top"
|
|
20
|
-
};
|
|
21
|
-
const bottomCenter = {
|
|
22
|
-
align: "center",
|
|
23
|
-
side: "bottom"
|
|
24
|
-
};
|
|
25
|
-
const placementMap = {
|
|
26
|
-
bottom: bottomCenter,
|
|
27
|
-
bottomCenter,
|
|
28
|
-
bottomLeft: {
|
|
29
|
-
align: "start",
|
|
30
|
-
side: "bottom"
|
|
31
|
-
},
|
|
32
|
-
bottomRight: {
|
|
33
|
-
align: "end",
|
|
34
|
-
side: "bottom"
|
|
35
|
-
},
|
|
36
|
-
top: topCenter,
|
|
37
|
-
topCenter,
|
|
38
|
-
topLeft: {
|
|
39
|
-
align: "start",
|
|
40
|
-
side: "top"
|
|
41
|
-
},
|
|
42
|
-
topRight: {
|
|
43
|
-
align: "end",
|
|
44
|
-
side: "top"
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenChange, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, triggerProps, ...rest }) => {
|
|
18
|
+
const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenChange, onOpenChangeComplete, open, placement = "bottomLeft", popupProps, portalProps, positionerProps, triggerProps, ...rest }) => {
|
|
48
19
|
const isClient = useIsClient();
|
|
49
20
|
const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
|
|
50
21
|
useEffect(() => {
|
|
@@ -55,11 +26,20 @@ const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenC
|
|
|
55
26
|
onOpenChange?.(nextOpen, details);
|
|
56
27
|
if (open === void 0) setUncontrolledOpen(nextOpen);
|
|
57
28
|
}, [onOpenChange, open]);
|
|
58
|
-
const
|
|
29
|
+
const menuItemsRef = useRef(null);
|
|
30
|
+
const isOpen = open ?? uncontrolledOpen;
|
|
59
31
|
const menuItems = useMemo(() => {
|
|
60
|
-
if (
|
|
61
|
-
|
|
62
|
-
|
|
32
|
+
if (isOpen) {
|
|
33
|
+
const renderedItems = renderDropdownMenuItems(typeof items === "function" ? items() : items);
|
|
34
|
+
menuItemsRef.current = renderedItems;
|
|
35
|
+
return renderedItems;
|
|
36
|
+
}
|
|
37
|
+
return menuItemsRef.current;
|
|
38
|
+
}, [isOpen, items]);
|
|
39
|
+
const handleOpenChangeComplete = useCallback((nextOpen) => {
|
|
40
|
+
onOpenChangeComplete?.(nextOpen);
|
|
41
|
+
if (!nextOpen) menuItemsRef.current = null;
|
|
42
|
+
}, [onOpenChangeComplete]);
|
|
63
43
|
const portalContainer = useMemo(() => {
|
|
64
44
|
if (!isClient) return null;
|
|
65
45
|
const themeApp = document.querySelector(`#${LOBE_THEME_APP_ID}`);
|
|
@@ -69,6 +49,7 @@ const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenC
|
|
|
69
49
|
return document.body;
|
|
70
50
|
}, [isClient]);
|
|
71
51
|
const placementConfig = placementMap[placement];
|
|
52
|
+
const hoverTrigger = Boolean(triggerProps?.openOnHover);
|
|
72
53
|
const isNativeButtonTriggerElement = useMemo(() => {
|
|
73
54
|
if (!isValidElement(children)) return false;
|
|
74
55
|
return typeof children.type === "string" && children.type === "button";
|
|
@@ -113,6 +94,7 @@ const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenC
|
|
|
113
94
|
...rest,
|
|
114
95
|
defaultOpen,
|
|
115
96
|
onOpenChange: handleOpenChange,
|
|
97
|
+
onOpenChangeComplete: handleOpenChangeComplete,
|
|
116
98
|
open,
|
|
117
99
|
children: [trigger, /* @__PURE__ */ jsx(Menu.Portal, {
|
|
118
100
|
container: portalProps?.container ?? portalContainer,
|
|
@@ -120,6 +102,8 @@ const DropdownMenu = memo(({ children, defaultOpen, items, nativeButton, onOpenC
|
|
|
120
102
|
children: /* @__PURE__ */ jsx(Menu.Positioner, {
|
|
121
103
|
...resolvedPositionerProps,
|
|
122
104
|
className: (state) => cx(styles.positioner, typeof positionerProps?.className === "function" ? positionerProps.className(state) : positionerProps?.className),
|
|
105
|
+
"data-hover-trigger": hoverTrigger || void 0,
|
|
106
|
+
"data-placement": placement,
|
|
123
107
|
children: /* @__PURE__ */ jsx(Menu.Popup, {
|
|
124
108
|
...popupProps,
|
|
125
109
|
className: (state) => cx(styles.popup, typeof popupProps?.className === "function" ? popupProps.className(state) : popupProps?.className),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownMenu.mjs","names":["
|
|
1
|
+
{"version":3,"file":"DropdownMenu.mjs","names":["renderer: ComponentRenderFn<HTMLProps<any>, MenuTriggerState>"],"sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["'use client';\n\nimport { Menu, type MenuTriggerState } from '@base-ui/react/menu';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport type { ComponentRenderFn, HTMLProps } from '@base-ui/react/utils/types';\nimport { cx } from 'antd-style';\nimport clsx from 'clsx';\nimport {\n cloneElement,\n isValidElement,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nimport { styles } from '@/Menu/sharedStyle';\nimport { LOBE_THEME_APP_ID } from '@/ThemeProvider';\nimport { TOOLTIP_CONTAINER_ATTR } from '@/Tooltip/TooltipPortal';\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { CLASSNAMES } from '@/styles/classNames';\nimport { placementMap } from '@/utils/placement';\n\nimport { renderDropdownMenuItems } from './renderItems';\nimport type { DropdownMenuProps } from './type';\n\nconst DropdownMenu = memo<DropdownMenuProps>(\n ({\n children,\n defaultOpen,\n\n items,\n nativeButton,\n onOpenChange,\n onOpenChangeComplete,\n open,\n placement = 'bottomLeft',\n popupProps,\n portalProps,\n positionerProps,\n triggerProps,\n ...rest\n }) => {\n const isClient = useIsClient();\n const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n useEffect(() => {\n if (open === undefined) return;\n setUncontrolledOpen(open);\n }, [open]);\n\n const handleOpenChange = useCallback(\n (nextOpen: boolean, details: Parameters<NonNullable<typeof onOpenChange>>[1]) => {\n onOpenChange?.(nextOpen, details);\n if (open === undefined) {\n setUncontrolledOpen(nextOpen);\n }\n },\n [onOpenChange, open],\n );\n\n const menuItemsRef = useRef<ReturnType<typeof renderDropdownMenuItems> | null>(null);\n const isOpen = open ?? uncontrolledOpen;\n const menuItems = useMemo(() => {\n if (isOpen) {\n const resolvedItems = typeof items === 'function' ? items() : items;\n const renderedItems = renderDropdownMenuItems(resolvedItems);\n menuItemsRef.current = renderedItems;\n return renderedItems;\n }\n return menuItemsRef.current;\n }, [isOpen, items]);\n const handleOpenChangeComplete = useCallback(\n (nextOpen: boolean) => {\n onOpenChangeComplete?.(nextOpen);\n if (!nextOpen) {\n menuItemsRef.current = null;\n }\n },\n [onOpenChangeComplete],\n );\n const portalContainer = useMemo(() => {\n if (!isClient) return null;\n\n const themeApp = document.querySelector<HTMLElement>(`#${LOBE_THEME_APP_ID}`);\n if (themeApp) return themeApp;\n\n const tooltipContainer = document.querySelector<HTMLElement>(\n `[${TOOLTIP_CONTAINER_ATTR}=\"true\"]`,\n );\n if (tooltipContainer) return tooltipContainer;\n\n return document.body;\n }, [isClient]);\n const placementConfig = placementMap[placement];\n const hoverTrigger = Boolean((triggerProps as any)?.openOnHover);\n\n const isNativeButtonTriggerElement = useMemo(() => {\n if (!isValidElement(children)) return false;\n return typeof children.type === 'string' && children.type === 'button';\n }, [children]);\n\n const renderer: ComponentRenderFn<HTMLProps<any>, MenuTriggerState> = useCallback(\n (props) => {\n // Base UI's trigger props include `type=\"button\"` by default.\n // If we render into a non-<button> element, that prop is invalid and can warn.\n const resolvedProps = (() => {\n if (isNativeButtonTriggerElement) return props as any;\n // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n const { type, ...restProps } = props as any;\n return restProps;\n })();\n\n return cloneElement(children as any, mergeProps((children as any).props, resolvedProps));\n },\n [children, isNativeButtonTriggerElement],\n );\n\n // When we use `render`, Base UI expects the rendered element to be a native <button> by default.\n // If we can infer it's not, opt out to avoid warnings (users can still override via `nativeButton`).\n const resolvedNativeButton = useMemo(() => {\n if (nativeButton !== undefined) return nativeButton;\n if (triggerProps?.nativeButton !== undefined) return triggerProps.nativeButton;\n if (isNativeButtonTriggerElement) return true;\n if (!isValidElement(children)) return undefined;\n if (typeof children.type === 'string') return false;\n return undefined;\n }, [children, isNativeButtonTriggerElement, nativeButton, triggerProps?.nativeButton]);\n\n const trigger = isValidElement(children) ? (\n <Menu.Trigger\n {...triggerProps}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, triggerProps?.className)}\n nativeButton={resolvedNativeButton}\n render={renderer}\n />\n ) : (\n <Menu.Trigger\n {...triggerProps}\n className={clsx(CLASSNAMES.DropdownMenuTrigger, triggerProps?.className)}\n >\n {children}\n </Menu.Trigger>\n );\n\n const resolvedPositionerProps = {\n ...positionerProps,\n align: positionerProps?.align ?? placementConfig?.align ?? 'center',\n side: positionerProps?.side ?? placementConfig?.side ?? 'bottom',\n sideOffset: positionerProps?.sideOffset ?? 6,\n };\n return (\n <Menu.Root\n {...rest}\n defaultOpen={defaultOpen}\n onOpenChange={handleOpenChange}\n onOpenChangeComplete={handleOpenChangeComplete}\n open={open}\n >\n {trigger}\n <Menu.Portal container={portalProps?.container ?? portalContainer} {...portalProps}>\n <Menu.Positioner\n {...resolvedPositionerProps}\n className={(state) =>\n cx(\n styles.positioner,\n typeof positionerProps?.className === 'function'\n ? positionerProps.className(state)\n : positionerProps?.className,\n )\n }\n data-hover-trigger={hoverTrigger || undefined}\n data-placement={placement}\n >\n <Menu.Popup\n {...popupProps}\n className={(state) =>\n cx(\n styles.popup,\n typeof popupProps?.className === 'function'\n ? popupProps.className(state)\n : popupProps?.className,\n )\n }\n >\n {menuItems}\n </Menu.Popup>\n </Menu.Positioner>\n </Menu.Portal>\n </Menu.Root>\n );\n },\n);\n\nDropdownMenu.displayName = 'DropdownMenuV2';\n\nexport default DropdownMenu;\n"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Placement } from "../utils/placement.mjs";
|
|
1
2
|
import { MenuCheckboxItemType } from "../Menu/checkboxItem.mjs";
|
|
2
3
|
import { BaseMenuItemType } from "../Menu/baseItem.mjs";
|
|
3
4
|
import "../Menu/index.mjs";
|
|
@@ -5,7 +6,7 @@ import { ReactNode } from "react";
|
|
|
5
6
|
import { MenuPopupProps, MenuPortalProps, MenuPositionerProps, MenuRootProps, MenuTriggerProps } from "@base-ui/react/menu";
|
|
6
7
|
|
|
7
8
|
//#region src/DropdownMenu/type.d.ts
|
|
8
|
-
type DropdownMenuPlacement =
|
|
9
|
+
type DropdownMenuPlacement = Placement;
|
|
9
10
|
type DropdownMenuCheckboxItem = MenuCheckboxItemType;
|
|
10
11
|
type DropdownItem = BaseMenuItemType;
|
|
11
12
|
interface DropdownMenuProps<Payload = unknown> extends Omit<MenuRootProps<Payload>, 'children'> {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { EditableTextProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react71 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EditableText/EditableText.d.ts
|
|
5
|
-
declare const EditableText:
|
|
5
|
+
declare const EditableText: react71.NamedExoticComponent<EditableTextProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { EditableText };
|
|
8
8
|
//# sourceMappingURL=EditableText.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { EmojiPickerProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react34 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EmojiPicker/EmojiPicker.d.ts
|
|
5
|
-
declare const EmojiPicker:
|
|
5
|
+
declare const EmojiPicker: react34.NamedExoticComponent<EmojiPickerProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { EmojiPicker };
|
|
8
8
|
//# sourceMappingURL=EmojiPicker.d.mts.map
|
package/es/Flex/FlexBasic.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FlexBasicProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react59 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Flex/FlexBasic.d.ts
|
|
5
|
-
declare const _default:
|
|
5
|
+
declare const _default: react59.NamedExoticComponent<FlexBasicProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { _default };
|
|
8
8
|
//# sourceMappingURL=FlexBasic.d.mts.map
|
package/es/Footer/Footer.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FooterProps } from "./type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react25 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Footer/Footer.d.ts
|
|
5
|
-
declare const Footer:
|
|
5
|
+
declare const Footer: react25.NamedExoticComponent<FooterProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { Footer };
|
|
8
8
|
//# sourceMappingURL=Footer.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FormGroupProps } from "../type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react22 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormGroup.d.ts
|
|
5
|
-
declare const FormGroup:
|
|
5
|
+
declare const FormGroup: react22.NamedExoticComponent<FormGroupProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FormGroup };
|
|
8
8
|
//# sourceMappingURL=FormGroup.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FormItemProps } from "../type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react23 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormItem.d.ts
|
|
5
|
-
declare const FormItem:
|
|
5
|
+
declare const FormItem: react23.NamedExoticComponent<FormItemProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FormItem };
|
|
8
8
|
//# sourceMappingURL=FormItem.d.mts.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { FormSubmitFooterProps } from "../type.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react24 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormSubmitFooter.d.ts
|
|
5
|
-
declare const FormSubmitFooter:
|
|
5
|
+
declare const FormSubmitFooter: react24.NamedExoticComponent<FormSubmitFooterProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FormSubmitFooter };
|
|
8
8
|
//# sourceMappingURL=FormSubmitFooter.d.mts.map
|