@lobehub/ui 5.42.3 → 5.42.5
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/base-ui/DraggablePanel/DraggablePanel.mjs +5 -2
- package/es/base-ui/DraggablePanel/DraggablePanel.mjs.map +1 -1
- package/es/base-ui/Input/style.d.mts +2 -2
- package/es/base-ui/ScrollArea/style.mjs +20 -9
- package/es/base-ui/ScrollArea/style.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +1 -1
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import { cx } from "antd-style";
|
|
7
7
|
//#region src/base-ui/DraggablePanel/DraggablePanel.tsx
|
|
8
8
|
const toNumber = (value) => typeof value === "number" ? Math.max(value, 0) : void 0;
|
|
9
|
-
const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, styles: customStyles, ...rest }) => {
|
|
9
|
+
const DraggablePanel = memo(({ backgroundColor, children, className, classNames, collapseThreshold, defaultExpand, defaultSize, expand, expandable = true, maxHeight, maxWidth, minHeight, minWidth, mode = "fixed", onExpandChange, onSizeChange, onSizeDragging, placement = "right", showBorder = true, showHandleWhenCollapsed, showHandleWideArea = true, size, style, styles: customStyles, ...rest }) => {
|
|
10
10
|
const { vertical } = AXES[placement];
|
|
11
11
|
const toSize = useCallback((value) => vertical ? {
|
|
12
12
|
height: value,
|
|
@@ -54,7 +54,10 @@ const DraggablePanel = memo(({ backgroundColor, children, className, classNames,
|
|
|
54
54
|
/* @__PURE__ */ jsx(DraggablePanelToggle, { showHandleWhenCollapsed }),
|
|
55
55
|
/* @__PURE__ */ jsx(DraggablePanelContent, {
|
|
56
56
|
className: cx(classNames?.content),
|
|
57
|
-
style:
|
|
57
|
+
style: {
|
|
58
|
+
...customStyles?.content,
|
|
59
|
+
...style
|
|
60
|
+
},
|
|
58
61
|
children
|
|
59
62
|
}),
|
|
60
63
|
/* @__PURE__ */ jsx(DraggablePanelHandle, { wideArea: showHandleWideArea })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DraggablePanel.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport {\n DraggablePanelContent,\n DraggablePanelHandle,\n DraggablePanelRoot,\n DraggablePanelToggle,\n} from './atoms';\nimport { AXES } from './core/axes';\nimport type { DraggablePanelProps, DraggablePanelSize } from './type';\n\nconst toNumber = (value: number | string | undefined) =>\n typeof value === 'number' ? Math.max(value, 0) : undefined;\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n backgroundColor,\n children,\n className,\n classNames,\n collapseThreshold,\n defaultExpand,\n defaultSize,\n expand,\n expandable = true,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n showHandleWhenCollapsed,\n showHandleWideArea = true,\n size,\n styles: customStyles,\n ...rest\n }) => {\n const { vertical } = AXES[placement];\n\n const toSize = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: '100%' } : { height: '100%', width: value },\n [vertical],\n );\n const toDelta = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: 0 } : { height: 0, width: value },\n [vertical],\n );\n\n const handleSizeChange = useCallback(\n (next: number, delta: number) => onSizeChange?.(toDelta(delta), toSize(next)),\n [onSizeChange, toDelta, toSize],\n );\n const handleSizeDragging = useCallback(\n (next: number, delta: number) => onSizeDragging?.(toDelta(delta), toSize(next)),\n [onSizeDragging, toDelta, toSize],\n );\n\n return (\n <DraggablePanelRoot\n backgroundColor={backgroundColor}\n className={className}\n collapseThreshold={collapseThreshold}\n defaultExpand={defaultExpand}\n defaultSize={toNumber(vertical ? defaultSize?.height : defaultSize?.width)}\n expand={expand}\n expandable={expandable}\n max={toNumber(vertical ? maxHeight : maxWidth)}\n min={toNumber(vertical ? minHeight : minWidth) ?? 0}\n mode={mode}\n placement={placement}\n showBorder={showBorder}\n size={toNumber(vertical ? size?.height : size?.width)}\n onExpandChange={onExpandChange}\n onSizeChange={handleSizeChange}\n onSizeDragging={handleSizeDragging}\n {...rest}\n >\n <DraggablePanelToggle showHandleWhenCollapsed={showHandleWhenCollapsed} />\n <DraggablePanelContent
|
|
1
|
+
{"version":3,"file":"DraggablePanel.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/DraggablePanel.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport {\n DraggablePanelContent,\n DraggablePanelHandle,\n DraggablePanelRoot,\n DraggablePanelToggle,\n} from './atoms';\nimport { AXES } from './core/axes';\nimport type { DraggablePanelProps, DraggablePanelSize } from './type';\n\nconst toNumber = (value: number | string | undefined) =>\n typeof value === 'number' ? Math.max(value, 0) : undefined;\n\nconst DraggablePanel = memo<DraggablePanelProps>(\n ({\n backgroundColor,\n children,\n className,\n classNames,\n collapseThreshold,\n defaultExpand,\n defaultSize,\n expand,\n expandable = true,\n maxHeight,\n maxWidth,\n minHeight,\n minWidth,\n mode = 'fixed',\n onExpandChange,\n onSizeChange,\n onSizeDragging,\n placement = 'right',\n showBorder = true,\n showHandleWhenCollapsed,\n showHandleWideArea = true,\n size,\n style,\n styles: customStyles,\n ...rest\n }) => {\n const { vertical } = AXES[placement];\n\n const toSize = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: '100%' } : { height: '100%', width: value },\n [vertical],\n );\n const toDelta = useCallback(\n (value: number): DraggablePanelSize =>\n vertical ? { height: value, width: 0 } : { height: 0, width: value },\n [vertical],\n );\n\n const handleSizeChange = useCallback(\n (next: number, delta: number) => onSizeChange?.(toDelta(delta), toSize(next)),\n [onSizeChange, toDelta, toSize],\n );\n const handleSizeDragging = useCallback(\n (next: number, delta: number) => onSizeDragging?.(toDelta(delta), toSize(next)),\n [onSizeDragging, toDelta, toSize],\n );\n\n return (\n <DraggablePanelRoot\n backgroundColor={backgroundColor}\n className={className}\n collapseThreshold={collapseThreshold}\n defaultExpand={defaultExpand}\n defaultSize={toNumber(vertical ? defaultSize?.height : defaultSize?.width)}\n expand={expand}\n expandable={expandable}\n max={toNumber(vertical ? maxHeight : maxWidth)}\n min={toNumber(vertical ? minHeight : minWidth) ?? 0}\n mode={mode}\n placement={placement}\n showBorder={showBorder}\n size={toNumber(vertical ? size?.height : size?.width)}\n onExpandChange={onExpandChange}\n onSizeChange={handleSizeChange}\n onSizeDragging={handleSizeDragging}\n {...rest}\n >\n <DraggablePanelToggle showHandleWhenCollapsed={showHandleWhenCollapsed} />\n <DraggablePanelContent\n className={cx(classNames?.content)}\n style={{ ...customStyles?.content, ...style }}\n >\n {children}\n </DraggablePanelContent>\n <DraggablePanelHandle wideArea={showHandleWideArea} />\n </DraggablePanelRoot>\n );\n },\n);\n\nDraggablePanel.displayName = 'DraggablePanel';\n\nexport default DraggablePanel;\n"],"mappings":";;;;;;;AAcA,MAAM,YAAY,UAChB,OAAO,UAAU,WAAW,KAAK,IAAI,OAAO,CAAC,IAAI,KAAA;AAEnD,MAAM,iBAAiB,MACpB,EACC,iBACA,UACA,WACA,YACA,mBACA,eACA,aACA,QACA,aAAa,MACb,WACA,UACA,WACA,UACA,OAAO,SACP,gBACA,cACA,gBACA,YAAY,SACZ,aAAa,MACb,yBACA,qBAAqB,MACrB,MACA,OACA,QAAQ,cACR,GAAG,WACC;CACJ,MAAM,EAAE,aAAa,KAAK;CAE1B,MAAM,SAAS,aACZ,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAO,IAAI;EAAE,QAAQ;EAAQ,OAAO;CAAM,GAC/E,CAAC,QAAQ,CACX;CACA,MAAM,UAAU,aACb,UACC,WAAW;EAAE,QAAQ;EAAO,OAAO;CAAE,IAAI;EAAE,QAAQ;EAAG,OAAO;CAAM,GACrE,CAAC,QAAQ,CACX;CAEA,MAAM,mBAAmB,aACtB,MAAc,UAAkB,eAAe,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC5E;EAAC;EAAc;EAAS;CAAM,CAChC;CACA,MAAM,qBAAqB,aACxB,MAAc,UAAkB,iBAAiB,QAAQ,KAAK,GAAG,OAAO,IAAI,CAAC,GAC9E;EAAC;EAAgB;EAAS;CAAM,CAClC;CAEA,OACE,qBAAC,oBAAD;EACmB;EACN;EACQ;EACJ;EACf,aAAa,SAAS,WAAW,aAAa,SAAS,aAAa,KAAK;EACjE;EACI;EACZ,KAAK,SAAS,WAAW,YAAY,QAAQ;EAC7C,KAAK,SAAS,WAAW,YAAY,QAAQ,KAAK;EAC5C;EACK;EACC;EACZ,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM,KAAK;EACpC;EAChB,cAAc;EACd,gBAAgB;EAChB,GAAI;EAjBN,UAAA;GAmBE,oBAAC,sBAAD,EAA+C,wBAA0B,CAAA;GACzE,oBAAC,uBAAD;IACE,WAAW,GAAG,YAAY,OAAO;IACjC,OAAO;KAAE,GAAG,cAAc;KAAS,GAAG;IAAM;IAE3C;GACoB,CAAA;GACvB,oBAAC,sBAAD,EAAsB,UAAU,mBAAqB,CAAA;EACnC;;AAExB,CACF;AAEA,eAAe,cAAc"}
|
|
@@ -23,8 +23,8 @@ declare const styles: {
|
|
|
23
23
|
};
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
|
-
size?: "
|
|
27
|
-
variant?: "filled" | "
|
|
26
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
+
variant?: "filled" | "borderless" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -21,13 +21,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
21
21
|
scrollbar: css`
|
|
22
22
|
pointer-events: none;
|
|
23
23
|
|
|
24
|
-
margin:
|
|
24
|
+
margin: 3px;
|
|
25
25
|
border-radius: ${cssVar.borderRadiusSM};
|
|
26
26
|
|
|
27
27
|
opacity: 0;
|
|
28
28
|
background: transparent;
|
|
29
29
|
|
|
30
|
-
transition:
|
|
30
|
+
transition:
|
|
31
|
+
opacity 150ms,
|
|
32
|
+
width 150ms,
|
|
33
|
+
height 150ms;
|
|
31
34
|
|
|
32
35
|
&::before {
|
|
33
36
|
content: '';
|
|
@@ -35,7 +38,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
35
38
|
}
|
|
36
39
|
|
|
37
40
|
&[data-scrolling] {
|
|
38
|
-
transition-duration: 0ms;
|
|
41
|
+
transition-duration: 0ms, 150ms, 150ms;
|
|
39
42
|
}
|
|
40
43
|
|
|
41
44
|
&[data-hovering],
|
|
@@ -45,24 +48,32 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
45
48
|
}
|
|
46
49
|
|
|
47
50
|
&[data-orientation='vertical'] {
|
|
48
|
-
width:
|
|
51
|
+
width: 3px;
|
|
49
52
|
|
|
50
53
|
&::before {
|
|
51
54
|
inset-inline-start: 50%;
|
|
52
55
|
transform: translateX(-50%);
|
|
53
|
-
width:
|
|
56
|
+
width: 16px;
|
|
54
57
|
height: 100%;
|
|
55
58
|
}
|
|
59
|
+
|
|
60
|
+
&:hover {
|
|
61
|
+
width: 6px;
|
|
62
|
+
}
|
|
56
63
|
}
|
|
57
64
|
|
|
58
65
|
&[data-orientation='horizontal'] {
|
|
59
|
-
height:
|
|
66
|
+
height: 3px;
|
|
60
67
|
|
|
61
68
|
&::before {
|
|
62
|
-
inset-block-
|
|
63
|
-
|
|
69
|
+
inset-block-start: 50%;
|
|
70
|
+
transform: translateY(-50%);
|
|
64
71
|
width: 100%;
|
|
65
|
-
height:
|
|
72
|
+
height: 16px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&:hover {
|
|
76
|
+
height: 6px;
|
|
66
77
|
}
|
|
67
78
|
}
|
|
68
79
|
`,
|
|
@@ -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:
|
|
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: 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,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,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"}
|
|
@@ -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" | "success" | "info" | "warning" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|