@lobehub/ui 5.41.0 → 5.41.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -185,6 +185,15 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
185
185
|
&[data-has-footer] {
|
|
186
186
|
padding-block-end: 0;
|
|
187
187
|
}
|
|
188
|
+
|
|
189
|
+
/* Base UI moves data-highlighted with the arrow keys, but :hover keeps painting
|
|
190
|
+
whatever the resting cursor sits on, so two items light up at once. */
|
|
191
|
+
&:has([data-highlighted]) {
|
|
192
|
+
[role^='menuitem']:hover:not([data-highlighted]),
|
|
193
|
+
[role='option']:hover:not([data-highlighted]) {
|
|
194
|
+
background: transparent !important;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
188
197
|
`,
|
|
189
198
|
popupWithSlots: css`
|
|
190
199
|
overflow: hidden;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n danger: css`\n --lobe-menu-icon-color: ${cssVar.colorError};\n\n color: ${cssVar.colorError} !important;\n\n &:hover {\n background: ${cssVar.colorErrorBg} !important;\n }\n `,\n\n empty: css`\n cursor: default;\n font-style: italic;\n color: ${cssVar.colorTextTertiary};\n `,\n\n extra: css`\n margin-inline-start: auto;\n padding-inline-start: 16px;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n `,\n\n footer: css`\n flex-shrink: 0;\n padding-block: 8px;\n padding-inline: 12px;\n border-block-start: 1px solid ${cssVar.colorBorder};\n `,\n\n header: css`\n flex-shrink: 0;\n padding-block: 8px;\n padding-inline: 12px;\n border-block-end: 1px solid ${cssVar.colorBorder};\n `,\n\n groupLabel: css`\n user-select: none;\n\n padding-block: 8px 4px;\n padding-inline: 12px;\n\n font-size: 10px;\n font-weight: 600;\n line-height: 14px;\n color: ${cssVar.colorTextTertiary};\n text-transform: uppercase;\n letter-spacing: 0.6px;\n\n [role='group']:first-child > & {\n padding-block-start: 4px;\n }\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 14px;\n height: 14px;\n margin-inline-end: 12px;\n\n color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n & svg {\n width: 100%;\n height: 100%;\n }\n `,\n\n item: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n align-items: center;\n\n width: 100%;\n min-height: 32px;\n padding-block: 6px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n line-height: 20px;\n color: ${cssVar.colorText};\n\n outline: none;\n\n transition: all 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n opacity: 0.5;\n\n &:hover {\n background: transparent;\n }\n }\n\n &[data-highlighted]:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &[data-state='open']:not([data-disabled]),\n &[data-open]:not([data-disabled]),\n &[aria-expanded='true']:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n `,\n\n itemContent: css`\n display: flex;\n flex: 1;\n gap: 0;\n align-items: center;\n `,\n\n itemContentAlignStart: css`\n align-items: flex-start;\n `,\n\n iconAlignStart: css`\n align-self: flex-start;\n margin-block-start: 2px;\n `,\n\n label: css`\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n & a,\n & a:visited,\n & a:hover,\n & a:active {\n color: inherit;\n }\n `,\n\n labelGroup: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-width: 0;\n `,\n\n desc: css`\n overflow: hidden;\n\n font-size: 12px;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n\n popup: css`\n overflow-y: auto;\n\n min-width: 220px;\n max-height: var(--available-height);\n padding: 4px;\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 0 1px ${cssVar.colorBorder},\n 0 4px 12px 0 rgb(0 0 0 / 8%),\n 0 1px 3px 0 rgb(0 0 0 / 6%);\n\n &[data-has-header] {\n padding-block-start: 0;\n }\n\n &[data-has-footer] {\n padding-block-end: 0;\n }\n `,\n\n popupWithSlots: css`\n overflow: hidden;\n display: flex;\n flex-direction: column;\n max-height: var(--available-height);\n `,\n\n slotViewport: css`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n `,\n\n positioner: css`\n --lobe-dropdown-animation-duration: 140ms;\n --lobe-dropdown-animation-scale-y: 0.92;\n --lobe-dropdown-animation-ease-in: ease-in;\n --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n z-index: 1100;\n\n & > * {\n will-change: opacity, transform;\n transform-origin: var(--transform-origin);\n animation: none;\n }\n\n &[data-open] > * {\n transform: scaleY(1);\n opacity: 1;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n }\n\n &[data-open] > *[data-starting-style] {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n }\n\n &[data-closed] > * {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n }\n\n &[data-hover-trigger] {\n --lobe-dropdown-animation-duration: 140ms;\n }\n\n &[data-submenu],\n &[data-nested] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n\n z-index: 1199;\n }\n\n &[data-side='left'],\n &[data-side='right'] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n }\n `,\n\n separator: css`\n height: 1px;\n margin-block: 4px;\n margin-inline: 0;\n background: ${cssVar.colorBorder};\n `,\n\n submenuArrow: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n margin-inline-start: 8px;\n\n color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n & svg {\n width: 12px;\n height: 12px;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;8BACiB,OAAO,WAAW;;aAEnC,OAAO,WAAW;;;oBAGX,OAAO,aAAa;;;CAItC,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;CAGpC,OAAO,GAAG;;;;mBAIO,OAAO,eAAe;;aAE5B,OAAO,kBAAkB;;CAGpC,QAAQ,GAAG;;;;oCAIuB,OAAO,YAAY;;CAGrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;CAGnD,YAAY,GAAG;;;;;;;;;aASJ,OAAO,kBAAkB;;;;;;;;CASpC,MAAM,GAAG;;;;;;;;;;yCAU8B,OAAO,mBAAmB;;;;;;;CAQjE,MAAM,GAAG;;;;;;;;;;;;;qBAaU,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;;;4BAIF,OAAO,cAAc;;;oBAG7B,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;eAK/B,OAAO,kBAAkB;;;;;;;;;oBASpB,OAAO,kBAAkB;;;;;;oBAMzB,OAAO,kBAAkB;;;CAI3C,aAAa,GAAG;;;;;;CAOhB,uBAAuB,GAAG;;;CAI1B,gBAAgB,GAAG;;;;CAKnB,OAAO,GAAG;;;;;;;;;;;;;CAcV,YAAY,GAAG;;;;;;;;CASf,MAAM,GAAG;;;;;aAKE,OAAO,kBAAkB;;;;CAKpC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kBAGvB,OAAO,YAAY
|
|
1
|
+
{"version":3,"file":"sharedStyle.mjs","names":[],"sources":["../../../src/base-ui/DropdownMenu/sharedStyle.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n danger: css`\n --lobe-menu-icon-color: ${cssVar.colorError};\n\n color: ${cssVar.colorError} !important;\n\n &:hover {\n background: ${cssVar.colorErrorBg} !important;\n }\n `,\n\n empty: css`\n cursor: default;\n font-style: italic;\n color: ${cssVar.colorTextTertiary};\n `,\n\n extra: css`\n margin-inline-start: auto;\n padding-inline-start: 16px;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: 12px;\n color: ${cssVar.colorTextTertiary};\n `,\n\n footer: css`\n flex-shrink: 0;\n padding-block: 8px;\n padding-inline: 12px;\n border-block-start: 1px solid ${cssVar.colorBorder};\n `,\n\n header: css`\n flex-shrink: 0;\n padding-block: 8px;\n padding-inline: 12px;\n border-block-end: 1px solid ${cssVar.colorBorder};\n `,\n\n groupLabel: css`\n user-select: none;\n\n padding-block: 8px 4px;\n padding-inline: 12px;\n\n font-size: 10px;\n font-weight: 600;\n line-height: 14px;\n color: ${cssVar.colorTextTertiary};\n text-transform: uppercase;\n letter-spacing: 0.6px;\n\n [role='group']:first-child > & {\n padding-block-start: 4px;\n }\n `,\n\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 14px;\n height: 14px;\n margin-inline-end: 12px;\n\n color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n & svg {\n width: 100%;\n height: 100%;\n }\n `,\n\n item: css`\n user-select: none;\n\n position: relative;\n\n overflow: hidden;\n display: flex;\n align-items: center;\n\n width: 100%;\n min-height: 32px;\n padding-block: 6px;\n padding-inline: 12px;\n border-radius: ${cssVar.borderRadiusSM};\n\n font-size: 14px;\n line-height: 20px;\n color: ${cssVar.colorText};\n\n outline: none;\n\n transition: all 150ms ${cssVar.motionEaseOut};\n\n &:hover {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:active {\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n opacity: 0.5;\n\n &:hover {\n background: transparent;\n }\n }\n\n &[data-highlighted]:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &[data-state='open']:not([data-disabled]),\n &[data-open]:not([data-disabled]),\n &[aria-expanded='true']:not([data-disabled]) {\n background: ${cssVar.colorFillTertiary};\n }\n `,\n\n itemContent: css`\n display: flex;\n flex: 1;\n gap: 0;\n align-items: center;\n `,\n\n itemContentAlignStart: css`\n align-items: flex-start;\n `,\n\n iconAlignStart: css`\n align-self: flex-start;\n margin-block-start: 2px;\n `,\n\n label: css`\n overflow: hidden;\n flex: 1;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n & a,\n & a:visited,\n & a:hover,\n & a:active {\n color: inherit;\n }\n `,\n\n labelGroup: css`\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n\n min-width: 0;\n `,\n\n desc: css`\n overflow: hidden;\n\n font-size: 12px;\n line-height: 16px;\n color: ${cssVar.colorTextTertiary};\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n\n popup: css`\n overflow-y: auto;\n\n min-width: 220px;\n max-height: var(--available-height);\n padding: 4px;\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorBgElevated};\n outline: none;\n box-shadow:\n 0 0 0 1px ${cssVar.colorBorder},\n 0 4px 12px 0 rgb(0 0 0 / 8%),\n 0 1px 3px 0 rgb(0 0 0 / 6%);\n\n &[data-has-header] {\n padding-block-start: 0;\n }\n\n &[data-has-footer] {\n padding-block-end: 0;\n }\n\n /* Base UI moves data-highlighted with the arrow keys, but :hover keeps painting\n whatever the resting cursor sits on, so two items light up at once. */\n &:has([data-highlighted]) {\n [role^='menuitem']:hover:not([data-highlighted]),\n [role='option']:hover:not([data-highlighted]) {\n background: transparent !important;\n }\n }\n `,\n\n popupWithSlots: css`\n overflow: hidden;\n display: flex;\n flex-direction: column;\n max-height: var(--available-height);\n `,\n\n slotViewport: css`\n overflow-y: auto;\n flex: 1;\n min-height: 0;\n `,\n\n positioner: css`\n --lobe-dropdown-animation-duration: 140ms;\n --lobe-dropdown-animation-scale-y: 0.92;\n --lobe-dropdown-animation-ease-in: ease-in;\n --lobe-dropdown-animation-ease-out: ${cssVar.motionEaseOut};\n\n z-index: 1100;\n\n & > * {\n will-change: opacity, transform;\n transform-origin: var(--transform-origin);\n animation: none;\n }\n\n &[data-open] > * {\n transform: scaleY(1);\n opacity: 1;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-out);\n }\n\n &[data-open] > *[data-starting-style] {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n }\n\n &[data-closed] > * {\n transform: scaleY(var(--lobe-dropdown-animation-scale-y));\n opacity: 0;\n transition:\n opacity var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in),\n transform var(--lobe-dropdown-animation-duration) var(--lobe-dropdown-animation-ease-in);\n }\n\n &[data-hover-trigger] {\n --lobe-dropdown-animation-duration: 140ms;\n }\n\n &[data-submenu],\n &[data-nested] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n\n z-index: 1199;\n }\n\n &[data-side='left'],\n &[data-side='right'] {\n --lobe-dropdown-animation-duration: 0ms;\n --lobe-dropdown-animation-scale-y: 1;\n }\n `,\n\n separator: css`\n height: 1px;\n margin-block: 4px;\n margin-inline: 0;\n background: ${cssVar.colorBorder};\n `,\n\n submenuArrow: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 16px;\n height: 16px;\n margin-inline-start: 8px;\n\n color: var(--lobe-menu-icon-color, ${cssVar.colorTextSecondary});\n\n & svg {\n width: 12px;\n height: 12px;\n }\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;8BACiB,OAAO,WAAW;;aAEnC,OAAO,WAAW;;;oBAGX,OAAO,aAAa;;;CAItC,OAAO,GAAG;;;aAGC,OAAO,kBAAkB;;CAGpC,OAAO,GAAG;;;;mBAIO,OAAO,eAAe;;aAE5B,OAAO,kBAAkB;;CAGpC,QAAQ,GAAG;;;;oCAIuB,OAAO,YAAY;;CAGrD,QAAQ,GAAG;;;;kCAIqB,OAAO,YAAY;;CAGnD,YAAY,GAAG;;;;;;;;;aASJ,OAAO,kBAAkB;;;;;;;;CASpC,MAAM,GAAG;;;;;;;;;;yCAU8B,OAAO,mBAAmB;;;;;;;CAQjE,MAAM,GAAG;;;;;;;;;;;;;qBAaU,OAAO,eAAe;;;;aAI9B,OAAO,UAAU;;;;4BAIF,OAAO,cAAc;;;oBAG7B,OAAO,kBAAkB;;;;oBAIzB,OAAO,mBAAmB;;;;;eAK/B,OAAO,kBAAkB;;;;;;;;;oBASpB,OAAO,kBAAkB;;;;;;oBAMzB,OAAO,kBAAkB;;;CAI3C,aAAa,GAAG;;;;;;CAOhB,uBAAuB,GAAG;;;CAI1B,gBAAgB,GAAG;;;;CAKnB,OAAO,GAAG;;;;;;;;;;;;;CAcV,YAAY,GAAG;;;;;;;;CASf,MAAM,GAAG;;;;;aAKE,OAAO,kBAAkB;;;;CAKpC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;kBAEvB,OAAO,gBAAgB;;;kBAGvB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;CAsBnC,gBAAgB,GAAG;;;;;;CAOnB,cAAc,GAAG;;;;;CAMjB,YAAY,GAAG;;;;0CAIyB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkD7D,WAAW,GAAG;;;;kBAIE,OAAO,YAAY;;CAGnC,cAAc,GAAG;;;;;;;;;;yCAUsB,OAAO,mBAAmB;;;;;;;AAOnE,EAAE"}
|
|
@@ -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 content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\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: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n\n opacity: 0;\n background: transparent;\n\n transition: opacity 150ms;\n\n &::before {\n content: '';\n position: absolute;\n }\n\n &[data-scrolling] {\n transition-duration: 0ms;\n }\n\n &[data-hovering],\n &[data-scrolling] {\n pointer-events: auto;\n opacity: 1;\n }\n\n &[data-orientation='vertical'] {\n width: 4px;\n\n &::before {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 100%;\n }\n }\n\n &[data-orientation='horizontal'] {\n height: 4px;\n\n &::before {\n inset-block-end: -8px;\n inset-inline: 0;\n width: 100%;\n height: 20px;\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 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,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG
|
|
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 content: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n\n font-size: ${cssVar.fontSizeSM};\n line-height: 1.375rem;\n color: ${cssVar.colorText};\n `,\n\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: 8px;\n border-radius: ${cssVar.borderRadiusSM};\n\n opacity: 0;\n background: transparent;\n\n transition: opacity 150ms;\n\n &::before {\n content: '';\n position: absolute;\n }\n\n &[data-scrolling] {\n transition-duration: 0ms;\n }\n\n &[data-hovering],\n &[data-scrolling] {\n pointer-events: auto;\n opacity: 1;\n }\n\n &[data-orientation='vertical'] {\n width: 4px;\n\n &::before {\n inset-inline-start: 50%;\n transform: translateX(-50%);\n width: 20px;\n height: 100%;\n }\n }\n\n &[data-orientation='horizontal'] {\n height: 4px;\n\n &::before {\n inset-block-end: -8px;\n inset-inline: 0;\n width: 100%;\n height: 20px;\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,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lobehub/ui",
|
|
3
|
-
"version": "5.41.
|
|
3
|
+
"version": "5.41.1",
|
|
4
4
|
"description": "Lobe UI is an open-source UI component library for building AIGC web apps",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lobehub",
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
"react": "^19.0.0",
|
|
223
223
|
"react-dom": "^19.0.0"
|
|
224
224
|
},
|
|
225
|
-
"packageManager": "pnpm@
|
|
225
|
+
"packageManager": "pnpm@12.3.4+sha512.961aa41fb077da3a04a441d9f8e15ebc0c96da8ef710b2eb67bf9ee7cb0610eabd48f1fd85f51cffe73846785fa0f87c56a3a872a1d893f8446741b5cce45457",
|
|
226
226
|
"engines": {
|
|
227
227
|
"node": ">=22.22.0"
|
|
228
228
|
},
|