@lobehub/ui 5.51.1 → 5.52.0

package/es/base-ui/Progress/Progress.mjs

@@ -11,6 +11,11 @@ const circleDiameterMap = {
 	middle: 40,
 	small: 20
 };
+const blockHeightMap = {
+	large: 12,
+	middle: 8,
+	small: 4
+};
 const circleStrokeMap = {
 	large: 4,
 	middle: 3,
@@ -128,20 +133,17 @@ const Progress = memo(({ className, format, label, percent, ref, segments = 20,
 		style,
 		...progressAria,
 		...rest,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cx(styles.rowTrack, styles.insetTrack, heightClass("block")),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx(styles.split, heightClass("block")),
 			style: heightStyle,
-			children: /* @__PURE__ */ jsx("div", {
-				className: styles.insetBarWrapper,
-				children: /* @__PURE__ */ jsx("div", {
-					className: styles.bar,
-					style: {
-						background: barColor,
-						width: `${clamped}%`
-					},
-					children: /* @__PURE__ */ jsx("span", { className: styles.insetCap })
-				})
-			})
+			children: [clamped > 0 && /* @__PURE__ */ jsx("span", {
+				className: cx(styles.splitFill, status === "active" && styles.barActive),
+				style: {
+					backgroundColor: barColor,
+					minWidth: typeof size === "number" ? size : blockHeightMap[size],
+					width: clamped === 100 ? "100%" : `calc((100% - 3px) * ${clamped / 100})`
+				}
+			}), clamped < 100 && /* @__PURE__ */ jsx("span", { className: styles.splitRest })]
 		}), showInfo && /* @__PURE__ */ jsx("span", {
 			className: styles.rowInfo,
 			children: info
@@ -164,7 +166,7 @@ const Progress = memo(({ className, format, label, percent, ref, segments = 20,
 			style: heightStyle,
 			children: /* @__PURE__ */ jsx("div", {
 				style: {
-					background: barColor,
+					backgroundColor: barColor,
 					width: `${clamped}%`
 				},
 				className: cx(styles.bar, variant === "line" && status === "active" && styles.barActive)

package/es/base-ui/Progress/Progress.mjs.map

@@ -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\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":";;;;;;;;AAWA,MAAM,oBAAkE;CACtE,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AACA,MAAM,kBAAgE;CACpE,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,cAAc;CAClB,QAAQ,OAAO;CACf,WAAW,OAAO;CAClB,SAAS,OAAO;AAClB;AAEA,MAAM,WAAW,MACd,EACC,WACA,QACA,OACA,SACA,KACA,WAAW,IACX,WAAW,MACX,OAAO,UACP,SAAS,UACT,aACA,OACA,OAAO,QACP,UAAU,QACV,GAAG,WACC;CACJ,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC;CAClD,MAAM,WACJ,gBAAgB,WAAW,WAAW,OAAO,eAAe,YAAY;CAE1E,MAAM,OAAO,cAAc;EACzB,IAAI,WAAW,WAAW,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAO,MAAM;GAAI,OAAO,EAAE,OAAO,SAAS;EAAI,CAAA;EAC3F,IAAI,WAAW,aAAa,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAG,MAAM;GAAI,OAAO,EAAE,OAAO,SAAS;EAAI,CAAA;EACzF,OAAO,SAAS,OAAO,OAAO,IAAI,GAAG,QAAQ;CAC/C,GAAG;EAAC;EAAQ;EAAQ;EAAS;CAAQ,CAAC;CAQtC,MAAM,eAAe;EACnB,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAVoB,cAAc;GAClC,IAAI,CAAC,QAAQ,OAAO,KAAA;GACpB,MAAM,QAAQ,OAAO,OAAO;GAC5B,OAAO,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI,KAAA;EAClF,GAAG,CAAC,QAAQ,OAAO,CAMa;EAC9B,QAAQ;CACV;CAEA,IAAI,SAAS,UAAU;EACrB,MAAM,WAAW,OAAO,SAAS;EACjC,MAAM,WAAW,WACb,kBAAkB,QACjB;EACL,MAAM,SAAS,WACX,gBAAgB,QAChB,KAAK,IAAI,GAAG,KAAK,MAAO,WAAW,IAAK,EAAE,CAAC;EAC/C,MAAM,SAAS,WAAW,IAAI;EAC9B,MAAM,gBAAgB,IAAI,KAAK,KAAK;EACpC,MAAM,SAAS,iBAAiB,IAAI,UAAU;EAE9C,OACE,qBAAC,OAAD;GACE,WAAW,GAAG,OAAO,YAAY,SAAS;GACrC;GACE;GACP,GAAI;GACJ,GAAI;GALN,UAAA,CAOE,qBAAC,OAAD;IACE,WAAW,OAAO;IAClB,QAAQ;IACR,SAAS,OAAO,SAAS,GAAG;IAC5B,OAAO;IAJT,UAAA,CAME,oBAAC,UAAD;KACE,WAAW,OAAO;KAClB,IAAI,WAAW;KACf,IAAI,WAAW;KACf,GAAG;KACH,aAAa;IACd,CAAA,GACD,oBAAC,UAAD;KACE,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAQ;KACR,iBAAiB;KACjB,kBAAkB;KAClB,eAAc;KACd,aAAa;KACb,OAAO,EAAE,YAAY,yBAAyB;IAC/C,CAAA,CACE;GACJ,CAAA,GAAA,YAAY,YAAY,MACvB,oBAAC,QAAD;IACE,WAAW,OAAO;IAClB,OAAO,EAAE,UAAU,KAAK,MAAM,WAAW,MAAO,CAAC,EAAE;IAElD,UAAA;GACG,CAAA,CAEL;;CAET;CAEA,MAAM,cAAc,OAAO,SAAS,WAAW,EAAE,QAAQ,KAAK,IAAI,KAAA;CAClE,MAAM,eAAe,WACnB,OAAO,SAAS,WAAW,KAAA,IAAY,YAAY;EAAE;EAAQ;CAAK,CAAC;CAErE,IAAI,YAAY,YAAY;EAC1B,MAAM,SAAS,KAAK,MAAO,WAAW,UAAW,GAAG;EAEpD,OACE,qBAAC,OAAD;GACE,WAAW,GAAG,OAAO,SAAS,SAAS;GAClC;GACE;GACP,GAAI;GACJ,GAAI;GALN,UAAA,CAOE,oBAAC,OAAD;IAAK,WAAW,GAAG,OAAO,UAAU,YAAY,OAAO,CAAC;IAAG,OAAO;IAC/D,UAAA,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,UACpC,oBAAC,QAAD;KACE,WAAW,GAAG,OAAO,SAAS,QAAQ,UAAU,OAAO,SAAS;KAEhE,OAAO,QAAQ,SAAS,EAAE,YAAY,SAAS,IAAI,KAAA;IACpD,GAFM,KAEN,CACF;GACE,CAAA,GACJ,YAAY,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAU,UAAA;GAAW,CAAA,CACvD;;CAET;CAEA,IAAI,YAAY,SACd,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,SAAS,SAAS;EAClC;EACE;EACP,GAAI;EACJ,GAAI;EALN,UAAA,CAOE,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,UAAU,OAAO,YAAY,YAAY,OAAO,CAAC;GACtE,OAAO;GAEP,UAAA,oBAAC,OAAD;IAAK,WAAW,OAAO;IACrB,UAAA,oBAAC,OAAD;KAAK,WAAW,OAAO;KAAK,OAAO;MAAE,YAAY;MAAU,OAAO,GAAG,QAAQ;KAAG;KAC9E,UAAA,oBAAC,QAAD,EAAM,WAAW,OAAO,SAAW,CAAA;IAChC,CAAA;GACF,CAAA;EACF,CAAA,GACJ,YAAY,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAU,UAAA;EAAW,CAAA,CACvD;;CAIT,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,UAAU,SAAS;EACnC;EACE;EACP,GAAI;EACJ,GAAI;EALN,UAAA,EAOI,SAAS,aACT,qBAAC,OAAD;GAAK,WAAW,OAAO;GAAvB,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,YAAY,oBAAC,QAAD;IAAM,WAAW,OAAO;IAAY,UAAA;GAAW,CAAA,CACzD;EAEP,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,OAAO,WAAW,YAAY,MAAM,CAAC;GAAG,OAAO;GAChE,UAAA,oBAAC,OAAD;IACE,OAAO;KAAE,YAAY;KAAU,OAAO,GAAG,QAAQ;IAAG;IACpD,WAAW,GACT,OAAO,KACP,YAAY,UAAU,WAAW,YAAY,OAAO,SACtD;GACD,CAAA;EACE,CAAA,CACF;;AAET,CACF;AAEA,SAAS,cAAc"}
+{"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 blockHeightMap: Record<'small' | 'middle' | 'large', number> = {\n  large: 12,\n  middle: 8,\n  small: 4,\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 className={cx(styles.split, heightClass('block'))} style={heightStyle}>\n            {clamped > 0 && (\n              <span\n                className={cx(styles.splitFill, status === 'active' && styles.barActive)}\n                style={{\n                  backgroundColor: barColor,\n                  minWidth: typeof size === 'number' ? size : blockHeightMap[size],\n                  width: clamped === 100 ? '100%' : `calc((100% - 3px) * ${clamped / 100})`,\n                }}\n              />\n            )}\n            {clamped < 100 && <span className={styles.splitRest} />}\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={{ backgroundColor: 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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"}

package/es/base-ui/Progress/style.mjs

@@ -58,28 +58,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 	circleTrack: css`
     fill: none;
     stroke: ${cssVar.colorFillTertiary};
-  `,
-	insetBarWrapper: css`
-    position: relative;
-    overflow: hidden;
-    height: 100%;
-    border-radius: 999px;
-  `,
-	insetCap: css`
-    position: absolute;
-    inset-block: 0;
-    inset-inline-end: 0;
-
-    width: 4px;
-    border-radius: 999px;
-
-    opacity: 0.6;
-    background: ${cssVar.colorBgContainer};
-  `,
-	insetTrack: css`
-    padding: 2px;
-    border-radius: 999px;
-    background: ${cssVar.colorFillTertiary};
   `,
 	lineLg: css`
     height: 6px;
@@ -131,9 +109,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     align-items: center;
 
     width: 100%;
-  `,
-	rowTrack: css`
-    flex: 1;
   `,
 	segment: css`
     flex: 1;
@@ -148,6 +123,22 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     flex: 1;
     gap: 2px;
     min-width: 0;
+  `,
+	split: css`
+    display: flex;
+    flex: 1;
+    gap: 3px;
+    min-width: 0;
+  `,
+	splitFill: css`
+    flex: none;
+    border-radius: 999px;
+    transition: width 0.3s;
+  `,
+	splitRest: css`
+    flex: 1;
+    border-radius: 999px;
+    background: ${cssVar.colorFillSecondary};
   `
 }));
 const trackHeight = cva(void 0, {

package/es/base-ui/Progress/style.mjs.map

@@ -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\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"}
+{"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  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  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  split: css`\n    display: flex;\n    flex: 1;\n    gap: 3px;\n    min-width: 0;\n  `,\n  splitFill: css`\n    flex: none;\n    border-radius: 999px;\n    transition: width 0.3s;\n  `,\n  splitRest: css`\n    flex: 1;\n    border-radius: 999px;\n    background: ${cssVar.colorFillSecondary};\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,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,SAAS,GAAG;;;kBAGI,OAAO,kBAAkB;;CAEzC,WAAW,GAAG;kBACE,OAAO,aAAa;;CAEpC,UAAU,GAAG;;;;;;CAMb,OAAO,GAAG;;;;;;CAMV,WAAW,GAAG;;;;;CAKd,WAAW,GAAG;;;kBAGE,OAAO,mBAAmB;;AAE5C,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"}

package/es/base-ui/QRCode/QRCode.d.mts

@@ -0,0 +1,6 @@
+import { QRCodeProps } from "./type.mjs";
+//#region src/base-ui/QRCode/QRCode.d.ts
+declare const QRCode: import("react").NamedExoticComponent<QRCodeProps>;
+//#endregion
+export { QRCode as default };
+//# sourceMappingURL=QRCode.d.mts.map

package/es/base-ui/QRCode/QRCode.mjs

@@ -0,0 +1,105 @@
+"use client";
+import Icon from "../../Icon/Icon.mjs";
+import Spin from "../Spin/Spin.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { panelStyles } from "../panelStyles.mjs";
+import qrCode_default from "../../i18n/resources/en/qrCode.mjs";
+import { buildQrPath } from "./qrPath.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { RotateCw } from "lucide-react";
+import { encode } from "uqr";
+//#region src/base-ui/QRCode/QRCode.tsx
+const ICON_RATIO = .22;
+const QRCode = memo(({ bgColor = "#fff", bordered = true, className, color = "#000", errorLevel = "M", icon, onRefresh, ref, size = 160, status = "active", style, value, ...rest }) => {
+	const { t } = useTranslation(qrCode_default);
+	const { count, path } = useMemo(() => {
+		try {
+			const { data } = encode(value, {
+				border: 0,
+				ecc: icon ? "H" : errorLevel
+			});
+			const hole = icon ? Math.ceil(data.length * ICON_RATIO) | 1 : 0;
+			return {
+				count: data.length,
+				path: buildQrPath(data, hole)
+			};
+		} catch {
+			return {
+				count: 0,
+				path: ""
+			};
+		}
+	}, [
+		value,
+		icon,
+		errorLevel
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(styles.root, bordered && styles.bordered, className),
+		ref,
+		style: {
+			background: bgColor,
+			...style
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				"aria-label": value,
+				height: size,
+				role: "img",
+				shapeRendering: "crispEdges",
+				viewBox: `0 0 ${count} ${count}`,
+				width: size,
+				children: [/* @__PURE__ */ jsx("rect", {
+					fill: bgColor,
+					height: count,
+					width: count
+				}), /* @__PURE__ */ jsx("path", {
+					d: path,
+					fill: color
+				})]
+			}),
+			icon && /* @__PURE__ */ jsx("span", {
+				className: styles.icon,
+				style: {
+					height: size * ICON_RATIO,
+					width: size * ICON_RATIO
+				},
+				children: icon
+			}),
+			status === "loading" && /* @__PURE__ */ jsx("span", {
+				"aria-label": t("qrCode.loading"),
+				className: styles.overlay,
+				role: "status",
+				children: /* @__PURE__ */ jsx(Spin, { style: { color: "#666" } })
+			}),
+			status === "expired" && /* @__PURE__ */ jsxs("span", {
+				className: styles.overlay,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: styles.overlayTitle,
+					children: t("qrCode.expired")
+				}), onRefresh && /* @__PURE__ */ jsxs("button", {
+					className: panelStyles.pill,
+					style: {
+						background: "#080808",
+						color: "#fff"
+					},
+					type: "button",
+					onClick: onRefresh,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: RotateCw,
+						size: 14
+					}), t("qrCode.refresh")]
+				})]
+			})
+		]
+	});
+});
+QRCode.displayName = "QRCode";
+//#endregion
+export { QRCode as default };
+
+//# sourceMappingURL=QRCode.mjs.map

