@lobehub/ui 5.57.2 → 6.0.0-beta.1

package/es/Popover/useMergedPopoverProps.mjs

@@ -0,0 +1,95 @@
+"use client";
+import { PopoverGroupPropsContext } from "./groupContext.mjs";
+import { useContext, useMemo } from "react";
+//#region src/Popover/useMergedPopoverProps.ts
+const useMergedPopoverProps = (props) => {
+	const sharedProps = useContext(PopoverGroupPropsContext);
+	const { arrow, trigger, placement, className, classNames, styles: styleProps, onOpenChange, content, closeDelay, disabled, getPopupContainer, mouseEnterDelay, mouseLeaveDelay, nativeButton, openDelay, zIndex, positionerProps, triggerProps, popupProps, backdropProps } = props;
+	const mergedClassName = useMemo(() => {
+		if (!sharedProps?.className && !className) return void 0;
+		return [sharedProps?.className, className].filter(Boolean).join(" ");
+	}, [className, sharedProps?.className]);
+	const mergedClassNames = useMemo(() => {
+		if (!sharedProps?.classNames && !classNames) return void 0;
+		return {
+			...sharedProps?.classNames,
+			...classNames
+		};
+	}, [classNames, sharedProps?.classNames]);
+	const mergedStyles = useMemo(() => {
+		if (!sharedProps?.styles && !styleProps) return void 0;
+		return {
+			...sharedProps?.styles,
+			...styleProps
+		};
+	}, [sharedProps?.styles, styleProps]);
+	const mergedOnOpenChange = useMemo(() => {
+		if (!sharedProps?.onOpenChange && !onOpenChange) return void 0;
+		return (open) => {
+			sharedProps?.onOpenChange?.(open);
+			onOpenChange?.(open);
+		};
+	}, [onOpenChange, sharedProps?.onOpenChange]);
+	return useMemo(() => ({
+		arrow: arrow ?? sharedProps?.arrow ?? false,
+		backdropProps: backdropProps ?? sharedProps?.backdropProps,
+		className: mergedClassName,
+		classNames: mergedClassNames,
+		closeDelay: closeDelay ?? sharedProps?.closeDelay,
+		content,
+		disabled: disabled ?? sharedProps?.disabled,
+		getPopupContainer: getPopupContainer ?? sharedProps?.getPopupContainer,
+		mouseEnterDelay: mouseEnterDelay ?? sharedProps?.mouseEnterDelay,
+		mouseLeaveDelay: mouseLeaveDelay ?? sharedProps?.mouseLeaveDelay,
+		nativeButton: nativeButton ?? sharedProps?.nativeButton,
+		onOpenChange: mergedOnOpenChange,
+		openDelay: openDelay ?? sharedProps?.openDelay,
+		placement: placement ?? sharedProps?.placement ?? "top",
+		popupProps: popupProps ?? sharedProps?.popupProps,
+		positionerProps: positionerProps ?? sharedProps?.positionerProps,
+		styles: mergedStyles,
+		trigger: trigger ?? sharedProps?.trigger ?? "hover",
+		triggerProps: triggerProps ?? sharedProps?.triggerProps,
+		zIndex: zIndex ?? sharedProps?.zIndex
+	}), [
+		arrow,
+		backdropProps,
+		closeDelay,
+		content,
+		disabled,
+		getPopupContainer,
+		mergedClassName,
+		mergedClassNames,
+		mergedOnOpenChange,
+		mergedStyles,
+		mouseEnterDelay,
+		mouseLeaveDelay,
+		nativeButton,
+		openDelay,
+		placement,
+		popupProps,
+		positionerProps,
+		sharedProps?.arrow,
+		sharedProps?.backdropProps,
+		sharedProps?.closeDelay,
+		sharedProps?.disabled,
+		sharedProps?.getPopupContainer,
+		sharedProps?.mouseEnterDelay,
+		sharedProps?.mouseLeaveDelay,
+		sharedProps?.nativeButton,
+		sharedProps?.openDelay,
+		sharedProps?.placement,
+		sharedProps?.popupProps,
+		sharedProps?.positionerProps,
+		sharedProps?.trigger,
+		sharedProps?.triggerProps,
+		sharedProps?.zIndex,
+		trigger,
+		triggerProps,
+		zIndex
+	]);
+};
+//#endregion
+export { useMergedPopoverProps };
+
+//# sourceMappingURL=useMergedPopoverProps.mjs.map

