@lobehub/ui 5.50.1 → 5.50.2
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.
|
@@ -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?: "
|
|
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 };
|
package/es/base-ui/Spin/Spin.mjs
CHANGED
|
@@ -70,6 +70,7 @@ const Spin = memo(({ children, className, indicator, percent, ref, size = "middl
|
|
|
70
70
|
...rest,
|
|
71
71
|
children: /* @__PURE__ */ jsx("span", {
|
|
72
72
|
"aria-hidden": true,
|
|
73
|
+
className: styles.glyphBox,
|
|
73
74
|
children: glyph
|
|
74
75
|
})
|
|
75
76
|
});
|
|
@@ -85,6 +86,7 @@ const Spin = memo(({ children, className, indicator, percent, ref, size = "middl
|
|
|
85
86
|
role: "status",
|
|
86
87
|
children: [/* @__PURE__ */ jsx("span", {
|
|
87
88
|
"aria-hidden": true,
|
|
89
|
+
className: styles.glyphBox,
|
|
88
90
|
children: glyph
|
|
89
91
|
}), tip && /* @__PURE__ */ jsx("span", {
|
|
90
92
|
className: styles.tip,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Spin.mjs","names":[],"sources":["../../../src/base-ui/Spin/Spin.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LoaderCircle } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport NetworkGlyph from './NetworkGlyph';\nimport { styles } from './style';\nimport type { SpinProps, SpinSize } from './type';\n\nconst sizeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 32,\n middle: 20,\n small: 14,\n};\n\nconst resolveSize = (size: SpinSize) => (typeof size === 'number' ? size : sizeMap[size]);\n\nconst Spin = memo<SpinProps>(\n ({\n children,\n className,\n indicator,\n percent,\n ref,\n size = 'middle',\n spinning = true,\n style,\n tip,\n variant = 'default',\n ...rest\n }) => {\n const px = useMemo(() => resolveSize(size), [size]);\n\n const glyph = useMemo(() => {\n if (indicator) return indicator;\n\n if (variant === 'network') return <NetworkGlyph px={px} />;\n\n if (typeof percent === 'number') {\n const clamped = Math.min(100, Math.max(0, percent));\n const circumference = 2 * Math.PI * 9;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <svg className={cx(styles.glyph, styles.ring)} height={px} viewBox=\"0 0 24 24\" width={px}>\n <circle\n className={styles.ringTrack}\n cx={12}\n cy={12}\n fill=\"none\"\n r={9}\n strokeWidth={2.5}\n />\n <circle\n className={styles.ringProgress}\n cx={12}\n cy={12}\n fill=\"none\"\n r={9}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n );\n }\n\n return <Icon spin className={styles.glyph} icon={LoaderCircle} size={px} />;\n }, [indicator, variant, percent, px]);\n\n if (!spinning) return children ?? null;\n\n if (!children) {\n return (\n <div\n aria-busy\n aria-live=\"polite\"\n className={cx(styles.root, className)}\n ref={ref}\n role=\"status\"\n style={style}\n {...rest}\n >\n <span aria-hidden
|
|
1
|
+
{"version":3,"file":"Spin.mjs","names":[],"sources":["../../../src/base-ui/Spin/Spin.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LoaderCircle } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport NetworkGlyph from './NetworkGlyph';\nimport { styles } from './style';\nimport type { SpinProps, SpinSize } from './type';\n\nconst sizeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 32,\n middle: 20,\n small: 14,\n};\n\nconst resolveSize = (size: SpinSize) => (typeof size === 'number' ? size : sizeMap[size]);\n\nconst Spin = memo<SpinProps>(\n ({\n children,\n className,\n indicator,\n percent,\n ref,\n size = 'middle',\n spinning = true,\n style,\n tip,\n variant = 'default',\n ...rest\n }) => {\n const px = useMemo(() => resolveSize(size), [size]);\n\n const glyph = useMemo(() => {\n if (indicator) return indicator;\n\n if (variant === 'network') return <NetworkGlyph px={px} />;\n\n if (typeof percent === 'number') {\n const clamped = Math.min(100, Math.max(0, percent));\n const circumference = 2 * Math.PI * 9;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <svg className={cx(styles.glyph, styles.ring)} height={px} viewBox=\"0 0 24 24\" width={px}>\n <circle\n className={styles.ringTrack}\n cx={12}\n cy={12}\n fill=\"none\"\n r={9}\n strokeWidth={2.5}\n />\n <circle\n className={styles.ringProgress}\n cx={12}\n cy={12}\n fill=\"none\"\n r={9}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={2.5}\n />\n </svg>\n );\n }\n\n return <Icon spin className={styles.glyph} icon={LoaderCircle} size={px} />;\n }, [indicator, variant, percent, px]);\n\n if (!spinning) return children ?? null;\n\n if (!children) {\n return (\n <div\n aria-busy\n aria-live=\"polite\"\n className={cx(styles.root, className)}\n ref={ref}\n role=\"status\"\n style={style}\n {...rest}\n >\n <span aria-hidden className={styles.glyphBox}>\n {glyph}\n </span>\n </div>\n );\n }\n\n return (\n <div className={cx(styles.wrapper, className)} ref={ref} style={style} {...rest}>\n {children}\n <div aria-busy aria-live=\"polite\" className={styles.overlay} role=\"status\">\n <span aria-hidden className={styles.glyphBox}>\n {glyph}\n </span>\n {tip && <span className={styles.tip}>{tip}</span>}\n </div>\n </div>\n );\n },\n);\n\nSpin.displayName = 'Spin';\n\nexport default Spin;\n"],"mappings":";;;;;;;;;AAYA,MAAM,UAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,SAAoB,OAAO,SAAS,WAAW,OAAO,QAAQ;AAEnF,MAAM,OAAO,MACV,EACC,UACA,WACA,WACA,SACA,KACA,OAAO,UACP,WAAW,MACX,OACA,KACA,UAAU,WACV,GAAG,WACC;CACJ,MAAM,KAAK,cAAc,YAAY,IAAI,GAAG,CAAC,IAAI,CAAC;CAElD,MAAM,QAAQ,cAAc;EAC1B,IAAI,WAAW,OAAO;EAEtB,IAAI,YAAY,WAAW,OAAO,oBAAC,cAAD,EAAkB,GAAK,CAAA;EAEzD,IAAI,OAAO,YAAY,UAAU;GAC/B,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC;GAClD,MAAM,gBAAgB,IAAI,KAAK,KAAK;GACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;GAE9C,OACE,qBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,OAAO,OAAO,IAAI;IAAG,QAAQ;IAAI,SAAQ;IAAY,OAAO;IAAtF,UAAA,CACE,oBAAC,UAAD;KACE,WAAW,OAAO;KAClB,IAAI;KACJ,IAAI;KACJ,MAAK;KACL,GAAG;KACH,aAAa;IACd,CAAA,GACD,oBAAC,UAAD;KACE,WAAW,OAAO;KAClB,IAAI;KACJ,IAAI;KACJ,MAAK;KACL,GAAG;KACH,iBAAiB;KACjB,kBAAkB;KAClB,eAAc;KACd,aAAa;IACd,CAAA,CACE;;EAET;EAEA,OAAO,oBAAC,MAAD;GAAM,MAAA;GAAK,WAAW,OAAO;GAAO,MAAM;GAAc,MAAM;EAAK,CAAA;CAC5E,GAAG;EAAC;EAAW;EAAS;EAAS;CAAE,CAAC;CAEpC,IAAI,CAAC,UAAU,OAAO,YAAY;CAElC,IAAI,CAAC,UACH,OACE,oBAAC,OAAD;EACE,aAAA;EACA,aAAU;EACV,WAAW,GAAG,OAAO,MAAM,SAAS;EAC/B;EACL,MAAK;EACE;EACP,GAAI;EAEJ,UAAA,oBAAC,QAAD;GAAM,eAAA;GAAY,WAAW,OAAO;GACjC,UAAA;EACG,CAAA;CACH,CAAA;CAIT,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,SAAS,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA3E,UAAA,CACG,UACD,qBAAC,OAAD;GAAK,aAAA;GAAU,aAAU;GAAS,WAAW,OAAO;GAAS,MAAK;GAAlE,UAAA,CACE,oBAAC,QAAD;IAAM,eAAA;IAAY,WAAW,OAAO;IACjC,UAAA;GACG,CAAA,GACL,OAAO,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAM,UAAA;GAAU,CAAA,CAC7C;EACF,CAAA,CAAA;;AAET,CACF;AAEA,KAAK,cAAc"}
|
|
@@ -44,12 +44,13 @@ const reducedMotion = `
|
|
|
44
44
|
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
45
45
|
glyph: css`
|
|
46
46
|
display: inline-flex;
|
|
47
|
-
|
|
47
|
+
`,
|
|
48
|
+
glyphBox: css`
|
|
49
|
+
display: inline-flex;
|
|
48
50
|
`,
|
|
49
51
|
network: css`
|
|
50
52
|
position: relative;
|
|
51
53
|
display: inline-block;
|
|
52
|
-
color: ${cssVar.colorTextSecondary};
|
|
53
54
|
`,
|
|
54
55
|
networkBox: css`
|
|
55
56
|
position: absolute;
|
|
@@ -151,6 +152,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
151
152
|
root: css`
|
|
152
153
|
display: inline-flex;
|
|
153
154
|
align-items: center;
|
|
155
|
+
color: ${cssVar.colorTextSecondary};
|
|
154
156
|
`,
|
|
155
157
|
tip: css`
|
|
156
158
|
font-size: ${cssVar.fontSizeSM};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Spin/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst nodePulse = keyframes`\n 0%, 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 1;\n }\n`;\n\nconst particleFlow = keyframes`\n 0% {\n transform: translateX(0);\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0.5;\n }\n`;\n\nconst coreBreath = keyframes`\n 0%, 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n`;\n\nconst ringSpin = keyframes`\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst reducedMotion = `\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n glyph: css`\n display: inline-flex;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Spin/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\n\nconst nodePulse = keyframes`\n 0%, 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 1;\n }\n`;\n\nconst particleFlow = keyframes`\n 0% {\n transform: translateX(0);\n opacity: 0.5;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n transform: translateX(50px);\n opacity: 0.5;\n }\n`;\n\nconst coreBreath = keyframes`\n 0%, 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 50% {\n transform: scale(1);\n opacity: 1;\n }\n`;\n\nconst ringSpin = keyframes`\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst reducedMotion = `\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n glyph: css`\n display: inline-flex;\n `,\n glyphBox: css`\n display: inline-flex;\n `,\n network: css`\n position: relative;\n display: inline-block;\n `,\n networkBox: css`\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 0;\n transform-origin: 0 0;\n\n width: 100px;\n height: 100px;\n `,\n networkCore: css`\n position: absolute;\n inset-block-start: 47px;\n inset-inline-start: 47px;\n\n width: 6px;\n height: 6px;\n\n background: currentcolor;\n\n animation: ${coreBreath} 2s infinite;\n ${reducedMotion}\n `,\n networkLines: css`\n position: absolute;\n inset: 0;\n width: 100px;\n height: 100px;\n\n line {\n opacity: 0.3;\n stroke: currentcolor;\n stroke-width: 0.5;\n }\n `,\n networkNode: css`\n position: absolute;\n\n margin: calc(var(--spin-node-size) / -2);\n border-radius: 50%;\n width: var(--spin-node-size);\n height: var(--spin-node-size);\n\n background: currentcolor;\n\n animation: ${nodePulse} 2s infinite;\n ${reducedMotion}\n `,\n networkParticle: css`\n position: absolute;\n inset-block-start: 50px;\n inset-inline-start: 25px;\n\n margin: calc(var(--spin-particle-size) / -2);\n border-radius: 50%;\n width: var(--spin-particle-size);\n height: var(--spin-particle-size);\n\n background: currentcolor;\n\n animation: ${particleFlow} 2s infinite;\n ${reducedMotion}\n `,\n networkRing: css`\n position: absolute;\n inset: 10px;\n\n border: 1px dashed currentcolor;\n border-radius: 50%;\n\n opacity: 0.4;\n\n animation: ${ringSpin} 20s linear infinite;\n ${reducedMotion}\n `,\n overlay: css`\n position: absolute;\n inset: 0;\n\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n color: ${cssVar.colorTextSecondary};\n\n background: color-mix(in srgb, ${cssVar.colorBgContainer} 70%, transparent);\n `,\n ring: css`\n rotate: -90deg;\n `,\n ringProgress: css`\n stroke: ${cssVar.colorPrimary};\n `,\n ringTrack: css`\n stroke: ${cssVar.colorFillTertiary};\n `,\n root: css`\n display: inline-flex;\n align-items: center;\n color: ${cssVar.colorTextSecondary};\n `,\n tip: css`\n font-size: ${cssVar.fontSizeSM};\n color: ${cssVar.colorTextSecondary};\n `,\n wrapper: css`\n position: relative;\n `,\n}));\n"],"mappings":";;AAEA,MAAM,YAAY,SAAS;;;;;;;;AAS3B,MAAM,eAAe,SAAS;;;;;;;;;;;;;AAc9B,MAAM,aAAa,SAAS;;;;;;;;;;AAW5B,MAAM,WAAW,SAAS;;;;;AAM1B,MAAM,gBAAgB;;;;;AAMtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;CAGV,UAAU,GAAG;;;CAGb,SAAS,GAAG;;;;CAIZ,YAAY,GAAG;;;;;;;;;CASf,aAAa,GAAG;;;;;;;;;;iBAUD,WAAW;MACtB,cAAc;;CAElB,cAAc,GAAG;;;;;;;;;;;;CAYjB,aAAa,GAAG;;;;;;;;;;iBAUD,UAAU;MACrB,cAAc;;CAElB,iBAAiB,GAAG;;;;;;;;;;;;iBAYL,aAAa;MACxB,cAAc;;CAElB,aAAa,GAAG;;;;;;;;;iBASD,SAAS;MACpB,cAAc;;CAElB,SAAS,GAAG;;;;;;;;;;aAUD,OAAO,mBAAmB;;qCAEF,OAAO,iBAAiB;;CAE3D,MAAM,GAAG;;;CAGT,cAAc,GAAG;cACL,OAAO,aAAa;;CAEhC,WAAW,GAAG;cACF,OAAO,kBAAkB;;CAErC,MAAM,GAAG;;;aAGE,OAAO,mBAAmB;;CAErC,KAAK,GAAG;iBACO,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,SAAS,GAAG;;;AAGd,EAAE"}
|