package/es/base-ui/QRCode/QRCode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.mjs","names":["qrCodeMessages"],"sources":["../../../src/base-ui/QRCode/QRCode.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { RotateCw } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { encode } from 'uqr';\n\nimport { panelStyles } from '@/base-ui/panelStyles';\nimport Spin from '@/base-ui/Spin';\nimport qrCodeMessages from '@/i18n/resources/en/qrCode';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\n\nimport { buildQrPath } from './qrPath';\nimport { styles } from './style';\nimport type { QRCodeProps } from './type';\n\nconst ICON_RATIO = 0.22;\n\nconst QRCode = memo<QRCodeProps>(\n  ({\n    bgColor = '#fff',\n    bordered = true,\n    className,\n    color = '#000',\n    errorLevel = 'M',\n    icon,\n    onRefresh,\n    ref,\n    size = 160,\n    status = 'active',\n    style,\n    value,\n    ...rest\n  }) => {\n    const { t } = useTranslation(qrCodeMessages);\n    const { count, path } = useMemo(() => {\n      try {\n        const { data } = encode(value, { border: 0, ecc: icon ? 'H' : errorLevel });\n        const hole = icon ? Math.ceil(data.length * ICON_RATIO) | 1 : 0;\n        return { count: data.length, path: buildQrPath(data, hole) };\n      } catch {\n        return { count: 0, path: '' };\n      }\n    }, [value, icon, errorLevel]);\n\n    return (\n      <div\n        className={cx(styles.root, bordered && styles.bordered, className)}\n        ref={ref}\n        style={{ background: bgColor, ...style }}\n        {...rest}\n      >\n        <svg\n          aria-label={value}\n          height={size}\n          role=\"img\"\n          shapeRendering=\"crispEdges\"\n          viewBox={`0 0 ${count} ${count}`}\n          width={size}\n        >\n          <rect fill={bgColor} height={count} width={count} />\n          <path d={path} fill={color} />\n        </svg>\n        {icon && (\n          <span\n            className={styles.icon}\n            style={{ height: size * ICON_RATIO, width: size * ICON_RATIO }}\n          >\n            {icon}\n          </span>\n        )}\n        {status === 'loading' && (\n          <span aria-label={t('qrCode.loading')} className={styles.overlay} role=\"status\">\n            <Spin style={{ color: '#666' }} />\n          </span>\n        )}\n        {status === 'expired' && (\n          <span className={styles.overlay}>\n            <span className={styles.overlayTitle}>{t('qrCode.expired')}</span>\n            {onRefresh && (\n              <button\n                className={panelStyles.pill}\n                style={{ background: '#080808', color: '#fff' }}\n                type=\"button\"\n                onClick={onRefresh}\n              >\n                <Icon icon={RotateCw} size={14} />\n                {t('qrCode.refresh')}\n              </button>\n            )}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nQRCode.displayName = 'QRCode';\n\nexport default QRCode;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aAAa;AAEnB,MAAM,SAAS,MACZ,EACC,UAAU,QACV,WAAW,MACX,WACA,QAAQ,QACR,aAAa,KACb,MACA,WACA,KACA,OAAO,KACP,SAAS,UACT,OACA,OACA,GAAG,WACC;CACJ,MAAM,EAAE,MAAM,eAAeA,cAAc;CAC3C,MAAM,EAAE,OAAO,SAAS,cAAc;EACpC,IAAI;GACF,MAAM,EAAE,SAAS,OAAO,OAAO;IAAE,QAAQ;IAAG,KAAK,OAAO,MAAM;GAAW,CAAC;GAC1E,MAAM,OAAO,OAAO,KAAK,KAAK,KAAK,SAAS,UAAU,IAAI,IAAI;GAC9D,OAAO;IAAE,OAAO,KAAK;IAAQ,MAAM,YAAY,MAAM,IAAI;GAAE;EAC7D,QAAQ;GACN,OAAO;IAAE,OAAO;IAAG,MAAM;GAAG;EAC9B;CACF,GAAG;EAAC;EAAO;EAAM;CAAU,CAAC;CAE5B,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,OAAO,MAAM,YAAY,OAAO,UAAU,SAAS;EAC5D;EACL,OAAO;GAAE,YAAY;GAAS,GAAG;EAAM;EACvC,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IACE,cAAY;IACZ,QAAQ;IACR,MAAK;IACL,gBAAe;IACf,SAAS,OAAO,MAAM,GAAG;IACzB,OAAO;IANT,UAAA,CAQE,oBAAC,QAAD;KAAM,MAAM;KAAS,QAAQ;KAAO,OAAO;IAAQ,CAAA,GACnD,oBAAC,QAAD;KAAM,GAAG;KAAM,MAAM;IAAQ,CAAA,CAC1B;;GACJ,QACC,oBAAC,QAAD;IACE,WAAW,OAAO;IAClB,OAAO;KAAE,QAAQ,OAAO;KAAY,OAAO,OAAO;IAAW;IAE5D,UAAA;GACG,CAAA;GAEP,WAAW,aACV,oBAAC,QAAD;IAAM,cAAY,EAAE,gBAAgB;IAAG,WAAW,OAAO;IAAS,MAAK;IACrE,UAAA,oBAAC,MAAD,EAAM,OAAO,EAAE,OAAO,OAAO,EAAI,CAAA;GAC7B,CAAA;GAEP,WAAW,aACV,qBAAC,QAAD;IAAM,WAAW,OAAO;IAAxB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAW,OAAO;KAAe,UAAA,EAAE,gBAAgB;IAAQ,CAAA,GAChE,aACC,qBAAC,UAAD;KACE,WAAW,YAAY;KACvB,OAAO;MAAE,YAAY;MAAW,OAAO;KAAO;KAC9C,MAAK;KACL,SAAS;KAJX,UAAA,CAME,oBAAC,MAAD;MAAM,MAAM;MAAU,MAAM;KAAK,CAAA,GAChC,EAAE,gBAAgB,CACb;IAEN,CAAA,CAAA;;EAEL;;AAET,CACF;AAEA,OAAO,cAAc"}

package/es/base-ui/QRCode/index.d.mts

@@ -0,0 +1,3 @@
+import { QRCodeErrorLevel, QRCodeProps, QRCodeStatus } from "./type.mjs";
+import QRCode from "./QRCode.mjs";
+export { type QRCodeErrorLevel, type QRCodeProps, type QRCodeStatus, QRCode as default };

package/es/base-ui/QRCode/qrPath.mjs

@@ -0,0 +1,16 @@
+//#region src/base-ui/QRCode/qrPath.ts
+const buildQrPath = (matrix, hole) => {
+	const count = matrix.length;
+	const from = Math.floor((count - hole) / 2);
+	const to = from + hole;
+	let path = "";
+	for (let y = 0; y < count; y++) for (let x = 0; x < count; x++) {
+		if (hole > 0 && x >= from && x < to && y >= from && y < to) continue;
+		if (matrix[y][x]) path += `M${x} ${y}h1v1h-1z`;
+	}
+	return path;
+};
+//#endregion
+export { buildQrPath };
+
+//# sourceMappingURL=qrPath.mjs.map

package/es/base-ui/QRCode/qrPath.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"qrPath.mjs","names":[],"sources":["../../../src/base-ui/QRCode/qrPath.ts"],"sourcesContent":["export const buildQrPath = (matrix: boolean[][], hole: number): string => {\n  const count = matrix.length;\n  const from = Math.floor((count - hole) / 2);\n  const to = from + hole;\n  let path = '';\n  for (let y = 0; y < count; y++) {\n    for (let x = 0; x < count; x++) {\n      if (hole > 0 && x >= from && x < to && y >= from && y < to) continue;\n      if (matrix[y][x]) path += `M${x} ${y}h1v1h-1z`;\n    }\n  }\n  return path;\n};\n"],"mappings":";AAAA,MAAa,eAAe,QAAqB,SAAyB;CACxE,MAAM,QAAQ,OAAO;CACrB,MAAM,OAAO,KAAK,OAAO,QAAQ,QAAQ,CAAC;CAC1C,MAAM,KAAK,OAAO;CAClB,IAAI,OAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KACzB,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,KAAK;EAC9B,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,KAAK,QAAQ,IAAI,IAAI;EAC5D,IAAI,OAAO,EAAE,CAAC,IAAI,QAAQ,IAAI,EAAE,GAAG,EAAE;CACvC;CAEF,OAAO;AACT"}

package/es/base-ui/QRCode/style.mjs

@@ -0,0 +1,52 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/QRCode/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	bordered: css`
+    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};
+  `,
+	icon: css`
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 50%;
+
+    box-shadow: 0 0 0 4px #fff;
+  `,
+	overlay: css`
+    position: absolute;
+    inset: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: center;
+    justify-content: center;
+
+    border-radius: 16px;
+
+    color: #080808;
+
+    background: rgb(255 255 255 / 95%);
+  `,
+	overlayTitle: css`
+    font-size: 17px;
+    font-weight: 600;
+  `,
+	root: css`
+    position: relative;
+    display: inline-flex;
+    padding: 16px;
+    border-radius: 16px;
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/QRCode/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/QRCode/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  bordered: css`\n    box-shadow: inset 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  icon: css`\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 50%;\n\n    box-shadow: 0 0 0 4px #fff;\n  `,\n  overlay: css`\n    position: absolute;\n    inset: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    align-items: center;\n    justify-content: center;\n\n    border-radius: 16px;\n\n    color: #080808;\n\n    background: rgb(255 255 255 / 95%);\n  `,\n  overlayTitle: css`\n    font-size: 17px;\n    font-weight: 600;\n  `,\n  root: css`\n    position: relative;\n    display: inline-flex;\n    padding: 16px;\n    border-radius: 16px;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;kCACmB,OAAO,qBAAqB;;CAE5D,MAAM,GAAG;;;;;;;;;;;;;;;CAeT,SAAS,GAAG;;;;;;;;;;;;;;;;CAgBZ,cAAc,GAAG;;;;CAIjB,MAAM,GAAG;;;;;;AAMX,EAAE"}

package/es/base-ui/QRCode/type.d.mts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode, Ref } from "react";
+//#region src/base-ui/QRCode/type.d.ts
+type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H';
+type QRCodeStatus = 'active' | 'loading' | 'expired';
+interface QRCodeProps extends Omit<ComponentProps<'div'>, 'children'> {
+  bgColor?: string;
+  bordered?: boolean;
+  color?: string;
+  errorLevel?: QRCodeErrorLevel;
+  icon?: ReactNode;
+  onRefresh?: () => void;
+  ref?: Ref<HTMLDivElement>;
+  size?: number;
+  status?: QRCodeStatus;
+  value: string;
+}
+//#endregion
+export { QRCodeErrorLevel, QRCodeProps, QRCodeStatus };
+//# sourceMappingURL=type.d.mts.map

package/es/base-ui/Rate/Rate.d.mts

@@ -0,0 +1,6 @@
+import { RateProps } from "./type.mjs";
+//#region src/base-ui/Rate/Rate.d.ts
+declare const Rate: import("react").NamedExoticComponent<RateProps>;
+//#endregion
+export { Rate as default };
+//# sourceMappingURL=Rate.d.mts.map

package/es/base-ui/Rate/Rate.mjs

@@ -0,0 +1,111 @@
+"use client";
+import { styles } from "./style.mjs";
+import { memo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cssVar, cx } from "antd-style";
+import useMergeState from "use-merge-value";
+import { Star } from "lucide-react";
+//#region src/base-ui/Rate/Rate.tsx
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const formatValue = (value) => String(Math.round(value * 100) / 100);
+const Rate = memo(({ allowHalf = false, character, className, color = cssVar.colorWarning, count = 5, defaultValue = 0, disabled = false, gap, onChange, onKeyDown, onPointerLeave, readOnly = false, size = 20, style, value, ...rest }) => {
+	const [mergedValue, setMergedValue] = useMergeState(defaultValue, {
+		onChange,
+		value
+	});
+	const [hoverValue, setHoverValue] = useState(null);
+	const interactive = !readOnly && !disabled;
+	const step = allowHalf ? .5 : 1;
+	const displayValue = clamp(hoverValue ?? mergedValue, 0, count);
+	const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;
+	const icon = character ?? /* @__PURE__ */ jsx(Star, {
+		fill: "currentColor",
+		size
+	});
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (!interactive || event.defaultPrevented) return;
+		const next = {
+			ArrowDown: mergedValue - step,
+			ArrowLeft: mergedValue - step,
+			ArrowRight: mergedValue + step,
+			ArrowUp: mergedValue + step,
+			End: count,
+			Home: 0
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		setMergedValue(clamp(Math.round(next / step) * step, 0, count));
+	};
+	const a11yProps = readOnly ? {
+		"aria-label": label,
+		"role": "img"
+	} : {
+		"aria-disabled": disabled || void 0,
+		"aria-valuemax": count,
+		"aria-valuemin": 0,
+		"aria-valuenow": mergedValue,
+		"aria-valuetext": label,
+		"role": "slider",
+		"tabIndex": disabled ? -1 : 0
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(styles.root, className),
+		style: {
+			gap: gap ?? size / 2,
+			...style
+		},
+		onKeyDown: handleKeyDown,
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHoverValue(null);
+		},
+		...a11yProps,
+		...rest,
+		children: Array.from({ length: count }, (_, index) => {
+			const fill = clamp(displayValue - index, 0, 1);
+			const targets = allowHalf ? [index + .5, index + 1] : [index + 1];
+			return /* @__PURE__ */ jsxs("span", {
+				"aria-hidden": "true",
+				className: styles.star,
+				"data-index": index,
+				style: {
+					fontSize: size,
+					height: size
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: cx(styles.icon, styles.empty),
+						style: { minWidth: size },
+						children: icon
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: styles.fill,
+						style: {
+							color,
+							width: `${fill * 100}%`
+						},
+						children: /* @__PURE__ */ jsx("span", {
+							className: styles.icon,
+							style: { minWidth: size },
+							children: icon
+						})
+					}),
+					interactive && targets.map((target) => /* @__PURE__ */ jsx("span", {
+						className: styles.half,
+						"data-half": target % 1 === 0 && allowHalf ? "end" : "start",
+						"data-value": target,
+						style: allowHalf ? void 0 : { width: "100%" },
+						onClick: () => setMergedValue(target),
+						onPointerEnter: () => setHoverValue(target)
+					}, target))
+				]
+			}, index);
+		})
+	});
+});
+Rate.displayName = "Rate";
+//#endregion
+export { Rate as default };
+
+//# sourceMappingURL=Rate.mjs.map

package/es/base-ui/Rate/Rate.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/Rate/Rate.tsx"],"sourcesContent":["'use client';\n\nimport { cssVar, cx } from 'antd-style';\nimport { Star } from 'lucide-react';\nimport { type KeyboardEvent, memo, useState } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport { styles } from './style';\nimport type { RateProps } from './type';\n\nconst clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst formatValue = (value: number) => String(Math.round(value * 100) / 100);\n\nconst Rate = memo<RateProps>(\n  ({\n    allowHalf = false,\n    character,\n    className,\n    color = cssVar.colorWarning,\n    count = 5,\n    defaultValue = 0,\n    disabled = false,\n    gap,\n    onChange,\n    onKeyDown,\n    onPointerLeave,\n    readOnly = false,\n    size = 20,\n    style,\n    value,\n    ...rest\n  }) => {\n    const [mergedValue, setMergedValue] = useControlledState(defaultValue, { onChange, value });\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n\n    const interactive = !readOnly && !disabled;\n    const step = allowHalf ? 0.5 : 1;\n    const displayValue = clamp(hoverValue ?? mergedValue, 0, count);\n    const label = `${formatValue(clamp(mergedValue, 0, count))} out of ${count}`;\n    const icon = character ?? <Star fill=\"currentColor\" size={size} />;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (!interactive || event.defaultPrevented) return;\n\n      const next = {\n        ArrowDown: mergedValue - step,\n        ArrowLeft: mergedValue - step,\n        ArrowRight: mergedValue + step,\n        ArrowUp: mergedValue + step,\n        End: count,\n        Home: 0,\n      }[event.key];\n      if (next === undefined) return;\n\n      event.preventDefault();\n      setMergedValue(clamp(Math.round(next / step) * step, 0, count));\n    };\n\n    const a11yProps = readOnly\n      ? { 'aria-label': label, 'role': 'img' }\n      : {\n          'aria-disabled': disabled || undefined,\n          'aria-valuemax': count,\n          'aria-valuemin': 0,\n          'aria-valuenow': mergedValue,\n          'aria-valuetext': label,\n          'role': 'slider',\n          'tabIndex': disabled ? -1 : 0,\n        };\n\n    return (\n      <div\n        className={cx(styles.root, className)}\n        style={{ gap: gap ?? size / 2, ...style }}\n        onKeyDown={handleKeyDown}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHoverValue(null);\n        }}\n        {...a11yProps}\n        {...rest}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fill = clamp(displayValue - index, 0, 1);\n          const targets = allowHalf ? [index + 0.5, index + 1] : [index + 1];\n\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={styles.star}\n              data-index={index}\n              key={index}\n              style={{ fontSize: size, height: size }}\n            >\n              <span className={cx(styles.icon, styles.empty)} style={{ minWidth: size }}>\n                {icon}\n              </span>\n              <span className={styles.fill} style={{ color, width: `${fill * 100}%` }}>\n                <span className={styles.icon} style={{ minWidth: size }}>\n                  {icon}\n                </span>\n              </span>\n              {interactive &&\n                targets.map((target) => (\n                  <span\n                    className={styles.half}\n                    data-half={target % 1 === 0 && allowHalf ? 'end' : 'start'}\n                    data-value={target}\n                    key={target}\n                    style={allowHalf ? undefined : { width: '100%' }}\n                    onClick={() => setMergedValue(target)}\n                    onPointerEnter={() => setHoverValue(target)}\n                  />\n                ))}\n            </span>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nRate.displayName = 'Rate';\n\nexport default Rate;\n"],"mappings":"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"}

package/es/base-ui/Rate/index.d.mts

@@ -0,0 +1,3 @@
+import { RateProps } from "./type.mjs";
+import Rate from "./Rate.mjs";
+export { type RateProps, Rate as default };

package/es/base-ui/Rate/style.mjs

@@ -0,0 +1,81 @@
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/Rate/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	empty: css`
+    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */
+    color: ${cssVar.colorText};
+    opacity: 0.12;
+  `,
+	fill: css`
+    pointer-events: none;
+
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+
+    overflow: hidden;
+    display: flex;
+  `,
+	half: css`
+    position: absolute;
+    inset-block: 0;
+    width: 50%;
+
+    &[data-half='start'] {
+      inset-inline-start: 0;
+    }
+
+    &[data-half='end'] {
+      inset-inline-end: 0;
+    }
+  `,
+	icon: css`
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+  `,
+	root: css`
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+    outline: none;
+
+    &[role='slider'] {
+      cursor: pointer;
+    }
+
+    &[role='slider']:focus-visible {
+      border-radius: 4px;
+      outline: 2px solid ${cssVar.colorText};
+      outline-offset: 2px;
+    }
+
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `,
+	star: css`
+    position: relative;
+
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+
+    transition: transform 0.15s ease;
+
+    [role='slider']:not([aria-disabled='true']) > &:hover {
+      transform: scale(1.1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/Rate/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Rate/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  empty: css`\n    /* Group opacity instead of the translucent colorFill so the star's stroke and fill don't double up where they overlap. */\n    color: ${cssVar.colorText};\n    opacity: 0.12;\n  `,\n  fill: css`\n    pointer-events: none;\n\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n\n    overflow: hidden;\n    display: flex;\n  `,\n  half: css`\n    position: absolute;\n    inset-block: 0;\n    width: 50%;\n\n    &[data-half='start'] {\n      inset-inline-start: 0;\n    }\n\n    &[data-half='end'] {\n      inset-inline-end: 0;\n    }\n  `,\n  icon: css`\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n  `,\n  root: css`\n    display: inline-flex;\n    align-items: center;\n    line-height: 1;\n    outline: none;\n\n    &[role='slider'] {\n      cursor: pointer;\n    }\n\n    &[role='slider']:focus-visible {\n      border-radius: 4px;\n      outline: 2px solid ${cssVar.colorText};\n      outline-offset: 2px;\n    }\n\n    &[aria-disabled='true'] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n  star: css`\n    position: relative;\n\n    display: inline-flex;\n    flex: none;\n    align-items: center;\n    justify-content: center;\n\n    transition: transform 0.15s ease;\n\n    [role='slider']:not([aria-disabled='true']) > &:hover {\n      transform: scale(1.1);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;aAEC,OAAO,UAAU;;;CAG5B,MAAM,GAAG;;;;;;;;;;CAUT,MAAM,GAAG;;;;;;;;;;;;;CAaT,MAAM,GAAG;;;;;;CAMT,MAAM,GAAG;;;;;;;;;;;;2BAYgB,OAAO,UAAU;;;;;;;;;CAS1C,MAAM,GAAG;;;;;;;;;;;;;;;;;;AAkBX,EAAE"}