package/es/Popover/useMergedPopoverProps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedPopoverProps.mjs","names":[],"sources":["../../src/Popover/useMergedPopoverProps.ts"],"sourcesContent":["'use client';\n\nimport { useContext, useMemo } from 'react';\n\nimport { type PopoverGroupItem, PopoverGroupPropsContext } from './groupContext';\nimport type { PopoverProps } from './type';\n\nexport const useMergedPopoverProps = (props: Partial<PopoverProps>): PopoverGroupItem => {\n  const sharedProps = useContext(PopoverGroupPropsContext);\n\n  const {\n    arrow,\n    trigger,\n    placement,\n    className,\n    classNames,\n    styles: styleProps,\n    onOpenChange,\n    content,\n    closeDelay,\n    disabled,\n    getPopupContainer,\n    mouseEnterDelay,\n    mouseLeaveDelay,\n    nativeButton,\n    openDelay,\n    zIndex,\n    positionerProps,\n    triggerProps,\n    popupProps,\n    backdropProps,\n  } = props;\n\n  const mergedClassName = useMemo(() => {\n    if (!sharedProps?.className && !className) return undefined;\n    return [sharedProps?.className, className].filter(Boolean).join(' ');\n  }, [className, sharedProps?.className]);\n\n  const mergedClassNames = useMemo(() => {\n    if (!sharedProps?.classNames && !classNames) return undefined;\n    return { ...sharedProps?.classNames, ...classNames };\n  }, [classNames, sharedProps?.classNames]);\n\n  const mergedStyles = useMemo(() => {\n    if (!sharedProps?.styles && !styleProps) return undefined;\n    return { ...sharedProps?.styles, ...styleProps };\n  }, [sharedProps?.styles, styleProps]);\n\n  const mergedOnOpenChange = useMemo(() => {\n    if (!sharedProps?.onOpenChange && !onOpenChange) return undefined;\n    return (open: boolean) => {\n      sharedProps?.onOpenChange?.(open);\n      onOpenChange?.(open);\n    };\n  }, [onOpenChange, sharedProps?.onOpenChange]);\n\n  const item: PopoverGroupItem = useMemo(\n    () => ({\n      arrow: arrow ?? sharedProps?.arrow ?? false,\n      backdropProps: backdropProps ?? sharedProps?.backdropProps,\n      className: mergedClassName,\n      classNames: mergedClassNames,\n      closeDelay: closeDelay ?? sharedProps?.closeDelay,\n      content,\n      disabled: disabled ?? sharedProps?.disabled,\n      getPopupContainer: getPopupContainer ?? sharedProps?.getPopupContainer,\n      mouseEnterDelay: mouseEnterDelay ?? sharedProps?.mouseEnterDelay,\n      mouseLeaveDelay: mouseLeaveDelay ?? sharedProps?.mouseLeaveDelay,\n      nativeButton: nativeButton ?? sharedProps?.nativeButton,\n      onOpenChange: mergedOnOpenChange,\n      openDelay: openDelay ?? sharedProps?.openDelay,\n      placement: placement ?? sharedProps?.placement ?? 'top',\n      popupProps: popupProps ?? sharedProps?.popupProps,\n      positionerProps: positionerProps ?? sharedProps?.positionerProps,\n      styles: mergedStyles,\n      trigger: trigger ?? sharedProps?.trigger ?? 'hover',\n      triggerProps: triggerProps ?? sharedProps?.triggerProps,\n      zIndex: zIndex ?? sharedProps?.zIndex,\n    }),\n    [\n      arrow,\n      backdropProps,\n      closeDelay,\n      content,\n      disabled,\n      getPopupContainer,\n      mergedClassName,\n      mergedClassNames,\n      mergedOnOpenChange,\n      mergedStyles,\n      mouseEnterDelay,\n      mouseLeaveDelay,\n      nativeButton,\n      openDelay,\n      placement,\n      popupProps,\n      positionerProps,\n      sharedProps?.arrow,\n      sharedProps?.backdropProps,\n      sharedProps?.closeDelay,\n      sharedProps?.disabled,\n      sharedProps?.getPopupContainer,\n      sharedProps?.mouseEnterDelay,\n      sharedProps?.mouseLeaveDelay,\n      sharedProps?.nativeButton,\n      sharedProps?.openDelay,\n      sharedProps?.placement,\n      sharedProps?.popupProps,\n      sharedProps?.positionerProps,\n      sharedProps?.trigger,\n      sharedProps?.triggerProps,\n      sharedProps?.zIndex,\n      trigger,\n      triggerProps,\n      zIndex,\n    ],\n  );\n\n  return item;\n};\n"],"mappings":";;;;AAOA,MAAa,yBAAyB,UAAmD;CACvF,MAAM,cAAc,WAAW,wBAAwB;CAEvD,MAAM,EACJ,OACA,SACA,WACA,WACA,YACA,QAAQ,YACR,cACA,SACA,YACA,UACA,mBACA,iBACA,iBACA,cACA,WACA,QACA,iBACA,cACA,YACA,kBACE;CAEJ,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,aAAa,aAAa,CAAC,WAAW,OAAO,KAAA;EAClD,OAAO,CAAC,aAAa,WAAW,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACrE,GAAG,CAAC,WAAW,aAAa,SAAS,CAAC;CAEtC,MAAM,mBAAmB,cAAc;EACrC,IAAI,CAAC,aAAa,cAAc,CAAC,YAAY,OAAO,KAAA;EACpD,OAAO;GAAE,GAAG,aAAa;GAAY,GAAG;EAAW;CACrD,GAAG,CAAC,YAAY,aAAa,UAAU,CAAC;CAExC,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,aAAa,UAAU,CAAC,YAAY,OAAO,KAAA;EAChD,OAAO;GAAE,GAAG,aAAa;GAAQ,GAAG;EAAW;CACjD,GAAG,CAAC,aAAa,QAAQ,UAAU,CAAC;CAEpC,MAAM,qBAAqB,cAAc;EACvC,IAAI,CAAC,aAAa,gBAAgB,CAAC,cAAc,OAAO,KAAA;EACxD,QAAQ,SAAkB;GACxB,aAAa,eAAe,IAAI;GAChC,eAAe,IAAI;EACrB;CACF,GAAG,CAAC,cAAc,aAAa,YAAY,CAAC;CAgE5C,OA9D+B,eACtB;EACL,OAAO,SAAS,aAAa,SAAS;EACtC,eAAe,iBAAiB,aAAa;EAC7C,WAAW;EACX,YAAY;EACZ,YAAY,cAAc,aAAa;EACvC;EACA,UAAU,YAAY,aAAa;EACnC,mBAAmB,qBAAqB,aAAa;EACrD,iBAAiB,mBAAmB,aAAa;EACjD,iBAAiB,mBAAmB,aAAa;EACjD,cAAc,gBAAgB,aAAa;EAC3C,cAAc;EACd,WAAW,aAAa,aAAa;EACrC,WAAW,aAAa,aAAa,aAAa;EAClD,YAAY,cAAc,aAAa;EACvC,iBAAiB,mBAAmB,aAAa;EACjD,QAAQ;EACR,SAAS,WAAW,aAAa,WAAW;EAC5C,cAAc,gBAAgB,aAAa;EAC3C,QAAQ,UAAU,aAAa;CACjC,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb,aAAa;EACb;EACA;EACA;CACF,CAGQ;AACZ"}

