@lobehub/ui 5.50.0 → 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.
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/Progress/Progress.mjs +1 -1
- package/es/base-ui/Progress/Progress.mjs.map +1 -1
- package/es/base-ui/Progress/style.mjs +3 -1
- package/es/base-ui/Progress/style.mjs.map +1 -1
- package/es/base-ui/Result/Result.mjs +4 -4
- package/es/base-ui/Result/Result.mjs.map +1 -1
- package/es/base-ui/Result/style.mjs +15 -4
- package/es/base-ui/Result/style.mjs.map +1 -1
- package/es/base-ui/Spin/Spin.mjs +2 -0
- package/es/base-ui/Spin/Spin.mjs.map +1 -1
- package/es/base-ui/Spin/style.mjs +4 -2
- package/es/base-ui/Spin/style.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -23,7 +23,7 @@ declare const styles: {
|
|
|
23
23
|
};
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
|
-
size?: "
|
|
26
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
27
|
variant?: "filled" | "borderless" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
@@ -91,7 +91,7 @@ const Progress = memo(({ className, format, label, percent, ref, segments = 20,
|
|
|
91
91
|
})]
|
|
92
92
|
}), showInfo && diameter >= 40 && /* @__PURE__ */ jsx("span", {
|
|
93
93
|
className: styles.circleInfo,
|
|
94
|
-
style: { fontSize: diameter
|
|
94
|
+
style: { fontSize: Math.round(diameter * .15 + 6) },
|
|
95
95
|
children: info
|
|
96
96
|
})]
|
|
97
97
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles, trackHeight } from './style';\nimport type { ProgressProps } from './type';\n\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\n large: 72,\n middle: 40,\n small: 20,\n};\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 4,\n middle: 3,\n small: 2,\n};\n\nconst statusColor = {\n active: cssVar.colorInfo,\n exception: cssVar.colorError,\n success: cssVar.colorSuccess,\n};\n\nconst Progress = memo<ProgressProps>(\n ({\n className,\n format,\n label,\n percent,\n ref,\n segments = 20,\n showInfo = true,\n size = 'middle',\n status = 'normal',\n strokeColor,\n style,\n type = 'line',\n variant = 'line',\n ...rest\n }) => {\n const clamped = Math.min(100, Math.max(0, percent));\n const barColor =\n strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\n\n const info = useMemo(() => {\n if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\n if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\n return format ? format(clamped) : `${clamped}%`;\n }, [status, format, clamped, barColor]);\n\n const ariaValueText = useMemo(() => {\n if (!format) return undefined;\n const value = format(clamped);\n return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\n }, [format, clamped]);\n\n const progressAria = {\n 'aria-valuemax': 100,\n 'aria-valuemin': 0,\n 'aria-valuenow': clamped,\n 'aria-valuetext': ariaValueText,\n 'role': 'progressbar' as const,\n };\n\n if (type === 'circle') {\n const isPreset = typeof size === 'string';\n const diameter = isPreset\n ? circleDiameterMap[size as 'small' | 'middle' | 'large']\n : (size as number);\n const stroke = isPreset\n ? circleStrokeMap[size as 'small' | 'middle' | 'large']\n : Math.max(2, Math.round((diameter * 3) / 40));\n const radius = diameter / 2 - stroke;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <div\n className={cx(styles.circleRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <svg\n className={styles.circleSvg}\n height={diameter}\n viewBox={`0 0 ${diameter} ${diameter}`}\n width={diameter}\n >\n <circle\n className={styles.circleTrack}\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n strokeWidth={stroke}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n fill=\"none\"\n r={radius}\n stroke={barColor}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={stroke}\n style={{ transition: 'stroke-dashoffset 0.3s' }}\n />\n </svg>\n {showInfo && diameter >= 40 && (\n <span
|
|
1
|
+
{"version":3,"file":"Progress.mjs","names":[],"sources":["../../../src/base-ui/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles, trackHeight } from './style';\nimport type { ProgressProps } from './type';\n\nconst circleDiameterMap: Record<'small' | 'middle' | 'large', number> = {\n large: 72,\n middle: 40,\n small: 20,\n};\nconst circleStrokeMap: Record<'small' | 'middle' | 'large', number> = {\n large: 4,\n middle: 3,\n small: 2,\n};\n\nconst statusColor = {\n active: cssVar.colorInfo,\n exception: cssVar.colorError,\n success: cssVar.colorSuccess,\n};\n\nconst Progress = memo<ProgressProps>(\n ({\n className,\n format,\n label,\n percent,\n ref,\n segments = 20,\n showInfo = true,\n size = 'middle',\n status = 'normal',\n strokeColor,\n style,\n type = 'line',\n variant = 'line',\n ...rest\n }) => {\n const clamped = Math.min(100, Math.max(0, percent));\n const barColor =\n strokeColor ?? (status === 'normal' ? cssVar.colorPrimary : statusColor[status]);\n\n const info = useMemo(() => {\n if (status === 'success') return <Icon icon={Check} size={14} style={{ color: barColor }} />;\n if (status === 'exception') return <Icon icon={X} size={14} style={{ color: barColor }} />;\n return format ? format(clamped) : `${clamped}%`;\n }, [status, format, clamped, barColor]);\n\n const ariaValueText = useMemo(() => {\n if (!format) return undefined;\n const value = format(clamped);\n return typeof value === 'string' || typeof value === 'number' ? String(value) : undefined;\n }, [format, clamped]);\n\n const progressAria = {\n 'aria-valuemax': 100,\n 'aria-valuemin': 0,\n 'aria-valuenow': clamped,\n 'aria-valuetext': ariaValueText,\n 'role': 'progressbar' as const,\n };\n\n if (type === 'circle') {\n const isPreset = typeof size === 'string';\n const diameter = isPreset\n ? circleDiameterMap[size as 'small' | 'middle' | 'large']\n : (size as number);\n const stroke = isPreset\n ? circleStrokeMap[size as 'small' | 'middle' | 'large']\n : Math.max(2, Math.round((diameter * 3) / 40));\n const radius = diameter / 2 - stroke;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - clamped / 100);\n\n return (\n <div\n className={cx(styles.circleRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <svg\n className={styles.circleSvg}\n height={diameter}\n viewBox={`0 0 ${diameter} ${diameter}`}\n width={diameter}\n >\n <circle\n className={styles.circleTrack}\n cx={diameter / 2}\n cy={diameter / 2}\n r={radius}\n strokeWidth={stroke}\n />\n <circle\n cx={diameter / 2}\n cy={diameter / 2}\n fill=\"none\"\n r={radius}\n stroke={barColor}\n strokeDasharray={circumference}\n strokeDashoffset={offset}\n strokeLinecap=\"round\"\n strokeWidth={stroke}\n style={{ transition: 'stroke-dashoffset 0.3s' }}\n />\n </svg>\n {showInfo && diameter >= 40 && (\n <span\n className={styles.circleInfo}\n style={{ fontSize: Math.round(diameter * 0.15 + 6) }}\n >\n {info}\n </span>\n )}\n </div>\n );\n }\n\n const heightStyle = typeof size === 'number' ? { height: size } : undefined;\n const heightClass = (family: 'line' | 'block') =>\n typeof size === 'number' ? undefined : trackHeight({ family, size });\n\n if (variant === 'segments') {\n const filled = Math.round((segments * clamped) / 100);\n\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div className={cx(styles.segments, heightClass('block'))} style={heightStyle}>\n {Array.from({ length: segments }, (_, index) => (\n <span\n className={cx(styles.segment, index < filled && styles.segmentOn)}\n key={index}\n style={index < filled ? { background: barColor } : undefined}\n />\n ))}\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n if (variant === 'inset') {\n return (\n <div\n className={cx(styles.rowRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n <div\n className={cx(styles.rowTrack, styles.insetTrack, heightClass('block'))}\n style={heightStyle}\n >\n <div className={styles.insetBarWrapper}>\n <div className={styles.bar} style={{ background: barColor, width: `${clamped}%` }}>\n <span className={styles.insetCap} />\n </div>\n </div>\n </div>\n {showInfo && <span className={styles.rowInfo}>{info}</span>}\n </div>\n );\n }\n\n return (\n <div\n className={cx(styles.lineRoot, className)}\n ref={ref}\n style={style}\n {...progressAria}\n {...rest}\n >\n {(label || showInfo) && (\n <div className={styles.lineMeta}>\n <span>{label}</span>\n {showInfo && <span className={styles.lineValue}>{info}</span>}\n </div>\n )}\n <div className={cx(styles.lineTrack, heightClass('line'))} style={heightStyle}>\n <div\n style={{ background: barColor, width: `${clamped}%` }}\n className={cx(\n styles.bar,\n variant === 'line' && status === 'active' && styles.barActive,\n )}\n />\n </div>\n </div>\n );\n },\n);\n\nProgress.displayName = 'Progress';\n\nexport default Progress;\n"],"mappings":"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"}
|
|
@@ -40,9 +40,11 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
40
40
|
`,
|
|
41
41
|
circleInfo: css`
|
|
42
42
|
position: absolute;
|
|
43
|
-
|
|
43
|
+
|
|
44
44
|
font-variant-numeric: tabular-nums;
|
|
45
|
+
line-height: 1;
|
|
45
46
|
color: ${cssVar.colorText};
|
|
47
|
+
white-space: nowrap;
|
|
46
48
|
`,
|
|
47
49
|
circleRoot: css`
|
|
48
50
|
position: relative;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Progress/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shimmer = keyframes`\n from {\n background-position: -80px 0;\n }\n to {\n background-position: 200px 0;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n bar: css`\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s;\n `,\n barActive: css`\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\n transparent\n );\n background-size: 80px 100%;\n animation: ${shimmer} 1.2s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n `,\n blockLg: css`\n height: 12px;\n `,\n blockMd: css`\n height: 8px;\n `,\n blockSm: css`\n height: 4px;\n `,\n circleInfo: css`\n position: absolute;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Progress/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst shimmer = keyframes`\n from {\n background-position: -80px 0;\n }\n to {\n background-position: 200px 0;\n }\n`;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n bar: css`\n height: 100%;\n border-radius: 999px;\n transition: width 0.3s;\n `,\n barActive: css`\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent),\n transparent\n );\n background-size: 80px 100%;\n animation: ${shimmer} 1.2s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n `,\n blockLg: css`\n height: 12px;\n `,\n blockMd: css`\n height: 8px;\n `,\n blockSm: css`\n height: 4px;\n `,\n circleInfo: css`\n position: absolute;\n\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: ${cssVar.colorText};\n white-space: nowrap;\n `,\n circleRoot: css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n `,\n circleSvg: css`\n rotate: -90deg;\n `,\n circleTrack: css`\n fill: none;\n stroke: ${cssVar.colorFillTertiary};\n `,\n insetBarWrapper: css`\n position: relative;\n overflow: hidden;\n height: 100%;\n border-radius: 999px;\n `,\n insetCap: css`\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n\n width: 4px;\n border-radius: 999px;\n\n opacity: 0.6;\n background: ${cssVar.colorBgContainer};\n `,\n insetTrack: css`\n padding: 2px;\n border-radius: 999px;\n background: ${cssVar.colorFillTertiary};\n `,\n lineLg: css`\n height: 6px;\n `,\n lineMd: css`\n height: 4px;\n `,\n lineMeta: css`\n display: flex;\n gap: 12px;\n align-items: baseline;\n justify-content: space-between;\n\n font-size: ${cssVar.fontSizeSM};\n color: ${cssVar.colorTextSecondary};\n `,\n lineRoot: css`\n display: flex;\n flex-direction: column;\n gap: 6px;\n width: 100%;\n `,\n lineSm: css`\n height: 2px;\n `,\n lineTrack: css`\n overflow: hidden;\n border-radius: 999px;\n background: ${cssVar.colorFillTertiary};\n `,\n lineValue: css`\n font-family: ${cssVar.fontFamilyCode};\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorText};\n `,\n rowInfo: css`\n min-width: 3.5ch;\n\n font-family: ${cssVar.fontFamilyCode};\n font-size: ${cssVar.fontSizeSM};\n font-variant-numeric: tabular-nums;\n color: ${cssVar.colorTextSecondary};\n text-align: end;\n `,\n rowRoot: css`\n display: flex;\n flex: 1;\n gap: 10px;\n align-items: center;\n\n width: 100%;\n `,\n rowTrack: css`\n flex: 1;\n `,\n segment: css`\n flex: 1;\n border-radius: 1px;\n background: ${cssVar.colorFillTertiary};\n `,\n segmentOn: css`\n background: ${cssVar.colorPrimary};\n `,\n segments: css`\n display: flex;\n flex: 1;\n gap: 2px;\n min-width: 0;\n `,\n}));\n\nexport const trackHeight = cva(undefined, {\n compoundVariants: [\n { className: styles.lineSm, family: 'line', size: 'small' },\n { className: styles.lineMd, family: 'line', size: 'middle' },\n { className: styles.lineLg, family: 'line', size: 'large' },\n { className: styles.blockSm, family: 'block', size: 'small' },\n { className: styles.blockMd, family: 'block', size: 'middle' },\n { className: styles.blockLg, family: 'block', size: 'large' },\n ],\n defaultVariants: {\n family: 'line',\n size: 'middle',\n },\n variants: {\n family: {\n block: null,\n line: null,\n },\n size: {\n large: null,\n middle: null,\n small: null,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAM,UAAU,SAAS;;;;;;;;AASzB,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,KAAK,GAAG;;;;;CAKR,WAAW,GAAG;;;;2BAIW,OAAO,WAAW;;;;iBAI5B,QAAQ;;;;;;CAMvB,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,SAAS,GAAG;;;CAGZ,YAAY,GAAG;;;;;aAKJ,OAAO,UAAU;;;CAG5B,YAAY,GAAG;;;;;;CAMf,WAAW,GAAG;;;CAGd,aAAa,GAAG;;cAEJ,OAAO,kBAAkB;;CAErC,iBAAiB,GAAG;;;;;;CAMpB,UAAU,GAAG;;;;;;;;;kBASG,OAAO,iBAAiB;;CAExC,YAAY,GAAG;;;kBAGC,OAAO,kBAAkB;;CAEzC,QAAQ,GAAG;;;CAGX,QAAQ,GAAG;;;CAGX,UAAU,GAAG;;;;;;iBAME,OAAO,WAAW;aACtB,OAAO,mBAAmB;;CAErC,UAAU,GAAG;;;;;;CAMb,QAAQ,GAAG;;;CAGX,WAAW,GAAG;;;kBAGE,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;mBACG,OAAO,eAAe;;aAE5B,OAAO,UAAU;;CAE5B,SAAS,GAAG;;;mBAGK,OAAO,eAAe;iBACxB,OAAO,WAAW;;aAEtB,OAAO,mBAAmB;;;CAGrC,SAAS,GAAG;;;;;;;;CAQZ,UAAU,GAAG;;;CAGb,SAAS,GAAG;;;kBAGI,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;kBACE,OAAO,aAAa;;CAEpC,UAAU,GAAG;;;;;;AAMf,EAAE;AAEF,MAAa,cAAc,IAAI,KAAA,GAAW;CACxC,kBAAkB;EAChB;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAS;EAC3D;GAAE,WAAW,OAAO;GAAQ,QAAQ;GAAQ,MAAM;EAAQ;EAC1D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;EAC5D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAS;EAC7D;GAAE,WAAW,OAAO;GAAS,QAAQ;GAAS,MAAM;EAAQ;CAC9D;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;CACR;CACA,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,OAAO;GACP,QAAQ;GACR,OAAO;EACT;CACF;AACF,CAAC"}
|
|
@@ -7,19 +7,19 @@ import { Check, Info, TriangleAlert, X } from "lucide-react";
|
|
|
7
7
|
//#region src/base-ui/Result/Result.tsx
|
|
8
8
|
const statusIcon = {
|
|
9
9
|
error: /* @__PURE__ */ jsx(X, {
|
|
10
|
-
size:
|
|
10
|
+
size: 36,
|
|
11
11
|
strokeWidth: 2.5
|
|
12
12
|
}),
|
|
13
13
|
info: /* @__PURE__ */ jsx(Info, {
|
|
14
|
-
size:
|
|
14
|
+
size: 36,
|
|
15
15
|
strokeWidth: 2
|
|
16
16
|
}),
|
|
17
17
|
success: /* @__PURE__ */ jsx(Check, {
|
|
18
|
-
size:
|
|
18
|
+
size: 36,
|
|
19
19
|
strokeWidth: 2.5
|
|
20
20
|
}),
|
|
21
21
|
warning: /* @__PURE__ */ jsx(TriangleAlert, {
|
|
22
|
-
size:
|
|
22
|
+
size: 36,
|
|
23
23
|
strokeWidth: 2
|
|
24
24
|
})
|
|
25
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { statusColor, styles } from './style';\nimport type { ResultProps } from './type';\n\nconst statusIcon = {\n error: <X size={
|
|
1
|
+
{"version":3,"file":"Result.mjs","names":[],"sources":["../../../src/base-ui/Result/Result.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Check, Info, TriangleAlert, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport { statusColor, styles } from './style';\nimport type { ResultProps } from './type';\n\nconst statusIcon = {\n error: <X size={36} strokeWidth={2.5} />,\n info: <Info size={36} strokeWidth={2} />,\n success: <Check size={36} strokeWidth={2.5} />,\n warning: <TriangleAlert size={36} strokeWidth={2} />,\n};\n\nconst Result = memo<ResultProps>(\n ({ children, className, extra, icon, ref, status = 'info', style, subTitle, title, ...rest }) => {\n const iconStyle = useMemo(() => {\n if (status === 'info') {\n return { background: cssVar.colorFillTertiary, color: cssVar.colorTextSecondary };\n }\n const color = statusColor[status];\n return { background: `color-mix(in srgb, ${color} 12%, transparent)`, color };\n }, [status]);\n\n return (\n <section className={cx(styles.root, className)} ref={ref} style={style} {...rest}>\n <div className={styles.icon} style={iconStyle}>\n {icon ?? statusIcon[status]}\n </div>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subTitle && <p className={styles.subTitle}>{subTitle}</p>}\n {extra && <div className={styles.extra}>{extra}</div>}\n {children}\n </section>\n );\n },\n);\n\nResult.displayName = 'Result';\n\nexport default Result;\n"],"mappings":";;;;;;;AASA,MAAM,aAAa;CACjB,OAAO,oBAAC,GAAD;EAAG,MAAM;EAAI,aAAa;CAAM,CAAA;CACvC,MAAM,oBAAC,MAAD;EAAM,MAAM;EAAI,aAAa;CAAI,CAAA;CACvC,SAAS,oBAAC,OAAD;EAAO,MAAM;EAAI,aAAa;CAAM,CAAA;CAC7C,SAAS,oBAAC,eAAD;EAAe,MAAM;EAAI,aAAa;CAAI,CAAA;AACrD;AAEA,MAAM,SAAS,MACZ,EAAE,UAAU,WAAW,OAAO,MAAM,KAAK,SAAS,QAAQ,OAAO,UAAU,OAAO,GAAG,WAAW;CAC/F,MAAM,YAAY,cAAc;EAC9B,IAAI,WAAW,QACb,OAAO;GAAE,YAAY,OAAO;GAAmB,OAAO,OAAO;EAAmB;EAElF,MAAM,QAAQ,YAAY;EAC1B,OAAO;GAAE,YAAY,sBAAsB,MAAM;GAAqB;EAAM;CAC9E,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,WAAD;EAAS,WAAW,GAAG,OAAO,MAAM,SAAS;EAAQ;EAAY;EAAO,GAAI;EAA5E,UAAA;GACE,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAM,OAAO;IACjC,UAAA,QAAQ,WAAW;GACjB,CAAA;GACJ,SAAS,oBAAC,MAAD;IAAI,WAAW,OAAO;IAAQ,UAAA;GAAU,CAAA;GACjD,YAAY,oBAAC,KAAD;IAAG,WAAW,OAAO;IAAW,UAAA;GAAY,CAAA;GACxD,SAAS,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAQ,UAAA;GAAW,CAAA;GACnD;EACM;;AAEb,CACF;AAEA,OAAO,cAAc"}
|
|
@@ -3,11 +3,17 @@ import { createStaticStyles, cssVar } from "antd-style";
|
|
|
3
3
|
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
4
4
|
extra: css`
|
|
5
5
|
display: flex;
|
|
6
|
+
flex-wrap: wrap;
|
|
6
7
|
gap: 8px;
|
|
7
8
|
align-items: center;
|
|
9
|
+
align-self: stretch;
|
|
8
10
|
justify-content: center;
|
|
9
11
|
|
|
10
12
|
margin-block-start: 10px;
|
|
13
|
+
|
|
14
|
+
> :is(div, section, form) {
|
|
15
|
+
flex: 1 1 100%;
|
|
16
|
+
}
|
|
11
17
|
`,
|
|
12
18
|
icon: css`
|
|
13
19
|
display: flex;
|
|
@@ -15,10 +21,15 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
15
21
|
align-items: center;
|
|
16
22
|
justify-content: center;
|
|
17
23
|
|
|
18
|
-
width:
|
|
19
|
-
height:
|
|
20
|
-
margin-block-end:
|
|
24
|
+
width: 72px;
|
|
25
|
+
height: 72px;
|
|
26
|
+
margin-block-end: 12px;
|
|
21
27
|
border-radius: 50%;
|
|
28
|
+
|
|
29
|
+
svg {
|
|
30
|
+
width: 36px;
|
|
31
|
+
height: 36px;
|
|
32
|
+
}
|
|
22
33
|
`,
|
|
23
34
|
root: css`
|
|
24
35
|
display: flex;
|
|
@@ -39,7 +50,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
39
50
|
`,
|
|
40
51
|
title: css`
|
|
41
52
|
margin: 0;
|
|
42
|
-
font-size:
|
|
53
|
+
font-size: 20px;
|
|
43
54
|
font-weight: 600;
|
|
44
55
|
text-wrap: balance;
|
|
45
56
|
`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Result/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n extra: css`\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n\n margin-block-start: 10px;\n `,\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width:
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Result/style.ts"],"sourcesContent":["import { createStaticStyles, cssVar } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n extra: css`\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n align-items: center;\n align-self: stretch;\n justify-content: center;\n\n margin-block-start: 10px;\n\n > :is(div, section, form) {\n flex: 1 1 100%;\n }\n `,\n icon: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n\n width: 72px;\n height: 72px;\n margin-block-end: 12px;\n border-radius: 50%;\n\n svg {\n width: 36px;\n height: 36px;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n gap: 6px;\n align-items: center;\n\n padding-block: 16px;\n padding-inline: 8px;\n\n text-align: center;\n `,\n subTitle: css`\n max-width: 36ch;\n margin: 0;\n font-size: 13px;\n color: ${cssVar.colorTextTertiary};\n `,\n title: css`\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n text-wrap: balance;\n `,\n}));\n\nexport const statusColor: Record<'success' | 'error' | 'warning', string> = {\n error: cssVar.colorError,\n success: cssVar.colorSuccess,\n warning: cssVar.colorWarning,\n};\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;CAcV,MAAM,GAAG;;;;;;;;;;;;;;;;CAgBT,MAAM,GAAG;;;;;;;;;;;CAWT,UAAU,GAAG;;;;aAIF,OAAO,kBAAkB;;CAEpC,OAAO,GAAG;;;;;;AAMZ,EAAE;AAEF,MAAa,cAA+D;CAC1E,OAAO,OAAO;CACd,SAAS,OAAO;CAChB,SAAS,OAAO;AAClB"}
|
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"}
|