@lobehub/ui 5.35.0 → 5.36.0
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/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 +76 -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
|
@@ -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,62 @@ 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 40%,
|
|
96
|
+
${cssVar.colorTextSecondary} 50%,
|
|
97
|
+
transparent 60%
|
|
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
|
+
mask-clip: text;
|
|
115
|
+
mask-image: linear-gradient(#fff, #fff);
|
|
116
|
+
|
|
117
|
+
&::after {
|
|
118
|
+
pointer-events: none;
|
|
119
|
+
will-change: transform;
|
|
120
|
+
content: '';
|
|
121
|
+
|
|
122
|
+
position: absolute;
|
|
123
|
+
inset: 0;
|
|
124
|
+
|
|
125
|
+
background: linear-gradient(
|
|
126
|
+
90deg,
|
|
127
|
+
transparent 40%,
|
|
128
|
+
${cssVar.colorTextSecondary} 50%,
|
|
129
|
+
transparent 60%
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
animation: ${sweep} var(--shiny-duration) linear infinite;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (prefers-reduced-motion: reduce) {
|
|
137
|
+
animation: none;
|
|
138
|
+
|
|
139
|
+
&::after {
|
|
140
|
+
display: none;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
69
143
|
`,
|
|
70
144
|
strong: css`
|
|
71
145
|
font-weight: bold;
|
|
@@ -103,6 +177,7 @@ const variants = cva(styles.text, {
|
|
|
103
177
|
},
|
|
104
178
|
italic: { true: styles.italic },
|
|
105
179
|
mark: { true: styles.mark },
|
|
180
|
+
shiny: { true: styles.shiny },
|
|
106
181
|
strong: { true: styles.strong },
|
|
107
182
|
type: {
|
|
108
183
|
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 40%,\n ${cssVar.colorTextSecondary} 50%,\n transparent 60%\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 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 40%,\n ${cssVar.colorTextSecondary} 50%,\n transparent 60%\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;;;;;;;;;;;;;;;;;;;;;;;;;;YA0BX,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
|