package/es/Progress/Progress.d.mts

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

package/es/Progress/Progress.mjs

@@ -0,0 +1,175 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { styles } from "./style.mjs";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Check, X } from "lucide-react";
+//#region src/Progress/Progress.tsx
+const circleDiameterMap = {
+	large: 72,
+	middle: 40,
+	small: 20
+};
+const blockHeightMap = {
+	large: 12,
+	middle: 8,
+	small: 4
+};
+const circleStrokeMap = {
+	large: 4,
+	middle: 3,
+	small: 2
+};
+const trackHeightStyles = {
+	block: {
+		large: styles.blockLg,
+		middle: styles.blockMd,
+		small: styles.blockSm
+	},
+	line: {
+		large: styles.lineLg,
+		middle: styles.lineMd,
+		small: styles.lineSm
+	}
+};
+const statusColor = {
+	active: cssVar.colorInfo,
+	exception: cssVar.colorError,
+	success: cssVar.colorSuccess
+};
+const Progress = memo(({ className, format, label, percent, ref, segments = 20, showInfo = true, size = "middle", status = "normal", strokeColor, style, type = "line", variant = "line", ...rest }) => {
+	const clamped = Math.min(100, Math.max(0, percent));
+	const barColor = strokeColor ?? (status === "normal" ? cssVar.colorPrimary : statusColor[status]);
+	const info = useMemo(() => {
+		if (status === "success") return /* @__PURE__ */ jsx(Icon, {
+			icon: Check,
+			size: 14,
+			style: { color: barColor }
+		});
+		if (status === "exception") return /* @__PURE__ */ jsx(Icon, {
+			icon: X,
+			size: 14,
+			style: { color: barColor }
+		});
+		return format ? format(clamped) : `${clamped}%`;
+	}, [
+		status,
+		format,
+		clamped,
+		barColor
+	]);
+	const progressAria = {
+		"aria-valuemax": 100,
+		"aria-valuemin": 0,
+		"aria-valuenow": clamped,
+		"aria-valuetext": useMemo(() => {
+			if (!format) return void 0;
+			const value = format(clamped);
+			return typeof value === "string" || typeof value === "number" ? String(value) : void 0;
+		}, [format, clamped]),
+		"role": "progressbar"
+	};
+	if (type === "circle") {
+		const isPreset = typeof size === "string";
+		const diameter = isPreset ? circleDiameterMap[size] : size;
+		const stroke = isPreset ? circleStrokeMap[size] : Math.max(2, Math.round(diameter * 3 / 40));
+		const radius = diameter / 2 - stroke;
+		const circumference = 2 * Math.PI * radius;
+		const offset = circumference * (1 - clamped / 100);
+		return /* @__PURE__ */ jsxs("div", {
+			ref,
+			...styleProps([styles.circleRoot], className, style),
+			...progressAria,
+			...rest,
+			children: [/* @__PURE__ */ jsxs("svg", {
+				...stylex.props(styles.circleSvg),
+				height: diameter,
+				viewBox: `0 0 ${diameter} ${diameter}`,
+				width: diameter,
+				children: [/* @__PURE__ */ jsx("circle", {
+					...stylex.props(styles.circleTrack),
+					cx: diameter / 2,
+					cy: diameter / 2,
+					r: radius,
+					strokeWidth: stroke
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: diameter / 2,
+					cy: diameter / 2,
+					fill: "none",
+					r: radius,
+					stroke: barColor,
+					strokeDasharray: circumference,
+					strokeDashoffset: offset,
+					strokeLinecap: "round",
+					strokeWidth: stroke,
+					style: { transition: "stroke-dashoffset 0.3s" }
+				})]
+			}), showInfo && diameter >= 40 && /* @__PURE__ */ jsx("span", {
+				...styleProps([styles.circleInfo], void 0, { fontSize: Math.round(diameter * .15 + 6) }),
+				children: info
+			})]
+		});
+	}
+	const sizeStyle = typeof size === "number" ? { height: size } : void 0;
+	const heightStyle = (family) => typeof size === "number" ? void 0 : trackHeightStyles[family][size];
+	if (variant === "segments") {
+		const filled = Math.round(segments * clamped / 100);
+		return /* @__PURE__ */ jsxs("div", {
+			ref,
+			...styleProps([styles.rowRoot], className, style),
+			...progressAria,
+			...rest,
+			children: [/* @__PURE__ */ jsx("div", {
+				...styleProps([styles.segments, heightStyle("block")], void 0, sizeStyle),
+				children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx("span", { ...styleProps([styles.segment, index < filled && styles.segmentOn], void 0, index < filled ? { background: barColor } : void 0) }, index))
+			}), showInfo && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.rowInfo),
+				children: info
+			})]
+		});
+	}
+	if (variant === "inset") return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...styleProps([styles.rowRoot], className, style),
+		...progressAria,
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			...styleProps([styles.split, heightStyle("block")], void 0, sizeStyle),
+			children: [clamped > 0 && /* @__PURE__ */ jsx("span", { ...styleProps([styles.splitFill, status === "active" && styles.barActive], void 0, {
+				backgroundColor: barColor,
+				minWidth: typeof size === "number" ? size : blockHeightMap[size],
+				width: clamped === 100 ? "100%" : `calc((100% - 3px) * ${clamped / 100})`
+			}) }), clamped < 100 && /* @__PURE__ */ jsx("span", { ...stylex.props(styles.splitRest) })]
+		}), showInfo && /* @__PURE__ */ jsx("span", {
+			...stylex.props(styles.rowInfo),
+			children: info
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...styleProps([styles.lineRoot], className, style),
+		...progressAria,
+		...rest,
+		children: [(label || showInfo) && /* @__PURE__ */ jsxs("div", {
+			...stylex.props(styles.lineMeta),
+			children: [/* @__PURE__ */ jsx("span", { children: label }), showInfo && /* @__PURE__ */ jsx("span", {
+				...stylex.props(styles.lineValue),
+				children: info
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			...styleProps([styles.lineTrack, heightStyle("line")], void 0, sizeStyle),
+			children: /* @__PURE__ */ jsx("div", { ...styleProps([styles.bar, variant === "line" && status === "active" && styles.barActive], void 0, {
+				backgroundColor: barColor,
+				width: `${clamped}%`
+			}) })
+		})]
+	});
+});
+Progress.displayName = "Progress";
+//#endregion
+export { Progress as default };
+
+//# sourceMappingURL=Progress.mjs.map

package/es/Progress/Progress.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.mjs","names":[],"sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { Check, X } from 'lucide-react';\nimport { memo, useMemo } from 'react';\n\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } 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 trackHeightStyles = {\n  block: { large: styles.blockLg, middle: styles.blockMd, small: styles.blockSm },\n  line: { large: styles.lineLg, middle: styles.lineMd, small: styles.lineSm },\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          ref={ref}\n          {...styleProps([styles.circleRoot], className, style)}\n          {...progressAria}\n          {...rest}\n        >\n          <svg\n            {...stylex.props(styles.circleSvg)}\n            height={diameter}\n            viewBox={`0 0 ${diameter} ${diameter}`}\n            width={diameter}\n          >\n            <circle\n              {...stylex.props(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              {...styleProps([styles.circleInfo], undefined, {\n                fontSize: Math.round(diameter * 0.15 + 6),\n              })}\n            >\n              {info}\n            </span>\n          )}\n        </div>\n      );\n    }\n\n    const sizeStyle = typeof size === 'number' ? { height: size } : undefined;\n    const heightStyle = (family: 'line' | 'block') =>\n      typeof size === 'number' ? undefined : trackHeightStyles[family][size];\n\n    if (variant === 'segments') {\n      const filled = Math.round((segments * clamped) / 100);\n\n      return (\n        <div\n          ref={ref}\n          {...styleProps([styles.rowRoot], className, style)}\n          {...progressAria}\n          {...rest}\n        >\n          <div {...styleProps([styles.segments, heightStyle('block')], undefined, sizeStyle)}>\n            {Array.from({ length: segments }, (_, index) => (\n              <span\n                key={index}\n                {...styleProps(\n                  [styles.segment, index < filled && styles.segmentOn],\n                  undefined,\n                  index < filled ? { background: barColor } : undefined,\n                )}\n              />\n            ))}\n          </div>\n          {showInfo && <span {...stylex.props(styles.rowInfo)}>{info}</span>}\n        </div>\n      );\n    }\n\n    if (variant === 'inset') {\n      return (\n        <div\n          ref={ref}\n          {...styleProps([styles.rowRoot], className, style)}\n          {...progressAria}\n          {...rest}\n        >\n          <div {...styleProps([styles.split, heightStyle('block')], undefined, sizeStyle)}>\n            {clamped > 0 && (\n              <span\n                {...styleProps(\n                  [styles.splitFill, status === 'active' && styles.barActive],\n                  undefined,\n                  {\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            )}\n            {clamped < 100 && <span {...stylex.props(styles.splitRest)} />}\n          </div>\n          {showInfo && <span {...stylex.props(styles.rowInfo)}>{info}</span>}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...styleProps([styles.lineRoot], className, style)}\n        {...progressAria}\n        {...rest}\n      >\n        {(label || showInfo) && (\n          <div {...stylex.props(styles.lineMeta)}>\n            <span>{label}</span>\n            {showInfo && <span {...stylex.props(styles.lineValue)}>{info}</span>}\n          </div>\n        )}\n        <div {...styleProps([styles.lineTrack, heightStyle('line')], undefined, sizeStyle)}>\n          <div\n            {...styleProps(\n              [styles.bar, variant === 'line' && status === 'active' && styles.barActive],\n              undefined,\n              { backgroundColor: barColor, width: `${clamped}%` },\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/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Progress/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Progress/index.mjs

@@ -0,0 +1 @@
+export { default } from "./Progress.mjs";

package/es/Progress/style.mjs

@@ -0,0 +1,151 @@
+//#region src/Progress/style.ts
+const styles = {
+	bar: {
+		kaIpWk: "lb1e6avla",
+		kmkexE: "lb15cnf4b",
+		kZKoxP: "lb5yr21d",
+		$$css: true
+	},
+	barActive: {
+		k44tkh: "lb1m9vv7p",
+		ko0y90: "lba4qsjk",
+		kKVMdj: "lb10skslg lb1aquc0h",
+		kyAemX: "lb1esw782",
+		kKwaWg: "lb7hpmi5",
+		kgSjnq: "lbuy6r0v",
+		$$css: true
+	},
+	blockLg: {
+		kZKoxP: "lb1kpxq89",
+		$$css: true
+	},
+	blockMd: {
+		kZKoxP: "lbdk7pt",
+		$$css: true
+	},
+	blockSm: {
+		kZKoxP: "lbqu0tyb",
+		$$css: true
+	},
+	circleInfo: {
+		kMwMTN: "lb66ogz0",
+		kcqcaj: "lbss6m8b",
+		kLWn49: "lbo5v014",
+		kVAEAm: "lb10l6tqk",
+		khDVqt: "lbuxw1ft",
+		$$css: true
+	},
+	circleRoot: {
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		kVAEAm: "lb1n2onr6",
+		$$css: true
+	},
+	circleSvg: {
+		k4XH5M: "lbwsa1kb",
+		$$css: true
+	},
+	circleTrack: {
+		kDwRjp: "lbbh8q5q",
+		kjVXCG: "lb12pnydc",
+		$$css: true
+	},
+	lineLg: {
+		kZKoxP: "lbols6we",
+		$$css: true
+	},
+	lineMd: {
+		kZKoxP: "lbqu0tyb",
+		$$css: true
+	},
+	lineMeta: {
+		kOIVth: "lb1v2ro7d",
+		kGNEyG: "lb1pha0wt",
+		kMwMTN: "lbc77et8",
+		k1xSpc: "lb78zum5",
+		kGuDYH: "lbxobqjj",
+		kjj79g: "lb1qughib",
+		$$css: true
+	},
+	lineRoot: {
+		kOIVth: "lb17d4w8g",
+		k1xSpc: "lb78zum5",
+		kXwgrk: "lbdt5ytf",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	lineSm: {
+		kZKoxP: "lb36qwtl",
+		$$css: true
+	},
+	lineTrack: {
+		kaIpWk: "lb1e6avla",
+		kVQacm: "lbb3r6kr",
+		kWkggS: "lbaljia1",
+		$$css: true
+	},
+	lineValue: {
+		kMwMTN: "lb66ogz0",
+		kMv6JI: "lb2xbw48",
+		kcqcaj: "lbss6m8b",
+		$$css: true
+	},
+	rowInfo: {
+		kMwMTN: "lbc77et8",
+		kMv6JI: "lb2xbw48",
+		kGuDYH: "lbxobqjj",
+		kcqcaj: "lbss6m8b",
+		k9WMMc: "lbp4054r",
+		k7Eaqz: "lbdb3xwm",
+		$$css: true
+	},
+	rowRoot: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb883omv",
+		kGNEyG: "lb6s0dn4",
+		k1xSpc: "lb78zum5",
+		kzqmXN: "lbh8yej3",
+		$$css: true
+	},
+	segment: {
+		kaIpWk: "lb1nj7uno",
+		kUk6DE: "lb98rzlu",
+		kWkggS: "lbaljia1",
+		$$css: true
+	},
+	segmentOn: {
+		kWkggS: "lb1hsafae",
+		$$css: true
+	},
+	segments: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb195vfkc",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	split: {
+		kUk6DE: "lb98rzlu",
+		kOIVth: "lb1ed6fcf",
+		k1xSpc: "lb78zum5",
+		k7Eaqz: "lbeuugli",
+		$$css: true
+	},
+	splitFill: {
+		kaIpWk: "lb1e6avla",
+		kUk6DE: "lb1okw0bk",
+		kmkexE: "lb15cnf4b",
+		$$css: true
+	},
+	splitRest: {
+		kaIpWk: "lb1e6avla",
+		kUk6DE: "lb98rzlu",
+		kWkggS: "lbjjy28o",
+		$$css: true
+	}
+};
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/Progress/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Progress/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst shimmer = stylex.keyframes({\n  from: { backgroundPosition: '-80px 0' },\n  to: { backgroundPosition: '200px 0' },\n});\n\nexport const styles = stylex.create({\n  bar: {\n    borderRadius: 999,\n    transition: 'width 0.3s',\n    height: '100%',\n  },\n  barActive: {\n    animationDuration: '1.2s',\n    animationIterationCount: 'infinite',\n    animationName: { 'default': shimmer, '@media (prefers-reduced-motion: reduce)': 'none' },\n    animationTimingFunction: 'linear',\n    backgroundImage: `linear-gradient(90deg, transparent, color-mix(in srgb, ${cssVar.colorWhite} 35%, transparent), transparent)`,\n    backgroundSize: '80px 100%',\n  },\n  blockLg: {\n    height: 12,\n  },\n  blockMd: {\n    height: 8,\n  },\n  blockSm: {\n    height: 4,\n  },\n  circleInfo: {\n    color: cssVar.colorText,\n    fontVariantNumeric: 'tabular-nums',\n    lineHeight: 1,\n    position: 'absolute',\n    whiteSpace: 'nowrap',\n  },\n  circleRoot: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    position: 'relative',\n  },\n  circleSvg: {\n    rotate: '-90deg',\n  },\n  circleTrack: {\n    fill: 'none',\n    stroke: cssVar.colorFillTertiary,\n  },\n  lineLg: {\n    height: 6,\n  },\n  lineMd: {\n    height: 4,\n  },\n  lineMeta: {\n    gap: 12,\n    alignItems: 'baseline',\n    color: cssVar.colorTextSecondary,\n    display: 'flex',\n    fontSize: cssVar.fontSizeSM,\n    justifyContent: 'space-between',\n  },\n  lineRoot: {\n    gap: 6,\n    display: 'flex',\n    flexDirection: 'column',\n    width: '100%',\n  },\n  lineSm: {\n    height: 2,\n  },\n  lineTrack: {\n    borderRadius: 999,\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorFillTertiary,\n  },\n  lineValue: {\n    color: cssVar.colorText,\n    fontFamily: cssVar.fontFamilyCode,\n    fontVariantNumeric: 'tabular-nums',\n  },\n  rowInfo: {\n    color: cssVar.colorTextSecondary,\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: cssVar.fontSizeSM,\n    fontVariantNumeric: 'tabular-nums',\n    textAlign: 'end',\n    minWidth: '3.5ch',\n  },\n  rowRoot: {\n    flex: '1',\n    gap: 10,\n    alignItems: 'center',\n    display: 'flex',\n    width: '100%',\n  },\n  segment: {\n    borderRadius: 1,\n    flex: '1',\n    backgroundColor: cssVar.colorFillTertiary,\n  },\n  segmentOn: {\n    backgroundColor: cssVar.colorPrimary,\n  },\n  segments: {\n    flex: '1',\n    gap: 2,\n    display: 'flex',\n    minWidth: 0,\n  },\n  split: {\n    flex: '1',\n    gap: 3,\n    display: 'flex',\n    minWidth: 0,\n  },\n  splitFill: {\n    borderRadius: 999,\n    flex: 'none',\n    transition: 'width 0.3s',\n  },\n  splitRest: {\n    borderRadius: 999,\n    flex: '1',\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n});\n"],"mappings":";AAIA,MAAa,SAAS;CACpB,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/Progress/type.d.mts

@@ -0,0 +1,23 @@
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/Progress/type.d.ts
+export type ProgressType = 'line' | 'circle';
+export type ProgressVariant = 'line' | 'segments' | 'inset';
+export type ProgressStatus = 'normal' | 'active' | 'success' | 'exception';
+export type ProgressSize = 'small' | 'middle' | 'large' | number;
+export interface ProgressProps extends Omit<ComponentProps<'div'>, 'children'> {
+  className?: string;
+  format?: (percent: number) => ReactNode;
+  label?: ReactNode;
+  percent: number;
+  ref?: Ref<HTMLDivElement>;
+  segments?: number;
+  showInfo?: boolean;
+  size?: ProgressSize;
+  status?: ProgressStatus;
+  strokeColor?: string;
+  style?: CSSProperties;
+  type?: ProgressType;
+  variant?: ProgressVariant;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/QRCode/QRCode.d.mts

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

package/es/QRCode/QRCode.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { styleProps } from "../styles/stylex/props.mjs";
+import { focusRing } from "../styles/stylex/focusRing.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { useTranslation } from "../i18n/useTranslation.mjs";
+import Spin from "../Spin/Spin.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 * as stylex from "@stylexjs/stylex";
+import { RotateCw } from "lucide-react";
+import { encode } from "uqr";
+//#region src/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", {
+		ref,
+		...styleProps([styles.root, bordered && styles.bordered], className, {
+			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", {
+				...stylex.props(styles.icon),
+				style: {
+					height: size * ICON_RATIO,
+					width: size * ICON_RATIO
+				},
+				children: icon
+			}),
+			status === "loading" && /* @__PURE__ */ jsx("span", {
+				"aria-label": t("qrCode.loading"),
+				...stylex.props(styles.overlay),
+				role: "status",
+				children: /* @__PURE__ */ jsx(Spin, { style: { color: "#666" } })
+			}),
+			status === "expired" && /* @__PURE__ */ jsxs("span", {
+				...stylex.props(styles.overlay),
+				children: [/* @__PURE__ */ jsx("span", {
+					...stylex.props(styles.overlayTitle),
+					children: t("qrCode.expired")
+				}), onRefresh && /* @__PURE__ */ jsxs("button", {
+					...stylex.props(focusRing.info, styles.refresh),
+					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/QRCode/QRCode.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QRCode.mjs","names":["qrCodeMessages"],"sources":["../../src/QRCode/QRCode.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { RotateCw } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { encode } from 'uqr';\n\nimport qrCodeMessages from '@/i18n/resources/en/qrCode';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Spin from '@/Spin';\nimport { focusRing } from '@/styles/stylex/focusRing';\nimport { styleProps } from '@/styles/stylex/props';\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        ref={ref}\n        {...styleProps([styles.root, bordered && styles.bordered], className, {\n          background: bgColor,\n          ...style,\n        })}\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            {...stylex.props(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')} {...stylex.props(styles.overlay)} role=\"status\">\n            <Spin style={{ color: '#666' }} />\n          </span>\n        )}\n        {status === 'expired' && (\n          <span {...stylex.props(styles.overlay)}>\n            <span {...stylex.props(styles.overlayTitle)}>{t('qrCode.expired')}</span>\n            {onRefresh && (\n              <button\n                {...stylex.props(focusRing.info, styles.refresh)}\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":";;;;;;;;;;;;;;;AAeA,MAAM,aAAa;AACnB,MAAM,SAAS,MAAmB,EAChC,UAAU,QACV,WAAW,MACX,WACA,QAAQ,QACR,aAAa,KACb,MACA,WACA,KACA,OAAO,KACP,SAAS,UACT,OACA,OACA,GAAG,WACC;CACJ,MAAM,EACJ,MACE,eAAeA,cAAc;CACjC,MAAM,EACJ,OACA,SACE,cAAc;EAChB,IAAI;GACF,MAAM,EACJ,SACE,OAAO,OAAO;IAChB,QAAQ;IACR,KAAK,OAAO,MAAM;GACpB,CAAC;GACD,MAAM,OAAO,OAAO,KAAK,KAAK,KAAK,SAAS,UAAU,IAAI,IAAI;GAC9D,OAAO;IACL,OAAO,KAAK;IACZ,MAAM,YAAY,MAAM,IAAI;GAC9B;EACF,QAAQ;GACN,OAAO;IACL,OAAO;IACP,MAAM;GACR;EACF;CACF,GAAG;EAAC;EAAO;EAAM;CAAU,CAAC;CAC5B,OAAO,qBAAC,OAAD;EAAU;EAAK,GAAI,WAAW,CAAC,OAAO,MAAM,YAAY,OAAO,QAAQ,GAAG,WAAW;GAC1F,YAAY;GACZ,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA;GAID,qBAAC,OAAD;IAAK,cAAY;IAAO,QAAQ;IAAM,MAAK;IAAM,gBAAe;IAAa,SAAS,OAAO,MAAM,GAAG;IAAS,OAAO;IAAtH,UAAA,CACE,oBAAC,QAAD;KAAM,MAAM;KAAS,QAAQ;KAAO,OAAO;IAAQ,CAAA,GACnD,oBAAC,QAAD;KAAM,GAAG;KAAM,MAAM;IAAQ,CAAA,CAC1B;;GACJ,QAAQ,oBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,IAAI;IAAG,OAAO;KACvD,QAAQ,OAAO;KACf,OAAO,OAAO;IAChB;IACS,UAAA;GACG,CAAA;GACP,WAAW,aAAa,oBAAC,QAAD;IAAM,cAAY,EAAE,gBAAgB;IAAG,GAAI,OAAO,MAAM,OAAO,OAAO;IAAG,MAAK;IACnG,UAAA,oBAAC,MAAD,EAAM,OAAO,EACjB,OAAO,OACT,EAAI,CAAA;GACM,CAAA;GACP,WAAW,aAAa,qBAAC,QAAD;IAAM,GAAI,OAAO,MAAM,OAAO,OAAO;IAArC,UAAA,CACrB,oBAAC,QAAD;KAAM,GAAI,OAAO,MAAM,OAAO,YAAY;KAAI,UAAA,EAAE,gBAAgB;IAAQ,CAAA,GACvE,aAAa,qBAAC,UAAD;KAAQ,GAAI,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO;KAAG,OAAO;MACnF,YAAY;MACZ,OAAO;KACT;KAAG,MAAK;KAAS,SAAS;KAHN,UAAA,CAIV,oBAAC,MAAD;MAAM,MAAM;MAAU,MAAM;KAAK,CAAA,GAChC,EAAE,gBAAgB,CACb;IACN,CAAA,CAAA;;EACL;;AACX,CAAC;AACD,OAAO,cAAc"}

package/es/QRCode/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/QRCode/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/QRCode/index.mjs

@@ -0,0 +1 @@
+export { default } from "./QRCode.mjs";

package/es/QRCode/qrPath.mjs

@@ -0,0 +1,16 @@
+//#region src/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