@lobehub/ui 4.9.3 → 4.10.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/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/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/FontLoader/index.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/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/Markdown/components/SearchResultCards/index.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/MotionProvider/index.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 +55 -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 +166 -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 +112 -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/Video/index.d.mts +2 -2
- 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/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/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 +2 -2
- 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 +2 -2
- package/es/icons/lucideExtra/TreeDownRightIcon.d.mts +2 -2
- 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 react71 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/Accordion.d.ts
|
|
5
|
-
declare const Accordion:
|
|
5
|
+
declare const Accordion: react71.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 react72 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Accordion/AccordionItem.d.ts
|
|
5
|
-
declare const AccordionItem:
|
|
5
|
+
declare const AccordionItem: react72.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 react70 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/ActionIcon/ActionIcon.d.ts
|
|
5
|
-
declare const ActionIcon:
|
|
5
|
+
declare const ActionIcon: react70.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 react69 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Alert/Alert.d.ts
|
|
5
|
-
declare const Alert:
|
|
5
|
+
declare const Alert: react69.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 react73 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/AutoComplete/Select.d.ts
|
|
5
|
-
declare const AutoComplete:
|
|
5
|
+
declare const AutoComplete: react73.NamedExoticComponent<AutoCompleteProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { AutoComplete };
|
|
8
8
|
//# sourceMappingURL=Select.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 react26 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Burger/Burger.d.ts
|
|
5
|
-
declare const Burger:
|
|
5
|
+
declare const Burger: react26.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 react25 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CodeEditor/CodeEditor.d.ts
|
|
5
|
-
declare const CodeEditor:
|
|
5
|
+
declare const CodeEditor: react25.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 react24 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Collapse/Collapse.d.ts
|
|
5
|
-
declare const Collapse:
|
|
5
|
+
declare const Collapse: react24.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 react76 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: react76.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 react23 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/CopyButton/CopyButton.d.ts
|
|
5
|
-
declare const CopyButton:
|
|
5
|
+
declare const CopyButton: react23.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 react22 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DatePicker/DatePicker.d.ts
|
|
5
|
-
declare const DatePicker:
|
|
5
|
+
declare const DatePicker: react22.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 react17 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: react17.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 react16 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: react16.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 react18 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: react18.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 react19 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: react19.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 react21 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DraggableSideNav/DraggableSideNav.d.ts
|
|
5
|
-
declare const DraggableSideNav:
|
|
5
|
+
declare const DraggableSideNav: react21.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 react20 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Drawer/Drawer.d.ts
|
|
5
|
-
declare const Drawer:
|
|
5
|
+
declare const Drawer: react20.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 react14 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: react14.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 react15 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/DropdownMenu/DropdownMenu.d.ts
|
|
5
|
-
declare const DropdownMenu:
|
|
5
|
+
declare const DropdownMenu: react15.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 react7 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EditableText/EditableText.d.ts
|
|
5
|
-
declare const EditableText:
|
|
5
|
+
declare const EditableText: react7.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 react8 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/EmojiPicker/EmojiPicker.d.ts
|
|
5
|
-
declare const EmojiPicker:
|
|
5
|
+
declare const EmojiPicker: react8.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 react6 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Flex/FlexBasic.d.ts
|
|
5
|
-
declare const _default:
|
|
5
|
+
declare const _default: react6.NamedExoticComponent<FlexBasicProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { _default };
|
|
8
8
|
//# sourceMappingURL=FlexBasic.d.mts.map
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react0 from "react";
|
|
2
2
|
|
|
3
3
|
//#region src/FontLoader/index.d.ts
|
|
4
4
|
interface FontLoaderProps {
|
|
5
5
|
url: string;
|
|
6
6
|
}
|
|
7
|
-
declare const FontLoader:
|
|
7
|
+
declare const FontLoader: react0.NamedExoticComponent<FontLoaderProps>;
|
|
8
8
|
//#endregion
|
|
9
9
|
export { FontLoader, FontLoaderProps };
|
|
10
10
|
//# sourceMappingURL=index.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 react13 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Footer/Footer.d.ts
|
|
5
|
-
declare const Footer:
|
|
5
|
+
declare const Footer: react13.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 react9 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormGroup.d.ts
|
|
5
|
-
declare const FormGroup:
|
|
5
|
+
declare const FormGroup: react9.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 react10 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormItem.d.ts
|
|
5
|
-
declare const FormItem:
|
|
5
|
+
declare const FormItem: react10.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 react11 from "react";
|
|
3
3
|
|
|
4
4
|
//#region src/Form/components/FormSubmitFooter.d.ts
|
|
5
|
-
declare const FormSubmitFooter:
|
|
5
|
+
declare const FormSubmitFooter: react11.NamedExoticComponent<FormSubmitFooterProps>;
|
|
6
6
|
//#endregion
|
|
7
7
|
export { FormSubmitFooter };
|
|
8
8
|
//# sourceMappingURL=FormSubmitFooter.d.mts.map
|