@lobehub/ui 5.35.0 → 5.36.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.
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Text/Text.d.mts +6 -2
- package/es/base-ui/Text/Text.mjs +5 -2
- package/es/base-ui/Text/Text.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +2 -0
- package/es/base-ui/Text/style.mjs +77 -1
- package/es/base-ui/Text/style.mjs.map +1 -1
- package/es/base-ui/Text/type.d.mts +9 -2
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ declare const styles: {
|
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
26
|
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
-
variant?: "filled" | "
|
|
27
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { TextProps } from "./type.mjs";
|
|
2
|
+
import { ReactNode } from "react";
|
|
2
3
|
//#region src/base-ui/Text/Text.d.ts
|
|
3
|
-
|
|
4
|
+
interface IText {
|
|
5
|
+
<Shiny extends boolean = boolean>(props: TextProps<Shiny>): ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare const Text: IText;
|
|
4
8
|
//#endregion
|
|
5
|
-
export { Text as default };
|
|
9
|
+
export { IText, Text as default };
|
|
6
10
|
//# sourceMappingURL=Text.d.mts.map
|
package/es/base-ui/Text/Text.mjs
CHANGED
|
@@ -6,7 +6,7 @@ import { memo, useRef } from "react";
|
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { cx } from "antd-style";
|
|
8
8
|
//#region src/base-ui/Text/Text.tsx
|
|
9
|
-
const
|
|
9
|
+
const InternalText = memo(({ align, as: Container = "div", children, className, classNames, code, color, delete: deleteStyle, disabled, ellipsis, fontSize, italic, lineClamp, lineHeight, mark, noWrap, ref, shiny, shinyDuration, strong, style, styles: customStyles, textDecoration, textTransform, type, underline, weight, whiteSpace, wordBreak, ...rest }) => {
|
|
10
10
|
const innerRef = useRef(null);
|
|
11
11
|
const isOverflow = useTextOverflow(innerRef, ellipsis, children);
|
|
12
12
|
const isMultiEllipsis = typeof ellipsis === "object" && !!ellipsis.rows && ellipsis.rows > 1;
|
|
@@ -31,6 +31,7 @@ const Text = memo(({ align, as: Container = "div", children, className, classNam
|
|
|
31
31
|
overflow: "hidden",
|
|
32
32
|
textOverflow: "ellipsis"
|
|
33
33
|
},
|
|
34
|
+
...shiny && shinyDuration && { "--shiny-duration": shinyDuration },
|
|
34
35
|
...fontSize && { fontSize },
|
|
35
36
|
...align && { textAlign: align },
|
|
36
37
|
...!isMultiEllipsis && noWrap && { whiteSpace: "nowrap" },
|
|
@@ -57,6 +58,7 @@ const Text = memo(({ align, as: Container = "div", children, className, classNam
|
|
|
57
58
|
ellipsis: ellipsis ? typeof ellipsis === "object" && ellipsis.rows ? "multi" : true : void 0,
|
|
58
59
|
italic,
|
|
59
60
|
mark,
|
|
61
|
+
shiny,
|
|
60
62
|
strong,
|
|
61
63
|
type,
|
|
62
64
|
underline
|
|
@@ -78,7 +80,8 @@ const Text = memo(({ align, as: Container = "div", children, className, classNam
|
|
|
78
80
|
}
|
|
79
81
|
return content;
|
|
80
82
|
});
|
|
81
|
-
|
|
83
|
+
InternalText.displayName = "Text";
|
|
84
|
+
const Text = InternalText;
|
|
82
85
|
//#endregion
|
|
83
86
|
export { Text as default };
|
|
84
87
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/base-ui/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo, type RefObject, useRef } from 'react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\n\nimport { variants } from './style';\nimport { type TextProps } from './type';\n\nconst
|
|
1
|
+
{"version":3,"file":"Text.mjs","names":[],"sources":["../../../src/base-ui/Text/Text.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo, type ReactNode, type RefObject, useRef } from 'react';\n\nimport Tooltip from '@/base-ui/Tooltip';\nimport { useTextOverflow } from '@/hooks/useTextOverflow';\n\nimport { variants } from './style';\nimport { type TextBaseProps, type TextProps } from './type';\n\ntype InternalTextProps = TextBaseProps & {\n shiny?: boolean;\n shinyDuration?: CSSProperties['animationDuration'];\n};\n\nconst InternalText = memo<InternalTextProps>(\n ({\n align,\n as: Container = 'div',\n children,\n className,\n classNames,\n code,\n color,\n delete: deleteStyle,\n disabled,\n ellipsis,\n fontSize,\n italic,\n lineClamp,\n lineHeight,\n mark,\n noWrap,\n ref,\n shiny,\n shinyDuration,\n strong,\n style,\n styles: customStyles,\n textDecoration,\n textTransform,\n type,\n underline,\n weight,\n whiteSpace,\n wordBreak,\n ...rest\n }) => {\n const innerRef = useRef<HTMLElement>(null);\n const isOverflow = useTextOverflow(innerRef, ellipsis, children);\n\n const isMultiEllipsis = typeof ellipsis === 'object' && !!ellipsis.rows && ellipsis.rows > 1;\n const tooltipWhenOverflow = typeof ellipsis === 'object' && ellipsis.tooltipWhenOverflow;\n\n const setNodeRef = (node: HTMLElement | null) => {\n innerRef.current = node;\n if (typeof ref === 'function') ref(node as HTMLDivElement);\n else if (ref) (ref as RefObject<HTMLDivElement | null>).current = node as HTMLDivElement;\n };\n\n const textStyle: CSSProperties = {\n ...(color && { color }),\n ...(weight && { fontWeight: weight }),\n ...(lineHeight && { lineHeight }),\n ...(textTransform && { textTransform }),\n ...(textDecoration && { textDecoration }),\n ...(wordBreak && { wordBreak }),\n ...(typeof ellipsis === 'object' &&\n ellipsis.rows && {\n WebkitLineClamp: ellipsis.rows,\n }),\n ...(!ellipsis &&\n !!lineClamp && {\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: lineClamp,\n display: '-webkit-box',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }),\n ...(shiny && shinyDuration && { '--shiny-duration': shinyDuration }),\n ...(fontSize && { fontSize }),\n ...(align && { textAlign: align }),\n ...(!isMultiEllipsis && noWrap && { whiteSpace: 'nowrap' as const }),\n ...(whiteSpace && { whiteSpace }),\n ...style,\n ...customStyles?.root,\n };\n\n const content = (\n <Container\n {...rest}\n ref={setNodeRef}\n style={textStyle}\n className={cx(\n variants({\n as: ['h1', 'h2', 'h3', 'h4', 'h5', 'p'].includes(Container as string)\n ? (Container as 'h1')\n : undefined,\n code,\n delete: deleteStyle,\n disabled,\n ellipsis: ellipsis\n ? typeof ellipsis === 'object' && ellipsis.rows\n ? 'multi'\n : true\n : undefined,\n italic,\n mark,\n shiny,\n strong,\n type,\n underline,\n }),\n className,\n classNames?.root,\n )}\n >\n {children}\n </Container>\n );\n\n if (\n ellipsis &&\n typeof ellipsis === 'object' &&\n (ellipsis.tooltip || ellipsis.tooltipWhenOverflow)\n ) {\n if (tooltipWhenOverflow && !isOverflow) return content;\n\n const title = typeof ellipsis.tooltip === 'string' ? ellipsis.tooltip : children;\n if (ellipsis.tooltip && typeof ellipsis.tooltip === 'object')\n return (\n <Tooltip {...ellipsis.tooltip} title={ellipsis.tooltip?.title || title}>\n {content}\n </Tooltip>\n );\n return <Tooltip title={title}>{content}</Tooltip>;\n }\n\n return content;\n },\n);\n\nInternalText.displayName = 'Text';\n\nexport interface IText {\n <Shiny extends boolean = boolean>(props: TextProps<Shiny>): ReactNode;\n}\n\nconst Text = InternalText as unknown as IText;\n\nexport default Text;\n"],"mappings":";;;;;;;;AAgBA,MAAM,eAAe,MAClB,EACC,OACA,IAAI,YAAY,OAChB,UACA,WACA,YACA,MACA,OACA,QAAQ,aACR,UACA,UACA,UACA,QACA,WACA,YACA,MACA,QACA,KACA,OACA,eACA,QACA,OACA,QAAQ,cACR,gBACA,eACA,MACA,WACA,QACA,YACA,WACA,GAAG,WACC;CACJ,MAAM,WAAW,OAAoB,IAAI;CACzC,MAAM,aAAa,gBAAgB,UAAU,UAAU,QAAQ;CAE/D,MAAM,kBAAkB,OAAO,aAAa,YAAY,CAAC,CAAC,SAAS,QAAQ,SAAS,OAAO;CAC3F,MAAM,sBAAsB,OAAO,aAAa,YAAY,SAAS;CAErE,MAAM,cAAc,SAA6B;EAC/C,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YAAY,IAAI,IAAsB;OACpD,IAAI,KAAK,IAA0C,UAAU;CACpE;CAEA,MAAM,YAA2B;EAC/B,GAAI,SAAS,EAAE,MAAM;EACrB,GAAI,UAAU,EAAE,YAAY,OAAO;EACnC,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAI,iBAAiB,EAAE,cAAc;EACrC,GAAI,kBAAkB,EAAE,eAAe;EACvC,GAAI,aAAa,EAAE,UAAU;EAC7B,GAAI,OAAO,aAAa,YACtB,SAAS,QAAQ,EACf,iBAAiB,SAAS,KAC5B;EACF,GAAI,CAAC,YACH,CAAC,CAAC,aAAa;GACb,iBAAiB;GACjB,iBAAiB;GACjB,SAAS;GACT,UAAU;GACV,cAAc;EAChB;EACF,GAAI,SAAS,iBAAiB,EAAE,oBAAoB,cAAc;EAClE,GAAI,YAAY,EAAE,SAAS;EAC3B,GAAI,SAAS,EAAE,WAAW,MAAM;EAChC,GAAI,CAAC,mBAAmB,UAAU,EAAE,YAAY,SAAkB;EAClE,GAAI,cAAc,EAAE,WAAW;EAC/B,GAAG;EACH,GAAG,cAAc;CACnB;CAEA,MAAM,UACJ,oBAAC,WAAD;EACE,GAAI;EACJ,KAAK;EACL,OAAO;EACP,WAAW,GACT,SAAS;GACP,IAAI;IAAC;IAAM;IAAM;IAAM;IAAM;IAAM;GAAG,CAAC,CAAC,SAAS,SAAmB,IAC/D,YACD,KAAA;GACJ;GACA,QAAQ;GACR;GACA,UAAU,WACN,OAAO,aAAa,YAAY,SAAS,OACvC,UACA,OACF,KAAA;GACJ;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,GACD,WACA,YAAY,IACd;EAEC;CACQ,CAAA;CAGb,IACE,YACA,OAAO,aAAa,aACnB,SAAS,WAAW,SAAS,sBAC9B;EACA,IAAI,uBAAuB,CAAC,YAAY,OAAO;EAE/C,MAAM,QAAQ,OAAO,SAAS,YAAY,WAAW,SAAS,UAAU;EACxE,IAAI,SAAS,WAAW,OAAO,SAAS,YAAY,UAClD,OACE,oBAAC,SAAD;GAAS,GAAI,SAAS;GAAS,OAAO,SAAS,SAAS,SAAS;GAC9D,UAAA;EACM,CAAA;EAEb,OAAO,oBAAC,SAAD;GAAgB;GAAQ,UAAA;EAAiB,CAAA;CAClD;CAEA,OAAO;AACT,CACF;AAEA,aAAa,cAAc;AAM3B,MAAM,OAAO"}
|
|
@@ -16,6 +16,7 @@ declare const styles: {
|
|
|
16
16
|
mark: string;
|
|
17
17
|
p: string;
|
|
18
18
|
secondary: string;
|
|
19
|
+
shiny: string;
|
|
19
20
|
strong: string;
|
|
20
21
|
success: string;
|
|
21
22
|
text: string;
|
|
@@ -30,6 +31,7 @@ declare const variants: (props?: ({
|
|
|
30
31
|
ellipsis?: boolean | "multi" | null | undefined;
|
|
31
32
|
italic?: boolean | null | undefined;
|
|
32
33
|
mark?: boolean | null | undefined;
|
|
34
|
+
shiny?: boolean | null | undefined;
|
|
33
35
|
strong?: boolean | null | undefined;
|
|
34
36
|
type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
|
|
35
37
|
underline?: boolean | null | undefined;
|
|
@@ -1,6 +1,24 @@
|
|
|
1
|
-
import { createStaticStyles } from "antd-style";
|
|
1
|
+
import { createStaticStyles, keyframes } from "antd-style";
|
|
2
2
|
import { cva } from "class-variance-authority";
|
|
3
3
|
//#region src/base-ui/Text/style.ts
|
|
4
|
+
const shine = keyframes`
|
|
5
|
+
0% {
|
|
6
|
+
background-position: 100%;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
100% {
|
|
10
|
+
background-position: -100%;
|
|
11
|
+
}
|
|
12
|
+
`;
|
|
13
|
+
const sweep = keyframes`
|
|
14
|
+
0% {
|
|
15
|
+
translate: -100% 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
100% {
|
|
19
|
+
translate: 100% 0;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
4
22
|
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
5
23
|
code: css`
|
|
6
24
|
font-family: ${cssVar.fontFamilyCode};
|
|
@@ -66,6 +84,63 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
66
84
|
`,
|
|
67
85
|
secondary: css`
|
|
68
86
|
color: ${cssVar.colorTextDescription};
|
|
87
|
+
`,
|
|
88
|
+
shiny: css`
|
|
89
|
+
--shiny-duration: 1.5s;
|
|
90
|
+
|
|
91
|
+
color: color-mix(in srgb, ${cssVar.colorText} 45%, transparent);
|
|
92
|
+
|
|
93
|
+
background: linear-gradient(
|
|
94
|
+
120deg,
|
|
95
|
+
transparent 25%,
|
|
96
|
+
${cssVar.colorTextSecondary} 50%,
|
|
97
|
+
transparent 75%
|
|
98
|
+
);
|
|
99
|
+
background-clip: text;
|
|
100
|
+
background-size: 200% 100%;
|
|
101
|
+
|
|
102
|
+
animation: ${shine} var(--shiny-duration) linear infinite;
|
|
103
|
+
|
|
104
|
+
/* Animating background-position repaints every glyph each frame. Where
|
|
105
|
+
* mask-clip: text is supported, clip a transform-animated overlay to the
|
|
106
|
+
* glyphs instead so the sweep stays on the compositor. */
|
|
107
|
+
@supports (-webkit-mask-clip: text) {
|
|
108
|
+
position: relative;
|
|
109
|
+
|
|
110
|
+
background: none;
|
|
111
|
+
|
|
112
|
+
animation: none;
|
|
113
|
+
|
|
114
|
+
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
115
|
+
mask-clip: text;
|
|
116
|
+
mask-image: linear-gradient(#fff, #fff);
|
|
117
|
+
|
|
118
|
+
&::after {
|
|
119
|
+
pointer-events: none;
|
|
120
|
+
will-change: transform;
|
|
121
|
+
content: '';
|
|
122
|
+
|
|
123
|
+
position: absolute;
|
|
124
|
+
inset: 0;
|
|
125
|
+
|
|
126
|
+
background: linear-gradient(
|
|
127
|
+
90deg,
|
|
128
|
+
transparent 25%,
|
|
129
|
+
${cssVar.colorTextSecondary} 50%,
|
|
130
|
+
transparent 75%
|
|
131
|
+
);
|
|
132
|
+
|
|
133
|
+
animation: ${sweep} var(--shiny-duration) linear infinite;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@media (prefers-reduced-motion: reduce) {
|
|
138
|
+
animation: none;
|
|
139
|
+
|
|
140
|
+
&::after {
|
|
141
|
+
display: none;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
69
144
|
`,
|
|
70
145
|
strong: css`
|
|
71
146
|
font-weight: bold;
|
|
@@ -103,6 +178,7 @@ const variants = cva(styles.text, {
|
|
|
103
178
|
},
|
|
104
179
|
italic: { true: styles.italic },
|
|
105
180
|
mark: { true: styles.mark },
|
|
181
|
+
shiny: { true: styles.shiny },
|
|
106
182
|
strong: { true: styles.strong },
|
|
107
183
|
type: {
|
|
108
184
|
danger: styles.danger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Text/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n code: css`\n font-family: ${cssVar.fontFamilyCode};\n `,\n danger: css`\n color: ${cssVar.colorError};\n `,\n delete: css`\n text-decoration: line-through;\n `,\n disabled: css`\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n `,\n ellipsis: css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n ellipsisMulti: css`\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n `,\n h1: css`\n font-size: calc(${cssVar.fontSize} * 2.5);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h2: css`\n font-size: calc(${cssVar.fontSize} * 2);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h3: css`\n font-size: calc(${cssVar.fontSize} * 1.5);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h4: css`\n font-size: calc(${cssVar.fontSize} * 1.25);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h5: css`\n font-size: ${cssVar.fontSize};\n font-weight: bold;\n line-height: 1.25;\n `,\n info: css`\n color: ${cssVar.colorInfo};\n `,\n\n italic: css`\n font-style: italic;\n `,\n\n mark: css`\n color: #000;\n background-color: ${cssVar.yellow};\n `,\n\n p: css`\n margin-block: 0;\n `,\n\n secondary: css`\n color: ${cssVar.colorTextDescription};\n `,\n\n strong: css`\n font-weight: bold;\n `,\n success: css`\n color: ${cssVar.colorSuccess};\n `,\n text: css`\n color: ${cssVar.colorText};\n `,\n underline: css`\n text-decoration: underline;\n `,\n warning: css`\n color: ${cssVar.colorWarning};\n `,\n}));\n\nexport const variants = cva(styles.text, {\n defaultVariants: {},\n variants: {\n as: {\n h1: styles.h1,\n h2: styles.h2,\n h3: styles.h3,\n h4: styles.h4,\n h5: styles.h5,\n p: styles.p,\n },\n code: {\n true: styles.code,\n },\n delete: {\n true: styles.delete,\n },\n disabled: {\n true: styles.disabled,\n },\n ellipsis: {\n multi: styles.ellipsisMulti,\n true: styles.ellipsis,\n },\n italic: {\n true: styles.italic,\n },\n mark: {\n true: styles.mark,\n },\n strong: {\n true: styles.strong,\n },\n type: {\n danger: styles.danger,\n info: styles.info,\n secondary: styles.secondary,\n success: styles.success,\n warning: styles.warning,\n },\n underline: {\n true: styles.underline,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;mBACQ,OAAO,eAAe;;CAEvC,QAAQ,GAAG;aACA,OAAO,WAAW;;CAE7B,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;aAEF,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;CAKb,eAAe,GAAG;;;;;;CAMlB,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;iBACQ,OAAO,SAAS;;;;CAI/B,MAAM,GAAG;aACE,OAAO,UAAU;;CAG5B,QAAQ,GAAG;;;CAIX,MAAM,GAAG;;wBAEa,OAAO,OAAO;;CAGpC,GAAG,GAAG;;;CAIN,WAAW,GAAG;aACH,OAAO,qBAAqB;;CAGvC,QAAQ,GAAG;;;CAGX,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;aACE,OAAO,UAAU;;CAE5B,WAAW,GAAG;;;CAGd,SAAS,GAAG;aACD,OAAO,aAAa;;AAEjC,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,CAAC;CAClB,UAAU;EACR,IAAI;GACF,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,GAAG,OAAO;EACZ;EACA,MAAM,EACJ,MAAM,OAAO,KACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,UAAU,EACR,MAAM,OAAO,SACf;EACA,UAAU;GACR,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,MAAM,EACJ,MAAM,OAAO,KACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,MAAM;GACJ,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,WAAW,OAAO;GAClB,SAAS,OAAO;GAChB,SAAS,OAAO;EAClB;EACA,WAAW,EACT,MAAM,OAAO,UACf;CACF;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Text/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shine = keyframes`\n 0% {\n background-position: 100%;\n }\n\n 100% {\n background-position: -100%;\n }\n`;\n\nconst sweep = keyframes`\n 0% {\n translate: -100% 0;\n }\n\n 100% {\n translate: 100% 0;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n code: css`\n font-family: ${cssVar.fontFamilyCode};\n `,\n danger: css`\n color: ${cssVar.colorError};\n `,\n delete: css`\n text-decoration: line-through;\n `,\n disabled: css`\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n `,\n ellipsis: css`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n `,\n ellipsisMulti: css`\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n `,\n h1: css`\n font-size: calc(${cssVar.fontSize} * 2.5);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h2: css`\n font-size: calc(${cssVar.fontSize} * 2);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h3: css`\n font-size: calc(${cssVar.fontSize} * 1.5);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h4: css`\n font-size: calc(${cssVar.fontSize} * 1.25);\n font-weight: bold;\n line-height: 1.25;\n `,\n\n h5: css`\n font-size: ${cssVar.fontSize};\n font-weight: bold;\n line-height: 1.25;\n `,\n info: css`\n color: ${cssVar.colorInfo};\n `,\n\n italic: css`\n font-style: italic;\n `,\n\n mark: css`\n color: #000;\n background-color: ${cssVar.yellow};\n `,\n\n p: css`\n margin-block: 0;\n `,\n\n secondary: css`\n color: ${cssVar.colorTextDescription};\n `,\n\n shiny: css`\n --shiny-duration: 1.5s;\n\n color: color-mix(in srgb, ${cssVar.colorText} 45%, transparent);\n\n background: linear-gradient(\n 120deg,\n transparent 25%,\n ${cssVar.colorTextSecondary} 50%,\n transparent 75%\n );\n background-clip: text;\n background-size: 200% 100%;\n\n animation: ${shine} var(--shiny-duration) linear infinite;\n\n /* Animating background-position repaints every glyph each frame. Where\n * mask-clip: text is supported, clip a transform-animated overlay to the\n * glyphs instead so the sweep stays on the compositor. */\n @supports (-webkit-mask-clip: text) {\n position: relative;\n\n background: none;\n\n animation: none;\n\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-clip: text;\n mask-image: linear-gradient(#fff, #fff);\n\n &::after {\n pointer-events: none;\n will-change: transform;\n content: '';\n\n position: absolute;\n inset: 0;\n\n background: linear-gradient(\n 90deg,\n transparent 25%,\n ${cssVar.colorTextSecondary} 50%,\n transparent 75%\n );\n\n animation: ${sweep} var(--shiny-duration) linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n\n &::after {\n display: none;\n }\n }\n `,\n\n strong: css`\n font-weight: bold;\n `,\n success: css`\n color: ${cssVar.colorSuccess};\n `,\n text: css`\n color: ${cssVar.colorText};\n `,\n underline: css`\n text-decoration: underline;\n `,\n warning: css`\n color: ${cssVar.colorWarning};\n `,\n}));\n\nexport const variants = cva(styles.text, {\n defaultVariants: {},\n variants: {\n as: {\n h1: styles.h1,\n h2: styles.h2,\n h3: styles.h3,\n h4: styles.h4,\n h5: styles.h5,\n p: styles.p,\n },\n code: {\n true: styles.code,\n },\n delete: {\n true: styles.delete,\n },\n disabled: {\n true: styles.disabled,\n },\n ellipsis: {\n multi: styles.ellipsisMulti,\n true: styles.ellipsis,\n },\n italic: {\n true: styles.italic,\n },\n mark: {\n true: styles.mark,\n },\n shiny: {\n true: styles.shiny,\n },\n strong: {\n true: styles.strong,\n },\n type: {\n danger: styles.danger,\n info: styles.info,\n secondary: styles.secondary,\n success: styles.success,\n warning: styles.warning,\n },\n underline: {\n true: styles.underline,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAM,QAAQ,SAAS;;;;;;;;;AAUvB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;mBACQ,OAAO,eAAe;;CAEvC,QAAQ,GAAG;aACA,OAAO,WAAW;;CAE7B,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;aAEF,OAAO,kBAAkB;;CAEpC,UAAU,GAAG;;;;;CAKb,eAAe,GAAG;;;;;;CAMlB,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;sBACa,OAAO,SAAS;;;;CAKpC,IAAI,GAAG;iBACQ,OAAO,SAAS;;;;CAI/B,MAAM,GAAG;aACE,OAAO,UAAU;;CAG5B,QAAQ,GAAG;;;CAIX,MAAM,GAAG;;wBAEa,OAAO,OAAO;;CAGpC,GAAG,GAAG;;;CAIN,WAAW,GAAG;aACH,OAAO,qBAAqB;;CAGvC,OAAO,GAAG;;;gCAGoB,OAAO,UAAU;;;;;QAKzC,OAAO,mBAAmB;;;;;;iBAMjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;YA2BX,OAAO,mBAAmB;;;;qBAIjB,MAAM;;;;;;;;;;;;CAazB,QAAQ,GAAG;;;CAGX,SAAS,GAAG;aACD,OAAO,aAAa;;CAE/B,MAAM,GAAG;aACE,OAAO,UAAU;;CAE5B,WAAW,GAAG;;;CAGd,SAAS,GAAG;aACD,OAAO,aAAa;;AAEjC,EAAE;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,CAAC;CAClB,UAAU;EACR,IAAI;GACF,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,IAAI,OAAO;GACX,GAAG,OAAO;EACZ;EACA,MAAM,EACJ,MAAM,OAAO,KACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,UAAU,EACR,MAAM,OAAO,SACf;EACA,UAAU;GACR,OAAO,OAAO;GACd,MAAM,OAAO;EACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,MAAM,EACJ,MAAM,OAAO,KACf;EACA,OAAO,EACL,MAAM,OAAO,MACf;EACA,QAAQ,EACN,MAAM,OAAO,OACf;EACA,MAAM;GACJ,QAAQ,OAAO;GACf,MAAM,OAAO;GACb,WAAW,OAAO;GAClB,SAAS,OAAO;GAChB,SAAS,OAAO;EAClB;EACA,WAAW,EACT,MAAM,OAAO,UACf;CACF;AACF,CAAC"}
|
|
@@ -8,7 +8,7 @@ interface TextClassNames {
|
|
|
8
8
|
interface TextStyles {
|
|
9
9
|
root?: CSSProperties;
|
|
10
10
|
}
|
|
11
|
-
interface
|
|
11
|
+
interface TextBaseProps extends HTMLAttributes<HTMLDivElement> {
|
|
12
12
|
align?: 'left' | 'center' | 'right';
|
|
13
13
|
as?: ElementType;
|
|
14
14
|
classNames?: TextClassNames;
|
|
@@ -38,6 +38,13 @@ interface TextProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
38
38
|
whiteSpace?: CSSProperties['whiteSpace'];
|
|
39
39
|
wordBreak?: CSSProperties['wordBreak'];
|
|
40
40
|
}
|
|
41
|
+
type TextProps<Shiny extends boolean = boolean> = TextBaseProps & (Shiny extends true ? {
|
|
42
|
+
shiny: true;
|
|
43
|
+
shinyDuration?: CSSProperties['animationDuration'];
|
|
44
|
+
} : {
|
|
45
|
+
shiny?: false;
|
|
46
|
+
shinyDuration?: never;
|
|
47
|
+
});
|
|
41
48
|
//#endregion
|
|
42
|
-
export { TextClassNames, TextProps, TextStyles };
|
|
49
|
+
export { TextBaseProps, TextClassNames, TextProps, TextStyles };
|
|
43
50
|
//# sourceMappingURL=type.d.mts.map
|