@lobehub/ui 5.57.0 → 5.57.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/ActionIcon/index.mjs +1 -2
- package/es/ActionIconGroup/index.mjs +1 -2
- package/es/Alert/index.mjs +1 -2
- package/es/AutoComplete/index.mjs +1 -2
- package/es/Block/index.mjs +1 -2
- package/es/Burger/index.mjs +1 -2
- package/es/Button/index.mjs +1 -2
- package/es/CodeEditor/index.mjs +1 -2
- package/es/Collapse/index.mjs +1 -2
- package/es/ColorSwatches/index.mjs +1 -2
- package/es/CopyButton/index.mjs +1 -2
- package/es/DatePicker/index.mjs +1 -2
- package/es/DownloadButton/index.mjs +1 -2
- package/es/DraggableSideNav/index.mjs +1 -2
- package/es/Drawer/index.mjs +1 -2
- package/es/Dropdown/index.mjs +1 -2
- package/es/EditableText/index.mjs +1 -2
- package/es/EmojiPicker/index.mjs +1 -2
- package/es/Empty/index.mjs +1 -2
- package/es/FileTypeIcon/index.mjs +1 -2
- package/es/FluentEmoji/index.mjs +1 -2
- package/es/Footer/index.mjs +1 -2
- package/es/FormModal/index.mjs +1 -2
- package/es/Freeze/index.mjs +1 -2
- package/es/Grid/index.mjs +1 -2
- package/es/GroupAvatar/index.mjs +1 -2
- package/es/Header/index.mjs +1 -2
- package/es/HotkeyInput/index.mjs +1 -2
- package/es/MaskShadow/index.mjs +1 -2
- package/es/MaterialFileTypeIcon/index.mjs +1 -2
- package/es/ScrollShadow/index.mjs +1 -2
- package/es/SearchBar/index.mjs +1 -2
- package/es/Segmented/index.mjs +1 -2
- package/es/Select/index.mjs +1 -2
- package/es/SideNav/index.mjs +1 -2
- package/es/SliderWithInput/index.mjs +1 -2
- package/es/Snippet/index.mjs +1 -2
- package/es/SortableList/index.mjs +1 -2
- package/es/Tabs/index.mjs +1 -2
- package/es/Text/index.mjs +1 -2
- package/es/ThemeSwitch/index.mjs +1 -2
- package/es/Toast/index.mjs +1 -2
- package/es/Toc/index.mjs +1 -2
- package/es/base-ui/Button/SplitButton.mjs +5 -0
- package/es/base-ui/Button/SplitButton.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Popover/style.mjs +2 -2
- package/es/base-ui/Popover/style.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +1 -1
- package/es/base-ui/Tooltip/style.mjs +2 -2
- package/es/base-ui/Tooltip/style.mjs.map +1 -1
- package/es/brand/LogoMono/index.mjs +1 -2
- package/es/storybook/index.mjs +1 -2
- package/package.json +1 -1
package/es/ActionIcon/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ActionIcon as default };
|
|
1
|
+
export { default } from "./ActionIcon.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ActionIconGroup as default };
|
|
1
|
+
export { default } from "./ActionIconGroup.mjs";
|
package/es/Alert/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Alert as default };
|
|
1
|
+
export { default } from "./Alert.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { AutoComplete as default };
|
|
1
|
+
export { default } from "./Select.mjs";
|
package/es/Block/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Block as default };
|
|
1
|
+
export { default } from "./Block.mjs";
|
package/es/Burger/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Burger as default };
|
|
1
|
+
export { default } from "./Burger.mjs";
|
package/es/Button/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Button as default };
|
|
1
|
+
export { default } from "./Button.mjs";
|
package/es/CodeEditor/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { CodeEditor as default };
|
|
1
|
+
export { default } from "./CodeEditor.mjs";
|
package/es/Collapse/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Collapse as default };
|
|
1
|
+
export { default } from "./Collapse.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ColorSwatches as default };
|
|
1
|
+
export { default } from "./ColorSwatches.mjs";
|
package/es/CopyButton/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { CopyButton as default };
|
|
1
|
+
export { default } from "./CopyButton.mjs";
|
package/es/DatePicker/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { DatePicker as default };
|
|
1
|
+
export { default } from "./DatePicker.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { DownloadButton as default };
|
|
1
|
+
export { default } from "./DownloadButton.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { DraggableSideNav as default };
|
|
1
|
+
export { default } from "./DraggableSideNav.mjs";
|
package/es/Drawer/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Drawer as default };
|
|
1
|
+
export { default } from "./Drawer.mjs";
|
package/es/Dropdown/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Dropdown as default };
|
|
1
|
+
export { default } from "./Dropdown.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { EditableText as default };
|
|
1
|
+
export { default } from "./EditableText.mjs";
|
package/es/EmojiPicker/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { EmojiPicker as default };
|
|
1
|
+
export { default } from "./EmojiPicker.mjs";
|
package/es/Empty/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Empty as default };
|
|
1
|
+
export { default } from "./Empty.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { FileTypeIcon as default };
|
|
1
|
+
export { default } from "./FileTypeIcon.mjs";
|
package/es/FluentEmoji/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { FluentEmoji as default };
|
|
1
|
+
export { default } from "./FluentEmoji.mjs";
|
package/es/Footer/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Footer as default };
|
|
1
|
+
export { default } from "./Footer.mjs";
|
package/es/FormModal/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { FormModal as default };
|
|
1
|
+
export { default } from "./FormModal.mjs";
|
package/es/Freeze/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Freeze as default };
|
|
1
|
+
export { default } from "./Freeze.mjs";
|
package/es/Grid/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Grid as default };
|
|
1
|
+
export { default } from "./Grid.mjs";
|
package/es/GroupAvatar/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { GroupAvatar as default };
|
|
1
|
+
export { default } from "./GroupAvatar.mjs";
|
package/es/Header/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Header as default };
|
|
1
|
+
export { default } from "./Header.mjs";
|
package/es/HotkeyInput/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { HotkeyInput as default };
|
|
1
|
+
export { default } from "./HotkeyInput.mjs";
|
package/es/MaskShadow/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { MaskShadow as default };
|
|
1
|
+
export { default } from "./MaskShadow.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { MaterialFileTypeIcon as default };
|
|
1
|
+
export { default } from "./MaterialFileTypeIcon.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ScrollShadow as default };
|
|
1
|
+
export { default } from "./ScrollShadow.mjs";
|
package/es/SearchBar/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { SearchBar as default };
|
|
1
|
+
export { default } from "./SearchBar.mjs";
|
package/es/Segmented/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Segmented as default };
|
|
1
|
+
export { default } from "./Segmented.mjs";
|
package/es/Select/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Select as default };
|
|
1
|
+
export { default } from "./Select.mjs";
|
package/es/SideNav/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { SideNav as default };
|
|
1
|
+
export { default } from "./SideNav.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { SliderWithInput as default };
|
|
1
|
+
export { default } from "./SliderWithInput.mjs";
|
package/es/Snippet/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Snippet as default };
|
|
1
|
+
export { default } from "./Snippet.mjs";
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { SortableList as default };
|
|
1
|
+
export { default } from "./SortableList.mjs";
|
package/es/Tabs/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Tabs as default };
|
|
1
|
+
export { default } from "./Tabs.mjs";
|
package/es/Text/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Text as default };
|
|
1
|
+
export { default } from "./Text.mjs";
|
package/es/ThemeSwitch/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ThemeSwitch as default };
|
|
1
|
+
export { default } from "./ThemeSwitch.mjs";
|
package/es/Toast/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { ToastHost, toast, useToast };
|
|
1
|
+
export { ToastHost, toast, useToast } from "../base-ui/Toast/imperative.mjs";
|
package/es/Toc/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { Toc as default };
|
|
1
|
+
export { default } from "./Toc.mjs";
|
|
@@ -17,6 +17,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
17
17
|
}
|
|
18
18
|
`,
|
|
19
19
|
solid: css`
|
|
20
|
+
/* solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled) */
|
|
21
|
+
& > :where(button, a):last-of-type {
|
|
22
|
+
margin-inline-start: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
20
25
|
& > :where(button, a):last-of-type::before {
|
|
21
26
|
pointer-events: none;
|
|
22
27
|
content: '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n interactionDisabled: css`\n opacity: 0.5;\n\n & > :where(button, a):disabled,\n & > :where(button, a)[aria-disabled='true'] {\n opacity: 1;\n }\n `,\n solid: css`\n & > :where(button, a):last-of-type::before {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 1px;\n\n opacity: 0.2;\n background: currentcolor;\n }\n `,\n solidDanger: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n solidPrimary: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div\n style={style}\n className={cx(\n styles.splitButton,\n type === 'primary' && styles.solid,\n type === 'primary' && (danger ? styles.solidDanger : styles.solidPrimary),\n (disabled || loading) && styles.interactionDisabled,\n className,\n )}\n >\n {children}\n </div>\n </SplitButtonContext>\n );\n};\n\nconst SplitButtonMain = (props: ButtonProps) => {\n const shared = use(SplitButtonContext);\n return <Button {...shared} {...props} />;\n};\n\ninterface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {\n icon?: ReactNode;\n}\n\nconst SplitButtonMenu = ({\n icon = <ChevronDownIcon size={14} />,\n disabled,\n ...menuProps\n}: SplitButtonMenuProps) => {\n const shared = use(SplitButtonContext);\n const interactionDisabled = disabled || shared.disabled || shared.loading;\n\n return (\n <DropdownMenu {...menuProps} disabled={interactionDisabled}>\n <Button {...shared} disabled={interactionDisabled} icon={icon} />\n </DropdownMenu>\n );\n};\n\ntype SplitButtonComponent = typeof SplitButton & {\n Main: typeof SplitButtonMain;\n Menu: typeof SplitButtonMenu;\n};\n\n(SplitButton as SplitButtonComponent).Main = SplitButtonMain;\n(SplitButton as SplitButtonComponent).Menu = SplitButtonMenu;\n\nexport type { SplitButtonMenuProps, SplitButtonProps };\nexport default SplitButton as SplitButtonComponent;\n"],"mappings":";;;;;;;;AAyBA,MAAM,qBAAqB,cAAiC,CAAC,CAAC;AAE9D,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,qBAAqB,GAAG;;;;;;;;CAQxB,OAAO,GAAG
|
|
1
|
+
{"version":3,"file":"SplitButton.mjs","names":[],"sources":["../../../src/base-ui/Button/SplitButton.tsx"],"sourcesContent":["'use client';\n\nimport { createStaticStyles, cx } from 'antd-style';\nimport { ChevronDownIcon } from 'lucide-react';\nimport { createContext, type CSSProperties, type ReactNode, use, useMemo } from 'react';\n\nimport { DropdownMenu, type DropdownMenuProps } from '@/base-ui/DropdownMenu';\n\nimport Button from './Button';\nimport type { ButtonProps } from './type';\n\ninterface SharedVisualProps {\n danger?: boolean;\n disabled?: boolean;\n loading?: boolean;\n size?: ButtonProps['size'];\n type?: ButtonProps['type'];\n}\n\ninterface SplitButtonProps extends SharedVisualProps {\n children: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nconst SplitButtonContext = createContext<SharedVisualProps>({});\n\nconst styles = createStaticStyles(({ css, cssVar }) => ({\n interactionDisabled: css`\n opacity: 0.5;\n\n & > :where(button, a):disabled,\n & > :where(button, a)[aria-disabled='true'] {\n opacity: 1;\n }\n `,\n solid: css`\n /* solid halves share one color, so the outline-merging overlap only adds a dark seam once each half is translucent (disabled) */\n & > :where(button, a):last-of-type {\n margin-inline-start: 0;\n }\n\n & > :where(button, a):last-of-type::before {\n pointer-events: none;\n content: '';\n\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n\n width: 1px;\n\n opacity: 0.2;\n background: currentcolor;\n }\n `,\n solidDanger: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorHover};\n background: ${cssVar.colorErrorHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorErrorActive};\n background: ${cssVar.colorErrorActive};\n }\n `,\n solidPrimary: css`\n &:has(> :where(button, a):hover:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryHover};\n background: ${cssVar.colorPrimaryHover};\n }\n\n &:has(> :where(button, a):active:not(:disabled, [aria-disabled='true'])) > :where(button, a) {\n border-color: ${cssVar.colorPrimaryActive};\n background: ${cssVar.colorPrimaryActive};\n }\n `,\n splitButton: css`\n display: inline-flex;\n flex-direction: row;\n\n & > :where(button, a):first-of-type {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n\n & > :where(button, a):last-of-type {\n margin-inline-start: -1px;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n `,\n}));\n\nconst SplitButton = ({\n children,\n className,\n style,\n danger,\n disabled,\n loading,\n size,\n type,\n}: SplitButtonProps) => {\n const shared = useMemo<SharedVisualProps>(\n () => ({ danger, disabled, loading, size, type }),\n [danger, disabled, loading, size, type],\n );\n return (\n <SplitButtonContext value={shared}>\n <div\n style={style}\n className={cx(\n styles.splitButton,\n type === 'primary' && styles.solid,\n type === 'primary' && (danger ? styles.solidDanger : styles.solidPrimary),\n (disabled || loading) && styles.interactionDisabled,\n className,\n )}\n >\n {children}\n </div>\n </SplitButtonContext>\n );\n};\n\nconst SplitButtonMain = (props: ButtonProps) => {\n const shared = use(SplitButtonContext);\n return <Button {...shared} {...props} />;\n};\n\ninterface SplitButtonMenuProps extends Omit<DropdownMenuProps, 'children'> {\n icon?: ReactNode;\n}\n\nconst SplitButtonMenu = ({\n icon = <ChevronDownIcon size={14} />,\n disabled,\n ...menuProps\n}: SplitButtonMenuProps) => {\n const shared = use(SplitButtonContext);\n const interactionDisabled = disabled || shared.disabled || shared.loading;\n\n return (\n <DropdownMenu {...menuProps} disabled={interactionDisabled}>\n <Button {...shared} disabled={interactionDisabled} icon={icon} />\n </DropdownMenu>\n );\n};\n\ntype SplitButtonComponent = typeof SplitButton & {\n Main: typeof SplitButtonMain;\n Menu: typeof SplitButtonMenu;\n};\n\n(SplitButton as SplitButtonComponent).Main = SplitButtonMain;\n(SplitButton as SplitButtonComponent).Menu = SplitButtonMenu;\n\nexport type { SplitButtonMenuProps, SplitButtonProps };\nexport default SplitButton as SplitButtonComponent;\n"],"mappings":";;;;;;;;AAyBA,MAAM,qBAAqB,cAAiC,CAAC,CAAC;AAE9D,MAAM,SAAS,oBAAoB,EAAE,KAAK,cAAc;CACtD,qBAAqB,GAAG;;;;;;;;CAQxB,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;CAoBV,aAAa,GAAG;;sBAEI,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAG1C,cAAc,GAAG;;sBAEG,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAG5C,aAAa,GAAG;;;;;;;;;;;;;;;AAelB,EAAE;AAEF,MAAM,eAAe,EACnB,UACA,WACA,OACA,QACA,UACA,SACA,MACA,WACsB;CACtB,MAAM,SAAS,eACN;EAAE;EAAQ;EAAU;EAAS;EAAM;CAAK,IAC/C;EAAC;EAAQ;EAAU;EAAS;EAAM;CAAI,CACxC;CACA,OACE,oBAAC,oBAAD;EAAoB,OAAO;EACzB,UAAA,oBAAC,OAAD;GACS;GACP,WAAW,GACT,OAAO,aACP,SAAS,aAAa,OAAO,OAC7B,SAAS,cAAc,SAAS,OAAO,cAAc,OAAO,gBAC3D,YAAY,YAAY,OAAO,qBAChC,SACF;GAEC;EACE,CAAA;CACa,CAAA;AAExB;AAEA,MAAM,mBAAmB,UAAuB;CAC9C,MAAM,SAAS,IAAI,kBAAkB;CACrC,OAAO,oBAAC,QAAD;EAAQ,GAAI;EAAQ,GAAI;CAAQ,CAAA;AACzC;AAMA,MAAM,mBAAmB,EACvB,OAAO,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA,GACnC,UACA,GAAG,gBACuB;CAC1B,MAAM,SAAS,IAAI,kBAAkB;CACrC,MAAM,sBAAsB,YAAY,OAAO,YAAY,OAAO;CAElE,OACE,oBAAC,cAAD;EAAc,GAAI;EAAW,UAAU;EACrC,UAAA,oBAAC,QAAD;GAAQ,GAAI;GAAQ,UAAU;GAA2B;EAAO,CAAA;CACpD,CAAA;AAElB;AAOA,YAAsC,OAAO;AAC7C,YAAsC,OAAO"}
|
|
@@ -30,7 +30,7 @@ declare const styles: {
|
|
|
30
30
|
};
|
|
31
31
|
declare const rootVariants: (props?: ({
|
|
32
32
|
shadow?: boolean | null | undefined;
|
|
33
|
-
size?: "
|
|
33
|
+
size?: "small" | "middle" | "large" | null | undefined;
|
|
34
34
|
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
35
35
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
36
36
|
//#endregion
|
|
@@ -251,11 +251,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
251
251
|
position: absolute;
|
|
252
252
|
inset-block-start: 12px;
|
|
253
253
|
inset-inline-start: var(--lobe-popover-viewport-inline-padding);
|
|
254
|
-
width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2
|
|
254
|
+
width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2);
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
&[data-transitioning] [data-current] {
|
|
258
|
-
width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2
|
|
258
|
+
width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2);
|
|
259
259
|
}
|
|
260
260
|
|
|
261
261
|
&[data-repop] [data-previous] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-popover-arrow-offset-block: 5px;\n --lobe-popover-arrow-offset-inline: 8px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 12px;\n height: 6px;\n\n transition:\n inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n & [data-role='fill'] {\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n fill: none;\n stroke: ${cssVar.colorBorder};\n stroke-width: 1px;\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n position: relative;\n transform-origin: var(--transform-origin);\n\n box-sizing: border-box;\n min-width: 120px;\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: opacity, transform;\n\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n &[data-layout-animation] {\n width: var(--popup-width, auto);\n height: var(--popup-height, auto);\n\n transition-timing-function:\n var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n transition-duration:\n var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-repop] {\n transition: none;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n scale(var(--lobe-popover-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-popover-animation-ease-in);\n transition-duration: var(--lobe-popover-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-popover-animation-duration: 150ms;\n --lobe-popover-animation-translate: 6px;\n --lobe-popover-animation-scale: 0.96;\n --lobe-popover-animation-ease-in: ease-in;\n --lobe-popover-animation-duration-exit: 75ms;\n --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-layout-duration: 380ms;\n --lobe-popover-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n\n z-index: 1100;\n\n width: min(var(--positioner-width), var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-popover-layout-ease);\n transition-duration: var(--lobe-popover-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant],\n &[data-repop] {\n transition: none;\n }\n\n /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n --lobe-popover-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-popover-layout-duration: 0s;\n }\n `,\n\n root: css`\n user-select: none;\n position: relative;\n filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n `,\n\n viewport: css`\n --lobe-popover-viewport-inline-padding: 12px;\n --lobe-popover-content-shift: 8px;\n --lobe-popover-content-blur: 4px;\n\n position: relative;\n overflow: clip;\n padding-block: 12px;\n padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n [data-previous],\n [data-current] {\n transform: translateX(0);\n opacity: 1;\n filter: blur(0);\n transition:\n transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n }\n\n [data-current] {\n transition-delay:\n 0s, calc(var(--lobe-popover-layout-duration) / 6),\n calc(var(--lobe-popover-layout-duration) / 6);\n }\n\n [data-previous][data-ending-style],\n [data-current][data-starting-style] {\n filter: blur(var(--lobe-popover-content-blur));\n }\n\n /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n the viewport clip reveals the new content as the box grows over it. */\n [data-previous] {\n position: absolute;\n inset-block-start: 12px;\n inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n }\n\n &[data-transitioning] [data-current] {\n width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n }\n\n &[data-repop] [data-previous] {\n display: none;\n }\n\n &[data-repop] [data-current] {\n transition: none;\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;qBAOS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1C,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-popover-arrow-offset-block: 5px;\n --lobe-popover-arrow-offset-inline: 8px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 12px;\n height: 6px;\n\n transition:\n inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n }\n\n & [data-role='fill'] {\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n fill: none;\n stroke: ${cssVar.colorBorder};\n stroke-width: 1px;\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n position: relative;\n transform-origin: var(--transform-origin);\n\n box-sizing: border-box;\n min-width: 120px;\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadius};\n\n color: ${cssVar.colorText};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow: ${cssVar.boxShadowSecondary}, var(--lobe-ring);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: opacity, transform;\n\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n &[data-layout-animation] {\n width: var(--popup-width, auto);\n height: var(--popup-height, auto);\n\n transition-timing-function:\n var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n transition-duration:\n var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-repop] {\n transition: none;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n scale(var(--lobe-popover-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-popover-animation-ease-in);\n transition-duration: var(--lobe-popover-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n --lobe-popover-animation-duration: 150ms;\n --lobe-popover-animation-translate: 6px;\n --lobe-popover-animation-scale: 0.96;\n --lobe-popover-animation-ease-in: ease-in;\n --lobe-popover-animation-duration-exit: 75ms;\n --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-layout-duration: 380ms;\n --lobe-popover-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n\n z-index: 1100;\n\n width: min(var(--positioner-width), var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-popover-animation-ease-out);\n transition-duration: var(--lobe-popover-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-popover-layout-ease);\n transition-duration: var(--lobe-popover-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant],\n &[data-repop] {\n transition: none;\n }\n\n /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-popover-translate-x: 0;\n --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n --lobe-popover-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n --lobe-popover-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-popover-layout-duration: 0s;\n }\n `,\n\n root: css`\n user-select: none;\n position: relative;\n filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n `,\n\n viewport: css`\n --lobe-popover-viewport-inline-padding: 12px;\n --lobe-popover-content-shift: 8px;\n --lobe-popover-content-blur: 4px;\n\n position: relative;\n overflow: clip;\n padding-block: 12px;\n padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n [data-previous],\n [data-current] {\n transform: translateX(0);\n opacity: 1;\n filter: blur(0);\n transition:\n transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n }\n\n [data-current] {\n transition-delay:\n 0s, calc(var(--lobe-popover-layout-duration) / 6),\n calc(var(--lobe-popover-layout-duration) / 6);\n }\n\n [data-previous][data-ending-style],\n [data-current][data-starting-style] {\n filter: blur(var(--lobe-popover-content-blur));\n }\n\n /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n the viewport clip reveals the new content as the box grows over it. */\n [data-previous] {\n position: absolute;\n inset-block-start: 12px;\n inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n }\n\n &[data-transitioning] [data-current] {\n width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2);\n }\n\n &[data-repop] [data-previous] {\n display: none;\n }\n\n &[data-repop] [data-current] {\n transition: none;\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-popover-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;qBAOS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;kBAEvB,OAAO,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C1C,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|
|
@@ -305,11 +305,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
305
305
|
position: absolute;
|
|
306
306
|
inset-block-start: 4px;
|
|
307
307
|
inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);
|
|
308
|
-
width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2
|
|
308
|
+
width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2);
|
|
309
309
|
}
|
|
310
310
|
|
|
311
311
|
&[data-transitioning] [data-current] {
|
|
312
|
-
width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2
|
|
312
|
+
width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2);
|
|
313
313
|
}
|
|
314
314
|
|
|
315
315
|
&[data-repop] [data-previous] {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n transition:\n inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n will-change: transform, opacity;\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n box-sizing: border-box;\n\n /* The 320px cap lives on the viewport, not here: Base UI measures content with\n --available-width set to max-content, and min(320px, max-content) is invalid, which\n recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n snaps to the new size and would freeze the shrink half of the morph. */\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadowTertiary}, var(--lobe-ring);\n\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n transition-property: opacity, transform;\n\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n &[data-layout-animation] {\n width: var(--popup-width, auto);\n height: var(--popup-height, auto);\n\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n transition-duration:\n var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-repop] {\n transition: none;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n change them together with the curves, not independently. */\n --lobe-tooltip-animation-duration: 280ms;\n --lobe-tooltip-fade-duration: 160ms;\n --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n --lobe-tooltip-animation-duration-exit: 100ms;\n --lobe-tooltip-animation-translate: 3px;\n --lobe-tooltip-animation-scale: 0.97;\n --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --lobe-tooltip-animation-ease-out: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.662,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-layout-duration: 380ms;\n --lobe-tooltip-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-tooltip-layout-ease);\n transition-duration: var(--lobe-tooltip-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant],\n &[data-repop] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-tooltip-animation-duration: 0s;\n --lobe-tooltip-fade-duration: 0s;\n --lobe-tooltip-animation-duration-exit: 0s;\n --lobe-tooltip-layout-duration: 0s;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n --lobe-tooltip-content-shift: 8px;\n --lobe-tooltip-content-blur: 4px;\n\n position: relative;\n\n overflow: clip;\n\n max-width: calc(320px - 2px);\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n /* Old and new text overlap in one clip box while the box morphs; blurring both layers during\n the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n filter: blur(0);\n\n transition:\n transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),\n filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n }\n\n [data-current] {\n transition-delay:\n 0s, calc(var(--lobe-tooltip-layout-duration) / 6),\n calc(var(--lobe-tooltip-layout-duration) / 6);\n }\n\n [data-previous][data-ending-style],\n [data-current][data-starting-style] {\n filter: blur(var(--lobe-tooltip-content-blur));\n }\n\n /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n the viewport clip reveals the new text as the box grows over it. */\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n }\n\n &[data-transitioning] [data-current] {\n width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n }\n\n &[data-repop] [data-previous] {\n display: none;\n }\n\n &[data-repop] [data-current] {\n transition: none;\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;cAsBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;;;;;;qBAkBS,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CzC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Gf,EAAE"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n arrow: css`\n --lobe-tooltip-arrow-offset-block: 4px;\n --lobe-tooltip-arrow-offset-inline: 6px;\n\n pointer-events: none;\n\n position: absolute;\n transform-origin: center;\n\n display: flex;\n\n width: 8px;\n height: 4px;\n\n transition:\n inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);\n\n & > svg {\n display: block;\n width: 100%;\n height: 100%;\n fill: ${cssVar.colorBgElevated};\n }\n\n & [data-role='stroke'] {\n stroke: ${cssVar.colorBorderSecondary};\n }\n\n &[data-side='top'] {\n inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n transform: rotate(180deg);\n }\n\n &[data-side='left'] {\n inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(90deg);\n }\n\n &[data-side='right'] {\n inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n transform: rotate(-90deg);\n }\n\n &[data-side='bottom'] {\n inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n }\n `,\n\n popup: css`\n /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n snapping — a visible one-frame shift when the measured width is fractional\n (single-line tooltips). */\n will-change: transform, opacity;\n user-select: none;\n\n position: relative;\n transform-origin: var(--transform-origin);\n\n box-sizing: border-box;\n\n /* The 320px cap lives on the viewport, not here: Base UI measures content with\n --available-width set to max-content, and min(320px, max-content) is invalid, which\n recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n snaps to the new size and would freeze the shrink half of the morph. */\n max-width: var(--available-width);\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.2;\n color: ${cssVar.colorTextLabel};\n\n background: ${cssVar.colorBgElevated};\n box-shadow: ${cssVar.boxShadowTertiary}, var(--lobe-ring);\n\n /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n as a dropped frame. The spring stays on transform only. */\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n transition-property: opacity, transform;\n\n /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n one frame later; the box only morphs if width/height actually read them. */\n &[data-layout-animation] {\n width: var(--popup-width, auto);\n height: var(--popup-height, auto);\n\n transition-timing-function:\n var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n transition-duration:\n var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n transition-property: opacity, transform, width, height;\n }\n\n &[data-repop] {\n transition: none;\n }\n\n &[data-starting-style],\n &[data-ending-style] {\n transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n scale(var(--lobe-tooltip-animation-scale));\n opacity: 0;\n }\n\n &[data-ending-style] {\n transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n transition-duration: var(--lobe-tooltip-animation-duration-exit);\n }\n\n &[data-instant] {\n transition: none;\n }\n `,\n\n positioner: css`\n /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n change them together with the curves, not independently. */\n --lobe-tooltip-animation-duration: 280ms;\n --lobe-tooltip-fade-duration: 160ms;\n --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n --lobe-tooltip-animation-duration-exit: 100ms;\n --lobe-tooltip-animation-translate: 3px;\n --lobe-tooltip-animation-scale: 0.97;\n --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n --lobe-tooltip-animation-ease-out: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.662,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-layout-duration: 380ms;\n --lobe-tooltip-layout-ease: linear(\n 0,\n 0.041,\n 0.14,\n 0.268,\n 0.407,\n 0.541,\n 0.661,\n 0.765,\n 0.849,\n 0.915,\n 0.964,\n 0.998,\n 1.02,\n 1.032,\n 1.038,\n 1.039,\n 1.036,\n 1.032,\n 1.027,\n 1.022,\n 1.016,\n 1.012,\n 1.008,\n 1.005,\n 1.003\n );\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n will-change: transform, opacity;\n\n z-index: 114514;\n\n width: min(var(--positioner-width), 320px, var(--available-width));\n height: var(--positioner-height);\n\n transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n transition-duration: var(--lobe-tooltip-animation-duration);\n transition-property: none;\n\n &[data-layout-animation] {\n transition-timing-function: var(--lobe-tooltip-layout-ease);\n transition-duration: var(--lobe-tooltip-layout-duration);\n transition-property:\n inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n }\n\n &[data-instant],\n &[data-repop] {\n transition: none;\n }\n\n /* Fallback: never show a tooltip when the anchor is hidden or the positioner falls back to (0,0). */\n &[data-anchor-hidden],\n &[data-zero-origin='true'] {\n pointer-events: none;\n visibility: hidden;\n }\n\n &[data-placement='top'],\n &[data-placement='topLeft'],\n &[data-placement='topRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n }\n\n &[data-placement='bottom'],\n &[data-placement='bottomLeft'],\n &[data-placement='bottomRight'] {\n --lobe-tooltip-translate-x: 0;\n --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n }\n\n &[data-placement='left'],\n &[data-placement='leftTop'],\n &[data-placement='leftBottom'] {\n --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n --lobe-tooltip-translate-y: 0;\n }\n\n &[data-placement='right'],\n &[data-placement='rightTop'],\n &[data-placement='rightBottom'] {\n --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n --lobe-tooltip-translate-y: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n --lobe-tooltip-animation-duration: 0s;\n --lobe-tooltip-fade-duration: 0s;\n --lobe-tooltip-animation-duration-exit: 0s;\n --lobe-tooltip-layout-duration: 0s;\n }\n `,\n\n viewport: css`\n --lobe-tooltip-viewport-inline-padding: 8px;\n --lobe-tooltip-content-shift: 8px;\n --lobe-tooltip-content-blur: 4px;\n\n position: relative;\n\n overflow: clip;\n\n max-width: calc(320px - 2px);\n padding-block: 4px;\n padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n overflow-wrap: break-word;\n white-space: normal;\n\n /* Old and new text overlap in one clip box while the box morphs; blurring both layers during\n the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n [data-previous],\n [data-current] {\n transform: translateX(0);\n\n display: flex;\n gap: 6px;\n align-items: center;\n\n opacity: 1;\n filter: blur(0);\n\n transition:\n transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),\n filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n }\n\n [data-current] {\n transition-delay:\n 0s, calc(var(--lobe-tooltip-layout-duration) / 6),\n calc(var(--lobe-tooltip-layout-duration) / 6);\n }\n\n [data-previous][data-ending-style],\n [data-current][data-starting-style] {\n filter: blur(var(--lobe-tooltip-content-blur));\n }\n\n /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n the viewport clip reveals the new text as the box grows over it. */\n [data-previous] {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2);\n }\n\n &[data-transitioning] [data-current] {\n width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2);\n }\n\n &[data-repop] [data-previous] {\n display: none;\n }\n\n &[data-repop] [data-current] {\n transition: none;\n }\n\n &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='right'] [data-current][data-starting-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n transform: translateX(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='left'] [data-current][data-starting-style] {\n transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n\n &[data-activation-direction~='down'] [data-current][data-starting-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n transform: translateY(var(--lobe-tooltip-content-shift));\n opacity: 0;\n }\n\n &[data-activation-direction~='up'] [data-current][data-starting-style] {\n transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n opacity: 0;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;cAsBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;;;;;;qBAkBS,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;kBACvB,OAAO,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CzC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Gf,EAAE"}
|
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { icons_default as default };
|
|
1
|
+
export { LobeHub as default } from "@lobehub/icons";
|
package/es/storybook/index.mjs
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { StoryBook, useControls, useCreateStore };
|
|
1
|
+
export { StoryBook, useControls, useCreateStore } from "./StoryBook/index.mjs";
|