@lobehub/ui 5.42.6 → 5.42.7
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.
|
@@ -28,10 +28,7 @@ declare const ScrollAreaViewport: {
|
|
|
28
28
|
({ className, scrollFade, ...rest }: ScrollAreaViewportProps): React.JSX.Element;
|
|
29
29
|
displayName: string;
|
|
30
30
|
};
|
|
31
|
-
declare const ScrollAreaContent:
|
|
32
|
-
({ className, ...rest }: ScrollAreaContentProps): React.JSX.Element;
|
|
33
|
-
displayName: string;
|
|
34
|
-
};
|
|
31
|
+
declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
35
32
|
declare const ScrollAreaScrollbar: {
|
|
36
33
|
({ className, ...rest }: ScrollAreaScrollbarProps): React.JSX.Element;
|
|
37
34
|
displayName: string;
|
|
@@ -30,13 +30,7 @@ const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
|
|
|
30
30
|
})] });
|
|
31
31
|
};
|
|
32
32
|
ScrollAreaViewport.displayName = "ScrollAreaViewport";
|
|
33
|
-
const ScrollAreaContent =
|
|
34
|
-
return /* @__PURE__ */ jsx(ScrollArea.Content, {
|
|
35
|
-
...rest,
|
|
36
|
-
className: mergeStateClassName(styles.content, className)
|
|
37
|
-
});
|
|
38
|
-
};
|
|
39
|
-
ScrollAreaContent.displayName = "ScrollAreaContent";
|
|
33
|
+
const ScrollAreaContent = ScrollArea.Content;
|
|
40
34
|
const ScrollAreaScrollbar = ({ className, ...rest }) => {
|
|
41
35
|
return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
|
|
42
36
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n /**\n * Enable gradient scroll fade on the viewport edges.\n *\n * - `true` / `'vertical'`: fade top and bottom edges.\n * - `'horizontal'`: fade start and end edges.\n * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n * - `false`: no fade.\n *\n * @default false\n */\n scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n return (\n <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n if (!scrollFade) return undefined;\n const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n if (orientation === 'both') return styles.viewportFadeBoth;\n return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n className,\n scrollFade = false,\n ...rest\n}: ScrollAreaViewportProps) => {\n return (\n <>\n <ScrollAreaGlobalStyle />\n <BaseScrollArea.Viewport\n {...rest}\n className={\n mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n }\n />\n </>\n );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent =
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n base: string,\n className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n return cx(base, className);\n};\n\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n /**\n * Enable gradient scroll fade on the viewport edges.\n *\n * - `true` / `'vertical'`: fade top and bottom edges.\n * - `'horizontal'`: fade start and end edges.\n * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n * - `false`: no fade.\n *\n * @default false\n */\n scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n return (\n <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n if (!scrollFade) return undefined;\n const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n if (orientation === 'both') return styles.viewportFadeBoth;\n return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n className,\n scrollFade = false,\n ...rest\n}: ScrollAreaViewportProps) => {\n return (\n <>\n <ScrollAreaGlobalStyle />\n <BaseScrollArea.Viewport\n {...rest}\n className={\n mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n }\n />\n </>\n );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = BaseScrollArea.Content;\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n return (\n <BaseScrollArea.Scrollbar\n {...rest}\n className={mergeStateClassName(styles.scrollbar, className) as any}\n />\n );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n return (\n <BaseScrollArea.Thumb\n {...rest}\n className={mergeStateClassName(styles.thumb, className) as any}\n />\n );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n return (\n <BaseScrollArea.Corner\n {...rest}\n className={mergeStateClassName(styles.corner, className) as any}\n />\n );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,SAAS;CAAW,CAAA;AAEnG;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO,OAAO;CAChD,IAAI,gBAAgB,QAAQ,OAAO,OAAO;CAC1C,OAAO,OAAO;AAChB;AAEA,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;CAC7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,CAAwB,CAAA,GACxB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,UAAU,CAAC,GAAG,SAAS;CAEnF,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,mBAAmB,cAAc;AAEjC,MAAa,oBAAoBA,WAAe;AAEhD,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,SAAS;CAC3D,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAS;CACvD,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,SAAS;CACxD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}
|
|
@@ -2,15 +2,6 @@ import { focusRing } from "../focusRing.mjs";
|
|
|
2
2
|
import { createStaticStyles } from "antd-style";
|
|
3
3
|
//#region src/base-ui/ScrollArea/style.ts
|
|
4
4
|
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
5
|
-
content: css`
|
|
6
|
-
display: flex;
|
|
7
|
-
flex-direction: column;
|
|
8
|
-
gap: 16px;
|
|
9
|
-
|
|
10
|
-
font-size: ${cssVar.fontSizeSM};
|
|
11
|
-
line-height: 1.375rem;
|
|
12
|
-
color: ${cssVar.colorText};
|
|
13
|
-
`,
|
|
14
5
|
corner: css`
|
|
15
6
|
background: ${cssVar.colorFillSecondary};
|
|
16
7
|
`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n corner: css`\n background: ${cssVar.colorFillSecondary};\n `,\n\n root: css`\n position: relative;\n box-sizing: border-box;\n `,\n\n scrollbar: css`\n pointer-events: none;\n\n margin: 3px;\n border-radius: ${cssVar.borderRadiusSM};\n\n opacity: 0;\n background: transparent;\n\n transition:\n opacity 150ms,\n width 150ms,\n height 150ms;\n\n &::before {\n content: '';\n position: absolute;\n }\n\n &[data-scrolling] {\n transition-duration: 0ms, 150ms, 150ms;\n }\n\n &[data-hovering],\n &[data-scrolling] {\n pointer-events: auto;\n opacity: 1;\n }\n\n &[data-orientation='vertical'] {\n width: 3px;\n\n &::before {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n width: 16px;\n height: 100%;\n }\n\n &:hover {\n width: 6px;\n }\n }\n\n &[data-orientation='horizontal'] {\n height: 3px;\n\n &::before {\n inset-block-start: 50%;\n transform: translateY(-50%);\n width: 100%;\n height: 16px;\n }\n\n &:hover {\n height: 6px;\n }\n }\n `,\n\n thumb: css`\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background: ${cssVar.colorTextQuaternary};\n `,\n\n viewport: css`\n position: relative;\n overscroll-behavior: auto;\n height: 100%;\n outline: none;\n\n ${focusRing};\n `,\n\n viewportFade: css`\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching top/bottom doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-top-in {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self y), scroll(self y);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeHorizontal: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n /* Fade the CONTENT via mask, so it works on background images too. */\n mask-image: linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat;\n mask-size: 100% 100%;\n\n /* Scroll-driven animation: use scroll position to drive the mask. */\n @supports (animation-timeline: scroll()) {\n /*\n * Important: drive fade by *distance to edges* (first/last 40px),\n * so reaching start/end doesn't cause a sudden snap.\n */\n @keyframes lobe-scroll-area-fade-left-in {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n animation-duration: 1ms, 1ms;\n animation-timing-function: linear, linear;\n animation-fill-mode: both, both;\n animation-timeline: scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n\n viewportFadeBoth: css`\n --scroll-area-overflow-x-start: inherit;\n --scroll-area-overflow-x-end: inherit;\n --scroll-area-overflow-y-start: inherit;\n --scroll-area-overflow-y-end: inherit;\n --lobe-scroll-area-fade-size: 40px;\n --lobe-scroll-area-fade-top: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-start, 0px)\n );\n --lobe-scroll-area-fade-bottom: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-y-end, 0px)\n );\n --lobe-scroll-area-fade-left: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-start, 0px)\n );\n --lobe-scroll-area-fade-right: min(\n var(--lobe-scroll-area-fade-size),\n var(--scroll-area-overflow-x-end, 0px)\n );\n\n mask-composite: intersect;\n\n /*\n * Combine vertical + horizontal fades by intersecting two gradient masks\n * so the four corners stay transparent only when both axes overflow.\n */\n mask-image:\n linear-gradient(\n to bottom,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-top),\n #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n transparent 100%\n ),\n linear-gradient(\n to right,\n transparent 0,\n #000 var(--lobe-scroll-area-fade-left),\n #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n transparent 100%\n );\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n 100% 100%,\n 100% 100%;\n\n @supports (animation-timeline: scroll()) {\n @keyframes lobe-scroll-area-fade-top-in-both {\n from {\n --lobe-scroll-area-fade-top: 0;\n }\n\n to {\n --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-bottom-out-both {\n from {\n --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-bottom: 0;\n }\n }\n\n @keyframes lobe-scroll-area-fade-left-in-both {\n from {\n --lobe-scroll-area-fade-left: 0;\n }\n\n to {\n --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n }\n }\n\n @keyframes lobe-scroll-area-fade-right-out-both {\n from {\n --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n }\n\n to {\n --lobe-scroll-area-fade-right: 0;\n }\n }\n\n animation-name:\n lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n animation-duration: 1ms, 1ms, 1ms, 1ms;\n animation-timing-function: linear, linear, linear, linear;\n animation-fill-mode: both, both, both, both;\n animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n animation-range:\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n 0 var(--lobe-scroll-area-fade-size),\n calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n }\n `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
|